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

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

This table shows an overview of EVPN controllers on all connected
remotes. Those routers can then be used for creating new EVPN zones.

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

diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
index 0745f52..996ab25 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -1,2 +1,5 @@
+mod router_table;
+pub use router_table::RouterTable;
+
 mod vrf_tree;
 pub use vrf_tree::VrfTree;
diff --git a/ui/src/sdn/evpn/router_table.rs b/ui/src/sdn/evpn/router_table.rs
new file mode 100644
index 0000000..8f2892c
--- /dev/null
+++ b/ui/src/sdn/evpn/router_table.rs
@@ -0,0 +1,125 @@
+use std::cmp::Ordering;
+use std::rc::Rc;
+
+use pdm_client::types::{ListController, SdnObjectState};
+use pwt::props::{ContainerBuilder, ExtractPrimaryKey, WidgetBuilder};
+use pwt::state::{Selection, Store};
+use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
+use pwt::widget::{Column, Container};
+use pwt::{css, tr};
+use serde::{Deserialize, Serialize};
+use yew::virtual_dom::{Key, VComp, VNode};
+use yew::{Component, Context, Html, Properties};
+
+#[derive(PartialEq, Properties)]
+pub struct RouterTable {
+    controllers: Rc<Vec<ListController>>,
+}
+
+impl RouterTable {
+    pub fn new(controllers: Rc<Vec<ListController>>) -> Self {
+        yew::props!(Self { controllers })
+    }
+}
+
+impl From<RouterTable> for VNode {
+    fn from(val: RouterTable) -> Self {
+        let comp = VComp::new::<RouterTableComponent>(Rc::new(val), None);
+        VNode::from(comp)
+    }
+}
+
+pub enum RouterTableMsg {
+    SelectionChange,
+}
+
+#[derive(Clone, PartialEq, Serialize, Deserialize)]
+pub struct RouterEntry {
+    pub remote: String,
+    pub controller: String,
+    pub asn: u32,
+    pub state: Option<SdnObjectState>,
+}
+
+impl ExtractPrimaryKey for RouterEntry {
+    fn extract_key(&self) -> Key {
+        Key::from(format!("{}/{}", self.remote, self.controller))
+    }
+}
+
+pub struct RouterTableComponent {
+    store: Store<RouterEntry>,
+    selection: Selection,
+}
+
+fn remote_sorter(a: &RouterEntry, b: &RouterEntry) -> Ordering {
+    a.remote.cmp(&b.remote)
+}
+
+impl RouterTableComponent {
+    fn columns() -> Rc<Vec<DataTableHeader<RouterEntry>>> {
+        Rc::new(vec![
+            DataTableColumn::new(tr!("Remote"))
+                .render(|item: &RouterEntry| item.remote.as_str().into())
+                .sorter(remote_sorter)
+                .into(),
+            DataTableColumn::new(tr!("Name"))
+                .render(|item: &RouterEntry| item.controller.as_str().into())
+                .sorter(|a: &RouterEntry, b: &RouterEntry| a.controller.cmp(&b.controller))
+                .into(),
+            DataTableColumn::new(tr!("ASN"))
+                .render(|item: &RouterEntry| item.asn.into())
+                .sorter(|a: &RouterEntry, b: &RouterEntry| a.asn.cmp(&b.asn))
+                .into(),
+        ])
+    }
+}
+
+impl Component for RouterTableComponent {
+    type Properties = RouterTable;
+    type Message = RouterTableMsg;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let store = Store::new();
+        store.set_sorter(remote_sorter);
+
+        let selection =
+            Selection::new().on_select(ctx.link().callback(|_| Self::Message::SelectionChange));
+
+        Self { store, selection }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        if !Rc::ptr_eq(&ctx.props().controllers, &old_props.controllers) {
+            self.store.set_data(
+                ctx.props()
+                    .controllers
+                    .iter()
+                    .map(|elem| RouterEntry {
+                        remote: elem.remote.clone(),
+                        controller: elem.controller.controller.clone(),
+                        asn: elem
+                            .controller
+                            .asn_pending()
+                            .expect("EVPN controller has an ASN"),
+                        state: elem.controller.state,
+                    })
+                    .collect(),
+            );
+            self.store.set_sorter(remote_sorter);
+        }
+
+        true
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        let table = DataTable::new(Self::columns(), self.store.clone())
+            .selection(self.selection.clone())
+            .class("pwt-flex-fit");
+
+        Container::new()
+            .class(css::FlexFit)
+            .with_child(Column::new().class(css::FlexFit).gap(2).with_child(table))
+            .into()
+    }
+}
-- 
2.39.5


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