nice, works really good now with the different interactions
(button/container/changing store/etc)
some comments inline (mostly minor stuff though)
On 3/3/23 16:59, Aaron Lauterer wrote:
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();
above you indicate that text might be undefined (with the 'text?.'),
but below you don't to any checks again
iff text can really be undefined, i'd do
text = text?.trimStart() ?? '';
otherwise just drop the '?'
+ if (text.length > 500) {
+ text = `${text.substring(0, 500)}…`;
+ }
+ return text.replaceAll('\n', '<br>');
+ },
+ updateTooltip: (view, isLeave) => {
+ if (!view.tooltip) {
i was rather confused at first what 'view' actually is, but
i found out it's the table view of the grid
couldn't you use always the grid ('this') instead ?
or is there some instance where 'this' isn't the grid?
i think that would make the code a bit more readable, since
you don't have to pass the view around
+ 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;
this probably only works by chance, since the view *also* has the store
bound, normally we'd do 'me.getStore()' (which should work here with
'let me = this;' )
+ if (!data.detail) {
+ return;
+ }
+ let text =
view.up('#warnings').generateTooltipText(data.detail);
also this could just be 'me.generateTooltipText(...)', no?
+ 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();
isn't here the 'view' actually the button?
+ },
+ mouseout: (view) => {
+
view.up('#warnings').getView().tooltip.show();
same here?
+ },
+ },
},
},
],
@@ -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);
_______________________________________________
pve-devel mailing list
[email protected]
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
