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

[Stefan Hanreich]

ping

still applies on current master

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', {