From 7c1f7d37026d0bfdf4f29d948bc39e595d32c40c Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Tue, 6 Mar 2018 18:53:14 +0000
Subject: [PATCH] mgr/dashboard_v2: improve tooltip of cephfsChart

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../cephfs-chart/cephfs-chart.component.scss  |  4 +-
 .../cephfs-chart/cephfs-chart.component.ts    | 38 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

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 23aaa354765..62a023b9aaf 100644
--- 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 fb4a394a77d..cca1ae2feb9 100644
--- 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'
-- 
2.47.3