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

[Theodor Fumics]

I’ve tested the changes thoroughly. The fields in the VnetEdit dialog
now correctly hide based on the selected zone type. For the EVPN zone
type, the VLAN Aware field is hidden, and for the simple zone type, the
tag field is correctly hidden. Everything is working perfectly.

Tested-by: Theodor Fumics <theodor.fumics at gmx.net>
Reviewed-by: Theodor Fumics <theodor.fumics at gmx.net>

On 12/22/23 11:43, Stefan Hanreich wrote:
> 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 at 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', {