[PATCH datacenter-manager 0/4] ui: dashboard improvements

[PATCH datacenter-manager 0/4] ui: dashboard improvements

[Dominik Csapak]

some smaller dashboard improvements:
* vertical center gauge panels (patch 1)
* reformat of imports in renderer module (patch 2)
* add special empty state on the default dashboard (patches 3+4)

Dominik Csapak (4):
  ui: views: vertically center gauge charts
  ui: renderer: cleanup import structure
  ui: factor out the 'empty_state' render helper
  ui: dashboard: show special empty state when no remotes are configured

 ui/src/dashboard/gauge_panel.rs |  2 +
 ui/src/dashboard/view.rs        | 80 +++++++++++++++++++++++++++++++--
 ui/src/guests.rs                | 22 +--------
 ui/src/renderer.rs              | 28 +++++++++---
 4 files changed, 102 insertions(+), 30 deletions(-)

-- 
2.47.3

[PATCH datacenter-manager 1/4] ui: views: vertically center gauge charts

[Dominik Csapak]

when the neighboring items in a view are taller, the gauge panels are
top-aligned. This looks better if they're centered, so to that.

Most of the other panels are centered too, with exception of the
grids/lists.

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

diff --git a/ui/src/dashboard/gauge_panel.rs b/ui/src/dashboard/gauge_panel.rs
index 3c03173e..24d0f323 100644
--- a/ui/src/dashboard/gauge_panel.rs
+++ b/ui/src/dashboard/gauge_panel.rs
@@ -153,6 +153,8 @@ pub fn create_gauge_panel(
             };
 
             Row::new()
+                .flex(1.0)
+                .class(css::AlignItems::Center)
                 .padding(4)
                 .with_optional_child(cpu.map(|(used, total)| {
                     let pct = if total == 0.0 { 0.0 } else { used / total };
-- 
2.47.3

[PATCH datacenter-manager 2/4] ui: renderer: cleanup import structure

[Dominik Csapak]

to fit our usual style better, which makes it cleaner to add new imports
per module.

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

diff --git a/ui/src/renderer.rs b/ui/src/renderer.rs
index 00c0720e..1d152977 100644
--- a/ui/src/renderer.rs
+++ b/ui/src/renderer.rs
@@ -1,10 +1,8 @@
 use proxmox_yew_comp::MeterLabel;
-use pwt::{
-    css::AlignItems,
-    prelude::*,
-    props::ContainerBuilder,
-    widget::{Container, Fa, Row},
-};
+use pwt::css::AlignItems;
+use pwt::prelude::*;
+use pwt::props::ContainerBuilder;
+use pwt::widget::{Container, Fa, Row};
 
 use proxmox_human_byte::HumanByte;
 
-- 
2.47.3

[PATCH datacenter-manager 3/4] ui: factor out the 'empty_state' render helper

[Dominik Csapak]

this is a nice looking hint for empty grids/panels that we should reuse
across the various pages so move it to the renderer module.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/guests.rs   | 22 ++--------------------
 ui/src/renderer.rs | 22 ++++++++++++++++++++--
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/src/guests.rs b/ui/src/guests.rs
index 416d5866..f11f0de5 100644
--- a/ui/src/guests.rs
+++ b/ui/src/guests.rs
@@ -24,7 +24,7 @@ use proxmox_yew_comp::{
     LoadableComponentScopeExt, LoadableComponentState, rrd_value_renderer,
 };
 
-use pwt::css::{AlignItems, ColorScheme, FlexFit, FontStyle, JustifyContent};
+use pwt::css::{AlignItems, ColorScheme, FlexFit, JustifyContent};
 use pwt::prelude::*;
 use pwt::props::{
     ContainerBuilder, CssPaddingBuilder, ExtractPrimaryKey, StorageLocation, WidgetBuilder,
@@ -44,7 +44,7 @@ use pdm_search::SearchTerm;
 
 use crate::pve::utils::{guest_is_live, guest_status_label, render_guest_tags};
 use crate::pve::{GuestInfo, GuestType};
-use crate::renderer::{render_resource_name, render_status_icon, render_tree_column};
+use crate::renderer::{empty_state, render_resource_name, render_status_icon, render_tree_column};
 use crate::{
     get_deep_url, get_resource_node,
     widget::{MigrateWindow, SnapshotWindow},
@@ -606,24 +606,6 @@ impl LoadableComponent for GuestPanelComp {
     }
 }
 
-/// A centered, large-icon empty state with a title and an explanatory hint.
-fn empty_state(icon: &str, title: String, hint: String) -> Html {
-    Column::new()
-        .class(FlexFit)
-        .class(JustifyContent::Center)
-        .class(AlignItems::Center)
-        .gap(2)
-        .padding(4)
-        .with_child(Fa::new(icon).large_3x())
-        .with_child(
-            Container::from_tag("span")
-                .class(FontStyle::TitleMedium)
-                .with_child(title),
-        )
-        .with_child(Container::from_tag("span").with_child(hint))
-        .into()
-}
-
 fn failed_remotes_banner(failed: &[String]) -> Html {
     Row::new()
         .padding(2)
diff --git a/ui/src/renderer.rs b/ui/src/renderer.rs
index 1d152977..be3a94b4 100644
--- a/ui/src/renderer.rs
+++ b/ui/src/renderer.rs
@@ -1,8 +1,8 @@
 use proxmox_yew_comp::MeterLabel;
-use pwt::css::AlignItems;
+use pwt::css::{AlignItems, FlexFit, FontStyle, JustifyContent};
 use pwt::prelude::*;
 use pwt::props::ContainerBuilder;
-use pwt::widget::{Container, Fa, Row};
+use pwt::widget::{Column, Container, Fa, Row};
 
 use proxmox_human_byte::HumanByte;
 
@@ -109,3 +109,21 @@ pub(crate) fn render_title_row(title: String, icon: &str) -> Row {
         .with_child(Fa::new(icon))
         .with_child(title)
 }
+
+/// A centered, large-icon empty state with a title and an explanatory hint.
+pub(crate) fn empty_state(icon: &str, title: String, hint: String) -> Html {
+    Column::new()
+        .class(FlexFit)
+        .class(JustifyContent::Center)
+        .class(AlignItems::Center)
+        .gap(2)
+        .padding(4)
+        .with_child(Fa::new(icon).large_3x())
+        .with_child(
+            Container::from_tag("span")
+                .class(FontStyle::TitleMedium)
+                .with_child(title),
+        )
+        .with_child(Container::from_tag("span").with_child(hint))
+        .into()
+}
-- 
2.47.3

[PATCH datacenter-manager 4/4] ui: dashboard: show special empty state when no remotes are configured

[Dominik Csapak]

In the default dashboard, it makes no sense to show the widget when we
don't have any remotes configured, as that cannot show any useful data.
(In contrast to views, this could show things based on the views
permissions/settings).

Show a 'no remotes configured' + the add remotes buttons below.

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

diff --git a/ui/src/dashboard/view.rs b/ui/src/dashboard/view.rs
index 2f379d24..64480310 100644
--- a/ui/src/dashboard/view.rs
+++ b/ui/src/dashboard/view.rs
@@ -15,8 +15,8 @@ use pwt::prelude::*;
 use pwt::props::StorageLocation;
 use pwt::state::{PersistentState, SharedState};
 use pwt::widget::container::span;
+use pwt::widget::{Button, Fa, Panel, Row};
 use pwt::widget::{Column, Container, Progress, error_message, form::FormContext};
-use pwt::widget::{Fa, Panel, Row};
 
 use crate::dashboard::refresh_config_edit::{
     DEFAULT_MAX_AGE_S, DEFAULT_REFRESH_INTERVAL_S, FORCE_RELOAD_MAX_AGE_S, INITIAL_MAX_AGE_S,
@@ -31,8 +31,9 @@ use crate::dashboard::{
     create_task_summary_panel, create_top_entities_panel,
 };
 use crate::remotes::AddWizard;
+use crate::renderer::empty_state;
 use crate::widget::RedrawController;
-use crate::{LoadResult, pdm_client};
+use crate::{LoadResult, RemoteList, pdm_client};
 
 use pdm_api_types::remotes::RemoteType;
 use pdm_api_types::resource::ResourcesStatus;
@@ -100,6 +101,7 @@ pub enum Msg {
     LayoutUpdate(ViewLayout),
     UpdateResult(Result<(), Error>),
     ForceSubscriptionUpdate,
+    RemoteListUpdate(RemoteList),
 }
 
 struct ViewComp {
@@ -115,6 +117,9 @@ struct ViewComp {
     show_create_wizard: Option<RemoteType>,
     subscriptions_dialog: bool,
 
+    remote_list: Option<RemoteList>,
+    _remote_list_handle: Option<ContextHandle<RemoteList>>,
+
     editing_state: SharedState<Vec<EditingMessage>>,
     update_result: LoadResult<(), Error>,
 }
@@ -336,6 +341,7 @@ impl Component for ViewComp {
     type Properties = View;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
+        let link = ctx.link();
         let view = ctx.props().view.clone();
         let refresh_id = match view.as_ref() {
             Some(view) => format!("view-{view}"),
@@ -344,8 +350,18 @@ impl Component for ViewComp {
         let refresh_config: PersistentState<RefreshConfig> =
             PersistentState::new(StorageLocation::local(refresh_config_id(&refresh_id)));
 
+        // only query the remotes if we're the default dashboard to show the warning
+        let (remote_list, _remote_list_handle) = if view.is_none() {
+            let (list, handle) = link
+                .context(link.callback(Msg::RemoteListUpdate))
+                .expect("no remote list context");
+            (Some(list), Some(handle))
+        } else {
+            (None, None)
+        };
+
         let async_pool = AsyncPool::new();
-        async_pool.send_future(ctx.link().clone(), async move {
+        async_pool.send_future(link.clone(), async move {
             Msg::ViewTemplateLoaded(load_template(view).await)
         });
 
@@ -363,6 +379,9 @@ impl Component for ViewComp {
             editing_state: SharedState::new(Vec::new()),
             update_result: LoadResult::new(),
 
+            remote_list,
+            _remote_list_handle,
+
             render_args: WidgetRenderArgs {
                 status: SharedState::new(LoadResult::new()),
                 top_entities: SharedState::new(LoadResult::new()),
@@ -414,7 +433,6 @@ impl Component for ViewComp {
                     self.reload(ctx);
                 }
             }
-
             Msg::ConfigWindow(show) => {
                 self.show_config_window = show;
             }
@@ -474,6 +492,18 @@ impl Component for ViewComp {
                     link.send_message(Msg::LoadingResult(LoadingResult::SubscriptionInfo(res)));
                 });
             }
+            Msg::RemoteListUpdate(remote_list) => {
+                let needs_reload = match &self.remote_list {
+                    Some(list) => list.is_empty() && !remote_list.is_empty(),
+                    _ => false,
+                };
+                self.remote_list = Some(remote_list);
+                if needs_reload {
+                    // reset loading time to trigger a fresh reload
+                    self.load_finished_time = None;
+                    self.reload(ctx);
+                }
+            }
         }
         true
     }
@@ -490,9 +520,51 @@ impl Component for ViewComp {
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let props = ctx.props();
+        let link = ctx.link();
         if !self.template.has_data() {
             return Progress::new().into();
         }
+
+        match self.remote_list.as_ref() {
+            Some(list) if list.is_empty() => {
+                return Column::new()
+                    .class(css::FlexFit)
+                    .class(css::AlignItems::Center)
+                    .class(css::JustifyContent::Center)
+                    .gap(2)
+                    .with_child(Container::new().with_child(empty_state(
+                        "server",
+                        tr!("No remotes configured yet"),
+                        tr!("Add a remote to see data here."),
+                    )))
+                    .with_child(
+                        Row::new()
+                            .gap(2)
+                            .with_child(
+                                Button::new("Add PVE Remote")
+                                    .class(css::ColorScheme::Primary)
+                                    .on_activate(
+                                        link.callback(|_| Msg::CreateWizard(Some(RemoteType::Pve))),
+                                    ),
+                            )
+                            .with_child(
+                                Button::new("Add PBS Remote")
+                                    .class(css::ColorScheme::Primary)
+                                    .on_activate(
+                                        link.callback(|_| Msg::CreateWizard(Some(RemoteType::Pbs))),
+                                    ),
+                            ),
+                    )
+                    .with_optional_child(self.show_create_wizard.map(|remote_type| {
+                        AddWizard::new(remote_type)
+                            .on_close(link.callback(|_| Msg::CreateWizard(None)))
+                            .on_submit(move |ctx| crate::remotes::create_remote(ctx, remote_type))
+                    }))
+                    .into();
+            }
+            _ => {}
+        }
+
         let mut view = Column::new().class(css::FlexFit).with_child(
             Container::new()
                 .padding(4)
-- 
2.47.3

Re: [PATCH datacenter-manager 3/4] ui: factor out the 'empty_state' render helper

[Thomas Lamprecht]

Am 29.05.26 um 08:54 schrieb Dominik Csapak:
> this is a nice looking hint for empty grids/panels that we should reuse
> across the various pages so move it to the renderer module.

nice, thx, wanted also to a run to apply this on more places; it has IMO a
very good ROI on UX vs cost.