From: "Shannon Sterz" <s.sterz@proxmox.com>
To: "Lukas Wagner" <l.wagner@proxmox.com>, <pdm-devel@lists.proxmox.com>
Subject: Re: [PATCH datacenter-manager v3 10/11] ui: node status: add RRD graphs for PDM host metrics
Date: Wed, 15 Apr 2026 10:47:28 +0200 [thread overview]
Message-ID: <DHTLJFG4KSRO.R440ASZBUCSU@proxmox.com> (raw)
In-Reply-To: <20260413085816.143591-11-l.wagner@proxmox.com>
On Mon Apr 13, 2026 at 10:58 AM CEST, Lukas Wagner wrote:
> This adds RRD graphs in the existing node status panel. We add graphs
> for
> - CPU/IOWait
> - Load-Avg
> - Memory usage
> - Network utilization
> - Pressure (CPU, memory, IO)
>
> Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>
> Reviewed-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
> Tested-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
> ---
> ui/src/administration/node_status.rs | 312 ++++++++++++++++++++++++++-
> ui/src/renderer.rs | 49 +++++
> 2 files changed, 354 insertions(+), 7 deletions(-)
>
> diff --git a/ui/src/administration/node_status.rs b/ui/src/administration/node_status.rs
> index a61f25a2..62684338 100644
> --- a/ui/src/administration/node_status.rs
> +++ b/ui/src/administration/node_status.rs
> @@ -7,17 +7,28 @@ use proxmox_node_status::NodePowerCommand;
> use proxmox_time::epoch_i64;
> use proxmox_yew_comp::percent_encoding::percent_encode_component;
> use proxmox_yew_comp::utils::{copy_text_to_clipboard, render_epoch};
> -use proxmox_yew_comp::{http_post, ConfirmButton, NodeStatusPanel};
> -use pwt::prelude::*;
> +use proxmox_yew_comp::{
> + http_post, ConfirmButton, NodeStatusPanel, RRDGraph, RRDGrid, RRDTimeframe,
> + RRDTimeframeSelector, Series,
> +};
> +use pwt::css::JustifyContent;
> use pwt::widget::{Button, Column, Container, Row};
> use pwt::AsyncAbortGuard;
> +use pwt::{prelude::*, AsyncPool};
>
> -use crate::get_nodename;
> +use pdm_api_types::rrddata::PdmNodeDatapoint;
> +
> +use crate::{get_nodename, renderer};
>
> #[derive(Properties, Clone, PartialEq)]
> -pub(crate) struct NodeStatus {}
> +pub(crate) struct NodeStatus {
> + #[prop_or(60_000)]
> + /// The interval for refreshing the rrd data
> + pub rrd_interval: u32,
> +}
>
> impl NodeStatus {
> + /// Create new [`NodeStatus`] panel.
> pub(crate) fn new() -> Self {
> yew::props!(Self {})
> }
> @@ -31,20 +42,58 @@ impl From<NodeStatus> for VNode {
>
> enum Msg {
> Reload,
> + ReloadRrd,
> + UpdateRrdTimeframe(RRDTimeframe),
> Error(Error),
> RebootOrShutdown(NodePowerCommand),
> ShowSystemReport(bool),
> ShowPackageVersions(bool),
> + RrdLoadFinished(Result<Vec<PdmNodeDatapoint>, proxmox_client::Error>),
> }
>
> struct PdmNodeStatus {
> + time_data: Rc<Vec<i64>>,
> +
> + cpu_data: Rc<Series>,
> + iowait_data: Rc<Series>,
> + load_data: Rc<Series>,
> + mem_data: Rc<Series>,
> + mem_total_data: Rc<Series>,
> + swap_data: Rc<Series>,
> + swap_total_data: Rc<Series>,
> + disk_usage_data: Rc<Series>,
> + disk_total_data: Rc<Series>,
> + disk_transfer_read_data: Rc<Series>,
> + disk_transfer_write_data: Rc<Series>,
> + disk_iops_read_data: Rc<Series>,
> + disk_iops_write_data: Rc<Series>,
> + cpu_pressure_some_data: Rc<Series>,
> + mem_pressure_some_data: Rc<Series>,
> + mem_pressure_full_data: Rc<Series>,
> + io_pressure_some_data: Rc<Series>,
> + io_pressure_full_data: Rc<Series>,
> + net_in: Rc<Series>,
> + net_out: Rc<Series>,
> +
> + rrd_time_frame: RRDTimeframe,
> error: Option<Error>,
> abort_guard: Option<AsyncAbortGuard>,
> show_system_report: bool,
> show_package_versions: bool,
> +
> + async_pool: AsyncPool,
> + _timeout: Option<gloo_timers::callback::Timeout>,
> }
>
> impl PdmNodeStatus {
> + async fn reload_rrd(rrd_time_frame: RRDTimeframe) -> Msg {
> + let res = crate::pdm_client()
> + .get_pdm_node_rrddata(rrd_time_frame.mode, rrd_time_frame.timeframe)
> + .await;
> +
> + Msg::RrdLoadFinished(res)
> + }
> +
> fn change_power_state(&mut self, ctx: &yew::Context<Self>, command: NodePowerCommand) {
> let link = ctx.link().clone();
> self.abort_guard.replace(AsyncAbortGuard::spawn(async move {
> @@ -184,8 +233,37 @@ impl Component for PdmNodeStatus {
> type Message = Msg;
> type Properties = NodeStatus;
>
> - fn create(_ctx: &yew::Context<Self>) -> Self {
> + fn create(ctx: &yew::Context<Self>) -> Self {
> + ctx.link().send_message(Msg::ReloadRrd);
> +
> Self {
> + time_data: Rc::new(Vec::new()),
> +
> + cpu_data: empty_series(),
> + cpu_pressure_some_data: empty_series(),
> + mem_pressure_some_data: empty_series(),
> + mem_pressure_full_data: empty_series(),
> + io_pressure_some_data: empty_series(),
> + io_pressure_full_data: empty_series(),
> + iowait_data: empty_series(),
> + load_data: empty_series(),
> + mem_data: empty_series(),
> + mem_total_data: empty_series(),
> + swap_data: empty_series(),
> + swap_total_data: empty_series(),
> + net_in: empty_series(),
> + net_out: empty_series(),
> + disk_usage_data: empty_series(),
> + disk_total_data: empty_series(),
> + disk_transfer_read_data: empty_series(),
> + disk_transfer_write_data: empty_series(),
> + disk_iops_read_data: empty_series(),
> + disk_iops_write_data: empty_series(),
> +
> + async_pool: AsyncPool::new(),
> + _timeout: None,
> +
> + rrd_time_frame: RRDTimeframe::load(),
> error: None,
> abort_guard: None,
> show_system_report: false,
> @@ -212,6 +290,121 @@ impl Component for PdmNodeStatus {
> self.show_package_versions = show_package_versions;
> true
> }
> + Msg::ReloadRrd => {
> + self._timeout = None;
> + let timeframe = self.rrd_time_frame;
> + self.async_pool.send_future(ctx.link().clone(), async move {
> + Self::reload_rrd(timeframe).await
> + });
> + true
> + }
> + Msg::RrdLoadFinished(res) => match res {
> + Ok(data_points) => {
> + self.error = None;
> + let mut cpu_vec = Vec::with_capacity(data_points.len());
> + let mut cpu_pressure_some_vec = Vec::with_capacity(data_points.len());
> + let mut iowait_vec = Vec::with_capacity(data_points.len());
> + let mut load_vec = Vec::with_capacity(data_points.len());
> + let mut mem_vec = Vec::with_capacity(data_points.len());
> + let mut mem_total_vec = Vec::with_capacity(data_points.len());
> + let mut swap_vec = Vec::with_capacity(data_points.len());
> + let mut swap_total_vec = Vec::with_capacity(data_points.len());
> + let mut mem_pressure_some_vec = Vec::with_capacity(data_points.len());
> + let mut mem_pressure_full_vec = Vec::with_capacity(data_points.len());
> + let mut io_pressure_some_vec = Vec::with_capacity(data_points.len());
> + let mut io_pressure_full_vec = Vec::with_capacity(data_points.len());
> + let mut time_vec = Vec::with_capacity(data_points.len());
> + let mut net_in_vec = Vec::with_capacity(data_points.len());
> + let mut net_out_vec = Vec::with_capacity(data_points.len());
> + let mut disk_usage_vec = Vec::with_capacity(data_points.len());
> + let mut disk_total_vec = Vec::with_capacity(data_points.len());
> + let mut disk_transfer_read_vec = Vec::with_capacity(data_points.len());
> + let mut disk_transfer_write_vec = Vec::with_capacity(data_points.len());
> + let mut disk_iops_read_vec = Vec::with_capacity(data_points.len());
> + let mut disk_iops_write_vec = Vec::with_capacity(data_points.len());
> +
> + for data in data_points {
> + cpu_vec.push(data.cpu_current.unwrap_or(f64::NAN));
> + iowait_vec.push(data.cpu_iowait.unwrap_or(f64::NAN));
> + load_vec.push(data.cpu_avg1.unwrap_or(f64::NAN));
> + cpu_pressure_some_vec
> + .push(data.cpu_pressure_some_avg10.unwrap_or(f64::NAN));
> + mem_vec.push(data.mem_used.unwrap_or(f64::NAN));
> + mem_total_vec.push(data.mem_total.unwrap_or(f64::NAN));
> + swap_vec.push(data.swap_used.unwrap_or(f64::NAN));
> + swap_total_vec.push(data.swap_total.unwrap_or(f64::NAN));
> + mem_pressure_some_vec
> + .push(data.mem_pressure_some_avg10.unwrap_or(f64::NAN));
> + mem_pressure_full_vec
> + .push(data.mem_pressure_full_avg10.unwrap_or(f64::NAN));
> + net_in_vec.push(data.net_in.unwrap_or(f64::NAN));
> + net_out_vec.push(data.net_out.unwrap_or(f64::NAN));
> + io_pressure_some_vec.push(data.io_pressure_some_avg10.unwrap_or(f64::NAN));
> + io_pressure_full_vec.push(data.io_pressure_full_avg10.unwrap_or(f64::NAN));
> +
> + disk_total_vec.push(data.disk_total.unwrap_or(f64::NAN));
> + disk_usage_vec.push(data.disk_used.unwrap_or(f64::NAN));
> + disk_transfer_read_vec.push(data.disk_read.unwrap_or(f64::NAN));
> + disk_transfer_write_vec.push(data.disk_write.unwrap_or(f64::NAN));
> +
> + disk_iops_read_vec.push(data.disk_read_iops.unwrap_or(f64::NAN));
> + disk_iops_write_vec.push(data.disk_write_iops.unwrap_or(f64::NAN));
> +
> + time_vec.push(data.time as i64);
> + }
> +
> + self.cpu_data = Rc::new(Series::new(tr!("CPU usage"), cpu_vec));
> + self.iowait_data = Rc::new(Series::new(tr!("IO delay"), iowait_vec));
> + self.load_data = Rc::new(Series::new(tr!("Server Load"), load_vec));
> + self.cpu_pressure_some_data =
> + Rc::new(Series::new(tr!("Some"), cpu_pressure_some_vec));
> + self.mem_data = Rc::new(Series::new(tr!("Used Memory"), mem_vec));
> + self.mem_total_data = Rc::new(Series::new(tr!("Total Memory"), mem_total_vec));
> + self.swap_data = Rc::new(Series::new(tr!("Used Swap"), swap_vec));
> + self.swap_total_data = Rc::new(Series::new(tr!("Total Swap"), swap_total_vec));
> + self.mem_pressure_some_data =
> + Rc::new(Series::new(tr!("Some"), mem_pressure_some_vec));
> + self.mem_pressure_full_data =
> + Rc::new(Series::new(tr!("Full"), mem_pressure_full_vec));
> + self.io_pressure_some_data =
> + Rc::new(Series::new(tr!("Some"), io_pressure_some_vec));
> + self.io_pressure_full_data =
> + Rc::new(Series::new(tr!("Full"), io_pressure_full_vec));
> +
> + self.net_in = Rc::new(Series::new(tr!("Incoming"), net_in_vec));
> + self.net_out = Rc::new(Series::new(tr!("Outgoing"), net_out_vec));
> +
> + self.disk_usage_data = Rc::new(Series::new(tr!("Used Disk"), disk_usage_vec));
> + self.disk_total_data = Rc::new(Series::new(tr!("Total Disk"), disk_total_vec));
> + self.disk_transfer_read_data =
> + Rc::new(Series::new(tr!("Read"), disk_transfer_read_vec));
> + self.disk_transfer_write_data =
> + Rc::new(Series::new(tr!("Write"), disk_transfer_write_vec));
> + self.disk_iops_read_data =
> + Rc::new(Series::new(tr!("Read"), disk_iops_read_vec));
> + self.disk_iops_write_data =
> + Rc::new(Series::new(tr!("Write"), disk_iops_write_vec));
> +
> + self.time_data = Rc::new(time_vec);
> +
> + let link = ctx.link().clone();
> + self._timeout = Some(gloo_timers::callback::Timeout::new(
> + ctx.props().rrd_interval,
> + move || link.send_message(Msg::ReloadRrd),
> + ));
> +
> + true
> + }
> + Err(err) => {
> + self.error = Some(err.into());
> + true
> + }
> + },
> + Msg::UpdateRrdTimeframe(rrd_time_frame) => {
> + self.rrd_time_frame = rrd_time_frame;
> + ctx.link().send_message(Msg::ReloadRrd);
> + false
> + }
> }
> }
>
> @@ -267,12 +460,113 @@ impl Component for PdmNodeStatus {
> ),
> )
> .with_child(
> - Row::new()
> + Column::new()
> .class("pwt-content-spacer-padding")
> .class("pwt-content-spacer-colors")
> .class("pwt-default-colors")
> .class(pwt::css::FlexFit)
> - .with_child(NodeStatusPanel::new().status_base_url("/nodes/localhost/status")),
> + .with_child(
> + NodeStatusPanel::new()
> + .status_base_url("/nodes/localhost/status")
> + .with_child(renderer::separator().padding_x(4))
> + .with_optional_child(
> + self.error
> + .as_ref()
> + .map(|err| pwt::widget::error_message(&err.to_string())),
> + )
> + .with_child(
> + Row::new()
> + .padding_x(4)
> + .padding_y(1)
> + .class(JustifyContent::FlexEnd)
> + .with_child(
> + RRDTimeframeSelector::new().on_change(
> + ctx.link().callback(Msg::UpdateRrdTimeframe),
> + ),
> + ),
> + )
> + .with_child(
> + RRDGrid::new()
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("CPU Usage"))
> + .render_value(renderer::rrd_value::render_cpu_usage)
> + .serie0(Some(self.cpu_data.clone()))
> + .serie1(Some(self.iowait_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Server Load"))
> + .render_value(renderer::rrd_value::render_load)
> + .serie0(Some(self.load_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Memory Usage"))
> + .binary(true)
> + .render_value(renderer::rrd_value::render_bytes)
> + .serie0(Some(self.mem_total_data.clone()))
> + .serie1(Some(self.mem_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Swap Usage"))
> + .binary(true)
> + .render_value(renderer::rrd_value::render_bytes)
> + .serie0(Some(self.swap_total_data.clone()))
> + .serie1(Some(self.swap_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Network Traffic"))
> + .binary(true)
> + .render_value(renderer::rrd_value::render_bandwidth)
> + .serie0(Some(self.net_in.clone()))
> + .serie1(Some(self.net_out.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("CPU Pressure Stall"))
> + .render_value(renderer::rrd_value::render_pressure)
> + .serie0(Some(self.cpu_pressure_some_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Memory Pressure Stall"))
> + .render_value(renderer::rrd_value::render_pressure)
> + .serie0(Some(self.mem_pressure_some_data.clone()))
> + .serie1(Some(self.mem_pressure_full_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("IO Pressure Stall"))
> + .render_value(renderer::rrd_value::render_pressure)
> + .serie0(Some(self.io_pressure_some_data.clone()))
> + .serie1(Some(self.io_pressure_full_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Root Disk Usage"))
> + .render_value(renderer::rrd_value::render_bytes)
> + .serie0(Some(self.disk_usage_data.clone()))
> + .serie1(Some(self.disk_total_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Root Disk Transfer Rate"))
> + .binary(true)
> + .render_value(renderer::rrd_value::render_bandwidth)
> + .serie0(Some(self.disk_transfer_read_data.clone()))
> + .serie1(Some(self.disk_transfer_write_data.clone())),
> + )
> + .with_child(
> + RRDGraph::new(self.time_data.clone())
> + .title(tr!("Root Disk IOPS"))
> + .serie0(Some(self.disk_iops_read_data.clone()))
> + .serie1(Some(self.disk_iops_write_data.clone())),
> + ),
> + ),
> + ),
> )
> .with_optional_child(
> self.show_system_report
> @@ -285,3 +579,7 @@ impl Component for PdmNodeStatus {
> .into()
> }
> }
> +
> +fn empty_series() -> Rc<Series> {
> + Rc::new(Series::new("", Vec::new()))
> +}
> diff --git a/ui/src/renderer.rs b/ui/src/renderer.rs
> index 00c0720e..bfc059b3 100644
> --- a/ui/src/renderer.rs
> +++ b/ui/src/renderer.rs
> @@ -111,3 +111,52 @@ pub(crate) fn render_title_row(title: String, icon: &str) -> Row {
> .with_child(Fa::new(icon))
> .with_child(title)
> }
> +
> +/// Helpers for rendering values in RRD graphs.
> +pub mod rrd_value {
thanks for these helpers and the follow-up patch using them throughout
pdm. i think they might make more sense in proxmox-yew-comp, though. we
tend to implement more or less the same types of rrd charts across our
products, so having them there is likely to come in handy again. what do
you think?
> + /// Render CPU usage in percent. `v` is multiplied by 100 to get the percent value.
> + pub fn render_cpu_usage(v: &f64) -> String {
> + if v.is_finite() {
> + format!("{:.1}%", v * 100.0)
> + } else {
> + v.to_string()
> + }
> + }
> +
> + /// Render server load value.
> + pub fn render_load(v: &f64) -> String {
> + if v.is_finite() {
> + format!("{:.2}", v)
> + } else {
> + v.to_string()
> + }
> + }
> +
> + /// Render a byte value.
> + pub fn render_bytes(v: &f64) -> String {
> + if v.is_finite() {
> + proxmox_human_byte::HumanByte::from(*v as u64).to_string()
> + } else {
> + v.to_string()
> + }
> + }
> +
> + /// Render bandwidth.
> + pub fn render_bandwidth(v: &f64) -> String {
> + if v.is_finite() {
> + let bytes = proxmox_human_byte::HumanByte::from(*v as u64);
> + format!("{bytes}/s")
> + } else {
> + v.to_string()
> + }
> + }
> +
> + /// Render pressure stall value.
> + pub fn render_pressure(v: &f64) -> String {
> + if v.is_finite() {
> + format!("{:.1}%", v)
> + } else {
> + v.to_string()
> + }
> + }
> +}
next prev parent reply other threads:[~2026-04-15 8:48 UTC|newest]
Thread overview: 17+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-04-13 8:58 [PATCH datacenter-manager/proxmox-yew-comp v3 00/11] metric collection for the PDM host Lukas Wagner
2026-04-13 8:58 ` [PATCH proxmox-yew-comp v3 01/11] node status panel: add `children` property Lukas Wagner
2026-04-13 8:58 ` [PATCH proxmox-yew-comp v3 02/11] RRDGrid: fix size observer by attaching node reference to rendered container Lukas Wagner
2026-04-13 8:58 ` [PATCH proxmox-yew-comp v3 03/11] RRDGrid: add padding and increase gap between elements Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 04/11] metric collection: clarify naming for remote metric collection Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 05/11] metric collection: fix minor typo in error message Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 06/11] metric collection: collect PDM host metrics in a new collection task Lukas Wagner
2026-04-15 8:47 ` Shannon Sterz
2026-04-13 8:58 ` [PATCH datacenter-manager v3 07/11] api: fix /nodes/localhost/rrddata endpoint Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 08/11] pdm: node rrd data: rename 'total-time' to 'metric-collection-total-time' Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 09/11] pdm-api-types: add PDM host metric fields Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 10/11] ui: node status: add RRD graphs for PDM host metrics Lukas Wagner
2026-04-15 8:47 ` Shannon Sterz [this message]
2026-04-15 12:20 ` Lukas Wagner
2026-04-13 8:58 ` [PATCH datacenter-manager v3 11/11] ui: lxc/qemu/node: use RRD value render helpers Lukas Wagner
2026-04-14 14:08 ` [PATCH datacenter-manager/proxmox-yew-comp v3 00/11] metric collection for the PDM host Michael Köppl
2026-04-15 13:24 ` superseded: " Lukas Wagner
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=DHTLJFG4KSRO.R440ASZBUCSU@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=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