From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id 42918A05DC
for <pve-devel@lists.proxmox.com>; Wed, 8 Nov 2023 16:49:59 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 28678AAF7
for <pve-devel@lists.proxmox.com>; Wed, 8 Nov 2023 16:49:59 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
[94.136.29.106])
(using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
key-exchange X25519 server-signature RSA-PSS (2048 bits))
(No client certificate requested)
by firstgate.proxmox.com (Proxmox) with ESMTPS
for <pve-devel@lists.proxmox.com>; Wed, 8 Nov 2023 16:49:58 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 5061947452
for <pve-devel@lists.proxmox.com>; Wed, 8 Nov 2023 16:49:58 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Wed, 8 Nov 2023 16:49:56 +0100
Message-Id: <20231108154957.1593434-1-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.30.2
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.017 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
T_SCC_BODY_TEXT_LINE -0.01 -
URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
information. [info.name]
Subject: [pve-devel] [PATCH manager 1/2] ui: resource tree: limit tooltip to
icon and text
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Wed, 08 Nov 2023 15:49:59 -0000
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