mgr/dashboard: dashboard area chart unit test

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.spec.ts
index 0501ac75dde6c77482f301f9c66bd10dfe9f36ff..ec71070544fa3fa6ceeb8673a29eb9dd2d7d87f6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.spec.ts
@@ -1,4 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CssHelper } from '~/app/shared/classes/css-helper';
@@ -28,9 +28,65 @@ describe('DashboardAreaChartComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DashboardAreaChartComponent);
     component = fixture.componentInstance;
+    component.data = [
+      [1, '110'],
+      [3, '130']
+    ];
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have a chart', () => {
+    const chartElement = fixture.debugElement.nativeElement.querySelector('canvas');
+    expect(chartElement).toBeTruthy();
+  });
+
+  it('should have two datasets', () => {
+    component.data2 = [
+      [2, '120'],
+      [4, '140']
+    ];
+    expect(component.chartData.dataset[0].data).toBeDefined();
+    expect(component.chartData.dataset[1].data).toBeDefined();
+  });
+
+  it('should set label', () => {
+    component.label = 'Write';
+    expect(component.label).toBe('Write');
+  });
+
+  it('should transform and update data', () => {
+    expect(component.chartData.dataset[0].data).toEqual([{ x: 0, y: 0 }]);
+
+    component.ngOnChanges({ data: new SimpleChange(null, component.data, false) });
+
+    expect(component.chartData.dataset[0].data).toEqual([
+      { x: 1000, y: 110 },
+      { x: 3000, y: 130 }
+    ]);
+  });
+
+  it('should set currentData to last value', () => {
+    component.ngOnChanges({ data: new SimpleChange(null, component.data, false) });
+    expect(component.currentData).toBe('130');
+  });
+
+  it('should keep data units consistency', () => {
+    // Timeout to be able to access chart object
+    setTimeout(() => {
+      fixture.detectChanges();
+
+      component.data = [
+        [1, '1100'],
+        [3, '1300']
+      ];
+      component.dataUnits = 'B';
+      component.ngOnChanges({ data: new SimpleChange(null, component.data, false) });
+
+      expect(component.currentDataUnits).toBe('KiB');
+      expect(component.chartDataUnits).toBe('KiB');
+    }, 1000);
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
index 57713aeb3f71fb313d255adadf579e3036c7d1e3..cbf97691d27dc803a3beb591c316e880da6979a6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 
 import { CssHelper } from '~/app/shared/classes/css-helper';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
@@ -14,7 +14,7 @@ import 'chartjs-adapter-moment';
   templateUrl: './dashboard-area-chart.component.html',
   styleUrls: ['./dashboard-area-chart.component.scss']
 })
-export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
+export class DashboardAreaChartComponent implements OnChanges {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective;
 
   @Input()
@@ -175,19 +175,16 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
     };
   }
 
-  ngOnChanges(): void {
-    this.updateChartData();
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateChartData(changes);
   }
 
-  ngAfterViewInit(): void {
-    this.updateChartData();
-  }
-
-  private updateChartData(): void {
+  private updateChartData(changes: SimpleChanges): void {
     this.chartData.dataset[0].label = this.label;
     this.chartData.dataset[1].label = this.label2;
     this.setChartTicks();
-    if (this.data) {
+    if (changes.data && changes.data.currentValue) {
+      this.data = changes.data.currentValue;
       this.chartData.dataset[0].data = this.formatData(this.data);
       [this.currentData, this.currentDataUnits] = this.convertUnits(
         this.data[this.data.length - 1][1]
@@ -196,7 +193,8 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
         this.maxValue
       ).split(' ');
     }
-    if (this.data2) {
+    if (changes.data2 && changes.data2.currentValue) {
+      this.data2 = changes.data2.currentValue;
       this.chartData.dataset[1].data = this.formatData(this.data2);
       [this.currentData2, this.currentDataUnits2] = this.convertUnits(
         this.data2[this.data2.length - 1][1]

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
index b5e0b9475a44533830fd71ec69d49886434074cf..c1ad14b474231ad6f32aaff578239d91eae176a3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
@@ -40,7 +40,7 @@ export class FormatterService {
    */
   formatNumberFromTo(
     n: any,
-    units: any,
+    units: string = '',
     targetedUnits: string = '',
     conversionFactor: number,
     unitsArray: string[],
@@ -52,6 +52,9 @@ export class FormatterService {
     if (!_.isNumber(n)) {
       return '-';
     }
+    if (!unitsArray) {
+      return '-';
+    }
     const unitsArrayLowerCase = unitsArray.map((str) => str.toLowerCase());
     if (
       !unitsArrayLowerCase.includes(units.toLowerCase()) ||