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

[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@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

[pve-devel] [PATCH manager 2/2] ui: add tooltips to non-full tags globally

[Dominik Csapak]

by using the delegate function of ExtJS' tooltips on the global
Workspace element and using the proper css selectors

this way, we can limit the tooltips to the non-full ones
(in contrast to using data-qtip on the element, which would
always be show, even for tags with the 'full' style)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
honestly not sure if this has any performance impacts, since it somehow
has to attach an event handler to the global object which has to do work
now every time to check for the css classes...

 www/manager6/Workspace.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 18d574b7..cb998e8a 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -526,6 +526,26 @@ Ext.define('PVE.StdWorkspace', {
 		modalWindows.forEach(win => win.alignTo(me, 'c-c'));
 	    }
 	});
+
+	let tagSelectors = [];
+	['circle', 'dense'].forEach((style) => {
+	    ['dark', 'light'].forEach((variant) => {
+		tagSelectors.push(`.proxmox-tags-${style} .proxmox-tag-${variant}`);
+	    });
+	});
+
+	Ext.create('Ext.tip.ToolTip', {
+	    target: me.el,
+	    delegate: tagSelectors.join(', '),
+	    trackMouse: true,
+	    renderTo: Ext.getBody(),
+	    listeners: {
+		beforeshow: function(tip) {
+		    let tag = Ext.htmlEncode(tip.triggerElement.innerHTML);
+		    tip.update(tag);
+		},
+	    },
+	});
     },
 });
 
-- 
2.30.2

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

[Dominik Csapak]

mhmm.. disregard these patches for now, instead of creating a custom
class we can use the delegate from the tooltip (like in the second patch)

and i want to check the performance of the second patch before it get's applied
(if it's too bad, we can apply the technique only for the scope we need)