mgr/dashboard: add tooltip mirroring pools table

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
(cherry picked from commit 1bf64a78c0165cb43ad75843c3123b8bd06033d1)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
index dfebe934f1e0fac1aadd73d49d77cb894a29ba40..3bb39245740bfd1a710718cf35a3f246c6785dac 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { SharedModule } from '~/app/shared/shared.module';
 import { BootstrapCreateModalComponent } from './bootstrap-create-modal/bootstrap-create-modal.component';
@@ -24,7 +24,8 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
-    NgbProgressbarModule
+    NgbProgressbarModule,
+    NgbTooltipModule
   ],
   declarations: [
     BootstrapCreateModalComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html
index 1e4e72df19651aff478a10effefbe5164891a810..f5581af35efddc1eb6465b6580dd8e4b2398aa32 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html
@@ -20,4 +20,14 @@
              let-value="value">
   <span [ngClass]="row.health_color | mirrorHealthColor">{{ value }}</span>
 </ng-template>
+<ng-template #localTmpl>
+  <span i18n
+        i18n-ngbTooltip
+        ngbTooltip="Local image count"># Local</span>
+</ng-template>
+<ng-template #remoteTmpl>
+  <span i18n
+        i18n-ngbTooltip
+        ngbTooltip="Remote image count"># Remote</span>
+</ng-template>
 <router-outlet name="modal"></router-outlet>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.ts
index a5e1c9e4b959ba7dc8ccf334bbfbf10483c6b218..61f812177561ca364c801923c5796c6f9b3ab842 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.ts
@@ -27,6 +27,10 @@ const BASE_URL = '/block/mirroring';
 export class PoolListComponent implements OnInit, OnDestroy {
   @ViewChild('healthTmpl', { static: true })
   healthTmpl: TemplateRef<any>;
+  @ViewChild('localTmpl', { static: true })
+  localTmpl: TemplateRef<any>;
+  @ViewChild('remoteTmpl', { static: true })
+  remoteTmpl: TemplateRef<any>;
 
   subs: Subscription;
 
@@ -89,8 +93,18 @@ export class PoolListComponent implements OnInit, OnDestroy {
       { prop: 'name', name: $localize`Name`, flexGrow: 2 },
       { prop: 'mirror_mode', name: $localize`Mode`, flexGrow: 2 },
       { prop: 'leader_id', name: $localize`Leader`, flexGrow: 2 },
-      { prop: 'image_local_count', name: $localize`# Local`, flexGrow: 2 },
-      { prop: 'image_remote_count', name: $localize`# Remote`, flexGrow: 2 },
+      {
+        prop: 'image_local_count',
+        name: $localize`# Local`,
+        headerTemplate: this.localTmpl,
+        flexGrow: 2
+      },
+      {
+        prop: 'image_remote_count',
+        name: $localize`# Remote`,
+        headerTemplate: this.remoteTmpl,
+        flexGrow: 2
+      },
       {
         prop: 'health',
         name: $localize`Health`,