Merge pull request ceph#35956 from ishanrai05/hover

mgr/dashboard: Display description on mouse hover

Reviewed-by: Tiago Melo <[email protected]>

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
 """""""""""
 

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>

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;
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.spec.ts

@@ -1,13 +1,17 @@
 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', () => {
   let component: InfoGroupComponent;
   let fixture: ComponentFixture<InfoGroupComponent>;
 
   configureTestBed({
+    imports: [NgbPopoverModule, SharedModule],
     declarations: [InfoGroupComponent]
   });
 

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;
 }

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];

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: (