Merge pull request ceph#53582 from rhcs-dashboard/chartjs-upgrade

mgr/dashboard: chartjs and ng2-charts version upgrade

Reviewed-by: Nizamudeen A <[email protected]>

Author: aaSharma14

src/pybind/mgr/dashboard/frontend/angular.json

@@ -99,9 +99,6 @@
               "node_modules/ngx-toastr/toastr.css",
               "src/styles.scss"
             ],
-            "scripts": [
-              "node_modules/chart.js/dist/Chart.bundle.js"
-            ],
             "stylePreprocessorOptions": {
               "includePaths": [
                 "src"

src/pybind/mgr/dashboard/frontend/package-lock.json

@@ -62,15 +62,16 @@
     "@types/file-saver": "2.0.1",
     "async-mutex": "0.2.4",
     "bootstrap": "5.2.3",
-    "chart.js": "2.9.4",
+    "chart.js": "4.4.0",
+    "chartjs-adapter-moment": "1.0.1",
     "detect-browser": "5.2.0",
     "file-saver": "2.0.2",
     "fork-awesome": "1.1.7",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "ng-block-ui": "3.0.2",
     "ng-click-outside": "7.0.0",
-    "ng2-charts": "2.4.2",
+    "ng2-charts": "4.1.1",
     "ngx-pipe-function": "1.0.0",
     "ngx-toastr": "17.0.2",
     "rxjs": "6.6.3",

src/pybind/mgr/dashboard/frontend/package.json

@@ -5,7 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { RbdConfigurationEntry } from '~/app/shared/models/configuration';
@@ -27,7 +27,7 @@ describe('RbdConfigurationListComponent', () => {
       RouterTestingModule,
       ComponentsModule,
       NgbDropdownModule,
-      ChartsModule,
+      NgChartsModule,
       SharedModule,
       NgbTooltipModule
     ],

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts

@@ -3,7 +3,7 @@
           #chartCanvas
           [datasets]="chart.datasets"
           [options]="chart.options"
-          [chartType]="chart.chartType">
+          [type]="chart.chartType">
   </canvas>
   <div class="chartjs-tooltip"
        #chartTooltip>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.html

@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { CephfsChartComponent } from './cephfs-chart.component';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 
 describe('CephfsChartComponent', () => {
   let component: CephfsChartComponent;
@@ -17,7 +18,7 @@ describe('CephfsChartComponent', () => {
   ];
 
   configureTestBed({
-    imports: [ChartsModule],
+    imports: [NgChartsModule],
     declarations: [CephfsChartComponent]
   });
 
@@ -29,6 +30,9 @@ describe('CephfsChartComponent', () => {
       'mds_mem.ino': counter,
       name: 'a'
     };
+    if (typeof window !== 'undefined') {
+      window.ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+    }
     fixture.detectChanges();
   });
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.spec.ts

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
 
-import { ChartDataSets, ChartOptions, ChartPoint, ChartType } from 'chart.js';
 import _ from 'lodash';
 import moment from 'moment';
+import 'chartjs-adapter-moment';
 
 import { ChartTooltip } from '~/app/shared/models/chart-tooltip';
 
@@ -24,78 +24,78 @@ export class CephfsChartComponent implements OnChanges, OnInit {
   rhsCounter = 'mds_server.handle_client_request';
 
   chart: {
-    datasets: ChartDataSets[];
-    options: ChartOptions;
-    chartType: ChartType;
+    datasets: any[];
+    options: any;
+    chartType: any;
   } = {
     datasets: [
       {
         label: this.lhsCounter,
         yAxisID: 'LHS',
         data: [],
-        lineTension: 0.1
+        tension: 0.1,
+        fill: {
+          target: 'origin'
+        }
       },
       {
         label: this.rhsCounter,
         yAxisID: 'RHS',
         data: [],
-        lineTension: 0.1
+        tension: 0.1,
+        fill: {
+          target: 'origin'
+        }
       }
     ],
     options: {
-      title: {
-        text: '',
-        display: true
+      plugins: {
+        title: {
+          text: '',
+          display: true
+        },
+        tooltip: {
+          enabled: false,
+          mode: 'index',
+          intersect: false,
+          position: 'nearest',
+          callbacks: {
+            // Pick the Unix timestamp of the first tooltip item.
+            title: (context: any): string => {
+              let ts = '';
+              if (context.length > 0) {
+                ts = context[0].label;
+              }
+              return moment(ts).format('LTS');
+            }
+          }
+        },
+        legend: {
+          position: 'top'
+        }
       },
       responsive: true,
       maintainAspectRatio: false,
-      legend: {
-        position: 'top'
-      },
       scales: {
-        xAxes: [
-          {
-            position: 'top',
-            type: 'time',
-            time: {
-              displayFormats: {
-                quarter: 'MMM YYYY'
-              }
-            },
-            ticks: {
-              maxRotation: 0
+        x: {
+          position: 'top',
+          type: 'time',
+          time: {
+            displayFormats: {
+              quarter: 'MMM YYYY'
             }
-          }
-        ],
-        yAxes: [
-          {
-            id: 'LHS',
-            type: 'linear',
-            position: 'left'
           },
-          {
-            id: 'RHS',
-            type: 'linear',
-            position: 'right'
-          }
-        ]
-      },
-      tooltips: {
-        enabled: false,
-        mode: 'index',
-        intersect: false,
-        position: 'nearest',
-        callbacks: {
-          // Pick the Unix timestamp of the first tooltip item.
-          title: (tooltipItems, data): string => {
-            let ts = 0;
-            if (tooltipItems.length > 0) {
-              const item = tooltipItems[0];
-              const point = data.datasets[item.datasetIndex].data[item.index] as ChartPoint;
-              ts = point.x as number;
-            }
-            return ts.toString();
+          ticks: {
+            maxRotation: 0
           }
+        },
+        LHS: {
+          type: 'linear',
+          position: 'left'
+        },
+        RHS: {
+          type: 'linear',
+          position: 'right'
         }
       }
     },
@@ -124,21 +124,20 @@ export class CephfsChartComponent implements OnChanges, OnInit {
       (tooltip: any) => tooltip.caretX + 'px',
       (tooltip: any) => tooltip.caretY - tooltip.height - 23 + 'px'
     );
-    chartTooltip.getTitle = (ts) => moment(ts, 'x').format('LTS');
     chartTooltip.checkOffset = true;
-    const chartOptions: ChartOptions = {
+    const chartOptions: any = {
       title: {
         text: this.mdsCounter.name
       },
-      tooltips: {
-        custom: (tooltip) => chartTooltip.customTooltips(tooltip)
+      tooltip: {
+        external: (context: any) => chartTooltip.customTooltips(context)
       }
     };
-    _.merge(this.chart, { options: chartOptions });
+    _.merge(this.chart, { options: { plugins: chartOptions } });
   }
 
   private updateChart() {
-    const chartDataSets: ChartDataSets[] = [
+    const chartDataset: any[] = [
       {
         data: this.convertTimeSeries(this.mdsCounter[this.lhsCounter])
       },
@@ -147,7 +146,7 @@ export class CephfsChartComponent implements OnChanges, OnInit {
       }
     ];
     _.merge(this.chart, {
-      datasets: chartDataSets
+      datasets: chartDataset
     });
     this.chart.datasets = [...this.chart.datasets]; // Force angular to update
   }