public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH pve-manager v2 16/17] ui: VMCPUFlagSelector: Add search bar for large lists of flags
Date: Wed,  1 Apr 2026 10:00:27 +0200	[thread overview]
Message-ID: <20260401080028.62513-17-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260401080028.62513-1-a.bied-charreton@proxmox.com>

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




  parent reply	other threads:[~2026-04-01  8:01 UTC|newest]

Thread overview: 18+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-04-01  8:00 [PATCH docs/manager/qemu-server v2 00/17] Add API and UI for custom CPU models Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-docs v2 01/17] qm: Add anchor to "CPU Type" section Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 02/17] cpu config: Rename CPU models config path variable Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 03/17] cpu flags: Create CPUFlags module Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 04/17] cpu flags: Add query_available_cpu_flags helper Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 05/17] cpu config: Add helpers to lock and write config Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 06/17] cpu: Register standard option for CPU format Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 07/17] cpu config: Set 'type' field before writing Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH qemu-server v2 08/17] cpu flags: Improve flags list returned by endpoint Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 09/17] api: Add endpoint querying available CPU flags cluster-wide Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 10/17] api: Add CRUD handlers for custom CPU models Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 11/17] ui: CPUModelSelector: Allow filtering out custom models Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 12/17] ui: Add basic custom CPU model editor Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 13/17] ui: VMCPUFlagSelector: Add CPU flag editor for custom models Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 14/17] ui: VMCPUFlagSelector: Fix buffered rendering error Arthur Bied-Charreton
2026-04-01  8:00 ` [PATCH pve-manager v2 15/17] ui: VMCPUFlagSelector: Allow filtering out flags supported on 0 nodes Arthur Bied-Charreton
2026-04-01  8:00 ` Arthur Bied-Charreton [this message]
2026-04-01  8:00 ` [PATCH pve-manager v2 17/17] RFC: ui: Group custom CPU with resource mappings Arthur Bied-Charreton

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260401080028.62513-17-a.bied-charreton@proxmox.com \
    --to=a.bied-charreton@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal