* [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor
@ 2025-09-23 9:51 Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 1/8] status: impl conversion to classes Dominik Csapak
` (9 more replies)
0 siblings, 10 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
While implemnting some basic PBS panels, i stumbled over our reimplemntation
of the already existing `MeterLabel` and `StatusRow` from proxmox-yew-comp.
So this series should improve on that by reusing them.
Also refactored the panel for the NodeStatus in a way that we can reuse
it for PBS as well and at the same time make it more conform to what we already
have in the 'native' PVE/PBS gui.
Note that the pdm patches depend on the yew-comp patches, so a bump is
necessary
also i based this series on top of my other two patches[0]
(but they should not interfere with each other)
0: https://lore.proxmox.com/pdm-devel/20250923094311.1612890-1-d.csapak@proxmox.com/T/#t
proxmox-yew-comp:
Dominik Csapak (8):
status: impl conversion to classes
status row: add option to add the icon on the right side
meter label: make value optional
meter label: use `StatusRow` for text row
meter label: align the status row with baseline
meter label: add `animated` property
meter label: add option to align the icon on the right
add `node_info` helper to render a consistent view of the NodeStatus
Cargo.toml | 3 +
src/lib.rs | 3 +
src/meter_label.rs | 53 ++++++-----
src/node_info.rs | 222 +++++++++++++++++++++++++++++++++++++++++++++
src/status.rs | 8 ++
src/status_row.rs | 36 ++++++--
6 files changed, 295 insertions(+), 30 deletions(-)
create mode 100644 src/node_info.rs
proxmox-datacenter-manager:
Dominik Csapak (2):
ui: pve: node: use `node_info` helper from yew-comp
ui: rework status row/meter helpers
ui/src/pve/lxc.rs | 48 ++++++++---------
ui/src/pve/node/overview.rs | 76 +++-----------------------
ui/src/pve/qemu.rs | 48 ++++++++---------
ui/src/pve/remote.rs | 103 +++++++++++++++++-------------------
ui/src/pve/storage.rs | 55 +++++++++----------
ui/src/renderer.rs | 63 +++++++---------------
6 files changed, 145 insertions(+), 248 deletions(-)
Summary over all repositories:
12 files changed, 440 insertions(+), 278 deletions(-)
--
Generated by git-murpp 0.8.1
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 1/8] status: impl conversion to classes
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 ` 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
` (8 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
sometimes it's useful to get the complete icon classes, etc. as a class
list
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/status.rs | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/status.rs b/src/status.rs
index 45ca761..7c99180 100644
--- a/src/status.rs
+++ b/src/status.rs
@@ -31,6 +31,14 @@ impl Status {
}
}
+impl From<Status> for Classes {
+ fn from(value: Status) -> Self {
+ let (icon, mut classes) = value.get_icon_classes();
+ classes.push(format!("fa-{icon}"));
+ classes
+ }
+}
+
impl From<Status> for Fa {
fn from(value: Status) -> Self {
let (icon, class) = value.get_icon_classes();
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 2/8] status row: add option to add the icon on the right side
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 ` Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 3/8] meter label: make value optional Dominik Csapak
` (7 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
This is sometimes better than showing it always on the left side.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/status_row.rs | 36 ++++++++++++++++++++++++++++--------
1 file changed, 28 insertions(+), 8 deletions(-)
diff --git a/src/status_row.rs b/src/status_row.rs
index fe64127..8eda9b7 100644
--- a/src/status_row.rs
+++ b/src/status_row.rs
@@ -15,6 +15,9 @@ pub struct StatusRow {
#[prop_or_default]
pub status: Option<Html>,
+
+ #[prop_or_default]
+ pub icon_right: bool,
}
impl StatusRow {
@@ -41,6 +44,17 @@ impl StatusRow {
self.status = Some(status.into());
self
}
+
+ /// Method to control which side the icon should go on.
+ pub fn set_icon_right(&mut self, icon_right: impl Into<bool>) {
+ self.icon_right = icon_right.into();
+ }
+
+ /// Builder style method to control which side the icon should go on.
+ pub fn icon_right(mut self, icon_right: impl Into<bool>) -> Self {
+ self.set_icon_right(icon_right);
+ self
+ }
}
#[doc(hidden)]
@@ -57,11 +71,17 @@ impl Component for ProxmoxStatusRow {
fn view(&self, ctx: &Context<Self>) -> Html {
let props = ctx.props();
- let icon = props.icon_class.as_ref().map(|icon_class| {
- Container::from_tag("i")
- .class(icon_class.clone())
- .padding_end(2)
- });
+ let (left_icon, right_icon) = match &props.icon_class {
+ Some(icon_class) => {
+ let icon = Container::from_tag("i").class(icon_class.clone());
+ if props.icon_right {
+ (None, Some(icon))
+ } else {
+ (Some(icon), None)
+ }
+ }
+ None => (None, None),
+ };
let status = match &props.status {
Some(text) => text.clone(),
@@ -73,11 +93,11 @@ impl Component for ProxmoxStatusRow {
.class(Display::Flex) // we need to set this again
.listeners(&props.listeners)
.gap(2)
- .with_child(
- html! {<div class="pwt-white-space-nowrap">{icon}{props.title.clone()}</div>},
- )
+ .with_optional_child(left_icon)
+ .with_child(html! {<div class="pwt-white-space-nowrap">{props.title.clone()}</div>})
.with_flex_spacer()
.with_child(html! {<div class="pwt-white-space-nowrap">{status}</div>})
+ .with_optional_child(right_icon)
.into()
}
}
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 3/8] meter label: make value optional
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 ` Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 4/8] meter label: use `StatusRow` for text row Dominik Csapak
` (6 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
If there is no value given, just omit the Meter, so it's behaving like a
`StatusRow`. This can come in handy in situations where we use both
`StatusRow` and `MeterLabel` but want to abstract the specific
configuration away.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/meter_label.rs | 19 +++++++++++--------
1 file changed, 11 insertions(+), 8 deletions(-)
diff --git a/src/meter_label.rs b/src/meter_label.rs
index 5b9e843..c4ef22f 100644
--- a/src/meter_label.rs
+++ b/src/meter_label.rs
@@ -56,9 +56,9 @@ pub struct MeterLabel {
/// specified, but not within the range given by the min attribute
/// and max attribute, the value is equal to the nearest end of
/// the range.
- #[prop_or(0f32)]
- #[builder]
- pub value: f32,
+ #[prop_or_default]
+ #[builder(IntoPropValue, into_prop_value)]
+ pub value: Option<f32>,
#[prop_or_default]
pub status: Option<Html>,
@@ -116,7 +116,10 @@ impl Component for ProxmoxMeterLabel {
let status = match &props.status {
Some(text) => text.clone(),
- None => html! {format!("{:.2} %", props.value * 100.0)},
+ None => match props.value {
+ Some(value) => html! {format!("{:.2} %", value * 100.0)},
+ None => html! {},
+ },
};
let text_row = Row::new()
@@ -131,16 +134,16 @@ impl Component for ProxmoxMeterLabel {
.with_std_props(&props.std_props)
.listeners(&props.listeners)
.with_child(text_row)
- .with_child(
+ .with_optional_child(props.value.map(|value| {
Meter::new()
.margin_top(1)
- .value(props.value)
+ .value(value)
.min(props.min)
.max(props.max)
.low(props.low)
.high(props.high)
- .optimum(props.optimum),
- )
+ .optimum(props.optimum)
+ }))
.into()
}
}
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 4/8] meter label: use `StatusRow` for text row
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (2 preceding siblings ...)
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 3/8] meter label: make value optional Dominik Csapak
@ 2025-09-23 9:51 ` Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 5/8] meter label: align the status row with baseline Dominik Csapak
` (5 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
it's already almost identical, so let's reuse it
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/meter_label.rs | 20 ++++++--------------
1 file changed, 6 insertions(+), 14 deletions(-)
diff --git a/src/meter_label.rs b/src/meter_label.rs
index c4ef22f..1e92dca 100644
--- a/src/meter_label.rs
+++ b/src/meter_label.rs
@@ -1,10 +1,12 @@
use yew::html::IntoPropValue;
use pwt::prelude::*;
-use pwt::widget::{Container, Meter, Row};
+use pwt::widget::{Container, Meter};
use pwt_macros::{builder, widget};
+use crate::StatusRow;
+
#[widget(comp=ProxmoxMeterLabel, @element)]
#[derive(Properties, Clone, PartialEq)]
#[builder]
@@ -108,12 +110,6 @@ impl Component for ProxmoxMeterLabel {
fn view(&self, ctx: &Context<Self>) -> Html {
let props = ctx.props();
- let icon = props.icon_class.as_ref().map(|icon_class| {
- Container::from_tag("i")
- .class(icon_class.clone())
- .padding_end(2)
- });
-
let status = match &props.status {
Some(text) => text.clone(),
None => match props.value {
@@ -122,13 +118,9 @@ impl Component for ProxmoxMeterLabel {
},
};
- let text_row = Row::new()
- .gap(2)
- .with_child(
- html! {<div class="pwt-white-space-nowrap">{icon}{props.title.clone()}</div>},
- )
- .with_flex_spacer()
- .with_child(html! {<div class="pwt-white-space-nowrap">{status}</div>});
+ let text_row = StatusRow::new(props.title.clone())
+ .status(status)
+ .icon_class(props.icon_class.clone());
Container::new()
.with_std_props(&props.std_props)
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 5/8] meter label: align the status row with baseline
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (3 preceding siblings ...)
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 ` Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 6/8] meter label: add `animated` property Dominik Csapak
` (4 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
with most icons/text this looks better aligned tha the default.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/meter_label.rs | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/meter_label.rs b/src/meter_label.rs
index 1e92dca..7835199 100644
--- a/src/meter_label.rs
+++ b/src/meter_label.rs
@@ -1,3 +1,4 @@
+use pwt::css::AlignItems;
use yew::html::IntoPropValue;
use pwt::prelude::*;
@@ -119,6 +120,7 @@ impl Component for ProxmoxMeterLabel {
};
let text_row = StatusRow::new(props.title.clone())
+ .class(AlignItems::Baseline)
.status(status)
.icon_class(props.icon_class.clone());
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 6/8] meter label: add `animated` property
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (4 preceding siblings ...)
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 ` 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
` (3 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/meter_label.rs | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/meter_label.rs b/src/meter_label.rs
index 7835199..14ef8a4 100644
--- a/src/meter_label.rs
+++ b/src/meter_label.rs
@@ -65,6 +65,11 @@ pub struct MeterLabel {
#[prop_or_default]
pub status: Option<Html>,
+
+ /// If the underlying Meter should be animated
+ #[prop_or_default]
+ #[builder]
+ pub animated: bool,
}
impl MeterLabel {
@@ -137,6 +142,7 @@ impl Component for ProxmoxMeterLabel {
.low(props.low)
.high(props.high)
.optimum(props.optimum)
+ .animated(props.animated)
}))
.into()
}
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 7/8] meter label: add option to align the icon on the right
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (5 preceding siblings ...)
2025-09-23 9:51 ` [pdm-devel] [PATCH yew-comp 6/8] meter label: add `animated` property Dominik Csapak
@ 2025-09-23 9:51 ` 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
` (2 subsequent siblings)
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
like in `StatusRow`
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/meter_label.rs | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/meter_label.rs b/src/meter_label.rs
index 14ef8a4..e7d421b 100644
--- a/src/meter_label.rs
+++ b/src/meter_label.rs
@@ -70,6 +70,11 @@ pub struct MeterLabel {
#[prop_or_default]
#[builder]
pub animated: bool,
+
+ /// If set to `true`, places the icon on the right side instead of the left
+ #[prop_or_default]
+ #[builder]
+ pub icon_right: bool,
}
impl MeterLabel {
@@ -127,7 +132,8 @@ impl Component for ProxmoxMeterLabel {
let text_row = StatusRow::new(props.title.clone())
.class(AlignItems::Baseline)
.status(status)
- .icon_class(props.icon_class.clone());
+ .icon_class(props.icon_class.clone())
+ .icon_right(props.icon_right);
Container::new()
.with_std_props(&props.std_props)
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH yew-comp 8/8] add `node_info` helper to render a consistent view of the NodeStatus
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (6 preceding siblings ...)
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 ` 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 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: rework status row/meter helpers Dominik Csapak
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
since we want this for the pve and pbs NodeStatus, we introduce a small
enum type that can hold a reference to either and dynamically extract the
information we need.
That way we can easily use the helper for both PVE and PBS node panels.
The content itself should be the same as the one we have in the native
PVE and PBS interface, minus the subscription info.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
Cargo.toml | 3 +
src/lib.rs | 3 +
src/node_info.rs | 222 +++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 228 insertions(+)
create mode 100644 src/node_info.rs
diff --git a/Cargo.toml b/Cargo.toml
index 11680c7..d6002a8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -82,6 +82,9 @@ proxmox-access-control = "1.1"
proxmox-dns-api = { version = "1", optional = true }
proxmox-network-api = { version = "1", optional = true }
+pve-api-types = "8"
+pbs-api-types = "1"
+
[features]
default = []
apt = [
diff --git a/src/lib.rs b/src/lib.rs
index ca34e67..492326a 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -80,6 +80,9 @@ pub use loadable_component::{
LoadableComponent, LoadableComponentContext, LoadableComponentLink, LoadableComponentMaster,
};
+mod node_info;
+pub use node_info::{node_info, NodeStatus};
+
mod notes_view;
pub use notes_view::{NotesView, NotesWithDigest, ProxmoxNotesView};
diff --git a/src/node_info.rs b/src/node_info.rs
new file mode 100644
index 0000000..19a1ada
--- /dev/null
+++ b/src/node_info.rs
@@ -0,0 +1,222 @@
+use proxmox_human_byte::HumanByte;
+use pwt::{prelude::*, widget::Container};
+
+use crate::{MeterLabel, StatusRow};
+
+/// Type that holds either a PVE NodeStatus or a PBS NodeStatus
+pub enum NodeStatus<'a> {
+ Pve(&'a pve_api_types::NodeStatus),
+ Pbs(&'a pbs_api_types::NodeStatus),
+}
+
+impl<'a> From<&'a pve_api_types::NodeStatus> for NodeStatus<'a> {
+ fn from(value: &'a pve_api_types::NodeStatus) -> Self {
+ NodeStatus::Pve(value)
+ }
+}
+
+impl<'a> From<&'a pbs_api_types::NodeStatus> for NodeStatus<'a> {
+ fn from(value: &'a pbs_api_types::NodeStatus) -> Self {
+ NodeStatus::Pbs(value)
+ }
+}
+
+/// Renders the NodeInfo panel content
+// TODO: add repository status
+// NOTE: if we need internal state or the tree get's too big, we should convert this
+// into a proper component
+pub fn node_info(data: Option<NodeStatus>) -> Container {
+ let (cpu, cpus_total) = match data {
+ Some(NodeStatus::Pve(node_status)) => (node_status.cpu, node_status.cpuinfo.cpus as u64),
+ Some(NodeStatus::Pbs(node_status)) => (node_status.cpu, node_status.cpuinfo.cpus as u64),
+ None => (0.0, 1),
+ };
+
+ let wait = match data {
+ Some(NodeStatus::Pve(node_status)) => node_status
+ .additional_properties
+ .get("wait")
+ .and_then(|wait| wait.as_f64())
+ .unwrap_or_default(),
+ Some(NodeStatus::Pbs(node_status)) => node_status.wait,
+ None => 0.0,
+ };
+
+ let (memory_used, memory_total) = match data {
+ Some(NodeStatus::Pve(node_status)) => (
+ node_status.memory.used as u64,
+ node_status.memory.total as u64,
+ ),
+ Some(NodeStatus::Pbs(node_status)) => (node_status.memory.used, node_status.memory.total),
+ None => (0, 1),
+ };
+
+ let loadavg = match data {
+ Some(NodeStatus::Pve(node_status)) => node_status.loadavg.join(" "),
+ Some(NodeStatus::Pbs(node_status)) => format!(
+ "{:.2} {:.2} {:.2}",
+ node_status.loadavg[0], node_status.loadavg[1], node_status.loadavg[2]
+ ),
+ None => tr!("N/A"),
+ };
+
+ let (root_used, root_total) = match data {
+ Some(NodeStatus::Pve(node_status)) => (
+ node_status.rootfs.used as u64,
+ node_status.rootfs.total as u64,
+ ),
+ Some(NodeStatus::Pbs(node_status)) => (node_status.root.used, node_status.root.total),
+ None => (0, 1),
+ };
+
+ let (swap_used, swap_total) = match data {
+ Some(NodeStatus::Pve(node_status)) => {
+ if let Some(swap) = node_status
+ .additional_properties
+ .get("swap")
+ .and_then(|swap| swap.as_object())
+ {
+ let used = swap
+ .get("used")
+ .and_then(|used| used.as_u64())
+ .unwrap_or_default();
+ let total = swap
+ .get("total")
+ .and_then(|used| used.as_u64())
+ .unwrap_or(0);
+ (used, total)
+ } else {
+ (0, 0)
+ }
+ }
+ Some(NodeStatus::Pbs(node_status)) => (node_status.swap.used, node_status.swap.total),
+ None => (0, 1),
+ };
+
+ let (model, sockets) = match data {
+ Some(NodeStatus::Pve(node_status)) => (
+ node_status.cpuinfo.model.clone(),
+ node_status.cpuinfo.sockets as u64,
+ ),
+ Some(NodeStatus::Pbs(node_status)) => (
+ node_status.cpuinfo.model.clone(),
+ node_status.cpuinfo.sockets as u64,
+ ),
+ None => (String::new(), 1),
+ };
+
+ let version = match data {
+ Some(NodeStatus::Pve(node_status)) => Some(node_status.pveversion.clone()),
+ _ => None,
+ };
+
+ let (k_sysname, k_release, k_version) = match data {
+ Some(NodeStatus::Pve(node_status)) => (
+ node_status.current_kernel.sysname.clone(),
+ node_status.current_kernel.release.clone(),
+ node_status.current_kernel.version.clone(),
+ ),
+ Some(NodeStatus::Pbs(node_status)) => (
+ node_status.current_kernel.sysname.clone(),
+ node_status.current_kernel.release.clone(),
+ node_status.current_kernel.version.clone(),
+ ),
+ None => (String::new(), String::new(), String::new()),
+ };
+
+ Container::new()
+ .class("pwt-d-grid pwt-gap-2 pwt-align-items-center")
+ .style("grid-template-columns", "1fr 20px 1fr")
+ .style("height", "fit-content")
+ .padding(4)
+ .with_child(
+ MeterLabel::with_zero_optimum(tr!("CPU Usage"))
+ .animated(true)
+ .icon_class("fa fa-fw fa-cpu")
+ .value(cpu as f32)
+ .status(format!("{:.2}% of {} CPU(s)", cpu * 100.0, cpus_total)),
+ )
+ .with_child(
+ MeterLabel::with_zero_optimum(tr!("IO delay"))
+ .animated(true)
+ .style("grid-column", "3")
+ .icon_class("fa fa-fw fa-clock-o")
+ .value(wait as f32),
+ )
+ .with_child(Container::new().padding(2).style("grid-column", "1/-1"))
+ .with_child({
+ let fraction = ((memory_used as f64) / (memory_total as f64)) as f32;
+ MeterLabel::with_zero_optimum(tr!("RAM Usage"))
+ .animated(true)
+ .icon_class("fa fa-fw fa-memory")
+ .value(fraction)
+ .status(format!(
+ "{:.2}% ({} of {})",
+ fraction * 100.0,
+ HumanByte::from(memory_used),
+ HumanByte::from(memory_total),
+ ))
+ })
+ .with_child(
+ StatusRow::new(tr!("Load Average"))
+ .icon_class("fa fa-fw fa-tasks")
+ .status(loadavg)
+ .style("grid-column", "3"),
+ )
+ .with_child({
+ let fraction = ((root_used as f64) / (root_total as f64)) as f32;
+ MeterLabel::with_zero_optimum(tr!("HD space (root)"))
+ .animated(true)
+ .icon_class("fa fa-fw fa-hdd-o")
+ .value(fraction)
+ .status(format!(
+ "{:.2}% ({} of {})",
+ fraction * 100.0,
+ HumanByte::new_decimal(root_used as f64),
+ HumanByte::new_decimal(root_total as f64),
+ ))
+ })
+ .with_child({
+ let (fraction, status) = if swap_total > 0 {
+ let fraction = ((swap_used as f64) / (swap_total as f64)) as f32;
+ let status = format!(
+ "{:.2}% ({} of {})",
+ fraction * 100.0,
+ HumanByte::from(swap_used),
+ HumanByte::from(swap_total),
+ );
+ (Some(fraction), status)
+ } else {
+ (None, tr!("N/A"))
+ };
+ MeterLabel::with_zero_optimum(tr!("SWAP usage"))
+ .animated(true)
+ .style("grid-column", "3")
+ .icon_class("fa fa-fw fa-refresh")
+ .value(fraction)
+ .animated(true)
+ .status(status)
+ })
+ .with_child(Container::new().padding(2).style("grid-column", "1/-1"))
+ .with_child({
+ let cpu_model_text = format!(
+ "{} x {} ({})",
+ cpus_total,
+ model,
+ ngettext!("1 Socket", "{n} Sockets", sockets),
+ );
+ StatusRow::new(tr!("CPU(s)"))
+ .style("grid-column", "1/-1")
+ .status(cpu_model_text)
+ })
+ .with_optional_child(version.map(|version| {
+ StatusRow::new(tr!("Version"))
+ .style("grid-column", "1/-1")
+ .status(version)
+ }))
+ .with_child(
+ StatusRow::new(tr!("Kernel Version"))
+ .style("grid-column", "1/-1")
+ .status(format!("{} {} {}", k_sysname, k_release, k_version)),
+ )
+}
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH datacenter-manager 1/2] ui: pve: node: use `node_info` helper from yew-comp
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (7 preceding siblings ...)
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 ` Dominik Csapak
2025-09-23 9:51 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: rework status row/meter helpers Dominik Csapak
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
Contains more information that is presented like on PVE, and does not
use much more space.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
ui/src/pve/node/overview.rs | 76 ++++---------------------------------
1 file changed, 8 insertions(+), 68 deletions(-)
diff --git a/ui/src/pve/node/overview.rs b/ui/src/pve/node/overview.rs
index 2b659e54..1a98c004 100644
--- a/ui/src/pve/node/overview.rs
+++ b/ui/src/pve/node/overview.rs
@@ -5,13 +5,12 @@ use yew::{
Context,
};
-use proxmox_human_byte::HumanByte;
-use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use proxmox_yew_comp::{node_info, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
use pwt::{
css::{ColorScheme, FlexFit, JustifyContent},
prelude::*,
props::{ContainerBuilder, WidgetBuilder},
- widget::{error_message, Column, Container, Fa, Progress, Row},
+ widget::{error_message, Column, Container, Progress, Row},
AsyncPool,
};
@@ -210,67 +209,7 @@ impl yew::Component for NodeOverviewPanelComp {
}
fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
- let mut status_comp = Column::new().gap(2).padding(4);
- let status = self.status.as_ref();
- let cpu = status.map(|s| s.cpu).unwrap_or_default();
- let maxcpu = status.map(|s| s.cpuinfo.cpus).unwrap_or_default();
- let load = status.map(|s| s.loadavg.join(", ")).unwrap_or_default();
-
- let memory = status.map(|s| s.memory.used as u64).unwrap_or_default();
- let maxmem = status.map(|s| s.memory.total as u64).unwrap_or(1);
-
- let root = status.map(|s| s.rootfs.used as u64).unwrap_or_default();
- let maxroot = status.map(|s| s.rootfs.total as u64).unwrap_or(1);
-
- let root_used = root as f64 / maxroot as f64;
-
- status_comp = status_comp
- .with_child(make_row(
- tr!("CPU usage"),
- Fa::new("cpu"),
- tr!("{0}% of {1} CPU(s)", format!("{:.2}", cpu * 100.0), maxcpu),
- Some(cpu as f32),
- ))
- .with_child(make_row(
- tr!("Load average"),
- Fa::new("line-chart"),
- load,
- None,
- ))
- .with_child(crate::renderer::memory_status_row(memory, maxmem))
- .with_child(make_row(
- tr!("Root filesystem usage"),
- Fa::new("database"),
- tr!(
- "{0}% ({1} of {2})",
- format!("{:.2}", root_used * 100.0),
- HumanByte::from(root),
- HumanByte::from(maxroot),
- ),
- Some(root_used as f32),
- ))
- .with_child(Container::new().padding(1)) // spacer
- .with_child(
- Row::new()
- .with_child(tr!("Version"))
- .with_flex_spacer()
- .with_optional_child(status.map(|s| s.pveversion.as_str())),
- )
- .with_child(
- Row::new()
- .with_child(tr!("CPU Model"))
- .with_flex_spacer()
- .with_child(tr!(
- "{0} ({1} sockets)",
- status.map(|s| s.cpuinfo.model.as_str()).unwrap_or_default(),
- status.map(|s| s.cpuinfo.sockets).unwrap_or_default()
- )),
- );
-
- if let Some(err) = &self.last_status_error {
- status_comp.add_child(error_message(&err.to_string()));
- }
-
+ let status_comp = node_info(self.status.as_ref().map(|s| s.into()));
let loading = self.status.is_none() && self.last_status_error.is_none();
Container::new()
.class(FlexFit)
@@ -282,6 +221,11 @@ impl yew::Component for NodeOverviewPanelComp {
.style("opacity", (!loading).then_some("0")),
)
.with_child(status_comp)
+ .with_optional_child(
+ self.last_status_error
+ .as_ref()
+ .map(|err| error_message(&err.to_string())),
+ )
.with_child(separator().padding_x(4))
.with_child(
Row::new()
@@ -341,7 +285,3 @@ impl yew::Component for NodeOverviewPanelComp {
.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)
-}
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 11+ messages in thread
* [pdm-devel] [PATCH datacenter-manager 2/2] ui: rework status row/meter helpers
2025-09-23 9:51 [pdm-devel] [PATCH datacenter-manager/yew-comp 00/10] status row/node status cleanup + refactor Dominik Csapak
` (8 preceding siblings ...)
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
9 siblings, 0 replies; 11+ messages in thread
From: Dominik Csapak @ 2025-09-23 9:51 UTC (permalink / raw)
To: pdm-devel
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
^ permalink raw reply [flat|nested] 11+ messages in thread
end of thread, other threads:[~2025-09-23 9:51 UTC | newest]
Thread overview: 11+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
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 ` [pdm-devel] [PATCH datacenter-manager 2/2] ui: rework status row/meter helpers Dominik Csapak
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.