[pve-devel] [PATCH manager] Split CPU Model Selector into visual sections

[Stefan Reiter]

Most of the code is adapted from KVComboBox, from which it inherited
before, with some generic code removed.

The templating code adds a header for every group transition it
encounters, thus providing support for arbitrary groups (e.g. custom
models in the future).

Functionality is the same as before.

Signed-off-by: Stefan Reiter <s.reiter at proxmox.com>
---

The list is only going to grow I suspect, especially with custom models
potentially being available in the future. Let's give the users some eye-candy
to more easily parse what they see :)


 www/css/ext6-pve.css                  |  11 ++
 www/manager6/form/CPUModelSelector.js | 151 ++++++++++++++++++++------
 2 files changed, 128 insertions(+), 34 deletions(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 535f8e60..70582f53 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -631,3 +631,14 @@ table.osds td:first-of-type {
     background-color: rgb(245, 245, 245);
     color: #000;
 }
+
+/* CPUModelSelector header & item style */
+.cpumodel-group-header {
+    padding: 4px 4px 4px 7px;
+    font-weight: bold;
+    border-bottom: 1px solid #ddd;
+}
+
+.cpumodel-item:not(:first-child) {
+    padding: 0 0 0 10px;
+}
diff --git a/www/manager6/form/CPUModelSelector.js b/www/manager6/form/CPUModelSelector.js
index 9eb5b0e9..c5ad38d6 100644
--- a/www/manager6/form/CPUModelSelector.js
+++ b/www/manager6/form/CPUModelSelector.js
@@ -1,38 +1,121 @@
 Ext.define('PVE.form.CPUModelSelector', {
-    extend: 'Proxmox.form.KVComboBox',
+    extend: 'Ext.form.field.ComboBox',
     alias: ['widget.CPUModelSelector'],
     comboItems: [
-	['__default__', Proxmox.Utils.defaultText + ' (kvm64)'],
-	['486', '486'],
-	['athlon', 'athlon'],
-	['core2duo', 'core2duo'],
-	['coreduo', 'coreduo'],
-	['kvm32', 'kvm32'],
-	['kvm64', 'kvm64'],
-	['pentium', 'pentium'],
-	['pentium2', 'pentium2'],
-	['pentium3', 'pentium3'],
-	['phenom', 'phenom'],
-	['qemu32', 'qemu32'],
-	['qemu64', 'qemu64'],
-	['Conroe', 'Conroe'],
-	['Penryn', 'Penryn'],
-	['Nehalem', 'Nehalem'],
-	['Westmere', 'Westmere'],
-	['SandyBridge', 'SandyBridge'],
-	['IvyBridge', 'IvyBridge'],
-	['Haswell', 'Haswell'],
-	['Haswell-noTSX','Haswell-noTSX'],
-	['Broadwell', 'Broadwell'],
-	['Broadwell-noTSX','Broadwell-noTSX'],
-	['Skylake-Client','Skylake-Client'],
-	['Opteron_G1', 'Opteron_G1'],
-	['Opteron_G2', 'Opteron_G2'],
-	['Opteron_G3', 'Opteron_G3'],
-	['Opteron_G4', 'Opteron_G4'],
-	['Opteron_G5', 'Opteron_G5'],
-	['EPYC', 'EPYC'],
-	['host', 'host']
-
-    ]
+	// default value has to be first!
+	[Proxmox.Utils.defaultText + ' (kvm64)', ''],
+
+	['486', 'Intel'],
+	['athlon', 'Intel'],
+	['core2duo', 'Intel'],
+	['coreduo', 'Intel'],
+	['pentium', 'Intel'],
+	['pentium2', 'Intel'],
+	['pentium3', 'Intel'],
+	['Conroe', 'Intel'],
+	['Penryn', 'Intel'],
+	['Nehalem', 'Intel'],
+	['Westmere', 'Intel'],
+	['SandyBridge', 'Intel'],
+	['IvyBridge', 'Intel'],
+	['Haswell', 'Intel'],
+	['Haswell-noTSX', 'Intel'],
+	['Broadwell', 'Intel'],
+	['Broadwell-noTSX', 'Intel'],
+	['Skylake-Client', 'Intel'],
+
+	['phenom', 'AMD'],
+	['Opteron_G1', 'AMD'],
+	['Opteron_G2', 'AMD'],
+	['Opteron_G3', 'AMD'],
+	['Opteron_G4', 'AMD'],
+	['Opteron_G5', 'AMD'],
+	['EPYC', 'AMD'],
+
+	['kvm32', 'Other'],
+	['kvm64', 'Other'],
+	['qemu32', 'Other'],
+	['qemu64', 'Other'],
+	['host', 'Other']
+    ],
+
+    queryMode: 'local',
+    displayField: 'key',
+    valueField: 'key',
+    editable: false,
+    tpl: Ext.create('Ext.XTemplate',
+	'{[this.currentKey = ""]}' +
+	'<tpl for=".">' +
+	    '<tpl if="this.showHeader(value)">' +
+		'<div class="cpumodel-group-header">{value}</div>' +
+	    '</tpl>' +
+	    '<div class="x-boundlist-item cpumodel-item">{key}</div>' +
+	'</tpl>',
+	{
+	    showHeader: function(key){
+		if (this.currentKey != key) {
+		    this.currentKey = key;
+		    return true;
+		}
+		return false;
+	    }
+	}
+    ),
+
+    // overide framework function to allow "Default" value
+    getSubmitData: function() {
+	var me = this,
+	    data = null,
+	    val;
+
+	if (!me.disabled && me.submitValue) {
+	    val = me.getSubmitValue();
+	    data = {};
+	    if (val !== null && val !== me.comboItems[0][0]) {
+		data[me.getName()] = val;
+	    } else {
+		data['delete'] = me.getName();
+	    }
+	}
+
+	return data;
+    },
+
+    validator: function(val) {
+	var me = this;
+
+	if (val === null || val === '') {
+	    return false;
+	}
+
+	if (me.store.getCount() > 0) {
+	    var items = me.store.getData().collect('key', 'data');
+	    return Ext.Array.contains(items, val);
+	}
+
+	// should not happen
+	/*jslint confusion: true */
+	return "no valid values found";
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.store = Ext.create('Ext.data.ArrayStore', {
+	    model: 'KeyValue',
+	    data: me.comboItems
+	});
+
+	me.callParent();
+    },
+
+    setValue: function(value) {
+	var me = this;
+
+	if (value === '__default__') {
+	    value = me.comboItems[0][0];
+	}
+
+	me.callParent([value]);
+    }
 });
-- 
2.20.1