[8.9] [APM] Add range query to transaction/span GETs (#161643) (#161899)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[APM] Add range query to transaction/span GETs
(#161643)](#161643)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dario
Gieselaar","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-07-13T17:54:27Z","message":"[APM]
Add range query to transaction/span GETs (#161643)\n\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"6efac6268bf36ce737ce95f60727f27335abb9af","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:APM","release_note:skip","v8.9.0","v8.10.0"],"number":161643,"url":"https://github.com/elastic/kibana/pull/161643","mergeCommit":{"message":"[APM]
Add range query to transaction/span GETs (#161643)\n\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"6efac6268bf36ce737ce95f60727f27335abb9af"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/161643","number":161643,"mergeCommit":{"message":"[APM]
Add range query to transaction/span GETs (#161643)\n\nCo-authored-by:
Kibana Machine
<[email protected]>","sha":"6efac6268bf36ce737ce95f60727f27335abb9af"}}]}]
BACKPORT-->

Co-authored-by: Dario Gieselaar <[email protected]>

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

@@ -13,6 +13,7 @@ import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { getRedirectToTransactionDetailPageUrl } from './get_redirect_to_transaction_detail_page_url';
 import { getRedirectToTracePageUrl } from './get_redirect_to_trace_page_url';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 const CentralizedContainer = euiStyled.div`
   height: 100%;
@@ -25,6 +26,11 @@ export function TraceLink() {
     query: { rangeFrom, rangeTo },
   } = useApmParams('/link-to/trace/{traceId}');
 
+  const { start, end } = useTimeRange({
+    rangeFrom: rangeFrom || new Date(0).toISOString(),
+    rangeTo: rangeTo || new Date().toISOString(),
+  });
+
   const { data = { transaction: null }, status } = useFetcher(
     (callApmApi) => {
       if (traceId) {
@@ -35,12 +41,16 @@ export function TraceLink() {
               path: {
                 traceId,
               },
+              query: {
+                start,
+                end,
+              },
             },
           }
         );
       }
     },
-    [traceId]
+    [traceId, start, end]
   );
   if (traceId && status === FETCH_STATUS.SUCCESS) {
     const to = data.transaction

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx

@@ -94,6 +94,8 @@ interface Props {
   spanLinksCount: SpanLinksCount;
   flyoutDetailTab?: string;
   onClose: () => void;
+  start: string;
+  end: string;
 }
 
 const INITIAL_DATA = {
@@ -109,14 +111,19 @@ export function SpanFlyout({
   onClose,
   spanLinksCount,
   flyoutDetailTab,
+  start,
+  end,
 }: Props) {
   const { data = INITIAL_DATA, status } = useFetcher(
     (callApmApi) => {
       return callApmApi('GET /internal/apm/traces/{traceId}/spans/{spanId}', {
-        params: { path: { traceId, spanId }, query: { parentTransactionId } },
+        params: {
+          path: { traceId, spanId },
+          query: { parentTransactionId, start, end },
+        },
       });
     },
-    [traceId, spanId, parentTransactionId]
+    [traceId, spanId, parentTransactionId, start, end]
   );
 
   const { span, parentTransaction } = data;

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_flyout.stories.tsx

@@ -101,6 +101,8 @@ export const TransactionSpan: Story<Args> = () => {
       spanLinksCount={{ linkedChildren: 0, linkedParents: 0 }}
       parentTransactionId={data.spanEvent['parent.id']}
       onClose={() => {}}
+      start="fake-time"
+      end="fake-time"
     />
   );
 };

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx

@@ -39,6 +39,8 @@ interface Props {
   rootTransactionDuration?: number;
   spanLinksCount: SpanLinksCount;
   flyoutDetailTab?: string;
+  start: string;
+  end: string;
 }
 
 export function TransactionFlyout({
@@ -49,15 +51,17 @@ export function TransactionFlyout({
   rootTransactionDuration,
   spanLinksCount,
   flyoutDetailTab,
+  start,
+  end,
 }: Props) {
   const { data: transaction, status } = useFetcher(
     (callApmApi) => {
       return callApmApi(
         'GET /internal/apm/traces/{traceId}/transactions/{transactionId}',
-        { params: { path: { traceId, transactionId } } }
+        { params: { path: { traceId, transactionId }, query: { start, end } } }
       );
     },
-    [traceId, transactionId]
+    [traceId, transactionId, start, end]
   );
 
   const isLoading = isPending(status);

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/transaction_flyout.stories.tsx

@@ -84,6 +84,8 @@ export const Example: Story<Args> = () => {
       transactionId={data.transactionEvent['transaction.id']!}
       traceId={data.transactionEvent['trace.id']!}
       spanLinksCount={{ linkedChildren: 0, linkedParents: 0 }}
+      start="fake-time"
+      end="fake-time"
     />
   );
 };

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_flyout.tsx

@@ -9,6 +9,7 @@ import { History } from 'history';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useAnyOfApmParams } from '../../../../../../hooks/use_apm_params';
+import { useTimeRange } from '../../../../../../hooks/use_time_range';
 import { SpanFlyout } from './span_flyout';
 import { TransactionFlyout } from './transaction_flyout';
 import { IWaterfall } from './waterfall_helpers/waterfall_helpers';
@@ -32,7 +33,7 @@ export function WaterfallFlyout({
 }: Props) {
   const history = useHistory();
   const {
-    query: { flyoutDetailTab },
+    query: { flyoutDetailTab, rangeFrom, rangeTo },
   } = useAnyOfApmParams(
     '/services/{serviceName}/transactions/view',
     '/mobile-services/{serviceName}/transactions/view',
@@ -43,6 +44,8 @@ export function WaterfallFlyout({
     (item) => item.id === waterfallItemId
   );
 
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
   if (!currentItem) {
     return null;
   }
@@ -63,6 +66,8 @@ export function WaterfallFlyout({
           onClose={() => toggleFlyout({ history })}
           spanLinksCount={currentItem.spanLinksCount}
           flyoutDetailTab={flyoutDetailTab}
+          start={start}
+          end={end}
         />
       );
     case 'transaction':
@@ -75,6 +80,8 @@ export function WaterfallFlyout({
           errorCount={waterfall.getErrorCount(currentItem.id)}
           spanLinksCount={currentItem.spanLinksCount}
           flyoutDetailTab={flyoutDetailTab}
+          start={start}
+          end={end}
         />
       );
     default:

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

@@ -12,6 +12,7 @@ import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { getRedirectToTransactionDetailPageUrl } from '../trace_link/get_redirect_to_transaction_detail_page_url';
 import { useApmParams } from '../../../hooks/use_apm_params';
+import { useTimeRange } from '../../../hooks/use_time_range';
 
 const CentralizedContainer = euiStyled.div`
   height: 100%;
@@ -24,6 +25,11 @@ export function TransactionLink() {
     query: { rangeFrom, rangeTo, waterfallItemId },
   } = useApmParams('/link-to/transaction/{transactionId}');
 
+  const { start, end } = useTimeRange({
+    rangeFrom: rangeFrom || new Date(0).toISOString(),
+    rangeTo: rangeTo || new Date().toISOString(),
+  });
+
   const { data = { transaction: null }, status } = useFetcher(
     (callApmApi) => {
       if (transactionId) {
@@ -32,11 +38,15 @@ export function TransactionLink() {
             path: {
               transactionId,
             },
+            query: {
+              start,
+              end,
+            },
           },
         });
       }
     },
-    [transactionId]
+    [transactionId, start, end]
   );
   if (transactionId && status === FETCH_STATUS.SUCCESS) {
     if (data.transaction) {

x-pack/plugins/apm/server/routes/settings/agent_configuration/route.ts

@@ -343,14 +343,13 @@ const listAgentConfigurationEnvironmentsRoute = createApmServerRoute({
     ]);
     const coreContext = await context.core;
 
-    const { serviceName, start, end } = params.query;
+    const { serviceName } = params.query;
     const searchAggregatedTransactions = await getSearchTransactionsEvents({
       apmEventClient,
       config,
       kuery: '',
-      start,
-      end,
     });
+
     const size = await coreContext.uiSettings.client.get<number>(
       maxSuggestions
     );

x-pack/plugins/apm/server/routes/traces/route.ts

@@ -103,6 +103,8 @@ const tracesByIdRoute = createApmServerRoute({
         transactionId: entryTransactionId,
         traceId,
         apmEventClient,
+        start,
+        end,
       }),
     ]);
     return {
@@ -118,17 +120,24 @@ const rootTransactionByTraceIdRoute = createApmServerRoute({
     path: t.type({
       traceId: t.string,
     }),
+    query: rangeRt,
   }),
   options: { tags: ['access:apm'] },
   handler: async (
     resources
   ): Promise<{
     transaction: Transaction;
   }> => {
-    const { params } = resources;
-    const { traceId } = params.path;
+    const {
+      params: {
+        path: { traceId },
+        query: { start, end },
+      },
+    } = resources;
+
     const apmEventClient = await getApmEventClient(resources);
-    return getRootTransactionByTraceId(traceId, apmEventClient);
+
+    return getRootTransactionByTraceId({ traceId, apmEventClient, start, end });
   },
 });
 
@@ -138,18 +147,29 @@ const transactionByIdRoute = createApmServerRoute({
     path: t.type({
       transactionId: t.string,
     }),
+    query: rangeRt,
   }),
   options: { tags: ['access:apm'] },
   handler: async (
     resources
   ): Promise<{
     transaction: Transaction;
   }> => {
-    const { params } = resources;
-    const { transactionId } = params.path;
+    const {
+      params: {
+        path: { transactionId },
+        query: { start, end },
+      },
+    } = resources;
+
     const apmEventClient = await getApmEventClient(resources);
     return {
-      transaction: await getTransaction({ transactionId, apmEventClient }),
+      transaction: await getTransaction({
+        transactionId,
+        apmEventClient,
+        start,
+        end,
+      }),
     };
   },
 });
@@ -239,16 +259,23 @@ const transactionFromTraceByIdRoute = createApmServerRoute({
       traceId: t.string,
       transactionId: t.string,
     }),
+    query: rangeRt,
   }),
   options: { tags: ['access:apm'] },
   handler: async (resources): Promise<Transaction> => {
     const { params } = resources;
-    const { transactionId, traceId } = params.path;
+    const {
+      path: { transactionId, traceId },
+      query: { start, end },
+    } = params;
+
     const apmEventClient = await getApmEventClient(resources);
     return await getTransaction({
       transactionId,
       traceId,
       apmEventClient,
+      start,
+      end,
     });
   },
 });
@@ -260,7 +287,10 @@ const spanFromTraceByIdRoute = createApmServerRoute({
       traceId: t.string,
       spanId: t.string,
     }),
-    query: t.union([t.partial({ parentTransactionId: t.string }), t.undefined]),
+    query: t.intersection([
+      rangeRt,
+      t.union([t.partial({ parentTransactionId: t.string }), t.undefined]),
+    ]),
   }),
   options: { tags: ['access:apm'] },
   handler: async (
@@ -270,14 +300,19 @@ const spanFromTraceByIdRoute = createApmServerRoute({
     parentTransaction?: Transaction;
   }> => {
     const { params } = resources;
-    const { spanId, traceId } = params.path;
-    const { parentTransactionId } = params.query;
+    const {
+      path: { spanId, traceId },
+      query: { start, end, parentTransactionId },
+    } = params;
+
     const apmEventClient = await getApmEventClient(resources);
     return await getSpan({
       spanId,
       parentTransactionId,
       traceId,
       apmEventClient,
+      start,
+      end,
     });
   },
 });