[PATCH pve-manager v5 18/21] ui: cpu flags selector: add CPU flag editor for custom models

[Arthur Bied-Charreton <a.bied-charreton@proxmox.com>]

Add CPU flag editor to the CPUTypeEdit component by extending the
VMCPUFlagSelector also used in the VM creation flow. This adds a config
field allowing to differentiate whether the component should display
only VM-specific flags, or all of them.

For each flag in the selector, also display which node(s) it is
available on.

In the VM ProcessorEdit panel, allow selecting the acceleration type
(kvm: 1/0). The selected value filters the available flags and is also
applied.

In the custom CPU model context, a radio group is added to filter by
acceleration type. It does not actually do anything besides filter the
flags, it is only there as a configuration helper.

Show unknown flags, i.e. flags that either the currently selected
acceleration type does not support or that do not exist at all, at the
top of the list to encourage users to reconsider whether they should be
set.

Based on & adapted from patch by Stefan Reiter:
https://lore.proxmox.com/pve-devel/20211028114150.3245864-10-s.reiter@proxmox.com

Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
 www/manager6/dc/CPUTypeEdit.js         |  46 ++++++++
 www/manager6/form/VMCPUFlagSelector.js | 141 +++++++++++++++++++------
 www/manager6/qemu/ProcessorEdit.js     |  42 ++++++++
 3 files changed, 198 insertions(+), 31 deletions(-)

diff --git a/www/manager6/dc/CPUTypeEdit.js b/www/manager6/dc/CPUTypeEdit.js
index 0b72d579..b1364bb3 100644
--- a/www/manager6/dc/CPUTypeEdit.js
+++ b/www/manager6/dc/CPUTypeEdit.js
@@ -87,6 +87,42 @@ Ext.define('PVE.dc.CPUTypeEdit', {
                     emptyText: gettext('None'),
                     maxLength: 12,
                 },
+                {
+                    xtype: 'radiogroup',
+                    fieldLabel: gettext('Acceleration'),
+                    layout: 'hbox',
+                    autoEl: {
+                        tag: 'span',
+                        'data-qtip': Ext.htmlEncode(
+                            gettext(
+                                'A custom CPU model using acceleration-specific flags can only be assigned to VMs configured with the matching acceleration type, i.e., "kvm: 1" for KVM, or "kvm: 0" for TCG.',
+                            ),
+                        ),
+                    },
+                    validateOnChange: false,
+                    items: [
+                        {
+                            boxLabel: 'KVM',
+                            inputValue: 1,
+                            name: 'kvm',
+                            checked: true,
+                            isFormField: false,
+                        },
+                        {
+                            boxLabel: 'TCG',
+                            inputValue: 0,
+                            name: 'kvm',
+                            margin: '0 0 0 10',
+                            isFormField: false,
+                        },
+                    ],
+                    listeners: {
+                        change: function (field, value) {
+                            let panel = field.up('pveCpuTypeEdit');
+                            panel.lookup('cpuFlags').setKvm(value.kvm);
+                        },
+                    },
+                },
             ],
             column2: [
                 {
@@ -102,6 +138,16 @@ Ext.define('PVE.dc.CPUTypeEdit', {
                     name: 'phys-bits',
                 },
             ],
+            columnB: [
+                {
+                    xtype: 'vmcpuflagselector',
+                    fieldLabel: gettext('Extra CPU flags'),
+                    name: 'flags',
+                    reference: 'cpuFlags',
+                    restrictToVMFlags: false,
+                    height: 380,
+                },
+            ],
         },
     ],
 });
diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js
index 6e49ea45..e08a911b 100644
--- a/www/manager6/form/VMCPUFlagSelector.js
+++ b/www/manager6/form/VMCPUFlagSelector.js
@@ -6,22 +6,29 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
         field: 'Ext.form.field.Field',
     },
 
+    config: {
+        // Show only the flags that may be set for a specific VM.
+        restrictToVMFlags: true,
+    },
+
     disableSelection: true,
     columnLines: false,
     selectable: false,
-    hideHeaders: true,
 
     scrollable: 'y',
     height: 200,
 
-    unkownFlags: [],
-
     emptyText: gettext('No CPU flags available'),
 
     store: {
-        type: 'store',
-        fields: ['name', { name: 'state', defaultValue: '=' }, 'description'],
-        autoLoad: true,
+        fields: [
+            'name',
+            { name: 'state', defaultValue: '=' },
+            'description',
+            'supported-on',
+            'unknown',
+        ],
+        autoLoad: false,
         proxy: {
             type: 'proxmox',
             url: '/api2/json/nodes/localhost/capabilities/qemu/cpu-flags',
@@ -30,16 +37,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
             update: function () {
                 this.commitChanges();
             },
-            refresh: function (store, eOpts) {
-                let me = this;
-                let view = me.view;
-
-                if (store.adjustedForValue !== view.value) {
-                    view.adjustStoreForValue();
-                }
-            },
         },
-        adjustedForValue: undefined,
     },
 
     getValue: function () {
@@ -64,49 +62,106 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
             }
         });
 
-        flags += me.unkownFlags.join(';');
-
         return flags;
     },
 
     setArch: function (arch) {
         let me = this;
         me.arch = arch;
-        let params = {};
+        let proxy = me.store.getProxy();
         if (arch) {
-            params.arch = arch;
+            proxy.setExtraParam('arch', arch);
+        } else {
+            delete proxy.extraParams.arch;
         }
-        me.store.getProxy().setExtraParams(params);
         me.store.reload();
     },
 
-    // Adjusts the store for the current value and determines the unkown flags based on what the
-    // store does not know.
+    setKvm: function (kvm) {
+        let me = this;
+        kvm = kvm ?? 1;
+        me.kvm = kvm;
+        let proxy = me.store.getProxy();
+        proxy.setExtraParam('accel', kvm === 1 ? 'kvm' : 'tcg');
+        me.store.reload();
+    },
+
+    // Adjusts the store for the current value. Flags not known to the API are added to the store
+    // as 'unknown' records so they stay visible and can be edited.
     adjustStoreForValue: function () {
         let me = this;
         let store = me.getStore();
         let value = me.value;
 
-        me.unkownFlags = [];
+        // Clear any previously added unknown records.
+        let unknownRecords = [];
+        let source = store.getDataSource();
+        source.each((rec) => {
+            if (rec.get('unknown')) {
+                unknownRecords.push(rec);
+            } else {
+                rec.set('state', '=');
+            }
+        });
+        store.remove(unknownRecords);
 
-        store.getData().each((rec) => rec.set('state', '='));
+        let newUnknownFlags = [];
+        let addUnknownFlag = function (flag, sign) {
+            newUnknownFlags.push({
+                name: flag,
+                state: sign,
+                // A TCG-only flag will be flagged as unknown when `accel` is set to `kvm` and vice-versa, hence the very general wording.
+                description: gettext(
+                    'This flag is not available for the selected acceleration type and/or not supported by any node in the cluster. It is very likely to lead to VM startup failure. You can remove it by setting it to "Default".',
+                ),
+                unknown: true,
+            });
+        };
 
         let flags = value ? value.split(';') : [];
         flags.forEach(function (flag) {
             let sign = flag.substr(0, 1);
             flag = flag.substr(1);
 
-            let rec = store.findRecord('name', flag, 0, false, true, true);
+            let rec = source.findBy((r) => r.get('name') === flag);
             if (rec !== null) {
-                rec.set('state', sign);
+                let supported = rec.get('supported-on');
+                // Treat flags that are set in the config but not supported anywhere as unknown
+                if (Array.isArray(supported) && supported.length === 0 && sign !== '=') {
+                    store.remove(rec);
+                    addUnknownFlag(flag, sign);
+                } else {
+                    rec.set('state', sign);
+                    rec.commit();
+                }
             } else {
-                me.unkownFlags.push(flag);
+                addUnknownFlag(flag, sign);
             }
         });
 
-        store.adjustedForValue = value;
-    },
+        // Make sure unknown flags are displayed at the top of the list
+        // so users reconsider them.
+        if (newUnknownFlags.length > 0) {
+            store.insert(0, newUnknownFlags);
+        }
 
+        // Ext.js uses buffered rendering [0] for larger lists like this one.
+        // AbstractView.refresh() [1], which was previously used here for refreshing,
+        // destroys and recreates all row elements but the buffered renderer only
+        // tracks a sliding window of DOM nodes, so the refresh skips rows outside
+        // the buffer, which leads to some elements not being fully rendered.
+        //
+        // Firing the 'refresh' event allows whatever view is currently rendering the
+        // table (i.e. buffered or not) to handle it accordingly.
+        //
+        // [0] https://docs.sencha.com/extjs/7.0.0/classic/Ext.grid.plugin.BufferedRenderer.html
+        // [1] https://docs.sencha.com/extjs/7.0.0/classic/Ext.view.AbstractView.html#method-refresh
+        store.fireEvent('refresh', store);
+    },
+    isDirty: function () {
+        let me = this;
+        return me.originalValue !== me.getValue();
+    },
     setValue: function (value) {
         let me = this;
 
@@ -122,6 +177,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
     },
     columns: [
         {
+            text: gettext('State'),
             dataIndex: 'state',
             renderer: function (v) {
                 switch (v) {
@@ -138,6 +194,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
             width: 65,
         },
         {
+            text: gettext('Value'),
             xtype: 'widgetcolumn',
             dataIndex: 'state',
             width: 95,
@@ -184,22 +241,44 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
             },
         },
         {
+            text: gettext('Flag'),
             dataIndex: 'name',
             width: 100,
         },
         {
+            text: gettext('Description'),
             dataIndex: 'description',
+            sortable: false,
+            cellWrap: true,
+            flex: 3,
+        },
+        {
+            text: gettext('Supported On'),
+            dataIndex: 'supported-on',
             cellWrap: true,
             flex: 1,
+            renderer: (v) => (Array.isArray(v) ? v.join(', ') : ''),
         },
     ],
-
     initComponent: function () {
         let me = this;
 
         me.value = me.originalValue = '';
-        me.store.view = me;
 
         me.callParent(arguments);
+
+        me.initialized = true;
+
+        me.getStore().on('load', function (store, _, success) {
+            if (success) {
+                me.adjustStoreForValue();
+                me.checkDirty();
+            }
+        });
+
+        if (!me.restrictToVMFlags) {
+            me.getStore().getProxy().setUrl('/api2/json/cluster/qemu/cpu-flags');
+            me.getStore().load();
+        }
     },
 });
diff --git a/www/manager6/qemu/ProcessorEdit.js b/www/manager6/qemu/ProcessorEdit.js
index 68caec16..e4cbce05 100644
--- a/www/manager6/qemu/ProcessorEdit.js
+++ b/www/manager6/qemu/ProcessorEdit.js
@@ -12,12 +12,14 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
             coreCount: 1,
             showCustomModelPermWarning: false,
             userIsRoot: false,
+            kvm: 1,
         },
         formulas: {
             totalCoreCount: (get) => get('socketCount') * get('coreCount'),
             cpuunitsDefault: (get) => (get('cgroupMode') === 1 ? 1024 : 100),
             cpuunitsMin: (get) => (get('cgroupMode') === 1 ? 2 : 1),
             cpuunitsMax: (get) => (get('cgroupMode') === 1 ? 262144 : 10000),
+            accel: (get) => (get('kvm') === 0 ? 'tcg' : 'kvm'),
         },
     },
 
@@ -117,6 +119,14 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
         me.lookup('cpuFlags').setArch(arch);
     },
 
+    setKvm: function (kvm) {
+        let me = this;
+        kvm = kvm ?? 1;
+        me.kvm = kvm;
+        me.getViewModel().set('kvm', kvm);
+        me.lookup('cpuFlags').setKvm(kvm);
+    },
+
     column1: [
         {
             xtype: 'proxmoxintegerfield',
@@ -241,6 +251,34 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
             name: 'numa',
             uncheckedValue: 0,
         },
+        {
+            xtype: 'proxmoxcheckbox',
+            fieldLabel: gettext('KVM hardware virtualization'),
+            name: 'kvm',
+            reference: 'kvmCheckbox',
+            defaultValue: 1,
+            checked: true,
+            uncheckedValue: 0,
+            listeners: {
+                change: function (field, value) {
+                    let panel = field.up('pveQemuProcessorPanel');
+                    let kvm = value ? 1 : 0;
+                    panel.getViewModel().set('kvm', kvm);
+                    panel.lookup('cpuFlags').setKvm(kvm);
+                },
+            },
+        },
+        {
+            xtype: 'displayfield',
+            userCls: 'pmx-hint',
+            value: gettext(
+                'TCG uses software emulation and is significantly slower than hardware-accelerated KVM.',
+            ),
+            hidden: true,
+            bind: {
+                hidden: '{kvm}',
+            },
+        },
     ],
     advancedColumnB: [
         {
@@ -252,6 +290,9 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
             xtype: 'vmcpuflagselector',
             reference: 'cpuFlags',
             name: 'flags',
+            bind: {
+                kvm: '{kvm}',
+            },
         },
     ],
 });
@@ -319,6 +360,7 @@ Ext.define('PVE.qemu.ProcessorEdit', {
                 }
                 me.setValues(data);
                 ipanel.setArch(arch);
+                ipanel.setKvm(data.kvm);
             },
         });
     },
-- 
2.47.3