[PATCH pve-manager v5 25/29] 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         | 202 ++++++++++++++++++
 2 files changed, 203 insertions(+)
 create mode 100644 www/manager6/sdn/fabrics/wireguard/NodeEdit.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 76266ad28..f7c40ee04 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -344,6 +344,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..c72eb5e04
--- /dev/null
+++ b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
@@ -0,0 +1,202 @@
+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,
+            },
+        },
+        formulas: {
+            nameEditable: function(get) {
+                let me = this;
+                return me.getView().isCreate && get('current.isPveNode');
+            },
+        },
+    },
+
+    additionalItems: [
+        {
+            xtype: 'proxmoxtextfield',
+            fieldLabel: gettext('Name'),
+            labelWidth: 120,
+            name: 'node_id',
+            bind: {
+                disabled: '{nameEditable}',
+                hidden: '{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'),
+            emptyText: gettext('Listen Address for WireGuard'),
+            labelWidth: 120,
+            name: 'endpoint',
+            allowBlank: false,
+        },
+        {
+            xtype: 'proxmoxtextfield',
+            fieldLabel: gettext('Allowed IPs'),
+            emptyText: gettext('Allowed Destination IPs for traffic coming from this node.'),
+            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,
+                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;
+
+                    availablePeers.push(iface_peer);
+                }
+            } else if (node.role === 'external') {
+                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) {
+                    let isPveNode = newValue === 'internal';
+
+                    me.getViewModel().set('current.isPveNode', isPveNode);
+
+                    me.interfaceSelector.setHidden(!isPveNode);
+                    me.interfaceSelector.setDisabled(!isPveNode);
+
+                    me.lookupReference('nodeSelector').setDisabled(!me.isCreate || !isPveNode);
+                    me.lookupReference('nodeSelector').setHidden(!isPveNode);
+                },
+            },
+        });
+
+        return Ext.create({
+            xtype: 'inputpanel',
+            items: [roleSelector, nodeSelector],
+        });
+    },
+});
-- 
2.47.3