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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox