[pdm-devel] [PATCH datacenter-manager 0/5] some ui polishing changes

[pdm-devel] [PATCH datacenter-manager 0/5] some ui polishing changes

[Dominik Csapak]

These 5 changes are just small polishing things, from layouting, to
showing loading indcators, etc.

They're all independent of each other, so feel free to pick & choose
what looks right and appropriate.

Dominik Csapak (5):
  ui: pve: remove overview: allow line-breaks for long lines
  ui: remote updates: show progress on 'refresh all'
  ui: configuration: subscription: improve behavior on 'check'
  ui: views: add message on empty layouts
  ui: main menu: use different icon for pbs remotes

 ui/src/configuration/subscription_panel.rs | 42 ++++++++--------
 ui/src/dashboard/view/row_view.rs          | 13 +++++
 ui/src/main_menu.rs                        |  5 +-
 ui/src/pve/remote_overview.rs              | 58 +++++++++++++---------
 ui/src/remotes/updates.rs                  | 35 ++++++++++---
 5 files changed, 102 insertions(+), 51 deletions(-)

-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 1/5] ui: pve: remove overview: allow line-breaks for long lines

[Dominik Csapak]

the last two status rows contain longer text than the rest, so it can
easily happen that those get too long for the widget and overflow.

To allow for the text to wrap (without modifying the StatusRow component
itself), wrap the text in a div that allows wrapping and has the right
alignment set.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/remote_overview.rs | 58 +++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/ui/src/pve/remote_overview.rs b/ui/src/pve/remote_overview.rs
index 2c26e7ed..e4521314 100644
--- a/ui/src/pve/remote_overview.rs
+++ b/ui/src/pve/remote_overview.rs
@@ -1,14 +1,14 @@
 use std::rc::Rc;
 
-use proxmox_yew_comp::Status;
+use proxmox_yew_comp::{Status, StatusRow};
 use yew::Properties;
 
 use proxmox_human_byte::HumanByte;
 use pwt::{
-    css::{AlignItems, FontStyle},
+    css::{AlignItems, FontStyle, TextAlign, WhiteSpace},
     prelude::*,
     props::WidgetBuilder,
-    widget::{error_message, Column, Fa, Panel, Row},
+    widget::{error_message, Column, Container, Fa, Panel, Row},
 };
 use pwt_macros::widget;
 
@@ -253,26 +253,38 @@ impl yew::Component for RemotePanelComp {
                         .with_child(Fa::new("pie-chart"))
                         .with_child(tr!("Allocation")),
                 )
-                .with_child(status_row_right_icon(
-                    tr! {"CPU Cores assigned"},
-                    "fa-cpu",
-                    tr!(
-                        "{0} running / {1} physical ({2} total configured)",
-                        status.guest_cores_running,
-                        status.max_cores,
-                        status.guest_cores,
-                    ),
-                ))
-                .with_child(status_row_right_icon(
-                    tr! {"Memory assigned"},
-                    "fa-memory",
-                    tr!(
-                        "{0} running / {1} physical ({2} total configured)",
-                        HumanByte::from(status.guest_memory_running),
-                        HumanByte::from(status.max_memory),
-                        HumanByte::from(status.guest_memory),
-                    ),
-                )),
+                .with_child(
+                    StatusRow::new(tr! {"CPU Cores assigned"})
+                        .icon_right(true)
+                        .icon_class("fa fa-cpu")
+                        .status(
+                            Container::new()
+                                .with_child(tr!(
+                                    "{0} running / {1} physical ({2} total configured)",
+                                    status.guest_cores_running,
+                                    status.max_cores,
+                                    status.guest_cores,
+                                ))
+                                .class(WhiteSpace::Normal)
+                                .class(TextAlign::Right),
+                        ),
+                )
+                .with_child(
+                    StatusRow::new(tr! {"Memory assigned"})
+                        .icon_right(true)
+                        .icon_class("fa fa-memory")
+                        .status(
+                            Container::new()
+                                .with_child(tr!(
+                                    "{0} running / {1} physical ({2} total configured)",
+                                    HumanByte::from(status.guest_memory_running),
+                                    HumanByte::from(status.max_memory),
+                                    HumanByte::from(status.guest_memory),
+                                ))
+                                .class(WhiteSpace::Normal)
+                                .class(TextAlign::Right),
+                        ),
+                ),
         };
 
         Panel::new()
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 2/5] ui: remote updates: show progress on 'refresh all'

[Dominik Csapak]

The subscription check can take a bit, so show a loading bar and disable
the refresh button while that is loading.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/remotes/updates.rs | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/ui/src/remotes/updates.rs b/ui/src/remotes/updates.rs
index 12eaec87..418aad98 100644
--- a/ui/src/remotes/updates.rs
+++ b/ui/src/remotes/updates.rs
@@ -22,7 +22,7 @@ use proxmox_yew_comp::{
     LoadableComponentContext, LoadableComponentMaster,
 };
 use pwt::props::{CssBorderBuilder, CssPaddingBuilder, WidgetStyleBuilder};
-use pwt::widget::{Button, Container, Panel, Tooltip};
+use pwt::widget::{Button, Container, Panel, Progress, Tooltip};
 use pwt::{
     css,
     css::FontColor,
@@ -123,6 +123,7 @@ enum RemoteUpdateTreeMsg {
     LoadFinished(UpdateSummary),
     KeySelected(Option<Key>),
     RefreshAll,
+    RefreshFinished,
     CheckSubscription,
 }
 
@@ -130,6 +131,7 @@ struct UpdateTreeComponent {
     store: TreeStore<UpdateTreeEntry>,
     selection: Selection,
     selected_entry: Option<UpdateTreeEntry>,
+    refreshing: bool,
 }
 
 fn default_sorter(a: &UpdateTreeEntry, b: &UpdateTreeEntry) -> Ordering {
@@ -333,6 +335,7 @@ impl LoadableComponent for UpdateTreeComponent {
             store: store.clone(),
             selection,
             selected_entry: None,
+            refreshing: false,
         }
     }
 
@@ -378,6 +381,10 @@ impl LoadableComponent for UpdateTreeComponent {
 
                 return true;
             }
+            Self::Message::RefreshFinished => {
+                self.refreshing = false;
+                return true;
+            }
             Self::Message::KeySelected(key) => {
                 if let Some(key) = key {
                     let read_guard = self.store.read();
@@ -392,6 +399,7 @@ impl LoadableComponent for UpdateTreeComponent {
             Self::Message::CheckSubscription => {
                 let link = ctx.link();
 
+                self.refreshing = true;
                 link.clone().spawn(async move {
                     // Use the PDM subscription check for the global refresh all.
                     let is_active = check_pdm_subscription().await;
@@ -400,6 +408,7 @@ impl LoadableComponent for UpdateTreeComponent {
                     } else {
                         link.send_message(RemoteUpdateTreeMsg::RefreshAll);
                     }
+                    link.send_message(RemoteUpdateTreeMsg::RefreshFinished);
                 });
             }
             Self::Message::RefreshAll => {
@@ -443,12 +452,14 @@ impl UpdateTreeComponent {
             .show_header(true)
             .class(css::FlexFit);
 
-        let refresh_all_button = Button::new(tr!("Refresh all")).on_activate({
-            let link = ctx.link().clone();
-            move |_| {
-                link.send_message(RemoteUpdateTreeMsg::CheckSubscription);
-            }
-        });
+        let refresh_all_button = Button::new(tr!("Refresh all"))
+            .disabled(self.refreshing)
+            .on_activate({
+                let link = ctx.link().clone();
+                move |_| {
+                    link.send_message(RemoteUpdateTreeMsg::CheckSubscription);
+                }
+            });
 
         let title: Html = Row::new()
             .gap(2)
@@ -466,6 +477,16 @@ impl UpdateTreeComponent {
             .style("flex", "1 1 0")
             .class(FlexFit)
             .border(true)
+            .with_optional_child(
+                self.refreshing.then_some(
+                    Container::new().style("position", "relative").with_child(
+                        Progress::new()
+                            .style("position", "absolute")
+                            .style("left", "0")
+                            .style("right", "0"),
+                    ),
+                ),
+            )
             .with_child(table)
     }
 
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 3/5] ui: configuration: subscription: improve behavior on 'check'

[Dominik Csapak]

Since the subscription check/load can take a bit, disable the 'check'
button during a check operation and let the refresh button indicate a
load.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/configuration/subscription_panel.rs | 42 +++++++++++-----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/configuration/subscription_panel.rs b/ui/src/configuration/subscription_panel.rs
index 8f3a4b9d..b2d50957 100644
--- a/ui/src/configuration/subscription_panel.rs
+++ b/ui/src/configuration/subscription_panel.rs
@@ -26,6 +26,7 @@ impl SubscriptionPanel {
 }
 
 pub enum Msg {
+    Checking,
     LoadFinished(Value),
 }
 
@@ -33,6 +34,7 @@ pub struct ProxmoxSubscriptionPanel {
     rows: Rc<Vec<KVGridRow>>,
     data: Option<Rc<Value>>,
     loaded: bool,
+    checking: bool,
 }
 
 impl LoadableComponent for ProxmoxSubscriptionPanel {
@@ -45,14 +47,29 @@ impl LoadableComponent for ProxmoxSubscriptionPanel {
             rows: Rc::new(rows()),
             data: None,
             loaded: false,
+            checking: false,
         }
     }
 
-    fn update(&mut self, _ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
+    fn update(&mut self, ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::LoadFinished(value) => {
                 self.data = Some(Rc::new(value));
                 self.loaded = true;
+                self.checking = false;
+            }
+            Msg::Checking => {
+                self.checking = true;
+                let link = ctx.link();
+                link.spawn({
+                    let link = link.clone();
+                    async move {
+                        match http_post(SUBSCRIPTION_URL, None).await {
+                            Ok(()) => link.send_reload(),
+                            Err(err) => link.show_error(tr!("Error"), err.to_string(), true),
+                        }
+                    }
+                });
             }
         }
         true
@@ -71,36 +88,21 @@ impl LoadableComponent for ProxmoxSubscriptionPanel {
     }
 
     fn toolbar(&self, ctx: &LoadableComponentContext<Self>) -> Option<Html> {
+        let link = ctx.link();
         let toolbar = Toolbar::new()
             .class("pwt-overflow-hidden")
             .border_bottom(true)
             .with_child(
                 Button::new(tr!("Check"))
+                    .disabled(self.checking)
                     .icon_class("fa fa-check-square-o")
-                    .on_activate({
-                        let link = ctx.link();
-
-                        move |_| {
-                            link.spawn({
-                                let link = link.clone();
-                                async move {
-                                    match http_post(SUBSCRIPTION_URL, None).await {
-                                        Ok(()) => link.send_reload(),
-                                        Err(err) => {
-                                            link.show_error(tr!("Error"), err.to_string(), true)
-                                        }
-                                    }
-                                }
-                            })
-                        }
-                    }),
+                    .on_activate(link.callback(|_| Msg::Checking)),
             )
             .with_spacer()
             .with_flex_spacer()
             .with_child({
                 let loading = ctx.loading();
-                let link = ctx.link();
-                Button::refresh(loading).on_activate(move |_| link.send_reload())
+                Button::refresh(loading || self.checking).on_activate(move |_| link.send_reload())
             });
 
         Some(toolbar.into())
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [PATCH datacenter-manager 4/5] ui: views: add message on empty layouts

[Dominik Csapak]

so users know better what to do.

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

diff --git a/ui/src/dashboard/view/row_view.rs b/ui/src/dashboard/view/row_view.rs
index e0b295c1..0571398c 100644
--- a/ui/src/dashboard/view/row_view.rs
+++ b/ui/src/dashboard/view/row_view.rs
@@ -336,6 +336,19 @@ impl Component for RowViewComp {
             .class("pwt-content-spacer-colors")
             .class(css::FlexDirection::Row)
             .class(css::FlexWrap::Wrap);
+
+        if layout.is_empty() && !self.edit_mode {
+            let icon = "<i class=\"fa fa-pencil\"></i>";
+            let message = tr!("Layout is empty, you can add widgets in edit mode. You can enable editing with the '{0}' icon.", icon);
+            let message = Html::from_html_unchecked(message.into());
+            row.add_child(
+                Container::new()
+                    .flex(1.0)
+                    .padding(4)
+                    .class(css::TextAlign::Center)
+                    .with_child(message),
+            );
+        }
         for (row_idx, items) in layout.iter().enumerate() {
             let flex_sum: f32 = items
                 .iter()
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] [RFC PATCH datacenter-manager 5/5] ui: main menu: use different icon for pbs remotes

[Dominik Csapak]

In most of the UI, we use 'server' for remotes, 'building' for PVE nodes
and 'building-o' for PBS nodes.

In the main menu we don't have the information if a remote is a single
node or not for PVE, but we know if it's PBS. So show the 'building-o'
for PBS remotes.

This makes it possible to see which kind of remote it is before
clicking, and wihtout inventing a custom naming scheme.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
We can of course choose different icons here if wanted, e.g. 'floppy-o'
for pbs remotes?

Maybe the best option would be to create some custom product icons that
we could use here and maybe for the favicon, etc. ?

 ui/src/main_menu.rs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
index 18988eaf..8d44d8f1 100644
--- a/ui/src/main_menu.rs
+++ b/ui/src/main_menu.rs
@@ -347,7 +347,10 @@ impl Component for PdmMainMenu {
                 &mut content,
                 &remote.id,
                 &format!("remote-{}", remote.id),
-                Some("fa fa-server"),
+                match remote.ty {
+                    RemoteType::Pve => Some("fa fa-fw fa-server"),
+                    RemoteType::Pbs => Some("fa fa-fw fa-building-o"),
+                },
                 {
                     let remote = remote.clone();
                     move |_| match remote.ty {
-- 
2.47.3



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [PATCH datacenter-manager 4/5] ui: views: add message on empty layouts

[Lukas Wagner]

On Thu Dec 4, 2025 at 3:20 PM CET, Dominik Csapak wrote:
> so users know better what to do.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  ui/src/dashboard/view/row_view.rs | 13 +++++++++++++
>  1 file changed, 13 insertions(+)
>
> diff --git a/ui/src/dashboard/view/row_view.rs b/ui/src/dashboard/view/row_view.rs
> index e0b295c1..0571398c 100644
> --- a/ui/src/dashboard/view/row_view.rs
> +++ b/ui/src/dashboard/view/row_view.rs
> @@ -336,6 +336,19 @@ impl Component for RowViewComp {
>              .class("pwt-content-spacer-colors")
>              .class(css::FlexDirection::Row)
>              .class(css::FlexWrap::Wrap);
> +
> +        if layout.is_empty() && !self.edit_mode {
> +            let icon = "<i class=\"fa fa-pencil\"></i>";
> +            let message = tr!("Layout is empty, you can add widgets in edit mode. You can enable editing with the '{0}' icon.", icon);
> +            let message = Html::from_html_unchecked(message.into());
> +            row.add_child(
> +                Container::new()
> +                    .flex(1.0)
> +                    .padding(4)
> +                    .class(css::TextAlign::Center)
> +                    .with_child(message),
> +            );
> +        }
>          for (row_idx, items) in layout.iter().enumerate() {
>              let flex_sum: f32 = items
>                  .iter()


I wonder, should we also show this message if the layout only contains
*empty* rows? I accidentally had it in a state like this and was
confused why I didn't see the message, since in non-edit mode they look
the same. What do you think?

Also, how about:

"Layout is empty. Click the '{0} icon to to add widgets."

I think this would be a bit more straight-to-the-point - but no hard
feelings.


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [RFC PATCH datacenter-manager 5/5] ui: main menu: use different icon for pbs remotes

[Lukas Wagner]

On Thu Dec 4, 2025 at 3:20 PM CET, Dominik Csapak wrote:
> In most of the UI, we use 'server' for remotes, 'building' for PVE nodes
> and 'building-o' for PBS nodes.
>
> In the main menu we don't have the information if a remote is a single
> node or not for PVE, but we know if it's PBS. So show the 'building-o'
> for PBS remotes.
>
> This makes it possible to see which kind of remote it is before
> clicking, and wihtout inventing a custom naming scheme.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> We can of course choose different icons here if wanted, e.g. 'floppy-o'
> for pbs remotes?
>
> Maybe the best option would be to create some custom product icons that
> we could use here and maybe for the favicon, etc. ?

Yeah, I think having product-specific icons would be great in the
long-term, in fact I only recently talked to Thomas about the very same
topic.

In the meanwhile, I think using this different icon you used in this
patch is a good stop-gap that should help UX a bit.

Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [PATCH datacenter-manager 0/5] some ui polishing changes

[Lukas Wagner]

On Thu Dec 4, 2025 at 3:20 PM CET, Dominik Csapak wrote:
> These 5 changes are just small polishing things, from layouting, to
> showing loading indcators, etc.
>
> They're all independent of each other, so feel free to pick & choose
> what looks right and appropriate.
>
> Dominik Csapak (5):
>   ui: pve: remove overview: allow line-breaks for long lines
>   ui: remote updates: show progress on 'refresh all'
>   ui: configuration: subscription: improve behavior on 'check'
>   ui: views: add message on empty layouts
>   ui: main menu: use different icon for pbs remotes
>
>  ui/src/configuration/subscription_panel.rs | 42 ++++++++--------
>  ui/src/dashboard/view/row_view.rs          | 13 +++++
>  ui/src/main_menu.rs                        |  5 +-
>  ui/src/pve/remote_overview.rs              | 58 +++++++++++++---------
>  ui/src/remotes/updates.rs                  | 35 ++++++++++---
>  5 files changed, 102 insertions(+), 51 deletions(-)


These make sense to me and work as expected. See the two last patches
for some additional notes, otherwise:

Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>
Tested-by: Lukas Wagner <l.wagner@proxmox.com>


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [RFC PATCH datacenter-manager 5/5] ui: main menu: use different icon for pbs remotes

[Thomas Lamprecht]

Am 04.12.25 um 15:24 schrieb Dominik Csapak:
> In most of the UI, we use 'server' for remotes, 'building' for PVE nodes
> and 'building-o' for PBS nodes.
> 
> In the main menu we don't have the information if a remote is a single
> node or not for PVE, but we know if it's PBS. So show the 'building-o'
> for PBS remotes.
> 
> This makes it possible to see which kind of remote it is before
> clicking, and wihtout inventing a custom naming scheme.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> We can of course choose different icons here if wanted, e.g. 'floppy-o'
> for pbs remotes?

We should stay consistent though, so this would have to change everywhere,
and I'm not so sure if just a floppy-o it's own is great UX.

And (lacking) consistency is actually my main gripe with this patch, as we
use "fa-server" for remotes in general, but now we do use a remote-type
specific icon for PBS but the generic one for PVE.

Maybe we should choose another way to differentiate this than the icon,
at least until we really got (marketing blessed) product icons (don't hold
your breadth for that). One not-so-thought-out idea might be to show the
tree letter abbreviation aligned to the right of the icon+label menu entry
and styled such that it's rather subtle, like a shallow engraving.
One would need to try to see if it looks OK, but that would at least be much
more obvious than just some different (still relatively generic) icons.

> 
> Maybe the best option would be to create some custom product icons that
> we could use here and maybe for the favicon, etc. ?
> 
>  ui/src/main_menu.rs | 5 ++++-
>  1 file changed, 4 insertions(+), 1 deletion(-)
> 
> diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
> index 18988eaf..8d44d8f1 100644
> --- a/ui/src/main_menu.rs
> +++ b/ui/src/main_menu.rs
> @@ -347,7 +347,10 @@ impl Component for PdmMainMenu {
>                  &mut content,
>                  &remote.id,
>                  &format!("remote-{}", remote.id),
> -                Some("fa fa-server"),
> +                match remote.ty {
> +                    RemoteType::Pve => Some("fa fa-fw fa-server"),
> +                    RemoteType::Pbs => Some("fa fa-fw fa-building-o"),
> +                },
>                  {
>                      let remote = remote.clone();
>                      move |_| match remote.ty {



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

[pdm-devel] partially-applied: [PATCH datacenter-manager 0/5] some ui polishing changes

[Thomas Lamprecht]

On Thu, 04 Dec 2025 15:20:24 +0100, Dominik Csapak wrote:
> These 5 changes are just small polishing things, from layouting, to
> showing loading indcators, etc.
> 
> They're all independent of each other, so feel free to pick & choose
> what looks right and appropriate.
> 
> Dominik Csapak (5):
>   ui: pve: remove overview: allow line-breaks for long lines
>   ui: remote updates: show progress on 'refresh all'
>   ui: configuration: subscription: improve behavior on 'check'
>   ui: views: add message on empty layouts
>   ui: main menu: use different icon for pbs remotes
> 
> [...]

Applied, thanks!

[1/5] ui: pve: remove overview: allow line-breaks for long lines
      commit: 8e874d629796992b2004b5c88c5a93c31e6949af
[2/5] ui: remote updates: show progress on 'refresh all'
      commit: 1427ca9b719e688fbb3415c548994a071e494ea3
[3/5] ui: configuration: subscription: improve behavior on 'check'
      commit: d2f7b1a24770d0a361e14f9abe78fc08bebb45ce
[4/5] ui: views: add message on empty layouts
      commit: 810951bc973f49c2db475db32c074b4634f47831
[5/5] ui: main menu: use different icon for pbs remotes
      SKIPPED for now (see reply to patch).


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel

Re: [pdm-devel] [RFC PATCH datacenter-manager 5/5] ui: main menu: use different icon for pbs remotes

[Dominik Csapak]

On 12/4/25 9:00 PM, Thomas Lamprecht wrote:
> Am 04.12.25 um 15:24 schrieb Dominik Csapak:
>> In most of the UI, we use 'server' for remotes, 'building' for PVE nodes
>> and 'building-o' for PBS nodes.
>>
>> In the main menu we don't have the information if a remote is a single
>> node or not for PVE, but we know if it's PBS. So show the 'building-o'
>> for PBS remotes.
>>
>> This makes it possible to see which kind of remote it is before
>> clicking, and wihtout inventing a custom naming scheme.
>>
>> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
>> ---
>> We can of course choose different icons here if wanted, e.g. 'floppy-o'
>> for pbs remotes?
> 
> We should stay consistent though, so this would have to change everywhere,
> and I'm not so sure if just a floppy-o it's own is great UX.
> 
> And (lacking) consistency is actually my main gripe with this patch, as we
> use "fa-server" for remotes in general, but now we do use a remote-type
> specific icon for PBS but the generic one for PVE.
> 
> Maybe we should choose another way to differentiate this than the icon,
> at least until we really got (marketing blessed) product icons (don't hold
> your breadth for that). One not-so-thought-out idea might be to show the
> tree letter abbreviation aligned to the right of the icon+label menu entry
> and styled such that it's rather subtle, like a shallow engraving.
> One would need to try to see if it looks OK, but that would at least be much
> more obvious than just some different (still relatively generic) icons.
> 

yeah makes sense, the lack of consistency is why i sent it as RFC.
Thanks for your feedback! I'll play around with the abbreviation and 
items, if I find something that fits, I'll send a new patch.

>>
>> Maybe the best option would be to create some custom product icons that
>> we could use here and maybe for the favicon, etc. ?
>>
>>   ui/src/main_menu.rs | 5 ++++-
>>   1 file changed, 4 insertions(+), 1 deletion(-)
>>
>> diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
>> index 18988eaf..8d44d8f1 100644
>> --- a/ui/src/main_menu.rs
>> +++ b/ui/src/main_menu.rs
>> @@ -347,7 +347,10 @@ impl Component for PdmMainMenu {
>>                   &mut content,
>>                   &remote.id,
>>                   &format!("remote-{}", remote.id),
>> -                Some("fa fa-server"),
>> +                match remote.ty {
>> +                    RemoteType::Pve => Some("fa fa-fw fa-server"),
>> +                    RemoteType::Pbs => Some("fa fa-fw fa-building-o"),
>> +                },
>>                   {
>>                       let remote = remote.clone();
>>                       move |_| match remote.ty {
> 



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel