Project

General

Profile

Feature #27050

mgr/dashboard: Landing Page Enhancements

Added by Alfonso Martínez over 5 years ago. Updated over 2 years ago.

Status:
Resolved
Priority:
Normal
Assignee:
Alfonso Martínez
Category:
General
Target version:
Ceph - v14.0.0
% 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 Dashboard - Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance data Resolved
Related to Dashboard - Feature #27049: mgr/dashboard: retrieve "Data Health" info from dashboard backend New
Related to Dashboard - Feature #27047: mgr/dashboard: Landing Page - Set visibility of cards depending on the user's role Resolved
Related to Dashboard - Feature #27220: mgr/dashboard: Increase test coverage for components of New Landing Page Closed
Related to Dashboard - Feature #24571: mgr/dashboard: Move Cluster/Audit logs from front page to dedicated "Logs" page Resolved
Related to Dashboard - Cleanup #35691: mgr/dashboard: Proposed Landing Page Resolved

History

#1 Updated by Alfonso Martínez over 5 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 over 5 years ago

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

#3 Updated by Alfonso Martínez over 5 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 over 5 years ago

  • Description updated (diff)

#5 Updated by Alfonso Martínez over 5 years ago

  • Description updated (diff)

#6 Updated by Volker Theile over 5 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 over 5 years ago

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

#8 Updated by Alfonso Martínez over 5 years ago

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

#9 Updated by Ju Lim over 5 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 over 5 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 over 5 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 over 5 years ago

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

#13 Updated by Ju Lim over 5 years ago

#14 Updated by Ju Lim about 5 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 5 years ago

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

#16 Updated by Ju Lim about 5 years ago

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

#17 Updated by Ju Lim about 5 years ago

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

#18 Updated by Patrick Seidensal about 5 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 about 5 years ago

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

#20 Updated by Kai Wagner about 5 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 about 5 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 about 5 years ago

  • Status changed from New to Fix Under Review

#24 Updated by Lenz Grimmer about 5 years ago

  • Assignee set to Alfonso Martínez

#25 Updated by Ricardo Marques about 5 years ago

  • Status changed from Fix Under Review to Resolved

#26 Updated by Ernesto Puerta over 2 years ago

  • Project changed from mgr to Dashboard
  • Category changed from 132 to General

Also available in: Atom PDF