From eb25c693409d38809fa919a29b6967bf47bf9ba0 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Mon, 12 Apr 2021 12:57:22 -0400 Subject: [PATCH] [APM] Moves the transaction type selector to the search bar (#96685) * [APM] Moves the Transaction type selector to the search bar (#91131) * - Replaces the prepend label on the search bar with the transaction type selector - Adds the transaction type selector to the service overview page - Removes title from the Transactions list page * removes unused i18n items Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/app/service_overview/index.tsx | 14 +--------- .../components/app/trace_overview/index.tsx | 2 +- .../app/transaction_details/index.tsx | 2 +- .../app/transaction_overview/index.tsx | 28 +------------------ .../public/components/shared/search_bar.tsx | 12 ++++++-- .../translations/translations/ja-JP.json | 2 -- .../translations/translations/zh-CN.json | 2 -- 7 files changed, 13 insertions(+), 49 deletions(-) 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 f6ec2fb24018..78c8f151b82d 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 6d7edcd0a1e3..364266d27748 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 0a322cfc9c80..d6f45a4a45cc 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 0814c6d95b96..9e2743d7b598 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 aeb2a2c6390f..ed9a196bbcd9 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 && ( + + + + )} - +