[pdm-devel] [PATCH datacenter-manager 08/15] ui: dashboard: refactor top entities panel creation to its own module

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

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 <d.csapak@proxmox.com>
---
 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<TopEntity>>,
-        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<Self>) {
         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<Option<f64>>, threshold: f64) -> Container {
             ),
         )
 }
+
+pub fn create_top_entities_panel(
+    entities: Option<Vec<TopEntity>>,
+    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