From: Stefan Hanreich <s.hanreich@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [pdm-devel] [PATCH proxmox-datacenter-manager 5/5] sdn: evpn: add detail panel to the evpn panel
Date: Fri, 7 Nov 2025 09:59:28 +0100 [thread overview]
Message-ID: <20251107085934.118815-9-s.hanreich@proxmox.com> (raw)
In-Reply-To: <20251107085934.118815-1-s.hanreich@proxmox.com>
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| {
+ 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(
--
2.47.3
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
prev parent reply other threads:[~2025-11-07 8:59 UTC|newest]
Thread overview: 9+ 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-07 8:59 ` [pdm-devel] [PATCH proxmox-datacenter-manager 4/5] ui: sdn: evpn: add vnet " Stefan Hanreich
2025-11-07 8:59 ` Stefan Hanreich [this message]
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=20251107085934.118815-9-s.hanreich@proxmox.com \
--to=s.hanreich@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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.