mgr/dashboard: Dashboard not showing Object/Overview correctly.

Add undefined checks wherever necessary to the updateChartData method in
dashboard-area-chart component

Fixes: https://tracker.ceph.com/issues/67009
Signed-off-by: Aashish Sharma <aasharma@redhat.com>
(cherry picked from commit f4b3943fb2e7e16835193b48b94d32d9eb575ecf)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts

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 ac0b9ac2ff431d6fcb7b52899846efdccc5d4e59..fc2fe7eeb23efeed794ca3ffe01f86f25ee7c1b0 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
@@ -177,8 +177,8 @@ export class DashboardAreaChartComponent implements OnChanges {
   }
 
   private updateChartData(changes: SimpleChanges): void {
-    for (let index = 0; index < this.labelsArray.length; index++) {
-      const colorIndex = index % this.chartColors.length;
+    this.labelsArray.forEach((_label: string, index: number) => {
+      const colorIndex = index % this.chartColors?.length;
       this.chartData.dataset[index] = {
         label: '',
         data: [],
@@ -192,14 +192,14 @@ export class DashboardAreaChartComponent implements OnChanges {
         }
       };
       this.chartData.dataset[index].label = this.labelsArray[index];
-    }
+    });
 
     this.setChartTicks();
 
-    if (this.dataArray && this.dataArray.length && this.dataArray[0] && this.dataArray[0].length) {
+    if (this.dataArray?.[0]?.length) {
       this.dataArray = changes?.dataArray?.currentValue || this.dataArray;
       this.currentChartData = this.chartData;
-      for (let index = 0; index < this.dataArray.length; index++) {
+      this.dataArray?.forEach((_data: Array<[number, string]>, index: number) => {
         this.chartData.dataset[index].data = this.formatData(this.dataArray[index]);
         let currentDataValue = this.dataArray[index][this.dataArray[index].length - 1]
           ? this.dataArray[index][this.dataArray[index].length - 1][1]
@@ -213,7 +213,7 @@ export class DashboardAreaChartComponent implements OnChanges {
             this.maxValue
           ).split(' ');
         }
-      }
+      });
     }
 
     if (this.chart) {
@@ -289,11 +289,11 @@ export class DashboardAreaChartComponent implements OnChanges {
     let maxValue = 0;
     let maxValueDataUnits = '';
 
-    const allDataValues = this.dataArray.reduce((array: string[], data) => {
+    const allDataValues = this.dataArray?.reduce((array: string[], data) => {
       return array.concat(data?.map((values: [number, string]) => values[1]));
     }, []);
 
-    maxValue = Math.max(...allDataValues.map(Number));
+    maxValue = allDataValues ? Math.max(...allDataValues.map(Number)) : 0;
     [maxValue, maxValueDataUnits] = this.convertUnits(maxValue).split(' ');
 
     const yAxesTicks = this.chart.chart.options.scales.y;