mgr/dashboard: Add tootltip to storage overview

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
index 0bb28a579a1efe66b93f7863aa47a75e19c3144c..38c6f3823dee3f7cb58956915c5337891fd1dff2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.html
@@ -16,7 +16,7 @@
   </ng-template>
   <!-- CAPACITY USAGE TEXT -->
   <div class="overview-storage-card-usage-text">
-    @if(displayUsedRaw && totalRaw && usedRawUnit && totalRawUnit) {
+    @if( totalRaw && usedRawUnit && totalRawUnit) {
     <h5>
       <span
         class="cds--type-heading-05"
@@ -24,6 +24,14 @@
       <span
         class="cds--type-body-02"
         i18n>{{usedRawUnit}} of {{totalRaw}} {{totalRawUnit}} used</span>
+      <cds-tooltip
+        class="cds-ml-3"
+        [caret]="true"
+        description="Shows raw used vs. total raw capacity. Raw capacity includes all physical storage before replication or overhead."
+        i8n-description
+      >
+      <cd-icon type="help"></cd-icon>
+    </cds-tooltip>
     </h5>
     }
     @else {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.ts
index 574e416bf93e68752ec92f2ce82058ce512aed89..7fa3891e2bb659128fb8b6851063ab115c2db0c6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.ts
@@ -31,6 +31,7 @@ import { OverviewStorageService } from '~/app/shared/api/storage-overview.servic
 import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
 import { AreaChartComponent } from '~/app/shared/components/area-chart/area-chart.component';
 import { PieChartComponent } from '~/app/shared/components/pie-chart/pie-chart.component';
+import { ComponentsModule } from '~/app/shared/components/components.module';
 
 const CHART_HEIGHT = '45px';
 
@@ -103,7 +104,8 @@ const TopPoolsQueryMap = {
     SkeletonModule,
     LayoutModule,
     AreaChartComponent,
-    PieChartComponent
+    PieChartComponent,
+    ComponentsModule
   ],
   standalone: true,
   templateUrl: './overview-storage-card.component.html',