mgr/dashboard_v2: improve tooltip of cephfsChart

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
index 23aaa35476552570443c0f15f2d02094b51a3e18..62a023b9aaf4930d1ecd05a15baf54d6edafa2f6 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
@@ -1,6 +1,6 @@
+@import '../../../../styles/chart-tooltip.scss';
+
 .chart-container {
-  position: relative;
-  margin: auto;
   height: 500px;
   width: 100%;
 }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
index fb4a394a77d4c328a6ae51ed30e61d2ef9a73223..cca1ae2feb92166ec7f25825141e1406bda3430e 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
@@ -1,6 +1,9 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
 
 import * as _ from 'lodash';
+import * as moment from 'moment';
+
+import { ChartTooltip } from '../../../shared/models/chart-tooltip';
 
 @Component({
   selector: 'cd-cephfs-chart',
@@ -8,6 +11,9 @@ import * as _ from 'lodash';
   styleUrls: ['./cephfs-chart.component.scss']
 })
 export class CephfsChartComponent implements OnChanges, OnInit {
+  @ViewChild('chartCanvas') chartCanvas: ElementRef;
+  @ViewChild('chartTooltip') chartTooltip: ElementRef;
+
   @Input() mdsCounter: any;
 
   lhsCounter = 'mds.inodes';
@@ -22,6 +28,27 @@ export class CephfsChartComponent implements OnChanges, OnInit {
       return;
     }
 
+    const getTitle = title => {
+      return moment(title).format('LTS');
+    };
+
+    const getStyleTop = tooltip => {
+      return tooltip.caretY - tooltip.height - 15 + 'px';
+    };
+
+    const getStyleLeft = tooltip => {
+      return tooltip.caretX + 'px';
+    };
+
+    const chartTooltip = new ChartTooltip(
+      this.chartCanvas,
+      this.chartTooltip,
+      getStyleLeft,
+      getStyleTop
+    );
+    chartTooltip.getTitle = getTitle;
+    chartTooltip.checkOffset = true;
+
     const lhsData = this.convert_timeseries(this.mdsCounter[this.lhsCounter]);
     const rhsData = this.delta_timeseries(this.mdsCounter[this.rhsCounter]);
 
@@ -72,6 +99,15 @@ export class CephfsChartComponent implements OnChanges, OnInit {
               min: 0
             }
           ]
+        },
+        tooltips: {
+          enabled: false,
+          mode: 'index',
+          intersect: false,
+          position: 'nearest',
+          custom: tooltip => {
+            chartTooltip.customTooltips(tooltip);
+          }
         }
       },
       chartType: 'line'