1 import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
3 import { ChartDataSets, ChartOptions, ChartPoint, ChartType } from 'chart.js';
4 import * as _ from 'lodash';
5 import * as moment from 'moment';
7 import { ChartTooltip } from '../../../shared/models/chart-tooltip';
10 selector: 'cd-cephfs-chart',
11 templateUrl: './cephfs-chart.component.html',
12 styleUrls: ['./cephfs-chart.component.scss']
14 export class CephfsChartComponent implements OnChanges, OnInit {
15 @ViewChild('chartCanvas', { static: true })
16 chartCanvas: ElementRef;
17 @ViewChild('chartTooltip', { static: true })
18 chartTooltip: ElementRef;
23 lhsCounter = 'mds_mem.ino';
24 rhsCounter = 'mds_server.handle_client_request';
27 datasets: ChartDataSets[];
28 options: ChartOptions;
33 label: this.lhsCounter,
39 label: this.rhsCounter,
51 maintainAspectRatio: false,
89 // Pick the Unix timestamp of the first tooltip item.
90 title: (tooltipItems, data): string => {
92 if (tooltipItems.length > 0) {
93 const item = tooltipItems[0];
94 const point = data.datasets[item.datasetIndex].data[item.index] as ChartPoint;
95 ts = point.x as number;
108 if (_.isUndefined(this.mdsCounter)) {
111 this.setChartTooltip();
116 if (_.isUndefined(this.mdsCounter)) {
122 private setChartTooltip() {
123 const chartTooltip = new ChartTooltip(
126 (tooltip: any) => tooltip.caretX + 'px',
127 (tooltip: any) => tooltip.caretY - tooltip.height - 23 + 'px'
129 chartTooltip.getTitle = (ts) => moment(ts, 'x').format('LTS');
130 chartTooltip.checkOffset = true;
131 const chartOptions: ChartOptions = {
133 text: this.mdsCounter.name
136 custom: (tooltip) => chartTooltip.customTooltips(tooltip)
139 _.merge(this.chart, { options: chartOptions });
142 private updateChart() {
143 const chartDataSets: ChartDataSets[] = [
145 data: this.convertTimeSeries(this.mdsCounter[this.lhsCounter])
148 data: this.deltaTimeSeries(this.mdsCounter[this.rhsCounter])
151 _.merge(this.chart, {
152 datasets: chartDataSets
154 this.chart.datasets = [...this.chart.datasets]; // Force angular to update
158 * Convert ceph-mgr's time series format (list of 2-tuples
159 * with seconds-since-epoch timestamps) into what chart.js
160 * can handle (list of objects with millisecs-since-epoch
163 private convertTimeSeries(sourceSeries: any) {
164 const data: any[] = [];
165 _.each(sourceSeries, (dp) => {
173 * MDS performance counters chart is expecting the same number of items
174 * from each data series. Since in deltaTimeSeries we are ignoring the first
175 * element, we will do the same here.
182 private deltaTimeSeries(sourceSeries: any) {
184 let prev = sourceSeries[0];
186 for (i = 1; i < sourceSeries.length; i++) {
187 const cur = sourceSeries[i];