[pbs-devel] [PATCH proxmox-backup v2 3/6] ui: implment task history limit and make it configurable

[Thomas Lamprecht]

On 06.10.20 12:25, Dominik Csapak wrote:
> 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 at proxmox.com>
> ---
> changes from v1:
> * use the days for the relevant subpanels only
>  www/Dashboard.js              | 52 +++++++++++++++++++++++------------
>  www/dashboard/LongestTasks.js |  2 +-
>  www/dashboard/TaskSummary.js  |  2 +-
>  3 files changed, 36 insertions(+), 20 deletions(-)
> 
> diff --git a/www/Dashboard.js b/www/Dashboard.js
> index a04b4040..5c9d5c3a 100644
> --- 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'),

s/Hours/Days/

(can do a fixup here, though)


>  		    }],
>  		    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 f74e768e..20cf1183 100644
> --- 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 fcf32ab1..0cf049cd 100644
> --- 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',
>