mgr/dashboard: Landing Page improvements

[alfonsomthd]

Fixes: https://tracker.ceph.com/issues/42072
Signed-off-by: Alfonso Martínez almartin@redhat.com

NOW:

BEFORE:

Checklist

• References tracker ticket
• Updates documentation if necessary
• Includes tests for new functionality or reproducer for bug

---

Show available Jenkins commands

• jenkins retest this please
• jenkins test classic perf
• jenkins test crimson perf
• jenkins test signed
• jenkins test make check
• jenkins test make check arm64
• jenkins test submodules
• jenkins test dashboard
• jenkins test api
• jenkins test docs
• jenkins render docs
• jenkins test ceph-volume all
• jenkins test ceph-volume tox

[epuertat]

LGTM!

[tspmelo]

Is it possible to add a debounce or timeout for the chart hover?
would be great if the popover didn't show when you are just passing though the charts

[alfonsomthd]

Is it possible to add a debounce or timeout for the chart hover?
would be great if the popover didn't show when you are just passing though the charts

@tspmelo Done: now the popover shows only when clicking on the doughnut slice.

[alfonsomthd]

jenkins test make check

[nizamial09-zz]

LGTM, thanks.

[tspmelo]

@alfonsomthd I'm guessing the following error:

Only one should be displayed. In other charts, I'm only getting the black tooltip.

[alfonsomthd]

@alfonsomthd I'm guessing the following error:

Only one should be displayed. In other charts, I'm only getting the black tooltip.

@tspmelo Done: as per our previous conversation, only the Logs tooltip will be shown in that card as it was a requested feature.

[tspmelo]

Just noticed that the Objects chart is the only one that doesn't show the value in the labels.
Should we fix this? or will the label be too long?

[LenzGr]

Tested this locally today, nice work @alfonsomthd! This is definitely an improvement. Somehow tooltips were not displayed in my test environment, not sure why. But that explains why the mouse cursor changed from an arrow to a pointing finger when I hovered above the chart widgets.

Some minor observations:
The health state has a frame drawn around it when the cluster is in HEALTH_WARN state. Is this intentional to indicate that the status display is clickable?

In Chromium, the "PGs per OSD" label overflows the widget (it's fine in Firefox):

I think we discussed this during the standup already, but I would find it cleaner if there is no horizontal line separator between the label and the content. In Chrome, these lines also overflow the content box on the right:

[alfonsomthd]

The health state has a frame drawn around it when the cluster is in HEALTH_WARN state. Is this intentional to indicate that the status display is clickable?

I didn't touch it: this has been there for a long time, intentional.

In Chromium, the "PGs per OSD" label overflows the widget (it's fine in Firefox):

@LenzGr Can you check the zoom? And the screen resolution you use?

I think we discussed this during the standup already, but I would find it cleaner if there is no horizontal line separator between the label and the content. In Chrome, these lines also overflow the content box on the right:

I remember you pointing this out, but wasn't sure about the quorum: I'll remove it!

[alfonsomthd]

Just noticed that the Objects chart is the only one that doesn't show the value in the labels.
Should we fix this? or will the label be too long?

@tspmelo Done: added values to objects legend.

[LenzGr]

The health state has a frame drawn around it when the cluster is in HEALTH_WARN state. Is this intentional to indicate that the status display is clickable?

I didn't touch it: this has been there for a long time, intentional.

OK, let's leave it as is then. It may make help users to realize that it's actually clickable.

In Chromium, the "PGs per OSD" label overflows the widget (it's fine in Firefox):

@LenzGr Can you check the zoom? And the screen resolution you use?

So it was not a zoom issue, both Firefox and Chromium rendered the page at the 100% setting. However, I do have the GNOME accessibility setting "Large Text" enabled, which AFAIK changes the DPI settings and this causes the weird rendering on Chrome (right window):

Without "Large Text", it looks fine:

I think we discussed this during the standup already, but I would find it cleaner if there is no horizontal line separator between the label and the content. In Chrome, these lines also overflow the content box on the right:

I remember you pointing this out, but wasn't sure about the quorum: I'll remove it!

Thanks! I think it looks better without them.

[LenzGr]

LGTM!

[tspmelo]

these 3 lines doesn't seem to do anything.

[alfonsomthd]

jenkins test api

[alfonsomthd]

jenkins test make check

[alfonsomthd]

jenkins test dashboard

[LenzGr]

This PR also addresses one suggestion about improving the raw capacity widget from this issue: mgr/dashboard: Enhance info shown in Landing Page cards 'PGs per OSD' & 'Raw Capacity'