gui: use a tree panel for DataStoreContent

www/DataStoreContent.js

@@ -4,12 +4,12 @@ Ext.define('pbs-data-store-content', {
 	'backup-type',
 	'backup-id',
 	{
-	    name: 'last-backup',
+	    name: 'backup-time',
 	    type: 'date',
 	    dateFormat: 'timestamp'
 	},
 	'files',
-	{ name: 'backup-count', type: 'int' },
+	{ name: 'size', type: 'int' },
 	{
 	    name: 'backup-group',
 	    calculate: function (data) {
@@ -20,13 +20,10 @@ Ext.define('pbs-data-store-content', {
 });
 
 Ext.define('PBS.DataStoreContent', {
-    extend: 'Ext.grid.GridPanel',
+    extend: 'Ext.tree.Panel',
     alias: 'widget.pbsDataStoreContent',
 
-    store: {
+    rootVisible: false,
-	model: 'pbs-data-store-content',
-	sorters: 'backup-group',
-    },
 
     controller: {
 	xclass: 'Ext.app.ViewController',
@@ -36,6 +33,12 @@ Ext.define('PBS.DataStoreContent', {
 		throw "no datastore specified";
 	    }
 
+	    this.data_store = Ext.create('Ext.data.Store', {
+		model: 'pbs-data-store-content',
+		sorters: 'backup-group',
+		groupField: 'backup-group',
+	    });
+
 	    view.title = gettext('Data Store Content: ') + view.datastore;
 
 	    Proxmox.Utils.monStoreErrors(view, view.store, true);
@@ -45,12 +48,80 @@ Ext.define('PBS.DataStoreContent', {
 	reload: function() {
 	    var view = this.getView();
 
-	    let url = `/api2/json/admin/datastore/${view.datastore}/groups`;
+	    let url = `/api2/json/admin/datastore/${view.datastore}/snapshots`;
-	    view.store.setProxy({
+	    this.data_store.setProxy({
 		type: 'proxmox',
 		url:  url
 	    });
-	    view.store.load();
+
+
+	    this.data_store.load(function(records, operation, success) {
+		console.log('loaded records');
+
+		let groups = {};
+
+		records.forEach(function(item) {
+		    var btype = item.data["backup-type"];
+		    let group = btype + "/" + item.data["backup-id"];
+
+		    if (groups[group] !== undefined)
+			return;
+
+		    var cls = '';
+		    if (btype === 'vm') {
+			cls = 'fa-desktop';
+		    } else if (btype === 'ct') {
+			cls = 'fa-cube';
+		    } else if (btype === 'host') {
+			cls = 'fa-building';
+		    } else {
+			return btype + '/' + value;
+		    }
+
+		    groups[group] = {
+			text: group,
+			leaf: false,
+			iconCls: "fa " + cls,
+			expanded: false,
+			children: []
+		    };
+		});
+
+		records.forEach(function(item) {
+		    console.log(item);
+
+		    let group = item.data["backup-type"] + "/" + item.data["backup-id"];
+		    let children = groups[group].children;
+
+		    let data = item.data;
+		    data.text = Ext.Date.format(data["backup-time"], 'Y-m-d H:i:s');
+		    data.leaf = true;
+
+		    children.push(data);
+		});
+
+		let children = [];
+		Ext.Object.each(groups, function(key, group) {
+		    let last_backup = 0;
+		    group.children.forEach(function(item) {
+			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)
+		})
+
+		view.setRootNode({
+		    expanded: true,
+		    children: children
+		});
+
+	    });
+
 	},
     },
 
@@ -76,39 +147,40 @@ Ext.define('PBS.DataStoreContent', {
 	Ext.apply(me, {
 	    columns: [
 		{
-		    header: gettext('Backup'),
+		    xtype: 'treecolumn',
-		    sortable: true,
+		    header: gettext("Backup Group"),
-		    renderer: render_backup_type,
+		    dataIndex: 'text',
-		    dataIndex: 'backup-id',
 		    flex: 1
 		},
 		{
 		    xtype: 'datecolumn',
-		    header: gettext('Last Backup'),
+		    header: gettext('Backup Time'),
 		    sortable: true,
-		    dataIndex: 'last-backup',
+		    dataIndex: 'backup-time',
 		    format: 'Y-m-d H:i:s',
-		    flex: 1
+		    width: 150
+		},
+		{
+		    header: gettext("Size"),
+		    sortable: true,
+		    dataIndex: 'size',
+		    renderer: Proxmox.Utils.format_size,
 		},
 		{
 		    xtype: 'numbercolumn',
 		    format: '0',
-		    header: gettext('Number of Backups'),
+		    header: gettext("Count"),
 		    sortable: true,
-		    dataIndex: 'backup-count',
+		    dataIndex: 'count',
-		    flex: 1
 		},
+		{
+		    header: gettext("Files"),
+		    sortable: false,
+		    dataIndex: 'files',
+		    flex: 4
+		}
 	    ],
 
-	    plugins: [{
-		ptype: 'rowexpander',
-		rowBodyTpl: new Ext.XTemplate(
-		    '<tpl for="files">',
-		    '<p>{.}</p>',
-		    '</tpl>'
-		),
-	    }],
-
 	    tbar: [
 		{
 		    text: gettext('Reload'),

www/css/ext6-pbs.css

@@ -170,3 +170,13 @@ p.logs {
     margin: 5px;
     padding: 5px;
 }
+
+/* tree icons */
+
+/* big symbols */
+.x-tree-icon-custom {
+    font-size: 1.25em;
+    line-height: 1.6em;
+    color: #555;
+    margin-right: 5px;
+}