From 6aa27fe578cffc24bfd65656f71483c0b2f84453 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 12:46:20 -0600
Subject: [PATCH 01/11] Start moving some stuff

---
 .../app/ErrorGroupOverview/index.tsx          |  76 +++------
 .../LocalUIFilters/Filter/FilterBadgeList.tsx |   0
 .../Filter/FilterTitleButton.tsx              |   0
 .../LocalUIFilters/Filter/index.tsx           |   0
 .../TransactionTypeFilter/index.tsx           |   0
 .../RumDashboard}/LocalUIFilters/index.tsx    |   6 +-
 .../RumDashboard}/hooks/useLocalUIFilters.ts  |  23 +--
 .../components/app/RumDashboard/index.tsx     |   2 +-
 .../app/ServiceNodeOverview/index.tsx         |  64 +++----
 .../components/app/TraceOverview/index.tsx    |  18 +-
 .../app/TransactionDetails/index.tsx          | 118 ++++++-------
 .../app/service_inventory/index.tsx           |  63 +++----
 .../service_inventory.test.tsx                |   8 -
 .../components/app/service_metrics/index.tsx  |  65 +++-----
 .../app/transaction_overview/index.tsx        | 156 +++++++-----------
 15 files changed, 218 insertions(+), 381 deletions(-)
 rename x-pack/plugins/apm/public/components/{shared => app/RumDashboard}/LocalUIFilters/Filter/FilterBadgeList.tsx (100%)
 rename x-pack/plugins/apm/public/components/{shared => app/RumDashboard}/LocalUIFilters/Filter/FilterTitleButton.tsx (100%)
 rename x-pack/plugins/apm/public/components/{shared => app/RumDashboard}/LocalUIFilters/Filter/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/{shared => app/RumDashboard}/LocalUIFilters/TransactionTypeFilter/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/{shared => app/RumDashboard}/LocalUIFilters/index.tsx (92%)
 rename x-pack/plugins/apm/public/{ => components/app/RumDashboard}/hooks/useLocalUIFilters.ts (76%)

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
index 71cb8e0e01602..ce025b36ab27a 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -6,30 +6,27 @@
 
 import {
   EuiFlexGroup,
-  EuiFlexItem,
   EuiPage,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
-import { useFetcher } from '../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
+import { useFetcher } from '../../../hooks/use_fetcher';
 import { callApmApi } from '../../../services/rest/createCallApmApi';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { SearchBar } from '../../shared/search_bar';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
-import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 
 interface ErrorGroupOverviewProps {
   serviceName: string;
 }
 
-function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
+export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   const { urlParams, uiFilters } = useUrlParams();
   const { start, end, sortField, sortDirection } = urlParams;
   const { errorDistributionData } = useErrorGroupDistributionFetcher({
@@ -65,18 +62,6 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   });
   useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 });
 
-  const localUIFiltersConfig = useMemo(() => {
-    const config: React.ComponentProps<typeof LocalUIFilters> = {
-      filterNames: ['host', 'containerId', 'podName', 'serviceVersion'],
-      params: {
-        serviceName,
-      },
-      projection: Projection.errorGroups,
-    };
-
-    return config;
-  }, [serviceName]);
-
   if (!errorDistributionData || !errorGroupListData) {
     return null;
   }
@@ -85,41 +70,34 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
     <>
       <SearchBar />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <LocalUIFilters {...localUIFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <EuiPanel>
-              <ErrorDistribution
-                distribution={errorDistributionData}
-                title={i18n.translate(
-                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                  {
-                    defaultMessage: 'Error occurrences',
-                  }
-                )}
-              />
-            </EuiPanel>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiPanel>
+            <ErrorDistribution
+              distribution={errorDistributionData}
+              title={i18n.translate(
+                'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                {
+                  defaultMessage: 'Error occurrences',
+                }
+              )}
+            />
+          </EuiPanel>
 
-            <EuiSpacer size="s" />
+          <EuiSpacer size="s" />
 
-            <EuiPanel>
-              <EuiTitle size="xs">
-                <h3>Errors</h3>
-              </EuiTitle>
-              <EuiSpacer size="s" />
+          <EuiPanel>
+            <EuiTitle size="xs">
+              <h3>Errors</h3>
+            </EuiTitle>
+            <EuiSpacer size="s" />
 
-              <ErrorGroupList
-                items={errorGroupListData}
-                serviceName={serviceName}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
+            <ErrorGroupList
+              items={errorGroupListData}
+              serviceName={serviceName}
+            />
+          </EuiPanel>
         </EuiFlexGroup>
       </EuiPage>
     </>
   );
 }
-
-export { ErrorGroupOverview };
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterTitleButton.tsx
rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx
rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
similarity index 92%
rename from x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx
rename to x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
index eaecd86820524..3f06c6c0524f9 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
@@ -14,9 +14,9 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { Filter } from './Filter';
-import { useLocalUIFilters } from '../../../hooks/useLocalUIFilters';
-import { Projection } from '../../../../common/projections';
-import { LocalUIFilterName } from '../../../../common/ui_filter';
+import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
+import { Projection } from '../../../../../common/projections';
+import { LocalUIFilterName } from '../../../../../common/ui_filter';
 
 interface Props {
   projection: Projection;
diff --git a/x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
similarity index 76%
rename from x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts
rename to x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
index dabdf41c63f04..6f1715a7a4a4d 100644
--- a/x-pack/plugins/apm/public/hooks/useLocalUIFilters.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
@@ -6,20 +6,23 @@
 
 import { omit } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import { Projection } from '../../common/projections';
-import { pickKeys } from '../../common/utils/pick_keys';
+import { Projection } from '../../../../../common/projections';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { LocalUIFiltersAPIResponse } from '../../server/lib/ui_filters/local_ui_filters';
+import { LocalUIFiltersAPIResponse } from '../../../../../server/lib/ui_filters/local_ui_filters';
 import {
   localUIFilters,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../server/lib/ui_filters/local_ui_filters/config';
-import { fromQuery, toQuery } from '../components/shared/Links/url_helpers';
-import { removeUndefinedProps } from '../context/url_params_context/helpers';
-import { useCallApi } from './useCallApi';
-import { useFetcher } from './use_fetcher';
-import { useUrlParams } from '../context/url_params_context/use_url_params';
-import { LocalUIFilterName } from '../../common/ui_filter';
+} from '../../../../../server/lib/ui_filters/local_ui_filters/config';
+import {
+  fromQuery,
+  toQuery,
+} from '../../../../components/shared/Links/url_helpers';
+import { removeUndefinedProps } from '../../../../context/url_params_context/helpers';
+import { useCallApi } from '../../../../hooks/useCallApi';
+import { useFetcher } from '../../../../hooks/use_fetcher';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { LocalUIFilterName } from '../../../../../common/ui_filter';
 
 const getInitialData = (
   filterNames: LocalUIFilterName[]
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
index ed084a91df6dc..0356de62a3519 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -10,7 +10,7 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { Projection } from '../../../../common/projections';
 import { RumDashboard } from './RumDashboard';
 
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { LocalUIFilters } from './LocalUIFilters';
 import { URLFilter } from './URLFilter';
 
 export function RumOverview() {
diff --git a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
index c4c227deb6918..c704a6e36d03d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
@@ -3,29 +3,21 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPage,
-  EuiPanel,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiPage, EuiPanel, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useMemo } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../common/i18n';
-import { Projection } from '../../../../common/projections';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
 import {
   asDynamicBytes,
   asInteger,
   asPercent,
 } from '../../../../common/utils/formatters';
-import { useFetcher } from '../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { useFetcher } from '../../../hooks/use_fetcher';
 import { px, truncate, unit } from '../../../style/variables';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';
 import { SearchBar } from '../../shared/search_bar';
 
@@ -45,19 +37,6 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
   const { uiFilters, urlParams } = useUrlParams();
   const { start, end } = urlParams;
 
-  const localFiltersConfig: React.ComponentProps<
-    typeof LocalUIFilters
-  > = useMemo(
-    () => ({
-      filterNames: ['host', 'containerId', 'podName'],
-      params: {
-        serviceName,
-      },
-      projection: Projection.serviceNodes,
-    }),
-    [serviceName]
-  );
-
   const { data: items = [] } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
@@ -162,27 +141,22 @@ function ServiceNodeOverview({ serviceName }: ServiceNodeOverviewProps) {
     <>
       <SearchBar />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <LocalUIFilters {...localFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <EuiPanel>
-              <ManagedTable
-                noItemsMessage={i18n.translate(
-                  'xpack.apm.jvmsTable.noJvmsLabel',
-                  {
-                    defaultMessage: 'No JVMs were found',
-                  }
-                )}
-                items={items}
-                columns={columns}
-                initialPageSize={INITIAL_PAGE_SIZE}
-                initialSortField={INITIAL_SORT_FIELD}
-                initialSortDirection={INITIAL_SORT_DIRECTION}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiPanel>
+            <ManagedTable
+              noItemsMessage={i18n.translate(
+                'xpack.apm.jvmsTable.noJvmsLabel',
+                {
+                  defaultMessage: 'No JVMs were found',
+                }
+              )}
+              items={items}
+              columns={columns}
+              initialPageSize={INITIAL_PAGE_SIZE}
+              initialSortField={INITIAL_SORT_FIELD}
+              initialSortDirection={INITIAL_SORT_DIRECTION}
+            />
+          </EuiPanel>
         </EuiFlexGroup>
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
index 399455e4150d4..a91821be4941a 100644
--- a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
@@ -5,16 +5,14 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
-import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 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 { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { SearchBar } from '../../shared/search_bar';
-import { TraceList } from './TraceList';
 import { Correlations } from '../Correlations';
+import { TraceList } from './TraceList';
 
 type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>;
 const DEFAULT_RESPONSE: TracesAPIResponse = {
@@ -47,15 +45,6 @@ export function TraceOverview() {
   useTrackPageview({ app: 'apm', path: 'traces_overview' });
   useTrackPageview({ app: 'apm', path: 'traces_overview', delay: 15000 });
 
-  const localUIFiltersConfig = useMemo(() => {
-    const config: React.ComponentProps<typeof LocalUIFilters> = {
-      filterNames: ['transactionResult', 'host', 'containerId', 'podName'],
-      projection: Projection.traces,
-    };
-
-    return config;
-  }, []);
-
   return (
     <>
       <SearchBar />
@@ -63,7 +52,6 @@ export function TraceOverview() {
         <EuiFlexGroup>
           <EuiFlexItem grow={1}>
             <Correlations />
-            <LocalUIFilters {...localUIFiltersConfig} showCount={false} />
           </EuiFlexItem>
           <EuiFlexItem grow={7}>
             <EuiPanel>
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
index b1a97dd34b887..5c2e7593804c8 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -6,33 +6,29 @@
 
 import {
   EuiFlexGroup,
-  EuiFlexItem,
   EuiHorizontalRule,
   EuiPage,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
-import React, { useMemo } from 'react';
-import { isEmpty, flatten } from 'lodash';
-import { useHistory } from 'react-router-dom';
-import { RouteComponentProps } from 'react-router-dom';
+import { flatten, isEmpty } from 'lodash';
+import React from 'react';
+import { RouteComponentProps, useHistory } from 'react-router-dom';
+import { useTrackPageview } from '../../../../../observability/public';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { useTransactionDistributionFetcher } from '../../../hooks/use_transaction_distribution_fetcher';
-import { useWaterfallFetcher } from './use_waterfall_fetcher';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
-import { TransactionDistribution } from './Distribution';
-import { WaterfallWithSummmary } from './WaterfallWithSummmary';
-import { FETCH_STATUS } from '../../../hooks/use_fetcher';
-import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
-import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
-import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { HeightRetainer } from '../../shared/HeightRetainer';
-import { Correlations } from '../Correlations';
+import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { SearchBar } from '../../shared/search_bar';
+import { Correlations } from '../Correlations';
+import { TransactionDistribution } from './Distribution';
+import { useWaterfallFetcher } from './use_waterfall_fetcher';
+import { WaterfallWithSummmary } from './WaterfallWithSummmary';
 
 interface Sample {
   traceId: string;
@@ -45,7 +41,6 @@ export function TransactionDetails({
   location,
   match,
 }: TransactionDetailsProps) {
-  const { serviceName } = match.params;
   const { urlParams } = useUrlParams();
   const history = useHistory();
   const {
@@ -58,24 +53,11 @@ export function TransactionDetails({
     exceedsMax,
     status: waterfallStatus,
   } = useWaterfallFetcher();
-  const { transactionName, transactionType } = urlParams;
+  const { transactionName } = urlParams;
 
   useTrackPageview({ app: 'apm', path: 'transaction_details' });
   useTrackPageview({ app: 'apm', path: 'transaction_details', delay: 15000 });
 
-  const localUIFiltersConfig = useMemo(() => {
-    const config: React.ComponentProps<typeof LocalUIFilters> = {
-      filterNames: ['transactionResult', 'serviceVersion'],
-      projection: Projection.transactions,
-      params: {
-        transactionName,
-        transactionType,
-        serviceName,
-      },
-    };
-    return config;
-  }, [transactionName, transactionType, serviceName]);
-
   const selectedSample = flatten(
     distributionData.buckets.map((bucket) => bucket.samples)
   ).find(
@@ -115,45 +97,41 @@ export function TransactionDetails({
       </ApmHeader>
       <SearchBar showTimeComparison />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <Correlations />
-            <LocalUIFilters {...localUIFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <ChartPointerEventContextProvider>
-              <TransactionCharts />
-            </ChartPointerEventContextProvider>
-
-            <EuiHorizontalRule size="full" margin="l" />
-
-            <EuiPanel>
-              <TransactionDistribution
-                distribution={distributionData}
-                fetchStatus={distributionStatus}
-                urlParams={urlParams}
-                bucketIndex={bucketIndex}
-                onBucketClick={(bucket) => {
-                  if (!isEmpty(bucket.samples)) {
-                    selectSampleFromBucketClick(bucket.samples[0]);
-                  }
-                }}
-              />
-            </EuiPanel>
-
-            <EuiSpacer size="s" />
-
-            <HeightRetainer>
-              <WaterfallWithSummmary
-                location={location}
-                urlParams={urlParams}
-                waterfall={waterfall}
-                isLoading={waterfallStatus === FETCH_STATUS.LOADING}
-                exceedsMax={exceedsMax}
-                traceSamples={traceSamples}
-              />
-            </HeightRetainer>
-          </EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <Correlations />
+
+          <ChartPointerEventContextProvider>
+            <TransactionCharts />
+          </ChartPointerEventContextProvider>
+
+          <EuiHorizontalRule size="full" margin="l" />
+
+          <EuiPanel>
+            <TransactionDistribution
+              distribution={distributionData}
+              fetchStatus={distributionStatus}
+              urlParams={urlParams}
+              bucketIndex={bucketIndex}
+              onBucketClick={(bucket) => {
+                if (!isEmpty(bucket.samples)) {
+                  selectSampleFromBucketClick(bucket.samples[0]);
+                }
+              }}
+            />
+          </EuiPanel>
+
+          <EuiSpacer size="s" />
+
+          <HeightRetainer>
+            <WaterfallWithSummmary
+              location={location}
+              urlParams={urlParams}
+              waterfall={waterfall}
+              isLoading={waterfallStatus === FETCH_STATUS.LOADING}
+              exceedsMax={exceedsMax}
+              traceSamples={traceSamples}
+            />
+          </HeightRetainer>
         </EuiFlexGroup>
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
index 2f83d48049486..1a71e68055984 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/index.tsx
@@ -12,21 +12,19 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
-import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
-import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { useUpgradeAssistantHref } from '../../shared/Links/kibana';
 import { SearchBar } from '../../shared/search_bar';
 import { NoServicesMessage } from './no_services_message';
 import { ServiceList } from './ServiceList';
 import { MLCallout } from './ServiceList/MLCallout';
 import { useAnomalyDetectionJobsFetcher } from './use_anomaly_detection_jobs_fetcher';
-import { useUpgradeAssistantHref } from '../../shared/Links/kibana';
 
 const initialData = {
   items: [],
@@ -99,16 +97,6 @@ export function ServiceInventory() {
   useTrackPageview({ app: 'apm', path: 'services_overview' });
   useTrackPageview({ app: 'apm', path: 'services_overview', delay: 15000 });
 
-  const localFiltersConfig: React.ComponentProps<
-    typeof LocalUIFilters
-  > = useMemo(
-    () => ({
-      filterNames: ['host', 'agentName'],
-      projection: Projection.services,
-    }),
-    []
-  );
-
   const {
     anomalyDetectionJobsData,
     anomalyDetectionJobsStatus,
@@ -131,33 +119,24 @@ export function ServiceInventory() {
     <>
       <SearchBar showTimeComparison />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <LocalUIFilters {...localFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <EuiFlexGroup direction="column">
-              {displayMlCallout ? (
-                <EuiFlexItem>
-                  <MLCallout
-                    onDismiss={() => setUserHasDismissedCallout(true)}
+        <EuiFlexGroup direction="column" gutterSize="s">
+          {displayMlCallout ? (
+            <EuiFlexItem>
+              <MLCallout onDismiss={() => setUserHasDismissedCallout(true)} />
+            </EuiFlexItem>
+          ) : null}
+          <EuiFlexItem>
+            <EuiPanel>
+              <ServiceList
+                items={servicesData.items}
+                noItemsMessage={
+                  <NoServicesMessage
+                    historicalDataFound={servicesData.hasHistoricalData}
+                    status={servicesStatus}
                   />
-                </EuiFlexItem>
-              ) : null}
-              <EuiFlexItem>
-                <EuiPanel>
-                  <ServiceList
-                    items={servicesData.items}
-                    noItemsMessage={
-                      <NoServicesMessage
-                        historicalDataFound={servicesData.hasHistoricalData}
-                        status={servicesStatus}
-                      />
-                    }
-                  />
-                </EuiPanel>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+                }
+              />
+            </EuiPanel>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPage>
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx
index 7c2729dbb0a16..07cbd17c70809 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx
@@ -19,7 +19,6 @@ import {
   MockApmPluginContextWrapper,
 } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
-import * as useLocalUIFilters from '../../../hooks/useLocalUIFilters';
 import * as useDynamicIndexPatternHooks from '../../../hooks/use_dynamic_index_pattern';
 import { SessionStorageMock } from '../../../services/__mocks__/SessionStorageMock';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
@@ -75,13 +74,6 @@ describe('ServiceInventory', () => {
     // @ts-expect-error
     global.sessionStorage = new SessionStorageMock();
 
-    jest.spyOn(useLocalUIFilters, 'useLocalUIFilters').mockReturnValue({
-      filters: [],
-      setFilterValue: () => null,
-      clearValues: () => null,
-      status: FETCH_STATUS.SUCCESS,
-    });
-
     jest.spyOn(hook, 'useAnomalyDetectionJobsFetcher').mockReturnValue({
       anomalyDetectionJobsStatus: FETCH_STATUS.SUCCESS,
       anomalyDetectionJobsData: { jobs: [], hasLegacyJobs: false },
diff --git a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
index bf99f5c87fa6a..f3a677dbba684 100644
--- a/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_metrics/index.tsx
@@ -6,19 +6,17 @@
 
 import {
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiPage,
   EuiPanel,
   EuiSpacer,
-  EuiFlexGroup,
 } from '@elastic/eui';
-import React, { useMemo } from 'react';
+import React from 'react';
+import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useServiceMetricChartsFetcher } from '../../../hooks/use_service_metric_charts_fetcher';
 import { MetricsChart } from '../../shared/charts/metrics_chart';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
-import { Projection } from '../../../../common/projections';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { SearchBar } from '../../shared/search_bar';
 
 interface ServiceMetricsProps {
@@ -36,47 +34,28 @@ export function ServiceMetrics({
   });
   const { start, end } = urlParams;
 
-  const localFiltersConfig: React.ComponentProps<
-    typeof LocalUIFilters
-  > = useMemo(
-    () => ({
-      filterNames: ['host', 'containerId', 'podName', 'serviceVersion'],
-      params: {
-        serviceName,
-      },
-      projection: Projection.metrics,
-      showCount: false,
-    }),
-    [serviceName]
-  );
-
   return (
     <>
       <SearchBar />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <LocalUIFilters {...localFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <ChartPointerEventContextProvider>
-              <EuiFlexGrid columns={2} gutterSize="s">
-                {data.charts.map((chart) => (
-                  <EuiFlexItem key={chart.key}>
-                    <EuiPanel>
-                      <MetricsChart
-                        start={start}
-                        end={end}
-                        chart={chart}
-                        fetchStatus={status}
-                      />
-                    </EuiPanel>
-                  </EuiFlexItem>
-                ))}
-              </EuiFlexGrid>
-              <EuiSpacer size="xxl" />
-            </ChartPointerEventContextProvider>
-          </EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <ChartPointerEventContextProvider>
+            <EuiFlexGrid columns={2} gutterSize="s">
+              {data.charts.map((chart) => (
+                <EuiFlexItem key={chart.key}>
+                  <EuiPanel>
+                    <MetricsChart
+                      start={start}
+                      end={end}
+                      chart={chart}
+                      fetchStatus={status}
+                    />
+                  </EuiPanel>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGrid>
+            <EuiSpacer size="xxl" />
+          </ChartPointerEventContextProvider>
         </EuiFlexGroup>
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index 5be08477b3bf5..d70c0d53a2104 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -8,8 +8,6 @@ import {
   EuiCallOut,
   EuiCode,
   EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
   EuiPage,
   EuiPanel,
   EuiSpacer,
@@ -18,25 +16,22 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Location } from 'history';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
 import { TRANSACTION_PAGE_LOAD } from '../../../../common/transaction_types';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { IUrlParams } from '../../../context/url_params_context/types';
-import { useTransactionListFetcher } from './use_transaction_list';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
-import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter';
 import { SearchBar } from '../../shared/search_bar';
 import { Correlations } from '../Correlations';
 import { TransactionList } from './TransactionList';
 import { useRedirect } from './useRedirect';
 import { UserExperienceCallout } from './user_experience_callout';
-import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { useTransactionListFetcher } from './use_transaction_list';
 
 function getRedirectLocation({
   location,
@@ -79,27 +74,6 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
     transactionListStatus,
   } = useTransactionListFetcher();
 
-  const localFiltersConfig: React.ComponentProps<
-    typeof LocalUIFilters
-  > = useMemo(
-    () => ({
-      shouldFetch: !!transactionType,
-      filterNames: [
-        'transactionResult',
-        'host',
-        'containerId',
-        'podName',
-        'serviceVersion',
-      ],
-      params: {
-        serviceName,
-        transactionType,
-      },
-      projection: Projection.transactionGroups,
-    }),
-    [serviceName, transactionType]
-  );
-
   // TODO: improve urlParams typings.
   // `serviceName` or `transactionType` will never be undefined here, and this check should not be needed
   if (!serviceName) {
@@ -111,74 +85,66 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
       <SearchBar showTimeComparison />
 
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <Correlations />
-            <LocalUIFilters {...localFiltersConfig}>
-              <TransactionTypeFilter transactionTypes={transactionTypes} />
-              <EuiSpacer size="m" />
-              <EuiHorizontalRule margin="none" />
-            </LocalUIFilters>
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            {transactionType === TRANSACTION_PAGE_LOAD && (
-              <>
-                <UserExperienceCallout serviceName={serviceName} />
-                <EuiSpacer size="s" />
-              </>
-            )}
-            <TransactionCharts />
-            <EuiSpacer size="s" />
-            <EuiPanel>
-              <EuiTitle size="xs">
-                <h3>Transactions</h3>
-              </EuiTitle>
-              <EuiSpacer size="s" />
-              {!transactionListData.isAggregationAccurate && (
-                <EuiCallOut
-                  title={i18n.translate(
-                    'xpack.apm.transactionCardinalityWarning.title',
-                    {
-                      defaultMessage:
-                        'This view shows a subset of reported transactions.',
-                    }
-                  )}
-                  color="danger"
-                  iconType="alert"
-                >
-                  <p>
-                    <FormattedMessage
-                      id="xpack.apm.transactionCardinalityWarning.body"
-                      defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
-                      values={{
-                        bucketSize: transactionListData.bucketSize,
-                        codeBlock: (
-                          <EuiCode>
-                            xpack.apm.ui.transactionGroupBucketSize
-                          </EuiCode>
-                        ),
-                      }}
-                    />
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <Correlations />
 
-                    <ElasticDocsLink
-                      section="/kibana"
-                      path="/troubleshooting.html#troubleshooting-too-many-transactions"
-                    >
-                      {i18n.translate(
-                        'xpack.apm.transactionCardinalityWarning.docsLink',
-                        { defaultMessage: 'Learn more in the docs' }
-                      )}
-                    </ElasticDocsLink>
-                  </p>
-                </EuiCallOut>
-              )}
+          {transactionType === TRANSACTION_PAGE_LOAD && (
+            <>
+              <UserExperienceCallout serviceName={serviceName} />
               <EuiSpacer size="s" />
-              <TransactionList
-                isLoading={transactionListStatus === 'loading'}
-                items={transactionListData.items || []}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
+            </>
+          )}
+          <TransactionCharts />
+          <EuiSpacer size="s" />
+          <EuiPanel>
+            <EuiTitle size="xs">
+              <h3>Transactions</h3>
+            </EuiTitle>
+            <EuiSpacer size="s" />
+            {!transactionListData.isAggregationAccurate && (
+              <EuiCallOut
+                title={i18n.translate(
+                  'xpack.apm.transactionCardinalityWarning.title',
+                  {
+                    defaultMessage:
+                      'This view shows a subset of reported transactions.',
+                  }
+                )}
+                color="danger"
+                iconType="alert"
+              >
+                <p>
+                  <FormattedMessage
+                    id="xpack.apm.transactionCardinalityWarning.body"
+                    defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
+                    values={{
+                      bucketSize: transactionListData.bucketSize,
+                      codeBlock: (
+                        <EuiCode>
+                          xpack.apm.ui.transactionGroupBucketSize
+                        </EuiCode>
+                      ),
+                    }}
+                  />
+
+                  <ElasticDocsLink
+                    section="/kibana"
+                    path="/troubleshooting.html#troubleshooting-too-many-transactions"
+                  >
+                    {i18n.translate(
+                      'xpack.apm.transactionCardinalityWarning.docsLink',
+                      { defaultMessage: 'Learn more in the docs' }
+                    )}
+                  </ElasticDocsLink>
+                </p>
+              </EuiCallOut>
+            )}
+            <EuiSpacer size="s" />
+            <TransactionList
+              isLoading={transactionListStatus === 'loading'}
+              items={transactionListData.items || []}
+            />
+          </EuiPanel>
         </EuiFlexGroup>
       </EuiPage>
     </>

From 588bc74b9426fe169b67662a8c0f7bca0c8e764d Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 13:00:50 -0600
Subject: [PATCH 02/11] Move some stuff around

---
 .../RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx    | 2 +-
 .../app/RumDashboard/LocalUIFilters/Filter/index.tsx          | 2 +-
 .../components/app/RumDashboard/LocalUIFilters/index.tsx      | 2 +-
 .../components/app/RumDashboard/hooks/useLocalUIFilters.ts    | 4 ++--
 .../app/RumDashboard/hooks/use_call_api.ts}                   | 0
 .../plugins/apm/public/components/app/RumDashboard/index.tsx  | 2 +-
 .../components/app/RumDashboard/utils}/projections.ts         | 0
 7 files changed, 6 insertions(+), 6 deletions(-)
 rename x-pack/plugins/apm/public/{hooks/useCallApi.ts => components/app/RumDashboard/hooks/use_call_api.ts} (100%)
 rename x-pack/plugins/apm/{common => public/components/app/RumDashboard/utils}/projections.ts (100%)

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
index ee240cfef3b21..e328ed825e27f 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '@elastic/eui';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
-import { unit, px, truncate } from '../../../../style/variables';
+import { unit, px, truncate } from '../../../../../style/variables';
 
 const BadgeText = styled.div`
   display: inline-block;
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
index 82c07a278b2ba..8e278ea2e1ceb 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
@@ -20,7 +20,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { FilterBadgeList } from './FilterBadgeList';
-import { unit, px } from '../../../../style/variables';
+import { unit, px } from '../../../../../style/variables';
 import { FilterTitleButton } from './FilterTitleButton';
 
 const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
index 3f06c6c0524f9..b9a64e6b7b0ce 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
@@ -15,7 +15,7 @@ import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { Filter } from './Filter';
 import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
-import { Projection } from '../../../../../common/projections';
+import { Projection } from '../utils/projections';
 import { LocalUIFilterName } from '../../../../../common/ui_filter';
 
 interface Props {
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
index 6f1715a7a4a4d..edc426c730ecb 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
@@ -6,7 +6,7 @@
 
 import { omit } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import { Projection } from '../../../../../common/projections';
+import { Projection } from '../utils/projections';
 import { pickKeys } from '../../../../../common/utils/pick_keys';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LocalUIFiltersAPIResponse } from '../../../../../server/lib/ui_filters/local_ui_filters';
@@ -19,7 +19,7 @@ import {
   toQuery,
 } from '../../../../components/shared/Links/url_helpers';
 import { removeUndefinedProps } from '../../../../context/url_params_context/helpers';
-import { useCallApi } from '../../../../hooks/useCallApi';
+import { useCallApi } from './use_call_api';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { LocalUIFilterName } from '../../../../../common/ui_filter';
diff --git a/x-pack/plugins/apm/public/hooks/useCallApi.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts
similarity index 100%
rename from x-pack/plugins/apm/public/hooks/useCallApi.ts
rename to x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
index 0356de62a3519..c9623a83b44fa 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -7,7 +7,7 @@
 import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
+import { Projection } from './utils/projections';
 import { RumDashboard } from './RumDashboard';
 
 import { LocalUIFilters } from './LocalUIFilters';
diff --git a/x-pack/plugins/apm/common/projections.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts
similarity index 100%
rename from x-pack/plugins/apm/common/projections.ts
rename to x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts

From 6edff799d5eebbdd3ad1a130b5bc68cd3bd63432 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 14:13:30 -0600
Subject: [PATCH 03/11] more

---
 .../TransactionTypeFilter/index.tsx           | 64 -------------------
 .../app/RumDashboard/hooks/use_call_api.ts    |  6 +-
 .../components/app/TraceOverview/index.tsx    | 24 +++----
 .../app/TransactionDetails/index.tsx          |  7 +-
 .../app/transaction_overview/index.tsx        | 13 +++-
 .../transaction_overview.test.tsx             |  4 +-
 .../public/components/shared/search_bar.tsx   |  2 +-
 .../shared/transaction_type_select.tsx        | 46 +++++++++++++
 8 files changed, 82 insertions(+), 84 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx
deleted file mode 100644
index 43f7b089a2965..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/TransactionTypeFilter/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import {
-  EuiHorizontalRule,
-  EuiRadioGroup,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { fromQuery, toQuery } from '../../Links/url_helpers';
-
-interface Props {
-  transactionTypes: string[];
-}
-
-function TransactionTypeFilter({ transactionTypes }: Props) {
-  const history = useHistory();
-  const {
-    urlParams: { transactionType },
-  } = useUrlParams();
-
-  const options = transactionTypes.map((type) => ({
-    id: type,
-    label: type,
-  }));
-
-  return (
-    <>
-      <EuiTitle size="xxxs" textTransform="uppercase">
-        <h4>
-          {i18n.translate('xpack.apm.localFilters.titles.transactionType', {
-            defaultMessage: 'Transaction type',
-          })}
-        </h4>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiHorizontalRule margin="none" />
-      <EuiSpacer size="s" />
-      <EuiRadioGroup
-        options={options}
-        idSelected={transactionType}
-        onChange={(selectedTransactionType) => {
-          const newLocation = {
-            ...history.location,
-            search: fromQuery({
-              ...toQuery(history.location.search),
-              transactionType: selectedTransactionType,
-            }),
-          };
-          history.push(newLocation);
-        }}
-      />
-    </>
-  );
-}
-
-export { TransactionTypeFilter };
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts
index 79e439c3f7e7a..ede196ab3928b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts
@@ -5,9 +5,9 @@
  */
 
 import { useMemo } from 'react';
-import { callApi } from '../services/rest/callApi';
-import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
-import { FetchOptions } from '../../common/fetch_options';
+import { callApi } from '../../../../services/rest/callApi';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { FetchOptions } from '../../../../../common/fetch_options';
 
 export function useCallApi() {
   const { http } = useApmPluginContext().core;
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
index a91821be4941a..dac09f6a8feb0 100644
--- a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
@@ -49,18 +49,18 @@ export function TraceOverview() {
     <>
       <SearchBar />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <Correlations />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <EuiPanel>
-              <TraceList
-                items={data.items}
-                isLoading={status === FETCH_STATUS.LOADING}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <Correlations />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiPanel>
+            <TraceList
+              items={data.items}
+              isLoading={status === FETCH_STATUS.LOADING}
+            />
+          </EuiPanel>
         </EuiFlexGroup>
       </EuiPage>
     </>
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
index 5c2e7593804c8..7d6a4c8ecb9e1 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -6,6 +6,7 @@
 
 import {
   EuiFlexGroup,
+  EuiFlexItem,
   EuiHorizontalRule,
   EuiPage,
   EuiPanel,
@@ -98,7 +99,11 @@ export function TransactionDetails({
       <SearchBar showTimeComparison />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
-          <Correlations />
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <Correlations />
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
           <ChartPointerEventContextProvider>
             <TransactionCharts />
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index d70c0d53a2104..21437d1149914 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -8,6 +8,7 @@ import {
   EuiCallOut,
   EuiCode,
   EuiFlexGroup,
+  EuiFlexItem,
   EuiPage,
   EuiPanel,
   EuiSpacer,
@@ -27,6 +28,7 @@ import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { SearchBar } from '../../shared/search_bar';
+import { TransactionTypeSelect } from '../../shared/transaction_type_select';
 import { Correlations } from '../Correlations';
 import { TransactionList } from './TransactionList';
 import { useRedirect } from './useRedirect';
@@ -62,7 +64,7 @@ interface TransactionOverviewProps {
 export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
   const location = useLocation();
   const { urlParams } = useUrlParams();
-  const { transactionType, transactionTypes } = useApmServiceContext();
+  const { transactionType } = useApmServiceContext();
 
   // redirect to first transaction type
   useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
@@ -86,7 +88,14 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
 
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
-          <Correlations />
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <TransactionTypeSelect />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <Correlations />
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
           {transactionType === TRANSACTION_PAGE_LOAD && (
             <>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx
index 31d90330721da..3a0be867a19f9 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx
@@ -135,7 +135,9 @@ describe('TransactionOverview', () => {
       expect(getByText(container, 'firstType')).toBeInTheDocument();
       expect(getByText(container, 'secondType')).toBeInTheDocument();
 
-      fireEvent.click(getByText(container, 'firstType'));
+      fireEvent.change(getByText(container, 'firstType').parentElement!, {
+        target: { value: 'firstType' },
+      });
 
       expect(history.push).toHaveBeenCalled();
       expect(history.location.search).toEqual(
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
index 48d329a853327..2c45b831bbc22 100644
--- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx
+++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -15,7 +15,7 @@ import { useBreakPoints } from '../../hooks/use_break_points';
 
 const SearchBarFlexGroup = styled(EuiFlexGroup)`
   margin: ${({ theme }) =>
-    `${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`};
+    `${theme.eui.euiSizeS} ${theme.eui.euiSizeS} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeS}`};
 `;
 
 interface Props {
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
new file mode 100644
index 0000000000000..1cd7e27dd58b1
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { FormEvent } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
+import { useUrlParams } from '../../context/url_params_context/use_url_params';
+import { fromQuery, toQuery } from './Links/url_helpers';
+
+export function TransactionTypeSelect() {
+  const { transactionTypes } = useApmServiceContext();
+  const history = useHistory();
+  const {
+    urlParams: { transactionType },
+  } = useUrlParams();
+
+  function handleChange(event: FormEvent<HTMLSelectElement>) {
+    const selectedTransactionType = event.currentTarget.value;
+    const newLocation = {
+      ...history.location,
+      search: fromQuery({
+        ...toQuery(history.location.search),
+        transactionType: selectedTransactionType,
+      }),
+    };
+    history.push(newLocation);
+  }
+
+  const options = transactionTypes.map((t) => ({ text: t, value: t }));
+
+  return (
+    <EuiSelect
+      onChange={handleChange}
+      options={options}
+      prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {
+        defaultMessage: 'Type',
+      })}
+      value={transactionType}
+    />
+  );
+}

From 8b05d47d51e5947a0dffd3da21ccae99c9363d4c Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 14:41:42 -0600
Subject: [PATCH 04/11] Transactions label

---
 .../app/transaction_overview/index.tsx        | 23 +++++++++++++++++--
 .../shared/transaction_type_select.tsx        | 18 ++++++++-------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index 21437d1149914..eb1d04329f498 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -88,9 +88,28 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
 
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiSpacer size="s" />
           <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem>
-              <TransactionTypeSelect />
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+                responsive={false}
+              >
+                <EuiFlexItem>
+                  <EuiTitle size="s">
+                    <h2>
+                      {i18n.translate('xpack.apm.transactionOverviewTitle', {
+                        defaultMessage: 'Transactions',
+                      })}
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem grow={2}>
+                  <TransactionTypeSelect />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size="m" />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <Correlations />
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index 1cd7e27dd58b1..bc17135751929 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -34,13 +34,15 @@ export function TransactionTypeSelect() {
   const options = transactionTypes.map((t) => ({ text: t, value: t }));
 
   return (
-    <EuiSelect
-      onChange={handleChange}
-      options={options}
-      prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {
-        defaultMessage: 'Type',
-      })}
-      value={transactionType}
-    />
+    <>
+      <EuiSelect
+        onChange={handleChange}
+        options={options}
+        prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {
+          defaultMessage: 'Type',
+        })}
+        value={transactionType}
+      />
+    </>
   );
 }

From b6ab38631d3853a3e8874246da6cc4ae19bfd054 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 14:56:01 -0600
Subject: [PATCH 05/11] some snake casing

---
 x-pack/plugins/apm/public/components/app/Home/index.tsx       | 2 +-
 .../apm/public/components/app/Main/route_config/index.tsx     | 2 +-
 .../List/List.test.tsx                                        | 0
 .../List/__fixtures__/props.json                              | 0
 .../List/__snapshots__/List.test.tsx.snap                     | 0
 .../List/index.tsx                                            | 0
 .../{ErrorGroupOverview => error_group_overview}/index.tsx    | 0
 .../components/app/service_details/service_detail_tabs.tsx    | 4 ++--
 .../{ServiceNodeOverview => service_node_overview}/index.tsx  | 0
 .../app/{TraceOverview => trace_overview}/TraceList.tsx       | 0
 .../app/{TraceOverview => trace_overview}/index.tsx           | 0
 .../Distribution/distribution.test.ts                         | 0
 .../Distribution/index.tsx                                    | 0
 .../WaterfallWithSummmary/ErrorCount.test.tsx                 | 0
 .../WaterfallWithSummmary/ErrorCount.tsx                      | 0
 .../WaterfallWithSummmary/MaybeViewTraceLink.tsx              | 0
 .../WaterfallWithSummmary/PercentOfParent.tsx                 | 0
 .../WaterfallWithSummmary/TransactionTabs.tsx                 | 0
 .../WaterfallContainer/Marks/get_agent_marks.test.ts          | 0
 .../WaterfallContainer/Marks/get_agent_marks.ts               | 0
 .../WaterfallContainer/Marks/get_error_marks.test.ts          | 0
 .../WaterfallContainer/Marks/get_error_marks.ts               | 0
 .../WaterfallWithSummmary/WaterfallContainer/Marks/index.ts   | 0
 .../WaterfallContainer/ServiceLegends.tsx                     | 0
 .../WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx | 0
 .../WaterfallContainer/Waterfall/ResponsiveFlyout.tsx         | 0
 .../Waterfall/SpanFlyout/DatabaseContext.tsx                  | 0
 .../WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx   | 0
 .../Waterfall/SpanFlyout/StickySpanProperties.tsx             | 0
 .../Waterfall/SpanFlyout/TruncateHeightSection.tsx            | 0
 .../WaterfallContainer/Waterfall/SpanFlyout/index.tsx         | 0
 .../WaterfallContainer/Waterfall/SyncBadge.stories.tsx        | 0
 .../WaterfallContainer/Waterfall/SyncBadge.tsx                | 0
 .../Waterfall/TransactionFlyout/DroppedSpansWarning.tsx       | 0
 .../WaterfallContainer/Waterfall/TransactionFlyout/index.tsx  | 0
 .../WaterfallContainer/Waterfall/WaterfallFlyout.tsx          | 0
 .../WaterfallContainer/Waterfall/WaterfallItem.tsx            | 0
 .../WaterfallContainer/Waterfall/accordion_waterfall.tsx      | 0
 .../WaterfallContainer/Waterfall/index.tsx                    | 0
 .../__snapshots__/waterfall_helpers.test.ts.snap              | 0
 .../Waterfall/waterfall_helpers/mock_responses/spans.json     | 0
 .../waterfall_helpers/mock_responses/transaction.json         | 0
 .../Waterfall/waterfall_helpers/waterfall_helpers.test.ts     | 0
 .../Waterfall/waterfall_helpers/waterfall_helpers.ts          | 0
 .../WaterfallContainer/WaterfallContainer.stories.tsx         | 0
 .../WaterfallWithSummmary/WaterfallContainer/index.tsx        | 0
 .../WaterfallContainer/waterfallContainer.stories.data.ts     | 0
 .../WaterfallWithSummmary/index.tsx                           | 0
 .../app/{TransactionDetails => transaction_details}/index.tsx | 0
 .../use_waterfall_fetcher.ts                                  | 0
 .../public/components/shared/Summary/DurationSummaryItem.tsx  | 2 +-
 .../shared/charts/Timeline/Marker/AgentMarker.test.tsx        | 2 +-
 .../components/shared/charts/Timeline/Marker/AgentMarker.tsx  | 2 +-
 .../shared/charts/Timeline/Marker/ErrorMarker.test.tsx        | 2 +-
 .../components/shared/charts/Timeline/Marker/ErrorMarker.tsx  | 2 +-
 .../components/shared/charts/Timeline/Marker/index.test.tsx   | 4 ++--
 .../public/components/shared/charts/Timeline/Marker/index.tsx | 4 ++--
 .../components/shared/charts/Timeline/VerticalLines.tsx       | 2 +-
 .../apm/public/components/shared/charts/Timeline/index.tsx    | 4 ++--
 59 files changed, 16 insertions(+), 16 deletions(-)
 rename x-pack/plugins/apm/public/components/app/{ErrorGroupOverview => error_group_overview}/List/List.test.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{ErrorGroupOverview => error_group_overview}/List/__fixtures__/props.json (100%)
 rename x-pack/plugins/apm/public/components/app/{ErrorGroupOverview => error_group_overview}/List/__snapshots__/List.test.tsx.snap (100%)
 rename x-pack/plugins/apm/public/components/app/{ErrorGroupOverview => error_group_overview}/List/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{ErrorGroupOverview => error_group_overview}/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{ServiceNodeOverview => service_node_overview}/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TraceOverview => trace_overview}/TraceList.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TraceOverview => trace_overview}/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/Distribution/distribution.test.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/Distribution/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/ErrorCount.test.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/ErrorCount.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/MaybeViewTraceLink.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/PercentOfParent.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/TransactionTabs.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/WaterfallWithSummmary/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/index.tsx (100%)
 rename x-pack/plugins/apm/public/components/app/{TransactionDetails => transaction_details}/use_waterfall_fetcher.ts (100%)

diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
index 5b1ddaf1e49ef..779f5324663a6 100644
--- a/x-pack/plugins/apm/public/components/app/Home/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -15,7 +15,7 @@ import { useTraceOverviewHref } from '../../shared/Links/apm/TraceOverviewLink';
 import { MainTabs } from '../../shared/main_tabs';
 import { ServiceMap } from '../ServiceMap';
 import { ServiceInventory } from '../service_inventory';
-import { TraceOverview } from '../TraceOverview';
+import { TraceOverview } from '../trace_overview';
 
 interface Tab {
   key: string;
diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
index 9e90e6cfbbc2b..25f6e2d086629 100644
--- a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -22,7 +22,7 @@ import { AnomalyDetection } from '../../Settings/anomaly_detection';
 import { ApmIndices } from '../../Settings/ApmIndices';
 import { CustomizeUI } from '../../Settings/CustomizeUI';
 import { TraceLink } from '../../TraceLink';
-import { TransactionDetails } from '../../TransactionDetails';
+import { TransactionDetails } from '../../transaction_details';
 import {
   CreateAgentConfigurationRouteHandler,
   EditAgentConfigurationRouteHandler,
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/List.test.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/List.test.tsx
rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__fixtures__/props.json b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__fixtures__/props.json
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__fixtures__/props.json
rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/__fixtures__/props.json
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__snapshots__/List.test.tsx.snap
rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
rename to x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
rename to x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
index fe3cb541617a3..2843899a9bc98 100644
--- a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -19,9 +19,9 @@ import { useServiceNodeOverviewHref } from '../../shared/Links/apm/ServiceNodeOv
 import { useServiceOverviewHref } from '../../shared/Links/apm/service_overview_link';
 import { useTransactionsOverviewHref } from '../../shared/Links/apm/transaction_overview_link';
 import { MainTabs } from '../../shared/main_tabs';
-import { ErrorGroupOverview } from '../ErrorGroupOverview';
+import { ErrorGroupOverview } from '../error_group_overview';
 import { ServiceMap } from '../ServiceMap';
-import { ServiceNodeOverview } from '../ServiceNodeOverview';
+import { ServiceNodeOverview } from '../service_node_overview';
 import { ServiceMetrics } from '../service_metrics';
 import { ServiceOverview } from '../service_overview';
 import { TransactionOverview } from '../transaction_overview';
diff --git a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
rename to x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
rename to x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TraceOverview/index.tsx
rename to x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/distribution.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/distribution.test.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/distribution.test.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/Distribution/distribution.test.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.test.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.test.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.test.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/ErrorCount.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/MaybeViewTraceLink.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/MaybeViewTraceLink.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/PercentOfParent.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/PercentOfParent.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/TransactionTabs.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/TransactionTabs.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.test.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.test.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/index.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/DroppedSpansWarning.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/spans.json
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/mock_responses/transaction.json
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/waterfallContainer.stories.data.ts
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
rename to x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/use_waterfall_fetcher.ts b/x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/TransactionDetails/use_waterfall_fetcher.ts
rename to x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts
diff --git a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
index 7e88ebc7639e3..2893353eb4665 100644
--- a/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip, EuiText } from '@elastic/eui';
 import { asDuration } from '../../../../common/utils/formatters';
-import { PercentOfParent } from '../../app/TransactionDetails/WaterfallWithSummmary/PercentOfParent';
+import { PercentOfParent } from '../../app/transaction_details/WaterfallWithSummmary/PercentOfParent';
 
 interface Props {
   duration: number;
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
index aaaaf5174e4fd..57f2dbd9f56e9 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { AgentMarker } from './AgentMarker';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 
 describe('AgentMarker', () => {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
index a6b46f4a64691..ec1e8f9f5da87 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
@@ -11,7 +11,7 @@ import { asDuration } from '../../../../../../common/utils/formatters';
 import { useTheme } from '../../../../../hooks/use_theme';
 import { px, units } from '../../../../../style/variables';
 import { Legend } from '../../Legend';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 const NameContainer = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
index e69b23cf5f008..8191f0c9f9f69 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
@@ -13,7 +13,7 @@ import {
   expectTextsInDocument,
   renderWithTheme,
 } from '../../../../../utils/testHelpers';
-import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 import { ErrorMarker } from './ErrorMarker';
 
 function Wrapper({ children }: { children?: ReactNode }) {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
index c6847bd5e674d..f4ad5e6bfcb8b 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
@@ -15,7 +15,7 @@ import {
 } from '../../../../../../common/elasticsearch_fieldnames';
 import { useUrlParams } from '../../../../../context/url_params_context/use_url_params';
 import { px, unit, units } from '../../../../../style/variables';
-import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 import { ErrorDetailLink } from '../../../Links/apm/ErrorDetailLink';
 import { Legend, Shape } from '../../Legend';
 
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx
index 9373a7bb0fd69..bee020e6a29db 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { Marker } from './';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
-import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 describe('Marker', () => {
   it('renders agent marker', () => {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
index 71a1639af6dcc..d07a28a50d182 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
@@ -9,8 +9,8 @@ import styled from 'styled-components';
 import { px } from '../../../../../style/variables';
 import { AgentMarker } from './AgentMarker';
 import { ErrorMarker } from './ErrorMarker';
-import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
-import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 interface Props {
   mark: ErrorMark | AgentMark;
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
index ee1c899123994..8e878da5d4139 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { VerticalGridLines, XYPlot } from 'react-vis';
 import { useTheme } from '../../../../hooks/use_theme';
-import { Mark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks';
+import { Mark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks';
 import { PlotValues } from './plotUtils';
 
 interface VerticalLinesProps {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx
index e97d4cf34edfa..811cb104ad89e 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.tsx
@@ -10,8 +10,8 @@ import { makeWidthFlexible } from 'react-vis';
 import { getPlotValues } from './plotUtils';
 import { TimelineAxis } from './TimelineAxis';
 import { VerticalLines } from './VerticalLines';
-import { ErrorMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
-import { AgentMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { AgentMark } from '../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 export type Mark = AgentMark | ErrorMark;
 

From beda9a872c7c848d2821fabe1411b609dbc92dcb Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 15:53:36 -0600
Subject: [PATCH 06/11] i18n fix

---
 x-pack/plugins/translations/translations/ja-JP.json | 1 -
 x-pack/plugins/translations/translations/zh-CN.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 1c058245f04cd..c0d2cf6ab4d39 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5106,7 +5106,6 @@
     "xpack.apm.localFilters.titles.serviceName": "サービス名",
     "xpack.apm.localFilters.titles.serviceVersion": "サービスバージョン",
     "xpack.apm.localFilters.titles.transactionResult": "トランザクション結果",
-    "xpack.apm.localFilters.titles.transactionType": "トランザクションタイプ",
     "xpack.apm.localFilters.titles.transactionUrl": "Url",
     "xpack.apm.localFiltersTitle": "フィルター",
     "xpack.apm.metadataTable.section.agentLabel": "エージェント",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index e7dbc0c161a37..f19d175262dcc 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5114,7 +5114,6 @@
     "xpack.apm.localFilters.titles.serviceName": "服务名称",
     "xpack.apm.localFilters.titles.serviceVersion": "服务版本",
     "xpack.apm.localFilters.titles.transactionResult": "事务结果",
-    "xpack.apm.localFilters.titles.transactionType": "事务类型",
     "xpack.apm.localFilters.titles.transactionUrl": "URL",
     "xpack.apm.localFiltersTitle": "筛选",
     "xpack.apm.metadataTable.section.agentLabel": "代理",

From 8088f1346b92d7384919d8cf3e4eb0d179746f29 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Fri, 29 Jan 2021 16:27:19 -0600
Subject: [PATCH 07/11] Remove unused ui filters endpoints

---
 .../apm/server/routes/create_apm_api.ts       |  16 +-
 .../plugins/apm/server/routes/ui_filters.ts   | 154 +-----------------
 2 files changed, 10 insertions(+), 160 deletions(-)

diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index aeaa6f90a7426..7121a5973089c 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -64,15 +64,8 @@ import {
   transactionThroughputChatsRoute,
 } from './transactions';
 import {
-  errorGroupsLocalFiltersRoute,
-  metricsLocalFiltersRoute,
-  servicesLocalFiltersRoute,
-  tracesLocalFiltersRoute,
-  transactionGroupsLocalFiltersRoute,
-  transactionsLocalFiltersRoute,
-  serviceNodesLocalFiltersRoute,
-  uiFiltersEnvironmentsRoute,
   rumOverviewLocalFiltersRoute,
+  uiFiltersEnvironmentsRoute,
 } from './ui_filters';
 import { serviceMapRoute, serviceMapServiceNodeRoute } from './service_map';
 import {
@@ -174,13 +167,6 @@ const createApmApi = () => {
     .add(transactionThroughputChatsRoute)
 
     // UI filters
-    .add(errorGroupsLocalFiltersRoute)
-    .add(metricsLocalFiltersRoute)
-    .add(servicesLocalFiltersRoute)
-    .add(tracesLocalFiltersRoute)
-    .add(transactionGroupsLocalFiltersRoute)
-    .add(transactionsLocalFiltersRoute)
-    .add(serviceNodesLocalFiltersRoute)
     .add(uiFiltersEnvironmentsRoute)
 
     // Service map
diff --git a/x-pack/plugins/apm/server/routes/ui_filters.ts b/x-pack/plugins/apm/server/routes/ui_filters.ts
index dae2962a76d10..b31c3ba260c83 100644
--- a/x-pack/plugins/apm/server/routes/ui_filters.ts
+++ b/x-pack/plugins/apm/server/routes/ui_filters.ts
@@ -6,29 +6,23 @@
 
 import * as t from 'io-ts';
 import { omit } from 'lodash';
+import { jsonRt } from '../../common/runtime_types/json_rt';
+import { LocalUIFilterName } from '../../common/ui_filter';
+import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions';
+import { getEsFilter } from '../lib/helpers/convert_ui_filters/get_es_filter';
 import {
-  setupRequest,
   Setup,
+  setupRequest,
   SetupTimeRange,
 } from '../lib/helpers/setup_request';
 import { getEnvironments } from '../lib/ui_filters/get_environments';
-import { Projection } from '../projections/typings';
-import { localUIFilterNames } from '../lib/ui_filters/local_ui_filters/config';
-import { getEsFilter } from '../lib/helpers/convert_ui_filters/get_es_filter';
 import { getLocalUIFilters } from '../lib/ui_filters/local_ui_filters';
-import { getServicesProjection } from '../projections/services';
-import { getTransactionGroupsProjection } from '../projections/transaction_groups';
-import { getMetricsProjection } from '../projections/metrics';
-import { getErrorGroupsProjection } from '../projections/errors';
-import { getTransactionsProjection } from '../projections/transactions';
-import { createRoute } from './create_route';
-import { uiFiltersRt, rangeRt } from './default_api_types';
-import { jsonRt } from '../../common/runtime_types/json_rt';
-import { getServiceNodesProjection } from '../projections/service_nodes';
+import { localUIFilterNames } from '../lib/ui_filters/local_ui_filters/config';
 import { getRumPageLoadTransactionsProjection } from '../projections/rum_page_load_transactions';
-import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions';
+import { Projection } from '../projections/typings';
+import { createRoute } from './create_route';
+import { rangeRt, uiFiltersRt } from './default_api_types';
 import { APMRequestHandlerContext } from './typings';
-import { LocalUIFilterName } from '../../common/ui_filter';
 
 export const uiFiltersEnvironmentsRoute = createRoute({
   endpoint: 'GET /api/apm/ui_filters/environments',
@@ -121,136 +115,6 @@ function createLocalFiltersRoute<
   });
 }
 
-export const servicesLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: `GET /api/apm/ui_filters/local_filters/services`,
-  getProjection: async ({ context, setup }) => {
-    const searchAggregatedTransactions = await getSearchAggregatedTransactions(
-      setup
-    );
-
-    return getServicesProjection({ setup, searchAggregatedTransactions });
-  },
-  queryRt: t.type({}),
-});
-
-export const transactionGroupsLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/transactionGroups',
-  getProjection: async ({ context, setup, query }) => {
-    const { transactionType, serviceName, transactionName } = query;
-
-    const searchAggregatedTransactions = await getSearchAggregatedTransactions(
-      setup
-    );
-
-    return getTransactionGroupsProjection({
-      setup,
-      options: {
-        type: 'top_transactions',
-        transactionType,
-        serviceName,
-        transactionName,
-        searchAggregatedTransactions,
-      },
-    });
-  },
-  queryRt: t.intersection([
-    t.type({
-      serviceName: t.string,
-      transactionType: t.string,
-    }),
-    t.partial({
-      transactionName: t.string,
-    }),
-  ]),
-});
-
-export const tracesLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/traces',
-  getProjection: async ({ setup, context }) => {
-    const searchAggregatedTransactions = await getSearchAggregatedTransactions(
-      setup
-    );
-
-    return getTransactionGroupsProjection({
-      setup,
-      options: { type: 'top_traces', searchAggregatedTransactions },
-    });
-  },
-  queryRt: t.type({}),
-});
-
-export const transactionsLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/transactions',
-  getProjection: async ({ context, setup, query }) => {
-    const { transactionType, serviceName, transactionName } = query;
-
-    const searchAggregatedTransactions = await getSearchAggregatedTransactions(
-      setup
-    );
-
-    return getTransactionsProjection({
-      setup,
-      transactionType,
-      serviceName,
-      transactionName,
-      searchAggregatedTransactions,
-    });
-  },
-  queryRt: t.type({
-    transactionType: t.string,
-    transactionName: t.string,
-    serviceName: t.string,
-  }),
-});
-
-export const metricsLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/metrics',
-  getProjection: ({ setup, query }) => {
-    const { serviceName, serviceNodeName } = query;
-    return getMetricsProjection({
-      setup,
-      serviceName,
-      serviceNodeName,
-    });
-  },
-  queryRt: t.intersection([
-    t.type({
-      serviceName: t.string,
-    }),
-    t.partial({
-      serviceNodeName: t.string,
-    }),
-  ]),
-});
-
-export const errorGroupsLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/errorGroups',
-  getProjection: ({ setup, query }) => {
-    const { serviceName } = query;
-    return getErrorGroupsProjection({
-      setup,
-      serviceName,
-    });
-  },
-  queryRt: t.type({
-    serviceName: t.string,
-  }),
-});
-
-export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({
-  endpoint: 'GET /api/apm/ui_filters/local_filters/serviceNodes',
-  getProjection: ({ setup, query }) => {
-    const { serviceName } = query;
-    return getServiceNodesProjection({
-      setup,
-      serviceName,
-    });
-  },
-  queryRt: t.type({
-    serviceName: t.string,
-  }),
-});
-
 export const rumOverviewLocalFiltersRoute = createLocalFiltersRoute({
   endpoint: 'GET /api/apm/ui_filters/local_filters/rumOverview',
   getProjection: async ({ setup }) => {

From 77bfde8a991c0b78321f5d94c74bd1ddb443e85f Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Tue, 2 Feb 2021 15:02:10 -0600
Subject: [PATCH 08/11] Updates to select

---
 .../shared/transaction_type_select.tsx        | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index bc17135751929..c15984ff8b3c0 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -6,12 +6,20 @@
 
 import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { FormEvent } from 'react';
+import React, { FormEvent, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../context/url_params_context/use_url_params';
 import { fromQuery, toQuery } from './Links/url_helpers';
 
+// The default transaction type (for non-RUM services) is "request". Set the
+// min-width on here to the width when "request" is loaded so it doesn't start
+// out collapsed and change its width when the list of transaction types is loaded.
+const EuiSelectWithWidth = styled(EuiSelect)`
+  min-width: 157px;
+`;
+
 export function TransactionTypeSelect() {
   const { transactionTypes } = useApmServiceContext();
   const history = useHistory();
@@ -19,23 +27,26 @@ export function TransactionTypeSelect() {
     urlParams: { transactionType },
   } = useUrlParams();
 
-  function handleChange(event: FormEvent<HTMLSelectElement>) {
-    const selectedTransactionType = event.currentTarget.value;
-    const newLocation = {
-      ...history.location,
-      search: fromQuery({
-        ...toQuery(history.location.search),
-        transactionType: selectedTransactionType,
-      }),
-    };
-    history.push(newLocation);
-  }
+  const handleChange = useCallback(
+    (event: FormEvent<HTMLSelectElement>) => {
+      const selectedTransactionType = event.currentTarget.value;
+      const newLocation = {
+        ...history.location,
+        search: fromQuery({
+          ...toQuery(history.location.search),
+          transactionType: selectedTransactionType,
+        }),
+      };
+      history.push(newLocation);
+    },
+    [history]
+  );
 
   const options = transactionTypes.map((t) => ({ text: t, value: t }));
 
   return (
     <>
-      <EuiSelect
+      <EuiSelectWithWidth
         onChange={handleChange}
         options={options}
         prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {

From 0bd60315022cb1eeeecc3dc6154c5d26e8ffba1f Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Tue, 2 Feb 2021 15:25:04 -0600
Subject: [PATCH 09/11] remove projections

---
 .../app/RumDashboard/LocalUIFilters/index.tsx    |  4 ----
 .../app/RumDashboard/hooks/useLocalUIFilters.ts  |  6 +-----
 .../public/components/app/RumDashboard/index.tsx |  7 ++-----
 .../app/RumDashboard/utils/projections.ts        | 16 ----------------
 4 files changed, 3 insertions(+), 30 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
index b9a64e6b7b0ce..9c8d3b27406eb 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
@@ -15,11 +15,9 @@ import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { Filter } from './Filter';
 import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
-import { Projection } from '../utils/projections';
 import { LocalUIFilterName } from '../../../../../common/ui_filter';
 
 interface Props {
-  projection: Projection;
   filterNames: LocalUIFilterName[];
   params?: Record<string, string | number | boolean | undefined>;
   showCount?: boolean;
@@ -32,7 +30,6 @@ const ButtonWrapper = styled.div`
 `;
 
 function LocalUIFilters({
-  projection,
   params,
   filterNames,
   children,
@@ -41,7 +38,6 @@ function LocalUIFilters({
 }: Props) {
   const { filters, setFilterValue, clearValues } = useLocalUIFilters({
     filterNames,
-    projection,
     params,
     shouldFetch,
   });
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
index 0e2a353ab07c9..005c2da84c16e 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts
@@ -21,7 +21,6 @@ import {
 import { removeUndefinedProps } from '../../../../context/url_params_context/helpers';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../../hooks/use_fetcher';
-import { Projection } from '../utils/projections';
 
 const getInitialData = (
   filterNames: LocalUIFilterName[]
@@ -33,12 +32,10 @@ const getInitialData = (
 };
 
 export function useLocalUIFilters({
-  projection,
   filterNames,
   params,
   shouldFetch,
 }: {
-  projection: Projection;
   filterNames: LocalUIFilterName[];
   params?: Record<string, string | number | boolean | undefined>;
   shouldFetch: boolean;
@@ -74,7 +71,7 @@ export function useLocalUIFilters({
     (callApmApi) => {
       if (shouldFetch && urlParams.start && urlParams.end) {
         return callApmApi({
-          endpoint: `GET /api/apm/ui_filters/local_filters/${projection}` as const,
+          endpoint: `GET /api/apm/ui_filters/local_filters/rumOverview`,
           params: {
             query: {
               uiFilters: JSON.stringify(uiFilters),
@@ -89,7 +86,6 @@ export function useLocalUIFilters({
       }
     },
     [
-      projection,
       uiFilters,
       urlParams.start,
       urlParams.end,
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
index c9623a83b44fa..907640d44daac 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -4,13 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import React, { useMemo } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from './utils/projections';
-import { RumDashboard } from './RumDashboard';
-
 import { LocalUIFilters } from './LocalUIFilters';
+import { RumDashboard } from './RumDashboard';
 import { URLFilter } from './URLFilter';
 
 export function RumOverview() {
@@ -20,7 +18,6 @@ export function RumOverview() {
   const localUIFiltersConfig = useMemo(() => {
     const config: React.ComponentProps<typeof LocalUIFilters> = {
       filterNames: ['location', 'device', 'os', 'browser'],
-      projection: Projection.rumOverview,
     };
 
     return config;
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts
deleted file mode 100644
index a5fd9d3951cc9..0000000000000
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/utils/projections.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export enum Projection {
-  services = 'services',
-  transactionGroups = 'transactionGroups',
-  traces = 'traces',
-  transactions = 'transactions',
-  metrics = 'metrics',
-  errorGroups = 'errorGroups',
-  serviceNodes = 'serviceNodes',
-  rumOverview = 'rumOverview',
-}

From 42c47bbba7442de7cea067c2c56e087a9884883f Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Wed, 3 Feb 2021 00:14:13 -0600
Subject: [PATCH 10/11] Use urlHelpers.push

---
 .../components/shared/transaction_type_select.tsx   | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index c15984ff8b3c0..0779d26bbb957 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -11,7 +11,7 @@ import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../context/url_params_context/use_url_params';
-import { fromQuery, toQuery } from './Links/url_helpers';
+import * as urlHelpers from './Links/url_helpers';
 
 // The default transaction type (for non-RUM services) is "request". Set the
 // min-width on here to the width when "request" is loaded so it doesn't start
@@ -30,14 +30,9 @@ export function TransactionTypeSelect() {
   const handleChange = useCallback(
     (event: FormEvent<HTMLSelectElement>) => {
       const selectedTransactionType = event.currentTarget.value;
-      const newLocation = {
-        ...history.location,
-        search: fromQuery({
-          ...toQuery(history.location.search),
-          transactionType: selectedTransactionType,
-        }),
-      };
-      history.push(newLocation);
+      urlHelpers.push(history, {
+        query: { transactionType: selectedTransactionType },
+      });
     },
     [history]
   );

From d0315fe78a858dcf3a1ed86bb8cd2c6f16acceb6 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Thu, 4 Feb 2021 09:35:48 -0600
Subject: [PATCH 11/11] License change

---
 .../apm/public/components/shared/transaction_type_select.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index 0779d26bbb957..772b42ed13577 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -1,7 +1,8 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
+ * 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 { EuiSelect } from '@elastic/eui';