From: Naman Munet <naman.munet@ibm.com>
Date: Tue, 8 Jul 2025 15:26:34 +0000 (+0530)
Subject: mgr/dashboard: add reusable carbon popover
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F64388%2Fhead;p=ceph.git

mgr/dashboard: add reusable carbon popover

https://tracker.ceph.com/issues/72002

Signed-off-by: Naman Munet <naman.munet@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
index 85a7333437e0..440986c535aa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html
@@ -58,7 +58,9 @@
             </i>
             </div>
             <div cdsToggletipContent>
-              <cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
+              <div class="cds--popover-scroll-container">
+                <cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
+              </div>
             </div>
           </cds-toggletip>
         </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
index baa80cb41eb4..c4b8ec5e7cb2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard/dashboard-v3.component.html
@@ -167,9 +167,11 @@
               </div>
               <div cdsToggletipContent
                    #healthCheck>
-                <cd-health-checks *ngIf="healthData?.health?.checks"
-                                  [healthData]="healthData.health.checks">
-                </cd-health-checks>
+                <div class="cds--popover-scroll-container">
+                  <cd-health-checks *ngIf="healthData?.health?.checks"
+                                    [healthData]="healthData.health.checks">
+                  </cd-health-checks>
+                </div>
               </div>
             </cds-toggletip>
           </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index 18ceaf85672f..b015c7323361 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -28,7 +28,9 @@
             </span>
           </div>
           <div cdsToggletipContent>
-            <cd-health-checks [healthData]="healthData"></cd-health-checks>
+            <div class="cds--popover-scroll-container">
+              <cd-health-checks [healthData]="healthData"></cd-health-checks>
+            </div>
           </div>
         </cds-toggletip>
       </ng-container>
@@ -161,12 +163,14 @@
         </cd-health-pie>
         </div>
         <cds-popover-content>
-        <ng-container *ngTemplateOutlet="logsLink"></ng-container>
-          <ul>
-            <li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
-             {{ pgStatesText.key }}: {{ pgStatesText.value }}
-            </li>
-          </ul>
+          <div class="cds--popover-scroll-container">
+            <ng-container *ngTemplateOutlet="logsLink"></ng-container>
+            <ul>
+              <li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
+              {{ pgStatesText.key }}: {{ pgStatesText.value }}
+              </li>
+            </ul>
+          </div>
         </cds-popover-content>
       </div>
     </cd-info-card>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
index cbf9b033792a..920a548f50b0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.html
@@ -25,22 +25,24 @@
     </li>
   </div>
   <div cdsToggletipContent>
-    <ul class="text-center">
-      <li><h5><b i18n>Sync Status:</b></h5></li>
-      <li *ngFor="let status of zone.fullSyncStatus">
-        <span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
-          <span *ngIf="status?.includes(':')">
-            <b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
+    <div class="cds--popover-scroll-container">
+      <ul class="text-center">
+        <li><h5><b i18n>Sync Status:</b></h5></li>
+        <li *ngFor="let status of zone.fullSyncStatus">
+          <span *ngIf="!status?.includes(zone.name) && !status?.includes(zone.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
+            <span *ngIf="status?.includes(':')">
+              <b>{{ status.split(': ')[0] | titlecase }}</b>:{{ status.split(': ')[1] | titlecase}}
+            </span>
+            <span *ngIf="!status?.includes(':')">
+              <b>{{ status | titlecase }}</b>
+            </span>
           </span>
-          <span *ngIf="!status?.includes(':')">
-            <b>{{ status | titlecase }}</b>
+          <span *ngIf="status?.includes('failed') || status?.includes('error')">
+            {{ status | titlecase }}
           </span>
-        </span>
-        <span *ngIf="status?.includes('failed') || status?.includes('error')">
-          {{ status | titlecase }}
-        </span>
-      </li>
-    </ul>
+        </li>
+      </ul>
+    </div>
   </div>
   </cds-toggletip>
   <li class="mt-4 fw-bold"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
index 211def32cabf..b32ca8a0ba0b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.html
@@ -33,22 +33,24 @@
         </li>
       </div>
       <div cdsToggletipContent>
-        <ul class="text-center">
-          <li><h5><b i18n>Metadata Sync Status:</b></h5></li>
-          <li *ngFor="let status of metadataSyncInfo.fullSyncStatus">
-            <span *ngIf="!status?.includes(metadataSyncInfo.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
-              <span *ngIf="status?.includes(':')">
-                <b>{{ status.split(':')[0] | titlecase }}</b>:{{ status.split(':')[1] | titlecase}}
+        <div class="cds--popover-scroll-container">
+          <ul class="text-center">
+            <li><h5><b i18n>Metadata Sync Status:</b></h5></li>
+            <li *ngFor="let status of metadataSyncInfo.fullSyncStatus">
+              <span *ngIf="!status?.includes(metadataSyncInfo.syncstatus) && !status?.includes('failed') && !status?.includes('error')">
+                <span *ngIf="status?.includes(':')">
+                  <b>{{ status.split(':')[0] | titlecase }}</b>:{{ status.split(':')[1] | titlecase}}
+                </span>
+                <span *ngIf="!status?.includes(':')">
+                  <b>{{ status | titlecase }}</b>
+                </span>
               </span>
-              <span *ngIf="!status?.includes(':')">
-                <b>{{ status | titlecase }}</b>
+              <span *ngIf="status?.includes('failed') || status?.includes('error')">
+                  {{ status | titlecase }}
               </span>
-            </span>
-            <span *ngIf="status?.includes('failed') || status?.includes('error')">
-                {{ status | titlecase }}
-            </span>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </cds-toggletip>
     <li class="mt-4 fw-bold"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 74e9b8f02129..c52612e01c27 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -38,7 +38,8 @@ import {
   ProgressIndicatorModule,
   PanelModule,
   LayoutModule,
-  TilesModule
+  TilesModule,
+  PopoverModule
 } from 'carbon-components-angular';
 import EditIcon from '@carbon/icons/es/edit/20';
 import CodeIcon from '@carbon/icons/es/code/16';
@@ -138,7 +139,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     PanelModule,
     ChartsModule,
     LayoutModule,
-    TilesModule
+    TilesModule,
+    PopoverModule
   ],
   declarations: [
     SparklineComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
index 81ad90914b6a..82a6cc7fd758 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html
@@ -1,13 +1,42 @@
-<ng-template #popoverTpl>
-  <div [class]="class"
-       [innerHtml]="html">
+<ng-template #tooltipTemplate>
+  <div class="cds--popover-scroll-container">
+    <div [class]="class"
+         [innerHtml]="html">
+    </div>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
   </div>
-  <ng-content></ng-content>
 </ng-template>
+@if (type === helperType.tooltip) {
+  <cds-tooltip [description]="tooltipTemplate"
+               [autoAlign]="true">
+    <svg [cdsIcon]="iconType"
+         [size]="iconSize"></svg>
+  </cds-tooltip>
+} @else {
+  <div class="inline-block"
+       [ngClass]="class">
+    <div
+      cdsPopover
+      [isOpen]="isPopoverOpen"
+      [autoAlign]="true"
+      (click)="togglePopover()"
+      (keydown.enter)="togglePopover()"
+      tabindex="0">
+      <div class="popover-trigger">
+        <svg
+          [cdsIcon]="iconType"
+          [size]="iconSize"></svg>
+      </div>
+      <cds-popover-content>
+        <div class="cds--popover-scroll-container"
+             (click)="$event.stopPropagation()">
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </div>
+      </cds-popover-content>
+    </div>
+  </div>
+}
 
-<cds-tooltip [description]="popoverTpl"
-             [autoAlign]="true">
-  <svg cdsIcon="information"
-       size="16"
-       title="info"></svg>
-</cds-tooltip>
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
index bf5c67b4cc7f..68f53090d11b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
@@ -1,3 +1,7 @@
 cds-tooltip {
   margin-left: 5px;
 }
+
+.inline-block {
+  display: inline-block;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts
index 073fb37a0718..c55d1abfc9de 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts
@@ -1,4 +1,6 @@
 import { Component, Input } from '@angular/core';
+import { Icons } from '../../enum/icons.enum';
+import { HelperType } from '../../enum/cd-helper.enum';
 
 @Component({
   selector: 'cd-helper',
@@ -6,12 +8,25 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./helper.component.scss']
 })
 export class HelperComponent {
-  @Input()
-  class: string;
+  icons = Icons;
+  isPopoverOpen = false;
+  helperType = HelperType;
 
-  @Input()
-  iconClass = '';
+  // Tooltip: Displayed on hover or focus and contains contextual, helpful, and nonessential information.
+  // Popover: Displayed on click and can contain varying text and interactive elements
+  @Input() type: HelperType.tooltip | HelperType.popover = HelperType.tooltip; // Default to tooltip for backward compatibility
+  @Input() class: string;
+  @Input() html: any;
+  @Input() iconSize = this.icons.size16;
+  @Input() iconType = this.icons.info;
 
-  @Input()
-  html: any;
+  togglePopover() {
+    this.isPopoverOpen = !this.isPopoverOpen;
+  }
+
+  closePopover() {
+    if (this.type === HelperType.popover && this.isPopoverOpen) {
+      this.isPopoverOpen = false;
+    }
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cd-helper.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cd-helper.enum.ts
new file mode 100644
index 000000000000..8c64ce99705c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cd-helper.enum.ts
@@ -0,0 +1,4 @@
+export enum HelperType {
+  popover = 'popover',
+  tooltip = 'tooltip'
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index b1ba3d9ec478..289e2f0fa20f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -168,10 +168,22 @@ Tooltip
 /******************************************
 Carbon Popover
 ******************************************/
+.cds--popover {
+  .cds--popover-caret {
+    background-color: theme.$background;
+  }
+}
+
 .cds--popover-content {
-  background-color: theme.$layer-02;
+  background-color: theme.$background;
+}
+
+// inner container class for overflow
+.cds--popover-scroll-container {
   max-height: layout.$spacing-13;
-  overflow: auto;
+  overflow-y: auto;
+  margin-right: -1rem;
+  padding-right: 1rem;
 }
 
 /******************************************