From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <pdm-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9])
by lore.proxmox.com (Postfix) with ESMTPS id DC09A1FF164
for <inbox@lore.proxmox.com>; Fri, 28 Feb 2025 16:18:45 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id CC00711FDB;
Fri, 28 Feb 2025 16:18:38 +0100 (CET)
From: Stefan Hanreich <s.hanreich@proxmox.com>
To: pdm-devel@lists.proxmox.com
Date: Fri, 28 Feb 2025 16:17:57 +0100
Message-Id: <20250228151803.158984-21-s.hanreich@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20250228151803.158984-1-s.hanreich@proxmox.com>
References: <20250228151803.158984-1-s.hanreich@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.224 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
KAM_LAZY_DOMAIN_SECURITY 1 Sending domain does not have any anti-forgery
methods
RDNS_NONE 0.793 Delivered to internal network by a host with no rDNS
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_NONE 0.001 SPF: sender does not publish an SPF Record
Subject: [pdm-devel] [PATCH proxmox-datacenter-manager 07/13] ui: add
VrfTree component
X-BeenThere: pdm-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Datacenter Manager development discussion
<pdm-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pdm-devel/>
List-Post: <mailto:pdm-devel@lists.proxmox.com>
List-Help: <mailto:pdm-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel>,
<mailto:pdm-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox Datacenter Manager development discussion
<pdm-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pdm-devel-bounces@lists.proxmox.com
Sender: "pdm-devel" <pdm-devel-bounces@lists.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