[PATCH datacenter-manager v5 6/6] ui: lxc/qemu/node: use RRD value render helpers from yew-comp

Lukas Wagner
2026-04-24T11:35:15Z

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