[PATCH datacenter-manager v2 3/4] ui: dashboard: add new gauge panels widget type

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

This adds gauge chart panels for cpu/memory/storage. Either individually
or combined all three. For either PVE hosts, PBS hosts, or combined.

We use the new pie chart component for this.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 lib/pdm-api-types/src/views.rs    |  15 +++
 ui/src/dashboard/gauge_panel.rs   | 160 ++++++++++++++++++++++++++++++
 ui/src/dashboard/mod.rs           |   3 +
 ui/src/dashboard/view.rs          |   9 +-
 ui/src/dashboard/view/row_view.rs |  43 +++++++-
 5 files changed, 227 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/dashboard/gauge_panel.rs

diff --git a/lib/pdm-api-types/src/views.rs b/lib/pdm-api-types/src/views.rs
index 5e9b4b31..50181e72 100644
--- a/lib/pdm-api-types/src/views.rs
+++ b/lib/pdm-api-types/src/views.rs
@@ -266,6 +266,14 @@ pub struct RowWidget {
     pub r#type: WidgetType,
 }
 
+#[derive(Serialize, Deserialize, PartialEq, Clone, Copy)]
+#[serde(rename_all = "kebab-case")]
+pub enum NodeResourceType {
+    Cpu,
+    Memory,
+    Storage,
+}
+
 #[derive(Serialize, Deserialize, PartialEq, Clone)]
 #[serde(rename_all = "kebab-case")]
 #[serde(tag = "widget-type")]
@@ -295,6 +303,13 @@ pub enum WidgetType {
         grouping: TaskSummaryGrouping,
     },
     ResourceTree,
+    #[serde(rename_all = "kebab-case")]
+    NodeResourceGauge {
+        #[serde(skip_serializing_if = "Option::is_none")]
+        resource: Option<NodeResourceType>,
+        #[serde(skip_serializing_if = "Option::is_none")]
+        remote_type: Option<RemoteType>,
+    },
 }
 
 #[derive(Serialize, Deserialize, PartialEq, Clone, Copy)]
diff --git a/ui/src/dashboard/gauge_panel.rs b/ui/src/dashboard/gauge_panel.rs
new file mode 100644
index 00000000..8b30eb0f
--- /dev/null
+++ b/ui/src/dashboard/gauge_panel.rs
@@ -0,0 +1,160 @@
+use anyhow::Error;
+
+use proxmox_human_byte::HumanByte;
+use pwt::css;
+use pwt::prelude::*;
+use pwt::state::SharedState;
+use pwt::widget::Fa;
+use pwt::widget::{charts::PieChart, Panel};
+use pwt::widget::{error_message, Column, Container, Row};
+
+use pdm_api_types::remotes::RemoteType;
+use pdm_api_types::{resource::ResourcesStatus, views::NodeResourceType};
+
+use crate::dashboard::{create_title_with_icon, loading_column};
+use crate::LoadResult;
+
+pub fn create_gauge_panel(
+    resource_type: Option<NodeResourceType>,
+    remote_type: Option<RemoteType>,
+    status: SharedState<LoadResult<ResourcesStatus, Error>>,
+) -> Panel {
+    let status = status.read();
+    let (show_cpu, show_mem, show_storage, title, subtitle, icon) = match resource_type {
+        Some(NodeResourceType::Cpu) => (true, false, false, tr!("CPU Usage"), false, "cpu"),
+        Some(NodeResourceType::Memory) => {
+            (false, true, false, tr!("Memory Usage"), false, "memory")
+        }
+        Some(NodeResourceType::Storage) => {
+            (false, false, true, tr!("Storage Usage"), false, "database")
+        }
+        None => (true, true, true, tr!("Resource Usage"), true, "tachometer"),
+    };
+
+    let suffix = match remote_type {
+        Some(RemoteType::Pve) => " - Virtual Environment",
+        Some(RemoteType::Pbs) => " - Backup Server",
+        None => "",
+    };
+
+    let is_loading = !status.has_data();
+
+    Panel::new()
+        .title(create_title_with_icon(icon, format!("{title}{suffix}")))
+        .border(true)
+        .with_optional_child(status.data.as_ref().map(|data| {
+            let (cpu, mem, storage) = match remote_type {
+                Some(RemoteType::Pve) => (
+                    show_cpu.then_some((data.pve_cpu_stats.used, data.pve_cpu_stats.max)),
+                    show_mem.then_some((data.pve_memory_stats.used, data.pve_memory_stats.total)),
+                    show_storage
+                        .then_some((data.pve_storage_stats.used, data.pve_storage_stats.total)),
+                ),
+                Some(RemoteType::Pbs) => (
+                    show_cpu.then_some((data.pbs_cpu_stats.used, data.pbs_cpu_stats.max)),
+                    show_mem.then_some((data.pbs_memory_stats.used, data.pbs_memory_stats.total)),
+                    show_storage
+                        .then_some((data.pbs_storage_stats.used, data.pbs_storage_stats.total)),
+                ),
+                None => (
+                    show_cpu.then_some((
+                        data.pve_cpu_stats.used + data.pbs_cpu_stats.used,
+                        data.pve_cpu_stats.max + data.pbs_cpu_stats.max,
+                    )),
+                    show_mem.then_some((
+                        data.pve_memory_stats.used + data.pbs_memory_stats.used,
+                        data.pve_memory_stats.total + data.pbs_memory_stats.total,
+                    )),
+                    show_storage.then_some((
+                        data.pve_storage_stats.used + data.pbs_storage_stats.used,
+                        data.pve_storage_stats.total + data.pbs_storage_stats.total,
+                    )),
+                ),
+            };
+
+            let chart = |percentage: f64, icon: Fa, title: String, extra_text: String| -> Column {
+                let subtitle = subtitle.then_some(
+                    Row::new()
+                        .gap(1)
+                        .class(css::AlignItems::Center)
+                        .class(css::JustifyContent::Center)
+                        .with_child(icon)
+                        .with_child(&title),
+                );
+                Column::new()
+                    .flex(1.0)
+                    .width("0") // correct flex base size for calculation
+                    .max_height(250)
+                    .with_child(
+                        PieChart::new(title, percentage)
+                            .class(css::Overflow::Auto)
+                            .text(format!("{:.0}%", percentage * 100.))
+                            .angle_start(75.0)
+                            .angle_end(285.0)
+                            .show_tooltip(false),
+                    )
+                    .with_optional_child(subtitle)
+                    .with_child(
+                        Container::new()
+                            .padding_top(1)
+                            .class(css::TextAlign::Center)
+                            .with_child(extra_text),
+                    )
+            };
+
+            Row::new()
+                .padding(4)
+                .with_optional_child(cpu.map(|(used, total)| {
+                    let pct = if total == 0.0 { 0.0 } else { used / total };
+                    let extra_text = match remote_type {
+                        Some(RemoteType::Pve) => {
+                            tr!(
+                                "{0} of {1} cores ({2} allocated)",
+                                format!("{used:.2}"),
+                                format!("{total:.0}"),
+                                format!("{:.0}", data.pve_cpu_stats.allocated.unwrap_or(0.0)),
+                            )
+                        }
+                        _ => {
+                            tr!(
+                                "{0} of {1} cores",
+                                format!("{used:.2}"),
+                                format!("{total:.0}")
+                            )
+                        }
+                    };
+                    chart(pct, Fa::new("cpu"), tr!("CPU"), extra_text)
+                }))
+                .with_optional_child(mem.map(|(used, total)| {
+                    chart(
+                        if total == 0 {
+                            0.0
+                        } else {
+                            used as f64 / total as f64
+                        },
+                        Fa::new("memory"),
+                        tr!("Memory"),
+                        tr!("{0} of {1}", HumanByte::from(used), HumanByte::from(total)),
+                    )
+                }))
+                .with_optional_child(storage.map(|(used, total)| {
+                    chart(
+                        if total == 0 {
+                            0.0
+                        } else {
+                            used as f64 / total as f64
+                        },
+                        Fa::new("database"),
+                        tr!("Storage"),
+                        tr!("{0} of {1}", HumanByte::from(used), HumanByte::from(total)),
+                    )
+                }))
+        }))
+        .with_optional_child(is_loading.then_some(loading_column()))
+        .with_optional_child(
+            status
+                .error
+                .as_ref()
+                .map(|err| error_message(&err.to_string())),
+        )
+}
diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index 17e5ccd3..194000c2 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -14,6 +14,9 @@ pub use subscriptions_list::SubscriptionsList;
 mod remote_panel;
 pub use remote_panel::create_remote_panel;
 
+mod gauge_panel;
+pub use gauge_panel::create_gauge_panel;
+
 mod guest_panel;
 pub use guest_panel::create_guest_panel;
 
diff --git a/ui/src/dashboard/view.rs b/ui/src/dashboard/view.rs
index 4a0400ac..eb1a348e 100644
--- a/ui/src/dashboard/view.rs
+++ b/ui/src/dashboard/view.rs
@@ -22,7 +22,7 @@ use crate::dashboard::refresh_config_edit::{
 use crate::dashboard::subscription_info::create_subscriptions_dialog;
 use crate::dashboard::tasks::get_task_options;
 use crate::dashboard::{
-    create_guest_panel, create_node_panel, create_pbs_datastores_panel,
+    create_gauge_panel, create_guest_panel, create_node_panel, create_pbs_datastores_panel,
     create_refresh_config_edit_window, create_remote_panel, create_resource_tree, create_sdn_panel,
     create_subscription_panel, create_task_summary_panel, create_top_entities_panel,
     DashboardStatusRow,
@@ -167,6 +167,10 @@ fn render_widget(
             create_task_summary_panel(statistics, remotes, hours, since)
         }
         WidgetType::ResourceTree => create_resource_tree(redraw_controller),
+        WidgetType::NodeResourceGauge {
+            resource,
+            remote_type,
+        } => create_gauge_panel(*resource, *remote_type, status),
     };
 
     if let Some(title) = &item.title {
@@ -268,7 +272,8 @@ fn required_api_calls(layout: &ViewLayout) -> (bool, bool, bool) {
                         | WidgetType::Guests { .. }
                         | WidgetType::Remotes { .. }
                         | WidgetType::Sdn
-                        | WidgetType::PbsDatastores => {
+                        | WidgetType::PbsDatastores
+                        | WidgetType::NodeResourceGauge { .. } => {
                             status = true;
                         }
                         WidgetType::Subscription => {
diff --git a/ui/src/dashboard/view/row_view.rs b/ui/src/dashboard/view/row_view.rs
index 673b4627..f220f954 100644
--- a/ui/src/dashboard/view/row_view.rs
+++ b/ui/src/dashboard/view/row_view.rs
@@ -21,7 +21,7 @@ use crate::dashboard::view::EditingMessage;
 
 use pdm_api_types::remotes::RemoteType;
 use pdm_api_types::views::{
-    LeaderboardType, RowWidget, TaskSummaryGrouping, ViewLayout, WidgetType,
+    LeaderboardType, NodeResourceType, RowWidget, TaskSummaryGrouping, ViewLayout, WidgetType,
 };
 
 #[derive(Properties, PartialEq)]
@@ -539,6 +539,35 @@ fn create_menu(ctx: &yew::Context<RowViewComp>, new_coords: Position) -> Menu {
         ctx.link()
             .callback(move |_| Msg::AddWidget(new_coords, widget.clone()))
     };
+    let create_gauge_menu = |remote_type: Option<RemoteType>| -> Menu {
+        Menu::new()
+            .with_item(
+                MenuItem::new(tr!("All Resources")).on_select(create_callback(
+                    WidgetType::NodeResourceGauge {
+                        resource: None,
+                        remote_type,
+                    },
+                )),
+            )
+            .with_item(MenuItem::new(tr!("CPU")).on_select(create_callback(
+                WidgetType::NodeResourceGauge {
+                    resource: Some(NodeResourceType::Cpu),
+                    remote_type,
+                },
+            )))
+            .with_item(MenuItem::new(tr!("Memory")).on_select(create_callback(
+                WidgetType::NodeResourceGauge {
+                    resource: Some(NodeResourceType::Memory),
+                    remote_type,
+                },
+            )))
+            .with_item(MenuItem::new(tr!("Storage")).on_select(create_callback(
+                WidgetType::NodeResourceGauge {
+                    resource: Some(NodeResourceType::Storage),
+                    remote_type,
+                },
+            )))
+    };
     Menu::new()
         .with_item(
             MenuItem::new(tr!("Remote Panel"))
@@ -642,4 +671,16 @@ fn create_menu(ctx: &yew::Context<RowViewComp>, new_coords: Position) -> Menu {
             MenuItem::new(tr!("Resource Tree"))
                 .on_select(create_callback(WidgetType::ResourceTree)),
         )
+        .with_item(
+            MenuItem::new(tr!("Resource Usage")).menu(
+                Menu::new()
+                    .with_item(MenuItem::new(tr!("All")).menu(create_gauge_menu(None)))
+                    .with_item(
+                        MenuItem::new(tr!("PVE")).menu(create_gauge_menu(Some(RemoteType::Pve))),
+                    )
+                    .with_item(
+                        MenuItem::new(tr!("PBS")).menu(create_gauge_menu(Some(RemoteType::Pbs))),
+                    ),
+            ),
+        )
 }
-- 
2.47.3