add datastore content panel

www/DataStoreContent.js

@@ -0,0 +1,62 @@
+Ext.define('pbs-data-store-content', {
+    extend: 'Ext.data.Model',
+    fields: [ 'snapshot' ],
+});
+
+Ext.define('PBS.DataStoreContent', {
+    extend: 'Ext.grid.GridPanel',
+    alias: 'widget.pbsDataStoreContent',
+
+    initComponent : function() {
+        var me = this;
+
+	if (!me.datastore) {
+	    throw "no datastore specified";
+	}
+
+	me.title =  gettext('Data Store Content: ') + me.datastore;
+
+	var store = new Ext.data.Store({
+	    model: 'pbs-data-store-content',
+	    sorters: 'name',
+	});
+
+	var reload = function() {
+	    var url = '/api2/json/admin/datastore/' + me.datastore + '/snapshots';
+	    me.store.setProxy({
+		type: 'proxmox',
+		url: url
+	    });
+            me.store.load();
+        };
+
+
+	Ext.apply(me, {
+	    store: store,
+	    columns: [
+		{
+		    header: gettext('Type'),
+		    sortable: true,
+		    dataIndex: 'backup-type',
+		    flex: 1
+		},
+		{
+		    header: gettext('ID'),
+		    sortable: true,
+		    dataIndex: 'backup-id',
+		    flex: 1
+		},
+		{
+		    header: gettext('Time'),
+		    sortable: true,
+		    dataIndex: 'backup-time',
+		    flex: 1
+		}
+	    ],
+	});
+
+	me.callParent();
+
+	reload();
+    }
+});

www/MainView.js

@@ -28,35 +28,53 @@ Ext.define('PBS.MainView', {
 
 	    var lastpanel = me.lookupReference('contentpanel').getLayout().getActiveItem();
 	    if (lastpanel && lastpanel.xtype === path) {
-		// we have the right component already,
-		// we just need to select the correct tab
-		// default to the first
-		subpath = subpath || 0;
-		if (lastpanel.getActiveTab) {
-		    // we assume lastpanel is a tabpanel
-		    if (lastpanel.getActiveTab().getItemId() !== subpath) {
-			// set the active tab
-			lastpanel.setActiveTab(subpath);
+		if (path === 'pbsDataStoreContent') {
+		    subpath = subpath || '';
+		    if (subpath === lastpanel.datastore) {
+			action.stop();
+			return;
 		    }
-		    // else we are already there
+		} else {
+		    // we have the right component already,
+		    // we just need to select the correct tab
+		    // default to the first
+		    subpath = subpath || 0;
+		    if (lastpanel.getActiveTab) {
+			// we assume lastpanel is a tabpanel
+			if (lastpanel.getActiveTab().getItemId() !== subpath) {
+			    // set the active tab
+			    lastpanel.setActiveTab(subpath);
+			}
+			// else we are already there
+		    }
+		    action.stop();
+		    return;
 		}
-		action.stop();
-		return;
 	    }
 
 	    action.resume();
 	},
 
-	changePath: function(path,subpath) {
+	changePath: function(path, subpath) {
 	    var me = this;
 	    var contentpanel = me.lookupReference('contentpanel');
 	    var lastpanel = contentpanel.getLayout().getActiveItem();
 
-	    var obj = contentpanel.add({ xtype: path });
+	    var obj;
+	    if (path === 'pbsDataStoreContent') {
+		obj = contentpanel.add({ xtype: path, datastore: subpath, border: false });
+	    } else {
+		obj = contentpanel.add({ xtype: path, border: false });
+	    }
+
 	    var treelist = me.lookupReference('navtree');
 
 	    treelist.suspendEvents();
-	    treelist.select(path);
+	    if (subpath === undefined) {
+		treelist.select(path);
+	    } else {
+		treelist.select(path + ':' + subpath);
+	    }
 	    treelist.resumeEvents();
 
 	    if (Ext.isFunction(obj.setActiveTab)) {
@@ -224,5 +242,3 @@ Ext.define('PBS.MainView', {
 	}
     ]
 });
-
-

www/Makefile

@@ -12,6 +12,7 @@ JSSRC=							\
 	SystemConfiguration.js				\
 	Subscription.js					\
 	DataStoreConfig.js				\
+	DataStoreContent.js				\
 	ServerAdministration.js				\
 	Dashboard.js					\
 	NavigationTree.js				\

www/NavigationTree.js

@@ -46,6 +46,66 @@ Ext.define('PBS.view.main.NavigationTree', {
     extend: 'Ext.list.Tree',
     xtype: 'navigationtree',
 
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	init: function(view) {
+
+	    view.rstore = Ext.create('Proxmox.data.UpdateStore', {
+		autoStart: true,
+		interval: 15 * 1000,
+		storeid: 'pbs-datastore-list',
+		model: 'pbs-data-store-config'
+	    });
+
+	    view.rstore.on('load', this.onLoad, this);
+	    view.on('destroy', view.rstore.stopUpdate);
+	},
+
+	onLoad: function(store, records, success) {
+	    var view = this.getView();
+
+	    let root = view.getStore().getRoot();
+
+	    if (!root.findChild('path', 'pbsDataStoreList', false)) {
+		root.appendChild({
+		    text: gettext('Data Store'),
+		    expanded: true,
+		    iconCls: 'fa fa-archive',
+		    path: 'pbsDataStoreList',
+		    leaf: false
+		});
+	    }
+
+	    var list = root.findChild('path', 'pbsDataStoreList', false);
+	    var length = records.length;
+	    var lookup_hash = {};
+	    for (var i = 0; i < length; i++) {
+		var name = records[i].id;
+		lookup_hash[name] = true;
+		if (!list.findChild('text', name, false)) {
+		    list.appendChild({
+			text: name,
+			path: 'pbsDataStoreContent:' + name,
+			iconCls: 'fa fa-hdd-o',
+			leaf: true
+		    });
+		}
+	    }
+
+	    var erase_list = [];
+	    list.eachChild(function(node) {
+		var name = node.data.text;
+		if (!lookup_hash[name]) {
+		    erase_list.push(node);
+		}
+	    });
+
+	    Ext.Array.forEach(erase_list, function(node) { node.erase(); });
+
+	}
+    },
+
     select: function(path) {
 	var me = this;
 	var item = me.getStore().findRecord('path', path, 0, false, true, true);