From: Ishan Rai <ishanrai05@gmail.com>
Date: Tue, 7 Jul 2020 10:43:49 +0000 (+0000)
Subject: mgr/dashboard: display description on mouse hover
X-Git-Tag: v16.1.0~1083^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=40b5cad9e4bf165014eeebac00b0b3163bc8e3b2;p=ceph.git

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 89ba8db31df8..0effc5d86d6a 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 39d7246d54f2..722824a8fe8c 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 @@
 <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 58245c45596d..52bcddb96a1b 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 c0f476b7bb4f..8b418a8d2763 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<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 662d585b5228..e172a920f67f 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 4d3ab0f6fd11..bb9ad283945f 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 9cff9458ed52..7c3e04ae99ee 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: (