* [pdm-devel] [PATCH datacenter-manager] fix: show empty-state message inside the top entities panels
@ 2025-12-02 17:27 Shan Shaji
2025-12-03 15:02 ` Dominik Csapak
0 siblings, 1 reply; 3+ messages in thread
From: Shan Shaji @ 2025-12-02 17:27 UTC (permalink / raw)
To: pdm-devel
When the entities list was empty, the dashboard did not display any
message inside the Top Entities panels. This change adds a empty-state
message so the panels provide proper feedback when no entries are
available.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
ui/src/dashboard/top_entities.rs | 79 +++++++++++++++++++++-----------
1 file changed, 52 insertions(+), 27 deletions(-)
diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs
index ab8c703..a78df57 100644
--- a/ui/src/dashboard/top_entities.rs
+++ b/ui/src/dashboard/top_entities.rs
@@ -1,6 +1,7 @@
use std::rc::Rc;
use pwt::state::SharedState;
+use pwt::widget::Fa;
use web_sys::HtmlElement;
use yew::virtual_dom::{VComp, VNode};
@@ -31,16 +32,23 @@ use crate::{
pub struct TopEntities {
entities: Vec<TopEntity>,
metrics_title: String,
+ metrics_empty_message: String,
/// The threshold for the oklab color gradient relaying how much load there is.
/// Will be clamped between 0.001 and 0.999 to ensure invariants to avoid division by zero.
threshold: f64,
}
impl TopEntities {
- pub fn new(entities: Vec<TopEntity>, metrics_title: String, threshold: f64) -> Self {
+ pub fn new(
+ entities: Vec<TopEntity>,
+ metrics_title: String,
+ metrics_empty_message: String,
+ threshold: f64,
+ ) -> Self {
Self {
entities,
metrics_title,
+ metrics_empty_message,
threshold: threshold.clamp(0.001, 0.999),
}
}
@@ -132,6 +140,7 @@ impl Component for TopEntitiesComp {
.style("gap", "var(--pwt-spacer-3)");
let mut tooltip = None;
let data = &props.entities;
+
for entity in data.iter().rev() {
let resource = &entity.resource;
let rrd = &entity.rrd_data;
@@ -199,6 +208,18 @@ impl Component for TopEntitiesComp {
.with_optional_child(tooltip_anchor),
);
}
+
+ if data.is_empty() {
+ list.add_child(
+ Row::new()
+ .gap(2)
+ .class(AlignItems::Center)
+ .style("grid-column", "span 2")
+ .with_child(Fa::new("info-circle").fixed_width())
+ .with_child(&props.metrics_empty_message),
+ );
+ }
+
Container::new()
.class(FlexFit)
.with_child(list)
@@ -336,34 +357,38 @@ pub fn create_top_entities_panel(
leaderboard_type: LeaderboardType,
) -> Panel {
let top_entities = top_entities.read();
- let (entities, icon, title, metrics_title, threshold) = match leaderboard_type {
- LeaderboardType::GuestCpu => (
- top_entities.data.as_ref().map(|e| e.guest_cpu.clone()),
- "desktop",
- tr!("Guests With the Highest CPU Usage"),
- tr!("CPU usage"),
- 0.85,
- ),
- LeaderboardType::NodeCpu => (
- top_entities.data.as_ref().map(|e| e.node_cpu.clone()),
- "building",
- tr!("Nodes With the Highest CPU Usage"),
- tr!("CPU usage"),
- 0.85,
- ),
- LeaderboardType::NodeMemory => (
- top_entities.data.as_ref().map(|e| e.node_memory.clone()),
- "building",
- tr!("Nodes With the Highest Memory Usage"),
- tr!("Memory usage"),
- 0.95,
- ),
- };
+ let (entities, icon, title, metrics_title, metrics_empty_message, threshold) =
+ match leaderboard_type {
+ LeaderboardType::GuestCpu => (
+ top_entities.data.as_ref().map(|e| e.guest_cpu.clone()),
+ "desktop",
+ tr!("Guests With the Highest CPU Usage"),
+ tr!("CPU usage"),
+ tr!("No guests available"),
+ 0.85,
+ ),
+ LeaderboardType::NodeCpu => (
+ top_entities.data.as_ref().map(|e| e.node_cpu.clone()),
+ "building",
+ tr!("Nodes With the Highest CPU Usage"),
+ tr!("CPU usage"),
+ tr!("No nodes available"),
+ 0.85,
+ ),
+ LeaderboardType::NodeMemory => (
+ top_entities.data.as_ref().map(|e| e.node_memory.clone()),
+ "building",
+ tr!("Nodes With the Highest Memory Usage"),
+ tr!("Memory usage"),
+ tr!("No nodes available"),
+ 0.95,
+ ),
+ };
Panel::new()
.title(create_title_with_icon(icon, title))
- .with_optional_child(
- entities.map(|entities| TopEntities::new(entities, metrics_title, threshold)),
- )
+ .with_optional_child(entities.map(|entities| {
+ TopEntities::new(entities, metrics_title, metrics_empty_message, threshold)
+ }))
.with_optional_child((!top_entities.has_data()).then_some(loading_column()))
.with_optional_child(
top_entities
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 3+ messages in thread* Re: [pdm-devel] [PATCH datacenter-manager] fix: show empty-state message inside the top entities panels
2025-12-02 17:27 [pdm-devel] [PATCH datacenter-manager] fix: show empty-state message inside the top entities panels Shan Shaji
@ 2025-12-03 15:02 ` Dominik Csapak
2025-12-03 16:44 ` Shan Shaji
0 siblings, 1 reply; 3+ messages in thread
From: Dominik Csapak @ 2025-12-03 15:02 UTC (permalink / raw)
To: Proxmox Datacenter Manager development discussion, Shan Shaji
high level comment:
i think it would be much nicer to display the empty message outside the
topentities struct namely (see comment inline)
On 12/2/25 6:27 PM, Shan Shaji wrote:
> When the entities list was empty, the dashboard did not display any
> message inside the Top Entities panels. This change adds a empty-state
> message so the panels provide proper feedback when no entries are
> available.
>
> Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
> ---
> ui/src/dashboard/top_entities.rs | 79 +++++++++++++++++++++-----------
> 1 file changed, 52 insertions(+), 27 deletions(-)
>
> diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs
> index ab8c703..a78df57 100644
> --- a/ui/src/dashboard/top_entities.rs
> +++ b/ui/src/dashboard/top_entities.rs
> @@ -1,6 +1,7 @@
> use std::rc::Rc;
>
> use pwt::state::SharedState;
> +use pwt::widget::Fa;
> use web_sys::HtmlElement;
> use yew::virtual_dom::{VComp, VNode};
>
> @@ -31,16 +32,23 @@ use crate::{
> pub struct TopEntities {
> entities: Vec<TopEntity>,
> metrics_title: String,
> + metrics_empty_message: String,
> /// The threshold for the oklab color gradient relaying how much load there is.
> /// Will be clamped between 0.001 and 0.999 to ensure invariants to avoid division by zero.
> threshold: f64,
> }
>
> impl TopEntities {
> - pub fn new(entities: Vec<TopEntity>, metrics_title: String, threshold: f64) -> Self {
> + pub fn new(
> + entities: Vec<TopEntity>,
> + metrics_title: String,
> + metrics_empty_message: String,
> + threshold: f64,
> + ) -> Self {
> Self {
> entities,
> metrics_title,
> + metrics_empty_message,
> threshold: threshold.clamp(0.001, 0.999),
> }
> }
> @@ -132,6 +140,7 @@ impl Component for TopEntitiesComp {
> .style("gap", "var(--pwt-spacer-3)");
> let mut tooltip = None;
> let data = &props.entities;
> +
> for entity in data.iter().rev() {
> let resource = &entity.resource;
> let rrd = &entity.rrd_data;
> @@ -199,6 +208,18 @@ impl Component for TopEntitiesComp {
> .with_optional_child(tooltip_anchor),
> );
> }
> +
> + if data.is_empty() {
> + list.add_child(
> + Row::new()
> + .gap(2)
> + .class(AlignItems::Center)
> + .style("grid-column", "span 2")
> + .with_child(Fa::new("info-circle").fixed_width())
> + .with_child(&props.metrics_empty_message),
> + );
> + }
> +
> Container::new()
> .class(FlexFit)
> .with_child(list)
> @@ -336,34 +357,38 @@ pub fn create_top_entities_panel(
> leaderboard_type: LeaderboardType,
> ) -> Panel {
> let top_entities = top_entities.read();
> - let (entities, icon, title, metrics_title, threshold) = match leaderboard_type {
> - LeaderboardType::GuestCpu => (
> - top_entities.data.as_ref().map(|e| e.guest_cpu.clone()),
> - "desktop",
> - tr!("Guests With the Highest CPU Usage"),
> - tr!("CPU usage"),
> - 0.85,
> - ),
> - LeaderboardType::NodeCpu => (
> - top_entities.data.as_ref().map(|e| e.node_cpu.clone()),
> - "building",
> - tr!("Nodes With the Highest CPU Usage"),
> - tr!("CPU usage"),
> - 0.85,
> - ),
> - LeaderboardType::NodeMemory => (
> - top_entities.data.as_ref().map(|e| e.node_memory.clone()),
> - "building",
> - tr!("Nodes With the Highest Memory Usage"),
> - tr!("Memory usage"),
> - 0.95,
> - ),
> - };
> + let (entities, icon, title, metrics_title, metrics_empty_message, threshold) =
> + match leaderboard_type {
> + LeaderboardType::GuestCpu => (
> + top_entities.data.as_ref().map(|e| e.guest_cpu.clone()),
> + "desktop",
> + tr!("Guests With the Highest CPU Usage"),
> + tr!("CPU usage"),
> + tr!("No guests available"),
> + 0.85,
> + ),
> + LeaderboardType::NodeCpu => (
> + top_entities.data.as_ref().map(|e| e.node_cpu.clone()),
> + "building",
> + tr!("Nodes With the Highest CPU Usage"),
> + tr!("CPU usage"),
> + tr!("No nodes available"),
> + 0.85,
> + ),
> + LeaderboardType::NodeMemory => (
> + top_entities.data.as_ref().map(|e| e.node_memory.clone()),
> + "building",
> + tr!("Nodes With the Highest Memory Usage"),
> + tr!("Memory usage"),
> + tr!("No nodes available"),
> + 0.95,
> + ),
> + };
> Panel::new()
> .title(create_title_with_icon(icon, title))
> - .with_optional_child(
> - entities.map(|entities| TopEntities::new(entities, metrics_title, threshold)),
> - )
> + .with_optional_child(entities.map(|entities| {
> + TopEntities::new(entities, metrics_title, metrics_empty_message, threshold)
> + }))
> .with_optional_child((!top_entities.has_data()).then_some(loading_column()))
here. we already check here if the data is empty, we could also display
the empty message here, this would save us the
property but it's still in the same file
we can just add a new optional_child (not tested code):
.with_optional_child(entities.and_then(|entitites|
entities.is_empty().then_some( .. insert empty text row here .. )
> .with_optional_child(
> top_entities
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2025-12-03 16:44 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-12-02 17:27 [pdm-devel] [PATCH datacenter-manager] fix: show empty-state message inside the top entities panels Shan Shaji
2025-12-03 15:02 ` Dominik Csapak
2025-12-03 16:44 ` Shan Shaji
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox