refactoring

elastic · Dec 2, 2019 · b973951 · b973951
1 parent ca896ae
commit b973951
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git a/...istribution/__test__/distribution.test.js → ...istribution/__test__/distribution.test.ts b/...istribution/__test__/distribution.test.js → ...istribution/__test__/distribution.test.ts
@@ -5,6 +5,7 @@
  */
 
 import { getFormattedBuckets } from '../index';
+import { IBucket } from '../../../../../../server/lib/transactions/distribution/get_buckets/transform';
 
 describe('Distribution', () => {
  it('getFormattedBuckets', () => {
@@ -30,7 +31,7 @@ describe('Distribution', () => {
  }
  ]
  }
- ];
+ ] 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: [] },

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
@@ -43,7 +43,7 @@ export function getFormattedBuckets(buckets: IBucket[], bucketSize: number) {
  x: key + bucketSize,
  y: count,
  style: {
- cursor: count > 0 && !isEmpty(samples) ? 'pointer' : 'default'
+ cursor: isEmpty(samples) ? 'default' : 'pointer'
  }
  };
  }
@@ -94,17 +94,17 @@ interface Props {
  distribution?: TransactionDistributionAPIResponse;
  urlParams: IUrlParams;
  isLoading: boolean;
- onBucketSelected(index: number): void;
+ bucketIndex: number;
 }
 
 export const TransactionDistribution: FunctionComponent<Props> = (
  props: Props
 ) => {
  const {
  distribution,
- urlParams: { transactionId, traceId, transactionType },
+ urlParams: { transactionType },
  isLoading,
- onBucketSelected
+ bucketIndex
  } = props;
 
  const formatYShort = useCallback(getFormatYShort(transactionType), [
@@ -139,16 +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 => {
- const sampleFound = bucket.samples.findIndex(
- sample =>
- sample.transactionId === transactionId && sample.traceId === traceId
- );
- return sampleFound !== -1;
- });
-
- onBucketSelected(bucketIndex);
-
  return (
  <div>
  <EuiTitle size="xs">
@@ -183,7 +173,7 @@ export const TransactionDistribution: FunctionComponent<Props> = (
  bucketSize={distribution.bucketSize}
  bucketIndex={bucketIndex}
  onClick={(bucket: IChartPoint) => {
- if (!isEmpty(bucket.samples) && bucket.y > 0) {
+ if (!isEmpty(bucket.samples)) {
  const sample = bucket.samples[0];
  history.push({
  ...history.location,
@@ -198,12 +188,8 @@ export const TransactionDistribution: FunctionComponent<Props> = (
  formatX={(time: number) => timeFormatter(time).formatted}
  formatYShort={formatYShort}
  formatYLong={formatYLong}
- verticalLineHover={(bucket: IChartPoint) =>
- bucket.y > 0 && isEmpty(bucket.samples)
- }
- backgroundHover={(bucket: IChartPoint) =>
- bucket.y > 0 && !isEmpty(bucket.samples)
- }
+ 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);

diff --git a/...gacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/...gacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -28,9 +28,10 @@ import { IBucket } from '../../../../../server/lib/transactions/distribution/get
 import { history } from '../../../../utils/history';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { MaybeViewTraceLink } from './MaybeViewTraceLink';
+import { units, px } from '../../../../style/variables';
 
 const PaginationContainer = styled.div`
- margin-left: 4px;
+ margin-left: ${px(units.quarter)};
  display: flex;
  align-items: center;
 
@@ -39,7 +40,7 @@ const PaginationContainer = styled.div`
  }
 
  > span:last-of-type {
- margin-right: 8px;
+ margin-right: ${px(units.half)};
  }
 `;
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -13,7 +13,7 @@ import {
  EuiFlexItem
 } from '@elastic/eui';
 import _ from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionDistribution } from '../../../hooks/useTransactionDistribution';
 import { useWaterfall } from '../../../hooks/useWaterfall';
@@ -61,8 +61,15 @@ export function TransactionDetails() {
  return config;
  }, [transactionName, transactionType, serviceName]);
 
- const [selectedBucket, setSelectedBucket] = useState(-1);
- const traceSamples = distributionData.buckets[selectedBucket]?.samples;
+ const bucketIndex = distributionData.buckets.findIndex(bucket =>
+ bucket.samples.some(
+ sample =>
+ sample.transactionId === urlParams.transactionId &&
+ sample.traceId === urlParams.traceId
+ )
+ );
+
+ const traceSamples = distributionData.buckets[bucketIndex]?.samples;
 
  return (
  <div>
@@ -97,7 +104,7 @@ export function TransactionDetails() {
  distribution={distributionData}
  isLoading={distributionStatus === FETCH_STATUS.LOADING}
  urlParams={urlParams}
- onBucketSelected={setSelectedBucket}
+ bucketIndex={bucketIndex}
  />
  </EuiPanel>