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

[Stefan Reiter]

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