Re: [pve-devel] [PATCH v4 pve-manager 19/33] sdn: subnet: add panel for editing dhcp ranges

[Dominik Csapak <d.csapak@proxmox.com>]

hi, a few issues here:

high level:

adding/modifying/deleting dhcp ranges does not trigger form 'isDirty'
check properly, leading to me unable to add dhcp ranges
to an existing subnet without also changing something else on
the first tab (there are probably some 'checkChange' triggers missing?)

also i can send invalid data because the 'getErrors' function is not implemented
i don't think we should be able to do this

also i'd show the dhcp ranges in the grid too, even if it's just
a hidden by default

remaining comments inline:

On 11/17/23 12:39, Stefan Hanreich wrote:
> Signed-off-by: Stefan Hanreich <s.hanreich@proxmox.com>
> ---
>   www/manager6/Makefile          |   1 +
>   www/manager6/sdn/SubnetEdit.js | 160 ++++++++++++++++++++++++++++++++-
>   2 files changed, 160 insertions(+), 1 deletion(-)
> 
> diff --git a/www/manager6/Makefile b/www/manager6/Makefile
> index dccd2ba1c..093452cd7 100644
> --- a/www/manager6/Makefile
> +++ b/www/manager6/Makefile
> @@ -274,6 +274,7 @@ JSSRC= 							\
>   	sdn/ZoneContentView.js				\
>   	sdn/ZoneContentPanel.js				\
>   	sdn/ZoneView.js					\
> +	sdn/IpamEdit.js					\
>   	sdn/OptionsPanel.js				\
>   	sdn/controllers/Base.js				\
>   	sdn/controllers/EvpnEdit.js			\
> diff --git a/www/manager6/sdn/SubnetEdit.js b/www/manager6/sdn/SubnetEdit.js
> index b9825d2a3..4fe16ab92 100644
> --- a/www/manager6/sdn/SubnetEdit.js
> +++ b/www/manager6/sdn/SubnetEdit.js
> @@ -56,6 +56,147 @@ Ext.define('PVE.sdn.SubnetInputPanel', {
>       ],
>   });
>   
> +Ext.define('PVE.sdn.SubnetDhcpRangePanel', {
> +    extend: 'Ext.form.FieldContainer',
> +    mixins: ['Ext.form.field.Field'],
> +
> +    initComponent: function() {
> +	let me = this;
> +
> +	me.callParent();
> +	me.initField();
> +    },
> +
> +    getValue: function() {
> +	let me = this;
> +	let store = me.lookup('grid').getStore();
> +
> +	let data = [];
> +
> +	store.getData()
> +	    .each((item) =>
> +		data.push(`start-address=${item.data['start-address']},end-address=${item.data['end-address']}`),
> +	    );

i'd not indent the 'each', because then you have one level less for the 'data.push'

> +
> +	return data;
> +    },
> +
> +    getSubmitData: function() {
> +	let me = this;
> +
> +	let data = {};
> +	let value = me.getValue();
> +
> +	if (value.length) {
> +	    data[me.getName()] = value;
> +	}
> +
> +	return data;
> +    },
> +
> +    setValue: function(dhcpRanges) {
> +	let me = this;
> +	let store = me.lookup('grid').getStore();
> +	store.setData(dhcpRanges);
> +    },

not sure if it's because of this, but it seems not to reset properly
the field always becomes empty but still has the reset enabled

> +
> +    getErrors: function() {
> +	let me = this;
> +        let errors = [];
> +
> +	return errors;
> +    },

please implement this (even if rudimentary) so users cannot send
invalid values

> +
> +    controller: {
> +	xclass: 'Ext.app.ViewController',
> +
> +	addRange: function() {
> +	    let me = this;
> +	    me.lookup('grid').getStore().add({});


i guess here would be a good place to add a 'me.getView().checkChange()'


> +	},
> +
> +	removeRange: function(field) {
> +	    let me = this;
> +	    let record = field.getWidgetRecord();
> +
> +	    me.lookup('grid').getStore().remove(record);


here too

> +	},
> +
> +	onValueChange: function(field, value) {
> +	    let me = this;
> +	    let record = field.getWidgetRecord();
> +	    let column = field.getWidgetColumn();
> +
> +	    record.set(column.dataIndex, value);
> +	    record.commit();


and here too


> +	},
> +
> +	control: {
> +	    'grid button': {
> +		click: 'removeRange',
> +	    },
> +	    'field': {
> +		change: 'onValueChange',
> +	    },
> +	},
> +    },
> +
> +    items: [
> +	{
> +	    xtype: 'grid',
> +	    reference: 'grid',
> +	    scrollable: true,
> +	    store: {
> +		fields: ['start-address', 'end-address'],
> +	    },
> +	    columns: [
> +		{
> +		    text: gettext('Start Address'),
> +		    xtype: 'widgetcolumn',
> +		    dataIndex: 'start-address',
> +		    flex: 1,
> +		    widget: {
> +			xtype: 'textfield',
> +			vtype: 'IP64Address',
> +		    },
> +		},
> +		{
> +		    text: gettext('End Address'),
> +		    xtype: 'widgetcolumn',
> +		    dataIndex: 'end-address',
> +		    flex: 1,
> +		    widget: {
> +			xtype: 'textfield',
> +			vtype: 'IP64Address',
> +		    },
> +		},
> +		{
> +		    xtype: 'widgetcolumn',
> +		    width: 40,
> +		    widget: {
> +			xtype: 'button',
> +			iconCls: 'fa fa-trash-o',
> +		    },
> +		},
> +	    ],
> +	},
> +	{
> +	    xtype: 'container',
> +	    layout: {
> +		type: 'hbox',
> +	    },
> +	    items: [
> +		{
> +		    xtype: 'button',
> +		    text: gettext('Add'),
> +		    iconCls: 'fa fa-plus-circle',
> +		    handler: 'addRange',
> +		},
> +	    ],
> +	},
> +    ],
> +});
> +
>   Ext.define('PVE.sdn.SubnetEdit', {
>       extend: 'Proxmox.window.Edit',
>   
> @@ -67,6 +208,8 @@ Ext.define('PVE.sdn.SubnetEdit', {
>   
>       base_url: undefined,
>   
> +    bodyPadding: 0,
> +
>       initComponent: function() {
>   	var me = this;
>   
> @@ -82,11 +225,22 @@ Ext.define('PVE.sdn.SubnetEdit', {
>   
>   	let ipanel = Ext.create('PVE.sdn.SubnetInputPanel', {
>   	    isCreate: me.isCreate,
> +	    title: gettext('General'),
> +	});
> +
> +	let dhcpPanel = Ext.create('PVE.sdn.SubnetDhcpRangePanel', {
> +	    isCreate: me.isCreate,
> +	    title: gettext('DHCP Ranges'),
> +	    name: 'dhcp-range',
>   	});
>   
>   	Ext.apply(me, {
>   	    items: [
> -		ipanel,
> +		{
> +		    xtype: 'tabpanel',
> +		    bodyPadding: 10,
> +		    items: [ipanel, dhcpPanel],
> +		},
>   	    ],
>   	});
>   
> @@ -97,6 +251,10 @@ Ext.define('PVE.sdn.SubnetEdit', {
>   		success: function(response, options) {
>   		    let values = response.result.data;
>   		    ipanel.setValues(values);
> +
> +		    if (values['dhcp-range']) {
> +			dhcpPanel.setValue(values['dhcp-range']);
> +		    }
>   		},
>   	    });
>   	}