ui: Dashboard/TaskSummary: show task overlay when clicking on a count

when clicking on a count in the summary, a small task overlay now pops
up that shows those tasks. this way, the user has an easy way
of seeing which tasks failed exactly

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

diff --git a/www/Dashboard.js b/www/Dashboard.js
index 961100df37944f6ca30ca0467ba4eb7c103ee0e3..1a68029f717eac868bfc96f39db585169a19c757 100644 (file)
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -166,7 +166,7 @@ Ext.define('PBS.Dashboard', {
                }
            });
 
-           me.lookup('tasksummary').updateTasks(data);
+           me.lookup('tasksummary').updateTasks(data, viewModel.get('sinceEpoch'));
        },
 
        init: function(view) {

diff --git a/www/dashboard/TaskSummary.js b/www/dashboard/TaskSummary.js
index 58393e1df716719a48aecf3ee5a98f9e65c3a178..6a503979ee5bbfcc0dda7630c9f3217e0f21379a 100644 (file)
--- a/www/dashboard/TaskSummary.js
+++ b/www/dashboard/TaskSummary.js
@@ -7,6 +7,13 @@ Ext.define('PBS.TaskSummary', {
     controller: {
        xclass: 'Ext.app.ViewController',
 
+       states: [
+           "",
+           "error",
+           "warning",
+           "ok",
+       ],
+
        types: [
            "backup",
            "prune",
@@ -20,6 +27,130 @@ Ext.define('PBS.TaskSummary', {
            "prune": gettext('Prunes'),
            "garbage_collection": gettext('Garbage collections'),
            "sync": gettext('Syncs'),
+           "verify": gettext('Verify'),
+       },
+
+       openTaskList: function(grid, td, cellindex, record, tr, rowindex) {
+           let me = this;
+           let view = me.getView();
+
+           if (cellindex > 0) {
+               let tasklist = view.tasklist;
+               let state = me.states[cellindex];
+               let type = me.types[rowindex];
+               let filterParam = {
+                   'statusfilter': state,
+                   'typefilter': type,
+               };
+
+               if (me.since) {
+                   filterParam.since = me.since;
+               }
+
+               if (record.data[state] === 0) {
+                   return;
+               }
+
+               if (tasklist === undefined) {
+                   tasklist = Ext.create('Ext.grid.Panel', {
+                       tools: [{
+                           handler: () => tasklist.setVisible(false),
+                       }],
+                       floating: true,
+                       scrollable: true,
+
+                       height: 400,
+                       width: 600,
+
+                       columns: [
+                           {
+                               text: gettext('Task'),
+                               dataIndex: 'upid',
+                               renderer: Proxmox.Utils.render_upid,
+                               flex: 1,
+                           },
+                           {
+                               header: gettext("Start Time"),
+                               dataIndex: 'starttime',
+                               width: 130,
+                               renderer: function(value) {
+                                   return Ext.Date.format(value, "M d H:i:s");
+                               },
+                           },
+                           {
+                               xtype: 'actioncolumn',
+                               width: 40,
+                               items: [
+                                   {
+                                       iconCls: 'fa fa-chevron-right',
+                                       tooltip: gettext('Open Task'),
+                                       handler: function(g, rowIndex) {
+                                           let rec = tasklist.getStore().getAt(rowIndex);
+                                           tasklist.setVisible(false);
+                                           Ext.create('Proxmox.window.TaskViewer', {
+                                               upid: rec.data.upid,
+                                               endtime: rec.data.endtime,
+                                               listeners: {
+                                                   close: () => tasklist.setVisible(true),
+                                               },
+                                           }).show();
+                                       },
+                                   },
+                               ],
+                           },
+                       ],
+
+                       store: {
+                           sorters: [
+                               {
+                                   property: 'starttime',
+                                   direction: 'DESC',
+                               },
+                           ],
+                           type: 'store',
+                           model: 'proxmox-tasks',
+                           proxy: {
+                               type: 'proxmox',
+                               url: "/api2/json/status/tasks",
+                           },
+                       },
+                   });
+
+                   view.on('destroy', function() {
+                       tasklist.setVisible(false);
+                       tasklist.destroy();
+                       tasklist = undefined;
+                   });
+
+                   view.tasklist = tasklist;
+               } else {
+                   let cidx = tasklist.cidx;
+                   let ridx = tasklist.ridx;
+
+                   if (cidx === cellindex && ridx === rowindex && tasklist.isVisible()) {
+                       tasklist.setVisible(false);
+                       return;
+                   }
+               }
+
+               tasklist.cidx = cellindex;
+               tasklist.ridx = rowindex;
+
+               let task = me.titles[type];
+               let status = "";
+               switch (state) {
+                   case 'ok': status = gettext("OK"); break;
+                   case 'warnings': status = gettext("Warning"); break;
+                   case 'error': status = Proxmox.Utils.errorText; break;
+               }
+               let icon = me.render_icon(state, 1);
+               tasklist.setTitle(`${task} - ${status} ${icon}`);
+               tasklist.getStore().getProxy().setExtraParams(filterParam);
+               tasklist.getStore().removeAll();
+
+               tasklist.showBy(td, 'bl-tl');
+               setTimeout(() => tasklist.getStore().reload(), 10);
+           }
        },
 
        render_icon: function(state, count) {
@@ -55,7 +186,7 @@ Ext.define('PBS.TaskSummary', {
        },
     },
 
-    updateTasks: function(source) {
+    updateTasks: function(source, since) {
        let me = this;
        let controller = me.getController();
        let data = [];
@@ -64,6 +195,7 @@ Ext.define('PBS.TaskSummary', {
            data.push(source[type]);
        });
        me.lookup('grid').getStore().setData(data);
+       controller.since = since;
     },
 
     layout: 'fit',
@@ -90,6 +222,10 @@ Ext.define('PBS.TaskSummary', {
                data: [],
            },
 
+           listeners: {
+               cellclick: 'openTaskList',
+           },
+
            columns: [
                {
                    dataIndex: 'type',