ui: add window for changing tree related options

such as the sorting/grouping of guests. saves them in the browser local
storage under 'pve-tree-sorting'

adds a button for it next to the the view selector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2c487655ff3f98caa3738f6161a9d958ddf47d25..b73b729ad25983fe1e20e7750400c4bb0f264d8d 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -119,6 +119,7 @@ JSSRC=                                                      \
        window/ScheduleSimulator.js                     \
        window/Wizard.js                                \
        window/GuestDiskReassign.js                             \
+       window/TreeSettingsEdit.js                      \
        ha/Fencing.js                                   \
        ha/GroupEdit.js                                 \
        ha/GroupSelector.js                             \

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index a3872b560dc07e9ceed43bd58a9a69a501bdff50..a2fbc0be93f4b5188a3bf8f3b338807be4c0985c 100644 (file)
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -223,7 +223,10 @@ Ext.define('PVE.StdWorkspace', {
        let appState = Ext.create('PVE.StateProvider');
        Ext.state.Manager.setProvider(appState);
 
-       let selview = Ext.create('PVE.form.ViewSelector');
+       let selview = Ext.create('PVE.form.ViewSelector', {
+           flex: 1,
+           padding: '0 5 0 0',
+       });
 
        let rtree = Ext.createWidget('pveResourceTree', {
            viewFilter: selview.getViewFilter(),
@@ -449,7 +452,27 @@ Ext.define('PVE.StdWorkspace', {
                    margin: '0 0 0 5',
                    split: true,
                    width: 300,
-                   items: [selview, rtree],
+                   items: [
+                       {
+                           xtype: 'container',
+                           layout: 'hbox',
+                           padding: '0 0 5 0',
+                           items: [
+                               selview,
+                               {
+                                   xtype: 'button',
+                                   iconCls: 'fa fa-fw fa-gear',
+                                   handler: () => {
+                                       Ext.create('PVE.window.TreeSettingsEdit', {
+                                           autoShow: true,
+                                           apiCallDone: () => PVE.UIOptions.fireUIConfigChanged(),
+                                       });
+                                   },
+                               },
+                           ],
+                       },
+                       rtree,
+                   ],
                    listeners: {
                        resize: function(panel, width, height) {
                            var viewWidth = me.getSize().width;

diff --git a/www/manager6/window/TreeSettingsEdit.js b/www/manager6/window/TreeSettingsEdit.js
new file mode 100644 (file)
index 0000000..8f9b10b
--- /dev/null
+++ b/www/manager6/window/TreeSettingsEdit.js
@@ -0,0 +1,87 @@
+Ext.define('PVE.window.TreeSettingsEdit', {
+    extend: 'Proxmox.window.Edit',
+    alias: 'widget.pveTreeSettingsEdit',
+
+    title: gettext('Tree Settings'),
+
+    isCreate: false,
+
+    // we don't want an url, we override submit(), but it is needed by the parent class
+    url: 'bogus',
+
+    fieldDefaults: {
+       labelWidth: 120,
+    },
+
+    items: [
+       {
+           xtype: 'inputpanel',
+           items: [
+               {
+                   xtype: 'proxmoxKVComboBox',
+                   name: 'sort-field',
+                   fieldLabel: gettext('Sort Field'),
+                   comboItems: [
+                       ['__default__', `${Proxmox.Utils.defaultText} (VMID)`],
+                       ['vmid', 'VMID'],
+                       ['name', gettext('Name')],
+                   ],
+                   defaultValue: '__default__',
+                   value: '__default__',
+                   deleteEmpty: false,
+               },
+               {
+                   xtype: 'proxmoxKVComboBox',
+                   name: 'group-templates',
+                   fieldLabel: gettext('Group Templates'),
+                   comboItems: [
+                       ['__default__', `${Proxmox.Utils.defaultText} (${gettext("Yes")})`],
+                       [1, gettext('Yes')],
+                       [0, gettext('No')],
+                   ],
+                   defaultValue: '__default__',
+                   value: '__default__',
+                   deleteEmpty: false,
+               },
+               {
+                   xtype: 'proxmoxKVComboBox',
+                   name: 'group-guest-types',
+                   fieldLabel: gettext('Group Types'),
+                   comboItems: [
+                       ['__default__', `${Proxmox.Utils.defaultText} (${gettext("Yes")})`],
+                       [1, gettext('Yes')],
+                       [0, gettext('No')],
+                   ],
+                   defaultValue: '__default__',
+                   value: '__default__',
+                   deleteEmpty: false,
+               },
+               {
+                   xtype: 'displayfield',
+                   userCls: 'pmx-hint',
+                   value: gettext('Settings are saved in the local storage of the browser'),
+               },
+           ],
+       },
+    ],
+
+    submit: function() {
+       let me = this;
+
+       let localStorage = Ext.state.Manager.getProvider();
+       localStorage.set('pve-tree-sorting', me.down('inputpanel').getValues() || null);
+
+       me.apiCallDone();
+       me.close();
+    },
+
+    initComponent: function() {
+       let me = this;
+
+       me.callParent();
+
+       let localStorage = Ext.state.Manager.getProvider();
+       me.down('inputpanel').setValues(localStorage.get('pve-tree-sorting'));
+    },
+
+});