Ceph &raquo; mgr &raquo; Dashboard

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:

Implement "Data Health" card when this issue is completed:
https://tracker.ceph.com/issues/27049

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 card

Resolved

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

Closed

Bug #37401: mgr/dashboard: chart slice hiding is not remembered

Resolved

Related issues 6 (1 open — 5 closed)

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

Diksha Godbole

Related to Dashboard - Cleanup #35691: mgr/dashboard: Proposed Landing Page

Resolved

Issue # Delay: days Cancel

History
Notes
Property changes

Actions

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

Updated by Alfonso Martínez over 5 years ago

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

Actions

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

Updated by Alfonso Martínez over 5 years ago

Description updated (diff)

Actions

Copy link Download all files

Updated by Alfonso Martínez over 5 years ago

Description updated (diff)

Actions

Updated by Volker Theile over 5 years ago

File Auswahl_001.png Auswahl_001.png added
File Auswahl_002.png Auswahl_002.png added
File Auswahl_003.png Auswahl_003.png added

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

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

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

Updated by Ju Lim over 5 years ago

File mouse over and clickable values in dashboard card.png mouse over and clickable values in dashboard card.png added

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

#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

#11

Updated by Ju Lim over 5 years ago

File ceph_dash_1_border_nopunct.png ceph_dash_1_border_nopunct.png added
File Screen Shot 2018-05-31 at 8.23.23 AM.png added

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

#12

Updated by Ju Lim over 5 years ago

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

Actions

#13

Updated by Ju Lim over 5 years ago

File Other Page View.png Other Page View.png added

Actions

#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

#15

Updated by Ju Lim over 5 years ago

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

Actions

#16

Updated by Ju Lim over 5 years ago

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

Actions

#17

Updated by Ju Lim over 5 years ago

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

Actions

#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

#19

Updated by Kai Wagner over 5 years ago

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

Actions

#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