mgr/dashboard: provisioned values is misleading in RBD image table

Fixes: https://tracker.ceph.com/issues/46617
Signed-off-by: Avan Thakkar <athakkar@redhat.com>
Adding hint in image table similar to the one in rbd-details.

(cherry picked from commit 4ee2f2a9b79e246dfa56ad371b0718f0171eee3e)

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 875814d57bc68f8daffe0e926b75f7e8d68b5107..7287beefcf2bb8b90da7e9505ab35bb3b4f814ec 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
@@ -29,6 +29,26 @@
        [innerHtml]="'Only available for RBD images with <strong>fast-diff</strong> enabled'"></div>
 </ng-template>
 
+<ng-template #provisionedNotAvailableTooltipTpl
+             let-row="row">
+  <span *ngIf="row.disk_usage === null; else provisioned"
+        [ngbTooltip]="usageNotAvailableTooltipTpl"
+        placement="top"
+        i18n>N/A</span>
+  <ng-template #provisioned
+               i18n>{{row.disk_usage | dimlessBinary}}</ng-template>
+</ng-template>
+
+<ng-template #totalProvisionedNotAvailableTooltipTpl
+             let-row="row">
+  <span *ngIf="row.total_disk_usage === null; else totalProvisioned"
+        [ngbTooltip]="usageNotAvailableTooltipTpl"
+        placement="top"
+        i18n>N/A</span>
+  <ng-template #totalProvisioned
+               i18n>{{row.total_disk_usage | dimlessBinary}}</ng-template>
+</ng-template>
+
 <ng-template #parentTpl
              let-value="value">
   <span *ngIf="value">{{ value.pool_name }}<span

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 ed898a2fcf2f84a4fd6008b3d87721a942d9c6a0..89b70071814d864a2a8e38379becda8b8250f245 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
@@ -94,6 +94,43 @@ describe('RbdListComponent', () => {
     });
   });
 
+  describe('handling of provisioned columns', () => {
+    const images = [
+      {
+        name: 'img1',
+        pool_name: 'rbd',
+        features: ['layering', 'exclusive-lock'],
+        disk_usage: null,
+        total_disk_usage: null
+      },
+      {
+        name: 'img2',
+        pool_name: 'rbd',
+        features: ['layering', 'exclusive-lock', 'object-map', 'fast-diff'],
+        disk_usage: 1024,
+        total_disk_usage: 1024
+      }
+    ];
+
+    beforeEach(() => {
+      component.images = images;
+      refresh({ executing_tasks: [], finished_tasks: [] });
+      spyOn(rbdService, 'list').and.callFake(() =>
+        of([{ pool_name: 'rbd', status: 1, value: images }])
+      );
+      fixture.detectChanges();
+    });
+
+    it('should display N/A for Provisioned & Total Provisioned columns if disk usage is null', () => {
+      const spans = fixture.debugElement.nativeElement.querySelectorAll(
+        '.datatable-body-cell-label span'
+      );
+      // check image with disk usage = null
+      expect(spans[6].textContent).toBe('N/A');
+      expect(spans[7].textContent).toBe('N/A');
+    });
+  });
+
   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 8bc297da62fd09d9394a427ff3e3b248ce100c3d..0ffb25695c8d2e5e3e54c93e42778ac2cb7764a5 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
@@ -56,6 +56,10 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
   deleteTpl: TemplateRef<any>;
   @ViewChild('removingStatTpl', { static: true })
   removingStatTpl: TemplateRef<any>;
+  @ViewChild('provisionedNotAvailableTooltipTpl', { static: true })
+  provisionedNotAvailableTooltipTpl: TemplateRef<any>;
+  @ViewChild('totalProvisionedNotAvailableTooltipTpl', { static: true })
+  totalProvisionedNotAvailableTooltipTpl: TemplateRef<any>;
 
   permission: Permission;
   tableActions: CdTableAction[];
@@ -230,14 +234,16 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
         prop: 'disk_usage',
         cellClass: 'text-center',
         flexGrow: 1,
-        pipe: this.dimlessBinaryPipe
+        pipe: this.dimlessBinaryPipe,
+        cellTemplate: this.provisionedNotAvailableTooltipTpl
       },
       {
         name: $localize`Total provisioned`,
         prop: 'total_disk_usage',
         cellClass: 'text-center',
         flexGrow: 1,
-        pipe: this.dimlessBinaryPipe
+        pipe: this.dimlessBinaryPipe,
+        cellTemplate: this.totalProvisionedNotAvailableTooltipTpl
       },
       {
         name: $localize`Parent`,