[pve-devel] [PATCH v3 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>
---
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