[PATCH proxmox-backup v5 1/9] ui: show empty groups

[Hannes Laimer <h.laimer@proxmox.com>]

Displays groups that do not contain any snapshots, currently deleting
the last snapshot will also remove the parent group. So things like
notes would be lost.

This is needed for cleaning up partially failed moves in a datastore
with a s3 backend as it allows for easy local and s3 cleanup. Without
such a group showing up in the UI the only way to trigger a cleanup in
the s3 storage would be trough our API.

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/datastore/Content.js | 62 ++++++++++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/www/datastore/Content.js b/www/datastore/Content.js
index a2aa1949..981acdc7 100644
--- a/www/datastore/Content.js
+++ b/www/datastore/Content.js
@@ -170,7 +170,8 @@ Ext.define('PBS.DataStoreContent', {
             return groups;
         },
 
-        updateGroupNotes: async function (view) {
+        loadGroups: async function () {
+            let view = this.getView();
             try {
                 let url = `/api2/extjs/admin/datastore/${view.datastore}/groups`;
                 if (view.namespace && view.namespace !== '') {
@@ -179,19 +180,24 @@ Ext.define('PBS.DataStoreContent', {
                 let {
                     result: { data: groups },
                 } = await Proxmox.Async.api2({ url });
-                let map = {};
-                for (const group of groups) {
-                    map[`${group['backup-type']}/${group['backup-id']}`] = group.comment;
-                }
-                view.getRootNode().cascade((node) => {
-                    if (node.data.ty === 'group') {
-                        let group = `${node.data.backup_type}/${node.data.backup_id}`;
-                        node.set('comment', map[group], { dirty: false });
-                    }
-                });
+                return groups;
             } catch (err) {
                 console.debug(err);
             }
+            return [];
+        },
+
+        updateGroupNotes: function (view, groupList) {
+            let map = {};
+            for (const group of groupList) {
+                map[`${group['backup-type']}/${group['backup-id']}`] = group.comment;
+            }
+            view.getRootNode().cascade((node) => {
+                if (node.data.ty === 'group') {
+                    let group = `${node.data.backup_type}/${node.data.backup_id}`;
+                    node.set('comment', map[group], { dirty: false });
+                }
+            });
         },
 
         loadNamespaceFromSameLevel: async function () {
@@ -215,7 +221,10 @@ Ext.define('PBS.DataStoreContent', {
             let me = this;
             let view = this.getView();
 
-            let namespaces = await me.loadNamespaceFromSameLevel();
+            let [namespaces, groupList] = await Promise.all([
+                me.loadNamespaceFromSameLevel(),
+                me.loadGroups(),
+            ]);
 
             if (!success) {
                 // TODO also check error code for != 403 ?
@@ -232,6 +241,29 @@ Ext.define('PBS.DataStoreContent', {
 
             let groups = this.getRecordGroups(records);
 
+            for (const item of groupList) {
+                let btype = item['backup-type'];
+                let group = btype + '/' + item['backup-id'];
+                if (groups[group] !== undefined) {
+                    continue;
+                }
+                let cls = PBS.Utils.get_type_icon_cls(btype);
+                if (cls === '') {
+                    continue;
+                }
+                groups[group] = {
+                    text: group,
+                    leaf: true,
+                    iconCls: 'fa ' + cls,
+                    expanded: false,
+                    backup_type: btype,
+                    backup_id: item['backup-id'],
+                    comment: item.comment,
+                    owner: item.owner,
+                    children: [],
+                };
+            }
+
             let selected;
             let expanded = {};
 
@@ -399,7 +431,7 @@ Ext.define('PBS.DataStoreContent', {
                 );
             }
 
-            this.updateGroupNotes(view);
+            this.updateGroupNotes(view, groupList);
 
             if (selected !== undefined) {
                 let selection = view.getRootNode().findChildBy(
@@ -985,7 +1017,7 @@ Ext.define('PBS.DataStoreContent', {
             flex: 1,
             renderer: (v, meta, record) => {
                 let data = record.data;
-                if (!data || data.leaf || data.root) {
+                if (!data || (data.leaf && data.ty !== 'group') || data.root) {
                     return '';
                 }
 
@@ -1029,7 +1061,7 @@ Ext.define('PBS.DataStoreContent', {
                 },
                 dblclick: function (tree, el, row, col, ev, rec) {
                     let data = rec.data || {};
-                    if (data.leaf || data.root) {
+                    if ((data.leaf && data.ty !== 'group') || data.root) {
                         return;
                     }
                     let view = tree.up();
-- 
2.47.3