fix #1408: ui: ResourceTree: sort the tree according to tree-sorting options

Considers the newly added options from browser local storage. We have to
save the last sorting mechanism there, so we can detect if it changes
and trigger the movement/text changes (otherwise the tree nodes won't
be updated/moved)

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

diff --git a/www/manager6/UIOptions.js b/www/manager6/UIOptions.js
index dcdf01ee1b0ec5a9c7696870539743ab68d15bd8..cb5a1755224d6888abcc5e27322dd72f237d5287 100644 (file)
--- a/www/manager6/UIOptions.js
+++ b/www/manager6/UIOptions.js
@@ -86,6 +86,18 @@ Ext.define('PVE.UIOptions', {
        return !(PVE.UIOptions.options['tag-style']?.ordering === 'config');
     },
 
+    getTreeSortingValue: function(key) {
+       let localStorage = Ext.state.Manager.getProvider();
+       let browserValues = localStorage.get('pve-tree-sorting');
+       let defaults = {
+           'sort-field': 'vmid',
+           'group-templates': true,
+           'group-guest-types': true,
+       };
+
+       return browserValues?.[key] ?? defaults[key];
+    },
+
     fireUIConfigChanged: function() {
        if (!PVE.data.ResourceStore.isLoading() && PVE.data.ResourceStore.isLoaded()) {
            PVE.data.ResourceStore.fireEvent('load');

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 7fcdfed5dc2c36e0dcdb55c151a90384ecec0b7f..7d7900b595e618248b14b2a412036bb76524ee15 100644 (file)
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -44,24 +44,34 @@ Ext.define('PVE.tree.ResourceTree', {
 
     // private
     nodeSortFn: function(node1, node2) {
+       let me = this;
        let n1 = node1.data, n2 = node2.data;
 
        if (!n1.groupbyid === !n2.groupbyid) {
-           // first sort (group) by type
-           if (n1.type > n2.type) {
-               return 1;
-           } else if (n1.type < n2.type) {
-               return -1;
+           let n1IsGuest = n1.type === 'qemu' || n1.type === 'lxc';
+           let n2IsGuest = n2.type === 'qemu' || n2.type === 'lxc';
+           if (me['group-guest-types'] || !n1IsGuest || !n2IsGuest) {
+               // first sort (group) by type
+               if (n1.type > n2.type) {
+                   return 1;
+               } else if (n1.type < n2.type) {
+                   return -1;
+               }
            }
+
            // then sort (group) by ID
-           if (n1.type === 'qemu' || n2.type === 'lxc') {
-               if (!n1.template !== !n2.template) {
+           if (n1IsGuest) {
+               if (me['group-templates'] && (!n1.template !== !n2.template)) {
                    return n1.template ? 1 : -1; // sort templates after regular VMs
                }
-               if (n1.vmid > n2.vmid) { // prefer VMID as metric for guests
-                   return 1;
-               } else if (n1.vmid < n2.vmid) {
-                   return -1;
+               if (me['sort-field'] === 'vmid') {
+                   if (n1.vmid > n2.vmid) { // prefer VMID as metric for guests
+                       return 1;
+                   } else if (n1.vmid < n2.vmid) {
+                       return -1;
+                   }
+               } else {
+                   return n1.name.localeCompare(n2.name);
                }
            }
            // same types but not a guest
@@ -115,6 +125,11 @@ Ext.define('PVE.tree.ResourceTree', {
                status += '</div> ';
            }
        }
+       if (Ext.isNumeric(info.vmid) && info.vmid > 0) {
+           if (PVE.UIOptions.getTreeSortingValue('sort-field') !== 'vmid') {
+               info.text = `${info.name} (${String(info.vmid)})`;
+           }
+       }
 
        info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
 
@@ -203,8 +218,22 @@ Ext.define('PVE.tree.ResourceTree', {
        return me.addChildSorted(node, info);
     },
 
+    saveSortingOptions: function() {
+       let me = this;
+       let changed = false;
+       for (const key of ['sort-field', 'group-templates', 'group-guest-types']) {
+           let newValue = PVE.UIOptions.getTreeSortingValue(key);
+           if (me[key] !== newValue) {
+               me[key] = newValue;
+               changed = true;
+           }
+       }
+       return changed;
+    },
+
     initComponent: function() {
        let me = this;
+       me.saveSortingOptions();
 
        let rstore = PVE.data.ResourceStore;
        let sp = Ext.state.Manager.getProvider();
@@ -242,6 +271,7 @@ Ext.define('PVE.tree.ResourceTree', {
            let sm = me.getSelectionModel();
            let lastsel = sm.getSelection()[0];
            let parents = [];
+           let sorting_changed = me.saveSortingOptions();
            for (let node = lastsel; node; node = node.parentNode) {
                parents.push(node);
            }
@@ -258,7 +288,7 @@ Ext.define('PVE.tree.ResourceTree', {
                // getById() use find(), which is slow (ExtJS4 DP5)
                let item = rstore.data.get(olditem.data.id);
 
-               let changed = false, moved = false;
+               let changed = sorting_changed, moved = sorting_changed;
                if (item) {
                    // test if any grouping attributes changed, catches migrated tree-nodes in server view too
                    for (const attr of moveCheckAttrs) {