[PATCH pve-manager v4 13/17] 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 config
fields allowing to differentiate whether the component is being used in
the VM creation wizard, processor edit window, or for a custom CPU
model.

For each flag in the selector, also display which node(s) it is available
on, and add a radio group allowing to select which acceleration type
flag availability should be checked for.

In the VM processor edit window, pre-select the acceleration type based
on the value of `kvm` in the VM's config (`kvm` for `kvm: 1`, otherwise
`tcg`).

In the VM creation wizard, show VM-specific flags, allowing the user to
filter by acceleration type themselves.

In the custom CPU model creation/edit window, show all flags available
cluster-wide, allowing the user to filter by acceleration type.

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

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/css/ext6-pve.css                   |   4 +
 www/manager6/dc/CPUTypeEdit.js         |  11 +-
 www/manager6/form/CPUModelSelector.js  |   1 +
 www/manager6/form/VMCPUFlagSelector.js | 218 +++++++++++++++++++++----
 www/manager6/qemu/ProcessorEdit.js     |   6 +
 5 files changed, 210 insertions(+), 30 deletions(-)

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 27742a74..98f5e6ed 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -655,6 +655,10 @@ table.osds td:first-of-type {
     opacity: 0.3;
 }
 
+.x-toolbar .x-form-item-default.x-item-disabled {
+    opacity: 0.8;
+}
+
 .pmx-action-hidden:before {
     opacity: 0;
     cursor: default;
diff --git a/www/manager6/dc/CPUTypeEdit.js b/www/manager6/dc/CPUTypeEdit.js
index 594772ed..fe7652a3 100644
--- a/www/manager6/dc/CPUTypeEdit.js
+++ b/www/manager6/dc/CPUTypeEdit.js
@@ -26,7 +26,6 @@ Ext.define('PVE.dc.CPUTypeEdit', {
         isCreate: (get) => get('isCreate'),
     },
 
-
     items: [
         {
             xtype: 'inputpanel',
@@ -91,6 +90,16 @@ Ext.define('PVE.dc.CPUTypeEdit', {
                     name: 'phys-bits',
                 },
             ],
+            columnB: [
+                {
+                    xtype: 'vmcpuflagselector',
+                    fieldLabel: gettext('Extra CPU flags'),
+                    name: 'flags',
+                    restrictToVMFlags: false,
+                    height: 380,
+                    hideHeaders: false,
+                },
+            ],
         },
     ],
 });
diff --git a/www/manager6/form/CPUModelSelector.js b/www/manager6/form/CPUModelSelector.js
index a718d2ed..3b039dff 100644
--- a/www/manager6/form/CPUModelSelector.js
+++ b/www/manager6/form/CPUModelSelector.js
@@ -17,6 +17,7 @@ Ext.define('PVE.form.CPUModelSelector', {
     anyMatch: true,
     forceSelection: true,
     autoSelect: false,
+    triggerAction: 'query',
 
     deleteEmpty: true,
     config: {
diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js
index 6e49ea45..13a43210 100644
--- a/www/manager6/form/VMCPUFlagSelector.js
+++ b/www/manager6/form/VMCPUFlagSelector.js
@@ -6,6 +6,14 @@ 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,
+        // Acceleration type of the VM, 'kvm' or 'tcg', only used if
+        // restrictToVMFlags === true.
+        accel: null,
+    },
+
     disableSelection: true,
     columnLines: false,
     selectable: false,
@@ -14,14 +22,17 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
     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 +41,23 @@ 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,
+        filters: [
+            {
+                id: 'supported-filter',
+                filterFn: (rec) => {
+                    let state = rec.get('state');
+                    if (state && state !== '=') {
+                        return true;
+                    }
+                    if (rec.get('unknown')) {
+                        return true;
+                    }
+                    let s = rec.get('supported-on');
+                    return Array.isArray(s) && s.length > 0;
+                },
+            },
+        ],
     },
 
     getValue: function () {
@@ -64,32 +82,51 @@ 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.
+    // 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 = [];
+        store.getData().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) {
@@ -98,15 +135,32 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
 
             let rec = store.findRecord('name', flag, 0, false, true, true);
             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);
+        }
 
+        me.getView().refresh();
+    },
+    isDirty: function () {
+        let me = this;
+        return me.originalValue !== me.getValue();
+    },
     setValue: function (value) {
         let me = this;
 
@@ -122,6 +176,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
     },
     columns: [
         {
+            text: gettext('State'),
             dataIndex: 'state',
             renderer: function (v) {
                 switch (v) {
@@ -138,6 +193,7 @@ Ext.define('PVE.form.VMCPUFlagSelector', {
             width: 65,
         },
         {
+            text: gettext('Value'),
             xtype: 'widgetcolumn',
             dataIndex: 'state',
             width: 95,
@@ -184,22 +240,126 @@ 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(', ') : ''),
         },
     ],
-
+    updateAccel: function (accel) {
+        let me = this;
+        if (!me.initialized) {
+            return;
+        }
+        me.getStore().getProxy().setExtraParam('accel', accel);
+        me.getStore().load();
+    },
+    lockAccel: function (accel) {
+        let me = this;
+        let toolbar = me.down('toolbar[dock=top]');
+        let radiogroup = toolbar.down('radiogroup');
+        radiogroup.setValue({ accel });
+        radiogroup.setDisabled(true);
+        toolbar
+            .down('tbtext')
+            .getEl()
+            .set({
+                'data-qtip': gettext(
+                    "The acceleration type is determined by the VM's KVM setting and cannot be changed here.",
+                ),
+            });
+    },
     initComponent: function () {
         let me = this;
 
         me.value = me.originalValue = '';
-        me.store.view = me;
+
+        me.dockedItems = [
+            {
+                xtype: 'toolbar',
+                dock: 'top',
+                hidden: false,
+                items: [
+                    {
+                        xtype: 'tbtext',
+                        text: gettext('Acceleration:'),
+                        autoEl: {
+                            tag: 'span',
+                            'data-qtip': 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.',
+                            ),
+                        },
+                    },
+                    {
+                        xtype: 'radiogroup',
+                        layout: 'hbox',
+                        validateOnChange: false,
+                        items: [
+                            {
+                                boxLabel: 'KVM',
+                                inputValue: 'kvm',
+                                name: 'accel',
+                                checked: true,
+                                isFormField: false,
+                            },
+                            {
+                                boxLabel: 'TCG',
+                                inputValue: 'tcg',
+                                name: 'accel',
+                                margin: '0 0 0 10',
+                                isFormField: false,
+                            },
+                        ],
+                        listeners: {
+                            change: function (_, value) {
+                                let view = this.up('grid');
+                                let proxy = view.getStore().getProxy();
+                                let accel = value.accel;
+                                if (accel) {
+                                    proxy.setExtraParam('accel', accel);
+                                } else {
+                                    delete proxy.extraParams.accel;
+                                }
+                                view.getStore().load();
+                            },
+                        },
+                    },
+                ],
+            },
+        ];
 
         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();
+        } else {
+            me.getStore()
+                .getProxy()
+                .setExtraParam('accel', me.accel ?? 'kvm');
+            me.getStore().load();
+        }
     },
 });
diff --git a/www/manager6/qemu/ProcessorEdit.js b/www/manager6/qemu/ProcessorEdit.js
index 68caec16..31b51065 100644
--- a/www/manager6/qemu/ProcessorEdit.js
+++ b/www/manager6/qemu/ProcessorEdit.js
@@ -18,6 +18,7 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
             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'),
         },
     },
 
@@ -252,6 +253,9 @@ Ext.define('PVE.qemu.ProcessorInputPanel', {
             xtype: 'vmcpuflagselector',
             reference: 'cpuFlags',
             name: 'flags',
+            bind: {
+                accel: '{accel}',
+            },
         },
     ],
 });
@@ -317,6 +321,8 @@ Ext.define('PVE.qemu.ProcessorEdit', {
                         delete data.cputype;
                     }
                 }
+                let accel = data.kvm === 0 ? 'tcg' : 'kvm';
+                ipanel.down('vmcpuflagselector').lockAccel(accel);
                 me.setValues(data);
                 ipanel.setArch(arch);
             },
-- 
2.47.3