[pbs-devel] [PATCH proxmox-backup] ui: tape/DriveStatus: open task window on click on state

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

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
the code is not pretty, but thats afaics the only way, without putting
that functionality inside the InfoWidget (but we only need it now, so
maybe wait until we need it again?)

the extra css class is necessary, since we cannot change the class
of the div below (it is part of a template that gets rewritten)

 www/css/ext6-pbs.css    |  4 ++++
 www/tape/DriveStatus.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 5608a727..51d68711 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -273,3 +273,7 @@ span.snapshot-comment-column {
     height: 20px;
     background-image:url(../images/icon-tape-drive.svg);
 }
+
+.info-pointer div.right-aligned {
+    cursor: pointer;
+}
diff --git a/www/tape/DriveStatus.js b/www/tape/DriveStatus.js
index 3b67ce6f..bf083851 100644
--- a/www/tape/DriveStatus.js
+++ b/www/tape/DriveStatus.js
@@ -400,6 +400,7 @@ Ext.define('PBS.TapeManagement.DriveInfoPanel', {
 	},
 	{
 	    xtype: 'pmxInfoWidget',
+	    reference: 'statewidget',
 	    title: gettext('State'),
 	    bind: {
 		data: {
@@ -409,6 +410,23 @@ Ext.define('PBS.TapeManagement.DriveInfoPanel', {
 	},
     ],
 
+    clickState: function(e, t, eOpts) {
+	let me = this;
+	let vm = me.getViewModel();
+	let drive = vm.get('drive');
+	if (t.classList.contains('right-aligned')) {
+	    let upid = drive.state;
+	    if (!upid || !upid.startsWith("UPID")) {
+		return;
+	    }
+
+	    Ext.create('Proxmox.window.TaskViewer', {
+		autoShow: true,
+		upid,
+	    });
+	}
+    },
+
     updateData: function(store) {
 	let me = this;
 	if (!store) {
@@ -421,6 +439,16 @@ Ext.define('PBS.TapeManagement.DriveInfoPanel', {
 
 	let vm = me.getViewModel();
 	vm.set('drive', record.data);
+	let stateWidget = me.down('pmxInfoWidget[reference=statewidget]');
+	let stateEl = stateWidget.getEl();
+	stateEl.removeListener('click', me.clickState);
+	if (record.data.state) {
+	    stateEl.on('click', me.clickState, me);
+	    stateEl.addCls('info-pointer');
+	} else {
+	    stateEl.removeCls('info-pointer');
+	}
+
 	vm.notify();
     },
 
-- 
2.20.1