[APM] Pagination of top 10 trace samples

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/__test__/distribution.test.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getFormattedBuckets } from '../index';
+import { IBucket } from '../../../../../../server/lib/transactions/distribution/get_buckets/transform';
+
+describe('Distribution', () => {
+  it('getFormattedBuckets', () => {
+    const buckets = [
+      { key: 0, count: 0, samples: [] },
+      { key: 20, count: 0, samples: [] },
+      { key: 40, count: 0, samples: [] },
+      {
+        key: 60,
+        count: 5,
+        samples: [
+          {
+            transactionId: 'someTransactionId'
+          }
+        ]
+      },
+      {
+        key: 80,
+        count: 100,
+        samples: [
+          {
+            transactionId: 'anotherTransactionId'
+          }
+        ]
+      }
+    ] as IBucket[];
+    expect(getFormattedBuckets(buckets, 20)).toEqual([
+      { x: 20, x0: 0, y: 0, style: { cursor: 'default' }, samples: [] },
+      { x: 40, x0: 20, y: 0, style: { cursor: 'default' }, samples: [] },
+      { x: 60, x0: 40, y: 0, style: { cursor: 'default' }, samples: [] },
+      {
+        x: 80,
+        x0: 60,
+        y: 5,
+        style: { cursor: 'pointer' },
+        samples: [
+          {
+            transactionId: 'someTransactionId'
+          }
+        ]
+      },
+      {
+        x: 100,
+        x0: 80,
+        y: 100,
+        style: { cursor: 'pointer' },
+        samples: [
+          {
+            transactionId: 'anotherTransactionId'
+          }
+        ]
+      }
+    ]);
+  });
+});

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -8,6 +8,7 @@ import { EuiIconTip, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import d3 from 'd3';
 import React, { FunctionComponent, useCallback } from 'react';
+import { isEmpty } from 'lodash';
 import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
 import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
@@ -20,7 +21,7 @@ import { history } from '../../../../utils/history';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
 
 interface IChartPoint {
-  sample?: IBucket['sample'];
+  samples: IBucket['samples'];
   x0: number;
   x: number;
   y: number;
@@ -35,13 +36,15 @@ export function getFormattedBuckets(buckets: IBucket[], bucketSize: number) {
   }
 
   return buckets.map(
-    ({ sample, count, key }): IChartPoint => {
+    ({ samples, count, key }): IChartPoint => {
       return {
-        sample,
+        samples,
         x0: key,
         x: key + bucketSize,
         y: count,
-        style: { cursor: count > 0 && sample ? 'pointer' : 'default' }
+        style: {
+          cursor: isEmpty(samples) ? 'default' : 'pointer'
+        }
       };
     }
   );
@@ -91,15 +94,17 @@ interface Props {
   distribution?: TransactionDistributionAPIResponse;
   urlParams: IUrlParams;
   isLoading: boolean;
+  bucketIndex: number;
 }
 
 export const TransactionDistribution: FunctionComponent<Props> = (
   props: Props
 ) => {
   const {
     distribution,
-    urlParams: { transactionId, traceId, transactionType },
-    isLoading
+    urlParams: { transactionType },
+    isLoading,
+    bucketIndex
   } = props;
 
   const formatYShort = useCallback(getFormatYShort(transactionType), [
@@ -134,13 +139,6 @@ export const TransactionDistribution: FunctionComponent<Props> = (
   const xMax = d3.max(buckets, d => d.x) || 0;
   const timeFormatter = getDurationFormatter(xMax);
 
-  const bucketIndex = buckets.findIndex(
-    bucket =>
-      bucket.sample != null &&
-      bucket.sample.transactionId === transactionId &&
-      bucket.sample.traceId === traceId
-  );
-
   return (
     <div>
       <EuiTitle size="xs">
@@ -175,31 +173,30 @@ export const TransactionDistribution: FunctionComponent<Props> = (
         bucketSize={distribution.bucketSize}
         bucketIndex={bucketIndex}
         onClick={(bucket: IChartPoint) => {
-          if (bucket.sample && bucket.y > 0) {
+          if (!isEmpty(bucket.samples)) {
+            const sample = bucket.samples[0];
             history.push({
               ...history.location,
               search: fromQuery({
                 ...toQuery(history.location.search),
-                transactionId: bucket.sample.transactionId,
-                traceId: bucket.sample.traceId
+                transactionId: sample.transactionId,
+                traceId: sample.traceId
               })
             });
           }
         }}
         formatX={(time: number) => timeFormatter(time).formatted}
         formatYShort={formatYShort}
         formatYLong={formatYLong}
-        verticalLineHover={(bucket: IChartPoint) =>
-          bucket.y > 0 && !bucket.sample
-        }
-        backgroundHover={(bucket: IChartPoint) => bucket.y > 0 && bucket.sample}
+        verticalLineHover={(bucket: IChartPoint) => isEmpty(bucket.samples)}
+        backgroundHover={(bucket: IChartPoint) => !isEmpty(bucket.samples)}
         tooltipHeader={(bucket: IChartPoint) => {
           const xFormatted = timeFormatter(bucket.x);
           const x0Formatted = timeFormatter(bucket.x0);
           return `${x0Formatted.value} - ${xFormatted.value} ${xFormatted.unit}`;
         }}
         tooltipFooter={(bucket: IChartPoint) =>
-          !bucket.sample &&
+          isEmpty(bucket.samples) &&
           i18n.translate(
             'xpack.apm.transactionDetails.transactionsDurationDistributionChart.noSampleTooltip',
             {

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiButton, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { Transaction as ITransaction } from '../../../../../typings/es_schemas/ui/Transaction';
+import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+
+export const MaybeViewTraceLink = ({
+  transaction,
+  waterfall
+}: {
+  transaction: ITransaction;
+  waterfall: IWaterfall;
+}) => {
+  const viewFullTraceButtonLabel = i18n.translate(
+    'xpack.apm.transactionDetails.viewFullTraceButtonLabel',
+    {
+      defaultMessage: 'View full trace'
+    }
+  );
+
+  // the traceroot cannot be found, so we cannot link to it
+  if (!waterfall.traceRoot) {
+    return (
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          content={i18n.translate(
+            'xpack.apm.transactionDetails.noTraceParentButtonTooltip',
+            {
+              defaultMessage: 'The trace parent cannot be found'
+            }
+          )}
+        >
+          <EuiButton iconType="apmTrace" disabled={true}>
+            {viewFullTraceButtonLabel}
+          </EuiButton>
+        </EuiToolTip>
+      </EuiFlexItem>
+    );
+  }
+
+  const isRoot =
+    transaction.transaction.id === waterfall.traceRoot.transaction.id;
+
+  // the user is already viewing the full trace, so don't link to it
+  if (isRoot) {
+    return (
+      <EuiFlexItem grow={false}>
+        <EuiToolTip
+          content={i18n.translate(
+            'xpack.apm.transactionDetails.viewingFullTraceButtonTooltip',
+            {
+              defaultMessage: 'Currently viewing the full trace'
+            }
+          )}
+        >
+          <EuiButton iconType="apmTrace" disabled={true}>
+            {viewFullTraceButtonLabel}
+          </EuiButton>
+        </EuiToolTip>
+      </EuiFlexItem>
+    );
+
+    // the user is viewing a zoomed in version of the trace. Link to the full trace
+  } else {
+    const traceRoot = waterfall.traceRoot;
+    return (
+      <EuiFlexItem grow={false}>
+        <TransactionDetailLink
+          serviceName={traceRoot.service.name}
+          transactionId={traceRoot.transaction.id}
+          traceId={traceRoot.trace.id}
+          transactionName={traceRoot.transaction.name}
+          transactionType={traceRoot.transaction.type}
+        >
+          <EuiButton iconType="apmTrace">{viewFullTraceButtonLabel}</EuiButton>
+        </TransactionDetailLink>
+      </EuiFlexItem>
+    );
+  }
+};