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 <[email protected]> --- 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 [email protected] https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
