[pdm-devel] [PATCH proxmox-datacenter-manager 11/16] ui: add view for showing ip vrfs
Dominik Csapak
d.csapak at proxmox.com
Thu Aug 28 09:15:27 CEST 2025
here i have the same comments regarding columns/selection change message
and tree update as in the last patch
On 8/27/25 1:40 PM, Stefan Hanreich wrote:
> 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 at proxmox.com>
> ---
> ui/src/lib.rs | 2 +
> ui/src/sdn/evpn/mod.rs | 3 +
> ui/src/sdn/evpn/vrf_tree.rs | 415 ++++++++++++++++++++++++++++++++++++
> ui/src/sdn/mod.rs | 1 +
> 4 files changed, 421 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..cc9528a
> --- /dev/null
> +++ b/ui/src/sdn/evpn/vrf_tree.rs
> @@ -0,0 +1,415 @@
> +use std::cmp::Ordering;
> +use std::collections::HashSet;
> +use std::rc::Rc;
> +
> +use anyhow::{format_err, Error};
> +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::{error_message, 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],
> +) -> Result<SlabTree<VrfTreeEntry>, Error> {
> + 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 zone_controller_id = zone_data.controller.as_ref().ok_or_else(|| {
> + format_err!("EVPN zone {} has no controller defined!", &zone_data.zone)
> + })?;
> +
> + let controller = controllers
> + .iter()
> + .find(|controller| {
> + controller.remote == zone.remote
> + && zone_controller_id == &controller.controller.controller
> + })
> + .ok_or_else(|| {
> + format_err!("Controller of EVPN zone {} does not exist", zone_data.zone)
> + })?;
> +
> + let controller_asn = controller.controller.asn.ok_or_else(|| {
> + format_err!(
> + "EVPN controller {} has no ASN defined!",
> + controller.controller.controller
> + )
> + })?;
> +
> + let route_target = EvpnRouteTarget {
> + asn: controller_asn,
> + vni: zone
> + .zone
> + .vrf_vxlan
> + .ok_or_else(|| format_err!("EVPN Zone {} has no VRF VNI", zone_data.zone))?,
> + };
> +
> + 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 vnet_zone_id = vnet_data
> + .zone
> + .as_ref()
> + .ok_or_else(|| format_err!("VNet {} has no zone defined!", vnet_data.vnet))?;
> +
> + let Some(zone) = zones
> + .iter()
> + .find(|zone| {
> + zone.remote == vnet.remote
> + && vnet_zone_id == &zone.zone.zone
> + }) else {
> + // this VNet is not part of an EVPN zone, skip it
> + continue;
> + };
> +
> + let zone_controller_id = zone.zone.controller.as_ref().ok_or_else(|| {
> + format_err!("EVPN zone {} has no controller defined!", &zone.zone.zone)
> + })?;
> +
> + let controller = controllers
> + .iter()
> + .find(|controller| {
> + controller.remote == zone.remote
> + && zone_controller_id == &controller.controller.controller
> + })
> + .ok_or_else(|| {
> + format_err!("Controller of EVPN zone {} does not exist", zone.zone.zone)
> + })?;
> +
> + let controller_asn = controller.controller.asn.ok_or_else(|| {
> + format_err!(
> + "EVPN controller {} has no ASN defined!",
> + controller.controller.controller
> + )
> + })?;
> +
> + let zone_target = EvpnRouteTarget {
> + asn: controller_asn,
> + vni: zone
> + .zone
> + .vrf_vxlan
> + .ok_or_else(|| format_err!("EVPN Zone {} has no VRF VNI", zone.zone.zone))?,
> + };
> +
> + let vnet_target = EvpnRouteTarget {
> + asn: controller_asn,
> + vni: vnet_data
> + .tag
> + .ok_or_else(|| format_err!("VNet {} has no VNI", vnet_data.vnet))?,
> + };
> +
> + 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
> + };
> +
> + let vnet_zone =
> + vnet.vnet.zone.as_ref().ok_or_else(|| {
> + format_err!("VNet {} has no zone defined!", vnet.vnet.vnet)
> + })?;
> +
> + fdb_entry.append(VrfTreeEntry::Remote(RemoteData {
> + remote: vnet.remote.clone(),
> + zone: vnet_zone.clone(),
> + vnet: vnet.vnet.vnet.clone(),
> + }));
> + }
> + }
> + }
> +
> + Ok(tree)
> +}
> +
> +pub struct VrfTreeComponent {
> + store: TreeStore<VrfTreeEntry>,
> + selection: Selection,
> + error_msg: Option<String>,
> +}
> +
> +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 selection =
> + Selection::new().on_select(ctx.link().callback(|_| Self::Message::SelectionChange));
seems unused
> +
> + let mut error_msg = None;
> +
> + match zones_to_vrf_view(
> + &ctx.props().controllers,
> + &ctx.props().zones,
> + &ctx.props().vnets,
> + ) {
> + Ok(data) => {
> + store.set_data(data);
> + store.set_sorter(default_sorter);
> + }
> + Err(error) => {
> + error_msg = Some(error.to_string());
> + }
> + }
> +
> + Self {
> + store,
> + selection,
> + error_msg,
> + }
> + }
> +
> + fn view(&self, _ctx: &Context<Self>) -> Html {
> + let columns = Self::columns(self.store.clone());
could be saved in the component
> +
> + 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);
> +
> + let mut column = Column::new().class(pwt::css::FlexFit).with_child(table);
> +
> + if let Some(msg) = &self.error_msg {
> + column.add_child(error_message(msg.as_ref()));
> + }
> +
> + column.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)
> + {
> + match zones_to_vrf_view(
> + &ctx.props().controllers,
> + &ctx.props().zones,
> + &ctx.props().vnets,
> + ) {
> + Ok(data) => {
> + let expanded_state = self
> + .store
> + .read()
> + .root()
> + .map(|root| root.extract_expanded_state());
> +
> + self.store.set_data(data);
> +
> + if let Some(expanded_state) = expanded_state {
> + if let Some(mut root) = self.store.write().root_mut() {
> + root.apply_expanded_state(&expanded_state);
> + }
> + }
can be done with update_root_tree
> +
> + self.store.set_sorter(default_sorter);
> +
> + self.error_msg = None;
> + }
> + Err(error) => {
> + self.error_msg = Some(error.to_string());
> + }
> + }
> +
> + 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;
More information about the pdm-devel
mailing list