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 3F6FA1FF133 for ; Mon, 25 May 2026 15:19:28 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 8AB55AAFB; Mon, 25 May 2026 15:19:23 +0200 (CEST) From: Thomas Lamprecht To: pve-devel@lists.proxmox.com Subject: [PATCH manager 1/2] ui: vCPU flag selector: replace radio group with segmented button Date: Mon, 25 May 2026 15:15:25 +0200 Message-ID: <20260525131839.1720731-2-t.lamprecht@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260525131839.1720731-1-t.lamprecht@proxmox.com> References: <20260525131839.1720731-1-t.lamprecht@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1779715104219 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.005 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 Message-ID-Hash: QTXUV4AAJ65ZINGY366C6XYMGEYEZ7M5 X-Message-ID-Hash: QTXUV4AAJ65ZINGY366C6XYMGEYEZ7M5 X-MailFrom: t.lamprecht@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 X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox VE development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: 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 --- 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', - 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 }, widget: { - xtype: 'radiogroup', - hideLabel: true, - layout: 'hbox', - validateOnChange: false, + xtype: 'segmentedbutton', + allowMultiple: false, + defaultUI: 'default-toolbar', value: '=', + items: [ + { text: gettext('Off'), value: '-', width: 50 }, + { text: gettext('Default'), value: '=', width: 90 }, + { text: gettext('On'), value: '+', width: 50 }, + ], listeners: { change: function (f, value) { - let v = Object.values(value)[0]; - f.getWidgetRecord().set('state', v); + let rec = f.getWidgetRecord(); + if (!rec) { + return; + } + rec.set('state', value); - let view = this.up('grid'); - view.dirty = view.getValue() !== view.originalValue; - view.checkDirty(); - //view.checkChange(); + let grid = f.up('grid'); + grid.dirty = grid.getValue() !== grid.originalValue; + grid.checkDirty(); }, }, - items: [ - { - boxLabel: '-', - boxLabelAlign: 'before', - inputValue: '-', - isFormField: false, - }, - { - checked: true, - inputValue: '=', - isFormField: false, - }, - { - boxLabel: '+', - inputValue: '+', - isFormField: false, - }, - ], }, }, { -- 2.47.3