[pve-devel] [PATCH v2 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 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 | 69 +++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js
index b223ab35..9de89df5 100644
--- a/www/manager6/ceph/Status.js
+++ b/www/manager6/ceph/Status.js
@@ -76,6 +76,66 @@ Ext.define('PVE.node.CephStatus', {
 			trackRemoved: false,
 			data: [],
 		    },
+		    generateTooltipText: (text) => {
+			text = text?.trimStart();
+			if (text.length > 500) {
+			    text = `${text.substring(0, 500)}…`;
+			}
+			return text.replaceAll('\n', '<br>');
+		    },
+		    updateTooltip: (view, isLeave) => {
+			if (!view.tooltip) {
+			    return;
+			}
+			if (view.store.data.length - 1 < view.tooltip.gridIndex || isLeave) {
+			    view.tooltip.hide();
+			} else {
+			    let data = view.store.getData().items[view.tooltip.gridIndex].data;
+			    if (!data.detail) {
+				return;
+			    }
+			    let text = view.up('#warnings').generateTooltipText(data.detail);
+			    view.tooltip.setData({ text });
+			}
+		    },
+		    destroyTooltip(view) {
+			view.tooltip?.destroy();
+			delete view.tooltip;
+		    },
+
+		    listeners: {
+			destroy: function() {
+			    let view = this.getView();
+			    this.destroyTooltip(view);
+			},
+			itemmouseenter: function(view, record, item, index) {
+			    if (!view) {
+				return;
+			    }
+			    if (!record.data.detail) {
+				return;
+			    }
+			    let text = this.generateTooltipText(record.data.detail);
+			    if (!view.tooltip) {
+				view.tooltip = Ext.create('Ext.tip.ToolTip', {
+				    target: view,
+				    trackMouse: true,
+				    dismissDelay: 0,
+				    tpl: '{text}',
+				    renderTo: Ext.getBody(),
+				});
+			    }
+			    view.tooltip.gridIndex = index;
+			    view.tooltip.setData({ text });
+			    view.tooltip.show();
+			},
+			itemmouseleave: function(view, record, item) {
+			    this.updateTooltip(view, true);
+			},
+			containermouseout: function(view) {
+			    this.destroyTooltip(view);
+			},
+		    },
 		    emptyText: gettext('No Warnings/Errors'),
 		    columns: [
 			{
@@ -133,6 +193,14 @@ Ext.define('PVE.node.CephStatus', {
 					}],
 				    });
 				},
+				listeners: {
+				    mouseover: (view) => {
+					view.up('#warnings').getView().tooltip.hide();
+				    },
+				    mouseout: (view) => {
+					view.up('#warnings').getView().tooltip.show();
+				    },
+				},
 			    },
 			},
 		    ],
@@ -286,6 +354,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(me.down('#warnings').getView());
 
 	// update services
 	me.getComponent('services').updateAll(me.metadata || {}, rec.data);
-- 
2.30.2