[6.x] [APM] Highlight selected bucket in transaction bucket distribution (#26266)

x-pack/plugins/apm/public/services/rest/apm.ts

@@ -128,6 +128,7 @@ export async function loadTransactionDistribution({
   start,
   end,
   transactionName,
+  transactionId,
   kuery
 }: IUrlParams) {
   return callApi<ITransactionDistributionAPIResponse>({
@@ -136,6 +137,7 @@ export async function loadTransactionDistribution({
       start,
       end,
       transaction_name: transactionName,
+      transaction_id: transactionId,
       esFilterQuery: await getEncodedEsQuery(kuery)
     }
   });

x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx

@@ -39,7 +39,14 @@ export function TransactionDistributionRequest({
   urlParams: IUrlParams;
   render: RRRRender<ITransactionDistributionAPIResponse>;
 }) {
-  const { serviceName, start, end, transactionName, kuery } = urlParams;
+  const {
+    serviceName,
+    transactionId,
+    start,
+    end,
+    transactionName,
+    kuery
+  } = urlParams;
 
   if (!(serviceName && start && end && transactionName)) {
     return null;
@@ -49,7 +56,9 @@ export function TransactionDistributionRequest({
     <Request
       id={ID}
       fn={loadTransactionDistribution}
-      args={[{ serviceName, start, end, transactionName, kuery }]}
+      args={[
+        { serviceName, transactionId, start, end, transactionName, kuery }
+      ]}
       selector={getTransactionDistribution}
       render={render}
     />

x-pack/plugins/apm/server/lib/traces/get_top_traces.ts

@@ -7,7 +7,8 @@
 import {
   PARENT_ID,
   PROCESSOR_EVENT,
-  TRACE_ID
+  TRACE_ID,
+  TRANSACTION_SAMPLED
 } from '../../../common/constants';
 import { Setup } from '../helpers/setup_request';
 import { getTransactionGroups } from '../transaction_groups';
@@ -48,7 +49,8 @@ export async function getTopTraces(
           }
         },
         { term: { [PROCESSOR_EVENT]: 'transaction' } }
-      ]
+      ],
+      should: [{ term: { [TRANSACTION_SAMPLED]: true } }]
     }
   };
 

x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/fetcher.ts

@@ -38,6 +38,7 @@ export type ESResponse = AggregationSearchResponse<void, Aggs>;
 export function bucketFetcher(
   serviceName: string,
   transactionName: string,
+  transactionId: string,
   bucketSize: number,
   setup: Setup
 ): Promise<ESResponse> {
@@ -62,7 +63,10 @@ export function bucketFetcher(
               }
             }
           ],
-          should: [{ term: { [TRANSACTION_SAMPLED]: true } }]
+          should: [
+            { term: { [TRANSACTION_ID]: transactionId } },
+            { term: { [TRANSACTION_SAMPLED]: true } }
+          ]
         }
       },
       aggs: {

x-pack/plugins/apm/server/lib/transactions/distribution/get_buckets/index.ts

@@ -11,12 +11,14 @@ import { bucketTransformer } from './transform';
 export async function getBuckets(
   serviceName: string,
   transactionName: string,
+  transactionId: string,
   bucketSize: number,
   setup: Setup
 ) {
   const response = await bucketFetcher(
     serviceName,
     transactionName,
+    transactionId,
     bucketSize,
     setup
   );

x-pack/plugins/apm/server/lib/transactions/distribution/index.ts

@@ -19,6 +19,7 @@ export interface ITransactionDistributionAPIResponse {
 export async function getDistribution(
   serviceName: string,
   transactionName: string,
+  transactionId: string,
   setup: Setup
 ): Promise<ITransactionDistributionAPIResponse> {
   const bucketSize = await calculateBucketSize(
@@ -30,6 +31,7 @@ export async function getDistribution(
   const { defaultSample, buckets, totalHits } = await getBuckets(
     serviceName,
     transactionName,
+    transactionId,
     bucketSize,
     setup
   );

x-pack/plugins/apm/server/routes/transactions.ts

@@ -121,19 +121,27 @@ export function initTransactionsApi(server: Server) {
     options: {
       validate: {
         query: withDefaultValidators({
-          transaction_name: Joi.string().required()
+          transaction_name: Joi.string().required(),
+          transaction_id: Joi.string().default('')
         })
       }
     },
     handler: req => {
       const setup = setupRequest(req);
       const { serviceName } = req.params;
-      const { transaction_name: transactionName } = req.query as {
+      const {
+        transaction_name: transactionName,
+        transaction_id: transactionId
+      } = req.query as {
         transaction_name: string;
+        transaction_id: string;
       };
-      return getDistribution(serviceName, transactionName, setup).catch(
-        defaultErrorHandler
-      );
+      return getDistribution(
+        serviceName,
+        transactionName,
+        transactionId,
+        setup
+      ).catch(defaultErrorHandler);
     }
   });
 }