[pdm-devel] [PATCH proxmox-datacenter-manager v2 10/15] ui: add view for showing ip vrfs

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

This component shows the content of all IP-VRFs from all remotes
configured in the PDM. It merges the contents of IP-VRFs that have the
same ASN:VNI (= Route Target) combination. Practically speaking, it
shows a list of VNets who would have the Route Target of the IP-VRF in
their EVPN route target. This means that when importing the IP-VRF in
a different zone, routes from guests in those VNets would be imported
into the routing table.

The component operates under the assumption that zones that are in the
same ASN, are also interconnected - since it merges the VNets of all
zones with the same route target (= ASN + VRF VNI). This means ASNs
cannot be reused across remotes, if they are not connected, in order
for this view to correctly show the contents of the IP-VRFs. In the
future this could be improved by storing IDs or tags on the PVE side,
reading them from PDM and then only merging the zones of remotes that
have the same ID / tag.

In addition to the terms zones / vnets, the terms IP-VRF and MAC-VRF
are introduced. For EVPN a zone maps to a routing table and a vnet
maps to a bridging table. FRR [1] uses the terms in their
documentation and they are also referred to as such in the EVPN RFC
[2]. In order to make this relationship more clear, particularly to
users that are familiar with EVPN but not necessarily Proxmox VE SDN,
those terms are now used in addition to the existing terms zone /
vnet.

[1] https://docs.frrouting.org/en/latest/evpn.html
[2] 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      |   3 +
 ui/src/sdn/evpn/vrf_tree.rs | 345 ++++++++++++++++++++++++++++++++++++
 ui/src/sdn/mod.rs           |   1 +
 4 files changed, 351 insertions(+)
 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
index c2958f0..da020a9 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -1,6 +1,9 @@
 mod remote_tree;
 pub use remote_tree::RemoteTree;
 
+mod vrf_tree;
+pub use vrf_tree::VrfTree;
+
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Ord, PartialOrd, Hash)]
 pub struct EvpnRouteTarget {
     asn: u32,
diff --git a/ui/src/sdn/evpn/vrf_tree.rs b/ui/src/sdn/evpn/vrf_tree.rs
new file mode 100644
index 0000000..8b01b00
--- /dev/null
+++ b/ui/src/sdn/evpn/vrf_tree.rs
@@ -0,0 +1,345 @@
+use std::cmp::Ordering;
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use yew::virtual_dom::{Key, VNode};
+use yew::{Component, Context, Html, Properties};
+
+use pdm_client::types::{ListController, ListVnet, ListZone};
+use pwt::css;
+use pwt::props::{ContainerBuilder, ExtractPrimaryKey, WidgetBuilder};
+use pwt::state::{Selection, SlabTree, TreeStore};
+use pwt::tr;
+use pwt::widget::data_table::{
+    DataTable, DataTableColumn, DataTableHeader, DataTableRowRenderArgs,
+};
+use pwt::widget::{Column, Fa, Row};
+use pwt_macros::widget;
+
+use crate::sdn::evpn::EvpnRouteTarget;
+
+#[widget(comp=VrfTreeComponent)]
+#[derive(Clone, PartialEq, Properties, Default)]
+pub struct VrfTree {
+    zones: Rc<Vec<ListZone>>,
+    vnets: Rc<Vec<ListVnet>>,
+    controllers: Rc<Vec<ListController>>,
+}
+
+impl VrfTree {
+    pub fn new(
+        zones: Rc<Vec<ListZone>>,
+        vnets: Rc<Vec<ListVnet>>,
+        controllers: Rc<Vec<ListController>>,
+    ) -> Self {
+        yew::props!(Self {
+            zones,
+            vnets,
+            controllers,
+        })
+    }
+}
+
+pub enum VrfTreeMsg {
+    SelectionChange,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct VrfData {
+    route_target: EvpnRouteTarget,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct FdbData {
+    vrf_route_target: EvpnRouteTarget,
+    route_target: EvpnRouteTarget,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct RemoteData {
+    remote: String,
+    zone: String,
+    vnet: String,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+enum VrfTreeEntry {
+    Root,
+    Vrf(VrfData),
+    Fdb(FdbData),
+    Remote(RemoteData),
+}
+
+impl VrfTreeEntry {
+    fn vni(&self) -> Option<u32> {
+        match self {
+            VrfTreeEntry::Vrf(vrf) => Some(vrf.route_target.vni),
+            VrfTreeEntry::Fdb(fdb) => Some(fdb.route_target.vni),
+            _ => None,
+        }
+    }
+
+    fn asn(&self) -> Option<u32> {
+        match self {
+            VrfTreeEntry::Vrf(vrf) => Some(vrf.route_target.asn),
+            _ => None,
+        }
+    }
+
+    fn heading(&self) -> Option<String> {
+        Some(match self {
+            VrfTreeEntry::Root => return None,
+            VrfTreeEntry::Vrf(_) => "IP-VRF".to_string(),
+            VrfTreeEntry::Fdb(_) => "VNet".to_string(),
+            VrfTreeEntry::Remote(remote) => remote.vnet.clone(),
+        })
+    }
+}
+
+impl ExtractPrimaryKey for VrfTreeEntry {
+    fn extract_key(&self) -> Key {
+        match self {
+            Self::Root => Key::from("root"),
+            Self::Vrf(vrf) => Key::from(vrf.route_target.to_string()),
+            Self::Fdb(fdb) => Key::from(format!("{}/{}", fdb.vrf_route_target, fdb.route_target)),
+            Self::Remote(remote) => {
+                Key::from(format!("{}/{}/{}", remote.remote, remote.zone, remote.vnet,))
+            }
+        }
+    }
+}
+
+fn zones_to_vrf_view(
+    controllers: &[ListController],
+    zones: &[ListZone],
+    vnets: &[ListVnet],
+) -> SlabTree<VrfTreeEntry> {
+    let mut tree = SlabTree::new();
+
+    let mut root = tree.set_root(VrfTreeEntry::Root);
+    root.set_expanded(true);
+
+    let mut existing_vrfs: HashSet<EvpnRouteTarget> = HashSet::new();
+
+    for zone in zones {
+        let zone_data = &zone.zone;
+
+        let controller = controllers
+            .iter()
+            .find(|controller| {
+                controller.remote == zone.remote
+                    && zone_data
+                        .controller
+                        .as_ref()
+                        .expect("EVPN zone has a controller")
+                        == &controller.controller.controller
+            })
+            .expect("controller of EVPN zone exists");
+
+        let route_target = EvpnRouteTarget {
+            asn: controller
+                .controller
+                .asn
+                .expect("EVPN controller as an ASN"),
+            vni: zone.zone.vrf_vxlan.expect("EVPN zone has a VXLAN ID"),
+        };
+
+        if !existing_vrfs.insert(route_target) {
+            continue;
+        }
+
+        let mut vrf_entry = root.append(VrfTreeEntry::Vrf(VrfData { route_target }));
+        vrf_entry.set_expanded(true);
+    }
+
+    for vnet in vnets {
+        let vnet_data = &vnet.vnet;
+
+        let zone = zones
+            .iter()
+            .find(|zone| {
+                zone.remote == vnet.remote
+                    && vnet_data.zone.as_ref().expect("vnet has zone") == &zone.zone.zone
+            })
+            .expect("zone of vnet exists");
+
+        let controller = controllers
+            .iter()
+            .find(|controller| {
+                controller.remote == zone.remote
+                    && zone
+                        .zone
+                        .controller
+                        .as_ref()
+                        .expect("EVPN zone has a controller")
+                        == &controller.controller.controller
+            })
+            .expect("controller of EVPN zone exists");
+
+        let zone_target = EvpnRouteTarget {
+            asn: controller.controller.asn.expect("EVPN controller has ASN"),
+            vni: zone.zone.vrf_vxlan.expect("EVPN zone has a VRF VNI"),
+        };
+
+        let vnet_target = EvpnRouteTarget {
+            asn: controller.controller.asn.expect("EVPN controller has ASN"),
+            vni: vnet.vnet.tag.expect("EVPN vnet has a VNI"),
+        };
+
+        for mut vrf_entry in root.children_mut() {
+            if let VrfTreeEntry::Vrf(vrf_data) = vrf_entry.record() {
+                if vrf_data.route_target != zone_target {
+                    continue;
+                }
+
+                let searched_entry = vrf_entry.children_mut().find(|entry| {
+                    if let VrfTreeEntry::Fdb(fdb_data) = entry.record() {
+                        return fdb_data.route_target == vnet_target;
+                    }
+
+                    false
+                });
+
+                let mut fdb_entry = if let Some(fdb_entry) = searched_entry {
+                    fdb_entry
+                } else {
+                    let fdb_entry = vrf_entry.append(VrfTreeEntry::Fdb(FdbData {
+                        vrf_route_target: zone_target,
+                        route_target: vnet_target,
+                    }));
+
+                    fdb_entry
+                };
+
+                fdb_entry.append(VrfTreeEntry::Remote(RemoteData {
+                    remote: vnet.remote.clone(),
+                    zone: vnet.vnet.zone.clone().expect("vnet has a zone"),
+                    vnet: vnet.vnet.vnet.clone(),
+                }));
+            }
+        }
+    }
+
+    tree
+}
+
+pub struct VrfTreeComponent {
+    store: TreeStore<VrfTreeEntry>,
+    selection: Selection,
+}
+
+fn default_sorter(a: &VrfTreeEntry, b: &VrfTreeEntry) -> Ordering {
+    (a.asn(), a.vni()).cmp(&(b.asn(), b.vni()))
+}
+
+impl VrfTreeComponent {
+    fn columns(store: TreeStore<VrfTreeEntry>) -> Rc<Vec<DataTableHeader<VrfTreeEntry>>> {
+        Rc::new(vec![
+            DataTableColumn::new(tr!("Type / Name"))
+                .tree_column(store)
+                .render(|item: &VrfTreeEntry| {
+                    let heading = item.heading();
+
+                    heading
+                        .map(|heading| {
+                            let mut row = Row::new().class(css::AlignItems::Baseline).gap(2);
+
+                            row = match item {
+                                VrfTreeEntry::Vrf(_) => row.with_child(Fa::new("th")),
+                                VrfTreeEntry::Fdb(_) => row.with_child(Fa::new("sdn-vnet")),
+                                _ => row,
+                            };
+
+                            row = row.with_child(heading);
+
+                            Html::from(row)
+                        })
+                        .unwrap_or_default()
+                })
+                .sorter(default_sorter)
+                .into(),
+            DataTableColumn::new(tr!("ASN"))
+                .render(|item: &VrfTreeEntry| item.asn().map(VNode::from).unwrap_or_default())
+                .sorter(|a: &VrfTreeEntry, b: &VrfTreeEntry| a.asn().cmp(&b.asn()))
+                .into(),
+            DataTableColumn::new(tr!("VNI"))
+                .render(|item: &VrfTreeEntry| item.vni().map(VNode::from).unwrap_or_default())
+                .sorter(|a: &VrfTreeEntry, b: &VrfTreeEntry| a.vni().cmp(&b.vni()))
+                .into(),
+            DataTableColumn::new(tr!("Zone"))
+                .get_property(|item: &VrfTreeEntry| match item {
+                    VrfTreeEntry::Remote(remote) => remote.zone.as_str(),
+                    _ => "",
+                })
+                .into(),
+            DataTableColumn::new(tr!("Remote"))
+                .get_property(|item: &VrfTreeEntry| match item {
+                    VrfTreeEntry::Remote(remote) => remote.remote.as_str(),
+                    _ => "",
+                })
+                .into(),
+        ])
+    }
+}
+
+impl Component for VrfTreeComponent {
+    type Properties = VrfTree;
+    type Message = VrfTreeMsg;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let store = TreeStore::new().view_root(false);
+
+        let data = zones_to_vrf_view(
+            &ctx.props().controllers,
+            &ctx.props().zones,
+            &ctx.props().vnets,
+        );
+
+        store.set_data(data);
+        store.set_sorter(default_sorter);
+
+        let selection =
+            Selection::new().on_select(ctx.link().callback(|_| Self::Message::SelectionChange));
+
+        Self { store, selection }
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        let columns = Self::columns(self.store.clone());
+
+        let table = DataTable::new(columns, self.store.clone())
+            .striped(false)
+            .selection(self.selection.clone())
+            .row_render_callback(|args: &mut DataTableRowRenderArgs<VrfTreeEntry>| {
+                if let VrfTreeEntry::Vrf(_) = args.record() {
+                    args.add_class("pwt-bg-color-surface");
+                }
+            })
+            .class(css::FlexFit);
+
+        Column::new()
+            .class(pwt::css::FlexFit)
+            .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)
+            || !Rc::ptr_eq(&ctx.props().vnets, &old_props.vnets)
+            || !Rc::ptr_eq(&ctx.props().controllers, &old_props.controllers)
+        {
+            let data = zones_to_vrf_view(
+                &ctx.props().controllers,
+                &ctx.props().zones,
+                &ctx.props().vnets,
+            );
+
+            self.store.set_data(data);
+            self.store.set_sorter(default_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.47.2


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