mgr/dashboard: remove used and total used columns in favor of usage bar

Fixes: https://tracker.ceph.com/issues/62697
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>
(cherry picked from commit 802410d4b15c63e756c31672816ef8985341b47c)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
index 1d41589e90d14519f0c8eb31ced1090740b1a741..41bf663be3b913af4dbb0093a0a1487307fc6e47 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html
@@ -143,14 +143,12 @@
   </div>
 </ng-template>
 
-<ng-template #usedTmpl>
-  <span i18n
-        i18n-ngbTooltip
-        ngbTooltip="Stored data">Used</span>
-</ng-template>
-
-<ng-template #totalUsedTmpl>
-  <span i18n
-        i18n-ngbTooltip
-        ngbTooltip="Total space used by the image">Total Used</span>
+<ng-template #imageUsageTpl
+             let-row="row">
+  <cd-usage-bar *ngIf="row"
+                [total]="row.size"
+                [used]="row.disk_usage"
+                [title]="row.name"
+                decimals="2">
+  </cd-usage-bar>
 </ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
index 7490997ef1517863242542a90fc8cf11cff203a1..cff6042a980b2325335b4ad65c72fce607a4b4a0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
@@ -92,60 +92,6 @@ describe('RbdListComponent', () => {
     });
   });
 
-  describe('handling of provisioned columns', () => {
-    let rbdServiceListSpy: jasmine.Spy;
-
-    const images = [
-      {
-        name: 'img1',
-        pool_name: 'rbd',
-        features_name: ['layering', 'exclusive-lock'],
-        disk_usage: null,
-        total_disk_usage: null
-      },
-      {
-        name: 'img2',
-        pool_name: 'rbd',
-        features_name: ['layering', 'exclusive-lock', 'object-map', 'fast-diff'],
-        disk_usage: 1024,
-        total_disk_usage: 1024
-      }
-    ];
-
-    beforeEach(() => {
-      component.images = images;
-      refresh({ executing_tasks: [], finished_tasks: [] });
-      rbdServiceListSpy = spyOn(rbdService, 'list');
-    });
-
-    it('should display N/A for Provisioned & Total Provisioned columns if disk usage is null', () => {
-      rbdServiceListSpy.and.callFake(() =>
-        of([{ pool_name: 'rbd', value: images, headers: headers }])
-      );
-      fixture.detectChanges();
-      const spanWithoutFastDiff = fixture.debugElement.nativeElement.querySelectorAll(
-        '.datatable-body-cell-label span'
-      );
-      // check image with disk usage = null & fast-diff disabled
-      expect(spanWithoutFastDiff[4].textContent).toBe('N/A');
-
-      images[0]['features_name'] = ['layering', 'exclusive-lock', 'object-map', 'fast-diff'];
-      component.images = images;
-      refresh({ executing_tasks: [], finished_tasks: [] });
-
-      rbdServiceListSpy.and.callFake(() =>
-        of([{ pool_name: 'rbd', value: images, headers: headers }])
-      );
-      fixture.detectChanges();
-
-      const spanWithFastDiff = fixture.debugElement.nativeElement.querySelectorAll(
-        '.datatable-body-cell-label span'
-      );
-      // check image with disk usage = null & fast-diff changed to enabled
-      expect(spanWithFastDiff[6].textContent).toBe('-');
-    });
-  });
-
   describe('handling of deletion', () => {
     beforeEach(() => {
       fixture.detectChanges();

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
index b132ef72965466ad9ebf2ab06467f6ed476923b2..a145fb2b64d248323b0a816501d63a789ad1dc46 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
@@ -73,6 +73,8 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
   usedTmpl: TemplateRef<any>;
   @ViewChild('totalUsedTmpl', { static: true })
   totalUsedTmpl: TemplateRef<any>;
+  @ViewChild('imageUsageTpl', { static: true })
+  imageUsageTpl: TemplateRef<any>;
 
   permission: Permission;
   tableActions: CdTableAction[];
@@ -276,24 +278,10 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
         pipe: this.dimlessBinaryPipe
       },
       {
-        name: $localize`Used`,
-        prop: 'disk_usage',
-        cellClass: 'text-right',
-        flexGrow: 1,
-        pipe: this.dimlessBinaryPipe,
-        sortable: false,
-        headerTemplate: this.usedTmpl,
-        cellTemplate: this.provisionedNotAvailableTooltipTpl
-      },
-      {
-        name: $localize`Total used`,
-        prop: 'total_disk_usage',
-        cellClass: 'text-right',
-        flexGrow: 1,
-        pipe: this.dimlessBinaryPipe,
-        sortable: false,
-        headerTemplate: this.totalUsedTmpl,
-        cellTemplate: this.totalProvisionedNotAvailableTooltipTpl
+        name: $localize`Usage`,
+        prop: 'usage',
+        cellTemplate: this.imageUsageTpl,
+        flexGrow: 1.5
       },
       {
         name: $localize`Objects`,