[pve-devel] [PATCH manager 4/6] ui: ProcessorEdit: fix total core calculation and use view model

[Dominik Csapak]

nice that you cleaned up the panel :) (LGTM)

but the actual fix would be much easier ;)

since the 'total cores' is just informational
we can set
'isFormField: false'
on the totalcore field
which then will not be reset (and not tracked as a formfield)
if you do this you can drop the whole setValues function

On 4/22/20 3:39 PM, Stefan Reiter wrote:
> Clean up the code in ProcessorEdit with a view model and fix a bug while at
> it - previously, pressing the 'Reset' button on the form would always set
> the value of the total core count field to 1.
> 
> Signed-off-by: Stefan Reiter <s.reiter at proxmox.com>
> ---
> 
> The fix is technically only the setValues part, but I started off thinking that
> using a view model would also fix it - it did not, but I still think it looks
> nicer than before.
> 
>   www/manager6/qemu/ProcessorEdit.js | 65 ++++++++++++++++++------------
>   1 file changed, 39 insertions(+), 26 deletions(-)
> 
> diff --git a/www/manager6/qemu/ProcessorEdit.js b/www/manager6/qemu/ProcessorEdit.js
> index bc17e152..d555b2d8 100644
> --- a/www/manager6/qemu/ProcessorEdit.js
> +++ b/www/manager6/qemu/ProcessorEdit.js
> @@ -5,28 +5,18 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   
>       insideWizard: false,
>   
> -    controller: {
> -	xclass: 'Ext.app.ViewController',
> -
> -	updateCores: function() {
> -	    var me = this.getView();
> -	    var sockets = me.down('field[name=sockets]').getValue();
> -	    var cores = me.down('field[name=cores]').getValue();
> -	    me.down('field[name=totalcores]').setValue(sockets*cores);
> -	    var vcpus = me.down('field[name=vcpus]');
> -	    vcpus.setMaxValue(sockets*cores);
> -	    vcpus.setEmptyText(sockets*cores);
> -	    vcpus.validate();
> +    viewModel: {
> +	data: {
> +	    socketCount: 1,
> +	    coreCount: 1,
>   	},
> +	formulas: {
> +	    totalCoreCount: get => get('socketCount') * get('coreCount'),
> +	},
> +    },
>   
> -	control: {
> -	    'field[name=sockets]': {
> -		change: 'updateCores'
> -	    },
> -	    'field[name=cores]': {
> -		change: 'updateCores'
> -	    }
> -	}
> +    controller: {
> +	xclass: 'Ext.app.ViewController',
>       },
>   
>       onGetValues: function(values) {
> @@ -76,6 +66,16 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   	return values;
>       },
>   
> +    setValues: function(values) {
> +	let me = this;
> +
> +	// set the original value here, else 'reset' clears the field
> +	let totalCoreDisplay = me.lookupReference('totalcores');
> +	totalCoreDisplay.originalValue = values.cores * values.sockets;
> +
> +	me.callParent([values]);
> +    },
> +
>       cpu: {},
>   
>       column1: [
> @@ -86,7 +86,10 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   	    maxValue: 4,
>   	    value: '1',
>   	    fieldLabel: gettext('Sockets'),
> -	    allowBlank: false
> +	    allowBlank: false,
> +	    bind: {
> +		value: '{socketCount}',
> +	    },
>   	},
>   	{
>   	    xtype: 'proxmoxintegerfield',
> @@ -95,8 +98,11 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   	    maxValue: 128,
>   	    value: '1',
>   	    fieldLabel: gettext('Cores'),
> -	    allowBlank: false
> -	}
> +	    allowBlank: false,
> +	    bind: {
> +		value: '{coreCount}',
> +	    },
> +	},
>       ],
>   
>       column2: [
> @@ -109,8 +115,11 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   	    xtype: 'displayfield',
>   	    fieldLabel: gettext('Total cores'),
>   	    name: 'totalcores',
> -	    value: '1'
> -	}
> +	    reference: 'totalcores',
> +	    bind: {
> +		value: '{totalCoreCount}',
> +	    },
> +	},
>       ],
>   
>       advancedColumn1: [
> @@ -123,7 +132,11 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
>   	    fieldLabel: gettext('VCPUs'),
>   	    deleteEmpty: true,
>   	    allowBlank: true,
> -	    emptyText: '1'
> +	    emptyText: '1',
> +	    bind: {
> +		emptyText: '{totalCoreCount}',
> +		maxValue: '{totalCoreCount}',
> +	    },
>   	},
>   	{
>   	    xtype: 'numberfield',
>