From: Dominik Csapak <d.csapak@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [pdm-devel] [PATCH datacenter-manager 2/2] ui: rework status row/meter helpers
Date: Tue, 23 Sep 2025 11:51:13 +0200 [thread overview]
Message-ID: <20250923095124.1679038-11-d.csapak@proxmox.com> (raw)
In-Reply-To: <20250923095124.1679038-1-d.csapak@proxmox.com>
By using and returning the already existing MeterLabel from yew-comp, we
can simplify our helpers here. This makes the individual helpers in the
pve panels unnecessary, since we can just use the ones from renderer.
The biggest difference here is that we now use the 'fa-icon' classes
instead of giving a whole 'Fa' struct.
Visually, the result should be identical to before this change.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
ui/src/pve/lxc.rs | 48 +++++++++-----------
ui/src/pve/qemu.rs | 48 +++++++++-----------
ui/src/pve/remote.rs | 103 ++++++++++++++++++++----------------------
ui/src/pve/storage.rs | 55 +++++++++++-----------
ui/src/renderer.rs | 63 ++++++++------------------
5 files changed, 137 insertions(+), 180 deletions(-)
diff --git a/ui/src/pve/lxc.rs b/ui/src/pve/lxc.rs
index e837e566..08380b66 100644
--- a/ui/src/pve/lxc.rs
+++ b/ui/src/pve/lxc.rs
@@ -21,7 +21,10 @@ use pwt::{
use pdm_api_types::{resource::PveLxcResource, rrddata::LxcDataPoint};
use pdm_client::types::{IsRunning, LxcStatus};
-use crate::{pve::utils::render_lxc_name, renderer::separator};
+use crate::{
+ pve::utils::render_lxc_name,
+ renderer::{separator, status_row},
+};
#[derive(Clone, Debug, Properties)]
pub struct LxcPanel {
@@ -293,11 +296,10 @@ impl yew::Component for LxcanelComp {
};
if !status.template.unwrap_or_default() {
- status_comp.add_child(make_row(
+ status_comp.add_child(status_row(
tr!("Status"),
- Fa::new("info"),
+ "fa-info",
status.status.to_string(),
- None,
));
}
@@ -317,34 +319,30 @@ impl yew::Component for LxcanelComp {
tr!("none")
};
- status_comp.add_child(make_row(
- tr!("HA state"),
- Fa::new("heartbeat"),
- ha_text,
- None,
- ));
+ status_comp.add_child(status_row(tr!("HA state"), "fa-heartbeat", ha_text));
status_comp.add_child(Container::new().padding(1)); // spacer
let cpu = status.cpu.unwrap_or_default();
- status_comp.add_child(make_row(
- tr!("CPU usage"),
- Fa::new("cpu"),
- tr!(
- "{0}% of {1} CPU(s)",
- format!("{:.2}", cpu * 100.0),
- status.cpus.unwrap_or_default()
- ),
- Some(cpu as f32),
- ));
+ status_comp.add_child(
+ status_row(
+ tr!("CPU usage"),
+ "fa-cpu",
+ tr!(
+ "{0}% of {1} CPU(s)",
+ format!("{:.2}", cpu * 100.0),
+ status.cpus.unwrap_or_default()
+ ),
+ )
+ .value(cpu as f32),
+ );
let mem = status.mem.unwrap_or_default() as u64;
let maxmem = status.maxmem.unwrap_or_default() as u64;
status_comp.add_child(crate::renderer::memory_status_row(mem, maxmem));
- status_comp.add_child(make_row(
+ status_comp.add_child(status_row(
tr!("Bootdisk size"),
- Fa::new("database"),
+ "fa-database",
HumanByte::from(status.maxdisk.unwrap_or_default() as u64).to_string(),
- None,
));
let loading = self.status.is_none() && self.last_status_error.is_none();
@@ -434,7 +432,3 @@ impl yew::Component for LxcanelComp {
.into()
}
}
-
-fn make_row(title: String, icon: Fa, text: String, meter_value: Option<f32>) -> Column {
- crate::renderer::status_row(title, icon, text, meter_value, false)
-}
diff --git a/ui/src/pve/qemu.rs b/ui/src/pve/qemu.rs
index 6c30e07d..10266f39 100644
--- a/ui/src/pve/qemu.rs
+++ b/ui/src/pve/qemu.rs
@@ -21,7 +21,10 @@ use pwt::{
use pdm_api_types::{resource::PveQemuResource, rrddata::QemuDataPoint};
use pdm_client::types::{IsRunning, QemuStatus};
-use crate::{pve::utils::render_qemu_name, renderer::separator};
+use crate::{
+ pve::utils::render_qemu_name,
+ renderer::{separator, status_row},
+};
#[derive(Clone, Debug, Properties)]
pub struct QemuPanel {
@@ -304,14 +307,13 @@ impl yew::Component for QemuPanelComp {
};
if !status.template.unwrap_or_default() {
- status_comp.add_child(make_row(
+ status_comp.add_child(status_row(
tr!("Status"),
- Fa::new("info"),
+ "fa-info",
status
.qmpstatus
.clone()
.unwrap_or(status.status.to_string()),
- None,
));
}
@@ -331,34 +333,30 @@ impl yew::Component for QemuPanelComp {
tr!("none")
};
- status_comp.add_child(make_row(
- tr!("HA state"),
- Fa::new("heartbeat"),
- ha_text,
- None,
- ));
+ status_comp.add_child(status_row(tr!("HA state"), "fa-heartbeat", ha_text));
status_comp.add_child(Container::new().padding(1)); // spacer
let cpu = status.cpu.unwrap_or_default();
- status_comp.add_child(make_row(
- tr!("CPU usage"),
- Fa::new("cpu"),
- tr!(
- "{0}% of {1} CPU(s)",
- format!("{:.2}", cpu * 100.0),
- status.cpus.unwrap_or_default()
- ),
- Some(cpu as f32),
- ));
+ status_comp.add_child(
+ status_row(
+ tr!("CPU usage"),
+ "fa-cpu",
+ tr!(
+ "{0}% of {1} CPU(s)",
+ format!("{:.2}", cpu * 100.0),
+ status.cpus.unwrap_or_default()
+ ),
+ )
+ .value(cpu as f32),
+ );
let mem = status.mem.unwrap_or_default() as u64;
let maxmem = status.maxmem.unwrap_or_default() as u64;
status_comp.add_child(crate::renderer::memory_status_row(mem, maxmem));
- status_comp.add_child(make_row(
+ status_comp.add_child(status_row(
tr!("Bootdisk size"),
- Fa::new("database"),
+ "fa-database",
HumanByte::from(status.maxdisk.unwrap_or_default() as u64).to_string(),
- None,
));
let loading = self.status.is_none() && self.last_status_error.is_none();
@@ -447,7 +445,3 @@ impl yew::Component for QemuPanelComp {
.into()
}
}
-
-fn make_row(title: String, icon: Fa, text: String, meter_value: Option<f32>) -> Column {
- crate::renderer::status_row(title, icon, text, meter_value, false)
-}
diff --git a/ui/src/pve/remote.rs b/ui/src/pve/remote.rs
index 5c535152..09afcfd6 100644
--- a/ui/src/pve/remote.rs
+++ b/ui/src/pve/remote.rs
@@ -14,7 +14,7 @@ use pwt_macros::widget;
use pdm_api_types::resource::PveResource;
-use crate::renderer::separator;
+use crate::renderer::{separator, status_row_right_icon};
#[widget(comp=RemotePanelComp, @element)]
#[derive(Clone, Debug, PartialEq, Properties)]
@@ -172,31 +172,28 @@ impl yew::Component for RemotePanelComp {
Some(err) => Column::new().padding(4).with_child(error_message(err)),
None => Column::new()
.gap(2)
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr!("Subscription Status"),
if status.level.is_empty() {
- Status::Error.into()
+ Status::Error
} else {
- Status::Success.into()
+ Status::Success
},
status.level.to_string(),
- None,
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr! {"Nodes"},
- Fa::new("building"),
+ "fa-building",
format!("{}", status.nodes),
- None,
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr! {"Guests"},
- Fa::new("desktop"),
+ "fa-desktop",
tr!(
"{0} / {1} (running / total)",
status.guests_running,
status.guests
),
- None,
))
.with_child(separator())
.with_child(
@@ -207,40 +204,46 @@ impl yew::Component for RemotePanelComp {
.with_child(Fa::new("bar-chart"))
.with_child(tr!("Usage")),
)
- .with_child(make_row(
- tr! {"Host CPU usage (avg.)"},
- Fa::new("cpu"),
- format!("{:.2}%", status.cpu_usage * 100.0),
- Some(status.cpu_usage as f32),
- ))
- .with_child(make_row(
- tr! {"Host Memory used"},
- Fa::new("memory"),
- tr!(
- "{0}% ({1} of {2})",
- format!(
- "{:.2}",
- 100.0 * status.memory as f64 / status.max_memory as f64
+ .with_child(
+ status_row_right_icon(
+ tr! {"Host CPU usage (avg.)"},
+ "fa-cpu",
+ format!("{:.2}%", status.cpu_usage * 100.0),
+ )
+ .value(status.cpu_usage as f32),
+ )
+ .with_child(
+ status_row_right_icon(
+ tr! {"Host Memory used"},
+ "fa-memory",
+ tr!(
+ "{0}% ({1} of {2})",
+ format!(
+ "{:.2}",
+ 100.0 * status.memory as f64 / status.max_memory as f64
+ ),
+ HumanByte::from(status.memory),
+ HumanByte::from(status.max_memory),
),
- HumanByte::from(status.memory),
- HumanByte::from(status.max_memory),
- ),
- Some((status.memory as f64 / status.max_memory as f64) as f32),
- ))
- .with_child(make_row(
- tr! {"Host Storage used"},
- Fa::new("database"),
- tr!(
- "{0}% ({1} of {2})",
- format!(
- "{:.2}",
- 100.0 * status.storage as f64 / status.max_storage as f64
+ )
+ .value((status.memory as f64 / status.max_memory as f64) as f32),
+ )
+ .with_child(
+ status_row_right_icon(
+ tr! {"Host Storage used"},
+ "fa-database",
+ tr!(
+ "{0}% ({1} of {2})",
+ format!(
+ "{:.2}",
+ 100.0 * status.storage as f64 / status.max_storage as f64
+ ),
+ HumanByte::from(status.storage),
+ HumanByte::from(status.max_storage)
),
- HumanByte::from(status.storage),
- HumanByte::from(status.max_storage)
- ),
- Some((status.storage as f64 / status.max_storage as f64) as f32),
- ))
+ )
+ .value((status.storage as f64 / status.max_storage as f64) as f32),
+ )
.with_child(separator())
.with_child(
Row::new()
@@ -250,27 +253,25 @@ impl yew::Component for RemotePanelComp {
.with_child(Fa::new("pie-chart"))
.with_child(tr!("Allocation")),
)
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr! {"CPU Cores assigned"},
- Fa::new("cpu"),
+ "fa-cpu",
tr!(
"{0} running / {1} physical ({2} total configured)",
status.guest_cores_running,
status.max_cores,
status.guest_cores,
),
- None,
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr! {"Memory assigned"},
- Fa::new("memory"),
+ "fa-memory",
tr!(
"{0} running / {1} physical ({2} total configured)",
HumanByte::from(status.guest_memory_running),
HumanByte::from(status.max_memory),
HumanByte::from(status.guest_memory),
),
- None,
)),
};
@@ -280,7 +281,3 @@ impl yew::Component for RemotePanelComp {
.into()
}
}
-
-fn make_row(title: String, icon: Fa, text: String, meter_value: Option<f32>) -> Column {
- crate::renderer::status_row(title, icon, text, meter_value, true)
-}
diff --git a/ui/src/pve/storage.rs b/ui/src/pve/storage.rs
index 46023970..4f5abbe9 100644
--- a/ui/src/pve/storage.rs
+++ b/ui/src/pve/storage.rs
@@ -22,7 +22,7 @@ use pdm_client::types::PveStorageStatus;
use crate::{
pve::utils::{render_content_type, render_storage_type},
- renderer::separator,
+ renderer::{separator, status_row_right_icon},
};
#[derive(Clone, Debug, Properties)]
@@ -258,27 +258,27 @@ impl yew::Component for StoragePanelComp {
};
status_comp = status_comp
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr!("Enabled"),
- Fa::new(if status.enabled.unwrap_or_default() {
- "toggle-on"
+ if status.enabled.unwrap_or_default() {
+ "fa-toggle-on"
} else {
- "toggle-off"
- }),
+ "fa-toggle-off"
+ },
String::new(),
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr!("Active"),
- Fa::from(if status.active.unwrap_or_default() {
+ if status.active.unwrap_or_default() {
Status::Success
} else {
Status::Error
- }),
+ },
String::new(),
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr!("Content"),
- Fa::new("list"),
+ "fa-list",
status
.content
.iter()
@@ -286,9 +286,9 @@ impl yew::Component for StoragePanelComp {
.collect::<Vec<_>>()
.join(", "),
))
- .with_child(make_row(
+ .with_child(status_row_right_icon(
tr!("Type"),
- Fa::new("database"),
+ "fa-database",
render_storage_type(&status.ty),
));
@@ -297,18 +297,19 @@ impl yew::Component for StoragePanelComp {
let disk = status.used.unwrap_or_default();
let maxdisk = status.total.unwrap_or_default();
let disk_usage = disk as f64 / maxdisk as f64;
- status_comp.add_child(crate::renderer::status_row(
- tr!("Usage"),
- Fa::new("database"),
- tr!(
- "{0}% ({1} of {2})",
- format!("{:.2}", disk_usage * 100.0),
- HumanByte::from(disk as u64),
- HumanByte::from(maxdisk as u64),
- ),
- Some(disk_usage as f32),
- false,
- ));
+ status_comp.add_child(
+ crate::renderer::status_row(
+ tr!("Usage"),
+ "fa-database",
+ tr!(
+ "{0}% ({1} of {2})",
+ format!("{:.2}", disk_usage * 100.0),
+ HumanByte::from(disk as u64),
+ HumanByte::from(maxdisk as u64),
+ ),
+ )
+ .value(disk_usage as f32),
+ );
let loading = self.status.is_none() && self.last_status_error.is_none();
@@ -354,7 +355,3 @@ impl yew::Component for StoragePanelComp {
.into()
}
}
-
-fn make_row(title: String, icon: Fa, text: String) -> Column {
- crate::renderer::status_row(title, icon, text, None, true)
-}
diff --git a/ui/src/renderer.rs b/ui/src/renderer.rs
index e179cd59..2383c44d 100644
--- a/ui/src/renderer.rs
+++ b/ui/src/renderer.rs
@@ -1,9 +1,9 @@
use pdm_api_types::resource::PveSdnResource;
+use proxmox_yew_comp::MeterLabel;
use pwt::{
- css,
prelude::*,
props::ContainerBuilder,
- widget::{Column, Container, Fa, Meter, Row},
+ widget::{Container, Fa},
};
use proxmox_human_byte::HumanByte;
@@ -50,63 +50,38 @@ pub fn render_status_icon(resource: &Resource) -> Container {
}
}
-pub(crate) fn status_row(
+pub(crate) fn status_row_right_icon(
title: String,
- icon: Fa,
+ icon: impl Into<Classes>,
text: String,
- meter_value: Option<f32>,
- icon_right: bool,
-) -> Column {
- status_row_thresholds(title, icon, text, meter_value, icon_right, 0.8, 0.9)
+) -> MeterLabel {
+ status_row(title, icon, text).icon_right(true)
}
-pub(crate) fn status_row_thresholds(
- title: String,
- icon: Fa,
- text: String,
- meter_value: Option<f32>,
- icon_right: bool,
- threshold_low: f32,
- threshold_high: f32,
-) -> Column {
- let row = Row::new()
- .class(css::AlignItems::Baseline)
- .gap(2)
- .with_optional_child((!icon_right).then_some(icon.clone().fixed_width()))
- .with_child(title)
- .with_flex_spacer()
- .with_child(text)
- .with_optional_child((icon_right).then_some(icon.fixed_width()));
-
- Column::new()
- .gap(1)
- .with_child(row)
- .with_optional_child(meter_value.map(|value| {
- Meter::new()
- .optimum(0.0)
- .low(threshold_low)
- .high(threshold_high)
- .animated(true)
- .value(value)
- }))
+pub(crate) fn status_row(title: String, icon: impl Into<Classes>, text: String) -> MeterLabel {
+ MeterLabel::with_zero_optimum(title)
+ .icon_class(classes!(icon.into(), "fa", "fa-fw"))
+ .low(0.8)
+ .high(0.9)
+ .animated(true)
+ .status(text)
}
-pub(crate) fn memory_status_row(used: u64, total: u64) -> Column {
+pub(crate) fn memory_status_row(used: u64, total: u64) -> MeterLabel {
let usage = used as f64 / total as f64;
- status_row_thresholds(
+ status_row(
tr!("Memory usage"),
- Fa::new("memory"),
+ "fa-memory",
tr!(
"{0}% ({1} of {2})",
format!("{:.2}", usage * 100.0),
HumanByte::from(used),
HumanByte::from(total),
),
- Some(usage as f32),
- false, // keep icon left
- 0.9, // low threshold (warning)
- 0.975, // high threshold (critical)
)
+ .low(0.9)
+ .high(0.975)
+ .value(usage as f32)
}
pub(crate) fn separator() -> Container {
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
prev parent reply other threads:[~2025-09-23 9:51 UTC|newest]
Thread overview: 11+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 1/8] status: impl conversion to classes Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 2/8] status row: add option to add the icon on the right side Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 3/8] meter label: make value optional Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 4/8] meter label: use `StatusRow` for text row Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 5/8] meter label: align the status row with baseline Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 6/8] meter label: add `animated` property Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 7/8] meter label: add option to align the icon on the right Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 8/8] add `node_info` helper to render a consistent view of the NodeStatus Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH datacenter-manager 1/2] ui: pve: node: use `node_info` helper from yew-comp Dominik Csapak
2025-09-23 9:51 ` Dominik Csapak [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=20250923095124.1679038-11-d.csapak@proxmox.com \
--to=d.csapak@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