[pdm-devel] [PATCH datacenter-manager] fix: show empty-state message inside the top entities panels

[Shan Shaji <s.shaji@proxmox.com>]

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