From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 673071FF164 for ; Fri, 6 Jun 2025 09:27:06 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id B06EA35723; Fri, 6 Jun 2025 09:27:25 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Date: Fri, 6 Jun 2025 09:27:20 +0200 Message-Id: <20250606072720.664054-6-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20250606072720.664054-1-d.csapak@proxmox.com> References: <20250606072720.664054-1-d.csapak@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.022 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pdm-devel] [PATCH datacenter-manager 4/4] ui: dashboard: add status row and configuration window X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" 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 --- 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, #[serde(skip_serializing_if = "Option::is_none")] max_age: Option, } @@ -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, last_top_entities_error: Option, loading: bool, + load_finished_time: Option, remote_list: RemoteList, show_wizard: bool, + show_config_window: bool, _context_listener: ContextHandle, async_pool: AsyncPool, config: PersistentState, @@ -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, msg: Self::Message) -> bool { + fn update(&mut self, ctx: &Context, 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) -> 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 = 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, + reload_interval_s: u64, + + on_reload: Callback<()>, + + on_settings_click: Callback<()>, +} + +impl DashboardStatusRow { + pub fn new( + last_refresh: Option, + reload_interval_s: u64, + on_reload: impl Into>, + on_settings_click: impl Into>, + ) -> 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, +} + +impl PdmDashboardStatusRow { + fn update_interval(&mut self, ctx: &yew::Context) { + 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 { + let mut this = Self { _interval: None }; + this.update_interval(ctx); + this + } + + fn update(&mut self, ctx: &Context, 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, _old_props: &Self::Properties) -> bool { + self.update_interval(ctx); + true + } + + fn view(&self, ctx: &yew::Context) -> 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