[PATCH pve-manager v2 16/17] ui: VMCPUFlagSelector: Add search bar for large lists of flags

Arthur Bied-Charreton
2026-04-01T08:01:49Z

Add a search bar for the CPU flags list queried from
/cluster/qemu/cpu-flags, which is very long.

Do not display it for VM-specific flags (~15 flags), as they are
easier to scan through, and it would overload the ProcessorEdit window.

Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
www/manager6/form/VMCPUFlagSelector.js | 128 ++++++++++++++++---------
1 file changed, 83 insertions(+), 45 deletions(-)

diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js
index 765d325d..4c6e1510 100644
--- a/www/manager6/form/VMCPUFlagSelector.js
+++ b/www/manager6/form/VMCPUFlagSelector.js
@@ -68,7 +68,11 @@ Ext.define('PVE.form.VMCPUFlagSelector', {

let flags = '';

- store.getData().each(function (rec) {
+ // Get the values directly from the data source. Using store.getData() here
+ // would iterate over the filtered values, potentially overwriting flags that
+ // are set but currently filtered out by the search bar.
+ let source = store.getDataSource();
+ source.each(function (rec) {
let s = rec.get('state');
if (s && s !== '=') {
let f = rec.get('name');
@@ -286,57 +290,91 @@ Ext.define('PVE.form.VMCPUFlagSelector', {

me.value = me.originalValue = '';

- me.dockedItems = [
+ let topToolbarItems = [
{
- xtype: 'toolbar',
- dock: 'top',
- hidden: false,
+ 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: [
{
- 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.',
- ),
- },
+ boxLabel: 'KVM',
+ inputValue: 'kvm',
+ name: 'accel',
+ checked: true,
+ isFormField: false,
},
{
- 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();
- },
- },
+ 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();
+ },
+ },
+ },
+ ];
+
+ if (!me.restrictToVMFlags) {
+ topToolbarItems.push('-', {
+ xtype: 'textfield',
+ emptyText: gettext('Search...'),
+ submitValue: false,
+ listeners: {
+ change: {
+ buffer: 100,
+ fn: function (field, value) {
+ let store = field.up('grid').getStore();
+ if (value) {
+ let lv = value.toLowerCase();
+ store.addFilter({
+ id: 'search-filter',
+ filterFn: (rec) => {
+ let name = rec.get('name') || '';
+ let desc = rec.get('description') || '';
+ return (
+ name.toLowerCase().includes(lv) ||
+ desc.toLowerCase().includes(lv)
+ );
+ },
+ });
+ } else {
+ store.removeFilter('search-filter');
+ }
+ },
+ },
+ },
+ });
+ }
+
+ me.dockedItems = [
+ {
+ xtype: 'toolbar',
+ dock: 'top',
+ hidden: false,
+ items: topToolbarItems,
},
];

--
2.47.3