mgr/dashboard: replace ngb-popover with carbon popover

Fixes: https://tracker.ceph.com/issues/68259
Signed-off-by: Prachi Goel <prachi@li-f0e8f2cc-27e0-11b2-a85c-b2772164128d.ibm.com>
Below are the changes from bootstrap popover to carbon popover:
1. Dashboard v3
2. Health Component
3. RGW sync data component
4. RGW sync metadata component
5. Upgrade component

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index bb07cbd6a1519b8516e4ef58e36567cef8464d9e..ff1eeb904f2f08e6299c8d2e14e40726069e9135 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -13,7 +13,8 @@ import {
   InputModule,
   ModalModule,
   TreeviewModule,
-  ListModule
+  ListModule,
+  ToggletipModule
 } from 'carbon-components-angular';
 
 import {
@@ -108,10 +109,10 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     ButtonModule,
     InputModule,
     ModalModule,
-    ListModule
+    ListModule,
+    ToggletipModule
   ],
   declarations: [
-    HostsComponent,
     MonitorComponent,
     ConfigurationComponent,
     OsdListComponent,
@@ -155,7 +156,8 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     MultiClusterComponent,
     MultiClusterFormComponent,
     MultiClusterListComponent,
-    MultiClusterDetailsComponent
+    MultiClusterDetailsComponent,
+    HostsComponent
   ],
   providers: [NgbActiveModal]
 })

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 3e7f7a2c0903459852fb1fcbbe343389a17dec23..85a7333437e0a8eb49e76f9c5b567569531bffc1 100644 (file)
--- 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
@@ -46,18 +46,22 @@
              i18n-aria-label
              id="clusterStatus">
       <div class="d-flex flex-column justify-content-center align-items-center">
-        <ng-template #healthChecks>
-          <cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
-        </ng-template>
         <ng-template #healthWarningAndError>
-        <div class="info-card-content-clickable mt-1"
-             [ngStyle]="healthData.health.status | healthColor"
-             [ngbPopover]="healthChecks"
-             popoverClass="info-card-popover-cluster-status">
+          <cds-toggletip  [ngStyle]="healthData.health.status | healthColor"
+                          [dropShadow]="true"
+                          [autoAlign]="true"
+                          class="info-card-content-clickable mt-1">
+            <div cdsToggletipButton>
             {{ healthData.health.status | healthLabel | uppercase }}
-          <i *ngIf="healthData.health?.status !== 'HEALTH_OK'"
-             class="fa fa-exclamation-triangle"></i>
-        </div></ng-template>
+            <i  *ngIf="healthData.health?.status !== 'HEALTH_OK'"
+                class="fa fa-exclamation-triangle">
+            </i>
+            </div>
+            <div cdsToggletipContent>
+              <cd-health-checks [healthData]="healthData.health.checks"></cd-health-checks>
+            </div>
+          </cds-toggletip>
+        </ng-template>
 
       <ng-container *ngIf="!healthData.health?.checks?.length; else healthWarningAndError">
         <div [ngStyle]="healthData.health.status | healthColor">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts
index d437855b8fd875331697020b67ae9f5355a2e811..6c47a8b7ebf332a79a15649a926ddc4bdc3bf977 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-v3.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
 import { SimplebarAngularModule } from 'simplebar-angular';
 
@@ -14,6 +14,7 @@ import { DashboardPieComponent } from './dashboard-pie/dashboard-pie.component';
 import { DashboardTimeSelectorComponent } from './dashboard-time-selector/dashboard-time-selector.component';
 import { DashboardV3Component } from './dashboard/dashboard-v3.component';
 import { PgSummaryPipe } from './pg-summary.pipe';
+import { ToggletipModule } from 'carbon-components-angular';
 
 @NgModule({
   imports: [
@@ -22,12 +23,12 @@ import { PgSummaryPipe } from './pg-summary.pipe';
     NgbNavModule,
     SharedModule,
     RouterModule,
-    NgbPopoverModule,
     NgbTooltipModule,
     FormsModule,
     ReactiveFormsModule,
     SimplebarAngularModule,
-    BaseChartDirective
+    BaseChartDirective,
+    ToggletipModule
   ],
   declarations: [
     DashboardV3Component,

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 6f5c535fd8d4114d39b47c1550d038b5ec711f18..baa80cb41eb4bd7c6ab05e28babc38bcc183d812 100644 (file)
--- 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
@@ -147,29 +147,33 @@
               </a>
             </div>
             <div class="d-flex flex-column ms-4 me-4 mt-4 mb-4">
-              <ng-template #healthChecks>
-                <cd-health-checks *ngIf="healthData?.health?.checks"
-                                  [healthData]="healthData.health.checks"></cd-health-checks>
-              </ng-template>
-
               <div class="d-flex flex-row col-md-3 ms-4">
-                <i *ngIf="healthData.health?.status"
-                   [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
-                   [ngStyle]="healthData.health.status | healthColor"
-                   [title]="healthData.health.status"></i>
+                <i  *ngIf="healthData.health?.status"
+                    [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
+                    [ngStyle]="healthData.health.status | healthColor"
+                    [title]="healthData.health.status">
+                </i>
+              <span class="ms-2 mt-n1 lead"
+                    *ngIf="!healthData.health?.checks?.length"
+                    i18n>Cluster</span>
+              <cds-toggletip  [dropShadow]="true"
+                              [autoAlign]="true">
+              <div cdsToggletipButton>
                 <a class="ms-2 mt-n1 lead text-primary"
-                   [ngbPopover]="healthChecks"
                    popoverClass="info-card-popover-cluster-status"
-                   [openDelay]="300"
-                   [closeDelay]="500"
-                   triggers="mouseenter"
                    *ngIf="healthData.health?.checks?.length"
-                   i18n>Cluster</a>
-                <span class="ms-2 mt-n1 lead"
-                      *ngIf="!healthData.health?.checks?.length"
-                      i18n>Cluster</span>
+                   i18n>Cluster
+                </a>
               </div>
-            </div>
+              <div cdsToggletipContent
+                   #healthCheck>
+                <cd-health-checks *ngIf="healthData?.health?.checks"
+                                  [healthData]="healthData.health.checks">
+                </cd-health-checks>
+              </div>
+            </cds-toggletip>
+          </div>
+          </div>
 
             <div class="d-flex flex-column col-md-3">
               <div *ngIf="hasHardwareError"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
index e6101343966748f3066a9f98cd36a68f89ccc66f..fdcdaa762a6c4f013983c95ee5e0204fab6c43a0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/dashboard.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
 
 import { SharedModule } from '~/app/shared/shared.module';
@@ -19,6 +19,7 @@ import { MdsDashboardSummaryPipe } from './mds-dashboard-summary.pipe';
 import { MgrDashboardSummaryPipe } from './mgr-dashboard-summary.pipe';
 import { MonSummaryPipe } from './mon-summary.pipe';
 import { osdDashboardSummaryPipe } from './osd-dashboard-summary.pipe';
+import { ToggletipModule } from 'carbon-components-angular';
 
 @NgModule({
   imports: [
@@ -27,11 +28,11 @@ import { osdDashboardSummaryPipe } from './osd-dashboard-summary.pipe';
     NgbNavModule,
     SharedModule,
     RouterModule,
-    NgbPopoverModule,
     FormsModule,
     ReactiveFormsModule,
     DashboardV3Module,
-    BaseChartDirective
+    BaseChartDirective,
+    ToggletipModule
   ],
   declarations: [
     HealthComponent,

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 d1159514583296941405d0fdbd8ede5113b2230c..18ceaf85672f2ebb6e7c2a5fd979ee98aae736ed 100644 (file)
--- 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
@@ -15,19 +15,22 @@
                   i18n-cardTitle
                   class="cd-status-card"
                   contentClass="content-highlight"
-                  *ngIf="healthData?.health?.status">
-      <ng-container *ngIf="healthData?.health?.checks?.length > 0">
-        <ng-template #healthChecks>
-          <cd-health-checks [healthData]="healthData"></cd-health-checks>
-        </ng-template>
-        <div class="info-card-content-clickable"
-             [ngStyle]="healthData?.health?.status | healthColor"
-             [ngbPopover]="healthChecks"
-             popoverClass="info-card-popover-cluster-status">
-          {{ healthData?.health?.status | healthLabel | uppercase }}
-          <i *ngIf="healthData?.health?.status !== 'HEALTH_OK'"
-             class="fa fa-exclamation-triangle"></i>
-        </div>
+                  *ngIf="healthData.health?.status">
+      <ng-container *ngIf="healthData.health?.checks?.length > 0">
+        <cds-toggletip  [dropShadow]="true"
+                        [autoAlign]="true">
+          <div cdsToggletipButton>
+            <span [ngStyle]="healthData.health.status | healthColor"
+                  class="info-card-content-clickable">
+                  {{ healthData.health.status | healthLabel | uppercase }}
+              <i  *ngIf="healthData.health?.status !== 'HEALTH_OK'"
+                  class="fa fa-exclamation-triangle"></i>
+            </span>
+          </div>
+          <div cdsToggletipContent>
+            <cd-health-checks [healthData]="healthData"></cd-health-checks>
+          </div>
+        </cds-toggletip>
       </ng-container>
       <ng-container *ngIf="!healthData?.health?.checks?.length">
         <div [ngStyle]="healthData?.health.status | healthColor">
@@ -145,22 +148,26 @@
                   i18n-cardTitle
                   class="cd-capacity-card cd-chart-card"
                   contentClass="content-chart"
-                  *ngIf="healthData?.pg_info">
-      <ng-template #pgStatus>
-        <ng-container *ngTemplateOutlet="logsLink"></ng-container>
-        <ul>
-          <li *ngFor="let pgStatesText of healthData?.pg_info.statuses | keyvalue">
-            {{ pgStatesText.key }}: {{ pgStatesText.value }}
-          </li>
-        </ul>
-      </ng-template>
-      <div class="pg-status-popover-wrapper">
-        <div [ngbPopover]="pgStatus">
-          <cd-health-pie [data]="healthData"
-                         [config]="pgStatusChartConfig"
-                         (prepareFn)="preparePgStatus($event[0], $event[1])">
-          </cd-health-pie>
+                  *ngIf="healthData.pg_info">
+      <div  cdsPopover
+            [dropShadow]="true"
+            placement="bottom"
+            class="pg-status-popover-wrapper">
+
+      <div class="popover-trigger">
+        <cd-health-pie  [data]="healthData"
+                        [config]="pgStatusChartConfig"
+                        (prepareFn)="preparePgStatus($event[0], $event[1])">
+        </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>
+        </cds-popover-content>
       </div>
     </cd-info-card>
 
@@ -227,7 +234,10 @@
   <ng-template #logsLink>
     <ng-container *ngIf="permissions?.log?.read">
       <p class="logs-link"
-         i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
+         i18n>
+        <i [ngClass]="[icons.infoCircle]"></i> See
+        <a routerLink="/logs">Logs</a> for more details.
+      </p>
     </ng-container>
   </ng-template>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index 722886d4477539be751731184f074cb63d43784a..fac206be59c5bead7a9bcb3b068cf5aef65277da 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -33,10 +33,8 @@ export class HealthComponent implements OnInit, OnDestroy {
   enabledFeature$: FeatureTogglesMap$;
   icons = Icons;
   color: string;
-
   clientStatsConfig: any = {};
   rawCapacityChartConfig: any = {};
-
   pgStatusChartConfig = {
     options: {
       events: ['']

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 e8c7f9fe47b0a43f01add779f9821dede2ca0be2..970a4d90a403631f8f28b0f0a402d3dd6ebf6450 100644 (file)
--- 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
@@ -1,50 +1,50 @@
-<ng-template #syncPopover>
-  <ul class="text-center">
-    <li><h5><b>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('failed') || status?.includes('error')">
-        {{ status | titlecase }}
-      </span>
-    </li>
-  </ul>
-</ng-template>
 <ul class="me-2">
   <ng-template #upToDateTpl>
-    <li class="badge badge-success">Up to Date</li>
-  </ng-template>
-  <ng-template #showStatus>
-    <a *ngIf="zone.syncstatus !== 'Not Syncing From Zone'"
-       class="lead text-primary"
-       [ngbPopover]="syncPopover"
-       placement="top"
-       popoverClass="rgw-overview-card-popover"
-       i18n>{{ zone.syncstatus | titlecase }}</a>
-    <a *ngIf="zone.syncstatus === 'Not Syncing From Zone'"
-       class="lead text-primary"
-       [ngbPopover]="syncPopover"
-       placement="top"
-       popoverClass="rgw-overview-card-popover"
-       i18n>Not Syncing</a>
+    <li class="badge badge-success"
+        i18n>Up to Date</li>
   </ng-template>
-  <li><b>Status:</b></li>
-  <li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
-    <i [ngClass]="[icons.danger]"
-       class="text-danger"></i>
-    <a class="lead text-danger"
-       [ngbPopover]="syncPopover"
-       placement="top"
-       popoverClass="rgw-overview-card-popover"
-       i18n>Error</a></li>
-  <li class="mt-4 fw-bold">
-    Last Synced:
+  <cds-toggletip  [dropShadow]="true"
+                  [align]="align">
+    <div  cdsToggletipButton
+          class="toggleTipBtn">
+    <ng-template #showStatus>
+      <a  *ngIf="zone.syncstatus !== 'Not Syncing From Zone'"
+          class="lead text-primary"
+          i18n>{{ zone.syncstatus | titlecase }}</a>
+      <a  *ngIf="zone.syncstatus === 'Not Syncing From Zone'"
+          class="lead text-primary"
+          i18n>Not Syncing</a>
+    </ng-template>
+    <li><b>Status:</b></li>
+    <li *ngIf="zone.syncstatus?.includes('failed') || zone.syncstatus?.includes('error'); else showStatus">
+      <i  [ngClass]="[icons.danger]"
+          class="text-danger"></i>
+      <a  class="lead text-danger"
+          i18n>Error</a>
+    </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}}
+          </span>
+          <span *ngIf="!status?.includes(':')">
+            <b>{{ status | titlecase }}</b>
+          </span>
+        </span>
+        <span *ngIf="status?.includes('failed') || status?.includes('error')">
+          {{ status | titlecase }}
+        </span>
+      </li>
+    </ul>
+  </div>
+  </cds-toggletip>
+  <li class="mt-4 fw-bold"
+      i18n>
+      Last Synced:
   </li>
   <li class="badge badge-info"
       *ngIf="zone.timestamp; else upToDateTpl">{{ zone.timestamp | relativeDate }}</li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss
index 4386b0c6157044a718fccdd397c346183996ce15..6fb7fee71f2c6d4e58a1cf15990456c1008a0cd4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.scss
@@ -6,3 +6,7 @@ ul {
   flex-direction: column;
   list-style-type: none;
 }
+
+.toggle-tip-btn {
+  flex-direction: column;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts
index a7ec87da07993f7d19833dd2bec092a89b12c643..799d4211066dbd94784ce1c6bfa002621e8aaa14 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.ts
@@ -8,9 +8,8 @@ import { Icons } from '~/app/shared/enum/icons.enum';
 })
 export class RgwSyncDataInfoComponent {
   icons = Icons;
-
+  align = 'top';
   @Input()
   zone: any = {};
-
   constructor() {}
 }

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 9b489e124bfdb7ee485edbed1b8cffd0805a4a06..5ec927071f8b3c588dd52161054eb65c6a16953e 100644 (file)
--- 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
@@ -1,57 +1,58 @@
 <span *ngIf="metadataSyncInfo === 'no sync (zone is master)'">
   <ul class="me-2">
-    <li><b>Status:</b></li>
+    <li><b i18n>Status:</b></li>
     <li>No Sync</li>
   </ul>
 </span>
 <span *ngIf="metadataSyncInfo !== 'no sync (zone is master)'">
-  <ng-template #metadataSyncPopover>
-    <ul class="text-center">
-      <li><h5><b>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('failed') || status?.includes('error')">
-            {{ status | titlecase }}
-        </span>
-      </li>
-    </ul>
-  </ng-template>
   <ul class="me-2">
     <ng-template #upToDateTpl>
-      <li class="badge badge-success">Up to Date</li>
+      <li class="badge badge-success"
+          i18n>Up to Date</li>
     </ng-template>
-    <ng-template #showMetadataStatus>
-      <a *ngIf="metadataSyncInfo.syncstatus !== 'Not Syncing From Zone'"
-         class="lead text-primary"
-         [ngbPopover]="metadataSyncPopover"
-         placement="top"
-         popoverClass="rgw-overview-card-popover"
-         i18n>{{ metadataSyncInfo.syncstatus | titlecase }}</a>
-      <a *ngIf="metadataSyncInfo.syncstatus === 'Not Syncing From Zone'"
-         class="lead text-primary"
-         [ngbPopover]="metadataSyncPopover"
-         placement="top"
-         popoverClass="rgw-overview-card-popover"
-         i18n>Not Syncing</a>
-    </ng-template>
-    <li><b>Status:</b></li>
-    <li *ngIf="metadataSyncInfo.syncstatus?.includes('failed') || metadataSyncInfo.syncstatus?.includes('error'); else showMetadataStatus">
-      <i class="text-danger"
-         [ngClass]="[icons.danger]"></i>
-      <a class="lead text-danger"
-         [ngbPopover]="metadataSyncPopover"
-         placement="top"
-         popoverClass="rgw-overview-card-popover"
-         i18n>Error</a></li>
-    <li class="mt-4 fw-bold">
-      Last Synced:
+    <cds-toggletip  [dropShadow]="true"
+                    [align]="align">
+      <div cdsToggletipButton
+           class="toggleTipBtn">
+        <ng-template #showMetadataStatus>
+          <a  *ngIf="metadataSyncInfo.syncstatus !== 'Not Syncing From Zone'"
+              class="lead text-primary"
+              popoverClass="rgw-overview-card-popover"
+              i18n>{{ metadataSyncInfo.syncstatus | titlecase }}</a>
+          <a  *ngIf="metadataSyncInfo.syncstatus === 'Not Syncing From Zone'"
+              class="lead text-primary"
+              i18n>Not Syncing</a>
+        </ng-template>
+        <li><b i18n>Status:</b></li>
+        <li *ngIf="metadataSyncInfo.syncstatus?.includes('failed') || metadataSyncInfo.syncstatus?.includes('error'); else showMetadataStatus">
+          <i  class="text-danger"
+              [ngClass]="[icons.danger]"></i>
+          <a class="lead text-danger"
+             i18n>Error</a>
+        </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}}
+              </span>
+              <span *ngIf="!status?.includes(':')">
+                <b>{{ status | titlecase }}</b>
+              </span>
+            </span>
+            <span *ngIf="status?.includes('failed') || status?.includes('error')">
+                {{ status | titlecase }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </cds-toggletip>
+    <li class="mt-4 fw-bold"
+        i18n>
+        Last Synced:
     </li>
     <li class="badge badge-info"
         *ngIf="metadataSyncInfo.timestamp; else upToDateTpl">{{ metadataSyncInfo.timestamp | relativeDate }}</li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss
index 4386b0c6157044a718fccdd397c346183996ce15..91dc6e03739497ffd762f9aea09e39e59ea09056 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.scss
@@ -6,3 +6,7 @@ ul {
   flex-direction: column;
   list-style-type: none;
 }
+
+.toggleTipBtn {
+  flex-direction: column;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts
index bf05c194a393c46166ea84a0abb96846fb42dff2..8df99b9c50eda377dfc8e24476bc89e604f7614a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.ts
@@ -8,7 +8,7 @@ import { Icons } from '~/app/shared/enum/icons.enum';
 })
 export class RgwSyncMetadataInfoComponent {
   icons = Icons;
-
+  align = 'top';
   @Input()
   metadataSyncInfo: any = {};
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index f65ca55cb768bb7445307b765a74ea9b503b0b7c..be3b4d56c359205ec005eb6b0668de0ac1b4a75e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -83,7 +83,8 @@ import {
   AccordionModule,
   TagModule,
   TooltipModule,
-  ComboBoxModule
+  ComboBoxModule,
+  ToggletipModule
 } from 'carbon-components-angular';
 import { CephSharedModule } from '../shared/ceph-shared.module';
 import { RgwUserAccountsComponent } from './rgw-user-accounts/rgw-user-accounts.component';
@@ -130,10 +131,10 @@ import { RgwRateLimitDetailsComponent } from './rgw-rate-limit-details/rgw-rate-
     RadioModule,
     TagModule,
     TooltipModule,
-    ComboBoxModule
+    ComboBoxModule,
+    ToggletipModule
   ],
   exports: [
-    RgwDaemonListComponent,
     RgwDaemonDetailsComponent,
     RgwBucketFormComponent,
     RgwBucketListComponent,

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 2d99c77bd8067e378ca675de2075cb2868a05a43..1282af5daa0ef5ca267f3171a378c4f7aa592985 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -3,6 +3,7 @@
   $flex-grid-columns: 16,
   $use-flexbox-grid: true,
 );
+@use '@carbon/layout';
 @use '@carbon/colors';
 @use './src/styles/vendor/variables' as vv;
 @use './themes/default';
@@ -18,14 +19,14 @@
   ******************************************/
 
 @use '@carbon/styles/scss/components/button/tokens' as button-tokens with (
-  $button-primary: vv.$primary, 
-  $button-primary-hover: darken(vv.$primary, 5%), 
+  $button-primary: vv.$primary,
+  $button-primary-hover: darken(vv.$primary, 5%),
   $button-primary-active: darken(vv.$primary, 10%),
-  $button-secondary: vv.$secondary, 
-  $button-secondary-hover: darken(vv.$secondary, 5%), 
+  $button-secondary: vv.$secondary,
+  $button-secondary-hover: darken(vv.$secondary, 5%),
   $button-secondary-active: darken(vv.$secondary, 10%),
-  $button-tertiary: vv.$primary, 
-  $button-tertiary-hover: darken(vv.$primary, 5%), 
+  $button-tertiary: vv.$primary,
+  $button-tertiary-hover: darken(vv.$primary, 5%),
   $button-tertiary-active: darken(vv.$primary, 10%)
 );
 
@@ -156,3 +157,11 @@ Tooltip
 .cds--tooltip-content {
   background-color: theme.$layer-02;
 }
+/******************************************
+Carbon Popover
+******************************************/
+.cds--popover-content {
+  background-color: theme.$layer-02;
+  max-height: layout.$spacing-13;
+  overflow: auto;
+}