[pve-devel] [PATCH manager 2/2] ui: ceph status: add tooltip with details to warnings

[Aaron Lauterer <a.lauterer@proxmox.com>]

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>
---
 www/manager6/ceph/Status.js | 41 +++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index 45583f51..19a1243a 100644
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -76,6 +76,47 @@ Ext.define('PVE.node.CephStatus', {
 			trackRemoved: false,
 			data: [],
 		    },
+
+		    listeners: {
+			destroy: function() {
+			    let view = this.getView();
+			    if (view.tooltip) {
+				view.tooltip.destroy();
+				delete view.tooltip;
+			    }
+			},
+			itemmouseenter: function(record, item) {
+			    let view = this.getView();
+			    if (!view) {
+				return;
+			    }
+			    if (!item.data.detail) {
+				return;
+			    }
+			    let text = item.data.detail.trimStart().replaceAll('\n', '<br>');
+			    if (text.length > 500) {
+			        text = `${text.substring(0, 400)}…`;
+			    }
+			    if (!view.tooltip) {
+				view.tooltip = Ext.create('Ext.tip.ToolTip', {
+				    target: view,
+				    trackMouse: true,
+				    dismissDelay: 0,
+				    tpl: '{text}',
+				    renderTo: Ext.getBody(),
+				});
+			    }
+			    view.tooltip.setData({ text });
+			    view.tooltip.show();
+			},
+			itemmouseleave: function(record, item) {
+			    let view = this.getView();
+			    if (view.tooltip) {
+				view.tooltip.destroy();
+				delete view.tooltip;
+			    }
+			},
+		    },
 		    emptyText: gettext('No Warnings/Errors'),
 		    columns: [
 			{
-- 
2.30.2