Re: [pbs-devel] [PATCH proxmox-backup 11/11] ui: tape/ChangerStatus: show the state of the drive

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

On 2/18/21 15:40, Dominik Csapak wrote:
> an optimize the columns for smaller layouts (1280 width)
> we show either:
> * Idle
> * spinner + status (if no upid)
> * spinner + rendered UPID (clickable, opens task viewer)
> 
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> we probably want to have an updatestore for only the drive state
> of the changer (such an api call would not cost much, since it
> only checks a lock + read from tmpfs) to have an up-to-date view
> of the drive state. If we have that, we can enable/disable
> buttons/options for busy drives.
> 
>   www/tape/ChangerStatus.js | 47 ++++++++++++++++++++++++++++++++++++++-
>   1 file changed, 46 insertions(+), 1 deletion(-)
> 
> diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
> index 436bae72..5a1c6073 100644
> --- a/www/tape/ChangerStatus.js
> +++ b/www/tape/ChangerStatus.js
> @@ -498,6 +498,42 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   	    }
>   	    return status;
>   	},
> +
> +	renderState: function(value, md, record) {
> +	    if (!value) {
> +		return gettext('Idle');
> +	    }
> +
> +	    let icon = '<i class="fa fa-spinner fa-pulse fa-fw"></i>';
> +
> +	    if (value.startsWith("UPID")) {
> +		let upid = Proxmox.Utils.parse_task_upid(value);
> +		md.tdCls = "pointer";
> +		return `${icon} ${upid.desc}`;
> +	    }
> +
> +	    return `${icon} ${value}`;
> +	},
> +
> +	control: {
> +	    'grid[reference=drives]': {
> +		cellclick: function(table, td, ci, rec, tr, ri, e) {
> +		    if (!e.position.column.dataIndex === 'state') {

this line should be

if (e.position.column.dataIndex !== 'state') {

i'll fix in a potential v2 or alternatively send a fixup

> +			return;
> +		    }
> +
> +		    let upid = rec.data.state;
> +		    if (!upid || !upid.startsWith("UPID")) {
> +			return;
> +		    }
> +
> +		    Ext.create('Proxmox.window.TaskViewer', {
> +			autoShow: true,
> +			upid,
> +		    });
> +		},
> +	    },
> +	},
>       },
>   
>       listeners: {
> @@ -641,7 +677,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   				    text: gettext('Inventory'),
>   				    dataIndex: 'is-labeled',
>   				    renderer: 'renderIsLabeled',
> -				    flex: 1,
> +				    flex: 1.5,
>   				},
>   				{
>   				    text: gettext("Name"),
> @@ -650,10 +686,17 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   				    flex: 1,
>   				    renderer: Ext.htmlEncode,
>   				},
> +				{
> +				    text: gettext('State'),
> +				    dataIndex: 'state',
> +				    flex: 3,
> +				    renderer: 'renderState',
> +				},
>   				{
>   				    text: gettext("Vendor"),
>   				    sortable: true,
>   				    dataIndex: 'vendor',
> +				    hidden: true,
>   				    flex: 1,
>   				    renderer: Ext.htmlEncode,
>   				},
> @@ -661,6 +704,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   				    text: gettext("Model"),
>   				    sortable: true,
>   				    dataIndex: 'model',
> +				    hidden: true,
>   				    flex: 1,
>   				    renderer: Ext.htmlEncode,
>   				},
> @@ -668,6 +712,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   				    text: gettext("Serial"),
>   				    sortable: true,
>   				    dataIndex: 'serial',
> +				    hidden: true,
>   				    flex: 1,
>   				    renderer: Ext.htmlEncode,
>   				},
>