Project

General

Profile

Feature #27050

mgr/dashboard: Landing Page Enhancements

Added by Alfonso MH 4 months ago. Updated 20 days ago.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
dashboard/general
Target version:
Start date:
11/16/2018
Due date:
% Done:

33%

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 MH, 09/28/2018 10:45 AM


Subtasks

Subtask #37283: mgr/dashboard: improve info shown in mgr info cardResolvedAlfonso MH

Bug #37371: mgr/dashboards: add permission check for showing "Logs" links in Landing Page cards' popoversNeed ReviewAlfonso MH

Bug #37401: mgr/dashboard: chart slice hiding is not rememberedNeed ReviewAlfonso MH


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 MH 4 months ago

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

#2 Updated by Alfonso MH 4 months ago

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

#3 Updated by Alfonso MH 4 months ago

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

#4 Updated by Alfonso MH 4 months ago

  • Description updated (diff)

#5 Updated by Alfonso MH 4 months ago

  • Description updated (diff)

#6 Updated by Volker Theile 4 months 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 4 months 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 MH 4 months ago

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

#9 Updated by Ju Lim 4 months 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 MH 4 months ago

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

#11 Updated by Ju Lim 4 months 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 4 months ago

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

#13 Updated by Ju Lim 4 months ago

#14 Updated by Ju Lim 3 months 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 3 months ago

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

#16 Updated by Ju Lim 3 months ago

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

#17 Updated by Ju Lim 3 months ago

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

#18 Updated by Patrick Nawracay 3 months 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 3 months ago

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

#20 Updated by Kai Wagner 3 months 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 MH 3 months 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 3 months ago

  • Status changed from New to Need Review

#24 Updated by Lenz Grimmer 3 months ago

  • Assignee set to Alfonso MH

#25 Updated by Ricardo Marques 2 months ago

  • Status changed from Need Review to Resolved

Also available in: Atom PDF