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

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

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') {
+			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,
 				},
-- 
2.20.1