Project

General

Profile

Cleanup #42072

mgr/dashboard: landing page 2.0

Added by Ernesto Puerta over 1 year ago. Updated 4 months ago.

Status:
Resolved
Priority:
Normal
Category:
dashboard/UI
Target version:
% Done:

0%

Tags:
Backport:
octopus
Reviewed:
Affected Versions:
Pull request ID:

Description

This is a series of changes/improvements to the Landing Page based on downstream improvements:

The main goals of this re-design would be:

  • Improve data visualization & comprehension (more visual hints/anchors vs. textual/readable ones, reduce big whitespace/blank areas).
  • Improve layout, structure & responsiveness (visual flow, information grouping, resizing).
  • Make easier to create new information cards.

Re-arrange info cards:

  • Info-groups could be re-arranged: Status > Capacity > Performance (currently: Status > Performance > Capacity).
  • Status info cards could be arranged hierarchically: Cluster > Host > Monitor > { OSD, Mgr, RGW, MDS, iSCSI}. Or perhaps, a vertical arrangment (stacked column or 3x3 box-like).

Current:

Proposal:

  • Capacity info cards: Group visual cards (charts) and show them first. Textual cards (Pools and PGs/OSD) could be replaced with charts?

Current:

Proposal:

  • Grid alignment: we should replace the current 3 flex-row layout with a grid-like, or something more suitable

Replace pie charts with donut charts + center text.

The change would be limited to the chart (the card style is simply a patternfly 4 card).

Generic info cards

Info card pie/donut charts require high customization (per-char config and callback). The idea is to replace them with generics/reusable components with clear inputs:
  • Title:
  • Data set: instead of feeding them with a complex object, and then extract & process the metrics from within the callbacks, the required metrics are directly fed into the info card component
    • The above will also improve performance, as now Angular triggers change detection in the info-card for every change to the complex data object, instead of to the exposed data series.
  • Center text: with interpolated variables
  • Configuration options: only colors, and some minor label config is allowed.

pg_status_donut.png View (12.7 KB) Ernesto Puerta, 09/26/2019 02:52 PM

pg_status_pie.png View (10.2 KB) Ernesto Puerta, 09/26/2019 02:52 PM

landing_page.png View (138 KB) Ernesto Puerta, 09/26/2019 06:47 PM

landing_page_pre.png View (99.6 KB) Ernesto Puerta, 09/26/2019 06:48 PM

capacity_pre.png View (41.4 KB) Ernesto Puerta, 09/26/2019 07:12 PM

capacity_post.png View (44.2 KB) Ernesto Puerta, 09/26/2019 07:12 PM

status_post.png View (25.4 KB) Ernesto Puerta, 09/26/2019 07:15 PM

status_pre.png View (34.2 KB) Ernesto Puerta, 09/26/2019 07:15 PM


Related issues

Related to mgr - Cleanup #47073: mgr/dashboard: landing page New
Related to mgr - Feature #38697: mgr/dashboard: Enhance info shown in Landing Page cards 'PGs per OSD' & 'Raw Capacity' Closed
Copied to mgr - Backport #46999: octopus: mgr/dashboard: landing page 2.0 Resolved

History

#1 Updated by Ernesto Puerta over 1 year ago

#2 Updated by Ricardo Marques over 1 year ago

Your proposal looks great.

I've just noticed that you missed the "0 up, 0 down" from the iSCSI card. Please check if it's intentional.

#3 Updated by Paul Cuzner over 1 year ago

+1 looks good!

Just a question - with Nautilus and beyond, do we need a PG's per OSD card, given the pg autoscaler?

#4 Updated by Ernesto Puerta over 1 year ago

Ricardo Marques wrote:

Your proposal looks great.

I've just noticed that you missed the "0 up, 0 down" from the iSCSI card. Please check if it's intentional.

Thanks for reviewing, Ricardo! Nothing intentional there. The downstream version is Nautilus 14.2.3, so perhaps we don't have that info there?

#5 Updated by Ernesto Puerta over 1 year ago

Paul Cuzner wrote:

+1 looks good!

Just a question - with Nautilus and beyond, do we need a PG's per OSD card, given the pg autoscaler?

Thanks for the hint, Paul! I'm more than happy with removing any card that is not as informative as the others. Any suggestion to replace with another one?

#6 Updated by Alfonso Martínez 7 months ago

  • Tracker changed from Bug to Cleanup

A new design was proposed by Yuval Galanti:

https://marvelapp.com/e4f9e0h/screen/68160077

Lenz Grimmer feedback (summary):
The improvements to the existing landing page in the tracker issue are fine for me.
Yuval's proposal looks good from a visual POV, but is quite a drastic diversion that
I think requires some more research/review/discussion.
As I said, we currently don't really have any feedback from real life users
on how they like the current implementation and what might be missing.

#7 Updated by Alfonso Martínez 6 months ago

  • Status changed from New to Fix Under Review
  • Assignee set to Alfonso Martínez
  • Pull request ID set to 36476

#8 Updated by Lenz Grimmer 5 months ago

  • Status changed from Fix Under Review to Resolved
  • Target version set to v16.0.0

#9 Updated by Lenz Grimmer 5 months ago

  • Status changed from Resolved to Pending Backport
  • Backport set to octopus

Switching to "pending backport" - it would be nice to have this enhancement in Octopus as well.

#10 Updated by Nathan Cutler 5 months ago

  • Copied to Backport #46999: octopus: mgr/dashboard: landing page 2.0 added

#11 Updated by Ernesto Puerta 5 months ago

#12 Updated by Lenz Grimmer 4 months ago

  • Related to Feature #38697: mgr/dashboard: Enhance info shown in Landing Page cards 'PGs per OSD' & 'Raw Capacity' added

#13 Updated by Lenz Grimmer 4 months ago

  • Status changed from Pending Backport to Resolved

Also available in: Atom PDF