[pbs-devel] [PATCH proxmox-backup v2 6/6] ui: add tooltip to datastore in maintenance mode

[Hannes Laimer <h.laimer@proxmox.com>]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
Tooltips are already used in pve-manager, but in a TreePanel. For some
reason qtips are not available 'out of the box' for TreeList, therefore
the custom 'qtiptreelistitem' is needed here.

 www/NavigationTree.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 4f451148..28323c53 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -121,9 +121,26 @@ Ext.define('PBS.store.NavigationStore', {
     },
 });
 
+Ext.define('CustomTreeListItem', {
+    extend: 'Ext.list.TreeItem',
+    xtype: 'qtiptreelistitem',
+    updateNode: function(node, oldNode) {
+	const qtip = node ? node.get('qtip') : null;
+	this.callParent([node, oldNode]);
+	if (qtip) {
+	    this.element.dom.setAttribute('data-qtip', qtip);
+	} else {
+	    this.element.dom.removeAttribute('data-qtip');
+	}
+    },
+});
+
 Ext.define('PBS.view.main.NavigationTree', {
     extend: 'Ext.list.Tree',
     xtype: 'navigationtree',
+    defaults: {
+	xtype: 'qtiptreelistitem',
+    },
 
     controller: {
 	xclass: 'Ext.app.ViewController',
@@ -230,14 +247,17 @@ Ext.define('PBS.view.main.NavigationTree', {
 		    j++;
 		}
 
-		let iconCls = 'fa fa-database';
+		let [qtip, iconCls] = ['', 'fa fa-database'];
 		const maintenance = records[i].data.maintenance;
 		if (maintenance) {
+		    const [type, message] = PBS.Utils.parseMaintenanceMode(maintenance);
+		    qtip = `${type}${message ? ': ' + message : ''}`;
 		    iconCls = 'fa fa-database pmx-tree-icon-custom maintenance';
 		}
 
 		const child = {
 		    text: name,
+		    qtip,
 		    path: `DataStore-${name}`,
 		    iconCls,
 		    leaf: true,
-- 
2.30.2