ui: Datastores Summary: change layout and chart

changes the layout to look i little bit more like the statistics panel
we have for ceph in pve, while changing to the UsageChart and adding
some more datastore infos (from last garbage collect)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/datastore/DataStoreListSummary.js

@@ -7,21 +7,20 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
     cbind: {
 	title: '{datastore}',
     },
+
+    referenceHolder: true,
     bodyPadding: 10,
 
-    controller: {
+    layout: {
-	xclass: 'Ext.app.ViewController',
+	type: 'hbox',
+	align: 'stretch',
     },
+
     viewModel: {
 	data: {
 	    full: "N/A",
-	    history: [],
+	    stillbad: 0,
-	},
+	    deduplication: 1.0,
-
-	stores: {
-	    historystore: {
-		data: [],
-	    },
 	},
     },
     setTasks: function(taskdata, since) {
@@ -44,99 +43,40 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
 
 	let estimate = PBS.Utils.render_estimate(statusData['estimated-full-date']);
 	vm.set('full', estimate);
+	vm.set('deduplication', PBS.Utils.calculate_dedup_factor(statusData['gc-status']).toFixed(2));
+	vm.set('stillbad', statusData['gc-status']['still-bad']);
+
 	let last = 0;
+	let time = statusData['history-start'];
+	let delta = statusData['history-delta'];
 	let data = statusData.history.map((val) => {
 	    if (val === null) {
 		val = last;
 	    } else {
 		last = val;
 	    }
-	    return val;
+	    let entry = {
+		time: time*1000, // js Dates are ms since epoch
+		val,
+	    };
+
+	    time += delta;
+	    return entry;
 	});
-	let historyStore = vm.getStore('historystore');
+
-	historyStore.setData([
+	me.lookup('historychart').setData(data);
-	    {
-		history: data,
-	    },
-	]);
     },
 
     items: [
 	{
 	    xtype: 'container',
 	    layout: {
-		type: 'hbox',
+		type: 'vbox',
 		align: 'stretch',
 	    },
 
-	    defaults: {
+	    width: 350,
-		padding: 5,
+	    padding: 10,
-	    },
-
-	    items: [
-		{
-		    xtype: 'panel',
-		    border: false,
-		    flex: 1,
-		},
-		{
-		    xtype: 'pmxInfoWidget',
-		    iconCls: 'fa fa-fw fa-line-chart',
-		    title: gettext('Estimated Full'),
-		    width: 230,
-		    printBar: false,
-		    bind: {
-			data: {
-			    text: '{full}',
-			},
-		    },
-		},
-	    ],
-	},
-	{
-	    // we cannot autosize a sparklineline widget,
-	    // abuse a grid with a single column/row to do it for us
-	    xtype: 'grid',
-	    hideHeaders: true,
-	    minHeight: 70,
-	    border: false,
-	    bodyBorder: false,
-	    rowLines: false,
-	    disableSelection: true,
-	    viewConfig: {
-		trackOver: false,
-	    },
-	    bind: {
-		store: '{historystore}',
-	    },
-	    columns: [{
-		xtype: 'widgetcolumn',
-		flex: 1,
-		dataIndex: 'history',
-		widget: {
-		    xtype: 'sparklineline',
-		    bind: '{record.history}',
-		    spotRadius: 0,
-		    fillColor: '#ddd',
-		    lineColor: '#555',
-		    lineWidth: 0,
-		    chartRangeMin: 0,
-		    chartRangeMax: 1,
-		    tipTpl: '{y:number("0.00")*100}%',
-		    height: 60,
-		},
-	    }],
-	},
-	{
-	    xtype: 'container',
-	    layout: {
-		type: 'hbox',
-		align: 'stretch',
-	    },
-
-	    defaults: {
-		padding: 5,
-	    },
 
 	    items: [
 		{
@@ -146,9 +86,63 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
 		    flex: 1,
 		    reference: 'usage',
 		},
+		{
+		    xtype: 'pmxInfoWidget',
+		    iconCls: 'fa fa-fw fa-line-chart',
+		    title: gettext('Estimated Full'),
+		    printBar: false,
+		    bind: {
+			data: {
+			    text: '{full}',
+			},
+		    },
+		},
+		{
+		    xtype: 'pmxInfoWidget',
+		    iconCls: 'fa fa-fw fa-compress',
+		    title: gettext('Deduplication Factor'),
+		    printBar: false,
+		    bind: {
+			data: {
+			    text: '{deduplication}',
+			},
+		    },
+		},
+		{
+		    xtype: 'pmxInfoWidget',
+		    iconCls: 'fa critical fa-fw fa-exclamation-triangle',
+		    title: gettext('Bad Chunks'),
+		    printBar: false,
+		    hidden: true,
+		    bind: {
+			data: {
+			    text: '{stillbad}',
+			},
+			visible: '{stillbad}',
+		    },
+		},
+	    ],
+	},
+	{
+	    xtype: 'container',
+	    layout: {
+		type: 'vbox',
+		align: 'stretch',
+	    },
+
+	    flex: 1,
+
+	    items: [
+		{
+		    padding: 5,
+		    xtype: 'pbsUsageChart',
+		    reference: 'historychart',
+		    title: gettext('Usage History'),
+		    height: 100,
+		},
 		{
 		    xtype: 'container',
-		    flex: 2,
+		    flex: 1,
 		    layout: {
 			type: 'vbox',
 			align: 'stretch',