diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx index f6ec2fb24018f..78c8f151b82d9 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx @@ -6,12 +6,10 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import React from 'react'; import { useTrackPageview } from '../../../../../observability/public'; import { isRumAgentName } from '../../../../common/agent_name'; import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context'; -import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; import { useBreakPoints } from '../../../hooks/use_break_points'; import { LatencyChart } from '../../shared/charts/latency_chart'; @@ -46,22 +44,12 @@ export function ServiceOverview({ // observe the window width and set the flex directions of rows accordingly const { isMedium } = useBreakPoints(); const rowDirection = isMedium ? 'column' : 'row'; - - const { transactionType } = useApmServiceContext(); - const transactionTypeLabel = i18n.translate( - 'xpack.apm.serviceOverview.searchBar.transactionTypeLabel', - { defaultMessage: 'Type: {transactionType}', values: { transactionType } } - ); const isRumAgent = isRumAgentName(agentName); return ( - + diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx index 6d7edcd0a1e35..364266d277482 100644 --- a/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/trace_overview/index.tsx @@ -49,7 +49,7 @@ export function TraceOverview() { return ( <> - + diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx index 0a322cfc9c80b..d6f45a4a45cc8 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx @@ -95,7 +95,7 @@ export function TransactionDetails({

{transactionName}

- + 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 0814c6d95b96a..9e2743d7b5986 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 @@ -9,7 +9,6 @@ import { EuiCallOut, EuiCode, EuiFlexGroup, - EuiFlexItem, EuiPage, EuiPanel, EuiSpacer, @@ -28,7 +27,6 @@ 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 { TransactionList } from './TransactionList'; import { useRedirect } from './useRedirect'; import { useTransactionListFetcher } from './use_transaction_list'; @@ -82,33 +80,9 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) { return ( <> - + - - - - - - -

- {i18n.translate('xpack.apm.transactionOverviewTitle', { - defaultMessage: 'Transactions', - })} -

-
-
- - - -
- -
-
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 aeb2a2c6390fc..ed9a196bbcd9d 100644 --- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx +++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx @@ -20,6 +20,7 @@ import { TimeComparison } from './time_comparison'; import { useBreakPoints } from '../../hooks/use_break_points'; import { useKibanaUrl } from '../../hooks/useKibanaUrl'; import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context'; +import { TransactionTypeSelect } from './transaction_type_select'; const EuiFlexGroupSpaced = euiStyled(EuiFlexGroup)` margin: ${({ theme }) => @@ -29,7 +30,7 @@ const EuiFlexGroupSpaced = euiStyled(EuiFlexGroup)` interface Props { prepend?: React.ReactNode | string; showTimeComparison?: boolean; - showCorrelations?: boolean; + showTransactionTypeSelector?: boolean; } function getRowDirection(showColumn: boolean) { @@ -85,7 +86,7 @@ function DebugQueryCallout() { export function SearchBar({ prepend, showTimeComparison = false, - showCorrelations = false, + showTransactionTypeSelector = false, }: Props) { const { isMedium, isLarge } = useBreakPoints(); const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 }; @@ -94,8 +95,13 @@ export function SearchBar({ <> + {showTransactionTypeSelector && ( + + + + )} - +