[APM] Displays callout when transaction events are used instead of aggregrated metrics

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

@@ -4,19 +4,38 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiSpacer } from '@elastic/eui';
-import { EuiTitle } from '@elastic/eui';
-import { EuiPanel } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { ServiceOverviewDependenciesTable } from '../service_overview/service_overview_dependencies_table';
 import { ServiceDependenciesBreakdownChart } from './service_dependencies_breakdown_chart';
+import { useSearchAggregatedTransactionsFetcher } from '../../../hooks/use_search_aggregated_transactions_fetcher';
+import { AggregatedTransactionsCallout } from '../../shared/aggregated_transactions_callout';
 
 export function ServiceDependencies() {
+  const {
+    searchAggregatedTransactions,
+  } = useSearchAggregatedTransactionsFetcher();
   return (
     <>
       <ChartPointerEventContextProvider>
+        {!searchAggregatedTransactions && (
+          <>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <AggregatedTransactionsCallout />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="s" />
+          </>
+        )}
         <EuiPanel hasBorder={true}>
           <EuiTitle size="xs">
             <h2>

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

@@ -15,6 +15,8 @@ import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { useSearchAggregatedTransactionsFetcher } from '../../../hooks/use_search_aggregated_transactions_fetcher';
+import { AggregatedTransactionsCallout } from '../../shared/aggregated_transactions_callout';
 import { useUpgradeAssistantHref } from '../../shared/Links/kibana';
 import { SearchBar } from '../../shared/search_bar';
 import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
@@ -155,6 +157,9 @@ function useServicesFetcher() {
 
 export function ServiceInventory() {
   const { core } = useApmPluginContext();
+  const {
+    searchAggregatedTransactions,
+  } = useSearchAggregatedTransactionsFetcher();
   const {
     servicesData,
     servicesStatus,
@@ -189,6 +194,11 @@ export function ServiceInventory() {
             <MLCallout onDismiss={() => setUserHasDismissedCallout(true)} />
           </EuiFlexItem>
         )}
+        {!searchAggregatedTransactions && (
+          <EuiFlexItem>
+            <AggregatedTransactionsCallout />
+          </EuiFlexItem>
+        )}
         <EuiFlexItem>
           <ServiceList
             isLoading={isLoading}

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

@@ -20,6 +20,8 @@ import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewInstancesChartAndTable } from './service_overview_instances_chart_and_table';
 import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { TransactionsTable } from '../../shared/transactions_table';
+import { useSearchAggregatedTransactionsFetcher } from '../../../hooks/use_search_aggregated_transactions_fetcher';
+import { AggregatedTransactionsCallout } from '../../shared/aggregated_transactions_callout';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -28,6 +30,9 @@ import { TransactionsTable } from '../../shared/transactions_table';
 export const chartHeight = 288;
 
 export function ServiceOverview() {
+  const {
+    searchAggregatedTransactions,
+  } = useSearchAggregatedTransactionsFetcher();
   const { agentName, serviceName } = useApmServiceContext();
 
   // The default EuiFlexGroup breaks at 768, but we want to break at 992, so we
@@ -41,6 +46,11 @@ export function ServiceOverview() {
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
         <EuiFlexGroup direction="column" gutterSize="s">
+          {!searchAggregatedTransactions && (
+            <EuiFlexItem>
+              <AggregatedTransactionsCallout />
+            </EuiFlexItem>
+          )}
           <EuiFlexItem>
             <EuiPanel hasBorder={true}>
               <LatencyChart height={200} />

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

@@ -5,19 +5,25 @@
  * 2.0.
  */
 
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { SearchBar } from '../../shared/search_bar';
 import { TraceList } from './trace_list';
+import { useSearchAggregatedTransactionsFetcher } from '../../../hooks/use_search_aggregated_transactions_fetcher';
+import { AggregatedTransactionsCallout } from '../../shared/aggregated_transactions_callout';
 
 type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>;
 const DEFAULT_RESPONSE: TracesAPIResponse = {
   items: [],
 };
 
 export function TraceOverview() {
+  const {
+    searchAggregatedTransactions,
+  } = useSearchAggregatedTransactionsFetcher();
   const {
     urlParams: { environment, kuery, start, end },
   } = useUrlParams();
@@ -44,6 +50,14 @@ export function TraceOverview() {
     <>
       <SearchBar />
 
+      {!searchAggregatedTransactions && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <AggregatedTransactionsCallout />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+
       <TraceList
         items={data.items}
         isLoading={status === FETCH_STATUS.LOADING}

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

@@ -5,13 +5,15 @@
  * 2.0.
  */
 
-import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Location } from 'history';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { IUrlParams } from '../../../context/url_params_context/types';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { useSearchAggregatedTransactionsFetcher } from '../../../hooks/use_search_aggregated_transactions_fetcher';
+import { AggregatedTransactionsCallout } from '../../shared/aggregated_transactions_callout';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { TransactionsTable } from '../../shared/transactions_table';
@@ -40,6 +42,9 @@ function getRedirectLocation({
 }
 
 export function TransactionOverview() {
+  const {
+    searchAggregatedTransactions,
+  } = useSearchAggregatedTransactionsFetcher();
   const location = useLocation();
   const { urlParams } = useUrlParams();
   const { transactionType, serviceName } = useApmServiceContext();
@@ -55,6 +60,16 @@ export function TransactionOverview() {
 
   return (
     <>
+      {!searchAggregatedTransactions && (
+        <>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <AggregatedTransactionsCallout />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+        </>
+      )}
       <TransactionCharts />
       <EuiSpacer size="s" />
       <EuiPanel hasBorder={true}>

x-pack/plugins/apm/public/components/shared/aggregated_transactions_callout/index.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function AggregatedTransactionsCallout() {
+  return (
+    <EuiCallOut
+      title={i18n.translate(
+        'xpack.apm.useAggregatedTransactions.callout.title',
+        {
+          defaultMessage:
+            'Transactions events are used to display data in this page',
+        }
+      )}
+      iconType="iInCircle"
+    >
+      <p>
+        {i18n.translate('xpack.apm.useAggregatedTransactions.callout.content', {
+          defaultMessage: `This page is using data only from raw transaction events instead of aggregated transaction metrics.`,
+        })}
+      </p>
+    </EuiCallOut>
+  );
+}

x-pack/plugins/apm/public/hooks/use_search_aggregated_transactions_fetcher.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useUrlParams } from '../context/url_params_context/use_url_params';
+import { useFetcher } from './use_fetcher';
+
+export function useSearchAggregatedTransactionsFetcher() {
+  const {
+    urlParams: { kuery },
+  } = useUrlParams();
+  const { data = { searchAggregatedTransactions: true } } = useFetcher(
+    (callApmApi) => {
+      return callApmApi({
+        endpoint: 'GET /api/apm/search_aggregated_transactions',
+        params: {
+          query: { kuery: kuery || undefined },
+        },
+      });
+    },
+    [kuery]
+  );
+
+  return data;
+}

x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts

@@ -12,7 +12,7 @@ import { calculateAuto } from './calculate_auto';
 export function getBucketSize({
   start,
   end,
-  numBuckets = 100,
+  numBuckets = 50,
   minBucketSize,
 }: {
   start: number;

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

@@ -21,6 +21,7 @@ import { indexPatternRouteRepository } from './index_pattern';
 import { metricsRouteRepository } from './metrics';
 import { observabilityOverviewRouteRepository } from './observability_overview';
 import { rumRouteRepository } from './rum_client';
+import { searchAggregatedTransactionsRouteRepository } from './search_aggregated_transactions';
 import { serviceRouteRepository } from './services';
 import { serviceMapRouteRepository } from './service_map';
 import { serviceNodeRouteRepository } from './service_nodes';
@@ -54,7 +55,8 @@ const getTypedGlobalApmServerRouteRepository = () => {
     .merge(customLinkRouteRepository)
     .merge(sourceMapsRouteRepository)
     .merge(apmFleetRouteRepository)
-    .merge(backendsRouteRepository);
+    .merge(backendsRouteRepository)
+    .merge(searchAggregatedTransactionsRouteRepository);
 
   return repository;
 };

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as t from 'io-ts';
+import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions';
+import { setupRequest } from '../lib/helpers/setup_request';
+import { createApmServerRoute } from './create_apm_server_route';
+import { createApmServerRouteRepository } from './create_apm_server_route_repository';
+import { kueryRt } from './default_api_types';
+
+const searchAggregatedTransactionsRoute = createApmServerRoute({
+  endpoint: 'GET /api/apm/search_aggregated_transactions',
+  params: t.partial({ query: kueryRt }),
+  options: { tags: ['access:apm'] },
+  handler: async (resources) => {
+    const setup = await setupRequest(resources);
+    const {
+      params: {
+        query: { kuery },
+      },
+    } = resources;
+    return {
+      searchAggregatedTransactions: await getSearchAggregatedTransactions({
+        ...setup,
+        kuery,
+      }),
+    };
+  },
+});
+
+export const searchAggregatedTransactionsRouteRepository = createApmServerRouteRepository().add(
+  searchAggregatedTransactionsRoute
+);