[pdm-devel] [PATCH datacenter-manager/yew-comp 0/6] ui: add remote task panel and filtering

[pdm-devel] [PATCH datacenter-manager/yew-comp 0/6] ui: add remote task panel and filtering

[Dominik Csapak]

This series adds a remote filter on the "global" remote task list, and a per
remote task list as well. For this there is a new top level entitity in the pve
tree (Remote).

Note that this series needs a bumped pwt (for the node_ref)/yew-comp and my recent node_ref patch
to work fully.

proxmox-yew-comp:

Dominik Csapak (1):
  tasks: add optional fixed filter

 src/tasks.rs | 12 ++++++++++++
 1 file changed, 12 insertions(+)


proxmox-datacenter-manager:

Dominik Csapak (5):
  ui: adapt to new node_ref semantic for new pwt
  ui: remote: tasks: add remote filter
  ui: remote: tasks: add optional remote property to filter
  ui: pve: tree: use correct key for the root node
  ui: pve: tree: add remote tasks panel

 ui/src/dashboard/top_entities.rs |  8 +++---
 ui/src/pve/mod.rs                |  7 +++--
 ui/src/pve/tree.rs               | 20 +++++++++-----
 ui/src/remotes/mod.rs            |  3 ++-
 ui/src/remotes/tasks.rs          | 45 +++++++++++++++++++++++---------
 ui/src/widget/search_box.rs      | 26 +++++++++---------
 6 files changed, 71 insertions(+), 38 deletions(-)


Summary over all repositories:
  7 files changed, 83 insertions(+), 38 deletions(-)

-- 
Generated by git-murpp 0.8.1


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

[pdm-devel] [PATCH yew-comp 1/1] tasks: add optional fixed filter

[Dominik Csapak]

sometimes it's useful to have a simple fixed filter defined, e.g.
when we want to filter for a specific remote.

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

diff --git a/src/tasks.rs b/src/tasks.rs
index b614dce..6f2a0a0 100644
--- a/src/tasks.rs
+++ b/src/tasks.rs
@@ -47,6 +47,13 @@ pub struct Tasks {
     #[prop_or_default]
     pub extra_filter: Option<(AttrValue, Html)>,
 
+    /// Additional fixed filter that cannot be changed or cleared
+    ///
+    /// this can be useful when filtering for e.g. node/remote/etc.
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    pub fixed_filter: Option<(String, String)>,
+
     /// The base url, default is `/nodes/<nodename>/tasks`.
     #[prop_or_default]
     #[builder(IntoPropValue, into_prop_value)]
@@ -247,6 +254,11 @@ impl LoadableComponent for ProxmoxTasks {
 
         filter["limit"] = BATCH_LIMIT.into();
 
+        // add fixed filter
+        if let Some((key, value)) = props.fixed_filter.clone() {
+            filter[key] = value.into();
+        }
+
         let link = ctx.link().clone();
         Box::pin(async move {
             let mut data: Vec<_> = crate::http_get(&path, Some(filter)).await?;
-- 
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: adapt to new node_ref semantic for new pwt

[Dominik Csapak]

node_ref is not a std property anymore, but only defined for things that
are vtags, so we have to use into_html_with_ref for those things, or
wrap other elements in a container. There we use 'display: contents' to
make sure layouting/style etc. work as before.

In case of the search box, we can remove the noderef completely because
we didn't use it at all.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/dashboard/top_entities.rs |  8 ++++----
 ui/src/widget/search_box.rs      | 26 ++++++++++++++------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ui/src/dashboard/top_entities.rs b/ui/src/dashboard/top_entities.rs
index 4425fd2..c93ee25 100644
--- a/ui/src/dashboard/top_entities.rs
+++ b/ui/src/dashboard/top_entities.rs
@@ -11,7 +11,7 @@ use pwt::{
     css::{AlignItems, Display, FlexFit, JustifyContent},
     dom::align::{align_to, AlignOptions},
     props::{
-        ContainerBuilder, CssLength, CssPaddingBuilder, EventSubscriber, WidgetBuilder,
+        ContainerBuilder, CssLength, CssPaddingBuilder, EventSubscriber, IntoVTag, WidgetBuilder,
         WidgetStyleBuilder,
     },
     tr,
@@ -142,10 +142,10 @@ impl Component for TopEntitiesComp {
                     tooltip = Some(create_tooltip(remote, resource, info, &props.metrics_title));
                     Some(
                         Container::new()
-                            .node_ref(self.tooltip_anchor.clone())
                             .style("position", "absolute")
                             .style("pointer-events", "none")
-                            .style("left", format!("{}px", info.pos)),
+                            .style("left", format!("{}px", info.pos))
+                            .into_html_with_ref(self.tooltip_anchor.clone()),
                     )
                 } else {
                     None
@@ -202,13 +202,13 @@ impl Component for TopEntitiesComp {
             .with_child(list)
             .with_optional_child(tooltip.map(|tooltip| {
                 Container::new()
-                    .node_ref(self.tooltip_ref.clone())
                     .attribute("role", "tooltip")
                     .attribute("aria-live", "polite")
                     .attribute("data-show", "")
                     .class("pwt-tooltip")
                     .class("pwt-tooltip-rich")
                     .with_child(tooltip)
+                    .into_html_with_ref(self.tooltip_ref.clone())
             }))
             .into()
     }
diff --git a/ui/src/widget/search_box.rs b/ui/src/widget/search_box.rs
index 3a52411..15100a6 100644
--- a/ui/src/widget/search_box.rs
+++ b/ui/src/widget/search_box.rs
@@ -45,7 +45,6 @@ pub enum Msg {
 
 pub struct PdmSearchBox {
     search_field_ref: NodeRef,
-    search_box_ref: NodeRef,
     search_term: String,
     focus_tracker: FocusTracker,
     focus: bool,
@@ -72,7 +71,6 @@ impl Component for PdmSearchBox {
         });
         Self {
             search_field_ref: Default::default(),
-            search_box_ref: Default::default(),
             search_term: String::new(),
             focus_tracker: FocusTracker::new(ctx.link().callback(Msg::FocusChange)),
             focus: false,
@@ -115,7 +113,6 @@ impl Component for PdmSearchBox {
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let search_result = ResourceTree::new()
-            .node_ref(self.search_box_ref.clone())
             .search_term(self.search_term.clone())
             .search_only(true)
             .style("position", "absolute")
@@ -147,16 +144,21 @@ impl Component for PdmSearchBox {
             .style("flex-basis", "230px") // to avoid changing size with trigger
             .min_width(230) // placeholder text
             .with_child(
-                Field::new()
-                    .placeholder(tr!("Search (Ctrl+Space / Ctrl+Shift+F)"))
-                    .node_ref(self.search_field_ref.clone())
-                    .value(self.force_value.then_some(self.search_term.clone()))
-                    .with_trigger(
-                        Trigger::new(clear_trigger_icon)
-                            .onclick(ctx.link().callback(|_| Msg::ChangeTerm("".into(), true))),
-                        true,
+                Container::new()
+                    .style("display", "contents")
+                    .with_child(
+                        Field::new()
+                            .placeholder(tr!("Search (Ctrl+Space / Ctrl+Shift+F)"))
+                            .value(self.force_value.then_some(self.search_term.clone()))
+                            .with_trigger(
+                                Trigger::new(clear_trigger_icon).onclick(
+                                    ctx.link().callback(|_| Msg::ChangeTerm("".into(), true)),
+                                ),
+                                true,
+                            )
+                            .on_input(ctx.link().callback(|term| Msg::ChangeTerm(term, false))),
                     )
-                    .on_input(ctx.link().callback(|term| Msg::ChangeTerm(term, false))),
+                    .into_html_with_ref(self.search_field_ref.clone()),
             )
             .with_child(search_result)
             .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 2/5] ui: remote: tasks: add remote filter

[Dominik Csapak]

adds a new RemoteSelector to the filters for the remote task list

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

diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 138b899..9099e89 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -13,7 +13,7 @@ use proxmox_yew_comp::{
 };
 use pwt::{
     css::{FlexFit, JustifyContent},
-    props::{ContainerBuilder, WidgetBuilder},
+    props::{ContainerBuilder, FieldBuilder, WidgetBuilder},
     tr,
     widget::{
         data_table::{DataTableColumn, DataTableHeader},
@@ -21,7 +21,7 @@ use pwt::{
     },
 };
 
-use crate::tasks::format_optional_remote_upid;
+use crate::{tasks::format_optional_remote_upid, widget::RemoteSelector};
 
 #[derive(PartialEq, Properties)]
 pub struct RemoteTaskList;
@@ -133,7 +133,11 @@ impl Component for PbsRemoteTaskList {
                         let link = ctx.link().clone();
                         move |(upid_str, endtime)| link.send_message(Some((upid_str, endtime)))
                     })
-                    .columns(self.columns.clone()),
+                    .columns(self.columns.clone())
+                    .extra_filter(
+                        tr!("Remote"),
+                        RemoteSelector::new().name("remote").placeholder(tr!("All")),
+                    ),
             )
             .with_optional_child(task)
             .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 3/5] ui: remote: tasks: add optional remote property to filter

[Dominik Csapak]

so that we can show tasks from a single remote

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/remotes/tasks.rs | 45 +++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 9099e89..fc7c30a 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -2,8 +2,9 @@ use std::rc::Rc;
 
 use yew::{
     html,
+    html::IntoPropValue,
     virtual_dom::{VComp, VNode},
-    Component, Properties,
+    AttrValue, Component, Properties,
 };
 
 use pdm_api_types::RemoteUpid;
@@ -20,11 +21,19 @@ use pwt::{
         Column, Fa, Row,
     },
 };
+use pwt_macros::builder;
 
 use crate::{tasks::format_optional_remote_upid, widget::RemoteSelector};
 
 #[derive(PartialEq, Properties)]
-pub struct RemoteTaskList;
+#[builder]
+pub struct RemoteTaskList {
+    /// If given, shows only tasks of this remote
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    remote: Option<AttrValue>,
+}
+
 impl RemoteTaskList {
     pub fn new() -> Self {
         yew::props!(Self {})
@@ -109,6 +118,7 @@ impl Component for PbsRemoteTaskList {
     }
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
         let task = self
             .upid
             .as_ref()
@@ -124,21 +134,26 @@ impl Component for PbsRemoteTaskList {
                         move |_| link.send_message(None)
                     })
             });
+
+        let mut task_list = Tasks::new()
+            .base_url("/remote-tasks/list")
+            .on_show_task({
+                let link = ctx.link().clone();
+                move |(upid_str, endtime)| link.send_message(Some((upid_str, endtime)))
+            })
+            .columns(self.columns.clone());
+
+        task_list = match props.remote.clone() {
+            Some(remote) => task_list.fixed_filter(("remote".into(), remote.to_string())),
+            None => task_list.extra_filter(
+                tr!("Remote"),
+                RemoteSelector::new().name("remote").placeholder(tr!("All")),
+            ),
+        };
+
         Column::new()
             .class(FlexFit)
-            .with_child(
-                Tasks::new()
-                    .base_url("/remote-tasks/list")
-                    .on_show_task({
-                        let link = ctx.link().clone();
-                        move |(upid_str, endtime)| link.send_message(Some((upid_str, endtime)))
-                    })
-                    .columns(self.columns.clone())
-                    .extra_filter(
-                        tr!("Remote"),
-                        RemoteSelector::new().name("remote").placeholder(tr!("All")),
-                    ),
-            )
+            .with_child(task_list)
             .with_optional_child(task)
             .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: pve: tree: use correct key for the root node

[Dominik Csapak]

the default/empty path is '_' so use that to select the root node

not really relevant at the moment since the root node is not visible,
but this makes it work when we change that.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/tree.rs | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index f38e0da..c669bab 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -386,11 +386,15 @@ impl LoadableComponent for PveTreeComp {
                 }
             }
             Msg::RouteChanged(path) => {
-                let key = Key::from(format!(
-                    "remote/{}/{}",
-                    ctx.props().remote,
-                    path.replace("+", "/")
-                ));
+                let key = if path == "_" {
+                    Key::from("__root__")
+                } else {
+                    Key::from(format!(
+                        "remote/{}/{}",
+                        ctx.props().remote,
+                        path.replace("+", "/")
+                    ))
+                };
                 self.view_selection.select(key);
             }
             Msg::Filter(text) => {
-- 
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 5/5] ui: pve: tree: add remote tasks panel

[Dominik Csapak]

under the now visible 'Remote' root object. In the future we probably
want to add other things in the top level remote anyway so showing it
now can't hurt.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/mod.rs     | 7 +++++--
 ui/src/pve/tree.rs    | 6 +++++-
 ui/src/remotes/mod.rs | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/src/pve/mod.rs b/ui/src/pve/mod.rs
index 7313d5e..fcbccc4 100644
--- a/ui/src/pve/mod.rs
+++ b/ui/src/pve/mod.rs
@@ -32,7 +32,7 @@ pub mod utils;
 mod tree;
 use tree::PveTreeNode;
 
-use crate::get_deep_url;
+use crate::{get_deep_url, remotes::RemoteTaskList};
 
 #[derive(Debug, Eq, PartialEq, Properties)]
 pub struct PveRemote {
@@ -171,7 +171,10 @@ impl LoadableComponent for PveRemoteComp {
         let remote = &props.remote;
 
         let content: Html = match &self.view {
-            PveTreeNode::Root => html! {},
+            PveTreeNode::Root => Panel::new()
+                .title(tr!("Remote Tasks"))
+                .with_child(RemoteTaskList::new().remote(remote.clone()))
+                .into(),
             PveTreeNode::Node(node) => {
                 node::NodePanel::new(remote.clone(), node.node.clone()).into()
             }
diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index c669bab..d2d920c 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -256,7 +256,7 @@ impl PveTreeComp {
             }
         }
         self.store.write().update_root_tree(tree);
-        self.store.write().set_view_root(false);
+        self.store.write().set_view_root(true);
         self.loaded = true;
     }
 }
@@ -557,6 +557,10 @@ fn columns(
     remote: String,
     loading: bool,
 ) -> Rc<Vec<DataTableHeader<PveTreeNode>>> {
+    let loading = match store.read().root() {
+        Some(root) => loading && root.children_count() == 0,
+        None => loading,
+    };
     Rc::new(vec![
         DataTableColumn::new("Type/ID")
             .flex(1)
diff --git a/ui/src/remotes/mod.rs b/ui/src/remotes/mod.rs
index 88e6c46..83b3331 100644
--- a/ui/src/remotes/mod.rs
+++ b/ui/src/remotes/mod.rs
@@ -22,6 +22,7 @@ mod config;
 pub use config::{create_remote, RemoteConfigPanel};
 
 mod tasks;
+pub use tasks::RemoteTaskList;
 
 use yew::{function_component, Html};
 
@@ -51,7 +52,7 @@ pub fn system_configuration() -> Html {
                 .key("tasks")
                 .label(tr!("Tasks"))
                 .icon_class("fa fa-book"),
-            |_| tasks::RemoteTaskList::new().into(),
+            |_| RemoteTaskList::new().into(),
         );
 
     NavigationContainer::new().with_child(panel).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] applied: [PATCH yew-comp 1/1] tasks: add optional fixed filter

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:49 +0200, Dominik Csapak wrote:
> sometimes it's useful to have a simple fixed filter defined, e.g.
> when we want to filter for a specific remote.
> 
> 

Applied, thanks!

[1/1] tasks: add optional fixed filter
      commit: b232ffd1819f6434f1c09dd018bbefc2746985fa


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

[pdm-devel] applied: [PATCH datacenter-manager 1/5] ui: adapt to new node_ref semantic for new pwt

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:50 +0200, Dominik Csapak wrote:
> node_ref is not a std property anymore, but only defined for things that
> are vtags, so we have to use into_html_with_ref for those things, or
> wrap other elements in a container. There we use 'display: contents' to
> make sure layouting/style etc. work as before.
> 
> In case of the search box, we can remove the noderef completely because
> we didn't use it at all.
> 
> [...]

Applied, thanks!

[1/5] ui: adapt to new node_ref semantic for new pwt
      commit: ab0f9477ae25e0780ba00c32e886134ba2315764


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

[pdm-devel] applied: [PATCH datacenter-manager 2/5] ui: remote: tasks: add remote filter

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:51 +0200, Dominik Csapak wrote:
> adds a new RemoteSelector to the filters for the remote task list
> 
> 

Applied, thanks!

[2/5] ui: remote: tasks: add remote filter
      commit: 44af55d0568792eb51a61551604f95bb624f7803


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

[pdm-devel] applied: [PATCH datacenter-manager 3/5] ui: remote: tasks: add optional remote property to filter

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:52 +0200, Dominik Csapak wrote:
> so that we can show tasks from a single remote
> 
> 

Applied, thanks!

[3/5] ui: remote: tasks: add optional remote property to filter
      commit: 0c661b8c512f6ddfd5dd43bd837395c35e864293


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

[pdm-devel] applied: [PATCH datacenter-manager 4/5] ui: pve: tree: use correct key for the root node

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:53 +0200, Dominik Csapak wrote:
> the default/empty path is '_' so use that to select the root node
> 
> not really relevant at the moment since the root node is not visible,
> but this makes it work when we change that.
> 
> 

Applied, thanks!

[4/5] ui: pve: tree: use correct key for the root node
      commit: fe44d6775e4e7f1506a2633ad1648b85d2077127


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

[pdm-devel] applied: [PATCH datacenter-manager 5/5] ui: pve: tree: add remote tasks panel

[Thomas Lamprecht]

On Wed, 10 Sep 2025 13:52:54 +0200, Dominik Csapak wrote:
> under the now visible 'Remote' root object. In the future we probably
> want to add other things in the top level remote anyway so showing it
> now can't hurt.
> 
> 

Applied, thanks!

We could also add the summary task card that is grouped per task category from
the dashboard at the top, just as an idea.

[5/5] ui: pve: tree: add remote tasks panel
      commit: 6302b61af7a06a6c10afec305e7e87622220b3df


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