From: alfonsomthd <almartin@redhat.com>
Date: Fri, 14 Dec 2018 11:43:57 +0000 (+0100)
Subject: mgr/dashboard: avoid blank content in Read/Write Card
X-Git-Tag: v14.1.0~595^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=b2402f4692c637abb2ef56e6b2c7201156f67594;p=ceph-ci.git

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 a5f9014bd75..cde3a60f940 100644
--- 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 bbbbe2b8ed0..150aa22fa23 100644
--- 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 bb78e22efa3..ace2cfa182a 100644
--- 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;
+  }
 }