[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 at 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