ui: rework datastore content panel controller

Mostly refactoring, but actually fixes an issue where one seldom run
into a undefined dereference due to the store onLoad callback getting
triggered after some of the componet was destroyed - on quick
switching through the datastores.

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

www/DataStoreContent.js

@@ -29,34 +29,44 @@ Ext.define('PBS.DataStoreContent', {
 		throw "no datastore specified";
 	    }
 
-	    this.data_store = Ext.create('Ext.data.Store', {
+	    this.store = Ext.create('Ext.data.Store', {
 		model: 'pbs-data-store-snapshots',
 		sorters: 'backup-group',
 		groupField: 'backup-group',
 	    });
+	    this.store.on('load', this.onLoad, this);
 
 	    Proxmox.Utils.monStoreErrors(view, view.store, true);
 	    this.reload(); // initial load
 	},
 
 	reload: function() {
-	    var view = this.getView();
+	    let view = this.getView();
+
+	    if (!view.store || !this.store) {
+		console.warn('cannot reload, no store(s)');
+		return;
+	    }
 
 	    let url = `/api2/json/admin/datastore/${view.datastore}/snapshots`;
-	    this.data_store.setProxy({
+	    this.store.setProxy({
 		type: 'proxmox',
 		url:  url
 	    });
 
-	    this.data_store.load(function(records, operation, success) {
+	    this.store.load();
+	},
+
+	getRecordGroups: function(records) {
 	    let groups = {};
 
-		records.forEach(function(item) {
+	    for (const item of records) {
 		var btype = item.data["backup-type"];
 		let group = btype + "/" + item.data["backup-id"];
 
-		    if (groups[group] !== undefined)
+		if (groups[group] !== undefined) {
-			return;
+		    continue;
+		}
 
 		var cls = '';
 		if (btype === 'vm') {
@@ -66,7 +76,8 @@ Ext.define('PBS.DataStoreContent', {
 		} else if (btype === 'host') {
 		    cls = 'fa-building';
 		} else {
-			return btype + '/' + value;
+		    console.warn(`got unkown backup-type '${btype}'`);
+		    continue; // FIXME: auto render? what do?
 		}
 
 		groups[group] = {
@@ -78,15 +89,22 @@ Ext.define('PBS.DataStoreContent', {
 		    backup_id: item.data["backup-id"],
 		    children: []
 		};
-		});
+	    }
+
+	    return groups;
+	},
+
+	onLoad: function(store, records, success) {
+	    let view = this.getView();
+
+	    if (!success) {
+		return;
+	    }
+
+	    let groups = this.getRecordGroups(records);
 
 	    let backup_time_to_string = function(backup_time) {
-		    let pad = function(number) {
+		let pad = (number) => number < 10 ? '0' + number : number;
-			if (number < 10) {
-			    return '0' + number;
-			}
-			return number;
-		    };
 		return backup_time.getUTCFullYear() +
 		    '-' + pad(backup_time.getUTCMonth() + 1) +
 		    '-' + pad(backup_time.getUTCDate()) +
@@ -96,7 +114,7 @@ Ext.define('PBS.DataStoreContent', {
 		    'Z';
 	    };
 
-		records.forEach(function(item) {
+	    for (const item of records) {
 		let group = item.data["backup-type"] + "/" + item.data["backup-id"];
 		let children = groups[group].children;
 
@@ -108,30 +126,27 @@ Ext.define('PBS.DataStoreContent', {
 		data.cls = 'no-leaf-icons';
 
 		children.push(data);
-		});
+	    }
 
 	    let children = [];
-		Ext.Object.each(groups, function(key, group) {
+	    for (const [_key, group] of Object.entries(groups)) {
 		let last_backup = 0;
-		    group.children.forEach(function(item) {
+		for (const item of group.children) {
 		    if (item["backup-time"] > last_backup) {
 			last_backup = item["backup-time"];
 			group["backup-time"] = last_backup;
 			group.files = item.files;
 			group.size = item.size;
 		    }
-		    });
+		}
 		group.count = group.children.length;
-		    children.push(group)
+		children.push(group);
-		})
+	    }
 
 	    view.setRootNode({
 		expanded: true,
 		children: children
 	    });
-
-	    });
-
 	},
 
 	onPrune: function() {