Re: [pdm-devel] [PATCH datacenter-manager v2 02/16] ui: dashboard: refactor creating the node panel into its own module

["Shannon Sterz" <s.sterz@proxmox.com>]

On Thu Oct 23, 2025 at 10:28 AM CEST, Dominik Csapak wrote:
> so we can easily reuse it outside the Dashboard struct. Since this
> shifts the search logic there, it can be removed from the Dashboard
> struct.
>

correct me if i'm wrong, but this also add support for pbs remotes here
if i'm not mistaken? in that case adding that to the commit message
would be helpful.

> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  ui/src/dashboard/mod.rs        | 106 +++--------------------
>  ui/src/dashboard/node_panel.rs | 150 +++++++++++++++++++++++++++++++++
>  2 files changed, 161 insertions(+), 95 deletions(-)
>  create mode 100644 ui/src/dashboard/node_panel.rs
>
> diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
> index 602c8a3b..2e170443 100644
> --- a/ui/src/dashboard/mod.rs
> +++ b/ui/src/dashboard/mod.rs
> @@ -10,7 +10,7 @@ use yew::{
>      Component,
>  };
>
> -use proxmox_yew_comp::{http_get, EditWindow, Status};
> +use proxmox_yew_comp::{http_get, EditWindow};
>  use pwt::{
>      css::{AlignItems, FlexDirection, FlexFit, FlexWrap, JustifyContent},
>      prelude::*,
> @@ -25,16 +25,11 @@ use pwt::{
>      AsyncPool,
>  };
>
> -use pdm_api_types::{
> -    remotes::RemoteType,
> -    resource::{NodeStatusCount, ResourcesStatus},
> -    TaskStatistics,
> -};
> +use pdm_api_types::{remotes::RemoteType, resource::ResourcesStatus, TaskStatistics};
>  use pdm_client::types::TopEntity;
> -use pdm_search::{Search, SearchTerm};
>  use proxmox_client::ApiResponseData;
>
> -use crate::{pve::GuestType, remotes::AddWizard, search_provider::get_search_provider, RemoteList};
> +use crate::{pve::GuestType, remotes::AddWizard, RemoteList};
>
>  mod top_entities;
>  pub use top_entities::TopEntities;
> @@ -42,6 +37,9 @@ pub use top_entities::TopEntities;
>  mod subscription_info;
>  pub use subscription_info::SubscriptionInfo;
>
> +mod node_panel;
> +pub use node_panel::create_node_panel;
> +
>  mod remote_panel;
>  use remote_panel::RemotePanel;
>
> @@ -123,7 +121,6 @@ pub enum Msg {
>      ForceReload,
>      UpdateConfig(DashboardConfig),
>      ConfigWindow(bool),
> -    Search(Search),
>  }
>
>  struct StatisticsOptions {
> @@ -149,81 +146,6 @@ pub struct PdmDashboard {
>  }
>
>  impl PdmDashboard {
> -    fn create_node_panel(&self, ctx: &yew::Context<Self>, icon: &str, title: String) -> Panel {
> -        let mut search_terms = vec![SearchTerm::new("node").category(Some("type"))];
> -        let (status_icon, text): (Fa, String) = match &self.status {
> -            Some(status) => {
> -                match status.pve_nodes {
> -                    NodeStatusCount {
> -                        online,
> -                        offline,
> -                        unknown,
> -                    } if offline > 0 => {
> -                        search_terms.push(SearchTerm::new("offline").category(Some("status")));
> -                        (
> -                            Status::Error.into(),
> -                            tr!(
> -                                "{0} of {1} nodes are offline",
> -                                offline,
> -                                online + offline + unknown,
> -                            ),
> -                        )
> -                    }
> -                    NodeStatusCount { unknown, .. } if unknown > 0 => {
> -                        search_terms.push(SearchTerm::new("unknown").category(Some("status")));
> -                        (
> -                            Status::Warning.into(),
> -                            tr!("{0} nodes have an unknown status", unknown),
> -                        )
> -                    }
> -                    // FIXME, get more detailed status about the failed remotes (name, type, error)?
> -                    NodeStatusCount { online, .. } if status.failed_remotes > 0 => (
> -                        Status::Unknown.into(),
> -                        tr!("{0} of an unknown number of nodes online", online),
> -                    ),
> -                    NodeStatusCount { online, .. } => {
> -                        (Status::Success.into(), tr!("{0} nodes online", online))
> -                    }
> -                }
> -            }
> -            None => (Status::Unknown.into(), String::new()),
> -        };
> -
> -        let loading = self.status.is_none();
> -        let search = Search::with_terms(search_terms);
> -        Panel::new()
> -            .flex(1.0)
> -            .width(300)
> -            .title(create_title_with_icon(icon, title))
> -            .border(true)
> -            .with_child(
> -                Column::new()
> -                    .padding(4)
> -                    .class("pwt-pointer")
> -                    .onclick(ctx.link().callback({
> -                        let search = search.clone();
> -                        move |_| Msg::Search(search.clone())
> -                    }))
> -                    .onkeydown(ctx.link().batch_callback({
> -                        let search = search.clone();
> -                        move |event: KeyboardEvent| match event.key().as_str() {
> -                            "Enter" | " " => Some(Msg::Search(search.clone())),
> -                            _ => None,
> -                        }
> -                    }))
> -                    .class(FlexFit)
> -                    .class(AlignItems::Center)
> -                    .class(JustifyContent::Center)
> -                    .gap(2)
> -                    .with_child(if loading {
> -                        html! {<i class={"pwt-loading-icon"} />}
> -                    } else {
> -                        status_icon.large_4x().into()
> -                    })
> -                    .with_optional_child((!loading).then_some(text)),
> -            )
> -    }
> -
>      fn create_sdn_panel(&self) -> Panel {
>          let sdn_zones_status = self.status.as_ref().map(|status| status.sdn_zones.clone());
>
> @@ -471,12 +393,6 @@ impl Component for PdmDashboard {
>                  self.show_config_window = false;
>                  true
>              }
> -            Msg::Search(search_term) => {
> -                if let Some(provider) = get_search_provider(ctx) {
> -                    provider.search(search_term.into());
> -                }
> -                false
> -            }
>          }
>      }
>
> @@ -533,11 +449,11 @@ impl Component for PdmDashboard {
>                              )
>                              .with_child(RemotePanel::new(self.status.clone())),
>                      )
> -                    .with_child(self.create_node_panel(
> -                        ctx,
> -                        "building",
> -                        tr!("Virtual Environment Nodes"),
> -                    ))
> +                    .with_child(
> +                        create_node_panel(Some(RemoteType::Pve), self.status.clone())
> +                            .flex(1.0)
> +                            .width(300),
> +                    )
>                      .with_child(
>                          create_guest_panel(Some(GuestType::Qemu), self.status.clone())
>                              .flex(1.0)
> diff --git a/ui/src/dashboard/node_panel.rs b/ui/src/dashboard/node_panel.rs
> new file mode 100644
> index 00000000..76ff424e
> --- /dev/null
> +++ b/ui/src/dashboard/node_panel.rs
> @@ -0,0 +1,150 @@
> +use std::rc::Rc;
> +
> +use yew::virtual_dom::{VComp, VNode};
> +
> +use proxmox_yew_comp::Status;
> +use pwt::widget::{Column, Fa, Panel};
> +use pwt::{css, prelude::*};
> +
> +use pdm_api_types::remotes::RemoteType;
> +use pdm_api_types::resource::{NodeStatusCount, ResourcesStatus};
> +use pdm_search::{Search, SearchTerm};
> +
> +use crate::dashboard::create_title_with_icon;
> +use crate::search_provider::get_search_provider;
> +
> +#[derive(Properties, PartialEq)]
> +pub struct NodePanel {
> +    remote_type: Option<RemoteType>,
> +    status: Option<ResourcesStatus>,
> +}
> +
> +impl NodePanel {

nit: similar to patch one, would be nice to document that remote_type:
None means "all" remotes :)

> +    pub fn new(remote_type: Option<RemoteType>, status: Option<ResourcesStatus>) -> Self {
> +        Self {
> +            remote_type,
> +            status,
> +        }
> +    }
> +}
> +
> +impl From<NodePanel> for VNode {
> +    fn from(value: NodePanel) -> Self {
> +        let comp = VComp::new::<PdmNodePanel>(Rc::new(value), None);
> +        VNode::from(comp)
> +    }
> +}
> +
> +pub struct PdmNodePanel {}
> +
> +impl Component for PdmNodePanel {
> +    type Message = Search;
> +    type Properties = NodePanel;
> +
> +    fn create(_ctx: &Context<Self>) -> Self {
> +        Self {}
> +    }
> +
> +    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
> +        if let Some(provider) = get_search_provider(ctx) {
> +            provider.search(msg);
> +        }
> +        false
> +    }
> +
> +    fn view(&self, ctx: &Context<Self>) -> Html {
> +        let props = ctx.props();
> +        let remote_type = &props.remote_type;
> +        let status = &props.status;
> +        let mut search_terms = vec![SearchTerm::new("node").category(Some("type"))];
> +        let (status_icon, text): (Fa, String) = match &status {
> +            Some(status) => {
> +                let count = match remote_type {
> +                    Some(RemoteType::Pve) => status.pve_nodes.clone(),
> +                    Some(RemoteType::Pbs) => status.pbs_nodes.clone(),
> +                    None => NodeStatusCount {
> +                        online: status.pve_nodes.online + status.pbs_nodes.online,
> +                        offline: status.pve_nodes.offline + status.pbs_nodes.offline,
> +                        unknown: status.pve_nodes.unknown + status.pbs_nodes.offline,
> +                    },
> +                };
> +                match count {
> +                    NodeStatusCount {
> +                        online,
> +                        offline,
> +                        unknown,
> +                    } if offline > 0 => {
> +                        search_terms.push(SearchTerm::new("offline").category(Some("status")));
> +                        (
> +                            Status::Error.into(),
> +                            tr!(
> +                                "{0} of {1} nodes are offline",
> +                                offline,
> +                                online + offline + unknown,
> +                            ),
> +                        )
> +                    }
> +                    NodeStatusCount { unknown, .. } if unknown > 0 => {
> +                        search_terms.push(SearchTerm::new("unknown").category(Some("status")));
> +                        (
> +                            Status::Warning.into(),
> +                            tr!("{0} nodes have an unknown status", unknown),
> +                        )
> +                    }
> +                    // FIXME, get more detailed status about the failed remotes (name, type, error)?
> +                    NodeStatusCount { online, .. } if status.failed_remotes > 0 => (
> +                        Status::Unknown.into(),
> +                        tr!("{0} of an unknown number of nodes online", online),
> +                    ),
> +                    NodeStatusCount { online, .. } => {
> +                        (Status::Success.into(), tr!("{0} nodes online", online))
> +                    }
> +                }
> +            }
> +            None => (Status::Unknown.into(), String::new()),
> +        };
> +
> +        let loading = status.is_none();
> +        let search = Search::with_terms(search_terms);
> +        Column::new()
> +            .padding(4)
> +            .class("pwt-pointer")
> +            .onclick(ctx.link().callback({
> +                let search = search.clone();
> +                move |_| search.clone()
> +            }))
> +            .onkeydown(ctx.link().batch_callback({
> +                let search = search.clone();
> +                move |event: KeyboardEvent| match event.key().as_str() {
> +                    "Enter" | " " => Some(search.clone()),
> +                    _ => None,
> +                }
> +            }))
> +            .class(css::FlexFit)
> +            .class(css::AlignItems::Center)
> +            .class(css::JustifyContent::Center)
> +            .gap(2)
> +            .with_child(if loading {
> +                html! {<i class={"pwt-loading-icon"} />}
> +            } else {
> +                status_icon.large_4x().into()
> +            })
> +            .with_optional_child((!loading).then_some(text))
> +            .into()
> +    }
> +}
> +
> +pub fn create_node_panel(
> +    remote_type: Option<RemoteType>,
> +    status: Option<ResourcesStatus>,
> +) -> Panel {
> +    let (icon, title) = match remote_type {
> +        Some(RemoteType::Pve) => ("building", tr!("Virtual Environment Nodes")),
> +        Some(RemoteType::Pbs) => ("building-o", tr!("Backup Server Nodes")),

should `building-o` be `floppy-o` here? we tend to use the floppy icon
for pbs a bit more often iirc.

> +        None => ("building", tr!("Nodes")),
> +    };
> +    Panel::new()
> +        .title(create_title_with_icon(icon, title))
> +        .border(true)
> +        .with_child(NodePanel::new(remote_type, status))
> +}



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel