[pve-devel] [PATCH manager 3/4] ui: tree: show nested pools in a nested way

[Dominik Csapak <d.csapak@proxmox.com>]

instead of using a flat list.

This dynamically inserts the necessary nodes into the tree when
inserting a pool node or a node below.

For that, we might need to insert all parent pools in a recursive way
(since they might not exist yet).

Also add an option to the 'tree settings' to choose the old behavior.

For this we have to change the way we 'redraw' the tree when applying
the tree settings, because the code handling these changes can only
handle reordering in one level (e.g. when changing from vmid to name
sorting), but cannot handle a change in the grouping/nesting.

For that we have to completely clear the tree and update fresh.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/UIOptions.js               |  1 +
 www/manager6/Workspace.js               |  5 +++-
 www/manager6/tree/ResourceTree.js       | 31 +++++++++++++++++++++----
 www/manager6/window/TreeSettingsEdit.js | 13 +++++++++++
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/www/manager6/UIOptions.js b/www/manager6/UIOptions.js
index 7c836b65..99b999b7 100644
--- a/www/manager6/UIOptions.js
+++ b/www/manager6/UIOptions.js
@@ -93,6 +93,7 @@ Ext.define('PVE.UIOptions', {
             'sort-field': 'vmid',
             'group-templates': true,
             'group-guest-types': true,
+            'nest-pools': true,
         };
 
         return browserValues?.[key] ?? defaults[key];
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 3d3b5f62..b8061c2a 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -508,7 +508,10 @@ Ext.define('PVE.StdWorkspace', {
                                     handler: () => {
                                         Ext.create('PVE.window.TreeSettingsEdit', {
                                             autoShow: true,
-                                            apiCallDone: () => PVE.UIOptions.fireUIConfigChanged(),
+                                            apiCallDone: () => {
+                                                rtree.refreshTree();
+                                                PVE.UIOptions.fireUIConfigChanged();
+                                            },
                                         });
                                     },
                                 },
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 76d58e2f..99b33670 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -202,11 +202,29 @@ Ext.define('PVE.tree.ResourceTree', {
     },
 
     // private
-    addChildSorted: function (node, info) {
+    addChildSorted: function (node, info, insertPool = false) {
         let me = this;
 
         me.setIconCls(info);
 
+        let nestPools = PVE.UIOptions.getTreeSortingValue('nest-pools');
+        if (info.type === 'pool' && info.pool && !insertPool && nestPools) {
+            let parentPool = info.pool.split('/').slice(0, -1).join('/');
+            if (parentPool.length > 0) {
+                let parent = node.findChild('id', `/pool/${parentPool}`, true);
+                if (parent !== node) {
+                    if (!parent) {
+                        parent = me.addChildSorted(node, {
+                            type: 'pool',
+                            id: `/pool/${parentPool}`,
+                            pool: parentPool,
+                        });
+                    }
+                    return me.addChildSorted(parent, info, true);
+                }
+            }
+        }
+
         if (info.groupbyid) {
             if (me.viewFilter.groupRenderer) {
                 info.text = me.viewFilter.groupRenderer(info);
@@ -239,7 +257,7 @@ Ext.define('PVE.tree.ResourceTree', {
         let v = info[groupBy];
 
         if (v) {
-            let group = node.findChild('groupbyid', v);
+            let group = node.findChild('groupbyid', v, true);
             if (!group) {
                 let groupinfo;
                 if (info.type === groupBy) {
@@ -270,7 +288,7 @@ Ext.define('PVE.tree.ResourceTree', {
     saveSortingOptions: function () {
         let me = this;
         let changed = false;
-        for (const key of ['sort-field', 'group-templates', 'group-guest-types']) {
+        for (const key of ['sort-field', 'group-templates', 'group-guest-types', 'nest-pools']) {
             let newValue = PVE.UIOptions.getTreeSortingValue(key);
             if (me[key] !== newValue) {
                 me[key] = newValue;
@@ -555,8 +573,7 @@ Ext.define('PVE.tree.ResourceTree', {
             },
             setViewFilter: function (view) {
                 me.viewFilter = view;
-                me.clearTree();
-                updateTree();
+                me.refreshTree();
             },
             clearTree: function () {
                 pdata.updateCount = 0;
@@ -566,6 +583,10 @@ Ext.define('PVE.tree.ResourceTree', {
                 pdata.dataIndex = {};
                 me.getSelectionModel().deselectAll();
             },
+            refreshTree: function () {
+                me.clearTree();
+                updateTree();
+            },
             selectExpand: function (node) {
                 let sm = me.getSelectionModel();
                 if (!sm.isSelected(node)) {
diff --git a/www/manager6/window/TreeSettingsEdit.js b/www/manager6/window/TreeSettingsEdit.js
index 63bbd869..9c38f741 100644
--- a/www/manager6/window/TreeSettingsEdit.js
+++ b/www/manager6/window/TreeSettingsEdit.js
@@ -55,6 +55,19 @@ Ext.define('PVE.window.TreeSettingsEdit', {
                     value: '__default__',
                     deleteEmpty: false,
                 },
+                {
+                    xtype: 'proxmoxKVComboBox',
+                    name: 'nest-pools',
+                    fieldLabel: gettext('Nest Pools'),
+                    comboItems: [
+                        ['__default__', `${Proxmox.Utils.defaultText} (${gettext('Yes')})`],
+                        [1, gettext('Yes')],
+                        [0, gettext('No')],
+                    ],
+                    defaultValue: '__default__',
+                    value: '__default__',
+                    deleteEmpty: false,
+                },
                 {
                     xtype: 'displayfield',
                     userCls: 'pmx-hint',
-- 
2.47.3



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel