[pve-devel] [PATCH pve-manager] sdn: vnets: Hide irrelevant fields depending on zone type

* [pve-devel] [PATCH pve-manager] sdn: vnets: Hide irrelevant fields depending on zone type
@ 2023-12-22 10:43 Stefan Hanreich
  2024-02-22 13:22 ` Stefan Hanreich
                   ` (2 more replies)
  0 siblings, 3 replies; 5+ messages in thread
From: Stefan Hanreich @ 2023-12-22 10:43 UTC (permalink / raw)
  To: pve-devel

Not all fields in the VnetEdit dialog are necessary for every zone
type. This lead to confusion for some users. Hide fields in the
VNetEdit dialog depending on which kind of zone is selected in order
to prevent potential confusion.

Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
---
 www/manager6/form/SDNZoneSelector.js |  2 +-
 www/manager6/sdn/VnetEdit.js         | 40 ++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/www/manager6/form/SDNZoneSelector.js b/www/manager6/form/SDNZoneSelector.js
index 28c3457d2..0d0327529 100644
--- a/www/manager6/form/SDNZoneSelector.js
+++ b/www/manager6/form/SDNZoneSelector.js
@@ -40,7 +40,7 @@ Ext.define('PVE.form.SDNZoneSelector', {
 }, function() {
     Ext.define('pve-sdn-zone', {
 	extend: 'Ext.data.Model',
-	fields: ['zone'],
+	fields: ['zone', 'type'],
 	proxy: {
             type: 'proxmox',
 	    url: "/api2/json/cluster/sdn/zones",
diff --git a/www/manager6/sdn/VnetEdit.js b/www/manager6/sdn/VnetEdit.js
index cdd83ed40..9fb6cd6c7 100644
--- a/www/manager6/sdn/VnetEdit.js
+++ b/www/manager6/sdn/VnetEdit.js
@@ -12,6 +12,13 @@ Ext.define('PVE.sdn.VnetInputPanel', {
 	return values;
     },
 
+    initComponent: function() {
+	let me = this;
+
+	me.callParent();
+	me.setZoneType(undefined);
+    },
+
     items: [
 	{
 	    xtype: 'pmxDisplayEditField',
@@ -40,9 +47,21 @@ Ext.define('PVE.sdn.VnetInputPanel', {
 	    name: 'zone',
 	    value: '',
 	    allowBlank: false,
+	    listeners: {
+		change: function() {
+		    let me = this;
+
+		    let record = me.findRecordByValue(me.value);
+		    let zoneType = record?.data?.type;
+
+		    let panel = me.up('panel');
+		    panel.setZoneType(zoneType);
+		},
+	    },
 	},
 	{
 	    xtype: 'proxmoxintegerfield',
+	    itemId: 'sdnVnetTagField',
 	    name: 'tag',
 	    minValue: 1,
 	    maxValue: 16777216,
@@ -54,6 +73,7 @@ Ext.define('PVE.sdn.VnetInputPanel', {
 	},
 	{
 	    xtype: 'proxmoxcheckbox',
+	    itemId: 'sdnVnetVlanAwareField',
 	    name: 'vlanaware',
 	    uncheckedValue: null,
 	    checked: false,
@@ -63,6 +83,26 @@ Ext.define('PVE.sdn.VnetInputPanel', {
 	    },
 	},
     ],
+
+    setZoneType: function(zoneType) {
+	let me = this;
+
+	let tagField = me.down('#sdnVnetTagField');
+	if (!zoneType || zoneType === 'simple') {
+	    tagField.setVisible(false);
+	    tagField.setValue('');
+	} else {
+	    tagField.setVisible(true);
+	}
+
+	let vlanField = me.down('#sdnVnetVlanAwareField');
+	if (!zoneType || zoneType === 'evpn') {
+	    vlanField.setVisible(false);
+	    vlanField.setValue('');
+	} else {
+	    vlanField.setVisible(true);
+	}
+    },
 });
 
 Ext.define('PVE.sdn.VnetEdit', {
-- 
2.39.2




^ permalink raw reply	[flat|nested] 5+ messages in thread