From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 ; 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 ; 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 ; 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 ; Wed, 8 Mar 2023 13:09:20 +0100 (CET) From: Aaron Lauterer 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-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 --- 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', '
'); + }, + 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