From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 5AEBD1FF146 for ; Tue, 26 May 2026 08:03:24 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id A48F91223F; Tue, 26 May 2026 08:03:21 +0200 (CEST) Date: Tue, 26 May 2026 08:02:45 +0200 From: Arthur Bied-Charreton To: Thomas Lamprecht Subject: Re: [PATCH manager 1/2] ui: vCPU flag selector: replace radio group with segmented button Message-ID: <4pz6g7yxdignq2jram76cwbzld5vayimlos3zydqvofbsq7tou@mxmnc7koetkr> References: <20260525131839.1720731-1-t.lamprecht@proxmox.com> <20260525131839.1720731-2-t.lamprecht@proxmox.com> MIME-Version: 1.0 Content-Type: text/plain; charset=us-ascii Content-Disposition: inline In-Reply-To: <20260525131839.1720731-2-t.lamprecht@proxmox.com> X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1779775342260 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.763 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [firefox.dev,proxmox.com] Message-ID-Hash: ZNV3Y5VRG2TKHE6KFHNXVON72VYXTACI X-Message-ID-Hash: ZNV3Y5VRG2TKHE6KFHNXVON72VYXTACI X-MailFrom: a.bied-charreton@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header CC: pve-devel@lists.proxmox.com X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox VE development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: On Mon, May 25, 2026 at 03:15:25PM +0200, Thomas Lamprecht wrote: > The per-flag state used a radio group of three single-character > options (- force-off, = default, + force-on) alongside a separate > read-only "State" column that re-rendered the same value as Off, > Default, or On. That was a bit cramped and also not the best UX. > > Use one segmented button labeled Off/Default/On that both shows and > sets the state, and drop the now-superfluous text column. A segmented > button also reports a plain value to its change listener instead of > the radio group's keyed object, simplifying the dirty-tracking > handler. > > The classic Ext.button.Segmented already existed in ExtJS 6.0.1, the > version PVE shipped when I added this selector back in 06064872c > ("gui: vm: add CPU flag selector with tri-state awareness"), not > really sure though why I did not favor it over the radio group > approach. > > Signed-off-by: Thomas Lamprecht Looks good! I also profiled this with the Bitwarden extension enabled [0] and it looks like it works a lot better with segmented buttons. One comment inline, with that addressed consider this: Reviewed-by: Arthur Bied-Charreton Tested-by: Arthur Bied-Charreton [0] https://share.firefox.dev/4tYqt21 > --- > www/manager6/form/VMCPUFlagSelector.js | 66 +++++++------------------- > 1 file changed, 18 insertions(+), 48 deletions(-) > > diff --git a/www/manager6/form/VMCPUFlagSelector.js b/www/manager6/form/VMCPUFlagSelector.js > index d4adbc0f5..5972ee678 100644 > --- a/www/manager6/form/VMCPUFlagSelector.js > +++ b/www/manager6/form/VMCPUFlagSelector.js > @@ -216,68 +216,38 @@ Ext.define('PVE.form.VMCPUFlagSelector', { > return res; > }, > columns: [ > - { > - text: gettext('State'), > - dataIndex: 'state', > - renderer: function (v) { > - switch (v) { > - case '=': > - return 'Default'; > - case '-': > - return 'Off'; > - case '+': > - return 'On'; > - default: > - return 'Unknown'; > - } > - }, > - width: 65, > - }, > { > text: gettext('Value'), > xtype: 'widgetcolumn', > dataIndex: 'state', As mentioned in my answer to your other commit [1], we would need a sortable: true here if we want the flags to be sortable by state, which I think would be helpful. [1] https://lore.proxmox.com/pve-devel/g745uimm7nvpgvwomleawpklz2qst4saexjvd6syxv67s2jxa4@vhmlqwx5q6yb/ > - width: 95, > + width: 200, > onWidgetAttach: function (column, widget, record) { > - let val = record.get('state') || '='; > - widget.down('[inputValue=' + val + ']').setValue(true); > + widget.setValue(record.get('state') || '='); > // TODO: disable if selected CPU model and flag are incompatible > }, [...]