[pdm-devel] [PATCH datacenter-manager v3] ui: top entities: show hint message if there are no entities

[Shan Shaji]

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 at proxmox.com>
---
 changes since v2: Thanks @Lukas
 - Removed new line changes
 - Updated commit message. 
 - Added `if` clause for better readability. 
 
 changes since v1: Thanks @Dominik
 - Removed the extra property inside the TopEntities struct.
 - Added optional_child to the Panel to show the empty error message. 
 - There was an empty space caused by the `TopEntities` component when the
   entities list was empty. Inorder to fix that now the TopEntities will
   only be rendered if the entities list is not empty.

 ui/src/dashboard/top_entities.rs | 67 +++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs
index ab8c703..77635e4 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};
 
@@ -336,34 +337,48 @@ 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.and_then(|entities| {
+            let html: Html = if entities.is_empty() {
+                Row::new()
+                    .padding(4)
+                    .gap(2)
+                    .with_child(Fa::new("info-circle").fixed_width())
+                    .with_child(&metrics_empty_message).into()
+            } else {
+                TopEntities::new(entities, metrics_title, threshold).into()
+            };
+
+            Some(html)
+        }))
         .with_optional_child((!top_entities.has_data()).then_some(loading_column()))
         .with_optional_child(
             top_entities
-- 
2.47.3