Project

General

Profile

Actions
Copy link

Feature #27050

closed

mgr/dashboard: Landing Page Enhancements

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

Files

Download all files
Auswahl_001.png (27.7 KB) Auswahl_001.png Volker Theile, 08/24/2018 09:35 AM
Auswahl_002.png (32.1 KB) Auswahl_002.png Volker Theile, 08/24/2018 09:43 AM
Auswahl_003.png (31.4 KB) Auswahl_003.png Volker Theile, 08/24/2018 09:43 AM
mouse over and clickable values in dashboard card.png (84.2 KB) mouse over and clickable values in dashboard card.png Ju Lim, 08/24/2018 03:12 PM
ceph_dash_1_border_nopunct.png (67.9 KB) ceph_dash_1_border_nopunct.png Landing Page - Styling Suggestions Ju Lim, 08/24/2018 03:23 PM
Other Page View.png (149 KB) Other Page View.png Ju Lim, 08/24/2018 03:30 PM
landing-page-milestone2-2018-09-28.png (122 KB) landing-page-milestone2-2018-09-28.png Alfonso Martínez, 09/28/2018 10:45 AM

Subtasks 3 (0 open — 3 closed)

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

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

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

Actions

Related issues 6 (1 open — 5 closed)

Related to Dashboard - Feature #24573: mgr/dashboard: Provide more "native" dashboard widgets to display live performance dataResolvedAlfonso Martínez

Actions
Related to Dashboard - Feature #27049: mgr/dashboard: retrieve "Data Health" info from dashboard backendNew

Actions
Related to Dashboard - Feature #27047: mgr/dashboard: Landing Page - Set visibility of cards depending on the user's roleResolved

Actions
Related to Dashboard - Feature #27220: mgr/dashboard: Increase test coverage for components of New Landing PageClosed

Actions
Related to Dashboard - Feature #24571: mgr/dashboard: Move Cluster/Audit logs from front page to dedicated "Logs" pageResolvedDiksha Godbole

Actions
Related to Dashboard - Cleanup #35691: mgr/dashboard: Proposed Landing PageResolvedAlfonso Martínez

Actions
Actions
Copy link
 #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
Actions
Copy link
 #2

Updated by Alfonso Martínez over 5 years ago

  • Related to Feature #27049: mgr/dashboard: retrieve "Data Health" info from dashboard backend added
Actions
Copy link
 #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
Actions
Copy link
 #4

Updated by Alfonso Martínez over 5 years ago

  • Description updated (diff)
Actions
Copy link
 #5

Updated by Alfonso Martínez over 5 years ago

  • Description updated (diff)
Actions
Copy link Download all files
 #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
Actions
Copy link
 #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
Actions
Copy link
 #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
Actions
Copy link
 #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:

Actions
Copy link
 #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
Actions
Copy link
 #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

Actions
Copy link
 #12

Updated by Ju Lim over 5 years ago

  • File deleted (Screen Shot 2018-05-31 at 8.23.23 AM.png)
Actions
Copy link
 #14

Updated by Ju Lim over 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.

Actions
Copy link
 #15

Updated by Ju Lim over 5 years ago

  • Related to Cleanup #35691: mgr/dashboard: Proposed Landing Page added
Actions
Copy link
 #16

Updated by Ju Lim over 5 years ago

  • Related to Cleanup #35691: mgr/dashboard: Proposed Landing Page added
Actions
Copy link
 #17

Updated by Ju Lim over 5 years ago

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

Updated by Patrick Seidensal over 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.

Actions
Copy link
 #19

Updated by Kai Wagner over 5 years ago

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

Actions
Copy link
 #20

Updated by Kai Wagner over 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

Actions
Copy link
 #22

Updated by Alfonso Martínez over 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).
Actions
Copy link
 #23

Updated by Lenz Grimmer over 5 years ago

  • Status changed from New to Fix Under Review
Actions
Copy link
 #24

Updated by Lenz Grimmer over 5 years ago

  • Assignee set to Alfonso Martínez
Actions
Copy link
 #25

Updated by Ricardo Marques over 5 years ago

  • Status changed from Fix Under Review to Resolved
Actions
Copy link
 #26

Updated by Ernesto Puerta about 3 years ago

  • Project changed from mgr to Dashboard
  • Category changed from 132 to General
Actions
Copy link

Also available in: Atom PDF