[pve-devel] [PATCH manager 1/2] ui: resource tree: limit tooltip to icon and text

[Dominik Csapak]

and exclude the tags for that, since we want the tags to have their own
tooltips

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
not really sure if we want to do this, since creating a custom tree
column type just for that seems overkill. also we have to touch private
properties of that here to change it which i don't really like

 www/manager6/tree/ResourceTree.js | 87 ++++++++++++++++++++++++++++---
 1 file changed, 80 insertions(+), 7 deletions(-)

diff --git a/www/manager6/tree/ResourceTree.js b/www/manager6/tree/ResourceTree.js
index 54c6403d..f23f9f99 100644
--- a/www/manager6/tree/ResourceTree.js
+++ b/www/manager6/tree/ResourceTree.js
@@ -103,10 +103,15 @@ Ext.define('PVE.tree.ResourceTree', {
     },
 
     setIconCls: function(info) {
+	let me = this;
 	let cls = PVE.Utils.get_object_icon_class(info.type, info);
 	if (cls !== '') {
 	    info.iconCls = cls;
 	}
+	let tip = me.getToolTip(info);
+	if (tip) {
+	    info.iconAttrs = `data-qtip="${tip}"`;
+	}
     },
 
     // add additional elements to text. Currently only the usage indicator for storages
@@ -130,15 +135,22 @@ Ext.define('PVE.tree.ResourceTree', {
 		info.text = `${info.name} (${String(info.vmid)})`;
 	    }
 	}
+	info.text = status + info.text;
 
-	info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
+	let tip = me.getToolTip(info);
+	if (tip) {
+	    info.text = `<span data-qtip="${tip}">${info.text}</span>`;
+	}
 
-	info.text = status + info.text;
+	info.text += PVE.Utils.renderTags(info.tags, PVE.UIOptions.tagOverrides);
     },
 
-    setToolTip: function(info) {
+    getToolTip: function(info) {
+	if (info.tip) {
+	    return info.tip;
+	}
 	if (info.type === 'pool' || info.groupbyid !== undefined) {
-	    return;
+	    return undefined;
 	}
 
 	let qtips = [gettext('Status') + ': ' + (info.qmpstatus || info.status)];
@@ -149,7 +161,9 @@ Ext.define('PVE.tree.ResourceTree', {
 	    qtips.push(gettext('HA State') + ": " + info.hastate);
 	}
 
-	info.qtip = qtips.join(', ');
+	let tip = qtips.join(', ');
+	info.tip = tip;
+	return tip;
     },
 
     // private
@@ -158,7 +172,6 @@ Ext.define('PVE.tree.ResourceTree', {
 
 	me.setIconCls(info);
 	me.setText(info);
-	me.setToolTip(info);
 
 	if (info.groupbyid) {
 	    info.text = info.groupbyid;
@@ -315,7 +328,6 @@ Ext.define('PVE.tree.ResourceTree', {
 		    Ext.apply(info, item.data);
 		    me.setIconCls(info);
 		    me.setText(info);
-		    me.setToolTip(info);
 		    olditem.commit();
 		}
 		if ((!item || moved) && olditem.isLeaf()) {
@@ -471,4 +483,65 @@ Ext.define('PVE.tree.ResourceTree', {
 	rstore.startUpdate();
     },
 
+    hideHeaders: true,
+
+    columns: [
+	{
+	    xtype: 'pveResourceTreeColumn',
+	    text: 'Name',
+	    flex: 1,
+	    dataIndex: 'text',
+	},
+    ],
+
+});
+
+// we want to change how the icon div is rendered, so we have to subclass
+// the whole tree column class to change the cellTpl and available data
+Ext.define('PVE.tree.ResourceTreeColumn', {
+    extend: 'Ext.tree.Column',
+    alias: 'widget.pveResourceTreeColumn',
+
+    // copied from Ext.tree.Column source except indentation and one detail (see inline comment)
+    cellTpl: [
+	'<tpl for="lines">',
+	    '<div class="{parent.childCls} {parent.elbowCls}-img ',
+	    '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
+	'</tpl>',
+	'<div class="{childCls} {elbowCls}-img {elbowCls}',
+	    '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>',
+	'<tpl if="checked !== null">',
+	    '<div role="button" {ariaCellCheckboxAttr}',
+		' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
+	'</tpl>',
+	'<tpl if="glyph">',
+	    '<span class="{baseIconCls}" ',
+	    '<tpl if="glyphFontFamily">',
+		'style="font-family:{glyphFontFamily}"',
+	    '</tpl>',
+	    '>{glyph}</span>',
+	'<tpl else>',
+	    '<tpl if="icon">',
+		'<img src="{blankUrl}"',
+	    '<tpl else>',
+		'<div',
+	    '</tpl>',
+	    ' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
+	    '{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
+	    // the line below has 'iconAttrs' added to it
+	    '<tpl if="icon">style="background-image:url({icon})"/><tpl else>{iconAttrs}></div></tpl>',
+	'</tpl>',
+	'<tpl if="href">',
+	    '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
+	'<tpl else>',
+	    '<span class="{textCls} {childCls}">{value}</span>',
+	'</tpl>',
+    ],
+
+    initTemplateRendererData: function(value, metaData, record, rowIdx, colIdx, store, view) {
+	let me = this;
+	let data = me.callParent(arguments);
+	data.iconAttrs = record.data.iconAttrs ?? '';
+	return data;
+    },
 });
-- 
2.30.2