From: Pedro Gonzalez Gomez <pegonzal@redhat.com>
Date: Mon, 4 Sep 2023 14:45:30 +0000 (+0200)
Subject: mgr/dashboard: remove used and total used columns in favor of usage bar
X-Git-Tag: v18.2.1~315^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=4ca00bb83572d0ff601dd3930ca5d4468e77d56b;p=ceph.git

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 1d41589e90d14..41bf663be3b91 100644
--- 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 7490997ef1517..cff6042a980b2 100644
--- 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 b132ef7296546..a145fb2b64d24 100644
--- 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`,