[pve-devel] [PATCH manager 2/2] ui: resource tree: only fire 'refresh' event when something changed

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

to optimize the rendering to the dom, only fire the 'refresh' event of
the store at the end of the updateTree method when either:

* an element changed it's relevant data
* something moved
* a new element was inserted
* an element was removed

We also need to refresh the store when the UI options are reloaded, so
the tags get the correct color.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
while this can be reduce the dom manipulation by quite a bit, it's a
change we should test very carefully, since it might be the case that i
overlooked something in the code that would need a refresh too.

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

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 4c4e2908..b8238c4f 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -354,6 +354,7 @@ Ext.define('PVE.tree.ResourceTree', {
         let updateTree = function () {
             store.suspendEvents();
 
+            let any_changed = false;
             let rootnode;
             if (firstUpdate) {
                 rootnode = Ext.create('PVETree', {
@@ -437,6 +438,7 @@ Ext.define('PVE.tree.ResourceTree', {
                     }
                     me.setIconCls(info);
                     olditem.commit();
+                    any_changed = true;
                 }
                 if ((!item || moved) && olditem.isLeaf()) {
                     delete index[key];
@@ -454,6 +456,8 @@ Ext.define('PVE.tree.ResourceTree', {
                         let grandParent = parentNode.parentNode;
                         grandParent.removeChild(parentNode, true);
                     }
+
+                    any_changed = true;
                 }
             }
 
@@ -473,10 +477,13 @@ Ext.define('PVE.tree.ResourceTree', {
                 if (child) {
                     index[item.data.id] = child;
                 }
+                any_changed = true;
             });
 
             store.resumeEvents();
-            store.fireEvent('refresh', store);
+            if (any_changed) {
+                store.fireEvent('refresh', store);
+            }
 
             let foundChild = findNode(rootnode, lastsel?.data.id);
 
@@ -632,6 +639,9 @@ Ext.define('PVE.tree.ResourceTree', {
                     return true;
                 },
             });
+
+            // rerender
+            me.store.fireEvent('refresh', store);
         });
     },
 });
-- 
2.47.3



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