[pdm-devel] [PATCH datacenter-manager 2/2] ui: dashboard: render last refresh date/time instead of a seconds counter

[Dominik Csapak]

this is less jarring, since it does not change the content of the page
as often. Since we now only have to do things when we actually reload,
we can use the actual configured interval for the internal one, and
don't have to check every second if that elapsed.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 ui/src/dashboard/mod.rs        |  4 +--
 ui/src/dashboard/status_row.rs | 47 +++++++++++++---------------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index 8d68dc2..11b4e2d 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -71,7 +71,7 @@ pub const DEFAULT_MAX_AGE_S: u64 = 30;
 /// The default refresh interval, we poll more frequently than the default max-age to quicker show
 /// any new data that was gathered either by the backend polling tasks or by a manual update
 /// triggered by another user.
-pub const DEFAULT_REFRESH_INTERVAL_S: u64 = 10;
+pub const DEFAULT_REFRESH_INTERVAL_S: u32 = 10;
 
 /// The default hours to show for task summaries. Use 2 days to ensure that all tasks from yesterday
 /// are included independent from the time a user checks the dashboard on the current day.
@@ -96,7 +96,7 @@ impl Default for Dashboard {
 #[serde(rename_all = "kebab-case")]
 pub struct DashboardConfig {
     #[serde(skip_serializing_if = "Option::is_none")]
-    refresh_interval: Option<u64>,
+    refresh_interval: Option<u32>,
     #[serde(skip_serializing_if = "Option::is_none")]
     max_age: Option<u64>,
     #[serde(skip_serializing_if = "Option::is_none")]
diff --git a/ui/src/dashboard/status_row.rs b/ui/src/dashboard/status_row.rs
index 85048fe..5e37741 100644
--- a/ui/src/dashboard/status_row.rs
+++ b/ui/src/dashboard/status_row.rs
@@ -1,5 +1,4 @@
 use gloo_timers::callback::Interval;
-use js_sys::Date;
 use yew::{Component, Properties};
 
 use pwt::prelude::*;
@@ -9,13 +8,13 @@ use pwt::{
 };
 use pwt_macros::widget;
 
-use proxmox_yew_comp::utils::format_duration_human;
+use proxmox_yew_comp::utils::render_epoch;
 
 #[widget(comp=PdmDashboardStatusRow)]
 #[derive(Properties, PartialEq, Clone)]
 pub struct DashboardStatusRow {
     last_refresh: Option<f64>,
-    reload_interval_s: u64,
+    reload_interval_s: u32,
 
     on_reload: Callback<bool>,
 
@@ -25,7 +24,7 @@ pub struct DashboardStatusRow {
 impl DashboardStatusRow {
     pub fn new(
         last_refresh: Option<f64>,
-        reload_interval_s: u64,
+        reload_interval_s: u32,
         on_reload: impl Into<Callback<bool>>,
         on_settings_click: impl Into<Callback<()>>,
     ) -> Self {
@@ -41,24 +40,24 @@ impl DashboardStatusRow {
 pub enum Msg {
     /// The bool denotes if the reload comes from the click or the timer.
     Reload(bool),
-    CheckReload,
 }
 
 #[doc(hidden)]
 pub struct PdmDashboardStatusRow {
-    _interval: Option<Interval>,
+    _interval: Interval,
 }
 
 impl PdmDashboardStatusRow {
-    fn update_interval(&mut self, ctx: &yew::Context<Self>) {
+    fn create_interval(ctx: &yew::Context<Self>) -> Interval {
         let link = ctx.link().clone();
-        let _interval = ctx.props().last_refresh.map(|_| {
-            Interval::new(1000, move || {
-                link.send_message(Msg::CheckReload);
-            })
-        });
+        let _interval = Interval::new(
+            ctx.props().reload_interval_s.saturating_mul(1000),
+            move || {
+                link.send_message(Msg::Reload(false));
+            },
+        );
 
-        self._interval = _interval;
+        _interval
     }
 }
 
@@ -67,9 +66,9 @@ impl Component for PdmDashboardStatusRow {
     type Properties = DashboardStatusRow;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
-        let mut this = Self { _interval: None };
-        this.update_interval(ctx);
-        this
+        Self {
+            _interval: Self::create_interval(ctx),
+        }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
@@ -79,21 +78,11 @@ impl Component for PdmDashboardStatusRow {
                 props.on_reload.emit(clicked);
                 true
             }
-            Msg::CheckReload => match ctx.props().last_refresh {
-                Some(last_refresh) => {
-                    let duration = Date::now() / 1000.0 - last_refresh;
-                    if duration >= props.reload_interval_s as f64 {
-                        ctx.link().send_message(Msg::Reload(false));
-                    }
-                    true
-                }
-                None => false,
-            },
         }
     }
 
     fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
-        self.update_interval(ctx);
+        self._interval = Self::create_interval(ctx);
         true
     }
 
@@ -119,8 +108,8 @@ impl Component for PdmDashboardStatusRow {
             )
             .with_child(Container::new().with_child(match ctx.props().last_refresh {
                 Some(last_refresh) => {
-                    let duration = Date::now() / 1000.0 - last_refresh;
-                    tr!("Last refreshed: {0} ago", format_duration_human(duration))
+                    let date = render_epoch(last_refresh as i64);
+                    tr!("Last refresh: {0}", date)
                 }
                 None => tr!("Now refreshing"),
             }))
-- 
2.47.2