[pdm-devel] [PATCH datacenter-manager v5 26/26] ui: resource tree/view: reload tree in a view on refresh

[Dominik Csapak <d.csapak@proxmox.com>]

by using a simple usize counter that acts as a `RedrawController`.
By using this controller as a property, and updating that property on
every view, we can trigger a reload from outside the component.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/dashboard/resource_tree.rs | 13 +++++++---
 ui/src/dashboard/view.rs          |  7 +++++-
 ui/src/widget/mod.rs              |  2 +-
 ui/src/widget/resource_tree.rs    | 41 +++++++++++++++++++++++++++++--
 4 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/ui/src/dashboard/resource_tree.rs b/ui/src/dashboard/resource_tree.rs
index cd7a1702..f1887e75 100644
--- a/ui/src/dashboard/resource_tree.rs
+++ b/ui/src/dashboard/resource_tree.rs
@@ -7,10 +7,16 @@ use pwt::widget::Panel;
 use pwt::widget::Row;
 use pwt::widget::Toolbar;
 
+use crate::widget::RedrawController;
 use crate::widget::ResourceTree;
 
+#[derive(Properties, Clone, PartialEq)]
+struct ResourceTreeWithSearchProps {
+    redraw_controller: RedrawController,
+}
+
 #[function_component]
-fn ResourceTreeWithSearch() -> Html {
+fn ResourceTreeWithSearch(props: &ResourceTreeWithSearchProps) -> Html {
     let search = use_state(String::new);
 
     Column::new()
@@ -28,6 +34,7 @@ fn ResourceTreeWithSearch() -> Html {
             // column size that does not decrease
             Row::new().class(css::FlexFit).with_child(
                 ResourceTree::new()
+                    .redraw_controller(props.redraw_controller.clone())
                     .search_term(search.to_string())
                     .flex(1.0)
                     .width(250)
@@ -38,9 +45,9 @@ fn ResourceTreeWithSearch() -> Html {
         .into()
 }
 
-pub fn create_resource_tree() -> Panel {
+pub fn create_resource_tree(redraw_controller: RedrawController) -> Panel {
     Panel::new()
         .class(css::FlexFit)
         .title(tr!("Resources"))
-        .with_child(html! {<ResourceTreeWithSearch />})
+        .with_child(html! {<ResourceTreeWithSearch {redraw_controller} />})
 }
diff --git a/ui/src/dashboard/view.rs b/ui/src/dashboard/view.rs
index 6b3baf3a..65697d38 100644
--- a/ui/src/dashboard/view.rs
+++ b/ui/src/dashboard/view.rs
@@ -29,6 +29,7 @@ use crate::dashboard::{
     DashboardStatusRow,
 };
 use crate::remotes::AddWizard;
+use crate::widget::RedrawController;
 use crate::{pdm_client, LoadResult};
 
 use pdm_api_types::remotes::RemoteType;
@@ -120,6 +121,7 @@ struct WidgetRenderArgs {
     subscriptions: SharedState<LoadResult<Vec<RemoteSubscriptions>, Error>>,
     top_entities: SharedState<LoadResult<TopEntities, proxmox_client::Error>>,
     statistics: SharedState<LoadResult<TaskStatistics, Error>>,
+    redraw_controller: RedrawController,
 }
 
 fn render_widget(
@@ -133,6 +135,7 @@ fn render_widget(
         subscriptions,
         top_entities,
         statistics,
+        redraw_controller,
     } = render_args;
 
     let mut widget = match &item.r#type {
@@ -168,7 +171,7 @@ fn render_widget(
             let (hours, since) = get_task_options(refresh_config.task_last_hours);
             create_task_summary_panel(statistics, remotes, hours, since)
         }
-        WidgetType::ResourceTree => create_resource_tree(),
+        WidgetType::ResourceTree => create_resource_tree(redraw_controller),
     };
 
     if let Some(title) = &item.title {
@@ -189,6 +192,7 @@ impl ViewComp {
     }
 
     fn do_reload(&mut self, ctx: &yew::Context<Self>, max_age: u64) {
+        self.render_args.redraw_controller.redraw_request();
         if let Some(data) = self.template.data.as_ref() {
             let link = ctx.link().clone();
             let (_, since) = get_task_options(self.refresh_config.task_last_hours);
@@ -343,6 +347,7 @@ impl Component for ViewComp {
                 top_entities: SharedState::new(LoadResult::new()),
                 statistics: SharedState::new(LoadResult::new()),
                 subscriptions: SharedState::new(LoadResult::new()),
+                redraw_controller: RedrawController::new(),
             },
         }
     }
diff --git a/ui/src/widget/mod.rs b/ui/src/widget/mod.rs
index 97e7e472..7d789c39 100644
--- a/ui/src/widget/mod.rs
+++ b/ui/src/widget/mod.rs
@@ -17,7 +17,7 @@ mod pve_realm_selector;
 pub use pve_realm_selector::PveRealmSelector;
 
 mod resource_tree;
-pub use resource_tree::ResourceTree;
+pub use resource_tree::{RedrawController, ResourceTree};
 
 mod search_box;
 pub use search_box::SearchBox;
diff --git a/ui/src/widget/resource_tree.rs b/ui/src/widget/resource_tree.rs
index 25d26d65..9f17634c 100644
--- a/ui/src/widget/resource_tree.rs
+++ b/ui/src/widget/resource_tree.rs
@@ -4,7 +4,11 @@ use anyhow::Error;
 use gloo_timers::callback::Timeout;
 use serde_json::json;
 use web_sys::window;
-use yew::{html::IntoEventCallback, virtual_dom::Key, Component};
+use yew::{
+    html::{IntoEventCallback, IntoPropValue},
+    virtual_dom::Key,
+    Component,
+};
 
 use pwt::{
     css::{FlexFit, FontColor},
@@ -36,6 +40,25 @@ use crate::{
 const REFRESH_TIME_S: u32 = 60;
 const INPUT_BUFFER_MS: u32 = 500;
 
+/// A simple counter that, when used as a property, can be used to force refresh a child component.
+#[derive(Clone, PartialEq)]
+pub struct RedrawController(pub usize);
+
+impl RedrawController {
+    /// increase the counter, triggering a property change
+    ///
+    /// After this, the child component has to be rerendered in the `view` method with a new clone
+    /// of this controller.
+    pub fn redraw_request(&mut self) {
+        self.0 = self.0.wrapping_add(1);
+    }
+
+    /// Returns a new RedrawController
+    pub fn new() -> Self {
+        Self(0)
+    }
+}
+
 #[widget(comp=PdmResourceTree, @element)]
 #[derive(Properties, Clone, PartialEq)]
 #[builder]
@@ -55,6 +78,11 @@ pub struct ResourceTree {
     #[builder_cb(IntoEventCallback, into_event_callback, ())]
     /// Triggered after the user navigated to an entry by clicking or using the keyboard
     pub on_navigate: Option<Callback<()>>,
+
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    /// If set, will trigger a reload on a redraw request.
+    pub redraw_controller: Option<RedrawController>,
 }
 
 impl ResourceTree {
@@ -244,7 +272,16 @@ impl Component for PdmResourceTree {
 
     fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
         let props = ctx.props();
-        if props.search_term != old_props.search_term {
+
+        let needs_reload = props.search_term != old_props.search_term;
+        let mut redraw_request = false;
+        if let Some(redraw_controller) = props.redraw_controller.clone() {
+            redraw_request = match &old_props.redraw_controller {
+                Some(controller) => controller.0 != redraw_controller.0,
+                None => true,
+            };
+        }
+        if needs_reload || redraw_request {
             if !props.search_only || !props.search_term.is_empty() {
                 ctx.link().clone().send_message(Msg::Load);
             } else if props.search_term.is_empty() {
-- 
2.47.3



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