* [pdm-devel] [PATCH datacenter-manager 2/4] ui: dashboard: introduce DashboardConfig
2025-06-06 7:27 [pdm-devel] [PATCH datacenter-manager/yew-widget-toolkit-assets 0/5] make dashboard refreshable Dominik Csapak
2025-06-06 7:27 ` [pdm-devel] [PATCH yew-widget-toolkit-assets 1/1] content-spacer: add helper class for color Dominik Csapak
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 1/4] ui: dashboard: use builtin types and methods for styles Dominik Csapak
@ 2025-06-06 7:27 ` Dominik Csapak
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 3/4] ui: dashboard: refactor loading logic Dominik Csapak
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 4/4] ui: dashboard: add status row and configuration window Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2025-06-06 7:27 UTC (permalink / raw)
To: pdm-devel
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
^ permalink raw reply [flat|nested] 6+ messages in thread* [pdm-devel] [PATCH datacenter-manager 3/4] ui: dashboard: refactor loading logic
2025-06-06 7:27 [pdm-devel] [PATCH datacenter-manager/yew-widget-toolkit-assets 0/5] make dashboard refreshable Dominik Csapak
` (2 preceding siblings ...)
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 2/4] ui: dashboard: introduce DashboardConfig Dominik Csapak
@ 2025-06-06 7:27 ` Dominik Csapak
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 4/4] ui: dashboard: add status row and configuration window Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2025-06-06 7:27 UTC (permalink / raw)
To: pdm-devel
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
^ permalink raw reply [flat|nested] 6+ messages in thread* [pdm-devel] [PATCH datacenter-manager 4/4] ui: dashboard: add status row and configuration window
2025-06-06 7:27 [pdm-devel] [PATCH datacenter-manager/yew-widget-toolkit-assets 0/5] make dashboard refreshable Dominik Csapak
` (3 preceding siblings ...)
2025-06-06 7:27 ` [pdm-devel] [PATCH datacenter-manager 3/4] ui: dashboard: refactor loading logic Dominik Csapak
@ 2025-06-06 7:27 ` Dominik Csapak
4 siblings, 0 replies; 6+ messages in thread
From: Dominik Csapak @ 2025-06-06 7:27 UTC (permalink / raw)
To: 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 <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
^ permalink raw reply [flat|nested] 6+ messages in thread