[pdm-devel] [PATCH proxmox-datacenter-manager 11/13] ui: sdn: add EvpnPanel

[Stefan Hanreich <s.hanreich@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