public inbox for pdm-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Lukas Wagner <l.wagner@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [PATCH datacenter-manager v4 12/12] ui: lxc/qemu/node: use RRD value render helpers from yew-comp
Date: Wed, 15 Apr 2026 15:20:13 +0200	[thread overview]
Message-ID: <20260415132013.440581-13-l.wagner@proxmox.com> (raw)
In-Reply-To: <20260415132013.440581-1-l.wagner@proxmox.com>

This changes the precision of CPU usage labels a tiny bit, before there
were two decimal places (24.42%) while now there is only one (24.3%).
Using one decimal place here seems a bit cleaner in the UI and the
additional precision is not very useful for these kinds of values.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
Reviewed-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
Reviewed-by: Michael Köppl <m.koeppl@proxmox.com>
Tested-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
Tested-by: Michael Köppl <m.koeppl@proxmox.com>
---
 ui/src/pbs/node/overview.rs | 28 ++++++----------------------
 ui/src/pve/lxc/overview.rs  | 34 +++++-----------------------------
 ui/src/pve/node/overview.rs | 28 ++++++----------------------
 ui/src/pve/qemu/overview.rs | 34 +++++-----------------------------
 4 files changed, 22 insertions(+), 102 deletions(-)

diff --git a/ui/src/pbs/node/overview.rs b/ui/src/pbs/node/overview.rs
index b63d45f2..9aef2851 100644
--- a/ui/src/pbs/node/overview.rs
+++ b/ui/src/pbs/node/overview.rs
@@ -5,7 +5,9 @@ use yew::{
     Context,
 };
 
-use proxmox_yew_comp::{node_info, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use proxmox_yew_comp::{
+    node_info, rrd_value_renderer, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series,
+};
 use pwt::{
     css::{ColorScheme, FlexFit, JustifyContent},
     prelude::*,
@@ -232,38 +234,20 @@ impl yew::Component for PbsNodeOverviewPanelComp {
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("CPU Usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}%", v * 100.0)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_cpu_usage)
                                 .serie0(Some(self.cpu_data.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("Server Load"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}", v)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_load)
                                 .serie0(Some(self.load_data.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("Memory Usage"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bytes)
                                 .serie0(Some(self.mem_data.clone()))
                                 .serie1(Some(self.mem_total_data.clone())),
                         ),
diff --git a/ui/src/pve/lxc/overview.rs b/ui/src/pve/lxc/overview.rs
index 8c0196b3..2d8cc670 100644
--- a/ui/src/pve/lxc/overview.rs
+++ b/ui/src/pve/lxc/overview.rs
@@ -13,7 +13,7 @@ use pwt::props::WidgetBuilder;
 use pwt::widget::{Column, Container, Panel, Progress, Row};
 use pwt::AsyncPool;
 
-use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use proxmox_yew_comp::{rrd_value_renderer, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 
 use pdm_api_types::{resource::PveLxcResource, rrddata::LxcDataPoint};
 use pdm_client::types::{IsRunning, LxcStatus};
@@ -338,25 +338,13 @@ impl yew::Component for LxcanelComp {
                         .with_child(
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("CPU Usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}%", v * 100.0)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_cpu_usage)
                                 .serie0(Some(self.cpu.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Memory usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bytes)
                                 .serie0(Some(self.memory.clone()))
                                 .serie1(Some(self.memory_max.clone())),
                         )
@@ -364,13 +352,7 @@ impl yew::Component for LxcanelComp {
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Network Traffic"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bandwidth)
                                 .serie0(Some(self.netin.clone()))
                                 .serie1(Some(self.netout.clone())),
                         )
@@ -378,13 +360,7 @@ impl yew::Component for LxcanelComp {
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Disk I/O"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bandwidth)
                                 .serie0(Some(self.diskread.clone()))
                                 .serie1(Some(self.diskwrite.clone())),
                         ),
diff --git a/ui/src/pve/node/overview.rs b/ui/src/pve/node/overview.rs
index c07180b0..9df79c42 100644
--- a/ui/src/pve/node/overview.rs
+++ b/ui/src/pve/node/overview.rs
@@ -5,7 +5,9 @@ use yew::{
     Context,
 };
 
-use proxmox_yew_comp::{node_info, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use proxmox_yew_comp::{
+    node_info, rrd_value_renderer, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series,
+};
 use pwt::{
     css::{ColorScheme, FlexFit, JustifyContent},
     prelude::*,
@@ -236,38 +238,20 @@ impl yew::Component for PveNodeOverviewPanelComp {
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("CPU Usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}%", v * 100.0)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_cpu_usage)
                                 .serie0(Some(self.cpu_data.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("Server Load"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}", v)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_load)
                                 .serie0(Some(self.load_data.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time_data.clone())
                                 .title(tr!("Memory Usage"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bytes)
                                 .serie0(Some(self.mem_total_data.clone()))
                                 .serie1(Some(self.mem_data.clone())),
                         ),
diff --git a/ui/src/pve/qemu/overview.rs b/ui/src/pve/qemu/overview.rs
index 6e601d00..7592de11 100644
--- a/ui/src/pve/qemu/overview.rs
+++ b/ui/src/pve/qemu/overview.rs
@@ -5,7 +5,7 @@ use serde_json::json;
 use yew::virtual_dom::{VComp, VNode};
 
 use proxmox_human_byte::HumanByte;
-use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use proxmox_yew_comp::{rrd_value_renderer, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 
 use pwt::prelude::*;
 use pwt::props::WidgetBuilder;
@@ -347,25 +347,13 @@ impl yew::Component for QemuOverviewPanelComp {
                         .with_child(
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("CPU Usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        format!("{:.2}%", v * 100.0)
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_cpu_usage)
                                 .serie0(Some(self.cpu.clone())),
                         )
                         .with_child(
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Memory usage"))
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bytes)
                                 .serie0(Some(self.memory.clone()))
                                 .serie1(Some(self.memory_max.clone())),
                         )
@@ -373,13 +361,7 @@ impl yew::Component for QemuOverviewPanelComp {
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Network Traffic"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bandwidth)
                                 .serie0(Some(self.netin.clone()))
                                 .serie1(Some(self.netout.clone())),
                         )
@@ -387,13 +369,7 @@ impl yew::Component for QemuOverviewPanelComp {
                             RRDGraph::new(self.time.clone())
                                 .title(tr!("Disk I/O"))
                                 .binary(true)
-                                .render_value(|v: &f64| {
-                                    if v.is_finite() {
-                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
-                                    } else {
-                                        v.to_string()
-                                    }
-                                })
+                                .render_value(rrd_value_renderer::render_bandwidth)
                                 .serie0(Some(self.diskread.clone()))
                                 .serie1(Some(self.diskwrite.clone())),
                         ),
-- 
2.47.3





      parent reply	other threads:[~2026-04-15 13:20 UTC|newest]

Thread overview: 13+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-04-15 13:20 [PATCH datacenter-manager/proxmox-yew-comp v4 00/12] metric collection for the PDM host Lukas Wagner
2026-04-15 13:20 ` [PATCH proxmox-yew-comp v4 01/12] node status panel: add `children` property Lukas Wagner
2026-04-15 13:20 ` [PATCH proxmox-yew-comp v4 02/12] RRDGrid: fix size observer by attaching node reference to rendered container Lukas Wagner
2026-04-15 13:20 ` [PATCH proxmox-yew-comp v4 03/12] RRDGrid: add padding and increase gap between elements Lukas Wagner
2026-04-15 13:20 ` [PATCH proxmox-yew-comp v4 04/12] rrd: add rrd_value_renderer module Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 05/12] metric collection: clarify naming for remote metric collection Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 06/12] metric collection: fix minor typo in error message Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 07/12] metric collection: collect PDM host metrics in a new collection task Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 08/12] api: fix /nodes/localhost/rrddata endpoint Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 09/12] pdm: node rrd data: rename 'total-time' to 'metric-collection-total-time' Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 10/12] pdm-api-types: add PDM host metric fields Lukas Wagner
2026-04-15 13:20 ` [PATCH datacenter-manager v4 11/12] ui: node status: add RRD graphs for PDM host metrics Lukas Wagner
2026-04-15 13:20 ` Lukas Wagner [this message]

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260415132013.440581-13-l.wagner@proxmox.com \
    --to=l.wagner@proxmox.com \
    --cc=pdm-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal