From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id BDA0D1FF16B for ; Fri, 7 Nov 2025 15:03:52 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 7CCD611E7B; Fri, 7 Nov 2025 15:04:33 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Fri, 7 Nov 2025 15:03:55 +0100 Message-ID: <20251107140400.4016493-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.029 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 Subject: [pve-devel] [PATCH widget-toolkit] rrd type selector: split selection into two widgets X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox VE development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pve-devel-bounces@lists.proxmox.com Sender: "pve-devel" namely a 'timeframe' selector and two buttons (that can be toggled) for the consolidation function. This is done to remove the clutter in the dropdown and to keep the interface similar to what we have in the PDM user interface. Signed-off-by: Dominik Csapak --- src/form/RRDTypeSelector.js | 109 ++++++++++++++++++++++++++---------- 1 file changed, 79 insertions(+), 30 deletions(-) diff --git a/src/form/RRDTypeSelector.js b/src/form/RRDTypeSelector.js index cde3457..866b6e1 100644 --- a/src/form/RRDTypeSelector.js +++ b/src/form/RRDTypeSelector.js @@ -1,42 +1,27 @@ Ext.define('Proxmox.form.RRDTypeSelector', { - extend: 'Ext.form.field.ComboBox', + extend: 'Ext.form.FieldContainer', alias: ['widget.proxmoxRRDTypeSelector'], - displayField: 'text', - valueField: 'id', - editable: false, - queryMode: 'local', - value: 'hour', - stateEvents: ['select'], stateful: true, stateId: 'proxmoxRRDTypeSelection', - store: { - type: 'array', - fields: ['id', 'timeframe', 'cf', 'text'], - data: [ - ['hour', 'hour', 'AVERAGE', gettext('Hour') + ' (' + gettext('average') + ')'], - ['hourmax', 'hour', 'MAX', gettext('Hour') + ' (' + gettext('maximum') + ')'], - ['day', 'day', 'AVERAGE', gettext('Day') + ' (' + gettext('average') + ')'], - ['daymax', 'day', 'MAX', gettext('Day') + ' (' + gettext('maximum') + ')'], - ['week', 'week', 'AVERAGE', gettext('Week') + ' (' + gettext('average') + ')'], - ['weekmax', 'week', 'MAX', gettext('Week') + ' (' + gettext('maximum') + ')'], - ['month', 'month', 'AVERAGE', gettext('Month') + ' (' + gettext('average') + ')'], - ['monthmax', 'month', 'MAX', gettext('Month') + ' (' + gettext('maximum') + ')'], - ['year', 'year', 'AVERAGE', gettext('Year') + ' (' + gettext('average') + ')'], - ['yearmax', 'year', 'MAX', gettext('Year') + ' (' + gettext('maximum') + ')'], - ], - }, + layout: 'hbox', + + referenceHolder: true, + // save current selection in the state Provider so RRDView can read it getState: function () { - let ind = this.getStore().findExact('id', this.getValue()); - let rec = this.getStore().getAt(ind); - if (!rec) { - return undefined; + let me = this; + let timeframe = me.lookup('timeframe').getValue(); + let max = me.lookup('maximum').pressed; + let id = timeframe; + if (max) { + id += 'max'; } + return { - id: rec.data.id, - timeframe: rec.data.timeframe, - cf: rec.data.cf, + id, + timeframe, + cf: max ? 'MAX' : 'AVERAGE', }; }, // set selection based on last saved state @@ -45,4 +30,68 @@ Ext.define('Proxmox.form.RRDTypeSelector', { this.setValue(state.id); } }, + + setValue: function (value) { + let me = this; + let timeframe = value; + let max = value.endsWith('max'); + if (max) { + timeframe = value.substring(0, value.length - 3); + } + + me.lookup('timeframe').setValue(timeframe); + me.lookup(max ? 'maximum' : 'average').setPressed(true); + me.lookup(!max ? 'maximum' : 'average').setPressed(false); + }, + + items: [ + { + xtype: 'combobox', + reference: 'timeframe', + padding: '0 5 0 0', + displayField: 'text', + valueField: 'id', + editable: false, + queryMode: 'local', + value: 'hour', + store: { + type: 'array', + fields: ['id', 'text'], + data: [ + ['hour', gettext('Hour')], + ['day', gettext('Day')], + ['week', gettext('Week')], + ['month', gettext('Month')], + ['year', gettext('Year')], + ], + }, + listeners: { + change: function () { + this.up('proxmoxRRDTypeSelector').saveState(); + }, + }, + }, + { + xtype: 'segmentedbutton', + allowMultiple: false, + allowToggle: true, + items: [ + { + text: gettext('Maximum'), + reference: 'maximum', + handler: function () { + this.up('proxmoxRRDTypeSelector').saveState(); + }, + }, + { + text: gettext('Average'), + reference: 'average', + pressed: true, + handler: function () { + this.up('proxmoxRRDTypeSelector').saveState(); + }, + }, + ], + }, + ], }); -- 2.47.3 _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel