mgr/dashboard: Added tool definition tip

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
index 3f1f100999b9f9541fd8781f07e2fe51cbfc858b..399a0f8c6d377262a3985b05db7fbe70e966931c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { GridModule, TilesModule } from 'carbon-components-angular';
 import { OverviewStorageCardComponent } from './storage-card/overview-storage-card.component';
 import { HealthService } from '~/app/shared/api/health.service';
@@ -14,32 +14,34 @@ import { EMPTY, Subject } from 'rxjs';
   templateUrl: './overview.component.html',
   styleUrl: './overview.component.scss'
 })
-export class OverviewComponent implements OnInit {
+export class OverviewComponent implements OnInit, OnDestroy {
   totalCapacity: number;
   usedCapacity: number;
   private destroy$ = new Subject<void>();
 
-
-  constructor(private healthService: HealthService, private refreshIntervalService: RefreshIntervalService) {}
+  constructor(
+    private healthService: HealthService,
+    private refreshIntervalService: RefreshIntervalService
+  ) {}
 
   ngOnInit(): void {
-    this.refreshIntervalObs(() =>  this.healthService.getHealthSnapshot()).subscribe({
+    this.refreshIntervalObs(() => this.healthService.getHealthSnapshot()).subscribe({
       next: (healthData: HealthSnapshotMap) => {
-      this.totalCapacity = healthData?.pgmap?.bytes_total;
-      this.usedCapacity = healthData?.pgmap?.bytes_used;
-  }});
+        this.totalCapacity = healthData?.pgmap?.bytes_total;
+        this.usedCapacity = healthData?.pgmap?.bytes_used;
+      }
+    });
   }
 
-   refreshIntervalObs(fn: Function) {
-      return this.refreshIntervalService.intervalData$.pipe(
-        exhaustMap(() => fn().pipe(catchError(() => EMPTY))),
-        takeUntil(this.destroy$)
-      );
-    }
+  refreshIntervalObs(fn: Function) {
+    return this.refreshIntervalService.intervalData$.pipe(
+      exhaustMap(() => fn().pipe(catchError(() => EMPTY))),
+      takeUntil(this.destroy$)
+    );
+  }
 
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
   }
-
 }

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 70f1dd91858e43778c109d35d7799156c8fae0f7..d810ffc6ac1eae147baf0b334daa70b3697f4d00 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
@@ -21,20 +21,22 @@
         class="cds--type-body-02"
         i18n>{{usedRawUnit}} of {{totalRaw}} {{totalRawUnit}} used</span>
     </h5>
-    <cds-tooltip
-      [autoAlign]="true"
-      class="cds-mt-5 "
-      title=""
-      [caret]="true"
-      description="An info tip about raw capacity"
-      i18n-description>
-      <cds-checkbox
-        [checked]="isRawCapacity"
-        (checkedChange)="toggleRawCapacity($event)"
+    <cds-checkbox
+      [checked]="isRawCapacity"
+      (checkedChange)="toggleRawCapacity($event)">
+      <cds-tooltip-definition
+        [autoAlign]="true"
+        [highContrast]="true"
+        [openOnHover]="false"
+        [dropShadow]="true"
+        title=""
+        [caret]="true"
+        description="Raw capacity includes all physical storage before replication or overhead."
+        i18n-description
         i18n>
         Raw capacity
-      </cds-checkbox>
-    </cds-tooltip>
+      </cds-tooltip-definition>
+    </cds-checkbox>
   </div>
   <ibm-meter-chart
     [options]="options"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.scss
index f1ab45e4b27c17662bf4c65e7819cca1968ae218..dffdb9415b774d433a1d9c324611ab266e208ab2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/storage-card/overview-storage-card.component.scss
@@ -27,7 +27,7 @@
     }
 
     .cds--dropdown {
-      flex: 0 0 35%;
+      flex: 0 0 40%;
     }
   }
 }

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 bd8cf522f681ca0de504cee0972de69bd3eed01d..48baeb1a5ee89dbbdde178a7fd417d940aae5448 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
@@ -33,9 +33,6 @@ const StorageType = {
 // }
 
 /**
- * 1. Fetch snapshot query -> [pass total and used raw]
- * 2. Show the usage title -> always fixed
- * 3. The chart total -> raw total always fixed
  * 4. Set data for block, file , object, all -> raw, sep queries
  * 5. Set data for block, file object + replicated -> usable
  * 6. Dont show what is 0
@@ -69,7 +66,7 @@ export class OverviewStorageCardComponent implements OnChanges {
     meter: {
       proportional: {
         total: null,
-        unit: 'GB',
+        unit: '',
         breakdownFormatter: (_e) => null,
         totalFormatter: (_e) => null
       }
@@ -89,7 +86,7 @@ export class OverviewStorageCardComponent implements OnChanges {
   allData = [
     {
       group: StorageType.BLOCK,
-      value: 100,
+      value: 100
     },
     {
       group: StorageType.FILE,
@@ -97,7 +94,8 @@ export class OverviewStorageCardComponent implements OnChanges {
     },
     {
       group: StorageType.OBJECT,
-      value: 60    }
+      value: 60
+    }
   ];
   dropdownItems = [
     { content: StorageType.ALL },
@@ -111,37 +109,37 @@ export class OverviewStorageCardComponent implements OnChanges {
 
   constructor(private dimlessBinaryPipe: DimlessBinaryPipe) {}
 
-ngOnChanges(): void {
-  if (this.total == null || this.used == null) return;
+  ngOnChanges(): void {
+    if (this.total == null || this.used == null) return;
 
-  const totalRaw = this.dimlessBinaryPipe.transform(this.total);
-  const usedRaw = this.dimlessBinaryPipe.transform(this.used);
+    const totalRaw = this.dimlessBinaryPipe.transform(this.total);
+    const usedRaw = this.dimlessBinaryPipe.transform(this.used);
 
-  const [totalValue, totalUnit] = totalRaw.split(/\s+/);
-  const [usedValue, usedUnit] = usedRaw.split(/\s+/);
+    const [totalValue, totalUnit] = totalRaw.split(/\s+/);
+    const [usedValue, usedUnit] = usedRaw.split(/\s+/);
 
-  const cleanedTotal = Number(totalValue.replace(/,/g, '').trim());
+    const cleanedTotal = Number(totalValue.replace(/,/g, '').trim());
 
-  if (Number.isNaN(cleanedTotal)) return;
+    if (Number.isNaN(cleanedTotal)) return;
 
-  this.totalRaw = totalValue;
-  this.totalRawUnit = totalUnit;
-  this.usedRaw = usedValue;
-  this.usedRawUnit = usedUnit;
+    this.totalRaw = totalValue;
+    this.totalRawUnit = totalUnit;
+    this.usedRaw = usedValue;
+    this.usedRawUnit = usedUnit;
 
-  // chart reacts to 'options' and 'data' changes only, hence mandatory to replace whole object
-  this.options = {
-    ...this.options,
-    meter: {
-      ...this.options.meter,
-      proportional: {
-        ...this.options.meter.proportional,
-        total: cleanedTotal,
-        unit: totalUnit
+    // chart reacts to 'options' and 'data' object changes only, hence mandatory to replace whole object
+    this.options = {
+      ...this.options,
+      meter: {
+        ...this.options.meter,
+        proportional: {
+          ...this.options.meter.proportional,
+          total: cleanedTotal,
+          unit: totalUnit
+        }
       }
-    }
-  };
-}
+    };
+  }
 
   toggleRawCapacity(isChecked: boolean) {
     this.isRawCapacity = isChecked;