[pdm-devel] [PATCH datacenter-manager v2 3/4] ui: widget: add remote endpoint selector

[Dominik Csapak]

this is a widget to select a specific endpoint, showing the hostname as
the value. This can be useful in situations where we wan to explicitly
select an endpoint, e.g. remote migration.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes from v1:
* fix typo in commit message
 ui/src/widget/mod.rs                      |   2 +
 ui/src/widget/remote_endpoint_selector.rs | 103 ++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 ui/src/widget/remote_endpoint_selector.rs

diff --git a/ui/src/widget/mod.rs b/ui/src/widget/mod.rs
index b885d1b..ee9e799 100644
--- a/ui/src/widget/mod.rs
+++ b/ui/src/widget/mod.rs
@@ -21,3 +21,5 @@ pub use search_box::SearchBox;
 
 mod remote_selector;
 pub use remote_selector::RemoteSelector;
+
+mod remote_endpoint_selector;
diff --git a/ui/src/widget/remote_endpoint_selector.rs b/ui/src/widget/remote_endpoint_selector.rs
new file mode 100644
index 0000000..779d98c
--- /dev/null
+++ b/ui/src/widget/remote_endpoint_selector.rs
@@ -0,0 +1,103 @@
+use std::rc::Rc;
+
+use wasm_bindgen::UnwrapThrowExt;
+use yew::{
+    html::{IntoEventCallback, IntoPropValue},
+    AttrValue, Callback, Component, Properties,
+};
+
+use pwt::{
+    props::{FieldBuilder, WidgetBuilder},
+    widget::form::Combobox,
+};
+use pwt_macros::{builder, widget};
+
+use crate::RemoteList;
+
+#[widget(comp=PdmEndpointSelector, @input)]
+#[derive(Clone, Properties, PartialEq)]
+#[builder]
+pub struct EndpointSelector {
+    /// The default value
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub default: Option<AttrValue>,
+
+    /// Change callback
+    #[builder_cb(IntoEventCallback, into_event_callback, String)]
+    #[prop_or_default]
+    pub on_change: Option<Callback<String>>,
+
+    /// The remote to list Endpoints from
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub remote: AttrValue,
+}
+
+impl EndpointSelector {
+    pub fn new(remote: AttrValue) -> Self {
+        yew::props!(Self { remote })
+    }
+}
+
+pub struct PdmEndpointSelector {
+    endpoints: Rc<Vec<AttrValue>>,
+}
+
+impl PdmEndpointSelector {
+    fn update_endpoint_list(&mut self, ctx: &yew::Context<Self>) {
+        let (remotes, _): (RemoteList, _) = ctx
+            .link()
+            .context(ctx.link().callback(|_| ()))
+            .unwrap_throw();
+
+        let remote_id = ctx.props().remote.as_str();
+
+        for remote in remotes.iter() {
+            if remote.id != remote_id {
+                continue;
+            }
+
+            let endpoints = remote
+                .nodes
+                .iter()
+                .map(|endpoint| AttrValue::from(endpoint.hostname.clone()))
+                .collect();
+            self.endpoints = Rc::new(endpoints);
+            break;
+        }
+    }
+}
+
+impl Component for PdmEndpointSelector {
+    type Message = ();
+    type Properties = EndpointSelector;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        let mut this = Self {
+            endpoints: Rc::new(Vec::new()),
+        };
+
+        this.update_endpoint_list(ctx);
+        this
+    }
+
+    fn changed(&mut self, ctx: &yew::Context<Self>, old_props: &Self::Properties) -> bool {
+        if ctx.props().remote != old_props.remote {
+            log::info!("{} {}", ctx.props().remote, old_props.remote);
+            self.update_endpoint_list(ctx);
+        }
+        true
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
+        Combobox::new()
+            .with_std_props(&props.std_props)
+            .with_input_props(&props.input_props)
+            .on_change(props.on_change.clone())
+            .default(props.default.clone())
+            .items(self.endpoints.clone())
+            .into()
+    }
+}
-- 
2.39.5