From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <a.lauterer@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 6F9DC9254
for <pve-devel@lists.proxmox.com>; Wed, 8 Mar 2023 13:09:51 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id 52A161FF44
for <pve-devel@lists.proxmox.com>; Wed, 8 Mar 2023 13:09:21 +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 Mar 2023 13:09:20 +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 4251545DF1
for <pve-devel@lists.proxmox.com>; Wed, 8 Mar 2023 13:09:20 +0100 (CET)
From: Aaron Lauterer <a.lauterer@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Wed, 8 Mar 2023 13:09:19 +0100
Message-Id: <20230308120919.1646218-3-a.lauterer@proxmox.com>
X-Mailer: git-send-email 2.30.2
In-Reply-To: <20230308120919.1646218-1-a.lauterer@proxmox.com>
References: <20230308120919.1646218-1-a.lauterer@proxmox.com>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL -0.042 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
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
URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more
information. [data.health]
Subject: [pve-devel] [PATCH v3 manager 2/2] ui: ceph status: add tooltip
with details to warnings
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 Mar 2023 12:09:51 -0000
This is another step to make it easier for admins to discover more
information for a warning or problem that is shown in the Ceph health
panel.
The length is limited to give a first glimpse. For the full details one
can click on the info/detail button.
Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
changes since
v2:
* don't use arrow functions -> rework context in many places. mainly use
'this' now
* destroy tooltip when no detail text is present. This can easily be
tested by setting 'ceph osd set noout' for example
* guard show/hide on info button with '?'
v1:
* only destroy it when leaving the whole grid, use show/hide for all
other situations
* factor out text handling of newlines and max lines
* factor out updating and destroying into their own functions
* add more listeners
* hide it when hovering the info button
* auto update it whenever the store is updated to either hide it
(nothing under the mouse) or set the content
www/manager6/ceph/Status.js | 75 +++++++++++++++++++++++++++++++++++++
1 file changed, 75 insertions(+)
diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index b223ab35..46ced651 100644
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -76,6 +76,72 @@ Ext.define('PVE.node.CephStatus', {
trackRemoved: false,
data: [],
},
+ generateTooltipText: function(text) {
+ text = text.trimStart();
+ if (text.length > 500) {
+ text = `${text.substring(0, 500)}…`;
+ }
+ return text.replaceAll('\n', '<br>');
+ },
+ updateTooltip: function(isLeave) {
+ let me = this;
+ if (!me.tooltip) {
+ return;
+ }
+ if (me.store.data.length - 1 < me.tooltip.gridIndex || isLeave) {
+ me.tooltip.hide();
+ return;
+ }
+ let data = me.store.getData().items[me.tooltip.gridIndex].data;
+ if (!data.detail) {
+ me.destroyTooltip();
+ return;
+ }
+ let text = me.generateTooltipText(data.detail);
+ me.tooltip.setData({ text });
+ me.tooltip.show();
+ },
+ destroyTooltip: function() {
+ this.tooltip?.destroy();
+ delete this.tooltip;
+ },
+
+ listeners: {
+ destroy: function() {
+ this.destroyTooltip();
+ },
+ itemmouseenter: function(view, record, item, index) {
+ let me = this;
+ if (!view) {
+ return;
+ }
+ if (!record.data.detail) {
+ if (me.tooltip) {
+ me.destroyTooltip();
+ }
+ return;
+ }
+ let text = me.generateTooltipText(record.data.detail);
+ if (!me.tooltip) {
+ me.tooltip = Ext.create('Ext.tip.ToolTip', {
+ target: view,
+ trackMouse: true,
+ dismissDelay: 0,
+ tpl: '{text}',
+ renderTo: Ext.getBody(),
+ });
+ }
+ me.tooltip.gridIndex = index;
+ me.tooltip.setData({ text });
+ me.tooltip.show();
+ },
+ itemmouseleave: function() {
+ this.updateTooltip(true);
+ },
+ containermouseout: function() {
+ this.destroyTooltip();
+ },
+ },
emptyText: gettext('No Warnings/Errors'),
columns: [
{
@@ -133,6 +199,14 @@ Ext.define('PVE.node.CephStatus', {
}],
});
},
+ listeners: {
+ mouseover: function() {
+ this.up('#warnings').tooltip?.hide();
+ },
+ mouseout: function() {
+ this.up('#warnings').tooltip?.show();
+ },
+ },
},
},
],
@@ -286,6 +360,7 @@ Ext.define('PVE.node.CephStatus', {
me.down('#overallhealth').updateHealth(PVE.Utils.render_ceph_health(rec.data.health || {}));
// add errors to gridstore
me.down('#warnings').getStore().loadRawData(me.generateCheckData(rec.data.health || {}), false);
+ me.down('#warnings').updateTooltip();
// update services
me.getComponent('services').updateAll(me.metadata || {}, rec.data);
--
2.30.2