From 1bf64a78c0165cb43ad75843c3123b8bd06033d1 Mon Sep 17 00:00:00 2001
From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Fri, 4 Nov 2022 18:40:17 +0100
Subject: [PATCH] mgr/dashboard: add tooltip mirroring pools table

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
---
 .../ceph/block/mirroring/mirroring.module.ts   |  5 +++--
 .../pool-list/pool-list.component.html         | 10 ++++++++++
 .../mirroring/pool-list/pool-list.component.ts | 18 ++++++++++++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

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 dfebe934f1e..3bb39245740 100644
--- 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 1e4e72df196..f5581af35ef 100644
--- 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 a5e1c9e4b95..61f81217756 100644
--- 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`,
-- 
2.39.5