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>
This commit is contained in:
Dominik Csapak 2023-02-22 08:51:51 +01:00 committed by Thomas Lamprecht
parent 13d465c146
commit 3a2a696443
3 changed files with 113 additions and 2 deletions

View File

@ -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 \

View File

@ -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;

View File

@ -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'));
},
});