all lists on 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 an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal