[pdm-devel] [PATCH proxmox-datacenter-manager v2 11/15] ui: sdn: add AddVnetWindow component
Stefan Hanreich
s.hanreich at proxmox.com
Fri Aug 22 15:49:34 CEST 2025
Adds an edit window for creating a new VNet across multiple remotes.
Currently it
This windows shows a form
containing all fields required to create new VNet via the create_vnet
API endpoint.
Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
lib/pdm-client/src/lib.rs | 2 +-
ui/src/sdn/evpn/add_vnet.rs | 273 ++++++++++++++++++++++++++++++++++++
ui/src/sdn/evpn/mod.rs | 3 +
3 files changed, 277 insertions(+), 1 deletion(-)
create mode 100644 ui/src/sdn/evpn/add_vnet.rs
diff --git a/lib/pdm-client/src/lib.rs b/lib/pdm-client/src/lib.rs
index 1e4cace..bb14a68 100644
--- a/lib/pdm-client/src/lib.rs
+++ b/lib/pdm-client/src/lib.rs
@@ -59,7 +59,7 @@ pub mod types {
pub use pve_api_types::PveUpid;
pub use pdm_api_types::sdn::{
- CreateVnetParams, CreateZoneParams, ListController, ListVnet, ListZone,
+ CreateVnetParams, CreateZoneParams, ListController, ListVnet, ListZone, SDN_ID_SCHEMA,
};
pub use pve_api_types::{ListControllersType, ListZonesType, SdnObjectState};
}
diff --git a/ui/src/sdn/evpn/add_vnet.rs b/ui/src/sdn/evpn/add_vnet.rs
new file mode 100644
index 0000000..6ec0eb2
--- /dev/null
+++ b/ui/src/sdn/evpn/add_vnet.rs
@@ -0,0 +1,273 @@
+use std::{collections::HashSet, rc::Rc};
+
+use anyhow::{bail, Error};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use yew::{virtual_dom::Key, Callback, Component, Html, Properties};
+
+use pdm_client::types::{CreateVnetParams, ListZone, SDN_ID_SCHEMA};
+use proxmox_yew_comp::{EditWindow, SchemaValidation};
+use pwt::{
+ css,
+ props::{
+ ContainerBuilder, CssBorderBuilder, CssPaddingBuilder, ExtractPrimaryKey, FieldBuilder,
+ WidgetBuilder, WidgetStyleBuilder,
+ },
+ state::{Selection, Store},
+ tr,
+ widget::{
+ data_table::{DataTable, DataTableColumn, DataTableHeader, MultiSelectMode},
+ error_message,
+ form::{
+ Field, FormContext, ManagedField, ManagedFieldContext, ManagedFieldMaster,
+ ManagedFieldState, Number,
+ },
+ Column, Container, GridPicker, InputPanel,
+ },
+};
+use pwt_macros::widget;
+
+use crate::pdm_client;
+
+#[widget(comp=AddVnetWindowComp)]
+#[derive(Properties, PartialEq, Clone)]
+pub struct AddVnetWindow {
+ pub zones: Rc<Vec<ListZone>>,
+ pub on_success: Option<Callback<String>>,
+ pub on_close: Option<Callback<()>>,
+}
+
+impl AddVnetWindow {
+ pub fn new(
+ zones: Rc<Vec<ListZone>>,
+ on_success: impl Into<Option<Callback<String>>>,
+ on_close: impl Into<Option<Callback<()>>>,
+ ) -> Self {
+ yew::props!(Self {
+ zones,
+ on_success: on_success.into(),
+ on_close: on_close.into(),
+ })
+ }
+}
+
+pub struct AddVnetWindowComp {}
+
+impl Component for AddVnetWindowComp {
+ type Message = ();
+
+ type Properties = AddVnetWindow;
+
+ fn create(_ctx: &yew::Context<Self>) -> Self {
+ Self {}
+ }
+
+ fn view(&self, ctx: &yew::Context<Self>) -> Html {
+ let props = ctx.props().clone();
+
+ EditWindow::new(tr!("Add VNet"))
+ .renderer(move |form_ctx: &FormContext| {
+ InputPanel::new()
+ .class(css::FlexFit)
+ .padding(4)
+ .width("auto")
+ .with_field(
+ tr!("VNet ID"),
+ Field::new()
+ .name("vnet")
+ .schema(&SDN_ID_SCHEMA)
+ .required(true),
+ )
+ .with_field(
+ tr!("VXLAN VNI"),
+ Number::<u32>::new()
+ .min(1)
+ .max(16777215)
+ .name("tag")
+ .required(true),
+ )
+ .with_custom_child(
+ Column::new()
+ .with_child(ZoneTable::new(props.zones.clone()).name("remotes"))
+ .with_optional_child(
+ form_ctx
+ .read()
+ .get_field_valid("remotes")
+ .and_then(|result| result.err().as_deref().map(error_message)),
+ ),
+ )
+ .into()
+ })
+ .on_close(ctx.props().on_close.clone())
+ .on_submit({
+ let on_success = props.on_success.clone();
+
+ move |form_ctx: FormContext| {
+ let on_success = on_success.clone();
+
+ async move {
+ let client = pdm_client();
+
+ let params: CreateVnetParams =
+ serde_json::from_value(form_ctx.get_submit_data()).unwrap();
+
+ let upid = client.pve_sdn_create_vnet(params).await?;
+
+ if let Some(cb) = on_success {
+ cb.emit(upid)
+ }
+
+ Ok(())
+ }
+ }
+ })
+ .into()
+ }
+}
+
+#[widget(comp=ManagedFieldMaster<ZoneTableComponent>, @input)]
+#[derive(Clone, PartialEq, Properties)]
+pub struct ZoneTable {
+ zones: Rc<Vec<ListZone>>,
+}
+
+impl ZoneTable {
+ pub fn new(zones: Rc<Vec<ListZone>>) -> Self {
+ yew::props!(Self { zones })
+ }
+}
+
+#[derive(Clone, PartialEq, Debug, Serialize, Deserialize)]
+pub struct ZoneTableEntry {
+ remote: String,
+ zone: String,
+ vni: u32,
+}
+
+impl ExtractPrimaryKey for ZoneTableEntry {
+ fn extract_key(&self) -> Key {
+ Key::from(format!("{}/{}", self.remote, self.zone))
+ }
+}
+
+pub struct ZoneTableComponent {
+ store: Store<ZoneTableEntry>,
+ selection: Selection,
+}
+
+pub enum ZoneTableMsg {
+ SelectionChange,
+}
+
+impl ManagedField for ZoneTableComponent {
+ type Properties = ZoneTable;
+ type Message = ZoneTableMsg;
+ type ValidateClosure = ();
+
+ fn validation_args(_props: &Self::Properties) -> Self::ValidateClosure {}
+
+ fn validator(_props: &Self::ValidateClosure, value: &Value) -> Result<Value, Error> {
+ let selected_entries: Vec<ZoneTableEntry> = serde_json::from_value(value.clone())?;
+
+ if selected_entries.is_empty() {
+ bail!("at least one remote needs to be selected");
+ }
+
+ let mut unique = HashSet::new();
+
+ if !selected_entries
+ .iter()
+ .all(|entry| unique.insert(entry.remote.as_str()))
+ {
+ bail!("can only create the VNet once per remote!")
+ }
+
+ Ok(value.clone())
+ }
+
+ fn setup(_props: &Self::Properties) -> ManagedFieldState {
+ ManagedFieldState {
+ value: Value::Array(Vec::new()),
+ valid: Ok(()),
+ default: Value::Array(Vec::new()),
+ radio_group: false,
+ unique: false,
+ }
+ }
+
+ fn create(ctx: &ManagedFieldContext<Self>) -> Self {
+ let link = ctx.link().clone();
+ let selection = Selection::new().multiselect(true).on_select(move |_| {
+ link.send_message(Self::Message::SelectionChange);
+ });
+
+ let store = Store::new();
+ store.set_data(
+ ctx.props()
+ .zones
+ .iter()
+ .map(|zone| ZoneTableEntry {
+ remote: zone.remote.clone(),
+ zone: zone.zone.zone.clone(),
+ vni: zone.zone.vrf_vxlan.expect("evpn zone as a vrf vni"),
+ })
+ .collect(),
+ );
+
+ Self { store, selection }
+ }
+
+ fn update(&mut self, ctx: &ManagedFieldContext<Self>, msg: Self::Message) -> bool {
+ match msg {
+ Self::Message::SelectionChange => {
+ let read_guard = self.store.read();
+
+ ctx.link().update_value(
+ serde_json::to_value(
+ self.selection
+ .selected_keys()
+ .iter()
+ .filter_map(|key| read_guard.lookup_record(key))
+ .collect::<Vec<_>>(),
+ )
+ .unwrap(),
+ );
+ }
+ }
+
+ false
+ }
+
+ fn view(&self, _ctx: &ManagedFieldContext<Self>) -> Html {
+ let table = DataTable::new(COLUMNS.with(Rc::clone), self.store.clone())
+ .multiselect_mode(MultiSelectMode::Simple)
+ .border(true)
+ .class(css::FlexFit);
+
+ Container::new()
+ .with_child(GridPicker::new(table).selection(self.selection.clone()))
+ .into()
+ }
+}
+
+thread_local! {
+ static COLUMNS: Rc<Vec<DataTableHeader<ZoneTableEntry>>> =
+ Rc::new(vec![
+ DataTableColumn::selection_indicator().into(),
+ DataTableColumn::new(tr!("Remote"))
+ .flex(1)
+ .render(move |item: &ZoneTableEntry| item.remote.as_str().into())
+ .sorter(|a: &ZoneTableEntry, b: &ZoneTableEntry| a.remote.cmp(&b.remote))
+ .into(),
+ DataTableColumn::new(tr!("Zone"))
+ .flex(1)
+ .render(move |item: &ZoneTableEntry| item.zone.as_str().into())
+ .sorter(|a: &ZoneTableEntry, b: &ZoneTableEntry| a.zone.cmp(&b.zone))
+ .into(),
+ DataTableColumn::new(tr!("VRF VNI"))
+ .flex(1)
+ .render(move |item: &ZoneTableEntry| item.vni.to_string().into())
+ .sorter(|a: &ZoneTableEntry, b: &ZoneTableEntry| a.vni.cmp(&b.vni))
+ .into(),
+ ]);
+}
diff --git a/ui/src/sdn/evpn/mod.rs b/ui/src/sdn/evpn/mod.rs
index da020a9..9fda8a1 100644
--- a/ui/src/sdn/evpn/mod.rs
+++ b/ui/src/sdn/evpn/mod.rs
@@ -4,6 +4,9 @@ pub use remote_tree::RemoteTree;
mod vrf_tree;
pub use vrf_tree::VrfTree;
+mod add_vnet;
+pub use add_vnet::AddVnetWindow;
+
#[derive(Clone, Copy, Debug, PartialEq, Eq, Ord, PartialOrd, Hash)]
pub struct EvpnRouteTarget {
asn: u32,
--
2.47.2
More information about the pdm-devel
mailing list