[pve-devel] [PATCH widget-toolkit] rrd type selector: split selection into two widgets

[pve-devel] [PATCH widget-toolkit] rrd type selector: split selection into two widgets

[Dominik Csapak]

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 <d.csapak@proxmox.com>
---
 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

[pve-devel] applied: [PATCH widget-toolkit] rrd type selector: split selection into two widgets

[Thomas Lamprecht]

On Fri, 07 Nov 2025 15:03:55 +0100, Dominik Csapak wrote:
> 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.
> 
> 

Applied, thanks!

I touched up the commit message a bit and made a follow-up to change the
button style to the less flashy "inline" buttons we got, i.e. adapted from
the onlineHelp button in this case but with extra rules to avoid border
radii for the meeting corners and the border line in the middle.

[1/1] rrd type selector: split selection into two widgets
      commit: b454ec4d1b575e91851d56a7c31d6d3a7e9fe869


_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel