From: Afreen Misbah Date: Mon, 9 Feb 2026 18:02:16 +0000 (+0530) Subject: mgr/dashboard: Added tool definition tip X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=21dc8ce79069883f5865d68aee299ad50b7f9af2;p=ceph.git mgr/dashboard: Added tool definition tip Signed-off-by: Afreen Misbah --- 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 3f1f100999b..399a0f8c6d3 100644 --- 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(); - - 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 70f1dd91858..d810ffc6ac1 100644 --- 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 - - + Raw capacity - - + + [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;