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 EF6871FF146 for ; Tue, 12 May 2026 19:34:07 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 3DB761C64B; Tue, 12 May 2026 19:32:40 +0200 (CEST) From: Stefan Hanreich To: pve-devel@lists.proxmox.com Subject: [PATCH pve-manager v5 24/29] ui: fabrics: wireguard: add interface edit panel Date: Tue, 12 May 2026 19:31:39 +0200 Message-ID: <20260512173145.596958-25-s.hanreich@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260512173145.596958-1-s.hanreich@proxmox.com> References: <20260512173145.596958-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: 1778607004582 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.615 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: UVUC2PJTGZKTP7SHJLZGXBHXZGK25OLV X-Message-ID-Hash: UVUC2PJTGZKTP7SHJLZGXBHXZGK25OLV 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: The WireGuard interface panel allows for creating and editing WireGuard interfaces on an internal node, as well as the peers associated with that interface. The information for available peers is taken directly via the list_nodes endpoint in the API. Existing peer definitions for interfaces are matched manually to the respective returned definitions from the nodes API, by matching on the IDs in the peer definitions. A few features that are available in the backend, e.g. overriding endpoints on a per-interface basis, are not yet exposed in the UI directly. Signed-off-by: Stefan Hanreich --- www/manager6/Makefile | 1 + .../sdn/fabrics/wireguard/InterfacePanel.js | 518 ++++++++++++++++++ 2 files changed, 519 insertions(+) create mode 100644 www/manager6/sdn/fabrics/wireguard/InterfacePanel.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 597769bb9..76266ad28 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -343,6 +343,7 @@ JSSRC= \ sdn/fabrics/ospf/InterfacePanel.js \ sdn/fabrics/ospf/NodeEdit.js \ sdn/fabrics/ospf/FabricEdit.js \ + sdn/fabrics/wireguard/InterfacePanel.js \ storage/ContentView.js \ storage/BackupView.js \ storage/Base.js \ diff --git a/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js b/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js new file mode 100644 index 000000000..7a7cdd005 --- /dev/null +++ b/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js @@ -0,0 +1,518 @@ +Ext.define('Pve.sdn.Fabric.WireGuard.Interface', { + extend: 'Ext.data.Model', + idProperty: 'name', + fields: ['name', 'ip', 'ip6', 'listen_port', 'peers'], +}); + +Ext.define('Pve.sdn.Fabric.WireGuard.InterfacePeer', { + extend: 'Ext.data.Model', + fields: ['node', 'node_iface', 'type', 'endpoint', 'skip_route_generation'], +}); + +Ext.define('PVE.sdn.Fabric.WireGuard.PeerSelectionPanel', { + extend: 'Ext.grid.Panel', + alias: 'widget.pveSDNWireguardPeerSelector', + + emptyText: gettext('No peers available'), + + selModel: { + type: 'checkboxmodel', + mode: 'SIMPLE', + }, + + store: { + model: 'Pve.sdn.Fabric.WireGuard.InterfacePeer', + }, + + config: { + currentNode: null, + availablePeers: [], + selectedPeers: [], + }, + + publishes: ['selectedPeers'], + + columns: [ + { + header: gettext('Name'), + dataIndex: 'node', + flex: 1, + }, + { + header: gettext('Interface'), + dataIndex: 'node_iface', + flex: 1, + }, + { + header: gettext('Type'), + dataIndex: 'type', + flex: 1, + }, + { + header: gettext('Endpoint'), + dataIndex: 'endpoint', + flex: 1, + renderer: function(value, _metaData, record) { + let me = this; + + if (value) { + return value; + } + + let availablePeer = me.getAvailablePeers().find((availablePeer) => { + return availablePeer.node === record.data.node + && availablePeer.node_iface === record.data.node_iface; + }); + + return availablePeer?.endpoint; + }, + }, + { + header: gettext('Skip Route generation'), + flex: 1, + xtype: 'widgetcolumn', + widget: { + xtype: 'proxmoxcheckbox', + bind: { + value: '{record.skip_route_generation}', + }, + }, + }, + ], + + setSelectedPeers: function (selectedPeers) { + let me = this; + + if (!me.isConfiguring) { + let store = me.getStore(); + + let selectionModel = me.getSelectionModel(); + selectionModel.suspendEvents(); + + selectionModel.select([]); + store.removeAll(); + + for (const availablePeer of me.getAvailablePeers()) { + if (availablePeer.node === me.getCurrentNode().node_id) { + continue; + } + + let selectedPeer = selectedPeers?.find((selectedPeer) => { + return selectedPeer.data.node === availablePeer.node + && selectedPeer.data.node_iface === availablePeer.node_iface; + }); + + let model = store.add( + selectedPeer ?? structuredClone(availablePeer) + ); + + if (selectedPeer) { + selectionModel.select(model, true); + } + } + + selectionModel.resumeEvents(); + me.publishState('selectedPeers', selectionModel.getSelection()); + } + }, + + initComponent: function () { + let me = this; + + me.callParent(); + + me.getStore().on('datachanged', function() { + me.fireEvent('datachanged'); + }); + + me.on('selectionchange', function (_selectionModel, selected) { + me.publishState('selectedPeers', selected); + }); + }, +}); + +Ext.define('PVE.sdn.Fabric.WireGuard.InterfacePanel', { + extend: 'Ext.panel.Panel', + mixins: ['Ext.form.field.Field'], + + xtype: 'pveSDNFabricWireGuardInterfacePanel', + + layout: { + type: 'hbox', + align: 'stretch', + }, + + config: { + deleteEmpty: true, + }, + + viewModel: { + data: { + availablePeers: [], + currentNode: null, + }, + stores: { + interfaces: { + model: 'Pve.sdn.Fabric.WireGuard.Interface', + }, + }, + formulas: { + selectedInterface: { + bind: '{interfaceGrid.selection}', + get: function (selection) { + if (Array.isArray(selection)) { + return selection[0]; + } + + return selection; + }, + }, + }, + }, + + items: [ + { + xtype: 'panel', + layout: { + type: 'vbox', + align: 'stretch', + }, + border: false, + width: 200, + margin: '0 10 0 0', + items: [ + { + xtype: 'grid', + reference: 'interfaceGrid', + flex: 1, + margin: '0 0 10 0', + hideHeaders: true, + columns: [ + { + text: gettext('Name'), + dataIndex: 'name', + flex: 1, + }, + { + xtype: 'actioncolumn', + width: 20, + items: [ + { + iconCls: 'fa critical fa-trash-o', + tooltip: gettext('Remove'), + handler: function ( + table, + _rowIndex, + _colIndex, + _item, + _e, + rec, + ) { + Ext.Msg.show({ + title: gettext('Confirm'), + icon: Ext.Msg.WARNING, + message: Ext.String.format( + gettext( + 'Are you sure you want to remove Interface {0}', + ), + `${rec.data.name}`, + ), + buttons: Ext.Msg.YESNO, + defaultFocus: 'no', + callback: function (btn) { + if (btn !== 'yes') { + return; + } + + let grid = table.up( + 'grid[reference=interfaceGrid]', + ); + + let updateSelection = grid + .getSelection() + .includes(rec); + + grid.getStore().remove(rec); + + if (updateSelection) { + grid.setSelection(grid.getStore().first()); + } + }, + }); + }, + }, + ], + }, + ], + bind: { + store: '{interfaces}', + }, + }, + { + xtype: 'button', + text: gettext('Add Interface'), + handler: 'addInterface', + }, + ], + }, + { + xtype: 'form', + border: false, + flex: 1, + width: 300, + padding: 4, + items: [ + { + xtype: 'proxmoxtextfield', + fieldLabel: gettext('Name'), + isFormField: false, + bind: { + value: '{selectedInterface.name}', + disabled: '{!selectedInterface.isCreate}', + }, + }, + { + xtype: 'displayfield', + fieldLabel: gettext('Public Key'), + isFormField: false, + bind: { + value: '{selectedInterface.public_key}', + }, + }, + { + xtype: 'proxmoxintegerfield', + fieldLabel: gettext('Listen Port'), + bind: '{selectedInterface.listen_port}', + minValue: 1, + maxValue: 65535, + isFormField: false, + }, + { + fieldLabel: gettext('IPv4 address'), + bind: '{selectedInterface.ip}', + xtype: 'proxmoxtextfield', + isFormField: false, + }, + { + fieldLabel: gettext('IPv6 address'), + bind: '{selectedInterface.ip6}', + xtype: 'proxmoxtextfield', + isFormField: false, + }, + { + xtype: 'pveSDNWireguardPeerSelector', + reference: 'peerSelector', + bind: { + currentNode: '{currentNode}', + availablePeers: '{availablePeers}', + selectedPeers: '{selectedInterface.peers}', + }, + }, + ], + bind: { + hidden: '{!selectedInterface}', + }, + }, + ], + + previousDirty: false, + + controller: { + xclass: 'Ext.app.ViewController', + + addInterface: function () { + let me = this; + + let interfacesStore = me.getView().getViewModel().getStore('interfaces'); + + let idx = 0; + let name = `wg${idx}`; + + while (interfacesStore.getById(name)) { + idx++; + name = `wg${idx}`; + } + + let newInterface = interfacesStore.add({ + name, + peers: [], + listen_port: 51820, + isCreate: true, + }); + + let interfaceGrid = me.lookupReference('interfaceGrid'); + interfaceGrid.setSelection(newInterface); + }, + }, + + selectFirstInterface: function () { + let me = this; + + let firstInterface = me.getViewModel().getStore('interfaces').first(); + if (firstInterface) { + me.lookupReference('interfaceGrid').setSelection([firstInterface]); + } + }, + + setAvailablePeers: function(availablePeers) { + let me = this; + me.getViewModel().set('availablePeers', availablePeers); + }, + + setNode: async function (node) { + let me = this; + + let ifaces = {}; + + for (const iface of node.interfaces) { + let treeIface = { + id: iface.name, + peers: [], + isCreate: false, + ...PVE.Parser.parsePropertyString(iface), + }; + + ifaces[treeIface.name] = treeIface; + } + + for (let peer of node.peers) { + peer = PVE.Parser.parsePropertyString(peer); + ifaces[peer.iface].peers.push(Ext.create('Pve.sdn.Fabric.WireGuard.InterfacePeer', peer)); + } + + me.getViewModel().set('currentNode', node); + me.getViewModel().getStore('interfaces').setData(Object.values(ifaces)); + + me.selectFirstInterface(); + }, + + isDirty: function () { + let me = this; + + let interfaceStore = me.getViewModel().getStore('interfaces'); + let interfaces = interfaceStore.getData().items; + + if (interfaces === undefined) { + return false; + } + + return ( + interfaceStore.getNewRecords().length > 0 || + interfaceStore.getRemovedRecords().length > 0 || + interfaces.some((iface) => iface.isDirty() || iface.data.peers.some((peer) => peer.isDirty())) + ); + }, + + initComponent: function () { + let me = this; + + me.callParent(); + + let store = me.getViewModel().getStore('interfaces'); + + me.lookupReference('peerSelector').on('datachanged', function() { + let dirtyStatus = me.isDirty(); + + if (dirtyStatus !== me.previousDirty) { + me.previousDirty = dirtyStatus; + me.fireEvent('dirtychange'); + } + }); + + store.on('update', function () { + let dirtyStatus = me.isDirty(); + + if (dirtyStatus !== me.previousDirty) { + me.previousDirty = dirtyStatus; + me.fireEvent('dirtychange'); + } + }); + + store.on('add', function () { + me.previousDirty = true; + me.fireEvent('dirtychange'); + }); + + store.on('remove', function () { + me.previousDirty = true; + me.fireEvent('dirtychange'); + }); + }, + + getSubmitData: function () { + let me = this; + + if (me.isDisabled()) { + return null; + } + + let peers = []; + let interfaces = []; + + for (let record of me.getViewModel().getStore('interfaces').getData().items) { + let data = {}; + + for (const [key, value] of Object.entries(record.data)) { + if (value === '' || value === undefined || value === null) { + continue; + } + + if (['peers', 'isCreate'].includes(key)) { + // peers are handled later separately, since they're two + // fields when talking to the API, but in the UI, they're a + // field in the interface model itself + // + // Other fields are ExtJS specific, so don't send them to + // the backend. + continue; + } + + data[key] = value; + } + + for (const peer of record.data.peers) { + let peerData = { + iface: record.data.name, + }; + + for (let [key, value] of Object.entries(peer.data)) { + if (value === '' || value === undefined || value === null) { + continue; + } + + if (['id', 'allowed_ips', 'endpoint'].includes(key)) { + // filter ExtJS specific data, that has purely + // informational purposes when selecting peers + continue; + } + + peerData[key] = value; + } + + peers.push(PVE.Parser.printPropertyString(peerData)); + } + + interfaces.push(PVE.Parser.printPropertyString(data)); + } + + if (interfaces.length > 0) { + let retVal = { + interfaces, + }; + + if (peers.length > 0) { + retVal.peers = peers; + } else if (me.getDeleteEmpty()) { + retVal.delete = ['peers']; + } + + return retVal; + } else if (me.getDeleteEmpty()) { + return { + delete: ['interfaces', 'peers'], + }; + } + + return null; + }, +}); -- 2.47.3