ui: implment task history limit and make it configurable

we showed 'last month' even if we did not limit the api call
implement that and make the number of days configurable
(we have most of the code already available for that, since
the base dashboard got copied from pmg and never cleaned up)

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

diff --git a/www/Dashboard.js b/www/Dashboard.js
index a04b40408617e0f5ef37f68c8757ce27dd280d49..5c9d5c3ae060aa3117c50d968a396d3ff9678848 100644 (file)
--- a/www/Dashboard.js
+++ b/www/Dashboard.js
@@ -21,23 +21,23 @@ Ext.define('PBS.Dashboard', {
                    defaultButton: 'savebutton',
                    items: [{
                        xtype: 'proxmoxintegerfield',
-                       itemId: 'hours',
+                       itemId: 'days',
                        labelWidth: 100,
                        anchor: '100%',
                        allowBlank: false,
                        minValue: 1,
-                       maxValue: 24,
-                       value: viewModel.get('hours'),
+                       maxValue: 60,
+                       value: viewModel.get('days'),
                        fieldLabel: gettext('Hours to show'),
                    }],
                    buttons: [{
                        text: gettext('Save'),
-                       reference: 'loginButton',
+                       reference: 'savebutton',
                        formBind: true,
                        handler: function() {
                            var win = this.up('window');
-                           var hours = win.down('#hours').getValue();
-                           me.setHours(hours, true);
+                           var days = win.down('#days').getValue();
+                           me.setDays(days, true);
                            win.close();
                        },
                    }],
@@ -45,15 +45,17 @@ Ext.define('PBS.Dashboard', {
            }).show();
        },
 
-       setHours: function(hours, setState) {
+       setDays: function(days, setState) {
            var me = this;
            var viewModel = me.getViewModel();
-           viewModel.set('hours', hours);
+           viewModel.set('days', days);
            viewModel.notify();
 
+           viewModel.getStore('tasks').reload();
+
            if (setState) {
                var sp = Ext.state.Manager.getProvider();
-               sp.set('dashboard-hours', hours);
+               sp.set('dashboard-days', days);
            }
        },
 
@@ -164,24 +166,20 @@ Ext.define('PBS.Dashboard', {
        init: function(view) {
            var me = this;
            var sp = Ext.state.Manager.getProvider();
-           var hours = sp.get('dashboard-hours') || 12;
-           me.setHours(hours, false);
+           var days = sp.get('dashboard-days') || 30;
+           me.setDays(days, false);
        },
     },
 
     viewModel: {
        data: {
-           timespan: 300, // in seconds
-           hours: 12, // in hours
-           error_shown: false,
            fingerprint: "",
-           'bytes_in': 0,
-           'bytes_out': 0,
-           'avg_ptime': 0.0,
+           days: 30,
        },
 
        formulas: {
            disableFPButton: (get) => get('fingerprint') === "",
+           sinceEpoch: (get) => (Date.now()/1000 - get('days') * 24*3600).toFixed(0),
        },
 
        stores: {
@@ -226,6 +224,9 @@ Ext.define('PBS.Dashboard', {
                proxy: {
                    type: 'proxmox',
                    url: '/api2/json/status/tasks',
+                   extraParams: {
+                       since: '{sinceEpoch}',
+                   },
                },
                listeners: {
                    load: 'updateTasks',
@@ -234,7 +235,7 @@ Ext.define('PBS.Dashboard', {
        },
     },
 
-    title: gettext('Dashboard') + ' - WIP',
+    title: gettext('Dashboard'),
 
     layout: {
        type: 'column',
@@ -248,6 +249,13 @@ Ext.define('PBS.Dashboard', {
        margin: '0 20 20 0',
     },
 
+    tools: [
+       {
+           type: 'gear',
+           handler: 'openDashboardOptions',
+       },
+    ],
+
     scrollable: true,
 
     items: [
@@ -296,6 +304,10 @@ Ext.define('PBS.Dashboard', {
        },
        {
            xtype: 'pbsLongestTasks',
+           bind: {
+               title: gettext('Longest Tasks') + ' (' +
+               Ext.String.format(gettext('{0} days'), '{days}') + ')',
+           },
            reference: 'longesttasks',
            height: 250,
        },
@@ -304,6 +316,10 @@ Ext.define('PBS.Dashboard', {
            height: 250,
        },
        {
+           bind: {
+               title: gettext('Task Summary') + ' (' +
+               Ext.String.format(gettext('{0} days'), '{days}') + ')',
+           },
            xtype: 'pbsTaskSummary',
            reference: 'tasksummary',
        },

diff --git a/www/dashboard/LongestTasks.js b/www/dashboard/LongestTasks.js
index f74e768e9d608da9e6ff133f1c03c05173f25a29..20cf1183e30e720fcedf19729d15ee4e6cf78013 100644 (file)
--- a/www/dashboard/LongestTasks.js
+++ b/www/dashboard/LongestTasks.js
@@ -2,7 +2,7 @@ Ext.define('PBS.LongestTasks', {
     extend: 'Ext.grid.Panel',
     alias: 'widget.pbsLongestTasks',
 
-    title: gettext('Longest Tasks (last Month)'),
+    title: gettext('Longest Tasks'),
 
     hideHeaders: true,
     rowLines: false,

diff --git a/www/dashboard/TaskSummary.js b/www/dashboard/TaskSummary.js
index fcf32ab129615a567beb602a1f78996028dcd7bd..0cf049cdfb9f7ca6cff98aae2807807de2e10a18 100644 (file)
--- a/www/dashboard/TaskSummary.js
+++ b/www/dashboard/TaskSummary.js
@@ -2,7 +2,7 @@ Ext.define('PBS.TaskSummary', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.pbsTaskSummary',
 
-    title: gettext('Task Summary (last Month)'),
+    title: gettext('Task Summary'),
 
     controller: {
        xclass: 'Ext.app.ViewController',