[pdm-devel] [PATCH proxmox-datacenter-manager 07/13] ui: add VrfTree component

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

This component shows a tree of all EVPN Zones of all remotes
configured in the PDM. They are grouped by VRF (= VRF VXLAN VNI of the
EVPN zone) first. The second level are the remotes, so users can see
all remotes where the VRF already exists. The third level, below the
respective remote, shows all VNets in the zones as well as their VXLAN
VNI.

I've decided to refer to EVPN Zones in the PDM UI as VRF, since this
is the well-established name for a routing table in this context. It
makes the purpose of having multiple zones clearer, since users were
confused about how to create multiple VRFs. By changing the name in
the PDM UI, this should be a lot easier to grasp for users not
familiar with the SDN stack. It also harmonizes our terminology with
the well-established standard terminology used in RFC 8356 [1]

[1] https://datatracker.ietf.org/doc/html/rfc8365

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 ui/src/lib.rs               |   2 +
 ui/src/sdn/evpn/mod.rs      |   2 +
 ui/src/sdn/evpn/vrf_tree.rs | 291 ++++++++++++++++++++++++++++++++++++
 ui/src/sdn/mod.rs           |   1 +
 4 files changed, 296 insertions(+)
 create mode 100644 ui/src/sdn/evpn/mod.rs
 create mode 100644 ui/src/sdn/evpn/vrf_tree.rs
 create mode 100644 ui/src/sdn/mod.rs

diff --git a/ui/src/lib.rs b/ui/src/lib.rs
index e3755ec..bde8917 100644
--- a/ui/src/lib.rs
+++ b/ui/src/lib.rs
@@ -30,6 +30,8 @@ mod widget;
 pub mod pbs;
 pub mod pve;
 
+pub mod sdn;
+
 pub mod renderer;
 
 mod tasks;
diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
new file mode 100644
index 0000000..0745f52
--- /dev/null
+++ b/ui/src/sdn/evpn/mod.rs
@@ -0,0 +1,2 @@
+mod vrf_tree;
+pub use vrf_tree::VrfTree;
diff --git a/ui/src/sdn/evpn/vrf_tree.rs b/ui/src/sdn/evpn/vrf_tree.rs
new file mode 100644
index 0000000..5e8005c
--- /dev/null
+++ b/ui/src/sdn/evpn/vrf_tree.rs
@@ -0,0 +1,291 @@
+use std::cmp::Ordering;
+use std::collections::HashMap;
+use std::rc::Rc;
+
+use pdm_client::types::{ListController, ListVnet, ListZone, Remote, SdnObjectState};
+use pwt::css;
+use pwt::props::{ContainerBuilder, EventSubscriber, ExtractPrimaryKey, WidgetBuilder};
+use pwt::state::{Selection, SlabTree, TreeStore};
+use pwt::tr;
+use pwt::widget::data_table::{
+    DataTable, DataTableCellRenderArgs, DataTableColumn, DataTableHeader, DataTableRowRenderArgs,
+};
+use pwt::widget::{Button, Column, Container, Fa, Row, Toolbar};
+use pwt_macros::widget;
+use yew::virtual_dom::Key;
+use yew::{html, Callback, Component, Context, Html, MouseEvent, Properties};
+
+#[widget(comp=VrfTreeComponent)]
+#[derive(Clone, PartialEq, Properties)]
+pub struct VrfTree {
+    zones: Rc<Vec<ListZone>>,
+    vnets: Rc<Vec<ListVnet>>,
+    remotes: Rc<Vec<Remote>>,
+    controllers: Rc<Vec<ListController>>,
+    on_add: Callback<MouseEvent>,
+    on_add_vnet: Callback<MouseEvent>,
+}
+
+impl VrfTree {
+    pub fn new(
+        zones: Rc<Vec<ListZone>>,
+        vnets: Rc<Vec<ListVnet>>,
+        remotes: Rc<Vec<Remote>>,
+        controllers: Rc<Vec<ListController>>,
+        on_add: Callback<MouseEvent>,
+        on_add_vnet: Callback<MouseEvent>,
+    ) -> Self {
+        yew::props!(Self {
+            zones,
+            vnets,
+            remotes,
+            controllers,
+            on_add,
+            on_add_vnet,
+        })
+    }
+}
+
+pub enum VrfTreeMsg {
+    SelectionChange,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+pub enum VrfTreeEntry {
+    Root(Key),
+    Vrf {
+        vni: u32,
+    },
+    Remote {
+        id: String,
+        zone: String,
+        state: Option<SdnObjectState>,
+    },
+    Vnet {
+        id: String,
+        remote: String,
+        vxlan_id: u32,
+        state: Option<SdnObjectState>,
+    },
+}
+
+impl ExtractPrimaryKey for VrfTreeEntry {
+    fn extract_key(&self) -> Key {
+        match self {
+            Self::Root(key) => key.clone(),
+            Self::Vrf { vni } => Key::from(vni.to_string()),
+            Self::Remote { id, zone, .. } => Key::from(format!("{}/{}", id, zone)),
+            Self::Vnet {
+                id,
+                remote,
+                vxlan_id,
+                ..
+            } => Key::from(format!("{}/{}/{}", id, remote, vxlan_id)),
+        }
+    }
+}
+
+fn zones_to_vrf_view(zones: &[ListZone], vnets: &[ListVnet]) -> SlabTree<VrfTreeEntry> {
+    let mut tree = SlabTree::new();
+
+    let mut vrfs = HashMap::new();
+    let mut zone_vnets = HashMap::new();
+
+    for zone in zones {
+        vrfs.entry(zone.zone.vrf_vxlan.expect("EVPN zone has a VXLAN ID"))
+            .or_insert(Vec::new())
+            .push(zone);
+    }
+
+    for vnet in vnets {
+        zone_vnets
+            .entry(format!("{}/{}", vnet.remote, vnet.vnet.zone_pending()))
+            .or_insert(Vec::new())
+            .push(vnet);
+    }
+
+    let mut root = tree.set_root(VrfTreeEntry::Root(Key::from("root")));
+    root.set_expanded(true);
+
+    for (vni, zones) in vrfs {
+        let mut vrf_entry = root.append(VrfTreeEntry::Vrf { vni });
+        vrf_entry.set_expanded(true);
+
+        for zone in zones {
+            let mut remote_entry = vrf_entry.append(VrfTreeEntry::Remote {
+                id: zone.remote.clone(),
+                zone: zone.zone.zone.clone(),
+                state: zone.zone.state,
+            });
+
+            remote_entry.set_expanded(true);
+
+            let key = format!("{}/{}", zone.remote, zone.zone.zone);
+            if let Some(vnets) = zone_vnets.get(&key) {
+                for vnet in vnets {
+                    remote_entry.append(VrfTreeEntry::Vnet {
+                        id: vnet.vnet.vnet.clone(),
+                        remote: vnet.remote.clone(),
+                        vxlan_id: vnet.vnet.tag_pending().expect("EVPN VNet has a tag."),
+                        state: vnet.vnet.state,
+                    });
+                }
+            }
+        }
+    }
+
+    tree
+}
+
+fn render_vxlan(args: &mut DataTableCellRenderArgs<VrfTreeEntry>) -> Html {
+    match args.record() {
+        VrfTreeEntry::Vnet { vxlan_id, .. } => vxlan_id.to_string().as_str().into(),
+        _ => html! {},
+    }
+}
+
+fn render_zone(args: &mut DataTableCellRenderArgs<VrfTreeEntry>) -> Html {
+    match args.record() {
+        VrfTreeEntry::Remote { zone, .. } => zone.as_str().into(),
+        _ => html! {},
+    }
+}
+
+fn render_remote_or_vrf(args: &mut DataTableCellRenderArgs<VrfTreeEntry>) -> Html {
+    let mut row = Row::new().class(css::AlignItems::Baseline).gap(2);
+
+    row = match args.record() {
+        VrfTreeEntry::Vrf { vni } => row
+            .with_child(Fa::new("th"))
+            .with_child(format!("VRF {vni}")),
+        VrfTreeEntry::Remote { id, .. } => {
+            row.with_child(Fa::new("server")).with_child(id.as_str())
+        }
+        VrfTreeEntry::Vnet { id, .. } => row
+            .with_child(Fa::new("network-wired"))
+            .with_child(id.as_str()),
+        _ => row,
+    };
+
+    row.into()
+}
+
+fn render_state(args: &mut DataTableCellRenderArgs<VrfTreeEntry>) -> Html {
+    let state = match args.record() {
+        VrfTreeEntry::Remote { state, .. } => *state,
+        VrfTreeEntry::Vnet { state, .. } => *state,
+        _ => None,
+    };
+
+    match state {
+        Some(SdnObjectState::New) => "new",
+        Some(SdnObjectState::Changed) => "changed",
+        Some(SdnObjectState::Deleted) => "deleted",
+        None => "",
+    }
+    .into()
+}
+
+fn vrf_sorter(a: &VrfTreeEntry, b: &VrfTreeEntry) -> Ordering {
+    match (a, b) {
+        (VrfTreeEntry::Vrf { vni: vni_a }, VrfTreeEntry::Vrf { vni: vni_b }) => vni_a.cmp(vni_b),
+        (VrfTreeEntry::Remote { id: id_a, .. }, VrfTreeEntry::Remote { id: id_b, .. }) => {
+            id_a.cmp(id_b)
+        }
+        (
+            VrfTreeEntry::Vnet {
+                vxlan_id: vxlan_id_a,
+                ..
+            },
+            VrfTreeEntry::Vnet {
+                vxlan_id: vxlan_id_b,
+                ..
+            },
+        ) => vxlan_id_a.cmp(vxlan_id_b),
+        (_, _) => std::cmp::Ordering::Equal,
+    }
+}
+
+pub struct VrfTreeComponent {
+    store: TreeStore<VrfTreeEntry>,
+    selection: Selection,
+}
+
+impl VrfTreeComponent {
+    fn columns(store: TreeStore<VrfTreeEntry>) -> Rc<Vec<DataTableHeader<VrfTreeEntry>>> {
+        Rc::new(vec![
+            DataTableColumn::new(tr!("VRF / Remote"))
+                .tree_column(store)
+                .render_cell(render_remote_or_vrf)
+                .sorter(vrf_sorter)
+                .into(),
+            DataTableColumn::new(tr!("Zone"))
+                .render_cell(render_zone)
+                .into(),
+            DataTableColumn::new(tr!("VXLAN"))
+                .render_cell(render_vxlan)
+                .into(),
+            DataTableColumn::new(tr!("State"))
+                .render_cell(render_state)
+                .into(),
+        ])
+    }
+}
+
+impl Component for VrfTreeComponent {
+    type Properties = VrfTree;
+    type Message = VrfTreeMsg;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let store = TreeStore::new().view_root(false);
+        store.set_sorter(vrf_sorter);
+
+        let selection =
+            Selection::new().on_select(ctx.link().callback(|_| Self::Message::SelectionChange));
+
+        Self { store, selection }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let toolbar = Toolbar::new()
+            .class("pwt-w-100")
+            .class("pwt-overflow-hidden")
+            .class("pwt-border-bottom")
+            .with_child(Button::new(tr!("Add")).onclick(ctx.props().on_add.clone()))
+            .with_child(Button::new(tr!("Add VNet")).onclick(ctx.props().on_add_vnet.clone()));
+
+        let columns = Self::columns(self.store.clone());
+
+        let table = DataTable::new(columns, self.store.clone())
+            .selection(self.selection.clone())
+            .striped(false)
+            .row_render_callback(|args: &mut DataTableRowRenderArgs<VrfTreeEntry>| {
+                if let VrfTreeEntry::Vrf { .. } = args.record() {
+                    args.add_class("pwt-bg-color-surface");
+                }
+            })
+            .class(css::FlexFit);
+
+        Container::new()
+            .class(css::FlexFit)
+            .with_child(
+                Column::new()
+                    .class(css::FlexFit)
+                    .with_child(toolbar)
+                    .with_child(table),
+            )
+            .into()
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        if !Rc::ptr_eq(&ctx.props().zones, &old_props.zones) {
+            let data = zones_to_vrf_view(&ctx.props().zones, &ctx.props().vnets);
+            self.store.set_data(data);
+            self.store.set_sorter(vrf_sorter);
+
+            return true;
+        }
+
+        false
+    }
+}
diff --git a/ui/src/sdn/mod.rs b/ui/src/sdn/mod.rs
new file mode 100644
index 0000000..ef2eab9
--- /dev/null
+++ b/ui/src/sdn/mod.rs
@@ -0,0 +1 @@
+pub mod evpn;
-- 
2.39.5


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