[pve-devel] [PATCH manager v2 1/2] ui: resource tree: optimize change detection

[Dominik Csapak]

the 'text' property comes from the ResourceStore, but we often replace
it here before rendering, so this will trigger every time for tree
elements where we make use of 'setText'.

Instead, check for the 'name' property. To ensure the tags get updated
with the correct colors, listen to the 'loadedUiOptions' event and
mark every node changed for the next update cycle.

This way the calls to setText, etc. should be drastically reduced.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
this is a partial replacement for:
https://lists.proxmox.com/pipermail/pve-devel/2023-November/060774.html

changes from v1:
* split out the optimization
* to show the current tag override colors, redraw the elements when
  there was a 'loadedUiOptions' event

 www/manager6/tree/ResourceTree.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index d3c15aec..e07e4ba0 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -264,7 +264,7 @@ Ext.define('PVE.tree.ResourceTree', {
 	let stateid = 'rid';
 
 	const changedFields = [
-	    'text', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
+	    'name', 'running', 'template', 'status', 'qmpstatus', 'hastate', 'lock', 'tags',
 	];
 
 	let updateTree = function() {
@@ -294,6 +294,9 @@ Ext.define('PVE.tree.ResourceTree', {
 		let item = rstore.data.get(olditem.data.id);
 
 		let changed = sorting_changed, moved = sorting_changed;
+		if (me.needsUpdate) {
+		    changed = true;
+		}
 		if (item) {
 		    // test if any grouping attributes changed, catches migrated tree-nodes in server view too
 		    for (const attr of moveCheckAttrs) {
@@ -376,6 +379,7 @@ Ext.define('PVE.tree.ResourceTree', {
 	    }
 
 	    pdata.updateCount++;
+	    me.needsUpdate = false;
 	};
 
 	sp.on('statechange', (_sp, key, value) => {
@@ -498,6 +502,10 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	rstore.on("load", updateTree);
 	rstore.startUpdate();
+
+	me.mon(Ext.GlobalEvents, 'loadedUiOptions', () => {
+	    me.needsUpdate = true;
+	});
     },
 
 });
-- 
2.30.2