[pve-devel] [PATCH widget-toolkit v3] fix #3892: Network: add bridge vids field for bridge_vids

[Aaron Lauterer]

The new optional bridge_vids field allows to set that property via the
GUI. Since the backend needs to support it, the field needs to be
explicitly enabled.

For now, Proxmox VE (PVE) is the use case.

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---
changes since v2:
* added validation code following how it is implemented in the API

 src/node/NetworkEdit.js | 62 +++++++++++++++++++++++++++++++++++++++++
 src/node/NetworkView.js |  5 ++++
 2 files changed, 67 insertions(+)

diff --git a/src/node/NetworkEdit.js b/src/node/NetworkEdit.js
index 27c1baf..8c1b135 100644
--- a/src/node/NetworkEdit.js
+++ b/src/node/NetworkEdit.js
@@ -2,6 +2,9 @@ Ext.define('Proxmox.node.NetworkEdit', {
     extend: 'Proxmox.window.Edit',
     alias: ['widget.proxmoxNodeNetworkEdit'],
 
+    // Enable to show the VLAN ID field
+    bridge_set_vids: false,
+
     initComponent: function() {
 	let me = this;
 
@@ -57,11 +60,67 @@ Ext.define('Proxmox.node.NetworkEdit', {
 	}
 
 	if (me.iftype === 'bridge') {
+	    let vids = Ext.create('Ext.form.field.Text', {
+		fieldLabel: gettext('Bridge VIDS'),
+		name: 'bridge_vids',
+		emptyText: '2-4094',
+		disabled: true,
+		autoEl: {
+		    tag: 'div',
+		    'data-qtip': gettext('Space-separated list of VLANs and ranges, for example: 2 4 100-200'),
+		},
+		validator: function(value) {
+		    if (!value) { return true; } // Empty
+		    let result = true;
+
+		    let vid_list = value.split(' ');
+
+		    let checkVid = function(tag) {
+			if (tag < 2 || tag > 4094) {
+			    return `not a valid VLAN ID '${tag}'`;
+			}
+			return true;
+		    };
+
+		    for (const vid of vid_list) {
+			if (!vid) {
+			    continue;
+			}
+			let res = vid.match(/^(\d+)([-](\d+))?$/i);
+			if (!res) {
+			    return `not a valid VLAN configuration '${vid}'`;
+			}
+			let start = Number(res[1]);
+			let end = Number(res[3]);
+
+			if (start) {
+			    result = checkVid(start);
+			    if (result !== true) { return result; }
+			}
+			if (end) {
+			    result = checkVid(end);
+			    if (result !== true) { return result; }
+			}
+
+			if (start >= end) {
+			    return `VID range must go from lower to higher tag: '${vid}'`;
+			}
+		    }
+		    return true;
+		},
+	    });
 	    column2.push({
 		xtype: 'proxmoxcheckbox',
 		fieldLabel: gettext('VLAN aware'),
 		name: 'bridge_vlan_aware',
 		deleteEmpty: !me.isCreate,
+		listeners: {
+		    change: function(f, newVal) {
+			if (me.bridge_set_vids) {
+			    vids.setDisabled(!newVal);
+			}
+		    },
+		},
 	    });
 	    column2.push({
 		xtype: 'textfield',
@@ -72,6 +131,9 @@ Ext.define('Proxmox.node.NetworkEdit', {
 		    'data-qtip': gettext('Space-separated list of interfaces, for example: enp0s0 enp1s0'),
 		},
 	    });
+	    if (me.bridge_set_vids) {
+		advancedColumn2.push(vids);
+	    }
 	} else if (me.iftype === 'OVSBridge') {
 	    column2.push({
 		xtype: 'textfield',
diff --git a/src/node/NetworkView.js b/src/node/NetworkView.js
index 1d67ac8..c08cbfa 100644
--- a/src/node/NetworkView.js
+++ b/src/node/NetworkView.js
@@ -33,6 +33,9 @@ Ext.define('Proxmox.node.NetworkView', {
 
     showApplyBtn: false,
 
+    // decides if VLAN IDs field for bridges is shown, depends on the product if needed
+    bridge_set_vids: false,
+
     initComponent: function() {
 	let me = this;
 
@@ -100,6 +103,7 @@ Ext.define('Proxmox.node.NetworkView', {
 		nodename: me.nodename,
 		iface: rec.data.iface,
 		iftype: rec.data.type,
+		bridge_set_vids: me.bridge_set_vids,
 		listeners: {
 		    destroy: () => reload(),
 		},
@@ -170,6 +174,7 @@ Ext.define('Proxmox.node.NetworkView', {
 		    nodename: me.nodename,
 		    iftype: iType,
 		    iface_default: findNextFreeInterfaceId(iDefault ?? iType),
+		    bridge_set_vids: me.bridge_set_vids,
 		    onlineHelp: 'sysadmin_network_configuration',
 		    listeners: {
 			destroy: () => reload(),
-- 
2.39.2