ui: add Task Panels for dashboard

LongestTasks:
grid that shows tasks sorted by duration in descending order

RunningTasks:
grid that shows all running tasks

TaskSummary:
an overview of backup,prune,gc and sync tasks (error/warning/ok)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

www/dashboard/TaskSummary.js

@@ -0,0 +1,81 @@
+Ext.define('PBS.TaskSummary', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.pbsTaskSummary',
+
+    title: gettext('Task Summary (last Month)'),
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	render_count: function(value, md, record, rowindex, colindex) {
+	    let cls = 'question';
+	    switch (colindex) {
+		case 1: cls = "times-circle critical"; break;
+		case 2: cls = "exclamation-circle warning"; break;
+		case 3: cls = "check-circle good"; break;
+		default: break;
+	    }
+	    return `<i class="fa fa-${cls}"></i> ${value}`;
+	},
+    },
+
+    updateTasks: function(data) {
+	let me = this;
+	data.backup.type = gettext('Backups');
+	data.prune.type = gettext('Prunes');
+	data.garbage_collection.type = gettext('Garbage collections');
+	data.sync.type = gettext('Syncs');
+	me.lookup('grid').getStore().setData([
+	    data.backup,
+	    data.prune,
+	    data.garbage_collection,
+	    data.sync,
+	]);
+    },
+
+    layout: 'fit',
+    bodyPadding: 15,
+    minHeight: 166,
+
+    // we have to wrap the grid in a panel to get the padding right
+    items: [
+	{
+	    xtype: 'grid',
+	    reference: 'grid',
+	    hideHeaders: true,
+	    border: false,
+	    bodyBorder: false,
+	    rowLines: false,
+	    viewConfig: {
+		stripeRows: false,
+		trackOver: false,
+	    },
+	    scrollable: false,
+	    disableSelection: true,
+
+	    store: {
+		data: []
+	    },
+
+	    columns: [
+		{
+		    dataIndex: 'type',
+		    flex: 1,
+		},
+		{
+		    dataIndex: 'error',
+		    renderer: 'render_count',
+		},
+		{
+		    dataIndex: 'warning',
+		    renderer: 'render_count',
+		},
+		{
+		    dataIndex: 'ok',
+		    renderer: 'render_count',
+		},
+	    ],
+	}
+    ],
+
+});