From 6c9da3630bea709caee168d894042fd4f2ae95c0 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 26 Mar 2021 14:10:43 -0500
Subject: [PATCH] Instances latency distribution chart tooltips

Fixes #88852
---
 ...ice_overview_instances_chart_and_table.tsx | 12 +---
 .../index.tsx                                 | 19 +++++-
 ...ces_latency_distribution_chart.stories.tsx | 63 +++++++++++++++++++
 3 files changed, 83 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx

diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
index c10ec1052f2a22..0bf42548a183c0 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
@@ -12,19 +12,13 @@ import uuid from 'uuid';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { InstancesLatencyDistributionChart } from '../../shared/charts/instances_latency_distribution_chart';
 import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import {
   ServiceOverviewInstancesTable,
   TableOptions,
 } from './service_overview_instances_table';
 
-// We're hiding this chart until these issues are resolved in the 7.13 timeframe:
-//
-// * [[APM] Tooltips for instances latency distribution chart](https://github.com/elastic/kibana/issues/88852)
-// * [[APM] x-axis on the instance bubble chart is broken](https://github.com/elastic/kibana/issues/92631)
-//
-// import { InstancesLatencyDistributionChart } from '../../shared/charts/instances_latency_distribution_chart';
-
 interface ServiceOverviewInstancesChartAndTableProps {
   chartHeight: number;
   serviceName: string;
@@ -203,13 +197,13 @@ export function ServiceOverviewInstancesChartAndTable({
 
   return (
     <>
-      {/* <EuiFlexItem grow={3}>
+      <EuiFlexItem grow={3}>
         <InstancesLatencyDistributionChart
           height={chartHeight}
           items={data.items}
           status={status}
         />
-      </EuiFlexItem> */}
+      </EuiFlexItem>
       <EuiFlexItem grow={7}>
         <EuiPanel>
           <ServiceOverviewInstancesTable
diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
index 5f24c1ee2495b8..68faf54eaf71a7 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@@ -12,6 +12,8 @@ import {
   Position,
   ScaleType,
   Settings,
+  TooltipProps,
+  TooltipType,
 } from '@elastic/charts';
 import { EuiPanel, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -27,7 +29,7 @@ import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { ChartContainer } from '../chart_container';
 import { getResponseTimeTickFormatter } from '../transaction_charts/helper';
 
-interface InstancesLatencyDistributionChartProps {
+export interface InstancesLatencyDistributionChartProps {
   height: number;
   items?: APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/primary_statistics'>;
   status: FETCH_STATUS;
@@ -48,6 +50,19 @@ export function InstancesLatencyDistributionChart({
     },
   };
 
+  const tooltip: TooltipProps = {
+    type: TooltipType.Follow,
+    snap: false,
+    // TODO: Tooltips!
+    // headerFormatter: (args) => {
+    //   console.log('headerFormatter', args);
+    //   return <>hi</>;
+    // },
+    // customTooltip: (args) => {
+    //   console.log('customTooltip', args);
+    //   return <>hi</>;
+    // },
+  };
   const maxLatency = Math.max(...items.map((item) => item.latency ?? 0));
   const latencyFormatter = getDurationFormatter(maxLatency);
 
@@ -64,7 +79,7 @@ export function InstancesLatencyDistributionChart({
         <Chart id="instances-latency-distribution">
           <Settings
             legendPosition={Position.Bottom}
-            tooltip="none"
+            tooltip={tooltip}
             showLegend
             theme={chartTheme}
           />
diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx
new file mode 100644
index 00000000000000..780e5a117002e4
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ComponentType } from 'react';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
+import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
+import {
+  InstancesLatencyDistributionChart,
+  InstancesLatencyDistributionChartProps,
+} from './';
+
+export default {
+  title: 'shared/charts/InstancesLatencyDistributionChart',
+  component: InstancesLatencyDistributionChart,
+  argTypes: {
+    items: {
+      control: { type: 'object' },
+    },
+  },
+  decorators: [
+    (Story: ComponentType) => (
+      <EuiThemeProvider>
+        <Story />
+      </EuiThemeProvider>
+    ),
+  ],
+};
+
+export function Example({ items }: InstancesLatencyDistributionChartProps) {
+  return (
+    <InstancesLatencyDistributionChart
+      height={300}
+      items={items}
+      status={FETCH_STATUS.SUCCESS}
+    />
+  );
+}
+Example.args = {
+  items: [
+    {
+      serviceNodeName:
+        '2f3221afa3f00d3bc07069d69efd5bd4c1607be6155a204551c8fe2e2b5dd750',
+      latency: 1130156.5424836602,
+      throughput: 9.71285705065604,
+    },
+    {
+      serviceNodeName:
+        '2f3221afa3f00d3bc07069d69efd5bd4c1607be6155a204551c8fe2e2b5dd750 (2)',
+      latency: 1130156.5424836602,
+      throughput: 9.71285705065604,
+    },
+    {
+      serviceNodeName:
+        '3b50ad269c45be69088905c4b355cc75ab94aaac1b35432bb752050438f4216f',
+      latency: 10975.761538461538,
+      throughput: 8.252754356766571,
+    },
+  ],
+} as InstancesLatencyDistributionChartProps;