mgr/dashboard: avoid blank content in Read/Write Card

The card has to show either a chart or 'N/A', but no blank content.

Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index a5f9014bd75348832a9ab1b6f1c4ae587090d421..cde3a60f94013a75c5efb201c1c756c8540e67a1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -144,16 +144,16 @@
                     i18n-cardTitle
                     class="cd-col-5"
                     cardClass="card-medium"
-                    [contentClass]="(healthData.client_perf.read_op_per_sec + healthData.client_perf.write_op_per_sec) <= 0 ? 'content-medium content-highlight' : 'content-chart'"
+                    [contentClass]="isClientReadWriteChartShowable() ? 'content-chart': 'content-medium content-highlight'"
                     *ngIf="healthData.client_perf">
-        <cd-health-pie *ngIf="(healthData.client_perf.read_op_per_sec + healthData.client_perf.write_op_per_sec) > 0"
+        <cd-health-pie *ngIf="isClientReadWriteChartShowable()"
                        [data]="healthData"
                        [isBytesData]="false"
                        chartType="pie"
                        [displayLegend]="true"
                        (prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
         </cd-health-pie>
-        <span *ngIf="(healthData.client_perf.read_op_per_sec + healthData.client_perf.write_op_per_sec) <= 0">
+        <span *ngIf="!isClientReadWriteChartShowable()">
           N/A
         </span>
       </cd-info-card>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index bbbbe2b8ed09b57e014e416393716245127fc318..150aa22fa2354619861f1a4e46f3895bf3b036fd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -246,4 +246,34 @@ describe('HealthComponent', () => {
       expect(chart).toEqual(expectedChart([1, 2, 3, 4]));
     });
   });
+
+  describe('isClientReadWriteChartShowable', () => {
+    beforeEach(() => {
+      component.healthData = healthPayload;
+    });
+
+    it('returns false', () => {
+      component.healthData['client_perf'] = {};
+
+      expect(component.isClientReadWriteChartShowable()).toBeFalsy();
+    });
+
+    it('returns false', () => {
+      component.healthData['client_perf'] = { read_op_per_sec: undefined, write_op_per_sec: 0 };
+
+      expect(component.isClientReadWriteChartShowable()).toBeFalsy();
+    });
+
+    it('returns true', () => {
+      component.healthData['client_perf'] = { read_op_per_sec: 1, write_op_per_sec: undefined };
+
+      expect(component.isClientReadWriteChartShowable()).toBeTruthy();
+    });
+
+    it('returns true', () => {
+      component.healthData['client_perf'] = { read_op_per_sec: 2, write_op_per_sec: 3 };
+
+      expect(component.isClientReadWriteChartShowable()).toBeTruthy();
+    });
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index bb78e22efa390c071d83dd74401a1e10f38eb3b2..ace2cfa182a903914acb4662f11ef8f5b8294045 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -110,4 +110,11 @@ export class HealthComponent implements OnInit, OnDestroy {
       .getAllTypes()
       .map((categoryType) => categoryPgAmount[categoryType]);
   }
+
+  isClientReadWriteChartShowable() {
+    const readOps = this.healthData.client_perf.read_op_per_sec || 0;
+    const writeOps = this.healthData.client_perf.write_op_per_sec || 0;
+
+    return readOps + writeOps > 0;
+  }
 }