Instances latency distribution chart tooltips

Fixes elastic#88852
smith · Mar 26, 2021 · 6c9da36 · 6c9da36
1 parent d89ede9
commit 6c9da36
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 11 deletions.
diff --git a/...apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/...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/...lugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/...lugins/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/...rts/instances_latency_distribution_chart/instances_latency_distribution_chart.stories.tsx b/...rts/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;