[pve-devel] [PATCH manager 1/2] ui: fw: generalize `BridgeSelector` into network interface selector

[Christoph Heiss]

This makes it optional to specify a specific type of bridge/network and
renames the component to `NetworkInterfaceSelector`, to better fit it's
new role.

Allows reusing the component in other places, where the user should be
presented a choice of e.g. all available network interfaces on a node.

No functional changes.

Signed-off-by: Christoph Heiss <c.heiss at proxmox.com>
---
 www/manager6/Makefile                         |  2 +-
 www/manager6/form/BridgeSelector.js           | 71 -----------------
 www/manager6/form/NetworkInterfaceSelector.js | 79 +++++++++++++++++++
 www/manager6/lxc/Network.js                   |  3 +-
 www/manager6/qemu/NetworkEdit.js              |  3 +-
 5 files changed, 84 insertions(+), 74 deletions(-)
 delete mode 100644 www/manager6/form/BridgeSelector.js
 create mode 100644 www/manager6/form/NetworkInterfaceSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2b577c8e..a2f5116c 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -20,7 +20,6 @@ JSSRC= 							\
 	form/AgentFeatureSelector.js			\
 	form/BackupModeSelector.js			\
 	form/BandwidthSelector.js			\
-	form/BridgeSelector.js				\
 	form/BusTypeSelector.js				\
 	form/CPUModelSelector.js			\
 	form/CacheTypeSelector.js			\
@@ -47,6 +46,7 @@ JSSRC= 							\
 	form/MDevSelector.js				\
 	form/MemoryField.js				\
 	form/NetworkCardSelector.js			\
+	form/NetworkInterfaceSelector.js		\
 	form/NodeSelector.js				\
 	form/PCISelector.js				\
 	form/PermPathSelector.js			\
diff --git a/www/manager6/form/BridgeSelector.js b/www/manager6/form/BridgeSelector.js
deleted file mode 100644
index 350588cd..00000000
--- a/www/manager6/form/BridgeSelector.js
+++ /dev/null
@@ -1,71 +0,0 @@
-Ext.define('PVE.form.BridgeSelector', {
-    extend: 'Proxmox.form.ComboGrid',
-    alias: ['widget.PVE.form.BridgeSelector'],
-
-    bridgeType: 'any_bridge', // bridge, OVSBridge or any_bridge
-
-    store: {
-	fields: ['iface', 'active', 'type'],
-	filterOnLoad: true,
-	sorters: [
-	    {
-		property: 'iface',
-		direction: 'ASC',
-	    },
-	],
-    },
-    valueField: 'iface',
-    displayField: 'iface',
-    listConfig: {
-	columns: [
-	    {
-		header: gettext('Bridge'),
-		dataIndex: 'iface',
-		hideable: false,
-		width: 100,
-	    },
-	    {
-		header: gettext('Active'),
-		width: 60,
-		dataIndex: 'active',
-		renderer: Proxmox.Utils.format_boolean,
-	    },
-	    {
-		header: gettext('Comment'),
-		dataIndex: 'comments',
-		renderer: Ext.String.htmlEncode,
-		flex: 1,
-	    },
-	],
-    },
-
-    setNodename: function(nodename) {
-	var me = this;
-
-	if (!nodename || me.nodename === nodename) {
-	    return;
-	}
-
-	me.nodename = nodename;
-
-	me.store.setProxy({
-	    type: 'proxmox',
-	    url: '/api2/json/nodes/' + me.nodename + '/network?type=' +
-		me.bridgeType,
-	});
-
-	me.store.load();
-    },
-
-    initComponent: function() {
-	var me = this;
-
-	var nodename = me.nodename;
-	me.nodename = undefined;
-
-        me.callParent();
-
-	me.setNodename(nodename);
-    },
-});
-
diff --git a/www/manager6/form/NetworkInterfaceSelector.js b/www/manager6/form/NetworkInterfaceSelector.js
new file mode 100644
index 00000000..4c59b73e
--- /dev/null
+++ b/www/manager6/form/NetworkInterfaceSelector.js
@@ -0,0 +1,79 @@
+Ext.define('PVE.form.NetworkInterfaceSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: ['widget.PVE.form.NetworkInterfaceSelector'],
+
+    // Any of 'bridge, bond, eth, alias, vlan, OVSBridge, OVSBond, OVSPort, OVSIntPort, any_bridge'
+    // By default, all network interfaces are shown
+    networkType: undefined,
+
+    store: {
+	fields: ['iface', 'active', 'type'],
+	filterOnLoad: true,
+	sorters: [
+	    {
+		property: 'iface',
+		direction: 'ASC',
+	    },
+	],
+    },
+    valueField: 'iface',
+    displayField: 'iface',
+
+    setNodename: function(nodename) {
+	var me = this;
+
+	if (!nodename || me.nodename === nodename) {
+	    return;
+	}
+
+	me.nodename = nodename;
+
+	const type = me.networkType ? `?type=${me.networkType}` : '';
+
+	me.store.setProxy({
+	    type: 'proxmox',
+	    url: `/api2/json/nodes/${me.nodename}/network${type}`,
+	});
+
+	me.store.load();
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	var nodename = me.nodename;
+	me.nodename = undefined;
+
+	const isBridge = ['bridge', 'OVSBridge', 'any_bridge'].includes(me.networkType);
+
+	Ext.apply(me, {
+	    listConfig: {
+		columns: [
+		    {
+			header: isBridge ? gettext('Bridge') : gettext('Interface'),
+			dataIndex: 'iface',
+			hideable: false,
+			width: 100,
+		    },
+		    {
+			header: gettext('Active'),
+			width: 60,
+			dataIndex: 'active',
+			renderer: Proxmox.Utils.format_boolean,
+		    },
+		    {
+			header: gettext('Comment'),
+			dataIndex: 'comments',
+			renderer: Ext.String.htmlEncode,
+			flex: 1,
+		    },
+		],
+	    },
+	});
+
+	me.callParent();
+
+	me.setNodename(nodename);
+    },
+});
+
diff --git a/www/manager6/lxc/Network.js b/www/manager6/lxc/Network.js
index b2cd9410..2581ecd3 100644
--- a/www/manager6/lxc/Network.js
+++ b/www/manager6/lxc/Network.js
@@ -110,12 +110,13 @@ Ext.define('PVE.lxc.NetworkInputPanel', {
 		emptyText: 'auto',
 	    },
 	    {
-		xtype: 'PVE.form.BridgeSelector',
+		xtype: 'PVE.form.NetworkInterfaceSelector',
 		name: 'bridge',
 		nodename: me.nodename,
 		fieldLabel: gettext('Bridge'),
 		value: cdata.bridge,
 		allowBlank: false,
+		networkType: 'any_bridge',
 	    },
 	    {
 		xtype: 'pveVlanField',
diff --git a/www/manager6/qemu/NetworkEdit.js b/www/manager6/qemu/NetworkEdit.js
index 4917eba5..b11a1ca0 100644
--- a/www/manager6/qemu/NetworkEdit.js
+++ b/www/manager6/qemu/NetworkEdit.js
@@ -76,12 +76,13 @@ Ext.define('PVE.qemu.NetworkInputPanel', {
 	me.column1 = [];
 	me.column2 = [];
 
-	me.bridgesel = Ext.create('PVE.form.BridgeSelector', {
+	me.bridgesel = Ext.create('PVE.form.NetworkInterfaceSelector', {
 	    name: 'bridge',
 	    fieldLabel: gettext('Bridge'),
 	    nodename: me.nodename,
 	    autoSelect: true,
 	    allowBlank: false,
+	    networkType: 'any_bridge',
 	});
 
 	me.column1 = [
-- 
2.39.2