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 <[email protected]> --- 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 _______________________________________________ pve-devel mailing list [email protected] https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
