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

[Dominik Csapak <d.csapak@proxmox.com>]

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