[PATCH network] sdn: fabrics: split WireGuard endpoint port field

[Gabriel Goller <g.goller@proxmox.com>]

Expose the WireGuard endpoint port as a separate optional field in the
node edit window, defaulting to the standard WireGuard port 51820.

Keep the API representation unchanged by splitting endpoint host and
port on load, and combining them again on submit. Wrap IPv6 addresses in
brackets when adding the port.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---

This makes the validation easier. Also endpoint ports are not optional anymore.
I know the "send default value to api" is not really pretty, but I think this
a convenience default anyway + changing this in the backend is a bit tricky
because we pull the generic `ServiceEndpoint` through the whole api.

 .../sdn/fabrics/wireguard/NodeEdit.js         | 55 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/www/manager6/sdn/fabrics/wireguard/NodeEdit.js b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
index ba5899cb9f1b..0943ac5a35ae 100644
--- a/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
+++ b/www/manager6/sdn/fabrics/wireguard/NodeEdit.js
@@ -13,6 +13,8 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
     hasIpv4Support: false,
     hasIpv6Support: false,
 
+    defaultEndpointPort: 51820,
+
     viewModel: {
         data: {
             current: {
@@ -58,11 +60,22 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
         {
             xtype: 'proxmoxtextfield',
             fieldLabel: gettext('Endpoint'),
-            emptyText: gettext('Host or host:port that peers connect to'),
+            emptyText: gettext('Host that peers connect to'),
             labelWidth: 120,
             name: 'endpoint',
             allowBlank: false,
         },
+        {
+            xtype: 'proxmoxintegerfield',
+            fieldLabel: gettext('Endpoint Port'),
+            emptyText: gettext('Default') + ': 51820',
+            labelWidth: 120,
+            name: 'endpoint_port',
+            minValue: 1,
+            maxValue: 65535,
+            allowBlank: true,
+            submitValue: false,
+        },
         {
             xtype: 'proxmoxtextfield',
             fieldLabel: gettext('Allowed IPs'),
@@ -95,6 +108,45 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
         },
     ],
 
+    combineEndpoint: function (endpoint, port) {
+        let me = this;
+
+        port = port || me.defaultEndpointPort;
+
+        if (Proxmox.Utils.IP6_match.test(endpoint)) {
+            endpoint = `[${endpoint}]`;
+        }
+
+        return `${endpoint}:${port}`;
+    },
+
+    splitEndpoint: function (endpoint) {
+        let match = endpoint?.match(/^\[([^\]]+)\]:(\d+)$/) ?? endpoint?.match(/^([^:]+):(\d+)$/);
+        if (!match) {
+            return { endpoint };
+        }
+
+        return {
+            endpoint: match[1],
+            endpoint_port: Number(match[2]),
+        };
+    },
+
+    getValues: function (dirtyOnly) {
+        let me = this;
+
+        let values = me.callParent([dirtyOnly]);
+        let endpointField = me.down('[name=endpoint]');
+        let portField = me.down('[name=endpoint_port]');
+
+        if (!dirtyOnly || values.endpoint || portField.isDirty()) {
+            values.endpoint = me.combineEndpoint(endpointField.getValue(), portField.getValue());
+        }
+        delete values.endpoint_port;
+
+        return values;
+    },
+
     loadAvailablePeers: async function () {
         let me = this;
 
@@ -141,6 +193,7 @@ Ext.define('PVE.sdn.Fabric.WireGuard.Node.Edit', {
             .then(([node, availablePeers]) => {
                 me.interfaceSelector.setAvailablePeers(availablePeers);
 
+                Ext.apply(node, me.splitEndpoint(node.endpoint));
                 node.interfaces = node.interfaces ?? [];
                 node.peers = node.peers ?? [];
                 me.interfaceSelector.setNode(node);
-- 
2.47.3