[PATCH pve-manager v4 27/31] ui: fabrics: wireguard: add interface edit panel

[Stefan Hanreich <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   | 435 ++++++++++++++++++
 2 files changed, 436 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..f60f17216
--- /dev/null
+++ b/www/manager6/sdn/fabrics/wireguard/InterfacePanel.js
@@ -0,0 +1,435 @@
+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.Peer', {
+    extend: 'Ext.data.Model',
+    fields: ['node', 'node_iface', 'type', 'endpoint'],
+});
+
+Ext.define('PVE.sdn.Fabric.WireGuard.PeerSelectionPanel', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.pveSDNWireguardPeerSelector',
+
+    emptyText: gettext('No peers available'),
+
+    selModel: {
+        type: 'checkboxmodel',
+        mode: 'SIMPLE',
+    },
+
+    config: {
+        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,
+        },
+    ],
+
+    setSelectedPeers: function (selectedPeers) {
+        let me = this;
+
+        if (!me.isConfiguring) {
+            if (!selectedPeers || selectedPeers.length === 0) {
+                me.setSelection();
+            } else {
+                me.setSelection(selectedPeers);
+            }
+
+            me.publishState('selectedPeers', selectedPeers);
+        }
+    },
+
+    initComponent: function () {
+        let me = this;
+
+        me.callParent();
+
+        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,
+    },
+
+    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: {
+                        store: '{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: 50000,
+                isCreate: true,
+            });
+
+            let interfaceGrid = me.lookupReference('interfaceGrid');
+            interfaceGrid.setSelection(newInterface);
+        },
+    },
+
+    setAvailablePeers: function (availablePeers) {
+        let me = this;
+        me.getViewModel().getStore('availablePeers').setData(availablePeers);
+    },
+
+    selectFirstInterface: function () {
+        let me = this;
+
+        let firstInterface = me.getViewModel().getStore('interfaces').first();
+        if (firstInterface) {
+            me.lookupReference('interfaceGrid').setSelection([firstInterface]);
+        }
+    },
+
+    setNode: async function (node) {
+        let me = this;
+
+        node = structuredClone(node);
+
+        let ifaces = {};
+
+        for (const iface of node.interfaces) {
+            let treeIface = {
+                id: iface.name,
+                peers: [],
+                isCreate: false,
+                ...PVE.Parser.parsePropertyString(iface),
+            };
+
+            ifaces[treeIface.name] = treeIface;
+        }
+
+        let availablePeers = me.getViewModel().getStore('availablePeers');
+
+        for (let peer of node.peers) {
+            peer = PVE.Parser.parsePropertyString(peer);
+
+            let peerId = peer.type === 'external' ? peer.node : `${peer.node}_${peer.node_iface}`;
+            let peerModel = availablePeers.getById(peerId);
+
+            ifaces[peer.iface].peers.push(peerModel);
+        }
+
+        availablePeers.setFilters([(peer) => peer.data.node !== node.node_id]);
+
+        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())
+        );
+    },
+
+    initComponent: function () {
+        let me = this;
+
+        me.callParent();
+
+        let store = me.getViewModel().getStore('interfaces');
+
+        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 (const [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