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

   1 import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
   2
   3 import * as _ from 'lodash';
   4 import * as moment from 'moment';
   5
   6 import { ChartTooltip } from '../../../shared/models/chart-tooltip';
   7
   8 @Component({
   9   selector: 'cd-cephfs-chart',
  10   templateUrl: './cephfs-chart.component.html',
  11   styleUrls: ['./cephfs-chart.component.scss']
  12 })
  13 export class CephfsChartComponent implements OnChanges, OnInit {
  14   @ViewChild('chartCanvas')
  15   chartCanvas: ElementRef;
  16   @ViewChild('chartTooltip')
  17   chartTooltip: ElementRef;
  18
  19   @Input()
  20   mdsCounter: any;
  21
  22   lhsCounter = 'mds_mem.ino';
  23   rhsCounter = 'mds_server.handle_client_request';
  24
  25   chart: any;
  26
  27   constructor() {}
  28
  29   ngOnInit() {
  30     if (_.isUndefined(this.mdsCounter)) {
  31       return;
  32     }
  33
  34     const getTitle = (ts) => {
  35       return moment(ts, 'x').format('LTS');
  36     };
  37
  38     const getStyleTop = (tooltip) => {
  39       return tooltip.caretY - tooltip.height - 15 + 'px';
  40     };
  41
  42     const getStyleLeft = (tooltip) => {
  43       return tooltip.caretX + 'px';
  44     };
  45
  46     const chartTooltip = new ChartTooltip(
  47       this.chartCanvas,
  48       this.chartTooltip,
  49       getStyleLeft,
  50       getStyleTop
  51     );
  52     chartTooltip.getTitle = getTitle;
  53     chartTooltip.checkOffset = true;
  54
  55     const lhsData = this.convert_timeseries(this.mdsCounter[this.lhsCounter]);
  56     const rhsData = this.delta_timeseries(this.mdsCounter[this.rhsCounter]);
  57
  58     this.chart = {
  59       datasets: [
  60         {
  61           label: this.lhsCounter,
  62           yAxisID: 'LHS',
  63           data: lhsData,
  64           tension: 0.1
  65         },
  66         {
  67           label: this.rhsCounter,
  68           yAxisID: 'RHS',
  69           data: rhsData,
  70           tension: 0.1
  71         }
  72       ],
  73       options: {
  74         title: {
  75           text: this.mdsCounter.name,
  76           display: true
  77         },
  78         responsive: true,
  79         maintainAspectRatio: false,
  80         legend: {
  81           position: 'top'
  82         },
  83         scales: {
  84           xAxes: [
  85             {
  86               position: 'top',
  87               type: 'time',
  88               time: {
  89                 displayFormats: {
  90                   quarter: 'MMM YYYY'
  91                 }
  92               },
  93               ticks: {
  94                 maxRotation: 0
  95               }
  96             }
  97           ],
  98           yAxes: [
  99             {
 100               id: 'LHS',
 101               type: 'linear',
 102               position: 'left',
 103               min: 0
 104             },
 105             {
 106               id: 'RHS',
 107               type: 'linear',
 108               position: 'right',
 109               min: 0
 110             }
 111           ]
 112         },
 113         tooltips: {
 114           enabled: false,
 115           mode: 'index',
 116           intersect: false,
 117           position: 'nearest',
 118           callbacks: {
 119             // Pick the Unix timestamp of the first tooltip item.
 120             title: function(tooltipItems, data) {
 121               let ts = 0;
 122               if (tooltipItems.length > 0) {
 123                 const item = tooltipItems[0];
 124                 ts = data.datasets[item.datasetIndex].data[item.index].x;
 125               }
 126               return ts;
 127             }
 128           },
 129           custom: (tooltip) => {
 130             chartTooltip.customTooltips(tooltip);
 131           }
 132         }
 133       },
 134       chartType: 'line'
 135     };
 136   }
 137
 138   ngOnChanges() {
 139     if (!this.chart) {
 140       return;
 141     }
 142
 143     const lhsData = this.convert_timeseries(this.mdsCounter[this.lhsCounter]);
 144     const rhsData = this.delta_timeseries(this.mdsCounter[this.rhsCounter]);
 145
 146     this.chart.datasets[0].data = lhsData;
 147     this.chart.datasets[1].data = rhsData;
 148   }
 149
 150   // Convert ceph-mgr's time series format (list of 2-tuples
 151   // with seconds-since-epoch timestamps) into what chart.js
 152   // can handle (list of objects with millisecs-since-epoch
 153   // timestamps)
 154   convert_timeseries(sourceSeries) {
 155     const data = [];
 156     _.each(sourceSeries, (dp) => {
 157       data.push({
 158         x: dp[0] * 1000,
 159         y: dp[1]
 160       });
 161     });
 162
 163     return data;
 164   }
 165
 166   delta_timeseries(sourceSeries) {
 167     let i;
 168     let prev = sourceSeries[0];
 169     const result = [];
 170     for (i = 1; i < sourceSeries.length; i++) {
 171       const cur = sourceSeries[i];
 172       const tdelta = cur[0] - prev[0];
 173       const vdelta = cur[1] - prev[1];
 174       const rate = vdelta / tdelta;
 175
 176       result.push({
 177         x: cur[0] * 1000,
 178         y: rate
 179       });
 180
 181       prev = cur;
 182     }
 183     return result;
 184   }
 185 }