[PATCH pve-manager v2 23/25] ui: fabrics: wireguard: add node edit panel

[Stefan Hanreich <s.hanreich@proxmox.com>]

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 <s.hanreich@proxmox.com>
---
 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