proxmox-mirrors/pve-manager
1
0
Fork 0
mirror of https://git.proxmox.com/git/pve-manager synced 2025-08-08 04:47:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Thomas Lamprecht 2021-05-18 18:00:42 +02:00
parent c1802413d9
commit f79de80378
1 changed files with 51 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
www/manager6/grid/ResourceGrid.js
View File

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