all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [PATCH datacenter-manager 3/3] ui: make the default dashboard page configurable
Date: Thu, 20 Aug 2026 10:17:39 +0200	[thread overview]
Message-ID: <20260820081746.989972-4-d.csapak@proxmox.com> (raw)
In-Reply-To: <20260820081746.989972-1-d.csapak@proxmox.com>

by allowing to set the user any view as their dashboard, saved in their
local browser storage.

It adds the selection combobox on the 'views' configuration page in the
toolbar.

Most of the code is just extending the ViewSelector so it can work in
other situations than the 'add view' dialog:
* add on_change property
* add dashboard_name property to show different text in different
  contexts
* passing through the 'default' property from the combobos

It also refactors the '__dashboard__' string this does not have to be
hardcoded in different places.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/configuration/views.rs  | 38 ++++++++++++++++++++++++++++++----
 ui/src/main_menu.rs            | 20 ++++++++++++++++--
 ui/src/widget/mod.rs           |  2 +-
 ui/src/widget/view_selector.rs | 31 ++++++++++++++++++++++-----
 4 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/ui/src/configuration/views.rs b/ui/src/configuration/views.rs
index 8016b6d7..24b838c6 100644
--- a/ui/src/configuration/views.rs
+++ b/ui/src/configuration/views.rs
@@ -16,15 +16,16 @@ use proxmox_yew_comp::{
 };
 
 use pwt::prelude::*;
-use pwt::state::{Selection, Store};
+use pwt::props::StorageLocation;
+use pwt::state::{PersistentState, Selection, Store};
 use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
 use pwt::widget::form::{Checkbox, DisplayField, Field, FormContext};
-use pwt::widget::{Button, ConfirmDialog, InputPanel, Toolbar};
+use pwt::widget::{Button, ConfirmDialog, FieldLabel, InputPanel, Toolbar};
 
 use pdm_api_types::views::{ViewConfig, ViewLayout, ViewTemplate};
 
 use crate::ViewListContext;
-use crate::widget::{ViewFilterSelector, ViewSelector};
+use crate::widget::{DASHBOARD_VALUE, ViewFilterSelector, ViewSelector};
 
 async fn create_view(
     base_url: AttrValue,
@@ -38,7 +39,7 @@ async fn create_view(
             description: String::new(),
             layout: ViewLayout::Rows { rows: Vec::new() },
         })?),
-        "__dashboard__" => None,
+        crate::widget::DASHBOARD_VALUE => None,
         layout => {
             let store = store.read();
             if let Some(config) = store.lookup_record(&Key::from(layout)) {
@@ -95,6 +96,7 @@ pub enum Msg {
     LoadFinished(Vec<ViewConfig>),
     Remove(Key),
     Reload,
+    UpdateDefaultDashboard(String),
 }
 
 #[derive(PartialEq)]
@@ -110,6 +112,7 @@ pub struct ViewGridComp {
     store: Store<ViewConfig>,
     columns: Rc<Vec<DataTableHeader<ViewConfig>>>,
     selection: Selection,
+    default_dashboard: PersistentState<Option<String>>,
 }
 
 pwt::impl_deref_mut_property!(ViewGridComp, state, LoadableComponentState<ViewState>);
@@ -213,6 +216,9 @@ impl LoadableComponent for ViewGridComp {
             store: Store::with_extract_key(|config: &ViewConfig| config.id.as_str().into()),
             columns: Self::columns(),
             selection,
+            default_dashboard: PersistentState::<Option<String>>::new(StorageLocation::local(
+                "default-dashboard",
+            )),
         }
     }
 
@@ -253,6 +259,14 @@ impl LoadableComponent for ViewGridComp {
                     context.update_views();
                 }
             }
+            Msg::UpdateDefaultDashboard(new_default) => {
+                if &new_default == DASHBOARD_VALUE {
+                    self.default_dashboard.update(None);
+                } else {
+                    self.default_dashboard.update(Some(new_default));
+                }
+                return false;
+            }
         }
         true
     }
@@ -260,6 +274,11 @@ impl LoadableComponent for ViewGridComp {
     fn toolbar(&self, ctx: &proxmox_yew_comp::LoadableComponentContext<Self>) -> Option<Html> {
         let selection = self.selection.selected_key();
         let link = ctx.link();
+        let default_dashboard = AttrValue::from(
+            self.default_dashboard
+                .clone()
+                .unwrap_or(DASHBOARD_VALUE.to_string()),
+        );
         Some(
             Toolbar::new()
                 .border_bottom(true)
@@ -277,6 +296,17 @@ impl LoadableComponent for ViewGridComp {
                         .disabled(selection.is_none())
                         .on_activate(link.change_view_callback(move |_| Some(ViewState::Remove))),
                 )
+                .with_spacer()
+                .with_child(FieldLabel::new(tr!("Dashboard")))
+                .with_child(
+                    ViewSelector::new(self.store.clone())
+                        .min_width(150)
+                        .required(true)
+                        .default(default_dashboard)
+                        .dashboard_name(tr!("Default"))
+                        .on_change(link.callback(Msg::UpdateDefaultDashboard)),
+                )
+                .with_flex_spacer()
                 .into(),
         )
     }
diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
index 1fddfa6a..e5253ef4 100644
--- a/ui/src/main_menu.rs
+++ b/ui/src/main_menu.rs
@@ -1,11 +1,12 @@
 use std::rc::Rc;
 
 use html::IntoPropValue;
+use pwt::props::StorageLocation;
 use yew::virtual_dom::{Key, VComp, VNode};
 
 use pwt::css::{self, Display, FlexFit};
 use pwt::prelude::*;
-use pwt::state::{NavigationContextExt, Selection};
+use pwt::state::{NavigationContextExt, PersistentState, Selection};
 use pwt::widget::nav::{Menu, MenuItem, NavigationDrawer};
 use pwt::widget::{Container, Panel, Row, SelectionView, SelectionViewRenderInfo};
 
@@ -74,6 +75,7 @@ impl MainMenu {
 pub enum Msg {
     Select(Key),
     UpdateAcl(AclContext),
+    UpdateDefaultDashboard,
 }
 
 pub struct PdmMainMenu {
@@ -81,6 +83,7 @@ pub struct PdmMainMenu {
     menu_selection: Selection,
     acl_context: AclContext,
     _acl_context_listener: ContextHandle<AclContext>,
+    default_dashboard: PersistentState<Option<String>>,
 }
 
 fn register_view(
@@ -111,6 +114,7 @@ fn register_submenu(
     view.add_builder(id, renderer);
     menu.add_item(
         MenuItem::new(text.into())
+            .default_collapsed(id == "views")
             .key(id.to_string())
             .icon_class(icon_class)
             .submenu(submenu),
@@ -129,11 +133,17 @@ impl Component for PdmMainMenu {
             .context(ctx.link().callback(Msg::UpdateAcl))
             .expect("acl context not present");
 
+        let default_dashboard = PersistentState::<Option<String>>::new(StorageLocation::Local(
+            "default-dashboard".into(),
+        ))
+        .on_update(ctx.link().callback(|_| Msg::UpdateDefaultDashboard));
+
         Self {
             active: Key::from("dashboard"),
             menu_selection: Selection::new(),
             acl_context,
             _acl_context_listener: acl_context_listener,
+            default_dashboard,
         }
     }
 
@@ -147,6 +157,10 @@ impl Component for PdmMainMenu {
                 self.acl_context = acl_context;
                 true
             }
+            Msg::UpdateDefaultDashboard => {
+                self.default_dashboard.load();
+                true
+            }
         }
     }
 
@@ -168,13 +182,15 @@ impl Component for PdmMainMenu {
 
         let mut menu = Menu::new();
 
+        let default_dashboard = self.default_dashboard.clone().map(|s| s.into());
+
         register_view(
             &mut menu,
             &mut content,
             tr!("Dashboard"),
             "dashboard",
             Some("fa fa-tachometer"),
-            move |_| View::new(None).into(),
+            move |_| View::new(default_dashboard.clone()).into(),
         );
 
         let mut views = Menu::new();
diff --git a/ui/src/widget/mod.rs b/ui/src/widget/mod.rs
index 07c47e36..1eaf0ffd 100644
--- a/ui/src/widget/mod.rs
+++ b/ui/src/widget/mod.rs
@@ -31,7 +31,7 @@ pub use remote_selector::RemoteSelector;
 mod remote_endpoint_selector;
 
 mod view_selector;
-pub use view_selector::ViewSelector;
+pub use view_selector::{DASHBOARD_VALUE, ViewSelector};
 
 mod view_filter_selector;
 pub use view_filter_selector::ViewFilterSelector;
diff --git a/ui/src/widget/view_selector.rs b/ui/src/widget/view_selector.rs
index b48ef4f7..8bc15b0a 100644
--- a/ui/src/widget/view_selector.rs
+++ b/ui/src/widget/view_selector.rs
@@ -6,12 +6,29 @@ use pwt::widget::form::Combobox;
 use pwt_macros::{builder, widget};
 
 use pdm_api_types::views::ViewConfig;
+use yew::html::{IntoEventCallback, IntoPropValue};
+
+pub const DASHBOARD_VALUE: &str = "__dashboard__";
 
 #[widget(comp=ViewSelectorComp, @input)]
 #[derive(Clone, Properties, PartialEq)]
 #[builder]
 pub struct ViewSelector {
     store: Store<ViewConfig>,
+
+    /// Change callback
+    #[builder_cb(IntoEventCallback, into_event_callback, String)]
+    #[prop_or_default]
+    pub on_change: Option<Callback<String>>,
+
+    /// The default value
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub default: Option<AttrValue>,
+
+    #[builder]
+    #[prop_or(tr!("Dashboard"))]
+    pub dashboard_name: String,
 }
 
 impl ViewSelector {
@@ -32,19 +49,23 @@ impl Component for ViewSelectorComp {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let mut list = vec!["__dashboard__".into()];
+        let props = ctx.props();
+        let mut list = vec![DASHBOARD_VALUE.into()];
         let store = &ctx.props().store;
         for item in store.read().data().iter() {
             list.push(item.id.clone().into());
         }
         Combobox::new()
-            .items(Rc::new(list))
+            .with_std_props(&ctx.props().std_props)
             .with_input_props(&ctx.props().input_props)
-            .on_change(|_| {})
+            .items(Rc::new(list))
+            .on_change(props.on_change.clone())
+            .default(props.default.clone())
             .render_value({
+                let name = props.dashboard_name.clone();
                 move |value: &AttrValue| {
-                    if value == "__dashboard__" {
-                        html! {{tr!("Dashboard")}}
+                    if value == DASHBOARD_VALUE {
+                        html! {{&name}}
                     } else {
                         html! {{value}}
                     }
-- 
2.47.3





      parent reply	other threads:[~2026-08-20  8:18 UTC|newest]

Thread overview: 4+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-08-20  8:17 [PATCH datacenter-manager/yew-widget-toolkit 0/3] ui: make the default dashboard configurable Dominik Csapak
2026-08-20  8:17 ` [PATCH yew-widget-toolkit 1/3] state: event: add helpers for custom DOM events Dominik Csapak
2026-08-20  8:17 ` [PATCH yew-widget-toolkit 2/3] state: persistent state: allow listening for updates Dominik Csapak
2026-08-20  8:17 ` Dominik Csapak [this message]

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260820081746.989972-4-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=pdm-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal