[APM] Use transaction metrics for distribution charts (#78484) (#78779)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -5,8 +5,6 @@
  */
 
 import { getFormattedBuckets } from '../index';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { IBucket } from '../../../../../../server/lib/transactions/distribution/get_buckets/transform';
 
 describe('Distribution', () => {
   it('getFormattedBuckets', () => {
@@ -20,6 +18,7 @@ describe('Distribution', () => {
         samples: [
           {
             transactionId: 'someTransactionId',
+            traceId: 'someTraceId',
           },
         ],
       },
@@ -29,10 +28,12 @@ describe('Distribution', () => {
         samples: [
           {
             transactionId: 'anotherTransactionId',
+            traceId: 'anotherTraceId',
           },
         ],
       },
-    ] as IBucket[];
+    ];
+
     expect(getFormattedBuckets(buckets, 20)).toEqual([
       { x: 20, x0: 0, y: 0, style: { cursor: 'default' } },
       { x: 40, x0: 20, y: 0, style: { cursor: 'default' } },

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

@@ -13,7 +13,7 @@ import { ValuesType } from 'utility-types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
+import { DistributionBucket } from '../../../../../server/lib/transactions/distribution/get_buckets';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { getDurationFormatter } from '../../../../utils/formatters';
 // @ts-expect-error
@@ -30,7 +30,10 @@ interface IChartPoint {
   };
 }
 
-export function getFormattedBuckets(buckets: IBucket[], bucketSize: number) {
+export function getFormattedBuckets(
+  buckets: DistributionBucket[],
+  bucketSize: number
+) {
   if (!buckets) {
     return [];
   }

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

@@ -18,7 +18,7 @@ import { Location } from 'history';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
+import { DistributionBucket } from '../../../../../server/lib/transactions/distribution/get_buckets';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
@@ -34,7 +34,7 @@ interface Props {
   waterfall: IWaterfall;
   exceedsMax: boolean;
   isLoading: boolean;
-  traceSamples: IBucket['samples'];
+  traceSamples: DistributionBucket['samples'];
 }
 
 export function WaterfallWithSummmary({

x-pack/plugins/apm/public/hooks/useTransactionDistribution.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { flatten, omit } from 'lodash';
+import { flatten, omit, isEmpty } from 'lodash';
 import { useHistory, useParams } from 'react-router-dom';
 import { IUrlParams } from '../context/UrlParamsContext/types';
 import { useFetcher } from './useFetcher';
@@ -69,10 +69,12 @@ export function useTransactionDistribution(urlParams: IUrlParams) {
           // selected sample was not found. select a new one:
           // sorted by total number of requests, but only pick
           // from buckets that have samples
+          const bucketsSortedByPreference = response.buckets
+            .filter((bucket) => !isEmpty(bucket.samples))
+            .sort((bucket) => bucket.count);
+
           const preferredSample = maybe(
-            response.buckets
-              .filter((bucket) => bucket.samples.length > 0)
-              .sort((bucket) => bucket.count)[0]?.samples[0]
+            bucketsSortedByPreference[0]?.samples[0]
           );
 
           history.push({