From 40b5cad9e4bf165014eeebac00b0b3163bc8e3b2 Mon Sep 17 00:00:00 2001 From: Ishan Rai Date: Tue, 7 Jul 2020 10:43:49 +0000 Subject: [PATCH] mgr/dashboard: display description on mouse hover Fixes: https://tracker.ceph.com/issues/36607 Signed-off-by: Ishan Rai --- doc/mgr/dashboard.rst | 6 +++++ .../info-group/info-group.component.html | 22 ++++++++++++++++++- .../info-group/info-group.component.scss | 4 ++++ .../info-group/info-group.component.spec.ts | 4 ++++ .../info-group/info-group.component.ts | 3 +++ .../src/app/shared/services/doc.service.ts | 5 ++++- .../mgr/dashboard/frontend/src/styles.scss | 1 + 7 files changed, 43 insertions(+), 2 deletions(-) diff --git a/doc/mgr/dashboard.rst b/doc/mgr/dashboard.rst index 89ba8db31df8b..0effc5d86d6a5 100644 --- a/doc/mgr/dashboard.rst +++ b/doc/mgr/dashboard.rst @@ -131,6 +131,8 @@ Displays overall cluster status, performance and capacity metrics. Gives instant feedback to changes in the cluster and provides easy access to subpages of the dashboard. +.. _dashboard-landing-page-status: + Status """""" @@ -156,6 +158,8 @@ Status Gateways (down). Provides link to the subpage providing a list of all iSCSI Gateways. +.. _dashboard-landing-page-capacity: + Capacity """""""" @@ -172,6 +176,8 @@ Capacity * **PGs per OSD**: Displays the number of placement groups per object storage daemons. +.. _dashboard-landing-page-performance: + Performance """"""""""" diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.html index 39d7246d54f27..722824a8fe8cb 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.html @@ -1,6 +1,26 @@
- {{ groupTitle }} +
+ {{ groupTitle }} + +
+
+ + +
For an overview of {{ groupTitle|lowercase }} widgets click + +
+ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss index 58245c45596da..52bcddb96a1b7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss @@ -2,3 +2,7 @@ font-size: 1.75rem; margin: 0 0 0.5vw 0.5vw; } + +.popover-icon:focus { + box-shadow: none; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.spec.ts index c0f476b7bb4ff..8b418a8d2763d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.spec.ts @@ -1,6 +1,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; + import { configureTestBed } from '../../../../testing/unit-test-helper'; +import { SharedModule } from '../../../shared/shared.module'; import { InfoGroupComponent } from './info-group.component'; describe('InfoGroupComponent', () => { @@ -8,6 +11,7 @@ describe('InfoGroupComponent', () => { let fixture: ComponentFixture; configureTestBed({ + imports: [NgbPopoverModule, SharedModule], declarations: [InfoGroupComponent] }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.ts index 662d585b52280..e172a920f67f5 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.ts @@ -1,11 +1,14 @@ import { Component, Input } from '@angular/core'; +import { Icons } from '../../../shared/enum/icons.enum'; + @Component({ selector: 'cd-info-group', templateUrl: './info-group.component.html', styleUrls: ['./info-group.component.scss'] }) export class InfoGroupComponent { + icons = Icons; @Input() groupTitle: string; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts index 4d3ab0f6fd116..bb9ad283945fd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts @@ -35,7 +35,10 @@ export class DocService { dashboard: `${domain}mgr/dashboard`, grafana: `${domain}mgr/dashboard/#enabling-the-embedding-of-grafana-dashboards`, orch: `${domain}mgr/orchestrator`, - pgs: `http://ceph.com/pgcalc` + pgs: `http://ceph.com/pgcalc`, + 'dashboard-landing-page-status': `${domain}mgr/dashboard/#dashboard-landing-page-status`, + 'dashboard-landing-page-performance': `${domain}mgr/dashboard/#dashboard-landing-page-performance`, + 'dashboard-landing-page-capacity': `${domain}mgr/dashboard/#dashboard-landing-page-capacity` }; return sections[section]; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 9cff9458ed52c..7c3e04ae99ee1 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -11,6 +11,7 @@ $font-family-icon: 'ForkAwesome'; $badge-font-size: 1rem; $form-feedback-font-size: 100%; $popover-max-width: 350px; +$popover-font-size: 1rem; // https://getbootstrap.com/docs/4.5/layout/grid/#variables $grid-breakpoints: ( -- 2.39.5