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>

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 8a267b4782aa8587ee25dd2f99fee78aa0a274d4..8f61791f225e48ee49aabafd7fcbdd49c724d80f 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
@@ -181,8 +181,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: [],
@@ -196,14 +196,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]
@@ -218,7 +218,7 @@ export class DashboardAreaChartComponent implements OnChanges {
           ).split(' ');
           this.currentChartData.dataset[index]['currentDataValue'] = currentDataValue;
         }
-      }
+      });
       this.currentChartData.dataset.sort(
         (a: { currentDataValue: string }, b: { currentDataValue: string }) =>
           parseFloat(b['currentDataValue']) - parseFloat(a['currentDataValue'])
@@ -298,11 +298,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;