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

[Thomas Lamprecht]

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 at 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)

> +		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,
	},
    };

> +
> +		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.

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