Re: [PATCH manager 1/2] ui: vCPU flag selector: replace radio group with segmented button

[Arthur Bied-Charreton <a.bied-charreton@proxmox.com>]

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 <t.lamprecht@proxmox.com>
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 <a.bied-charreton@proxmox.com>
Tested-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>

[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
>              },
[...]