[pdm-devel] [PATCH datacenter-manager 4/4] ui: dashboard: add status row and configuration window

[Dominik Csapak <d.csapak@proxmox.com>]

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