[pve-devel] [PATCH manager v3 1/1] ui: implement 'Tag View' for the resource tree

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

and keep the functionality in ResourceTree as generic as possible.

We achieve this by having an 'itemMap' function that can split one item
from the store into multiple to add to the tree.

for the updates, we have to have an 'idMapFn' (to get the original id
back)

we also have to modify how the move checks work a bit, since we only
want to move the items when the tags changed only in the tagview case

in the ResourceGrid we have to get the id a bit differently since we now
have 'virtual' ids for the entries tag contain the tag (which can't be
found in the resource store)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile             |  1 +
 www/manager6/Workspace.js         |  4 +-
 www/manager6/form/ViewSelector.js | 28 +++++++++++
 www/manager6/grid/ResourceGrid.js |  2 +-
 www/manager6/panel/TagConfig.js   |  6 +++
 www/manager6/tree/ResourceTree.js | 81 ++++++++++++++++++++++++++++---
 6 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 www/manager6/panel/TagConfig.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 2c3a822b..bcf44c39 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -108,6 +108,7 @@ JSSRC= 							\
 	panel/GuestSummary.js				\
 	panel/TemplateStatusView.js			\
 	panel/MultiDiskEdit.js				\
+	panel/TagConfig.js				\
 	tree/ResourceTree.js				\
 	tree/SnapshotTree.js				\
 	tree/ResourceMapTree.js				\
diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 52c66108..ca29b3f8 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -247,6 +247,7 @@ Ext.define('PVE.StdWorkspace', {
 			    storage: 'PVE.storage.Browser',
 			    sdn: 'PVE.sdn.Browser',
 			    pool: 'pvePoolConfig',
+			    tag: 'pveTagConfig',
 			};
 			PVE.curSelectedNode = treeNode;
 			me.setContent({
@@ -531,7 +532,8 @@ Ext.define('PVE.StdWorkspace', {
 	let tagSelectors = [];
 	['circle', 'dense'].forEach((style) => {
 	    ['dark', 'light'].forEach((variant) => {
-		tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`);
+		let selector = `.proxmox-tags-${style} :not(.proxmox-tags-full) > .proxmox-tag-${variant}`;
+		tagSelectors.push(selector);
 	    });
 	});
 
diff --git a/www/manager6/form/ViewSelector.js b/www/manager6/form/ViewSelector.js
index e25547c4..ee16c227 100644
--- a/www/manager6/form/ViewSelector.js
+++ b/www/manager6/form/ViewSelector.js
@@ -32,6 +32,34 @@ Ext.define('PVE.form.ViewSelector', {
 		// Pool View only lists VMs and Containers
 		filterfn: ({ data }) => data.type === 'qemu' || data.type === 'lxc' || data.type === 'pool',
 	    },
+	    tags: {
+		text: gettext('Tag View'),
+		groups: ['tag'],
+		filterfn: ({ data }) => data.type === 'qemu' || data.type === 'lxc',
+		groupRenderer: function(info) {
+		    let tag = PVE.Utils.renderTags(info.tag, PVE.UIOptions.tagOverrides);
+		    return `<span class="proxmox-tags-full">${tag}</span>`;
+		},
+		itemMap: function(item) {
+		    let tags = (item.data.tags ?? '').split(/[;, ]/);
+		    if (tags.length === 1 && tags[0] === '') {
+			return item;
+		    }
+		    let items = [];
+		    for (const tag of tags) {
+			let id = `${item.data.id}-${tag}`;
+			let info = Ext.apply({ leaf: true }, item.data);
+			info.tag = tag;
+			info.realId = info.id;
+			info.id = id;
+			items.push(Ext.create('Ext.data.TreeModel', info));
+		    }
+		    return items;
+		},
+		attrMoveChecks: {
+		    tag: (newitem, olditem) => newitem.data.tags !== olditem.data.tags,
+		},
+	    },
 	};
 	let groupdef = Object.entries(default_views).map(([name, config]) => [name, config.text]);
 
diff --git a/www/manager6/grid/ResourceGrid.js b/www/manager6/grid/ResourceGrid.js
index 9376bcc2..b212e9e9 100644
--- a/www/manager6/grid/ResourceGrid.js
+++ b/www/manager6/grid/ResourceGrid.js
@@ -44,7 +44,7 @@ Ext.define('PVE.grid.ResourceGrid', {
 		    return;
 		}
 		for (let child of node.childNodes) {
-		    let orgNode = rstore.data.get(child.data.id);
+		    let orgNode = rstore.data.get(child.data.realId ?? child.data.id);
 		    if (orgNode) {
 			if ((!filterfn || filterfn(child)) && (!textfilter || textfilterMatch(child))) {
 			    nodeidx[child.data.id] = orgNode;
diff --git a/www/manager6/panel/TagConfig.js b/www/manager6/panel/TagConfig.js
new file mode 100644
index 00000000..203c47c2
--- /dev/null
+++ b/www/manager6/panel/TagConfig.js
@@ -0,0 +1,6 @@
+Ext.define('PVE.panel.TagConfig', {
+    extend: 'PVE.panel.Config',
+    alias: 'widget.pveTagConfig',
+
+    onlineHelp: 'gui_tags',
+});
diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index d3c15aec..7b0c5dc8 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -37,6 +37,9 @@ Ext.define('PVE.tree.ResourceTree', {
 	    template: {
 		iconCls: 'fa fa-file-o',
 	    },
+	    tag: {
+		iconCls: 'fa fa-tag',
+	    },
 	},
     },
 
@@ -165,12 +168,15 @@ Ext.define('PVE.tree.ResourceTree', {
 	me.setText(info);
 
 	if (info.groupbyid) {
-	    info.text = info.groupbyid;
-	    if (info.type === 'type') {
+	    if (me.viewFilter.groupRenderer) {
+		info.text = me.viewFilter.groupRenderer(info);
+	    } else if (info.type === 'type') {
 		let defaults = PVE.tree.ResourceTree.typeDefaults[info.groupbyid];
 		if (defaults && defaults.text) {
 		    info.text = defaults.text;
 		}
+	    } else {
+		info.text = info.groupbyid;
 	    }
 	}
 	let child = Ext.create('PVETree', info);
@@ -267,6 +273,30 @@ Ext.define('PVE.tree.ResourceTree', {
 	    'text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
 	];
 
+	// special case ids from the tag view, since they change the id in the state
+	let idMapFn = function(id) {
+	    if (!id) {
+		return undefined;
+	    }
+	    if (id.startsWith('qemu') || id.startsWith('lxc')) {
+		let [realId, _tag] = id.split('-');
+		return realId;
+	    }
+	    return id;
+	};
+
+	let findNode = function(rootNode, id) {
+	    if (!id) {
+		return undefined;
+	    }
+	    let node = rootNode.findChild('id', id, true);
+	    if (!node) {
+		node = rootNode.findChildBy((r) => idMapFn(r.data.id) === idMapFn(id), undefined, true);
+	    }
+	    return node;
+	};
+
+
 	let updateTree = function() {
 	    store.suspendEvents();
 
@@ -282,6 +312,8 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	    let groups = me.viewFilter.groups || [];
 	    // explicitly check for node/template, as those are not always grouping attributes
+	    let attrMoveChecks = me.viewFilter.attrMoveChecks ?? {};
+
 	    // also check for name for when the tree is sorted by name
 	    let moveCheckAttrs = groups.concat(['node', 'template', 'name']);
 	    let filterfn = me.viewFilter.filterfn;
@@ -291,13 +323,20 @@ Ext.define('PVE.tree.ResourceTree', {
 	    // remove vanished or moved items and update changed items in-place
 	    for (const [key, olditem] of Object.entries(index)) {
 		// getById() use find(), which is slow (ExtJS4 DP5)
-		let item = rstore.data.get(olditem.data.id);
+		let oldid = olditem.data.id;
+		let id = idMapFn(olditem.data.id);
+		let item = rstore.data.get(id);
 
 		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) {
-			if (item.data[attr] !== olditem.data[attr]) {
+			if (attrMoveChecks[attr]) {
+			    if (attrMoveChecks[attr](olditem, item)) {
+				moved = true;
+				break;
+			    }
+			} else if (item.data[attr] !== olditem.data[attr]) {
 			    moved = true;
 			    break;
 			}
@@ -317,6 +356,9 @@ Ext.define('PVE.tree.ResourceTree', {
 		    olditem.beginEdit();
 		    let info = olditem.data;
 		    Ext.apply(info, item.data);
+		    if (info.id !== oldid) {
+			info.id = oldid;
+		    }
 		    me.setIconCls(info);
 		    me.setText(info);
 		    olditem.commit();
@@ -333,10 +375,15 @@ Ext.define('PVE.tree.ResourceTree', {
 		    // store events are suspended, so remove the item manually
 		    store.remove(olditem);
 		    parentNode.removeChild(olditem, true);
+		    if (parentNode.childNodes.length < 1 && parentNode.parentNode) {
+			let grandParent = parentNode.parentNode;
+			grandParent.removeChild(parentNode, true);
+		    }
 		}
 	    }
 
-	    rstore.each(function(item) { // add new items
+	    let items = rstore.getData().items.flatMap(me.viewFilter.itemMap ?? Ext.identityFn);
+	    items.forEach(function(item) { // add new items
 		let olditem = index[item.data.id];
 		if (olditem) {
 		    return;
@@ -355,8 +402,10 @@ Ext.define('PVE.tree.ResourceTree', {
 	    store.resumeEvents();
 	    store.fireEvent('refresh', store);
 
+	    let foundChild = findNode(rootnode, lastsel?.data.id);
+
 	    // select parent node if original selected node vanished
-	    if (lastsel && !rootnode.findChild('id', lastsel.data.id, true)) {
+	    if (lastsel && !foundChild) {
 		lastsel = rootnode;
 		for (const node of parents) {
 		    if (rootnode.findChild('id', node.data.id, true)) {
@@ -476,7 +525,7 @@ Ext.define('PVE.tree.ResourceTree', {
 		if (nodeid === 'root') {
 		    node = rootnode;
 		} else {
-		    node = rootnode.findChild('id', nodeid, true);
+		    node = findNode(rootnode, nodeid);
 		}
 		if (node) {
 		    me.selectExpand(node);
@@ -498,6 +547,24 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	rstore.on("load", updateTree);
 	rstore.startUpdate();
+
+	me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
+	    me.store.getRootNode().cascadeBy({
+		before: function(node) {
+		    if (node.data.groupbyid) {
+			node.beginEdit();
+			let info = node.data;
+			me.setIconCls(info);
+			me.setText(info);
+			if (me.viewFilter.groupRenderer) {
+			    info.text = me.viewFilter.groupRenderer(info);
+			}
+			node.commit();
+		    }
+		    return true;
+		},
+	    });
+	});
     },
 
 });
-- 
2.39.5



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