[pdm-devel] [PATCH datacenter-manager/yew-widget-toolkit-assets 0/5] make dashboard refreshable

[pdm-devel] [PATCH datacenter-manager/yew-widget-toolkit-assets 0/5] make dashboard refreshable

[Dominik Csapak]

This series introduces an auto-refresh for the dashboard (and manual
refresh) with configurable interval.

proxmox-yew-widget-toolkit-assets:

Dominik Csapak (1):
  content-spacer: add helper class for color

 scss/_content_spacer.scss         | 6 ++++++
 scss/crisp/_theme_post_crisp.scss | 4 ++++
 2 files changed, 10 insertions(+)


proxmox-datacenter-manager:

Dominik Csapak (4):
  ui: dashboard: use builtin types and methods for styles
  ui: dashboard: introduce DashboardConfig
  ui: dashboard: refactor loading logic
  ui: dashboard: add status row and configuration window

 ui/src/dashboard/mod.rs        | 211 +++++++++++++++++++++++++++------
 ui/src/dashboard/status_row.rs | 137 +++++++++++++++++++++
 2 files changed, 309 insertions(+), 39 deletions(-)
 create mode 100644 ui/src/dashboard/status_row.rs


Summary over all repositories:
  4 files changed, 319 insertions(+), 39 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

[pdm-devel] [PATCH yew-widget-toolkit-assets 1/1] content-spacer: add helper class for color

[Dominik Csapak]

sometimes, there is need to use the spacer padding and color but not the
inner style of the content spacer. The padding class helper already
existed, but not the color one, so introduce it.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_content_spacer.scss         | 6 ++++++
 scss/crisp/_theme_post_crisp.scss | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/scss/_content_spacer.scss b/scss/_content_spacer.scss
index 1086135..e85bc86 100644
--- a/scss/_content_spacer.scss
+++ b/scss/_content_spacer.scss
@@ -51,3 +51,9 @@
 .pwt-content-spacer-padding {
     padding: var(--pwt-spacer-2);
 }
+
+.pwt-content-spacer-colors {
+    @include color-scheme-vars("surface");
+    color: var(--pwt-color);
+    background-color: var(--pwt-color-background);
+}
diff --git a/scss/crisp/_theme_post_crisp.scss b/scss/crisp/_theme_post_crisp.scss
index ac4e6d3..88d1564 100644
--- a/scss/crisp/_theme_post_crisp.scss
+++ b/scss/crisp/_theme_post_crisp.scss
@@ -7,3 +7,7 @@
 .pwt-content-spacer {
     @include color-scheme-vars("neutral");
 }
+
+.pwt-content-spacer-colors {
+    @include color-scheme-vars("neutral");
+}
-- 
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/4] ui: dashboard: use builtin types and methods for styles

[Dominik Csapak]

by using the rust types instead of a string for the classes, it's not
possible to mistype it, otherwise the compiler will error out.

Same with the styling of specifying e.g. padding. Just using the built-in
padding methods makes it impossible to mistype.

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

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index 23ff6b7..0832ced 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -9,7 +9,7 @@ use yew::{
 
 use proxmox_yew_comp::{http_get, Status};
 use pwt::{
-    css::{AlignItems, FlexFit, FlexWrap, JustifyContent},
+    css::{AlignItems, FlexDirection, FlexFit, FlexWrap, JustifyContent},
     prelude::*,
     widget::{error_message, Button, Column, Container, Fa, Panel, Row},
     AsyncPool,
@@ -243,7 +243,7 @@ impl Component for PdmDashboard {
             .with_child(
                 Container::new()
                     .class("pwt-content-spacer")
-                    .class("pwt-flex-direction-row")
+                    .class(FlexDirection::Row)
                     .class(FlexWrap::Wrap)
                     .with_child(
                         Panel::new()
@@ -336,10 +336,10 @@ impl Component for PdmDashboard {
             .with_child(
                 Container::new()
                     .class("pwt-content-spacer")
-                    .class("pwt-flex-direction-row")
+                    .class(FlexDirection::Row)
                     .class("pwt-align-content-start")
                     .class(pwt::css::Flex::Fill)
-                    .style("padding-top", "0")
+                    .padding_top(0)
                     .class(FlexWrap::Wrap)
                     //.min_height(175)
                     .with_child(self.create_top_entities_panel(
-- 
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/4] ui: dashboard: introduce DashboardConfig

[Dominik Csapak]

to hold the configuration of the dashboard. We'll later use this to
hold the user configuration.

Having it as a property does not make sense here since we don't set it
from outside the dashboard, and since it's not a generic component,
it's not likely to be reused elsewhere.

Saving it as a PersistentState also makes it possible to have it persist
across sessions when we're able to change it.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/dashboard/mod.rs | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index 0832ced..960766e 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
 use anyhow::Error;
+use serde::{Deserialize, Serialize};
 use serde_json::json;
 use yew::{
     virtual_dom::{VComp, VNode},
@@ -11,6 +12,8 @@ use proxmox_yew_comp::{http_get, Status};
 use pwt::{
     css::{AlignItems, FlexDirection, FlexFit, FlexWrap, JustifyContent},
     prelude::*,
+    props::StorageLocation,
+    state::PersistentState,
     widget::{error_message, Button, Column, Container, Fa, Panel, Row},
     AsyncPool,
 };
@@ -32,12 +35,11 @@ use remote_panel::RemotePanel;
 mod guest_panel;
 use guest_panel::GuestPanel;
 
+/// The default 'max-age' parameter in seconds.
+pub const DEFAULT_MAX_AGE_S: u64 = 60;
+
 #[derive(Properties, PartialEq)]
-pub struct Dashboard {
-    #[prop_or(60)]
-    /// The time (in seconds) to not refresh cached data. (Default: 60)
-    max_age_seconds: u64,
-}
+pub struct Dashboard {}
 
 impl Dashboard {
     pub fn new() -> Self {
@@ -51,6 +53,13 @@ impl Default for Dashboard {
     }
 }
 
+#[derive(Serialize, Deserialize, Default, Debug)]
+#[serde(rename_all = "kebab-case")]
+pub struct DashboardConfig {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    max_age: Option<u64>,
+}
+
 pub enum Msg {
     LoadingFinished(Result<ResourcesStatus, Error>),
     TopEntitiesLoadResult(Result<pdm_client::types::TopEntities, proxmox_client::Error>),
@@ -68,6 +77,7 @@ pub struct PdmDashboard {
     show_wizard: bool,
     _context_listener: ContextHandle<RemoteList>,
     _async_pool: AsyncPool,
+    _config: PersistentState<DashboardConfig>,
 }
 
 impl PdmDashboard {
@@ -169,7 +179,9 @@ impl Component for PdmDashboard {
 
     fn create(ctx: &yew::Context<Self>) -> Self {
         let link = ctx.link().clone();
-        let max_age = ctx.props().max_age_seconds;
+        let _config: PersistentState<DashboardConfig> =
+            PersistentState::new(StorageLocation::local("dashboard-config"));
+        let max_age = _config.max_age.unwrap_or(DEFAULT_MAX_AGE_S);
 
         let async_pool = AsyncPool::new();
 
@@ -199,6 +211,7 @@ impl Component for PdmDashboard {
             show_wizard: false,
             _context_listener,
             _async_pool: async_pool,
+            _config,
         }
     }
 
-- 
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/4] ui: dashboard: refactor loading logic

[Dominik Csapak]

We'll want to reload regularly, so refactor the logic to make that
easier. Only create one future, so we can reduce the amount of messages
and load everything in lockstep.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/dashboard/mod.rs | 67 +++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index 960766e..a1cac31 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
 use anyhow::Error;
+use futures::future::join;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use yew::{
@@ -60,9 +61,13 @@ pub struct DashboardConfig {
     max_age: Option<u64>,
 }
 
+pub type LoadingResult = (
+    Result<ResourcesStatus, Error>,
+    Result<pdm_client::types::TopEntities, proxmox_client::Error>,
+);
+
 pub enum Msg {
-    LoadingFinished(Result<ResourcesStatus, Error>),
-    TopEntitiesLoadResult(Result<pdm_client::types::TopEntities, proxmox_client::Error>),
+    LoadingFinished(LoadingResult),
     RemoteListChanged(RemoteList),
     CreateWizard(bool),
 }
@@ -76,8 +81,8 @@ pub struct PdmDashboard {
     remote_list: RemoteList,
     show_wizard: bool,
     _context_listener: ContextHandle<RemoteList>,
-    _async_pool: AsyncPool,
-    _config: PersistentState<DashboardConfig>,
+    async_pool: AsyncPool,
+    config: PersistentState<DashboardConfig>,
 }
 
 impl PdmDashboard {
@@ -171,6 +176,22 @@ impl PdmDashboard {
                     .map(|err| error_message(&err.to_string())),
             )
     }
+
+    fn reload(&mut self, ctx: &yew::Context<Self>) {
+        let link = ctx.link().clone();
+        let max_age = self.config.max_age.unwrap_or(DEFAULT_MAX_AGE_S);
+
+        self.async_pool.spawn(async move {
+            let client = crate::pdm_client();
+
+            let top_entities_future = client.get_top_entities();
+            let status_future = http_get("/resources/status", Some(json!({"max-age": max_age})));
+
+            let (top_entities_res, status_res) = join(top_entities_future, status_future).await;
+
+            link.send_message(Msg::LoadingFinished((status_res, top_entities_res)));
+        });
+    }
 }
 
 impl Component for PdmDashboard {
@@ -178,30 +199,15 @@ impl Component for PdmDashboard {
     type Properties = Dashboard;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
-        let link = ctx.link().clone();
-        let _config: PersistentState<DashboardConfig> =
-            PersistentState::new(StorageLocation::local("dashboard-config"));
-        let max_age = _config.max_age.unwrap_or(DEFAULT_MAX_AGE_S);
-
+        let config = PersistentState::new(StorageLocation::local("dashboard-config"));
         let async_pool = AsyncPool::new();
 
-        async_pool.spawn(async move {
-            let result = http_get("/resources/status", Some(json!({"max-age": max_age}))).await;
-            link.send_message(Msg::LoadingFinished(result));
-        });
-        async_pool.spawn({
-            let link = ctx.link().clone();
-            async move {
-                let result = crate::pdm_client().get_top_entities().await;
-                link.send_message(Msg::TopEntitiesLoadResult(result));
-            }
-        });
         let (remote_list, _context_listener) = ctx
             .link()
             .context(ctx.link().callback(Msg::RemoteListChanged))
             .expect("No Remote list context provided");
 
-        Self {
+        let mut this = Self {
             status: ResourcesStatus::default(),
             last_error: None,
             top_entities: None,
@@ -210,14 +216,18 @@ impl Component for PdmDashboard {
             remote_list,
             show_wizard: false,
             _context_listener,
-            _async_pool: async_pool,
-            _config,
-        }
+            async_pool,
+            config,
+        };
+
+        this.reload(ctx);
+
+        this
     }
 
     fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::LoadingFinished(resources_status) => {
+            Msg::LoadingFinished((resources_status, top_entities)) => {
                 match resources_status {
                     Ok(status) => {
                         self.last_error = None;
@@ -225,17 +235,14 @@ impl Component for PdmDashboard {
                     }
                     Err(err) => self.last_error = Some(err),
                 }
-                self.loading = false;
-                true
-            }
-            Msg::TopEntitiesLoadResult(res) => {
-                match res {
+                match top_entities {
                     Ok(data) => {
                         self.last_top_entities_error = None;
                         self.top_entities = Some(data);
                     }
                     Err(err) => self.last_top_entities_error = Some(err),
                 }
+                self.loading = false;
                 true
             }
             Msg::RemoteListChanged(remote_list) => {
-- 
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 4/4] ui: dashboard: add status row and configuration window

[Dominik Csapak]

This adds a row above the dashboard that includes:
* a 'refresh now' button
* a 'last refreshed' label
* a 'edit dashboard config' button

The last will open an EditWindow to configure the max-age parameter and
the refresh interval.

The status row is factored out, so the timer to update the label only
affects that small part of it instead of having to redraw the whole
dashboard.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/dashboard/mod.rs        | 121 ++++++++++++++++++++++++++++-
 ui/src/dashboard/status_row.rs | 137 +++++++++++++++++++++++++++++++++
 2 files changed, 254 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/dashboard/status_row.rs

diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index a1cac31..8b9adb7 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -1,7 +1,8 @@
-use std::rc::Rc;
+use std::{collections::HashMap, rc::Rc};
 
 use anyhow::Error;
 use futures::future::join;
+use js_sys::Date;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
 use yew::{
@@ -9,18 +10,23 @@ use yew::{
     Component,
 };
 
-use proxmox_yew_comp::{http_get, Status};
+use proxmox_yew_comp::{http_get, EditWindow, Status};
 use pwt::{
     css::{AlignItems, FlexDirection, FlexFit, FlexWrap, JustifyContent},
     prelude::*,
     props::StorageLocation,
     state::PersistentState,
-    widget::{error_message, Button, Column, Container, Fa, Panel, Row},
+    widget::{
+        error_message,
+        form::{DisplayField, FormContext, Number},
+        Button, Column, Container, Fa, InputPanel, Panel, Row,
+    },
     AsyncPool,
 };
 
 use pdm_api_types::resource::{GuestStatusCount, NodeStatusCount, ResourcesStatus};
 use pdm_client::types::TopEntity;
+use proxmox_client::ApiResponseData;
 
 use crate::{pve::GuestType, remotes::AddWizard, RemoteList};
 
@@ -36,9 +42,15 @@ use remote_panel::RemotePanel;
 mod guest_panel;
 use guest_panel::GuestPanel;
 
+mod status_row;
+use status_row::DashboardStatusRow;
+
 /// The default 'max-age' parameter in seconds.
 pub const DEFAULT_MAX_AGE_S: u64 = 60;
 
+/// The default refresh interval
+pub const DEFAULT_REFRESH_INTERVAL_S: u64 = DEFAULT_MAX_AGE_S / 2;
+
 #[derive(Properties, PartialEq)]
 pub struct Dashboard {}
 
@@ -57,6 +69,8 @@ impl Default for Dashboard {
 #[derive(Serialize, Deserialize, Default, Debug)]
 #[serde(rename_all = "kebab-case")]
 pub struct DashboardConfig {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    refresh_interval: Option<u64>,
     #[serde(skip_serializing_if = "Option::is_none")]
     max_age: Option<u64>,
 }
@@ -70,6 +84,9 @@ pub enum Msg {
     LoadingFinished(LoadingResult),
     RemoteListChanged(RemoteList),
     CreateWizard(bool),
+    Reload,
+    UpdateConfig(DashboardConfig),
+    ConfigWindow(bool),
 }
 
 pub struct PdmDashboard {
@@ -78,8 +95,10 @@ pub struct PdmDashboard {
     top_entities: Option<pdm_client::types::TopEntities>,
     last_top_entities_error: Option<proxmox_client::Error>,
     loading: bool,
+    load_finished_time: Option<f64>,
     remote_list: RemoteList,
     show_wizard: bool,
+    show_config_window: bool,
     _context_listener: ContextHandle<RemoteList>,
     async_pool: AsyncPool,
     config: PersistentState<DashboardConfig>,
@@ -181,6 +200,7 @@ impl PdmDashboard {
         let link = ctx.link().clone();
         let max_age = self.config.max_age.unwrap_or(DEFAULT_MAX_AGE_S);
 
+        self.load_finished_time = None;
         self.async_pool.spawn(async move {
             let client = crate::pdm_client();
 
@@ -213,8 +233,10 @@ impl Component for PdmDashboard {
             top_entities: None,
             last_top_entities_error: None,
             loading: true,
+            load_finished_time: None,
             remote_list,
             show_wizard: false,
+            show_config_window: false,
             _context_listener,
             async_pool,
             config,
@@ -225,7 +247,7 @@ impl Component for PdmDashboard {
         this
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::LoadingFinished((resources_status, top_entities)) => {
                 match resources_status {
@@ -243,6 +265,7 @@ impl Component for PdmDashboard {
                     Err(err) => self.last_top_entities_error = Some(err),
                 }
                 self.loading = false;
+                self.load_finished_time = Some(Date::now() / 1000.0);
                 true
             }
             Msg::RemoteListChanged(remote_list) => {
@@ -254,17 +277,46 @@ impl Component for PdmDashboard {
                 self.show_wizard = show;
                 true
             }
+            Msg::Reload => {
+                self.reload(ctx);
+                true
+            }
+            Msg::ConfigWindow(show) => {
+                self.show_config_window = show;
+                true
+            }
+            Msg::UpdateConfig(dashboard_config) => {
+                self.config.update(dashboard_config);
+                self.show_config_window = false;
+                true
+            }
         }
     }
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let content = Column::new()
             .class(FlexFit)
+            .with_child(
+                Container::new()
+                    .class("pwt-content-spacer-padding")
+                    .class("pwt-content-spacer-colors")
+                    .style("color", "var(--pwt-color)")
+                    .style("background-color", "var(--pwt-color-background)")
+                    .with_child(DashboardStatusRow::new(
+                        self.load_finished_time,
+                        self.config
+                            .refresh_interval
+                            .unwrap_or(DEFAULT_REFRESH_INTERVAL_S),
+                        ctx.link().callback(|_| Msg::Reload),
+                        ctx.link().callback(|_| Msg::ConfigWindow(true)),
+                    )),
+            )
             .with_child(
                 Container::new()
                     .class("pwt-content-spacer")
                     .class(FlexDirection::Row)
                     .class(FlexWrap::Wrap)
+                    .padding_top(0)
                     .with_child(
                         Panel::new()
                             .title(self.create_title_with_icon("server", tr!("Remotes")))
@@ -398,6 +450,67 @@ impl Component for PdmDashboard {
                         }),
                 ),
             )
+            .with_optional_child(
+                self.show_config_window.then_some(
+                    EditWindow::new(tr!("Dashboard Configuration"))
+                        .submit_text(tr!("Save"))
+                        .loader({
+                            || {
+                                let data: PersistentState<DashboardConfig> = PersistentState::new(
+                                    StorageLocation::local("dashboard-config"),
+                                );
+
+                                async move {
+                                    let data = serde_json::to_value(data.into_inner())?;
+                                    Ok(ApiResponseData {
+                                        attribs: HashMap::new(),
+                                        data,
+                                    })
+                                }
+                            }
+                        })
+                        .renderer(|_ctx: &FormContext| {
+                            InputPanel::new()
+                                .width(600)
+                                .padding(2)
+                                .with_field(
+                                    tr!("Refresh Interval (seconds)"),
+                                    Number::new()
+                                        .name("refresh-interval")
+                                        .min(5u64)
+                                        .step(5)
+                                        .placeholder(DEFAULT_REFRESH_INTERVAL_S.to_string()),
+                                )
+                                .with_field(
+                                    tr!("Max Age (seconds)"),
+                                    Number::new()
+                                        .name("max-age")
+                                        .min(0u64)
+                                        .step(5)
+                                        .placeholder(DEFAULT_MAX_AGE_S.to_string()),
+                                )
+                                .with_field(
+                                    "",
+                                    DisplayField::new()
+                                        .key("max-age-explanation")
+                                        .value(tr!("If a response from a remote is older than 'Max Age', it will be updated on the next refresh.")))
+                                .into()
+                        })
+                        .on_close(ctx.link().callback(|_| Msg::ConfigWindow(false)))
+                        .on_submit({
+                            let link = ctx.link().clone();
+                            move |ctx: FormContext| {
+                                let link = link.clone();
+                                async move {
+                                    let data: DashboardConfig =
+                                        serde_json::from_value(ctx.get_submit_data())?;
+                                    link.send_message(Msg::UpdateConfig(data));
+                                    Ok(())
+                                }
+                            }
+                        }),
+                ),
+            )
             .into()
     }
 }
diff --git a/ui/src/dashboard/status_row.rs b/ui/src/dashboard/status_row.rs
new file mode 100644
index 0000000..26e3319
--- /dev/null
+++ b/ui/src/dashboard/status_row.rs
@@ -0,0 +1,137 @@
+use gloo_timers::callback::Interval;
+use js_sys::Date;
+use yew::{Component, Properties};
+
+use pwt::prelude::*;
+use pwt::{
+    css::AlignItems,
+    widget::{ActionIcon, Container, Row, Tooltip},
+};
+use pwt_macros::widget;
+
+use proxmox_yew_comp::utils::format_duration_human;
+
+#[widget(comp=PdmDashboardStatusRow)]
+#[derive(Properties, PartialEq, Clone)]
+pub struct DashboardStatusRow {
+    last_refresh: Option<f64>,
+    reload_interval_s: u64,
+
+    on_reload: Callback<()>,
+
+    on_settings_click: Callback<()>,
+}
+
+impl DashboardStatusRow {
+    pub fn new(
+        last_refresh: Option<f64>,
+        reload_interval_s: u64,
+        on_reload: impl Into<Callback<()>>,
+        on_settings_click: impl Into<Callback<()>>,
+    ) -> Self {
+        yew::props!(Self {
+            last_refresh,
+            reload_interval_s,
+            on_reload: on_reload.into(),
+            on_settings_click: on_settings_click.into(),
+        })
+    }
+}
+
+pub enum Msg {
+    Reload,
+    CheckReload,
+}
+
+#[doc(hidden)]
+pub struct PdmDashboardStatusRow {
+    _interval: Option<Interval>,
+}
+
+impl PdmDashboardStatusRow {
+    fn update_interval(&mut self, ctx: &yew::Context<Self>) {
+        let link = ctx.link().clone();
+        let _interval = ctx.props().last_refresh.map(|_| {
+            Interval::new(1000, move || {
+                link.send_message(Msg::CheckReload);
+            })
+        });
+
+        self._interval = _interval;
+    }
+}
+
+impl Component for PdmDashboardStatusRow {
+    type Message = Msg;
+    type Properties = DashboardStatusRow;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        let mut this = Self { _interval: None };
+        this.update_interval(ctx);
+        this
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let props = ctx.props();
+        match msg {
+            Msg::Reload => {
+                props.on_reload.emit(());
+                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);
+                    }
+                    true
+                }
+                None => false,
+            },
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
+        self.update_interval(ctx);
+        true
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
+        let is_loading = props.last_refresh.is_none();
+        let on_settings_click = props.on_settings_click.clone();
+        Row::new()
+            .gap(1)
+            .class(AlignItems::Center)
+            .with_child(
+                Tooltip::new(
+                    ActionIcon::new(if is_loading {
+                        "fa fa-refresh fa-spin"
+                    } else {
+                        "fa fa-refresh"
+                    })
+                    .tabindex(0)
+                    .disabled(is_loading)
+                    .on_activate(ctx.link().callback(|_| Msg::Reload)),
+                )
+                .tip(tr!("Refresh now")),
+            )
+            .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))
+                }
+                None => tr!("Now refreshing"),
+            }))
+            .with_flex_spacer()
+            .with_child(
+                Tooltip::new(
+                    ActionIcon::new("fa fa-cogs")
+                        .tabindex(0)
+                        .on_activate(move |_| on_settings_click.emit(())),
+                )
+                .tip(tr!("Dashboard Settings")),
+            )
+            .into()
+    }
+}
-- 
2.39.5



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