mgr/dashboard: display description on mouse hover

Fixes: https://tracker.ceph.com/issues/36607
Signed-off-by: Ishan Rai <ishanrai05@gmail.com>

diff --git a/doc/mgr/dashboard.rst b/doc/mgr/dashboard.rst
index 89ba8db31df8b158af15106d086ca0f66985356f..0effc5d86d6a5925175c22eedea7483deb02b52a 100644 (file)
--- 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 39d7246d54f27564299472f7875ab5be9ce4f070..722824a8fe8cbbb5088bf6846c54ca50b4c18a8e 100644 (file)
--- 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 @@
 <div class="row">
-  <span class="info-group-title">{{ groupTitle }}</span>
+  <div class="info-group-title"
+       [ngbPopover]="popInfoTemplate"
+       #popInfo="ngbPopover"
+       triggers="">
+    <span>{{ groupTitle }}</span>
+    <button type="button"
+            class="popover-icon btn btn-link p-0"
+            (click)="popInfo.toggle()">
+      <i [ngClass]="[icons.infoCircle, icons.large]"></i>
+    </button>
+  </div>
 </div>
+
 <div class="row">
   <ng-content></ng-content>
 </div>
+
+<ng-template #popInfoTemplate>
+  <div class="text-center"
+       i18n>For an overview of {{ groupTitle|lowercase }} widgets click
+    <cd-doc section="dashboard-landing-page-{{ groupTitle|lowercase }}"
+            docText="here"
+            i18n-docText></cd-doc>
+  </div>
+</ng-template>

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 58245c45596da9d67fc78389ebdf2762b2866635..52bcddb96a1b71168f1e4a2df43b71229d1bf61b 100644 (file)
--- 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 c0f476b7bb4fff73645d501738235ab98b6eb615..8b418a8d2763db17f4898b799a2df41093842cb6 100644 (file)
--- 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<InfoGroupComponent>;
 
   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 662d585b52280c0f3bcab0cd027be464b82e96ef..e172a920f67f50a3e82aa4d71957422c54bbcb69 100644 (file)
--- 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 4d3ab0f6fd116f99627772a03b248cb3a7afe60f..bb9ad283945fdf06068a3f41d6e78e55317cb478 100644 (file)
--- 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 9cff9458ed52cffaa00efaebca7bfe7971bb0fb3..7c3e04ae99ee1c4e1d1779f6e5df16cd44e8aa45 100644 (file)
--- 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: (