From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 202E01FF15C for ; Fri, 17 Oct 2025 16:11:44 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 9F9DC51CD; Fri, 17 Oct 2025 16:12:01 +0200 (CEST) From: Christian Ebner To: pdm-devel@lists.proxmox.com Date: Fri, 17 Oct 2025 16:11:34 +0200 Message-ID: <20251017141137.845295-9-c.ebner@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20251017141137.845295-1-c.ebner@proxmox.com> References: <20251017141137.845295-1-c.ebner@proxmox.com> MIME-Version: 1.0 X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1760710311846 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.042 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pdm-devel] [PATCH datacenter-manager v2 08/11] ui: dashboard: reimplement node status panel as dedicated component X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" Reimplement the current node status panel as a dedicated component for better encapsulation and input data handling, analogous to how guest status or SDN status panels are handled. Instead of passing in the whole status, only pass the state required for the component to be rendered. Already take into account that this will be used to render the PBS node status as well. Signed-off-by: Christian Ebner --- changes since version 1: - not present in previous version ui/src/dashboard/node_status_panel.rs | 144 ++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 ui/src/dashboard/node_status_panel.rs diff --git a/ui/src/dashboard/node_status_panel.rs b/ui/src/dashboard/node_status_panel.rs new file mode 100644 index 0000000..e9e8c6b --- /dev/null +++ b/ui/src/dashboard/node_status_panel.rs @@ -0,0 +1,144 @@ +use std::rc::Rc; + +use pdm_api_types::remotes::RemoteType; +use pdm_api_types::resource::NodeStatusCount; +use pdm_search::{Search, SearchTerm}; +use proxmox_yew_comp::Status; +use pwt::{ + css::{AlignItems, FlexFit, JustifyContent}, + prelude::*, + widget::{Column, Fa}, +}; +use yew::{ + virtual_dom::{VComp, VNode}, + Properties, +}; + +use crate::search_provider::get_search_provider; + +use super::loading_column; + +#[derive(PartialEq, Clone, Properties)] +pub struct NodeStatusPanel { + remote_type: RemoteType, + status: Option, + failed_remotes: usize, +} + +impl NodeStatusPanel { + pub fn new( + remote_type: RemoteType, + status: Option, + failed_remotes: usize, + ) -> Self { + yew::props!(Self { + remote_type, + status, + failed_remotes, + }) + } +} + +impl From for VNode { + fn from(value: NodeStatusPanel) -> Self { + let comp = VComp::new::(Rc::new(value), None); + VNode::from(comp) + } +} + +pub struct NodeStatusPanelComponent {} + +impl yew::Component for NodeStatusPanelComponent { + type Message = Search; + type Properties = NodeStatusPanel; + + fn create(_ctx: &yew::Context) -> Self { + Self {} + } + + fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { + if let Some(provider) = get_search_provider(ctx) { + provider.search(msg); + } + false + } + + fn view(&self, ctx: &yew::Context) -> yew::Html { + let props = ctx.props(); + + let (icon, status_msg, search_terms) = match &props.status { + Some(status) => map_status(status, props.remote_type, props.failed_remotes), + None => return loading_column().into(), + }; + + let column = Column::new() + .padding(4) + .class("pwt-pointer") + .class(FlexFit) + .class(AlignItems::Center) + .class(JustifyContent::Center) + .gap(2) + .onclick(ctx.link().callback({ + let search_terms = search_terms.clone(); + move |_| Search::with_terms(search_terms.clone()) + })) + .onkeydown(ctx.link().batch_callback({ + let search_terms = search_terms.clone(); + move |event: KeyboardEvent| match event.key().as_str() { + "Enter" | " " => Some(Search::with_terms(search_terms.clone())), + _ => None, + } + })) + .with_child(icon.large_4x()) + .with_child(status_msg); + column.into() + } +} + +fn map_status( + status: &NodeStatusCount, + remote_type: RemoteType, + failed_remotes: usize, +) -> (Fa, String, Vec) { + let mut search_terms = vec![ + SearchTerm::new("node").category(Some("type")), + SearchTerm::new(remote_type.to_string()).category(Some("remote-type")), + ]; + let (icon, status_msg) = match status { + 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), + ) + } + NodeStatusCount { online, .. } if failed_remotes > 0 => match remote_type { + RemoteType::Pve => ( + Status::Unknown.into(), + tr!("{0} of an unknown number of nodes online", online), + ), + RemoteType::Pbs => ( + Status::Error.into(), + tr!("{0} remotes failed", failed_remotes), + ), + }, + NodeStatusCount { online, .. } => (Status::Success.into(), tr!("{0} nodes online", online)), + }; + + (icon, status_msg, search_terms) +} -- 2.47.3 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel