From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 8326D1FF191 for ; Tue, 21 Oct 2025 16:08:16 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 42C4CAAF; Tue, 21 Oct 2025 16:08:40 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Date: Tue, 21 Oct 2025 16:03:24 +0200 Message-ID: <20251021140801.3611022-9-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20251021140801.3611022-1-d.csapak@proxmox.com> References: <20251021140801.3611022-1-d.csapak@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.028 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 08/15] ui: dashboard: refactor top entities panel creation to its own module 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" so we can more easily reuse it outside the dashboard struct. Introduce the 'LeaderboardType' enum to differentiate between the various types. Signed-off-by: Dominik Csapak --- ui/src/dashboard/mod.rs | 83 +++++++++++++------------------- ui/src/dashboard/top_entities.rs | 45 +++++++++++++++-- ui/src/dashboard/types.rs | 9 ++++ 3 files changed, 82 insertions(+), 55 deletions(-) create mode 100644 ui/src/dashboard/types.rs diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs index 19a09a8c..bb6b4049 100644 --- a/ui/src/dashboard/mod.rs +++ b/ui/src/dashboard/mod.rs @@ -17,7 +17,6 @@ use pwt::{ props::StorageLocation, state::PersistentState, widget::{ - error_message, form::{DisplayField, FormContext, Number}, Column, Container, Fa, InputPanel, Panel, Row, }, @@ -25,13 +24,12 @@ use pwt::{ }; use pdm_api_types::{remotes::RemoteType, resource::ResourcesStatus, TaskStatistics}; -use pdm_client::types::TopEntity; use proxmox_client::ApiResponseData; use crate::{pve::GuestType, remotes::AddWizard, RemoteList}; mod top_entities; -pub use top_entities::TopEntities; +pub use top_entities::create_top_entities_panel; mod subscription_info; pub use subscription_info::create_subscription_panel; @@ -56,6 +54,8 @@ mod filtered_tasks; mod tasks; use tasks::create_task_summary_panel; +pub mod types; + /// The initial 'max-age' parameter in seconds. The backend polls every 15 minutes, so to increase /// the chance of showing some data quickly use that as max age at the very first load. pub const INITIAL_MAX_AGE_S: u64 = 900; @@ -145,32 +145,6 @@ pub struct PdmDashboard { } impl PdmDashboard { - fn create_top_entities_panel( - &self, - icon: &str, - title: String, - metrics_title: String, - entities: Option<&Vec>, - threshold: f64, - ) -> Panel { - Panel::new() - .flex(1.0) - .width(500) - .min_width(400) - .border(true) - .title(create_title_with_icon(icon, title)) - .with_optional_child( - entities - .map(|entities| TopEntities::new(entities.clone(), metrics_title, threshold)), - ) - .with_optional_child(self.top_entities.is_none().then_some(loading_column())) - .with_optional_child( - self.last_top_entities_error - .as_ref() - .map(|err| error_message(&err.to_string())), - ) - } - fn reload(&mut self, ctx: &yew::Context) { let max_age = if self.loaded_once { self.config.max_age.unwrap_or(DEFAULT_MAX_AGE_S) @@ -479,27 +453,36 @@ impl Component for PdmDashboard { .padding_top(0) .class(FlexWrap::Wrap) //.min_height(175) - .with_child(self.create_top_entities_panel( - "desktop", - tr!("Guests With the Highest CPU Usage"), - tr!("CPU usage"), - self.top_entities.as_ref().map(|e| &e.guest_cpu), - 0.85, - )) - .with_child(self.create_top_entities_panel( - "building", - tr!("Nodes With the Highest CPU Usage"), - tr!("CPU usage"), - self.top_entities.as_ref().map(|e| &e.node_cpu), - 0.85, - )) - .with_child(self.create_top_entities_panel( - "building", - tr!("Nodes With the Highest Memory Usage"), - tr!("Memory usage"), - self.top_entities.as_ref().map(|e| &e.node_memory), - 0.95, - )), + .with_child( + create_top_entities_panel( + self.top_entities.as_ref().map(|e| e.guest_cpu.clone()), + self.last_top_entities_error.as_ref(), + types::LeaderboardType::GuestCpu, + ) + .flex(1.0) + .width(500) + .min_width(400), + ) + .with_child( + create_top_entities_panel( + self.top_entities.as_ref().map(|e| e.node_cpu.clone()), + self.last_top_entities_error.as_ref(), + types::LeaderboardType::NodeCpu, + ) + .flex(1.0) + .width(500) + .min_width(400), + ) + .with_child( + create_top_entities_panel( + self.top_entities.as_ref().map(|e| e.node_memory.clone()), + self.last_top_entities_error.as_ref(), + types::LeaderboardType::NodeCpu, + ) + .flex(1.0) + .width(500) + .min_width(400), + ), ) .with_child( Container::new() diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs index c93ee252..dfe38692 100644 --- a/ui/src/dashboard/top_entities.rs +++ b/ui/src/dashboard/top_entities.rs @@ -1,12 +1,10 @@ use std::rc::Rc; use web_sys::HtmlElement; -use yew::{ - virtual_dom::{VComp, VNode}, - Component, NodeRef, PointerEvent, Properties, TargetCast, -}; +use yew::virtual_dom::{VComp, VNode}; use proxmox_yew_comp::utils::render_epoch; +use pwt::prelude::*; use pwt::{ css::{AlignItems, Display, FlexFit, JustifyContent}, dom::align::{align_to, AlignOptions}, @@ -15,12 +13,13 @@ use pwt::{ WidgetStyleBuilder, }, tr, - widget::{ActionIcon, Column, Container, Row}, + widget::{error_message, ActionIcon, Column, Container, Panel, Row}, }; use pdm_client::types::{Resource, TopEntity}; use crate::{ + dashboard::{create_title_with_icon, loading_column, types::LeaderboardType}, get_deep_url, get_resource_node, navigate_to, renderer::{render_resource_icon, render_resource_name}, }; @@ -326,3 +325,39 @@ fn graph_from_data(data: &Vec>, threshold: f64) -> Container { ), ) } + +pub fn create_top_entities_panel( + entities: Option>, + error: Option<&proxmox_client::Error>, + leaderboard_type: LeaderboardType, +) -> Panel { + let (icon, title, metrics_title, threshold) = match leaderboard_type { + LeaderboardType::GuestCpu => ( + "desktop", + tr!("Guests With the Highest CPU Usage"), + tr!("CPU usage"), + 0.85, + ), + LeaderboardType::NodeCpu => ( + "building", + tr!("Nodes With the Highest CPU Usage"), + tr!("CPU usage"), + 0.85, + ), + LeaderboardType::NodeMemory => ( + "building", + tr!("Nodes With the Highest Memory Usage"), + tr!("Memory usage"), + 0.95, + ), + }; + let loading = entities.is_none() && error.is_none(); + Panel::new() + .border(true) + .title(create_title_with_icon(icon, title)) + .with_optional_child( + entities.map(|entities| TopEntities::new(entities, metrics_title, threshold)), + ) + .with_optional_child(loading.then_some(loading_column())) + .with_optional_child(error.map(|err| error_message(&err.to_string()))) +} diff --git a/ui/src/dashboard/types.rs b/ui/src/dashboard/types.rs new file mode 100644 index 00000000..152d4f57 --- /dev/null +++ b/ui/src/dashboard/types.rs @@ -0,0 +1,9 @@ +use serde::{Deserialize, Serialize}; + +#[derive(Serialize, Deserialize, PartialEq, Clone, Copy)] +#[serde(rename_all = "kebab-case")] +pub enum LeaderboardType { + GuestCpu, + NodeCpu, + NodeMemory, +} -- 2.47.3 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel