* [pve-devel] [PATCH v2 manager 0/2] ui: ceph: improve discoverability of warning details @ 2023-03-03 15:59 Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 1/2] ui: ceph: make the warning detail button stand out more Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings Aaron Lauterer 0 siblings, 2 replies; 5+ messages in thread From: Aaron Lauterer @ 2023-03-03 15:59 UTC (permalink / raw) To: pve-devel The goal for this small series is to make it easier/more obvious to see that there are potentially more details for a warning ceph is showing by: * having a tooltip with the details (limited in length) * making the detail/info button more visible changes since v1: * change creation of info window to use autoShow * rework tooltip to: * 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 Aaron Lauterer (2): ui: ceph: make the warning detail button stand out more ui: ceph status: add tooltip with details to warnings www/manager6/ceph/Status.js | 123 ++++++++++++++++++++++++++++-------- 1 file changed, 97 insertions(+), 26 deletions(-) -- 2.30.2 ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] [PATCH v2 manager 1/2] ui: ceph: make the warning detail button stand out more 2023-03-03 15:59 [pve-devel] [PATCH v2 manager 0/2] ui: ceph: improve discoverability of warning details Aaron Lauterer @ 2023-03-03 15:59 ` Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings Aaron Lauterer 1 sibling, 0 replies; 5+ messages in thread From: Aaron Lauterer @ 2023-03-03 15:59 UTC (permalink / raw) To: pve-devel The button for more details is barely noticable as something one can click on. By making it more obvious that it is a button, users will hopefully notice it easier. Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com> --- changes since v1: - use autoShow in the Ext.Create call www/manager6/ceph/Status.js | 56 +++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/www/manager6/ceph/Status.js b/www/manager6/ceph/Status.js index bdcf3f1b..b223ab35 100644 --- a/www/manager6/ceph/Status.js +++ b/www/manager6/ceph/Status.js @@ -101,37 +101,39 @@ Ext.define('PVE.node.CephStatus', { flex: 1, }, { - xtype: 'actioncolumn', + xtype: 'widgetcolumn', width: 40, align: 'center', tooltip: gettext('Detail'), - items: [ - { - iconCls: 'x-fa fa-info-circle', - handler: function(grid, rowindex, colindex, item, e, record) { - var win = Ext.create('Ext.window.Window', { - title: gettext('Detail'), - resizable: true, - modal: true, - width: 650, - height: 400, - layout: { - type: 'fit', - }, - items: [{ - scrollable: true, - padding: 10, - xtype: 'box', - html: [ - '<span>' + Ext.htmlEncode(record.data.summary) + '</span>', - '<pre>' + Ext.htmlEncode(record.data.detail) + '</pre>', - ], - }], - }); - win.show(); - }, + widget: { + xtype: 'button', + baseCls: 'x-btn', + userCls: 'x-btn-default-toolbar-small', + iconCls: 'fa fa-fw fa-info-circle x-btn-icon-el-default-toolbar-small', + handler: function() { + let record = this.getWidgetRecord(); + Ext.create('Ext.window.Window', { + title: gettext('Detail'), + autoShow: true, + resizable: true, + modal: true, + width: 650, + height: 400, + layout: { + type: 'fit', + }, + items: [{ + scrollable: true, + padding: 10, + xtype: 'box', + html: [ + `<span>${Ext.htmlEncode(record.data.summary)}</span>`, + `<pre>${Ext.htmlEncode(record.data.detail)}</pre>`, + ], + }], + }); }, - ], + }, }, ], }, -- 2.30.2 ^ permalink raw reply [flat|nested] 5+ messages in thread
* [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings 2023-03-03 15:59 [pve-devel] [PATCH v2 manager 0/2] ui: ceph: improve discoverability of warning details Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 1/2] ui: ceph: make the warning detail button stand out more Aaron Lauterer @ 2023-03-03 15:59 ` Aaron Lauterer 2023-03-08 9:27 ` Dominik Csapak 1 sibling, 1 reply; 5+ messages in thread From: Aaron Lauterer @ 2023-03-03 15:59 UTC (permalink / raw) To: pve-devel 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings Aaron Lauterer @ 2023-03-08 9:27 ` Dominik Csapak 2023-03-08 12:03 ` Aaron Lauterer 0 siblings, 1 reply; 5+ messages in thread From: Dominik Csapak @ 2023-03-08 9:27 UTC (permalink / raw) To: Proxmox VE development discussion, Aaron Lauterer 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 <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(); 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); ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings 2023-03-08 9:27 ` Dominik Csapak @ 2023-03-08 12:03 ` Aaron Lauterer 0 siblings, 0 replies; 5+ messages in thread From: Aaron Lauterer @ 2023-03-08 12:03 UTC (permalink / raw) To: Dominik Csapak, Proxmox VE development discussion On 3/8/23 10:27, Dominik Csapak wrote: > 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: [...] >> 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 '?' hmm yeah, AFAICT there are already checks in place before we even call generateTooltipText -> dropping 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 as discussed off-list: arrow functions do not set 'this' in the same context -> switch to regular 'updateTooltip: function(..) {' instead of arrow functions and in other places too. > [...] ^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2023-03-08 12:03 UTC | newest] Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 2023-03-03 15:59 [pve-devel] [PATCH v2 manager 0/2] ui: ceph: improve discoverability of warning details Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 1/2] ui: ceph: make the warning detail button stand out more Aaron Lauterer 2023-03-03 15:59 ` [pve-devel] [PATCH v2 manager 2/2] ui: ceph status: add tooltip with details to warnings Aaron Lauterer 2023-03-08 9:27 ` Dominik Csapak 2023-03-08 12:03 ` Aaron Lauterer
This is a public inbox, see mirroring instructions for how to clone and mirror all data and code used for this inbox