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 42B761FF164
for <inbox@lore.proxmox.com>; Fri, 28 Feb 2025 16:19:11 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id B562C12235;
Fri, 28 Feb 2025 16:19:08 +0100 (CET)
From: Stefan Hanreich <s.hanreich@proxmox.com>
To: pdm-devel@lists.proxmox.com
Date: Fri, 28 Feb 2025 16:18:01 +0100
Message-Id: <20250228151803.158984-25-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.226 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 11/13] ui: sdn: add
EvpnPanel
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>
Add a panel that provides an overview of the current state of all EVPN
zones / vnets / controllers of all remotes configured in PDM.
It uses the RouterTable and VrfTree components for rendering the
current state of EVPN on all clusters. This assumes that all zones
with the same VRF VXLAN ID belong to the same VRF instance. This does
not work if an EVPN zone imports routes from VRFs with different VNIs.
In the future, for a more advanced overview, we should incorporate the
information about which route targets get imported from the EVPN
configuration and render the zones accordingly.
The panel stores all the information about the different entities and
passes them to the children as properties, in order to avoid making
the GET calls multiple times, since they're expensive. This can be
changed as soon as we introduce a caching mechanism for those API
endpoints.
When we do this, we can also change to using LoaderCallbacks instead
of just manually invoking the methods of the API client.
Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
ui/src/sdn/evpn/evpn_panel.rs | 249 ++++++++++++++++++++++++++++++++++
ui/src/sdn/evpn/mod.rs | 3 +
2 files changed, 252 insertions(+)
create mode 100644 ui/src/sdn/evpn/evpn_panel.rs
diff --git a/ui/src/sdn/evpn/evpn_panel.rs b/ui/src/sdn/evpn/evpn_panel.rs
new file mode 100644
index 0000000..844ca59
--- /dev/null
+++ b/ui/src/sdn/evpn/evpn_panel.rs
@@ -0,0 +1,249 @@
+use std::rc::Rc;
+
+use anyhow::Error;
+use futures::try_join;
+use pdm_client::types::{
+ CreateVnetParams, CreateZoneParams, ListController, ListControllersType, ListVnet, ListZone,
+ ListZonesType, Remote,
+};
+use pwt::props::{ContainerBuilder, EventSubscriber, SubmitCallback, WidgetBuilder};
+use pwt::tr;
+use pwt::widget::form::FormContext;
+use pwt::widget::{Button, Column, Panel, Toolbar};
+use yew::virtual_dom::{VComp, VNode};
+use yew::{html, Html, Properties};
+
+use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
+
+use crate::pdm_client;
+use crate::sdn::evpn::{AddVnetWindow, AddZoneWindow, RouterTable, VrfTree};
+
+#[derive(PartialEq, Properties)]
+pub struct EvpnPanel {}
+
+impl Default for EvpnPanel {
+ fn default() -> Self {
+ Self::new()
+ }
+}
+
+impl EvpnPanel {
+ pub fn new() -> Self {
+ Self {}
+ }
+}
+
+impl From<EvpnPanel> for VNode {
+ fn from(value: EvpnPanel) -> Self {
+ let comp = VComp::new::<LoadableComponentMaster<EvpnPanelComponent>>(Rc::new(value), None);
+ VNode::from(comp)
+ }
+}
+
+pub enum EvpnPanelMsg {
+ Reload,
+ LoadFinished {
+ remotes: Rc<Vec<Remote>>,
+ controllers: Rc<Vec<ListController>>,
+ zones: Rc<Vec<ListZone>>,
+ vnets: Rc<Vec<ListVnet>>,
+ },
+}
+
+#[derive(Debug, PartialEq)]
+pub enum EvpnPanelViewState {
+ AddVrf,
+ AddVnet,
+}
+
+async fn load_zones() -> Result<Vec<ListZone>, Error> {
+ let client = pdm_client();
+ let data = client
+ .pve_sdn_list_zones(true, false, ListZonesType::Evpn)
+ .await?;
+ Ok(data)
+}
+
+async fn load_controllers() -> Result<Vec<ListController>, Error> {
+ let client = pdm_client();
+ let data = client
+ .pve_sdn_list_controllers(true, false, ListControllersType::Evpn)
+ .await?;
+ Ok(data)
+}
+
+async fn load_remotes() -> Result<Vec<Remote>, Error> {
+ let client = pdm_client();
+ let data = client.list_remotes().await?;
+ Ok(data)
+}
+
+async fn load_vnets() -> Result<Vec<ListVnet>, Error> {
+ let client = pdm_client();
+ let data = client.pve_sdn_list_vnets(true, false).await?;
+ Ok(data)
+}
+
+pub struct EvpnPanelComponent {
+ remotes: Rc<Vec<Remote>>,
+ controllers: Rc<Vec<ListController>>,
+ zones: Rc<Vec<ListZone>>,
+ vnets: Rc<Vec<ListVnet>>,
+}
+
+impl LoadableComponent for EvpnPanelComponent {
+ type Properties = EvpnPanel;
+ type Message = EvpnPanelMsg;
+ type ViewState = EvpnPanelViewState;
+
+ fn create(_ctx: &LoadableComponentContext<Self>) -> Self {
+ Self {
+ remotes: Default::default(),
+ controllers: Default::default(),
+ zones: Default::default(),
+ vnets: Default::default(),
+ }
+ }
+
+ fn load(
+ &self,
+ ctx: &LoadableComponentContext<Self>,
+ ) -> std::pin::Pin<Box<dyn std::future::Future<Output = Result<(), Error>>>> {
+ let link = ctx.link().clone();
+
+ Box::pin(async move {
+ let (remotes, controllers, zones, vnets) = try_join!(
+ load_remotes(),
+ load_controllers(),
+ load_zones(),
+ load_vnets()
+ )?;
+
+ link.send_message(Self::Message::LoadFinished {
+ remotes: Rc::new(remotes),
+ controllers: Rc::new(controllers),
+ zones: Rc::new(zones),
+ vnets: Rc::new(vnets),
+ });
+
+ Ok(())
+ })
+ }
+
+ fn update(&mut self, ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
+ match msg {
+ Self::Message::LoadFinished {
+ remotes,
+ controllers,
+ zones,
+ vnets,
+ } => {
+ self.remotes = remotes;
+ self.controllers = controllers;
+ self.zones = zones;
+ self.vnets = vnets;
+ }
+ Self::Message::Reload => {
+ ctx.link().send_reload();
+ }
+ }
+
+ true
+ }
+
+ fn main_view(&self, ctx: &LoadableComponentContext<Self>) -> Html {
+ let on_add_vrf = ctx
+ .link()
+ .change_view_callback(|_| Some(Self::ViewState::AddVrf));
+
+ let on_add_vnet = ctx
+ .link()
+ .change_view_callback(|_| Some(Self::ViewState::AddVnet));
+
+ let toolbar = Toolbar::new()
+ .class("pwt-w-100")
+ .class("pwt-overflow-hidden")
+ .class("pwt-border-bottom")
+ .with_child(
+ Button::new(tr!("Refresh")).onclick(ctx.link().callback(|_| Self::Message::Reload)),
+ );
+
+ Column::new()
+ .class("pwt-flex-fit")
+ .with_child(toolbar)
+ .with_child(
+ Panel::new()
+ .title(tr!("Router"))
+ .with_child(RouterTable::new(self.controllers.clone())),
+ )
+ .with_child(
+ Panel::new()
+ .title(tr!("VRF (Zone)"))
+ .with_child(VrfTree::new(
+ self.zones.clone(),
+ self.vnets.clone(),
+ self.remotes.clone(),
+ self.controllers.clone(),
+ on_add_vrf,
+ on_add_vnet,
+ )),
+ )
+ .into()
+ }
+
+ fn dialog_view(
+ &self,
+ ctx: &LoadableComponentContext<Self>,
+ view_state: &Self::ViewState,
+ ) -> Option<Html> {
+ let on_close_callback = ctx.link().clone().change_view_callback(|_| None);
+
+ Some(match view_state {
+ EvpnPanelViewState::AddVrf => {
+ let submit_scope = ctx.link().clone();
+
+ let on_submit_callback = SubmitCallback::new(move |form_ctx: FormContext| {
+ let client = pdm_client();
+
+ let params: CreateZoneParams =
+ serde_json::from_value(form_ctx.get_submit_data()).unwrap();
+
+ let scope = submit_scope.clone();
+ async move {
+ let upid = client.pve_sdn_create_zone(params).await?;
+ scope.show_task_log(upid, None);
+ Ok(())
+ }
+ });
+
+ let controllers = self.controllers.clone();
+
+ html! {
+ <AddZoneWindow {on_submit_callback} {on_close_callback} {controllers} />
+ }
+ }
+ EvpnPanelViewState::AddVnet => {
+ let submit_scope = ctx.link().clone();
+
+ let on_submit_callback = SubmitCallback::new(move |form_ctx: FormContext| {
+ let client = pdm_client();
+ let params: CreateVnetParams =
+ serde_json::from_value(form_ctx.get_submit_data()).unwrap();
+
+ let scope = submit_scope.clone();
+ async move {
+ let upid = client.pve_sdn_create_vnet(params).await?;
+ scope.show_task_log(upid, None);
+ Ok(())
+ }
+ });
+
+ let zones = self.zones.clone();
+
+ html! {
+ <AddVnetWindow {on_submit_callback} {on_close_callback} {zones} />
+ }
+ }
+ })
+ }
+}
diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
index f02eb7b..63f1959 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -1,3 +1,6 @@
+mod evpn_panel;
+pub use evpn_panel::EvpnPanel;
+
mod router_table;
pub use router_table::RouterTable;
--
2.39.5
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel