[pdm-devel] [PATCH proxmox-datacenter-manager 10/13] ui: sdn: add AddZoneWindow component

[Stefan Hanreich <s.hanreich@proxmox.com>]

Adds an edit window for creating a new zone. This windows shows a form
containing all fields required to create new zone via the create_zone
API endpoint.

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 ui/src/sdn/evpn/add_zone.rs | 229 ++++++++++++++++++++++++++++++++++++
 ui/src/sdn/evpn/mod.rs      |   3 +
 2 files changed, 232 insertions(+)
 create mode 100644 ui/src/sdn/evpn/add_zone.rs

diff --git a/ui/src/sdn/evpn/add_zone.rs b/ui/src/sdn/evpn/add_zone.rs
new file mode 100644
index 0000000..3b6b0cb
--- /dev/null
+++ b/ui/src/sdn/evpn/add_zone.rs
@@ -0,0 +1,229 @@
+use std::{collections::HashSet, rc::Rc};
+
+use anyhow::{bail, Error};
+use pdm_client::types::{ListController, SDN_ID_SCHEMA};
+use proxmox_yew_comp::{EditWindow, SchemaValidation};
+use pwt::{
+    css,
+    props::{
+        ContainerBuilder, CssBorderBuilder, CssPaddingBuilder, ExtractPrimaryKey, FieldBuilder,
+        SubmitCallback, WidgetBuilder, WidgetStyleBuilder,
+    },
+    state::{Selection, Store},
+    tr,
+    widget::{
+        data_table::{DataTable, DataTableColumn, DataTableHeader, MultiSelectMode},
+        error_message,
+        form::{
+            Field, FormContext, ManagedField, ManagedFieldContext, ManagedFieldMaster,
+            ManagedFieldState, Number,
+        },
+        Column, Container, GridPicker, InputPanel,
+    },
+};
+use pwt_macros::widget;
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use yew::{function_component, virtual_dom::Key, Callback, Html, Properties};
+
+#[derive(Properties, PartialEq)]
+pub struct AddZoneWindowProps {
+    pub controllers: Rc<Vec<ListController>>,
+    pub on_submit_callback: SubmitCallback<FormContext>,
+    pub on_close_callback: Callback<()>,
+}
+
+#[function_component]
+pub fn AddZoneWindow(props: &AddZoneWindowProps) -> Html {
+    let controllers = props.controllers.clone();
+
+    EditWindow::new(tr!("Add VRF"))
+        .renderer(move |form_ctx: &FormContext| {
+            InputPanel::new()
+                .class(css::FlexFit)
+                .padding(4)
+                .width("auto")
+                .with_field(
+                    tr!("Zone ID"),
+                    Field::new()
+                        .name("zone")
+                        .schema(&SDN_ID_SCHEMA)
+                        .required(true),
+                )
+                .with_field(
+                    tr!("VRF VXLAN VNI"),
+                    Number::<u32>::new()
+                        .min(1)
+                        .max(16777215)
+                        .name("vrf-vxlan")
+                        .required(true),
+                )
+                .with_custom_child(
+                    Column::new()
+                        .with_child(ControllerTable::new(controllers.clone()).name("remotes"))
+                        .with_optional_child(
+                            form_ctx
+                                .read()
+                                .get_field_valid("remotes")
+                                .and_then(|result| result.err().as_deref().map(error_message)),
+                        ),
+                )
+                .into()
+        })
+        .on_close(props.on_close_callback.clone())
+        .on_submit(Some(props.on_submit_callback.clone()))
+        .into()
+}
+
+#[widget(comp=ManagedFieldMaster<ControllerTableComponent>, @input)]
+#[derive(Clone, PartialEq, Properties)]
+struct ControllerTable {
+    controllers: Rc<Vec<ListController>>,
+}
+
+impl ControllerTable {
+    pub fn new(controllers: Rc<Vec<ListController>>) -> Self {
+        yew::props!(Self { controllers })
+    }
+}
+
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize)]
+struct ControllerTableEntry {
+    remote: String,
+    controller: String,
+    #[serde(skip)]
+    asn: u32,
+}
+
+impl ExtractPrimaryKey for ControllerTableEntry {
+    fn extract_key(&self) -> Key {
+        Key::from(format!("{}/{}", self.remote, self.controller))
+    }
+}
+
+struct ControllerTableComponent {
+    store: Store<ControllerTableEntry>,
+    selection: Selection,
+}
+
+enum ControllerTableMsg {
+    SelectionChange,
+}
+
+impl ManagedField for ControllerTableComponent {
+    type Properties = ControllerTable;
+    type Message = ControllerTableMsg;
+    type ValidateClosure = ();
+
+    fn validation_args(_props: &Self::Properties) -> Self::ValidateClosure {}
+
+    fn validator(_props: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
+        let selected_entries: Vec<ControllerTableEntry> = serde_json::from_value(value.clone())?;
+
+        if selected_entries.is_empty() {
+            bail!("at least one remote needs to be selected");
+        }
+
+        let mut unique = HashSet::new();
+
+        if !selected_entries
+            .iter()
+            .all(|entry| unique.insert(entry.remote.as_str()))
+        {
+            bail!("can only create the zone once per remote!")
+        }
+
+        Ok(value.clone())
+    }
+
+    fn setup(_props: &Self::Properties) -> ManagedFieldState {
+        ManagedFieldState {
+            value: Value::Null,
+            valid: Ok(()),
+            default: Value::Array(Vec::new()),
+            radio_group: false,
+            unique: false,
+        }
+    }
+
+    fn create(ctx: &ManagedFieldContext<Self>) -> Self {
+        let link = ctx.link().clone();
+        let selection = Selection::new().multiselect(true).on_select(move |_| {
+            link.send_message(Self::Message::SelectionChange);
+        });
+
+        let store = Store::new();
+        store.set_data(
+            ctx.props()
+                .controllers
+                .iter()
+                .map(|controller| ControllerTableEntry {
+                    remote: controller.remote.clone(),
+                    controller: controller.controller.controller.clone(),
+                    asn: controller.controller.asn.expect("EVPN controller has ASN"),
+                })
+                .collect(),
+        );
+
+        Self { store, selection }
+    }
+
+    fn update(&mut self, ctx: &ManagedFieldContext<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Self::Message::SelectionChange => {
+                let read_guard = self.store.read();
+
+                ctx.link().update_value(
+                    serde_json::to_value(
+                        self.selection
+                            .selected_keys()
+                            .iter()
+                            // todo: handle miss?
+                            .filter_map(|key| read_guard.lookup_record(key))
+                            .collect::<Vec<_>>(),
+                    )
+                    .unwrap(),
+                );
+            }
+        }
+
+        false
+    }
+
+    fn view(&self, _ctx: &ManagedFieldContext<Self>) -> Html {
+        let table = DataTable::new(COLUMNS.with(Rc::clone), self.store.clone())
+            .multiselect_mode(MultiSelectMode::Simple)
+            .border(true)
+            .class(css::FlexFit);
+
+        Container::new()
+            .with_child(GridPicker::new(table).selection(self.selection.clone()))
+            .into()
+    }
+}
+
+thread_local! {
+    static COLUMNS: Rc<Vec<DataTableHeader<ControllerTableEntry>>> =
+        Rc::new(vec![
+            DataTableColumn::selection_indicator().into(),
+            DataTableColumn::new(tr!("Remote"))
+                .flex(1)
+                .render(move |item: &ControllerTableEntry| item.remote.as_str().into())
+                .sorter(|a: &ControllerTableEntry, b: &ControllerTableEntry| {
+                    a.remote.cmp(&b.remote)
+                })
+                .into(),
+            DataTableColumn::new(tr!("Controller"))
+                .flex(1)
+                .render(move |item: &ControllerTableEntry| item.controller.as_str().into())
+                .sorter(|a: &ControllerTableEntry, b: &ControllerTableEntry| {
+                    a.controller.cmp(&b.controller)
+                })
+                .into(),
+            DataTableColumn::new(tr!("ASN"))
+                .flex(1)
+                .render(move |item: &ControllerTableEntry| item.asn.into())
+                .sorter(|a: &ControllerTableEntry, b: &ControllerTableEntry| a.asn.cmp(&b.asn))
+                .into(),
+        ]);
+}
diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
index 4db42b4..f02eb7b 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -6,3 +6,6 @@ pub use vrf_tree::VrfTree;
 
 mod add_vnet;
 pub use add_vnet::AddVnetWindow;
+
+mod add_zone;
+pub use add_zone::AddZoneWindow;
-- 
2.39.5


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