From: Stefan Hanreich <s.hanreich@proxmox.com>
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 [thread overview]
Message-ID: <20260512173145.596958-25-s.hanreich@proxmox.com> (raw)
In-Reply-To: <20260512173145.596958-1-s.hanreich@proxmox.com>
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 <s.hanreich@proxmox.com>
---
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
next prev parent reply other threads:[~2026-05-12 17:34 UTC|newest]
Thread overview: 35+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-05-12 17:31 [PATCH cluster/docs/manager/network/proxmox{-ve-rs,-perl-rs} v5 00/29] Add WireGuard as protocol to SDN fabrics Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-cluster v5 01/29] cfs: add 'priv/wg-keys.cfg' to observed files Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 02/29] sdn-types: add wireguard-specific PersistentKeepalive api type Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 03/29] ve-config: fabrics: split interface name regex into two parts Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 04/29] ve-config: fabric: refactor fabric config entry impl using macro Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 05/29] ve-config: fabrics: add protocol-specific properties for wireguard Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 06/29] ve-config: wireguard: add private keys section config Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 07/29] ve-config: sdn: fabrics: add wireguard to the fabric config Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 08/29] ve-config: fabrics: wireguard add validation for wireguard config Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-ve-rs v5 09/29] ve-config: fabrics: implement wireguard config generation Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-perl-rs v5 10/29] pve-rs: fabrics: wireguard: generate ifupdown2 configuration Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-perl-rs v5 11/29] pve-rs: fabrics: add helpers for parsing interface property strings Stefan Hanreich
2026-05-12 17:31 ` [PATCH proxmox-perl-rs v5 12/29] pve-rs: sdn: wireguard: add private keys module Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-network v5 13/29] sdn: add wireguard helper module Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-network v5 14/29] fabrics: wireguard: add schema definitions for wireguard Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-network v5 15/29] fabrics: wireguard: implement wireguard key auto-generation Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 16/29] network: sdn: generate wireguard configuration on apply Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 17/29] ui: fix parsing of property-strings when values contain = Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 18/29] ui: fabrics: i18n: make node loading string translatable Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 19/29] sdn: fabrics view: handle case where interfaces are deleted Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 20/29] ui: fabrics: split node selector creation and config Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 21/29] ui: fabrics: edit: make ipv4/6 support generic over fabric panels Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 22/29] ui: fabrics: node: make ipv4/6 support generic over edit panels Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 23/29] ui: fabrics: interface: " Stefan Hanreich
2026-05-12 17:31 ` Stefan Hanreich [this message]
2026-05-12 17:41 ` [PATCH pve-manager v5 24/29] ui: fabrics: wireguard: add interface edit panel Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 25/29] ui: fabrics: wireguard: add node " Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 26/29] ui: fabrics: wireguard: add fabric " Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 27/29] ui: fabrics: hook up wireguard components Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-manager v5 28/29] fabrics: node edit: add option to include wireguard interfaces Stefan Hanreich
2026-05-12 17:31 ` [PATCH pve-docs v5 29/29] sdn: fabrics: add section about wireguard Stefan Hanreich
2026-05-12 17:38 ` Stefan Hanreich
2026-05-13 2:51 ` partially-applied: [PATCH cluster/docs/manager/network/proxmox{-ve-rs,-perl-rs} v5 00/29] Add WireGuard as protocol to SDN fabrics Thomas Lamprecht
2026-05-15 5:02 ` applied: " Thomas Lamprecht
2026-05-15 5:04 ` Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260512173145.596958-25-s.hanreich@proxmox.com \
--to=s.hanreich@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox