clicking and domain

elastic · Apr 1, 2021 · 3d1cf42 · 3d1cf42
1 parent 32bd146
commit 3d1cf42
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/...m/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx b/...m/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx
@@ -113,7 +113,7 @@ function MultipleInstanceCustomTooltip({
         const datum = (value.datum as unknown) as PrimaryStatsServiceInstanceItem;
         const { latency, serviceNodeName, throughput } = datum;
         return (
-          <div className="echTooltip__list">
+          <div className="echTooltip__list" key={serviceNodeName}>
             <div className="echTooltip__item">
               <div
                 className="echTooltip__item--backgroundColor"

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
@@ -9,6 +9,8 @@ import {
   Axis,
   BubbleSeries,
   Chart,
+  ElementClickListener,
+  GeometryValue,
   Position,
   ScaleType,
   Settings,
@@ -19,14 +21,17 @@ import {
 import { EuiPanel, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { useChartTheme } from '../../../../../../observability/public';
+import { SERVICE_NODE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import {
   asTransactionRate,
   getDurationFormatter,
 } from '../../../../../common/utils/formatters';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
 import { PrimaryStatsServiceInstanceItem } from '../../../app/service_overview/service_overview_instances_chart_and_table';
+import * as urlHelpers from '../../Links/url_helpers';
 import { ChartContainer } from '../chart_container';
 import { getResponseTimeTickFormatter } from '../transaction_charts/helper';
 import { CustomTooltip } from './custom_tooltip';
@@ -42,6 +47,7 @@ export function InstancesLatencyDistributionChart({
   items = [],
   status,
 }: InstancesLatencyDistributionChartProps) {
+  const history = useHistory();
   const hasData = items.length > 0;
 
   const theme = useTheme();
@@ -50,9 +56,6 @@ export function InstancesLatencyDistributionChart({
     bubbleSeriesStyle: {
       point: { strokeWidth: 0, fill: theme.eui.euiColorVis1, radius: 4 },
     },
-    // This additional padding makes it so items with small values don't look like
-    // zeroes right up against the origin.
-    chartPaddings: { top: 0, left: 10, right: 10, bottom: 10 },
   };
 
   const maxLatency = Math.max(...items.map((item) => item.latency ?? 0));
@@ -66,10 +69,34 @@ export function InstancesLatencyDistributionChart({
     ),
   };
 
-  // When we only have a single point, we want to use an ordinal scale instead
-  // of linear because an ordinal scale will place the point in the middle, while
-  // linear will place it at the origin.
-  const xScaleType = items.length === 1 ? ScaleType.Ordinal : ScaleType.Linear;
+  /**
+   * Handle click events on the items.
+   *
+   * Due to how we handle filtering by using the kuery bar, it's difficult to
+   * modify existing queries. If you have an existing query in the bar, this will
+   * wipe it out. This is ok for now, since we probably will be replacing this
+   * interaction with something nicer in a future release.
+   *
+   * The event object has an array two items for each point, one of which has
+   * the serviceNodeName, so we flatten the list and get the items we need to
+   * form a query.
+   */
+  const handleElementClick: ElementClickListener = (event) => {
+    const serviceNodeNamesQuery = event
+      .flat()
+      .flatMap((value) => (value as GeometryValue).datum?.serviceNodeName)
+      .filter((serviceNodeName) => !!serviceNodeName)
+      .map((serviceNodeName) => `${SERVICE_NODE_NAME}:"${serviceNodeName}"`)
+      .join(' OR ');
+
+    urlHelpers.push(history, { query: { kuery: serviceNodeNamesQuery } });
+  };
+
+  // With a linear scale, if all the instances have similar throughput (or if
+  // there's just a single instance) they'll show along the origin. Make sure
+  // the x-axis domain always starts at 0 and goes to double the max of the items
+  const maxThroughput = Math.max(...items.map((item) => item.throughput ?? 0));
+  const xDomain = { min: 0, max: maxThroughput };
 
   return (
     <EuiPanel>
@@ -84,9 +111,11 @@ export function InstancesLatencyDistributionChart({
         <Chart id="instances-latency-distribution">
           <Settings
             legendPosition={Position.Bottom}
+            onElementClick={handleElementClick}
             tooltip={tooltip}
             showLegend
             theme={chartTheme}
+            xDomain={xDomain}
           />
           <BubbleSeries
             color={theme.eui.euiColorVis1}
@@ -96,7 +125,7 @@ export function InstancesLatencyDistributionChart({
               { defaultMessage: 'Instances' }
             )}
             xAccessor={(item) => item.throughput}
-            xScaleType={xScaleType}
+            xScaleType={ScaleType.Linear}
             yAccessors={[(item) => item.latency]}
             yScaleType={ScaleType.Linear}
           />

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
@@ -74,7 +74,7 @@ Example.args = {
   ],
 } as InstancesLatencyDistributionChartProps;
 
-export function SingleInstance({
+export function SimilarThroughputInstances({
   items,
 }: InstancesLatencyDistributionChartProps) {
   return (
@@ -85,13 +85,24 @@ export function SingleInstance({
     />
   );
 }
-SingleInstance.args = {
+SimilarThroughputInstances.args = {
   items: [
     {
       serviceNodeName:
-        '2f3221afa3f00d3bc07069d69efd5bd4c1607be6155a204551c8fe2e2b5dd750',
-      latency: 1130156.5424836602,
-      throughput: 9.71285705065604,
+        '21e1c648bd73434a8a1bf6e849817930e8b43eacf73a5c39c30520ee3b79d8c0',
+      latency: 40713854.354498595,
+      throughput: 0.3261219384041683,
+    },
+    {
+      serviceNodeName:
+        'a1c99c8675372af4c74bb01cc48e75989faa6f010a4ccb027df1c410dde0c72c',
+      latency: 18565471.348388012,
+      throughput: 0.3261219384041683,
+    },
+    {
+      serviceNodeName: '_service_node_name_missing_',
+      latency: 20065471.348388012,
+      throughput: 0.3261219384041683,
     },
   ],
 } as InstancesLatencyDistributionChartProps;