[pve-devel] [PATCH manager 0/4] ui: improve ux for nested pools

[pve-devel] [PATCH manager 0/4] ui: improve ux for nested pools

[Dominik Csapak]

by
* allowing to select a parent pool when creating
* showing nested pools in the tree as such

patch 1/4 is just a cleanup i noticed during development, and can be
applied independently

patch 4/4 is potentially confusing for users, since it might happen they
confuse some pools, for example: 'foo/bar' with 'bar' since both will
be shown as 'bar' in the tree when nesting is enabled.
Because of this, i sent it seperately and we can decide independently
if we want that without a new version

(feel free to squash that patch into the previous one if desired)

Dominik Csapak (4):
  ui: tree: don't show empty grouping nodes as expandable
  ui: pool create: allow selecting parent pool via selector
  ui: tree: show nested pools in a nested way
  ui: tree: render nested pool names without parent pools

 www/manager6/UIOptions.js               |  1 +
 www/manager6/Workspace.js               |  5 ++-
 www/manager6/dc/PoolEdit.js             | 48 ++++++++++++++++++-------
 www/manager6/tree/ResourceTree.js       | 36 +++++++++++++++----
 www/manager6/window/TreeSettingsEdit.js | 13 +++++++
 5 files changed, 83 insertions(+), 20 deletions(-)

-- 
2.47.3



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

[pve-devel] [PATCH manager 1/4] ui: tree: don't show empty grouping nodes as expandable

[Dominik Csapak]

Non empty nodes in the tree automatically will show an arrow to expand
them. When grouping, this is currently forced by setting 'leaf' to
false, so they always show an 'expanding arrow', which vanishes when
trying to expand such an item.

Instead, simply let the tree add that automatically when a node has
children. This makes it instantly visible which nodes have children an
which do not.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/tree/ResourceTree.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index bb016f8c..76d58e2f 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -253,7 +253,6 @@ Ext.define('PVE.tree.ResourceTree', {
                         groupinfo[groupBy] = v;
                     }
                 }
-                groupinfo.leaf = false;
                 groupinfo.groupbyid = v;
                 group = me.addChildSorted(node, groupinfo);
             }
-- 
2.47.3



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

[pve-devel] [PATCH manager 2/4] ui: pool create: allow selecting parent pool via selector

[Dominik Csapak]

instead of having to type out the full path, e.g. 'foo/bar/baz',
show a 'pool selector' to select the parent pool.

This makes creating nested pools more obvious and easier.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/dc/PoolEdit.js | 48 +++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/www/manager6/dc/PoolEdit.js b/www/manager6/dc/PoolEdit.js
index 72a084ac..325f649b 100644
--- a/www/manager6/dc/PoolEdit.js
+++ b/www/manager6/dc/PoolEdit.js
@@ -17,20 +17,42 @@ Ext.define('PVE.dc.PoolEdit', {
 
     items: [
         {
-            xtype: 'pmxDisplayEditField',
-            fieldLabel: gettext('Name'),
-            cbind: {
-                editable: '{isCreate}',
-                value: '{poolid}',
+            xtype: 'inputpanel',
+            onGetValues: function (values) {
+                if (values.parentPool) {
+                    values.poolid = values.parentPool + '/' + values.poolid;
+                    delete values.parentPool;
+                }
+                return values;
             },
-            name: 'poolid',
-            allowBlank: false,
-        },
-        {
-            xtype: 'textfield',
-            fieldLabel: gettext('Comment'),
-            name: 'comment',
-            allowBlank: true,
+            items: [
+                {
+                    xtype: 'pmxDisplayEditField',
+                    fieldLabel: gettext('Name'),
+                    cbind: {
+                        editable: '{isCreate}',
+                        value: '{poolid}',
+                    },
+                    name: 'poolid',
+                    allowBlank: false,
+                },
+                {
+                    xtype: 'pvePoolSelector',
+                    name: 'parentPool',
+                    fieldLabel: gettext('Parent Pool'),
+                    allowBlank: true,
+                    cbind: {
+                        disabled: '{!isCreate}',
+                        hidden: '{!isCreate}',
+                    },
+                },
+                {
+                    xtype: 'textfield',
+                    fieldLabel: gettext('Comment'),
+                    name: 'comment',
+                    allowBlank: true,
+                },
+            ],
         },
     ],
 
-- 
2.47.3



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

Re: [pve-devel] [PATCH manager 2/4] ui: pool create: allow selecting parent pool via selector

[Thomas Lamprecht]

Am 22.01.26 um 15:01 schrieb Dominik Csapak:
> instead of having to type out the full path, e.g. 'foo/bar/baz',
> show a 'pool selector' to select the parent pool.
> 
> This makes creating nested pools more obvious and easier.
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  www/manager6/dc/PoolEdit.js | 48 +++++++++++++++++++++++++++----------
>  1 file changed, 35 insertions(+), 13 deletions(-)
> 
> diff --git a/www/manager6/dc/PoolEdit.js b/www/manager6/dc/PoolEdit.js
> index 72a084ac..325f649b 100644
> --- a/www/manager6/dc/PoolEdit.js
> +++ b/www/manager6/dc/PoolEdit.js
> @@ -17,20 +17,42 @@ Ext.define('PVE.dc.PoolEdit', {
>  
>      items: [
>          {
> -            xtype: 'pmxDisplayEditField',
> -            fieldLabel: gettext('Name'),
> -            cbind: {
> -                editable: '{isCreate}',
> -                value: '{poolid}',
> +            xtype: 'inputpanel',
> +            onGetValues: function (values) {
> +                if (values.parentPool) {
> +                    values.poolid = values.parentPool + '/' + values.poolid;
> +                    delete values.parentPool;
> +                }

If values.parentPool is an empty string it will evaluate to falsy above, but
then still exist and gets submitted, so with this patch one cannot create any
top-level pool anymore.

Something else, one can mix-and match parent field and using / separators
in the name, seems a bit odd and potentially confusing UX wise.

Maybe it would be better to just disallow using / in the name then, having
that would be only useful if we would also created all intermediate pools,
which we currently don't.

> +                return values;
>              },
> -            name: 'poolid',
> -            allowBlank: false,
> -        },
> -        {
> -            xtype: 'textfield',
> -            fieldLabel: gettext('Comment'),
> -            name: 'comment',
> -            allowBlank: true,
> +            items: [
> +                {
> +                    xtype: 'pmxDisplayEditField',
> +                    fieldLabel: gettext('Name'),
> +                    cbind: {
> +                        editable: '{isCreate}',
> +                        value: '{poolid}',
> +                    },
> +                    name: 'poolid',
> +                    allowBlank: false,
> +                },
> +                {
> +                    xtype: 'pvePoolSelector',
> +                    name: 'parentPool',
> +                    fieldLabel: gettext('Parent Pool'),
> +                    allowBlank: true,
> +                    cbind: {
> +                        disabled: '{!isCreate}',
> +                        hidden: '{!isCreate}',
> +                    },
> +                },
> +                {
> +                    xtype: 'textfield',
> +                    fieldLabel: gettext('Comment'),
> +                    name: 'comment',
> +                    allowBlank: true,
> +                },
> +            ],
>          },
>      ],
>  



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

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

[Dominik Csapak]

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

[pve-devel] [PATCH manager 4/4] ui: tree: render nested pool names without parent pools

[Dominik Csapak]

When nesting pools is enabled for the tree, don't show the parent pools
in the name, so instead of:

- foo
  - foo/bar
    - foo/bar/baz
- bar
- baz

render:
- foo
  - bar
    - baz
- bar
- baz

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/tree/ResourceTree.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 99b33670..6ea28919 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -79,6 +79,10 @@ Ext.define('PVE.tree.ResourceTree', {
                     text += ` (${PVE.ClusterName})`;
                 }
 
+                if (info.type === 'pool' && PVE.UIOptions.getTreeSortingValue('nest-pools')) {
+                    text = info.pool.split('/').pop();
+                }
+
                 return (info.renderedText = text);
             },
         },
-- 
2.47.3



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

[pve-devel] partially-applied: [PATCH manager 0/4] ui: improve ux for nested pools

[Thomas Lamprecht]

On Thu, 22 Jan 2026 14:58:30 +0100, Dominik Csapak wrote:
> by
> * allowing to select a parent pool when creating
> * showing nested pools in the tree as such
> 
> patch 1/4 is just a cleanup i noticed during development, and can be
> applied independently
> 
> [...]

Applied, thanks!

[1/4] ui: tree: don't show empty grouping nodes as expandable
      commit: 04ba61bc6c20f8c223b09f8d3cf0c7319441e33b
[2/4] ui: pool create: allow selecting parent pool via selector
      SKIPPED
[3/4] ui: tree: show nested pools in a nested way
      commit: a63866dc52b230d7273492639d53abb356b4a345
[4/4] ui: tree: render nested pool names without parent pools
      commit: c9d7571baab5e6d13c399a39e90ffe950f6b0189


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