Merge pull request ceph#60514 from rhcs-dashboard/fix-68733-main

mgr/dashboard: fix total objects/Avg object size in RGW Overview Page

Reviewed-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-bucket.ts

@@ -0,0 +1,37 @@
+export interface Bucket {
+  bucket: string;
+  tenant: string;
+  versioning: string;
+  zonegroup: string;
+  placement_rule: string;
+  explicit_placement: {
+    data_pool: string;
+    data_extra_pool: string;
+    index_pool: string;
+  };
+  id: string;
+  marker: string;
+  index_type: string;
+  index_generation: number;
+  num_shards: number;
+  reshard_status: string;
+  judge_reshard_lock_time: string;
+  object_lock_enabled: boolean;
+  mfa_enabled: boolean;
+  owner: string;
+  ver: string;
+  master_ver: string;
+  mtime: string;
+  creation_time: string;
+  max_marker: string;
+  usage: Record<string, any>;
+  bucket_quota: {
+    enabled: boolean;
+    check_on_raw: boolean;
+    max_size: number;
+    max_size_kb: number;
+    max_objects: number;
+  };
+  read_tracker: number;
+  bid: string;
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts

@@ -1,7 +1,8 @@
-import { Component, NgZone, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 import _ from 'lodash';
-import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs';
+import { forkJoin as observableForkJoin, Observable, Subscriber, Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
 import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
@@ -21,6 +22,7 @@ import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
+import { Bucket } from '../models/rgw-bucket';
 
 const BASE_URL = 'rgw/bucket';
 
@@ -30,7 +32,7 @@ const BASE_URL = 'rgw/bucket';
   styleUrls: ['./rgw-bucket-list.component.scss'],
   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }]
 })
-export class RgwBucketListComponent extends ListWithDetails implements OnInit {
+export class RgwBucketListComponent extends ListWithDetails implements OnInit, OnDestroy {
   @ViewChild(TableComponent, { static: true })
   table: TableComponent;
   @ViewChild('bucketSizeTpl', { static: true })
@@ -43,9 +45,10 @@ export class RgwBucketListComponent extends ListWithDetails implements OnInit {
   permission: Permission;
   tableActions: CdTableAction[];
   columns: CdTableColumn[] = [];
-  buckets: object[] = [];
+  buckets: Bucket[] = [];
   selection: CdTableSelection = new CdTableSelection();
   declare staleTimeout: number;
+  private subs: Subscription = new Subscription();
 
   constructor(
     private authStorageService: AuthStorageService,
@@ -126,33 +129,18 @@ export class RgwBucketListComponent extends ListWithDetails implements OnInit {
     this.setTableRefreshTimeout();
   }
 
-  transformBucketData() {
-    _.forEach(this.buckets, (bucketKey) => {
-      const maxBucketSize = bucketKey['bucket_quota']['max_size'];
-      const maxBucketObjects = bucketKey['bucket_quota']['max_objects'];
-      bucketKey['bucket_size'] = 0;
-      bucketKey['num_objects'] = 0;
-      if (!_.isEmpty(bucketKey['usage'])) {
-        bucketKey['bucket_size'] = bucketKey['usage']['rgw.main']['size_actual'];
-        bucketKey['num_objects'] = bucketKey['usage']['rgw.main']['num_objects'];
-      }
-      bucketKey['size_usage'] =
-        maxBucketSize > 0 ? bucketKey['bucket_size'] / maxBucketSize : undefined;
-      bucketKey['object_usage'] =
-        maxBucketObjects > 0 ? bucketKey['num_objects'] / maxBucketObjects : undefined;
-    });
-  }
-
   getBucketList(context: CdTableFetchDataContext) {
     this.setTableRefreshTimeout();
-    this.rgwBucketService.list(true).subscribe(
-      (resp: object[]) => {
-        this.buckets = resp;
-        this.transformBucketData();
-      },
-      () => {
-        context.error();
-      }
+    this.subs.add(
+      this.rgwBucketService
+        .fetchAndTransformBuckets()
+        .pipe(switchMap(() => this.rgwBucketService.buckets$))
+        .subscribe({
+          next: (buckets) => {
+            this.buckets = buckets;
+          },
+          error: () => context.error()
+        })
     );
   }
 
@@ -198,4 +186,8 @@ export class RgwBucketListComponent extends ListWithDetails implements OnInit {
       }
     });
   }
+
+  ngOnDestroy() {
+    this.subs.unsubscribe();
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.spec.ts

@@ -1,24 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { of, BehaviorSubject, combineLatest } from 'rxjs';
 import { RgwOverviewDashboardComponent } from './rgw-overview-dashboard.component';
-import { of } from 'rxjs';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
 import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service';
 import { RgwDaemon } from '../models/rgw-daemon';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CardComponent } from '~/app/shared/components/card/card.component';
+import { CardRowComponent } from '~/app/shared/components/card-row/card-row.component';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
-import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
 import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
-import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service';
-import { HealthService } from '~/app/shared/api/health.service';
-import { CardRowComponent } from '~/app/shared/components/card-row/card-row.component';
-import { CardComponent } from '~/app/shared/components/card/card.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { configureTestBed } from '~/testing/unit-test-helper';
+import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
 
 describe('RgwOverviewDashboardComponent', () => {
   let component: RgwOverviewDashboardComponent;
   let fixture: ComponentFixture<RgwOverviewDashboardComponent>;
+  let listDaemonsSpy: jest.SpyInstance;
+  let listRealmsSpy: jest.SpyInstance;
+  let listZonegroupsSpy: jest.SpyInstance;
+  let listZonesSpy: jest.SpyInstance;
+  let fetchAndTransformBucketsSpy: jest.SpyInstance;
+  let totalBucketsAndUsersSpy: jest.SpyInstance;
+
+  const totalNumObjectsSubject = new BehaviorSubject<number>(290);
+  const totalUsedCapacitySubject = new BehaviorSubject<number>(9338880);
+  const averageObjectSizeSubject = new BehaviorSubject<number>(1280);
+  const bucketsCount = 2;
+  const usersCount = 5;
   const daemon: RgwDaemon = {
     id: '8000',
     service_map_id: '4803',
@@ -47,95 +56,105 @@ describe('RgwOverviewDashboardComponent', () => {
     zones: ['zone4', 'zone5', 'zone6', 'zone7']
   };
 
-  const bucketAndUserList = {
-    buckets_count: 2,
-    users_count: 2
-  };
-
-  const healthData = {
-    total_objects: '290',
-    total_pool_bytes_used: 9338880
-  };
-
-  let listDaemonsSpy: jest.SpyInstance;
-  let listZonesSpy: jest.SpyInstance;
-  let listZonegroupsSpy: jest.SpyInstance;
-  let listRealmsSpy: jest.SpyInstance;
-  let listBucketsSpy: jest.SpyInstance;
-  let healthDataSpy: jest.SpyInstance;
-
-  configureTestBed({
-    declarations: [
-      RgwOverviewDashboardComponent,
-      CardComponent,
-      CardRowComponent,
-      DimlessBinaryPipe
-    ],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [HttpClientTestingModule]
-  });
-
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        RgwOverviewDashboardComponent,
+        CardComponent,
+        CardRowComponent,
+        DimlessBinaryPipe
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        { provide: RgwDaemonService, useValue: { list: jest.fn() } },
+        { provide: RgwRealmService, useValue: { list: jest.fn() } },
+        { provide: RgwZonegroupService, useValue: { list: jest.fn() } },
+        { provide: RgwZoneService, useValue: { list: jest.fn() } },
+        {
+          provide: RgwBucketService,
+          useValue: {
+            fetchAndTransformBuckets: jest.fn(),
+            totalNumObjects$: totalNumObjectsSubject.asObservable(),
+            totalUsedCapacity$: totalUsedCapacitySubject.asObservable(),
+            averageObjectSize$: averageObjectSizeSubject.asObservable(),
+            getTotalBucketsAndUsersLength: jest.fn()
+          }
+        }
+      ],
+      imports: [HttpClientTestingModule]
+    }).compileComponents();
+    fixture = TestBed.createComponent(RgwOverviewDashboardComponent);
+    component = fixture.componentInstance;
     listDaemonsSpy = jest
       .spyOn(TestBed.inject(RgwDaemonService), 'list')
       .mockReturnValue(of([daemon]));
+    fetchAndTransformBucketsSpy = jest
+      .spyOn(TestBed.inject(RgwBucketService), 'fetchAndTransformBuckets')
+      .mockReturnValue(of(null));
+    totalBucketsAndUsersSpy = jest
+      .spyOn(TestBed.inject(RgwBucketService), 'getTotalBucketsAndUsersLength')
+      .mockReturnValue(of({ buckets_count: bucketsCount, users_count: usersCount }));
     listRealmsSpy = jest
       .spyOn(TestBed.inject(RgwRealmService), 'list')
       .mockReturnValue(of(realmList));
     listZonegroupsSpy = jest
       .spyOn(TestBed.inject(RgwZonegroupService), 'list')
       .mockReturnValue(of(zonegroupList));
     listZonesSpy = jest.spyOn(TestBed.inject(RgwZoneService), 'list').mockReturnValue(of(zoneList));
-    listBucketsSpy = jest
-      .spyOn(TestBed.inject(RgwBucketService), 'getTotalBucketsAndUsersLength')
-      .mockReturnValue(of(bucketAndUserList));
-    healthDataSpy = jest
-      .spyOn(TestBed.inject(HealthService), 'getClusterCapacity')
-      .mockReturnValue(of(healthData));
-    fixture = TestBed.createComponent(RgwOverviewDashboardComponent);
-    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create the component', () => {
     expect(component).toBeTruthy();
   });
 
   it('should render all cards', () => {
-    fixture.detectChanges();
     const dashboardCards = fixture.debugElement.nativeElement.querySelectorAll('cd-card');
     expect(dashboardCards.length).toBe(5);
   });
 
-  it('should get corresponding data into Daemons', () => {
-    expect(listDaemonsSpy).toHaveBeenCalled();
-    expect(component.rgwDaemonCount).toEqual(1);
-  });
-
-  it('should get corresponding data into Realms', () => {
+  it('should get data for Realms', () => {
     expect(listRealmsSpy).toHaveBeenCalled();
     expect(component.rgwRealmCount).toEqual(2);
   });
 
-  it('should get corresponding data into Zonegroups', () => {
+  it('should get data for Zonegroups', () => {
     expect(listZonegroupsSpy).toHaveBeenCalled();
     expect(component.rgwZonegroupCount).toEqual(3);
   });
 
-  it('should get corresponding data into Zones', () => {
+  it('should get data for Zones', () => {
     expect(listZonesSpy).toHaveBeenCalled();
     expect(component.rgwZoneCount).toEqual(4);
   });
 
-  it('should get corresponding data into Buckets', () => {
-    expect(listBucketsSpy).toHaveBeenCalled();
-    expect(component.rgwBucketCount).toEqual(2);
-    expect(component.UserCount).toEqual(2);
-  });
-
-  it('should get corresponding data into Objects and capacity', () => {
-    expect(healthDataSpy).toHaveBeenCalled();
-    expect(component.objectCount).toEqual('290');
+  it('should set component properties from services using combineLatest', fakeAsync(() => {
+    component.interval = of(null).subscribe(() => {
+      component.fetchDataSub = combineLatest([
+        TestBed.inject(RgwDaemonService).list(),
+        TestBed.inject(RgwBucketService).fetchAndTransformBuckets(),
+        totalNumObjectsSubject.asObservable(),
+        totalUsedCapacitySubject.asObservable(),
+        averageObjectSizeSubject.asObservable(),
+        TestBed.inject(RgwBucketService).getTotalBucketsAndUsersLength()
+      ]).subscribe(([daemonData, _, objectCount, usedCapacity, averageSize, bucketData]) => {
+        component.rgwDaemonCount = daemonData.length;
+        component.objectCount = objectCount;
+        component.totalPoolUsedBytes = usedCapacity;
+        component.averageObjectSize = averageSize;
+        component.rgwBucketCount = bucketData.buckets_count;
+        component.UserCount = bucketData.users_count;
+      });
+    });
+    tick();
+    expect(listDaemonsSpy).toHaveBeenCalled();
+    expect(fetchAndTransformBucketsSpy).toHaveBeenCalled();
+    expect(totalBucketsAndUsersSpy).toHaveBeenCalled();
+    expect(component.rgwDaemonCount).toEqual(1);
+    expect(component.objectCount).toEqual(290);
     expect(component.totalPoolUsedBytes).toEqual(9338880);
-  });
+    expect(component.averageObjectSize).toEqual(1280);
+    expect(component.rgwBucketCount).toEqual(bucketsCount);
+    expect(component.UserCount).toEqual(usersCount);
+  }));
 });