From: "Lukas Wagner" <l.wagner@proxmox.com>
To: "Proxmox Datacenter Manager development discussion"
<pdm-devel@lists.proxmox.com>
Subject: Re: [pdm-devel] [PATCH proxmox-datacenter-manager 5/5] sdn: evpn: add detail panel to the evpn panel
Date: Tue, 18 Nov 2025 15:13:02 +0100 [thread overview]
Message-ID: <DEBVS2QUWJ4B.A384TYI0JT7X@proxmox.com> (raw)
In-Reply-To: <20251107085934.118815-9-s.hanreich@proxmox.com>
One note inline.
Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>
On Fri Nov 7, 2025 at 9:59 AM CET, Stefan Hanreich wrote:
> Extend the EVPN panel, so it can display detailed information about
> selected elements in the trees. When selecting a specific zone / vnet,
> the detail panel will show the IP / MAC-VRF of that zone / vnet. This
> requires some refactoring of the existing EVPN panel to allow
> displaying a second panel next to it. It is now structured like the
> remote view, which also offers a panel that shows an overview of the
> remote and details of the selected node.
>
> Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
> ---
> ui/src/sdn/evpn/evpn_panel.rs | 129 ++++++++++++++++++++++++++++++---
> ui/src/sdn/evpn/remote_tree.rs | 71 +++++++++++++-----
> ui/src/sdn/evpn/vrf_tree.rs | 29 +++++++-
> 3 files changed, 196 insertions(+), 33 deletions(-)
>
> diff --git a/ui/src/sdn/evpn/evpn_panel.rs b/ui/src/sdn/evpn/evpn_panel.rs
> index 89e2e58..31c8795 100644
> --- a/ui/src/sdn/evpn/evpn_panel.rs
> +++ b/ui/src/sdn/evpn/evpn_panel.rs
> @@ -1,5 +1,6 @@
> use futures::try_join;
> use std::rc::Rc;
> +use std::str::FromStr;
>
> use anyhow::Error;
> use yew::virtual_dom::{VComp, VNode};
> @@ -9,14 +10,20 @@ use pdm_client::types::{ListController, ListControllersType, ListVnet, ListZone,
> use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
>
> use pwt::css::{AlignItems, FlexFit, JustifyContent};
> -use pwt::props::{ContainerBuilder, EventSubscriber, StorageLocation, WidgetBuilder};
> -use pwt::state::NavigationContainer;
> +use pwt::props::{
> + ContainerBuilder, EventSubscriber, StorageLocation, WidgetBuilder, WidgetStyleBuilder,
> +};
> +use pwt::state::{NavigationContainer, Selection};
> use pwt::tr;
> use pwt::widget::menu::{Menu, MenuButton, MenuItem};
> -use pwt::widget::{Button, Column, MiniScrollMode, TabBarItem, TabPanel, Toolbar};
> +use pwt::widget::{
> + Button, Column, Container, MiniScrollMode, Panel, Row, TabBarItem, TabPanel, Toolbar,
> +};
>
> use crate::pdm_client;
> -use crate::sdn::evpn::{AddVnetWindow, AddZoneWindow, RemoteTree, VrfTree};
> +use crate::sdn::evpn::{
> + AddVnetWindow, AddZoneWindow, NodeList, RemoteTree, VnetStatusTable, VrfTree, ZoneStatusTable,
> +};
>
> #[derive(PartialEq, Properties)]
> pub struct EvpnPanel {}
> @@ -40,6 +47,11 @@ impl From<EvpnPanel> for VNode {
> }
> }
>
> +pub enum DetailPanel {
> + Zone { remote: String, zone: String },
> + Vnet { remote: String, vnet: String },
> +}
> +
> pub enum EvpnPanelMsg {
> Reload,
> LoadFinished {
> @@ -47,6 +59,7 @@ pub enum EvpnPanelMsg {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> },
> + DetailSelection(Option<DetailPanel>),
> }
>
> #[derive(Debug, PartialEq)]
> @@ -82,6 +95,8 @@ pub struct EvpnPanelComponent {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> initial_load: bool,
> + selected_detail: Option<DetailPanel>,
> + selected_tab: Selection,
> }
>
> impl EvpnPanelComponent {
> @@ -123,12 +138,19 @@ impl LoadableComponent for EvpnPanelComponent {
> type Message = EvpnPanelMsg;
> type ViewState = EvpnPanelViewState;
>
> - fn create(_ctx: &LoadableComponentContext<Self>) -> Self {
> + fn create(ctx: &LoadableComponentContext<Self>) -> Self {
> + let link = ctx.link().clone();
> +
> + let selected_tab = Selection::new()
> + .on_select(move |_| link.send_message(Self::Message::DetailSelection(None)));
> +
> Self {
> initial_load: true,
> controllers: Default::default(),
> zones: Default::default(),
> vnets: Default::default(),
> + selected_detail: None,
> + selected_tab,
> }
> }
>
> @@ -166,6 +188,10 @@ impl LoadableComponent for EvpnPanelComponent {
>
> return true;
> }
> + Self::Message::DetailSelection(data) => {
> + self.selected_detail = data;
> + return true;
> + }
> Self::Message::Reload => {
> ctx.link().send_reload();
> }
> @@ -175,11 +201,12 @@ impl LoadableComponent for EvpnPanelComponent {
> }
>
> fn main_view(&self, ctx: &LoadableComponentContext<Self>) -> Html {
> - let panel = TabPanel::new()
> + let tab_panel = TabPanel::new()
> .state_id(StorageLocation::session("EvpnPanelState"))
> .class(pwt::css::FlexFit)
> .router(true)
> .scroll_mode(MiniScrollMode::Arrow)
> + .selection(self.selected_tab.clone())
> .with_item(
> TabBarItem::new()
> .key("remotes")
> @@ -201,6 +228,9 @@ impl LoadableComponent for EvpnPanelComponent {
> self.zones.clone(),
> self.vnets.clone(),
> self.controllers.clone(),
> + ctx.link().callback(|panel: Option<DetailPanel>| {
> + Self::Message::DetailSelection(panel)
> + }),
> ))
> }),
> )
> @@ -225,16 +255,93 @@ impl LoadableComponent for EvpnPanelComponent {
> self.zones.clone(),
> self.vnets.clone(),
> self.controllers.clone(),
> + ctx.link().callback(|panel: Option<DetailPanel>| {
> + Self::Message::DetailSelection(panel)
> + }),
> ))
> }),
> );
>
> - let navigation_container = NavigationContainer::new().with_child(panel);
> + let navigation_container = NavigationContainer::new().with_child(tab_panel);
> +
> + let mut container = Container::new()
> + .class("pwt-content-spacer")
> + .class(FlexFit)
> + .class("pwt-flex-direction-row")
> + .with_child(Panel::new().flex(1.0).with_child(navigation_container));
> +
> + let (title, detail_html) = if let Some(detail) = &self.selected_detail {
> + match detail {
> + DetailPanel::Vnet {
> + remote,
> + vnet: vnet_id,
> + } => {
> + let vnet = self.vnets.iter().find(|list_vnet| {
> + list_vnet.vnet.vnet.as_str() == vnet_id.as_str()
> + && list_vnet.remote.as_str() == remote
> + });
> +
> + if let Some(vnet) = vnet {
> + let zone = self.zones.iter().find(|list_zone| {
Maybe add a comment why it is safe to use .unwrap() here - assuming that
it is?
> + list_zone.zone.zone.as_str() == vnet.vnet.zone.as_ref().unwrap()
> + && list_zone.remote.as_str() == remote.as_str()
> + });
> +
> + let node_list = zone.as_ref().and_then(|zone| {
> + let nodes = zone.zone.nodes.as_ref()?;
> + NodeList::from_str(nodes).ok()
> + });
> +
> + (
> + Some(format!("MAC-VRF for vnet '{vnet_id}' (Remote {remote})")),
> + VnetStatusTable::new(remote.clone(), vnet_id.clone(), node_list).into(),
> + )
> + } else {
> + (None, html! {"Could not find vnet {vnet_id}!"})
> + }
> + }
> + DetailPanel::Zone {
> + remote,
> + zone: zone_id,
> + } => {
> + let zone = self.zones.iter().find(|list_zone| {
> + list_zone.zone.zone.as_str() == zone_id.as_str()
> + && list_zone.remote.as_str() == remote.as_str()
> + });
> +
> + let node_list = zone.as_ref().and_then(|zone| {
> + let nodes = zone.zone.nodes.as_ref()?;
> + NodeList::from_str(nodes).ok()
> + });
> +
> + (
> + Some(format!("IP-VRF for zone '{zone_id}' (Remote {remote})")),
> + ZoneStatusTable::new(remote.clone(), zone_id.clone(), node_list).into(),
> + )
> + }
> + }
> + } else {
> + (
> + None,
> + Row::new()
> + .class(pwt::css::FlexFit)
> + .class(pwt::css::JustifyContent::Center)
> + .class(pwt::css::AlignItems::Center)
> + .with_child(html! { tr!("Select a Zone or VNet for more details.") })
> + .into(),
> + )
> + };
>
> - Column::new()
> - .class(pwt::css::FlexFit)
> - .with_child(navigation_container)
> - .into()
> + let mut panel = Panel::new().width(600);
> +
> + if let Some(title) = title {
> + panel.set_title(title);
> + }
> +
> + panel.add_child(detail_html);
> + container.add_child(panel);
> +
> + container.into()
> }
>
> fn dialog_view(
> diff --git a/ui/src/sdn/evpn/remote_tree.rs b/ui/src/sdn/evpn/remote_tree.rs
> index 1799917..ee57b33 100644
> --- a/ui/src/sdn/evpn/remote_tree.rs
> +++ b/ui/src/sdn/evpn/remote_tree.rs
> @@ -6,7 +6,7 @@ use std::str::FromStr;
> use anyhow::{anyhow, Error};
> use pwt::widget::{error_message, Column};
> use yew::virtual_dom::{Key, VNode};
> -use yew::{Component, Context, Html, Properties};
> +use yew::{Callback, Component, Context, Html, Properties};
>
> use pdm_client::types::{ListController, ListVnet, ListZone, SdnObjectState};
> use pwt::css;
> @@ -19,14 +19,16 @@ use pwt::widget::data_table::{
> use pwt::widget::{Fa, Row};
> use pwt_macros::widget;
>
> +use crate::sdn::evpn::evpn_panel::DetailPanel;
> use crate::sdn::evpn::EvpnRouteTarget;
>
> #[widget(comp=RemoteTreeComponent)]
> -#[derive(Clone, PartialEq, Properties, Default)]
> +#[derive(Clone, PartialEq, Properties)]
> pub struct RemoteTree {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> controllers: Rc<Vec<ListController>>,
> + on_select: Callback<Option<DetailPanel>>,
> }
>
> impl RemoteTree {
> @@ -34,11 +36,13 @@ impl RemoteTree {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> controllers: Rc<Vec<ListController>>,
> + on_select: Callback<Option<DetailPanel>>,
> ) -> Self {
> yew::props!(Self {
> zones,
> vnets,
> controllers,
> + on_select,
> })
> }
> }
> @@ -416,7 +420,34 @@ impl Component for RemoteTreeComponent {
> let store = TreeStore::new().view_root(false);
> let columns = Self::columns(store.clone());
>
> - let selection = Selection::new();
> + let on_select = ctx.props().on_select.clone();
> + let selection_store = store.clone();
> + let selection = Selection::new().on_select(move |selection: Selection| {
> + if let Some(selected_key) = selection.selected_key() {
> + let read_guard = selection_store.read();
> +
> + if let Some(node) = read_guard.lookup_node(&selected_key) {
> + match node.record() {
> + RemoteTreeEntry::Zone(zone) => {
> + on_select.emit(Some(DetailPanel::Zone {
> + remote: zone.remote.clone(),
> + zone: zone.id.clone(),
> + }));
> + }
> + RemoteTreeEntry::Vnet(vnet) => {
> + on_select.emit(Some(DetailPanel::Vnet {
> + remote: vnet.remote.clone(),
> + vnet: vnet.id.clone(),
> + }));
> + }
> + _ => on_select.emit(None),
> + }
> + }
> + } else {
> + on_select.emit(None);
> + }
> + });
> +
> let mut error_msg = None;
>
> match zones_to_remote_view(
> @@ -442,27 +473,27 @@ impl Component for RemoteTreeComponent {
> }
>
> fn view(&self, _ctx: &Context<Self>) -> Html {
> - let table = DataTable::new(self.columns.clone(), 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);
> -
> - let mut column = Column::new().class(pwt::css::FlexFit).with_child(table);
> + let mut table_column = Column::new().class(pwt::css::FlexFit).with_child(
> + DataTable::new(self.columns.clone(), 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),
> + );
>
> if let Some(msg) = &self.error_msg {
> - column.add_child(error_message(msg.as_ref()));
> + table_column.add_child(error_message(msg.as_ref()));
> }
>
> - column.into()
> + table_column.into()
> }
>
> fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
> diff --git a/ui/src/sdn/evpn/vrf_tree.rs b/ui/src/sdn/evpn/vrf_tree.rs
> index 0de4145..8481dfc 100644
> --- a/ui/src/sdn/evpn/vrf_tree.rs
> +++ b/ui/src/sdn/evpn/vrf_tree.rs
> @@ -4,7 +4,7 @@ use std::rc::Rc;
>
> use anyhow::{anyhow, Error};
> use yew::virtual_dom::{Key, VNode};
> -use yew::{Component, Context, Html, Properties};
> +use yew::{Callback, Component, Context, Html, Properties};
>
> use pdm_client::types::{ListController, ListVnet, ListZone};
> use pwt::css;
> @@ -17,6 +17,7 @@ use pwt::widget::data_table::{
> use pwt::widget::{error_message, Column, Fa, Row};
> use pwt_macros::widget;
>
> +use crate::sdn::evpn::evpn_panel::DetailPanel;
> use crate::sdn::evpn::EvpnRouteTarget;
>
> #[widget(comp=VrfTreeComponent)]
> @@ -25,6 +26,7 @@ pub struct VrfTree {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> controllers: Rc<Vec<ListController>>,
> + on_select: Callback<Option<DetailPanel>>,
> }
>
> impl VrfTree {
> @@ -32,11 +34,13 @@ impl VrfTree {
> zones: Rc<Vec<ListZone>>,
> vnets: Rc<Vec<ListVnet>>,
> controllers: Rc<Vec<ListController>>,
> + on_select: Callback<Option<DetailPanel>>,
> ) -> Self {
> yew::props!(Self {
> zones,
> vnets,
> controllers,
> + on_select,
> })
> }
> }
> @@ -333,7 +337,28 @@ impl Component for VrfTreeComponent {
> let store = TreeStore::new().view_root(false);
> let columns = Self::columns(store.clone());
>
> - let selection = Selection::new();
> + let on_select = ctx.props().on_select.clone();
> + let selection_store = store.clone();
> + let selection = Selection::new().on_select(move |selection: Selection| {
> + if let Some(selected_key) = selection.selected_key() {
> + let read_guard = selection_store.read();
> +
> + if let Some(node) = read_guard.lookup_node(&selected_key) {
> + match node.record() {
> + VrfTreeEntry::Remote(remote) => {
> + on_select.emit(Some(DetailPanel::Vnet {
> + remote: remote.remote.clone(),
> + vnet: remote.vnet.clone(),
> + }));
> + }
> + _ => on_select.emit(None),
> + }
> + }
> + } else {
> + on_select.emit(None);
> + }
> + });
> +
> let mut error_msg = None;
>
> match zones_to_vrf_view(
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
next prev parent reply other threads:[~2025-11-18 14:13 UTC|newest]
Thread overview: 15+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-11-07 8:59 [pdm-devel] [PATCH proxmox{, -datacenter-manager} 0/8] Integration of IP-VRF and MAC-VRF status to EVPN panel Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox 1/3] pve-api-types: add zone / vnet status reporting endpoints Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox 2/3] pve-api-types: generate ip-vrf / mac-vrf endpoints Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox 3/3] pve-api-types: regenerate Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 1/5] server: api: sdn: add ip-vrf endpoint Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 2/5] server: api: sdn: add mac-vrf endpoint Stefan Hanreich
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 3/5] ui: sdn: evpn: add zone status panel Stefan Hanreich
2025-11-18 14:12 ` Lukas Wagner
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 4/5] ui: sdn: evpn: add vnet " Stefan Hanreich
2025-11-18 14:12 ` Lukas Wagner
2025-11-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 5/5] sdn: evpn: add detail panel to the evpn panel Stefan Hanreich
2025-11-18 14:13 ` Lukas Wagner [this message]
2025-11-19 12:16 ` Stefan Hanreich
2025-11-12 16:18 ` [pdm-devel] [PATCH proxmox{, -datacenter-manager} 0/8] Integration of IP-VRF and MAC-VRF status to EVPN panel Hannes Duerr
2025-11-18 14:14 ` Lukas Wagner
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=DEBVS2QUWJ4B.A384TYI0JT7X@proxmox.com \
--to=l.wagner@proxmox.com \
--cc=pdm-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox