[pdm-devel] [PATCH proxmox-datacenter-manager v2 09/15] ui: sdn: add remote tree component

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

This component shows the current state of all EVPN zones across all
remotes. It shows which zones are configured on a remote and which
VNets it contains. It also shows which remote VNets get imported via
the 'Import Route Target' setting in the EVPN zone. While the ZoneTree
component shows the contents of an IP-VRF merged across all remotes,
the RemoteTree shows the contents of a specific zone on a specific
remote, including all imported VNets.

Similar to the ZoneTree component, this component operates under the
assumption that ASNs are not reused across different remotes, unless
those zones are actually interconnected. For example: One zone imports
a specific ASN:VNI route target. If two zones with the same ASN:VNI
combination exist, but only one of them is connected to the zone, it
will still show the VNets of *both* zones as imported, since it merges
based on ASN:VNI.

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

diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
index 2515354..c2958f0 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -1,3 +1,6 @@
+mod remote_tree;
+pub use remote_tree::RemoteTree;
+
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Ord, PartialOrd, Hash)]
 pub struct EvpnRouteTarget {
     asn: u32,
diff --git a/ui/src/sdn/evpn/remote_tree.rs b/ui/src/sdn/evpn/remote_tree.rs
new file mode 100644
index 0000000..e4b0fe4
--- /dev/null
+++ b/ui/src/sdn/evpn/remote_tree.rs
@@ -0,0 +1,403 @@
+use std::cmp::Ordering;
+use std::collections::HashSet;
+use std::rc::Rc;
+use std::str::FromStr;
+
+use anyhow::Error;
+use pwt::widget::Column;
+use yew::virtual_dom::{Key, VNode};
+use yew::{Component, Context, Html, Properties};
+
+use pdm_client::types::{ListController, ListVnet, ListZone, SdnObjectState};
+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::{Fa, Row};
+use pwt_macros::widget;
+
+use crate::sdn::evpn::EvpnRouteTarget;
+
+#[widget(comp=RemoteTreeComponent)]
+#[derive(Clone, PartialEq, Properties, Default)]
+pub struct RemoteTree {
+    zones: Rc<Vec<ListZone>>,
+    vnets: Rc<Vec<ListVnet>>,
+    controllers: Rc<Vec<ListController>>,
+}
+
+impl RemoteTree {
+    pub fn new(
+        zones: Rc<Vec<ListZone>>,
+        vnets: Rc<Vec<ListVnet>>,
+        controllers: Rc<Vec<ListController>>,
+    ) -> Self {
+        yew::props!(Self {
+            zones,
+            vnets,
+            controllers,
+        })
+    }
+}
+
+pub enum RemoteTreeMsg {
+    SelectionChange,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct RemoteData {
+    id: String,
+    asn: u32,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct ZoneData {
+    id: String,
+    remote: String,
+    route_target: EvpnRouteTarget,
+    import_targets: HashSet<EvpnRouteTarget>,
+    state: Option<SdnObjectState>,
+    controller_id: String,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+struct VnetData {
+    parent_remote: String,
+    parent_zone: String,
+    id: String,
+    zone: String,
+    remote: String,
+    route_target: EvpnRouteTarget,
+    imported: bool,
+    external: bool,
+    state: Option<SdnObjectState>,
+}
+
+#[derive(Clone, PartialEq, Debug)]
+enum RemoteTreeEntry {
+    Root,
+    Remote(RemoteData),
+    Zone(ZoneData),
+    Vnet(VnetData),
+}
+
+impl ExtractPrimaryKey for RemoteTreeEntry {
+    fn extract_key(&self) -> Key {
+        match self {
+            Self::Root => Key::from("root"),
+            Self::Remote(remote) => Key::from(remote.id.clone()),
+            Self::Zone(zone) => Key::from(format!("{}/{}", zone.remote, zone.id)),
+            Self::Vnet(vnet) => Key::from(format!(
+                "{}/{}/{}/{}/{}",
+                vnet.remote, vnet.parent_remote, vnet.parent_zone, vnet.zone, vnet.id
+            )),
+        }
+    }
+}
+
+impl RemoteTreeEntry {
+    fn name(&self) -> Option<String> {
+        match self {
+            RemoteTreeEntry::Root => None,
+            RemoteTreeEntry::Remote(remote) => {
+                Some(format!("{} (ASN: {})", &remote.id, remote.asn))
+            }
+            RemoteTreeEntry::Zone(zone) => Some(zone.id.to_string()),
+            RemoteTreeEntry::Vnet(vnet) => Some(vnet.id.to_string()),
+        }
+    }
+
+    fn remote(&self) -> Option<&str> {
+        match self {
+            RemoteTreeEntry::Root => None,
+            RemoteTreeEntry::Remote(remote) => Some(&remote.id),
+            RemoteTreeEntry::Zone(zone) => Some(&zone.remote),
+            RemoteTreeEntry::Vnet(vnet) => Some(&vnet.remote),
+        }
+    }
+
+    fn l2vni(&self) -> Option<u32> {
+        match self {
+            RemoteTreeEntry::Vnet(vnet) => Some(vnet.route_target.vni),
+            _ => None,
+        }
+    }
+
+    fn l3vni(&self) -> Option<u32> {
+        match self {
+            RemoteTreeEntry::Zone(zone) => Some(zone.route_target.vni),
+            _ => None,
+        }
+    }
+}
+
+fn zones_to_vrf_view(
+    controllers: &[ListController],
+    zones: &[ListZone],
+    vnets: &[ListVnet],
+) -> SlabTree<RemoteTreeEntry> {
+    let mut tree = SlabTree::new();
+
+    let mut root = tree.set_root(RemoteTreeEntry::Root);
+    root.set_expanded(true);
+
+    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 has an ASN"),
+            vni: zone.zone.vrf_vxlan.expect("EVPN zone has a VXLAN ID"),
+        };
+
+        let import_targets = zone_data
+            .rt_import
+            .iter()
+            .flat_map(|rt_import| rt_import.split(',').map(EvpnRouteTarget::from_str))
+            .collect::<Result<_, Error>>()
+            .expect("rt_import contains valid route targets");
+
+        let remote_entry = root.children_mut().find(|remote_entry| {
+            if let RemoteTreeEntry::Remote(remote) = remote_entry.record() {
+                return remote.id == zone.remote;
+            }
+
+            false
+        });
+
+        let zone_entry = RemoteTreeEntry::Zone(ZoneData {
+            id: zone_data.zone.clone(),
+            remote: zone.remote.clone(),
+            route_target,
+            import_targets,
+            state: zone_data.state,
+            controller_id: controller.controller.controller.clone(),
+        });
+
+        if let Some(mut remote_entry) = remote_entry {
+            remote_entry.append(zone_entry);
+        } else {
+            let mut new_remote_entry = root.append(RemoteTreeEntry::Remote(RemoteData {
+                id: zone.remote.clone(),
+                asn: route_target.asn,
+            }));
+
+            new_remote_entry.set_expanded(true);
+            new_remote_entry.append(zone_entry);
+        };
+    }
+
+    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("vnet has zone");
+
+        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_data.tag.expect("EVPN vnet has a VNI"),
+        };
+
+        for mut remote_entry in root.children_mut() {
+            for mut zone_entry in remote_entry.children_mut() {
+                if let RemoteTreeEntry::Zone(zone) = zone_entry.record() {
+                    let imported = if zone.route_target == zone_target {
+                        false
+                    } else if zone.import_targets.contains(&zone_target)
+                        || zone.import_targets.contains(&vnet_target)
+                    {
+                        true
+                    } else {
+                        continue;
+                    };
+
+                    zone_entry.append(RemoteTreeEntry::Vnet(VnetData {
+                        id: vnet.vnet.vnet.clone(),
+                        remote: vnet.remote.clone(),
+                        zone: vnet.vnet.zone.clone().unwrap(),
+                        route_target: vnet_target,
+                        imported,
+                        external: zone.remote != vnet.remote,
+                        parent_remote: zone.remote.clone(),
+                        parent_zone: zone.id.clone(),
+                        state: vnet.vnet.state,
+                    }));
+                }
+            }
+        }
+    }
+
+    tree
+}
+pub struct RemoteTreeComponent {
+    store: TreeStore<RemoteTreeEntry>,
+    selection: Selection,
+}
+
+fn name_remote_sorter(a: &RemoteTreeEntry, b: &RemoteTreeEntry) -> Ordering {
+    (a.name(), a.remote()).cmp(&(b.name(), b.remote()))
+}
+
+impl RemoteTreeComponent {
+    fn columns(store: TreeStore<RemoteTreeEntry>) -> Rc<Vec<DataTableHeader<RemoteTreeEntry>>> {
+        Rc::new(vec![
+            DataTableColumn::new(tr!("Name"))
+                .tree_column(store)
+                .sorter(name_remote_sorter)
+                .render(|item: &RemoteTreeEntry| {
+                    let name = item.name();
+
+                    name.map(|name| {
+                        let mut row = Row::new().class(css::AlignItems::Baseline).gap(2);
+
+                        row = match item {
+                            RemoteTreeEntry::Remote(_) => row.with_child(Fa::new("server")),
+                            RemoteTreeEntry::Zone(_) => row.with_child(Fa::new("th")),
+                            _ => row,
+                        };
+
+                        row = row.with_child(name);
+
+                        Html::from(row)
+                    })
+                    .unwrap_or_default()
+                })
+                .into(),
+            DataTableColumn::new(tr!("Remote"))
+                .get_property(|item: &RemoteTreeEntry| match item {
+                    RemoteTreeEntry::Zone(zone) => zone.remote.as_str(),
+                    RemoteTreeEntry::Vnet(vnet) => vnet.remote.as_str(),
+                    _ => "",
+                })
+                .into(),
+            DataTableColumn::new(tr!("L3VNI"))
+                .render(|item: &RemoteTreeEntry| item.l3vni().map(VNode::from).unwrap_or_default())
+                .sorter(|a: &RemoteTreeEntry, b: &RemoteTreeEntry| a.l3vni().cmp(&b.l3vni()))
+                .into(),
+            DataTableColumn::new(tr!("L2VNI"))
+                .render(|item: &RemoteTreeEntry| item.l2vni().map(VNode::from).unwrap_or_default())
+                .sorter(|a: &RemoteTreeEntry, b: &RemoteTreeEntry| a.l2vni().cmp(&b.l2vni()))
+                .into(),
+            DataTableColumn::new(tr!("External"))
+                .get_property_owned(|item: &RemoteTreeEntry| match item {
+                    RemoteTreeEntry::Vnet(vnet) if vnet.external => tr!("Yes"),
+                    RemoteTreeEntry::Vnet(vnet) if !vnet.external => tr!("No"),
+                    _ => String::new(),
+                })
+                .into(),
+            DataTableColumn::new(tr!("Imported"))
+                .get_property_owned(|item: &RemoteTreeEntry| match item {
+                    RemoteTreeEntry::Vnet(vnet) if vnet.imported => tr!("Yes"),
+                    RemoteTreeEntry::Vnet(vnet) if !vnet.imported => tr!("No"),
+                    _ => String::new(),
+                })
+                .into(),
+        ])
+    }
+}
+
+impl Component for RemoteTreeComponent {
+    type Properties = RemoteTree;
+    type Message = RemoteTreeMsg;
+
+    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(name_remote_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<RemoteTreeEntry>| {
+                match args.record() {
+                    RemoteTreeEntry::Vnet(vnet) if vnet.external || vnet.imported => {
+                        args.add_class("pwt-opacity-50");
+                    }
+                    RemoteTreeEntry::Remote(_) => 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(name_remote_sorter);
+
+            return true;
+        }
+
+        false
+    }
+}
-- 
2.47.2


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