From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 03F271FF13C for ; Thu, 02 Apr 2026 10:12:38 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id DB8B5C667; Thu, 2 Apr 2026 10:12:30 +0200 (CEST) From: Stefan Hanreich To: pve-devel@lists.proxmox.com Subject: [PATCH pve-manager v2 23/25] ui: fabrics: wireguard: add node edit panel Date: Thu, 2 Apr 2026 10:11:43 +0200 Message-ID: <20260402081148.76276-24-s.hanreich@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260402081148.76276-1-s.hanreich@proxmox.com> References: <20260402081148.76276-1-s.hanreich@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1775117457857 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.698 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 SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: ITVVBSRJNCGRSYNBEPVR6S2KMVGC63Y7 X-Message-ID-Hash: ITVVBSRJNCGRSYNBEPVR6S2KMVGC63Y7 X-MailFrom: s.hanreich@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox VE development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: Add a component for creating / updating nodes of a Wireguard fabric. There are some key differences compared to OSPF / OpenFabric nodes, mostly that WireGuard nodes can have different roles and that WireGuard interfaces are not selected from the existing interfaces of the node, but rather created. This requires some changes to the existing NodeEdit panel provided by the fabrics: * do not load available interfaces, but rather available peers * let users create interfaces rather than select them * add an additional roleSelector to the existing nodeSelector Signed-off-by: Stefan Hanreich --- www/manager6/Makefile | 1 + .../sdn/fabrics/wireguard/NodeEdit.js | 230 ++++++++++++++++++ 2 files changed, 231 insertions(+) create mode 100644 www/manager6/sdn/fabrics/wireguard/NodeEdit.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 372431e8d..a0f06024a 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -334,6 +334,7 @@ JSSRC= \ sdn/fabrics/ospf/NodeEdit.js \ sdn/fabrics/ospf/FabricEdit.js \ sdn/fabrics/wireguard/InterfacePanel.js \ + sdn/fabrics/wireguard/NodeEdit.js \ storage/ContentView.js \ storage/BackupView.js \ storage/Base.js \ diff --git a/www/manager6/sdn/fabrics/wireguard/NodeEdit.js b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js new file mode 100644 index 000000000..7b1b7ac73 --- /dev/null +++ b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js @@ -0,0 +1,230 @@ +Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', { + extend: 'PVE.sdn.Fabric.Node.Edit', + protocol: 'wireguard', + + extraRequestParams: { + protocol: 'wireguard', + }, + + referenceHolder: true, + + // handled in the interface configuration (for now) + hasIpv4Support: false, + hasIpv6Support: false, + + viewModel: { + data: { + current: { + isPveNode: true, + }, + }, + stores: { + availablePeers: { + model: 'Pve.sdn.Fabric.WireGuard.Peer', + }, + interfaces: { + model: 'Pve.sdn.Fabric.WireGuard.Interface', + }, + }, + formulas: { + selectedInterface: { + bind: '{interfaceGrid.selection}', + get: function (selection) { + if (Array.isArray(selection)) { + return selection[0]; + } + + return selection; + }, + }, + nodeSelectorDisabled: function (get) { + return get('isCreate') || !get('current.isPveNode'); + }, + }, + }, + + additionalItems: [ + { + xtype: 'proxmoxtextfield', + fieldLabel: gettext('Name'), + labelWidth: 120, + name: 'node_id', + bind: { + hidden: '{current.isPveNode}', + disabled: '{current.isPveNode}', + }, + allowBlank: false, + }, + { + xtype: 'proxmoxtextfield', + fieldLabel: gettext('Public Key'), + labelWidth: 120, + name: 'public_key', + bind: { + hidden: '{current.isPveNode}', + disabled: '{current.isPveNode}', + }, + allowBlank: false, + }, + { + xtype: 'proxmoxtextfield', + fieldLabel: gettext('Endpoint'), + labelWidth: 120, + name: 'endpoint', + allowBlank: false, + }, + { + xtype: 'proxmoxtextfield', + fieldLabel: gettext('Allowed IPs'), + labelWidth: 120, + name: 'allowed_ips', + cbind: { + deleteEmpty: '{!isCreate}', + }, + // TODO: implement proper list selection field that handles + // converting from / to array + setValue: function (value) { + if (Ext.isArray(value)) { + value = value.join(','); + } + + this.setRawValue(value); + }, + getSubmitValue: function () { + let value = this.getValue(); + return value ? this.getValue().split(',') : null; + }, + }, + ], + + loadAvailablePeers: async function () { + let me = this; + + let response = await Proxmox.Async.api2({ + url: `/cluster/sdn/fabrics/node/${me.fabricId}`, + method: 'GET', + }); + + return response.result.data.flatMap((node) => { + let availablePeers = []; + + let peer = { + type: node.role, + endpoint: node.endpoint, + allowed_ips: node.allowed_ips, + node: node.node_id, + }; + + if (node.role === 'internal') { + for (let iface of node.interfaces) { + let parsed_iface = PVE.Parser.parsePropertyString(iface); + + let iface_peer = structuredClone(peer); + iface_peer.node_iface = parsed_iface.name; + iface_peer.id = `${iface_peer.node}_${iface_peer.node_iface}`; + + availablePeers.push(iface_peer); + } + } else if (node.role === 'external') { + peer.id = peer.node; + availablePeers.push(peer); + } else { + throw `unknown node type: ${node.role}`; + } + + return availablePeers; + }); + }, + + load: function () { + let me = this; + + me.setLoading(gettext('fetching node information')); + + Promise.all([me.loadNode(me.fabricId, me.nodeId), me.loadAvailablePeers()]) + .catch(Proxmox.Utils.alertResponseFailure) + .then(([node, availablePeers]) => { + me.interfaceSelector.setAvailablePeers(availablePeers); + + node.interfaces = node.interfaces ?? []; + node.peers = node.peers ?? []; + + me.interfaceSelector.setNode(node); + me.setValues(node); + }) + .finally(() => { + me.setLoading(false); + }); + }, + + getNodeSelectorConfig: function () { + let me = this; + let config = me.callParent(); + + Ext.Object.merge(config, { + store: { + listeners: { + load: function (store) { + if (store.count() === 0) { + me.lookupReference('roleSelector').select('external'); + me.lookupReference('nodeSelector').setDisabled(true); + } + }, + }, + }, + }); + + return config; + }, + + getNodeSelector: function () { + let me = this; + + let nodeSelector = me.callParent(); + nodeSelector.setDisabled(!me.isCreate); + + let roleSelector = Ext.create({ + xtype: 'combobox', + name: 'role', + labelWidth: 120, + fieldLabel: gettext('Type'), + emptyText: gettext('Node'), + editable: false, + disabled: !me.isCreate, + reference: 'roleSelector', + value: 'internal', + store: [ + ['internal', gettext('Node')], + ['external', gettext('External')], + ], + listeners: { + change: function (_this, newValue) { + me.getViewModel().set('current.isPveNode', newValue === 'internal'); + }, + }, + }); + + return Ext.create({ + xtype: 'inputpanel', + items: [roleSelector, nodeSelector], + }); + }, + + initComponent: function () { + let me = this; + + me.callParent(); + + me.interfaceSelector.setBind({ + hidden: '{!current.isPveNode}', + disabled: '{!current.isPveNode}', + }); + + // needs to lookup the specific reference, because me.nodeSelector is + // the whole input panel that includes roleSelector as well. + me.lookupReference('nodeSelector').setBind({ + hidden: '{!current.isPveNode}', + disabled: '{nodeSelectorDisabled}', + }); + }, +}); -- 2.47.3