ui: grid/Resources: eslint fixes and code cleanup/refactoring

this is a major cleanup, using the current ExtJS and ES2018 features
allows to do a lot more concise and nicer.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/grid/ResourceGrid.js b/www/manager6/grid/ResourceGrid.js
index dd20f05878bf79435870000282540c4da5aa5ce7..c6757e9b11361b007d5807594b2ea6eed6e23858 100644 (file)
--- a/www/manager6/grid/ResourceGrid.js
+++ b/www/manager6/grid/ResourceGrid.js
@@ -8,61 +8,45 @@ Ext.define('PVE.grid.ResourceGrid', {
        direction: 'ASC',
     },
     initComponent: function() {
-       var me = this;
+       let me = this;
 
-       var rstore = PVE.data.ResourceStore;
-       var sp = Ext.state.Manager.getProvider();
+       let rstore = PVE.data.ResourceStore;
 
-       var coldef = rstore.defaultColumns();
-
-       var store = Ext.create('Ext.data.Store', {
+       let store = Ext.create('Ext.data.Store', {
            model: 'PVEResources',
            sorters: me.defaultSorter,
-           proxy: { type: 'memory' },
+           proxy: {
+               type: 'memory',
+           },
        });
 
-       var textfilter = '';
-
-       var textfilter_match = function(item) {
-           var match = false;
-           Ext.each(['name', 'storage', 'node', 'type', 'text'], function(field) {
-               var v = item.data[field];
-               if (v !== undefined) {
-                   v = v.toLowerCase();
-                   if (v.indexOf(textfilter) >= 0) {
-                       match = true;
-                       return false;
-                   }
+       let textfilter = '';
+       let textfilterMatch = function(item) {
+           for (const field of ['name', 'storage', 'node', 'type', 'text']) {
+               let v = item.data[field];
+               if (v && v.toLowerCase().indexOf(textfilter) >= 0) {
+                   return true;
                }
-           });
-           return match;
+           }
+           return false;
        };
 
-       var updateGrid = function() {
+       let updateGrid = function() {
            var filterfn = me.viewFilter ? me.viewFilter.filterfn : null;
 
-           //console.log("START GRID UPDATE " +  me.viewFilter);
-
            store.suspendEvents();
 
-           var nodeidx = {};
-           var gather_child_nodes = function(cn) {
-               if (!cn) {
+           let nodeidx = {};
+           let gather_child_nodes;
+           gather_child_nodes = function(node) {
+               if (!node || !node.childNodes) {
                    return;
                }
-                var cs = cn.childNodes;
-               if (!cs) {
-                   return;
-               }
-               var len = cs.length, i = 0, n, res;
-
-                for (; i < len; i++) {
-                   var child = cs[i];
-                   var orgnode = rstore.data.get(child.data.id);
-                   if (orgnode) {
-                       if ((!filterfn || filterfn(child)) &&
-                           (!textfilter || textfilter_match(child))) {
-                           nodeidx[child.data.id] = orgnode;
+               for (let child of node.childNodes) {
+                   let orgNode = rstore.data.get(child.data.id);
+                   if (orgNode) {
+                       if ((!filterfn || filterfn(child)) && (!textfilter || textfilterMatch(child))) {
+                           nodeidx[child.data.id] = orgNode;
                        }
                    }
                    gather_child_nodes(child);
@@ -71,77 +55,44 @@ Ext.define('PVE.grid.ResourceGrid', {
            gather_child_nodes(me.pveSelNode);
 
            // remove vanished items
-           var rmlist = [];
-           store.each(function(olditem) {
-               var item = nodeidx[olditem.data.id];
-               if (!item) {
-                   //console.log("GRID REM UID: " + olditem.data.id);
+           let rmlist = [];
+           store.each(olditem => {
+               if (!nodeidx[olditem.data.id]) {
                    rmlist.push(olditem);
                }
            });
-
            if (rmlist.length) {
                store.remove(rmlist);
            }
 
            // add new items
-           var addlist = [];
-           var key;
-           for (key in nodeidx) {
-               if (nodeidx.hasOwnProperty(key)) {
-                   var item = nodeidx[key];
-
-                   // getById() use find(), which is slow (ExtJS4 DP5)
-                   //var olditem = store.getById(item.data.id);
-                   var olditem = store.data.get(item.data.id);
-
-                   if (!olditem) {
-                       //console.log("GRID ADD UID: " + item.data.id);
-                       var info = Ext.apply({}, item.data);
-                       var child = Ext.create(store.model, info);
-                       addlist.push(item);
-                       continue;
-                   }
-                   // try to detect changes
-                   var changes = false;
-                   var fieldkeys = PVE.data.ResourceStore.fieldNames;
-                   var fieldcount = fieldkeys.length;
-                   var fieldind;
-                   for (fieldind = 0; fieldind < fieldcount; fieldind++) {
-                       var field = fieldkeys[fieldind];
-                       if (field != 'id' && item.data[field] != olditem.data[field]) {
-                           changes = true;
-                           //console.log("changed item " + item.id + " " + field + " " + item.data[field] + " != " + olditem.data[field]);
-                           olditem.beginEdit();
-                           olditem.set(field, item.data[field]);
-                       }
-                   }
-                   if (changes) {
-                       olditem.endEdit(true);
-                       olditem.commit(true);
+           let addlist = [];
+           for (const [_key, item] of Object.entries(nodeidx)) {
+               // getById() use find(), which is slow (ExtJS4 DP5)
+               let olditem = store.data.get(item.data.id);
+               if (!olditem) {
+                   addlist.push(item);
+                   continue;
+               }
+               let changes = false;
+               for (let field of PVE.data.ResourceStore.fieldNames) {
+                   if (field !== 'id' && item.data[field] !== olditem.data[field]) {
+                       changes = true;
+                       olditem.beginEdit();
+                       olditem.set(field, item.data[field]);
                    }
                }
+               if (changes) {
+                   olditem.endEdit(true);
+                   olditem.commit(true);
+               }
            }
-
            if (addlist.length) {
                store.add(addlist);
            }
-
            store.sort();
-
            store.resumeEvents();
-
            store.fireEvent('refresh', store);
-
-           //console.log("END GRID UPDATE");
-       };
-
-       var filter_task = new Ext.util.DelayedTask(function() {
-           updateGrid();
-       });
-
-       var load_cb = function() {
-           updateGrid();
        };
 
        Ext.apply(me, {
@@ -157,10 +108,10 @@ Ext.define('PVE.grid.ResourceGrid', {
                    value: textfilter,
                    enableKeyEvents: true,
                    listeners: {
+                       buffer: 500,
                        keyup: function(field, e) {
-                           var v = field.getValue();
-                           textfilter = v.toLowerCase();
-                           filter_task.delay(500);
+                           textfilter = field.getValue().toLowerCase();
+                           updateGrid();
                        },
                    },
                },
@@ -175,13 +126,13 @@ Ext.define('PVE.grid.ResourceGrid', {
                    ws.selectById(record.data.id);
                },
                destroy: function() {
-                   rstore.un("load", load_cb);
+                   rstore.un("load", () => updateGrid());
                },
            },
-            columns: coldef,
+            columns: rstore.defaultColumns(),
        });
        me.callParent();
        updateGrid();
-       rstore.on("load", load_cb);
+       rstore.on("load", () => updateGrid());
     },
 });