Project

General

Profile

Feature #27050

mgr/dashboard: Landing Page Enhancements

Added by Alfonso Martínez about 2 years ago. Updated over 1 year ago.

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

100%

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

Description

Related to:
https://tracker.ceph.com/issues/24573

After the New Landing Page implementation,
we can add here all the suggested improvements to the landing Page
and we should discuss about the following:

  • Suitability (or not) of having "PG Status" card in parallel with "Data Health",
    showing (or not) info about PGs (is customer only interested in data, not PGs?).
  • Layout changes:
    - Move cards "Data Health / PG Status" to "Status" group (health)?
    - Upgrade to Bootstrap 4?
  • Define, if necessary, a color scheme for Landing Page charts (or whole dashboard?)
    and implement a clean solution.
  • Any other topic requiring attention.

Auswahl_001.png View (27.7 KB) Volker Theile, 08/24/2018 09:35 AM

Auswahl_002.png View (32.1 KB) Volker Theile, 08/24/2018 09:43 AM

Auswahl_003.png View (31.4 KB) Volker Theile, 08/24/2018 09:43 AM

mouse over and clickable values in dashboard card.png View (84.2 KB) Ju Lim, 08/24/2018 03:12 PM

ceph_dash_1_border_nopunct.png View - Landing Page - Styling Suggestions (67.9 KB) Ju Lim, 08/24/2018 03:23 PM

Other Page View.png View (149 KB) Ju Lim, 08/24/2018 03:30 PM

landing-page-milestone2-2018-09-28.png View (122 KB) Alfonso Martínez, 09/28/2018 10:45 AM


Subtasks

Subtask #37283: mgr/dashboard: improve info shown in mgr info cardResolvedAlfonso Martínez

Bug #37371: mgr/dashboards: add permission check for showing "Logs" links in Landing Page cards' popoversClosedAlfonso Martínez

Bug #37401: mgr/dashboard: chart slice hiding is not rememberedResolvedAlfonso Martínez


Related issues

Related to mgr - Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data Resolved 07/05/2018
Related to mgr - Feature #27049: mgr/dashboard: retrieve "Data Health" info from dashboard backend New 08/22/2018
Related to mgr - Feature #27047: mgr/dashboard: Landing Page - Set visibility of cards depending on the user's role Resolved 08/22/2018
Related to mgr - Feature #27220: mgr/dashboard: Increase test coverage for components of New Landing Page Closed 08/24/2018
Related to mgr - Feature #24571: mgr/dashboard: Move Cluster/Audit logs from front page to dedicated "Logs" page Resolved 06/19/2018
Related to mgr - Cleanup #35691: mgr/dashboard: Proposed Landing Page Resolved 09/05/2018

History

#1 Updated by Alfonso Martínez about 2 years ago

  • Related to Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data added

#2 Updated by Alfonso Martínez about 2 years ago

  • Related to Feature #27049: mgr/dashboard: retrieve "Data Health" info from dashboard backend added

#3 Updated by Alfonso Martínez about 2 years ago

  • Related to Feature #27047: mgr/dashboard: Landing Page - Set visibility of cards depending on the user's role added

#4 Updated by Alfonso Martínez about 2 years ago

  • Description updated (diff)

#5 Updated by Alfonso Martínez about 2 years ago

  • Description updated (diff)

#6 Updated by Volker Theile about 2 years ago

  • The font size of the info-group should be set to 21px (regardless of the view size) to fit into the look and feel of the rest of the UI, e.g.
  • The font size of the info-card must have a max. size, otherwise it gets too big

#7 Updated by Lenz Grimmer about 2 years ago

  • Subject changed from mgr/dashboard: Landing Page Roadmap to mgr/dashboard: Landing Page Enhancements
  • Category set to dashboard/general
  • Target version set to v14.0.0

#8 Updated by Alfonso Martínez about 2 years ago

  • Related to Feature #27220: mgr/dashboard: Increase test coverage for components of New Landing Page added

#9 Updated by Ju Lim about 2 years ago

Some styling recommendations for the landing page -- see mockups in next comment.
- Change background color to gray (#F5F5F5)
- Change dropdown (menu) arrows to white (#FFFFFF)
- Change cards background to white (#FFFFFF)

For any card with any mouse-over/hover treatment, can we show an always-present border (#EFEFEF) around each clickable value which then fills-in on hover:
- Hover border (#D1D1D1) -- see screenshot below
- Hover fill (#F3F3F3) -- see 2nd OSDs card example where the "2 out" is filled when user hovers over the value

For strings with multiple clickable areas, can we remove commas from between the values that are hyperlinked for better readability.

See screenshot example below:

#10 Updated by Alfonso Martínez about 2 years ago

  • Related to Feature #24571: mgr/dashboard: Move Cluster/Audit logs from front page to dedicated "Logs" page added

#11 Updated by Ju Lim about 2 years ago

These are mockups for styling suggestions mentioned in my previous comment:

(1) Landing Page - overall styling - card and page background color changes example

(2) What would that same grey look like in a different page of Ceph Dashboard

#12 Updated by Ju Lim about 2 years ago

  • File deleted (Screen Shot 2018-05-31 at 8.23.23 AM.png)

#13 Updated by Ju Lim about 2 years ago

#14 Updated by Ju Lim about 2 years ago

There's another Ceph tracker that was created with similar styling recommendations but for some reason we didn't go back update this one. See https://tracker.ceph.com/issues/35691.

#15 Updated by Ju Lim about 2 years ago

  • Related to Cleanup #35691: mgr/dashboard: Proposed Landing Page added

#16 Updated by Ju Lim about 2 years ago

  • Related to Cleanup #35691: mgr/dashboard: Proposed Landing Page added

#17 Updated by Ju Lim about 2 years ago

  • Related to deleted (Cleanup #35691: mgr/dashboard: Proposed Landing Page)

#18 Updated by Patrick Seidensal about 2 years ago

Ju Lim wrote:

Some styling recommendations for the landing page -- see mockups in next comment.
- Change background color to gray (#F5F5F5)
- Change dropdown (menu) arrows to white (#FFFFFF)
- Change cards background to white (#FFFFFF)

For any card with any mouse-over/hover treatment, can we show an always-present border (#EFEFEF) around each clickable value which then fills-in on hover:
- Hover border (#D1D1D1) -- see screenshot below
- Hover fill (#F3F3F3) -- see 2nd OSDs card example where the "2 out" is filled when user hovers over the value

For strings with multiple clickable areas, can we remove commas from between the values that are hyperlinked for better readability.

See screenshot example below:

We talked about this proposal internally and nobody raised any concerns or objections. We like it.

#19 Updated by Kai Wagner almost 2 years ago

LGTM - Go ahead and we could add the little usability enhancements later on

#20 Updated by Kai Wagner almost 2 years ago

As discussed today I have two suggestions:

1.) The general font size of the widgets is to big from my perspective and completely different to the rest of the menu for example.
2.) I'm not able to zoom-in or zoom-out at the moment. If I do so only the menu font will be decreased or increased. Would love to have the possibility to change the widget + font size by zooming as well.

Thanks,
Kai

#22 Updated by Alfonso Martínez almost 2 years ago

Milestone 2

Work done:

  • Changed background color to gray.
  • Changed cards' background color to white.
  • Changed navigation menu dropdown arrows' color to white.
  • Changed card font size to fluid: from 12px to 21px
    for screen range: 320px -- 2048px (2K) (fixes: zoom in/out).
  • Info Group Title: fixed font size: 21px. Removed underline.
  • OSD card: info breakdown in 2/3 lines for huge OSDs amount.
  • Cluster Status card: added style for clickable element
    with mouse hover behaviour.
  • All cards (except logs) viewable (at-a-glance) without scrolling in 1920x1080 (Full HD) presentation mode.
  • Improved perf./capacity cards layout for 1366x768 (HD resolution).

#23 Updated by Lenz Grimmer almost 2 years ago

  • Status changed from New to Fix Under Review

#24 Updated by Lenz Grimmer almost 2 years ago

  • Assignee set to Alfonso Martínez

#25 Updated by Ricardo Marques almost 2 years ago

  • Status changed from Fix Under Review to Resolved

Also available in: Atom PDF