[pdm-devel] [PATCH datacenter-manager 0/3] add rrd time frame selector for pve panels

[pdm-devel] [PATCH datacenter-manager 0/3] add rrd time frame selector for pve panels

[Dominik Csapak]

this series adds an rrd time frame selector to qemu/lxc/node panels for
pve.

note that my recent series[0] for improving the rrd graphs should be
applied first, otherwise there are some situations where the yew
application can easily panic.

0: https://lore.proxmox.com/yew-devel/20250530122202.2779300-1-d.csapak@proxmox.com/T/#t

Dominik Csapak (3):
  ui: pve: qemu: add rrd time frame selector
  ui: pve: lxc: add rrd time frame selector
  ui: pve: nodes: add rrd time frame selector

 ui/src/pve/lxc.rs  | 26 ++++++++++++++++++--------
 ui/src/pve/node.rs | 33 ++++++++++++++++++++++-----------
 ui/src/pve/qemu.rs | 26 ++++++++++++++++++--------
 3 files changed, 58 insertions(+), 27 deletions(-)

-- 
2.39.5



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 1/3] ui: pve: qemu: add rrd time frame selector

[Dominik Csapak]

so the user can select the timeframe and aggregation for the rrd graphs

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/qemu.rs | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/ui/src/pve/qemu.rs b/ui/src/pve/qemu.rs
index 57e5e74..f6b4d1f 100644
--- a/ui/src/pve/qemu.rs
+++ b/ui/src/pve/qemu.rs
@@ -9,7 +9,7 @@ use yew::{
 };
 
 use proxmox_human_byte::HumanByte;
-use proxmox_yew_comp::{RRDGraph, Series};
+use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 use pwt::{
     css::{AlignItems, ColorScheme, FlexFit},
     prelude::*,
@@ -69,6 +69,7 @@ pub enum Msg {
     ReloadRrd,
     StatusResult(Result<QemuStatus, proxmox_client::Error>),
     RrdResult(Result<Vec<QemuDataPoint>, proxmox_client::Error>),
+    UpdateRrdTimeframe(RRDTimeframe),
 }
 
 pub struct QemuPanelComp {
@@ -79,6 +80,8 @@ pub struct QemuPanelComp {
     _rrd_timeout: Option<Timeout>,
     _async_pool: AsyncPool,
 
+    rrd_time_frame: RRDTimeframe,
+
     time: Rc<Vec<i64>>,
     cpu: Rc<Series>,
     memory: Rc<Series>,
@@ -100,14 +103,10 @@ impl QemuPanelComp {
     async fn reload_rrd(
         remote: &str,
         vmid: u32,
+        rrd_time_frame: RRDTimeframe,
     ) -> Result<Vec<QemuDataPoint>, proxmox_client::Error> {
         let rrd = crate::pdm_client()
-            .pve_qemu_rrddata(
-                remote,
-                vmid,
-                proxmox_rrd_api_types::RrdMode::Average,
-                proxmox_rrd_api_types::RrdTimeframe::Hour,
-            )
+            .pve_qemu_rrddata(remote, vmid, rrd_time_frame.mode, rrd_time_frame.timeframe)
             .await?;
         Ok(rrd)
     }
@@ -129,6 +128,8 @@ impl yew::Component for QemuPanelComp {
             last_rrd_error: None,
             last_status_error: None,
 
+            rrd_time_frame: RRDTimeframe::load(),
+
             time: Rc::new(Vec::new()),
             cpu: Rc::new(Series::new("", Vec::new())),
             memory: Rc::new(Series::new("", Vec::new())),
@@ -153,8 +154,9 @@ impl yew::Component for QemuPanelComp {
                 false
             }
             Msg::ReloadRrd => {
+                let time_frame = self.rrd_time_frame;
                 self._async_pool.send_future(link, async move {
-                    Msg::RrdResult(Self::reload_rrd(&remote, vmid).await)
+                    Msg::RrdResult(Self::reload_rrd(&remote, vmid, time_frame).await)
                 });
                 false
             }
@@ -214,6 +216,11 @@ impl yew::Component for QemuPanelComp {
                 }));
                 true
             }
+            Msg::UpdateRrdTimeframe(rrd_time_frame) => {
+                self.rrd_time_frame = rrd_time_frame;
+                ctx.link().send_message(Msg::ReloadRrd);
+                false
+            }
         }
     }
 
@@ -360,6 +367,9 @@ impl yew::Component for QemuPanelComp {
         Panel::new()
             .class(FlexFit)
             .title(title)
+            .with_tool(
+                RRDTimeframeSelector::new().on_change(ctx.link().callback(Msg::UpdateRrdTimeframe)),
+            )
             .class(ColorScheme::Neutral)
             .with_child(
                 // FIXME: add some 'visible' or 'active' property to the progress
-- 
2.39.5



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 2/3] ui: pve: lxc: add rrd time frame selector

[Dominik Csapak]

so the user can select the timeframe and aggregation for the rrd graphs

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/lxc.rs | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/ui/src/pve/lxc.rs b/ui/src/pve/lxc.rs
index c43ac9e..92d9757 100644
--- a/ui/src/pve/lxc.rs
+++ b/ui/src/pve/lxc.rs
@@ -9,7 +9,7 @@ use yew::{
 };
 
 use proxmox_human_byte::HumanByte;
-use proxmox_yew_comp::{RRDGraph, Series};
+use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 use pwt::{
     css::{AlignItems, ColorScheme, FlexFit},
     prelude::*,
@@ -69,6 +69,7 @@ pub enum Msg {
     ReloadRrd,
     StatusResult(Result<LxcStatus, proxmox_client::Error>),
     RrdResult(Result<Vec<LxcDataPoint>, proxmox_client::Error>),
+    UpdateRrdTimeframe(RRDTimeframe),
 }
 
 pub struct LxcanelComp {
@@ -79,6 +80,8 @@ pub struct LxcanelComp {
     _rrd_timeout: Option<Timeout>,
     _async_pool: AsyncPool,
 
+    rrd_time_frame: RRDTimeframe,
+
     time: Rc<Vec<i64>>,
     cpu: Rc<Series>,
     memory: Rc<Series>,
@@ -100,14 +103,10 @@ impl LxcanelComp {
     async fn reload_rrd(
         remote: &str,
         vmid: u32,
+        rrd_time_frame: RRDTimeframe,
     ) -> Result<Vec<LxcDataPoint>, proxmox_client::Error> {
         let rrd = crate::pdm_client()
-            .pve_lxc_rrddata(
-                remote,
-                vmid,
-                proxmox_rrd_api_types::RrdMode::Average,
-                proxmox_rrd_api_types::RrdTimeframe::Hour,
-            )
+            .pve_lxc_rrddata(remote, vmid, rrd_time_frame.mode, rrd_time_frame.timeframe)
             .await?;
         Ok(rrd)
     }
@@ -129,6 +128,8 @@ impl yew::Component for LxcanelComp {
             last_rrd_error: None,
             last_status_error: None,
 
+            rrd_time_frame: RRDTimeframe::load(),
+
             time: Rc::new(Vec::new()),
             cpu: Rc::new(Series::new("", Vec::new())),
             memory: Rc::new(Series::new("", Vec::new())),
@@ -153,8 +154,9 @@ impl yew::Component for LxcanelComp {
                 false
             }
             Msg::ReloadRrd => {
+                let timeframe = self.rrd_time_frame;
                 self._async_pool.send_future(link, async move {
-                    Msg::RrdResult(Self::reload_rrd(&remote, vmid).await)
+                    Msg::RrdResult(Self::reload_rrd(&remote, vmid, timeframe).await)
                 });
                 false
             }
@@ -214,6 +216,11 @@ impl yew::Component for LxcanelComp {
                 }));
                 true
             }
+            Msg::UpdateRrdTimeframe(rrd_time_frame) => {
+                self.rrd_time_frame = rrd_time_frame;
+                ctx.link().send_message(Msg::ReloadRrd);
+                false
+            }
         }
     }
 
@@ -351,6 +358,9 @@ impl yew::Component for LxcanelComp {
         Panel::new()
             .class(FlexFit)
             .title(title)
+            .with_tool(
+                RRDTimeframeSelector::new().on_change(ctx.link().callback(Msg::UpdateRrdTimeframe)),
+            )
             .class(ColorScheme::Neutral)
             .with_child(
                 // FIXME: add some 'visible' or 'active' property to the progress
-- 
2.39.5



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 3/3] ui: pve: nodes: add rrd time frame selector

[Dominik Csapak]

so the user can select the timeframe and aggregation for the rrd graphs

also rename 'reload' to 'reload_rrd' and 'Msg::Reload' to
'Msg::ReloadRrd' so we're consistent with the qemu/lxc components.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/node.rs | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/ui/src/pve/node.rs b/ui/src/pve/node.rs
index b089f64..b3b002e 100644
--- a/ui/src/pve/node.rs
+++ b/ui/src/pve/node.rs
@@ -6,8 +6,7 @@ use yew::{
 };
 
 use proxmox_human_byte::HumanByte;
-use proxmox_rrd_api_types::{RrdMode, RrdTimeframe};
-use proxmox_yew_comp::{RRDGraph, Series};
+use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 use pwt::{
     css::{AlignItems, ColorScheme, FlexFit},
     prelude::*,
@@ -51,10 +50,11 @@ impl Into<VNode> for NodePanel {
 }
 
 pub enum Msg {
-    Reload,
+    ReloadRrd,
     ReloadStatus,
     LoadFinished(Result<Vec<NodeDataPoint>, proxmox_client::Error>),
     StatusLoadFinished(Result<NodeStatus, proxmox_client::Error>),
+    UpdateRrdTimeframe(RRDTimeframe),
 }
 
 pub struct NodePanelComp {
@@ -65,6 +65,8 @@ pub struct NodePanelComp {
     mem_total_data: Rc<Series>,
     status: Option<NodeStatus>,
 
+    rrd_time_frame: RRDTimeframe,
+
     last_error: Option<proxmox_client::Error>,
     last_status_error: Option<proxmox_client::Error>,
 
@@ -74,9 +76,9 @@ pub struct NodePanelComp {
 }
 
 impl NodePanelComp {
-    async fn reload(remote: &str, node: &str) -> Msg {
+    async fn reload_rrd(remote: &str, node: &str, rrd_time_frame: RRDTimeframe) -> Msg {
         let res = crate::pdm_client()
-            .pve_node_rrddata(remote, node, RrdMode::Average, RrdTimeframe::Hour)
+            .pve_node_rrddata(remote, node, rrd_time_frame.mode, rrd_time_frame.timeframe)
             .await;
 
         Msg::LoadFinished(res)
@@ -93,7 +95,7 @@ impl yew::Component for NodePanelComp {
     type Properties = NodePanel;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
-        ctx.link().send_message(Msg::Reload);
+        ctx.link().send_message(Msg::ReloadRrd);
         ctx.link().send_message(Msg::ReloadStatus);
         Self {
             time_data: Rc::new(Vec::new()),
@@ -101,6 +103,7 @@ impl yew::Component for NodePanelComp {
             load_data: Rc::new(Series::new("", Vec::new())),
             mem_data: Rc::new(Series::new("", Vec::new())),
             mem_total_data: Rc::new(Series::new("", Vec::new())),
+            rrd_time_frame: RRDTimeframe::load(),
             status: None,
             last_error: None,
             last_status_error: None,
@@ -112,13 +115,14 @@ impl yew::Component for NodePanelComp {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::Reload => {
+            Msg::ReloadRrd => {
                 self._timeout = None;
                 let props = ctx.props();
                 let remote = props.remote.clone();
                 let node = props.node.clone();
+                let timeframe = self.rrd_time_frame;
                 self.async_pool.send_future(ctx.link().clone(), async move {
-                    Self::reload(&remote, &node).await
+                    Self::reload_rrd(&remote, &node, timeframe).await
                 });
             }
             Msg::ReloadStatus => {
@@ -156,12 +160,11 @@ impl yew::Component for NodePanelComp {
                     let link = ctx.link().clone();
                     self._timeout = Some(gloo_timers::callback::Timeout::new(
                         ctx.props().rrd_interval,
-                        move || link.send_message(Msg::Reload),
+                        move || link.send_message(Msg::ReloadRrd),
                     ))
                 }
                 Err(err) => self.last_error = Some(err),
             },
-
             Msg::StatusLoadFinished(res) => {
                 match res {
                     Ok(status) => {
@@ -176,6 +179,11 @@ impl yew::Component for NodePanelComp {
                     move || link.send_message(Msg::ReloadStatus),
                 ))
             }
+            Msg::UpdateRrdTimeframe(rrd_time_frame) => {
+                self.rrd_time_frame = rrd_time_frame;
+                ctx.link().send_message(Msg::ReloadRrd);
+                return false;
+            }
         }
         true
     }
@@ -194,7 +202,7 @@ impl yew::Component for NodePanelComp {
             self.mem_total_data = Rc::new(Series::new("", Vec::new()));
             self.async_pool = AsyncPool::new();
             ctx.link()
-                .send_message_batch(vec![Msg::Reload, Msg::ReloadStatus]);
+                .send_message_batch(vec![Msg::ReloadRrd, Msg::ReloadStatus]);
             true
         } else {
             false
@@ -286,6 +294,9 @@ impl yew::Component for NodePanelComp {
         Panel::new()
             .class(FlexFit)
             .title(title)
+            .with_tool(
+                RRDTimeframeSelector::new().on_change(ctx.link().callback(Msg::UpdateRrdTimeframe)),
+            )
             .class(ColorScheme::Neutral)
             .with_child(
                 // FIXME: add some 'visible' or 'active' property to the progress
-- 
2.39.5



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [PATCH datacenter-manager 0/3] add rrd time frame selector for pve panels

[Lukas Wagner]

On Fri Jun 6, 2025 at 2:10 PM CEST, Dominik Csapak wrote:
> this series adds an rrd time frame selector to qemu/lxc/node panels for
> pve.
>
> note that my recent series[0] for improving the rrd graphs should be
> applied first, otherwise there are some situations where the yew
> application can easily panic.
>
> 0: https://lore.proxmox.com/yew-devel/20250530122202.2779300-1-d.csapak@proxmox.com/T/#t
>
> Dominik Csapak (3):
>   ui: pve: qemu: add rrd time frame selector
>   ui: pve: lxc: add rrd time frame selector
>   ui: pve: nodes: add rrd time frame selector
>
>  ui/src/pve/lxc.rs  | 26 ++++++++++++++++++--------
>  ui/src/pve/node.rs | 33 ++++++++++++++++++++++-----------
>  ui/src/pve/qemu.rs | 26 ++++++++++++++++++--------
>  3 files changed, 58 insertions(+), 27 deletions(-)

Looks good to me.

Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>
Tested-by: Lukas Wagner <l.wagner@proxmox.com>

(I can apply these if you want, but I didn't so far since I'm not
familiar at all with the UI code yet)



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [PATCH datacenter-manager 0/3] add rrd time frame selector for pve panels

[Dominik Csapak]

On 8/18/25 14:30, Lukas Wagner wrote:
> On Fri Jun 6, 2025 at 2:10 PM CEST, Dominik Csapak wrote:
>> this series adds an rrd time frame selector to qemu/lxc/node panels for
>> pve.
>>
>> note that my recent series[0] for improving the rrd graphs should be
>> applied first, otherwise there are some situations where the yew
>> application can easily panic.
>>
>> 0: https://lore.proxmox.com/yew-devel/20250530122202.2779300-1-d.csapak@proxmox.com/T/#t
>>
>> Dominik Csapak (3):
>>    ui: pve: qemu: add rrd time frame selector
>>    ui: pve: lxc: add rrd time frame selector
>>    ui: pve: nodes: add rrd time frame selector
>>
>>   ui/src/pve/lxc.rs  | 26 ++++++++++++++++++--------
>>   ui/src/pve/node.rs | 33 ++++++++++++++++++++++-----------
>>   ui/src/pve/qemu.rs | 26 ++++++++++++++++++--------
>>   3 files changed, 58 insertions(+), 27 deletions(-)
> 
> Looks good to me.
> 
> Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>
> Tested-by: Lukas Wagner <l.wagner@proxmox.com>
> 
> (I can apply these if you want, but I didn't so far since I'm not
> familiar at all with the UI code yet)
> 

imo you can apply it, but we must bump the yew-comp dependency to 0.5.6
(which is just being uploaded), otherwise we can easily generate panics 
when switching between the ranges


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] applied: [PATCH datacenter-manager 0/3] add rrd time frame selector for pve panels

[Lukas Wagner]

On Fri Jun 6, 2025 at 2:10 PM CEST, Dominik Csapak wrote:
> this series adds an rrd time frame selector to qemu/lxc/node panels for
> pve.
>
> note that my recent series[0] for improving the rrd graphs should be
> applied first, otherwise there are some situations where the yew
> application can easily panic.
>
> 0: https://lore.proxmox.com/yew-devel/20250530122202.2779300-1-d.csapak@proxmox.com/T/#t
>
> Dominik Csapak (3):
>   ui: pve: qemu: add rrd time frame selector
>   ui: pve: lxc: add rrd time frame selector
>   ui: pve: nodes: add rrd time frame selector
>
>  ui/src/pve/lxc.rs  | 26 ++++++++++++++++++--------
>  ui/src/pve/node.rs | 33 ++++++++++++++++++++++-----------
>  ui/src/pve/qemu.rs | 26 ++++++++++++++++++--------
>  3 files changed, 58 insertions(+), 27 deletions(-)

Applied, thank you!

Followed up with a bump for the proxmox-yew-comp crate to 0.5.6, as you
suggested.


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel