Re: [pbs-devel] [PATCH proxmox-backup 3/3] ui: datastore content: add action to show upload statistics

[Dominik Csapak <d.csapak@proxmox.com>]

On 11/27/23 10:28, Thomas Lamprecht wrote:
> On 01.08.23 11:29, Dominik Csapak wrote:
>> inspired by how we show volume statistics for tape drives
>>
>> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
>> ---
>> we could also add it as a tooltip somewhere else, eg the size column
>>
>> also, this pattern for the window could be refactored into a
>> 'keyvalueinfowindow' (or something like that), since we already use that
>> pattern a few time
>>
>>   www/datastore/Content.js | 56 ++++++++++++++++++++++++++++++++++++++++
>>   1 file changed, 56 insertions(+)
>>
>> diff --git a/www/datastore/Content.js b/www/datastore/Content.js
>> index 9fc07d49..bb2d76ee 100644
>> --- a/www/datastore/Content.js
>> +++ b/www/datastore/Content.js
>> @@ -711,6 +711,56 @@ Ext.define('PBS.DataStoreContent', {
>>   	    });
>>   	},
>>   
>> +	showUploadStatistics: function(view, rI, cI, item, e, rec) {
>> +	    let me = this;
>> +
>> +	    let list = [];
>> +
>> +	    let keyMap = {
>> +		count: gettext('Chunk Count'),
>> +		duplicates: gettext('Duplicate Chunks'),
>> +		size: gettext('Size'),
>> +		compressed_size: gettext('Compressed Size'),
>> +	    };
>> +
>> +	    for (let [key, val] of Object.entries(rec.data['upload-statistic'])) {
> 
> should we explicitly sort those? (e.g., by a predefined weight)

yes, that would be better

> 
>> +		if (key === 'size' || key === 'compressed_size') {
>> +		    val = Proxmox.Utils.format_size(val);
>> +		}
> 
> why mix a declarative map and some ad-hoc if checks?
> 
> Rather reuse the map above for a renderer:
> 
>      let schema = {
> 	count: {
> 	    label: gettext('Chunk Count'),
>          },
> 	duplicates: {
> 	    label: gettext('Duplicate Chunks'),
> 	},
> 	size: {
> 	    label: gettext('Size'),
> 	    renderer: Proxmox.Utils.format_size,
> 	},
> 	compressed_size: {
> 	    label: gettext('Compressed Size'),
> 	    renderer: Proxmox.Utils.format_size,
> 	},
>      };
> 

yes makes sense

>> +
>> +		list.push({ key: keyMap[key] ?? key, value: val });
>> +	    }
>> +
>> +	    Ext.create('Ext.window.Window', {
>> +		title: gettext('Upload Statistics'),
>> +		modal: true,
>> +		width: 600,
>> +		height: 250,
>> +		layout: 'fit',
>> +		scrollable: true,
>> +		items: [
>> +		    {
>> +			xtype: 'grid',
>> +			store: {
>> +			    data: list,
>> +			},
>> +			columns: [
>> +			    {
>> +				text: gettext('Property'),
>> +				dataIndex: 'key',
>> +				flex: 1,
>> +			    },
>> +			    {
>> +				text: gettext('Value'),
>> +				dataIndex: 'value',
>> +				flex: 1,
>> +			    },
> 
> I'd not bother showing that header, basically just noise, and for
> such small row count even sorting would not make that much sense.
> 
>> +			],
>> +		    },
>> +		],
>> +	    }).show();
>> +	},
>> +
>>   	onForget: function(table, rI, cI, item, e, { data }) {
>>   	    let me = this;
>>   	    let view = this.getView();
>> @@ -974,6 +1024,12 @@ Ext.define('PBS.DataStoreContent', {
>>   		    },
>>   		    isActionDisabled: (v, r, c, i, rec) => rec.data.ty !== 'dir',
>>   		},
>> +		{
>> +		    handler: 'showUploadStatistics',
>> +		    getTip: (v, m, rec) => Ext.String.format(gettext("Show Upload Statistics of '{0}'"), v),
> 
> for tooltips it probably makes more sense to use sentence case.
> 
>> +		    getClass: (v, m, rec) => rec.data.ty === 'dir' ? 'fa fa-info-circle' : 'pmx-hidden',
> 
> info-circle is not a good icon for some specific stats, i.e., not a
> general info about the backup snapshot.. A stop-watch could be nice,
> but there doesn't seem to be any, so possibly "fa-file-text-o" (a
> sheet of stat lines, so to say), not ideal too but IMO better than
> the info-circle.
> 
> ps. maybe injecting some more general info like duration could be
> nice (didn't check if we even have that available already here
> though).
> 
> That said maybe one could even make this an actual info dialog,
> with the stats only be one part of that, then the info-circle
> could be OK too and we'd not add a core UI element for a rather
> niche information that most won't look at often.

here we basically have only the info we have in the grid already,
but we could provide it in a nicer way maybe:

backup time, files (+sizes), last verification info (+link to task log), etc.

or did you mean we add a new api endpoint that returns more info about the snapshot
altogether? (which could also make sense)

> 
>> +		    isActionDisabled: (v, r, c, i, rec) => rec.data.ty !== 'dir',
>> +		},
>>   		{
>>   		    handler: 'onForget',
>>   		    getTip: (v, m, { data }) => {
>