From: Afreen Misbah Date: Mon, 9 Feb 2026 07:28:16 +0000 (+0530) Subject: Added query tital and used capacity data X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=1a3737bc64187eff3041a2b515ccc4ef261cf7f4;p=ceph.git Added query tital and used capacity data Signed-off-by: Afreen Misbah (cherry picked from commit 621c214d010162e205a1573d1dc1c074b4fb71d1) --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html index 30b7fa30cd00..a765474a6f01 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/overview/overview.component.html @@ -21,7 +21,9 @@
- +
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 09d97324fd16..3f1f100999b9 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,6 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } 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'; +import { HealthSnapshotMap } from '~/app/shared/models/health.interface'; +import { RefreshIntervalService } from '~/app/shared/services/refresh-interval.service'; +import { catchError, exhaustMap, takeUntil } from 'rxjs/operators'; +import { EMPTY, Subject } from 'rxjs'; @Component({ selector: 'cd-overview', @@ -9,4 +14,32 @@ import { OverviewStorageCardComponent } from './storage-card/overview-storage-ca templateUrl: './overview.component.html', styleUrl: './overview.component.scss' }) -export class OverviewComponent {} +export class OverviewComponent implements OnInit { + totalCapacity: number; + usedCapacity: number; + private destroy$ = new Subject(); + + + constructor(private healthService: HealthService, private refreshIntervalService: RefreshIntervalService) {} + + ngOnInit(): void { + this.refreshIntervalObs(() => this.healthService.getHealthSnapshot()).subscribe({ + next: (healthData: HealthSnapshotMap) => { + 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$) + ); + } + + 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 556f08e7d19f..70f1dd91858e 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 @@ -16,10 +16,10 @@
200{{' '}} + i18n>{{usedRaw}}{{' '}} TB of 1300 TB used + i18n>{{usedRawUnit}} of {{totalRaw}} {{totalRawUnit}} used
[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 + */ + @Component({ selector: 'cd-overview-storage-card', imports: [ @@ -32,12 +57,18 @@ const StorageType = { styleUrl: './overview-storage-card.component.scss', encapsulation: ViewEncapsulation.None }) -export class OverviewStorageCardComponent { +export class OverviewStorageCardComponent implements OnChanges { + @Input() total!: number; + @Input() used!: number; + totalRaw: string; + usedRaw: string; + totalRawUnit: string; + usedRawUnit: string; options: MeterChartOptions = { height: '45px', meter: { proportional: { - total: 2000, + total: null, unit: 'GB', breakdownFormatter: (_e) => null, totalFormatter: (_e) => null @@ -58,16 +89,15 @@ export class OverviewStorageCardComponent { allData = [ { group: StorageType.BLOCK, - value: 202 + value: 100, }, { group: StorageType.FILE, - value: 654 + value: 105 }, { group: StorageType.OBJECT, - value: 120 - } + value: 60 } ]; dropdownItems = [ { content: StorageType.ALL }, @@ -79,6 +109,40 @@ export class OverviewStorageCardComponent { selectedStorageType: string = StorageType.ALL; displayData = this.allData; + constructor(private dimlessBinaryPipe: DimlessBinaryPipe) {} + +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 [totalValue, totalUnit] = totalRaw.split(/\s+/); + const [usedValue, usedUnit] = usedRaw.split(/\s+/); + + const cleanedTotal = Number(totalValue.replace(/,/g, '').trim()); + + if (Number.isNaN(cleanedTotal)) return; + + 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 + } + } + }; +} + toggleRawCapacity(isChecked: boolean) { this.isRawCapacity = isChecked; }