diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCountBadge.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCountBadge.tsx index b8784c8cd0392..4c3ec3ca9f308 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCountBadge.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCountBadge.tsx @@ -8,12 +8,10 @@ import { EuiBadge } from '@elastic/eui'; import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json'; import React from 'react'; -type Props = React.ComponentProps & { - errorCount: number; -}; +type Props = React.ComponentProps; -export const ErrorCountBadge = ({ errorCount = 0, ...rest }: Props) => ( +export const ErrorCountBadge = ({ children, ...rest }: Props) => ( - {errorCount} + {children} ); diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfTrace.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfTrace.tsx new file mode 100644 index 0000000000000..bf05d882ea545 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfTrace.tsx @@ -0,0 +1,54 @@ +/* + * 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 React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiToolTip } from '@elastic/eui'; +import { asPercent } from '../../../../utils/formatters'; + +interface PercentOfTraceProps { + duration: number; + totalDuration?: number; +} + +export function PercentOfTrace({ + duration, + totalDuration +}: PercentOfTraceProps) { + totalDuration = totalDuration || duration; + const isOver100 = duration > totalDuration; + const percentOfTrace = isOver100 + ? '>100%' + : asPercent(duration, totalDuration, ''); + + const percentOfTraceText = i18n.translate( + 'xpack.apm.transactionDetails.percentOfTrace', + { + defaultMessage: '{value} of trace', + values: { value: percentOfTrace } + } + ); + + return ( + <> + {isOver100 ? ( + + <>{percentOfTraceText} + + ) : ( + `(${percentOfTraceText})` + )} + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/StickyTransactionProperties.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/StickyTransactionProperties.tsx index aa2eddf2a18a0..a9fb18776d58b 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/StickyTransactionProperties.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/StickyTransactionProperties.tsx @@ -7,7 +7,6 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { idx } from '@kbn/elastic-idx'; -import { EuiToolTip } from '@elastic/eui'; import styled from 'styled-components'; import { TRANSACTION_DURATION, @@ -18,7 +17,7 @@ import { } from '../../../../../common/elasticsearch_fieldnames'; import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; import { Transaction } from '../../../../../typings/es_schemas/ui/Transaction'; -import { asPercent, asTime } from '../../../../utils/formatters'; +import { asTime } from '../../../../utils/formatters'; import { IStickyProperty, StickyProperties @@ -26,6 +25,7 @@ import { import { ErrorCountBadge } from './ErrorCountBadge'; import { isRumAgentName } from '../../../../../common/agent_name'; import { fontSize } from '../../../../style/variables'; +import { PercentOfTrace } from './PercentOfTrace'; interface Props { transaction: Transaction; @@ -96,22 +96,7 @@ export function StickyTransactionProperties({ defaultMessage: '% of trace' } ), - val: - totalDuration !== undefined && duration > totalDuration ? ( - - >100% - - ) : ( - asPercent(duration, totalDuration, NOT_AVAILABLE_LABEL) - ), + val: , width: '25%' }, { @@ -131,7 +116,7 @@ export function StickyTransactionProperties({ ), val: errorCount ? ( <> - + {errorCount}   {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', { diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Duration.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Duration.tsx new file mode 100644 index 0000000000000..a22344d9c8eaa --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Duration.tsx @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiToolTip, EuiText } from '@elastic/eui'; +import styled from 'styled-components'; +import { asTime } from '../../../../../utils/formatters'; +import { PercentOfTrace } from '../PercentOfTrace'; + +interface DurationProps { + duration: number; + totalDuration?: number; +} + +const Span = styled('span')` + white-space: nowrap; +`; + +export function Duration({ duration, totalDuration }: DurationProps) { + totalDuration = totalDuration || duration; + const label = i18n.translate('xpack.apm.transactionDetails.durationLabel', { + defaultMessage: 'Duration' + }); + + return ( + + + {asTime(duration)} + {' '} + + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.test.tsx new file mode 100644 index 0000000000000..26bd54909d323 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.test.tsx @@ -0,0 +1,86 @@ +/* + * 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 React from 'react'; +import { shallow, mount } from 'enzyme'; +import { HttpInfo } from './HttpInfo'; +import * as exampleTransactions from './__fixtures__/transactions'; +import { palettes } from '@elastic/eui'; +import { cloneDeep, set } from 'lodash'; + +describe('HttpInfo', () => { + describe('render', () => { + const transaction = exampleTransactions.httpOk; + const url = 'https://example.com'; + const props = { transaction, url }; + + it('renders', () => { + expect(() => shallow()).not.toThrowError(); + }); + + describe('with status code 200', () => { + it('shows a success color', () => { + const wrapper = mount(); + + expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual( + palettes.euiPaletteForStatus.colors[0] + ); + }); + }); + + describe('with status code 301', () => { + it('shows a warning color', () => { + const p = cloneDeep(props); + set(p, 'transaction.http.response.status_code', 301); + + const wrapper = mount(); + + expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual( + palettes.euiPaletteForStatus.colors[4] + ); + }); + }); + + describe('with status code 404', () => { + it('shows a error color', () => { + const p = cloneDeep(props); + set(p, 'transaction.http.response.status_code', 404); + + const wrapper = mount(); + + expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual( + palettes.euiPaletteForStatus.colors[9] + ); + }); + }); + + describe('with status code 502', () => { + it('shows a error color', () => { + const p = cloneDeep(props); + set(p, 'transaction.http.response.status_code', 502); + + const wrapper = mount(); + + expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual( + palettes.euiPaletteForStatus.colors[9] + ); + }); + }); + + describe('with some other status code', () => { + it('shows the default color', () => { + const p = cloneDeep(props); + set(p, 'transaction.http.response.status_code', 700); + + const wrapper = mount(); + + expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual( + 'default' + ); + }); + }); + }); +}); diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.tsx new file mode 100644 index 0000000000000..477904115b0a1 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/HttpInfo.tsx @@ -0,0 +1,95 @@ +/* + * 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 React from 'react'; +import { EuiToolTip, EuiBadge } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import styled from 'styled-components'; +import { idx } from '@kbn/elastic-idx/target'; +import { palettes } from '@elastic/eui'; +import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction'; +import { units, px, truncate, unit } from '../../../../../style/variables'; +import { statusCodes } from './statusCodes'; + +const statusColors = { + success: palettes.euiPaletteForStatus.colors[0], + warning: palettes.euiPaletteForStatus.colors[4], + error: palettes.euiPaletteForStatus.colors[9] +}; + +function getStatusColor(status: number) { + const colors: { [key: string]: string } = { + 2: statusColors.success, + 3: statusColors.warning, + 4: statusColors.error, + 5: statusColors.error + }; + + return colors[status.toString().substr(0, 1)] || 'default'; +} + +interface HttpStatusBadgeProps { + status: number; +} +function HttpStatusBadge({ status }: HttpStatusBadgeProps) { + const label = i18n.translate('xpack.apm.transactionDetails.statusCode', { + defaultMessage: 'Status code' + }); + + return ( + + + {status} {statusCodes[status.toString()]} + + + ); +} + +const HttpInfoBadge = styled(EuiBadge)` + margin-right: ${px(units.quarter)}; +`; + +const Url = styled('span')` + display: inline-block; + vertical-align: bottom; + ${truncate(px(unit * 24))}; +`; +interface HttpInfoProps { + transaction: Transaction; + url: string; +} + +const Span = styled('span')` + white-space: nowrap; +`; + +export function HttpInfo({ transaction, url }: HttpInfoProps) { + const method = ( + idx(transaction, _ => _.http.request.method) || '' + ).toUpperCase(); + const status = idx(transaction, _ => _.http.response.status_code); + + const methodLabel = i18n.translate( + 'xpack.apm.transactionDetails.requestMethodLabel', + { + defaultMessage: 'Request method' + } + ); + + return ( + + + + {method} + {' '} + + {url} + + + {status && } + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Result.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Result.tsx new file mode 100644 index 0000000000000..635282145e665 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Result.tsx @@ -0,0 +1,27 @@ +/* + * 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 React from 'react'; +import { EuiToolTip, EuiBadge } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +interface ResultProps { + result: string; +} + +export function Result({ result }: ResultProps) { + return ( + + + {result} + + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Timestamp.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Timestamp.tsx new file mode 100644 index 0000000000000..0a3aa4383bacc --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/Timestamp.tsx @@ -0,0 +1,30 @@ +/* + * 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 React from 'react'; +import moment from 'moment'; +import { EuiToolTip, EuiText } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +interface TimestampProps { + transactionTimestamp: string; +} + +export function Timestamp({ transactionTimestamp }: TimestampProps) { + const timestamp = moment(transactionTimestamp).format( + 'MMM Do YYYY HH:mm:ss.SSS' + ); + + const label = i18n.translate('xpack.apm.transactionDetails.timestampLabel', { + defaultMessage: 'Timestamp' + }); + + return ( + + {timestamp} + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.test.tsx new file mode 100644 index 0000000000000..3a2d0e299a054 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.test.tsx @@ -0,0 +1,27 @@ +/* + * 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 { shallow } from 'enzyme'; +import { TraceSummary } from '.'; +import React from 'react'; +import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction'; +import * as exampleTransactions from './__fixtures__/transactions'; + +describe('TraceSummary', () => { + describe('render', () => { + const transaction: Transaction = exampleTransactions.httpOk; + + const props = { + errorCount: 0, + totalDuration: 0, + transaction + }; + + it('renders', () => { + expect(() => shallow()).not.toThrowError(); + }); + }); +}); diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.tsx new file mode 100644 index 0000000000000..6f4138d3fcb69 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/TraceSummary.tsx @@ -0,0 +1,93 @@ +/* + * 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 React from 'react'; +import { EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { idx } from '@kbn/elastic-idx'; +import { i18n } from '@kbn/i18n'; +import styled from 'styled-components'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction'; +import { isRumAgentName } from '../../../../../../common/agent_name'; +import { ErrorCountBadge } from '../ErrorCountBadge'; +import { Duration } from './Duration'; +import { Timestamp } from './Timestamp'; +import { HttpInfo } from './HttpInfo'; +import { Result } from './Result'; +import { px, units } from '../../../../../../public/style/variables'; + +// TODO: Light/Dark theme (@see https://github.com/elastic/kibana/issues/44840) +const theme = euiLightVars; + +const Item = styled(EuiFlexItem)` + flex-wrap: nowrap; + border-right: 1px solid ${theme.euiColorMediumShade}; + padding-right: ${px(units.half)}; + + &:last-child { + border-right: none; + padding-right: 0; + } +`; + +interface Props { + errorCount: number; + totalDuration?: number; + transaction: Transaction; +} + +export function TraceSummary({ + errorCount, + totalDuration, + transaction +}: Props) { + const result = idx(transaction, _ => _.transaction.result); + const isRumAgent = isRumAgentName(transaction.agent.name); + const url = isRumAgent + ? idx(transaction, _ => _.transaction.page.url) + : idx(transaction, _ => _.url.full); + + return ( + <> + + + + + + + + + {url && ( + + + + )} + {result && !url && ( + + + + )} + {errorCount > 0 && ( + + + + {i18n.translate('xpack.apm.transactionDetails.errorCount', { + defaultMessage: + '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}', + values: { errorCount } + })} + + + + )} + + + + ); +} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/__fixtures__/transactions.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/__fixtures__/transactions.ts new file mode 100644 index 0000000000000..06f36dfa18ff9 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/__fixtures__/transactions.ts @@ -0,0 +1,27 @@ +/* + * 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 { Transaction } from '../../../../../../../typings/es_schemas/ui/Transaction'; + +export const httpOk: Transaction = { + '@timestamp': '0', + agent: { name: 'go', version: '0' }, + http: { + request: { method: 'GET' }, + response: { status_code: 200 } + }, + processor: { event: 'transaction', name: 'transaction' }, + service: { name: 'testServiceName' }, + timestamp: { us: 0 }, + trace: { id: 'testTrace' }, + transaction: { + name: 'testTransaction', + id: 'testId', + sampled: false, + type: 'testType', + duration: { us: 0 } + } +}; diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/index.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/index.ts new file mode 100644 index 0000000000000..e344d62c8a9fd --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/index.ts @@ -0,0 +1,6 @@ +/* + * 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 { TraceSummary } from './TraceSummary'; diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/statusCodes.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/statusCodes.ts new file mode 100644 index 0000000000000..b37dea546634e --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TraceSummary/statusCodes.ts @@ -0,0 +1,71 @@ +/* + * 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. + */ + +// From https://github.com/for-GET/know-your-http-well/blob/master/json/status-codes.json +export const statusCodes: { [key: string]: string } = { + '100': 'Continue', + '101': 'Switching Protocols', + '102': 'Processing', + '200': 'OK', + '201': 'Created', + '202': 'Accepted', + '203': 'Non-Authoritative Information', + '204': 'No Content', + '205': 'Reset Content', + '206': 'Partial Content', + '207': 'Multi-Status', + '226': 'IM Used', + '300': 'Multiple Choices', + '301': 'Moved Permanently', + '302': 'Found', + '303': 'See Other', + '304': 'Not Modified', + '305': 'Use Proxy', + '307': 'Temporary Redirect', + '308': 'Permanent Redirect', + '400': 'Bad Request', + '401': 'Unauthorized', + '402': 'Payment Required', + '403': 'Forbidden', + '404': 'Not Found', + '405': 'Method Not Allowed', + '406': 'Not Acceptable', + '407': 'Proxy Authentication Required', + '408': 'Request Timeout', + '409': 'Conflict', + '410': 'Gone', + '411': 'Length Required', + '412': 'Precondition Failed', + '413': 'Payload Too Large', + '414': 'URI Too Long', + '415': 'Unsupported Media Type', + '416': 'Range Not Satisfiable', + '417': 'Expectation Failed', + '418': "I'm a teapot", + '422': 'Unprocessable Entity', + '423': 'Locked', + '424': 'Failed Dependency', + '426': 'Upgrade Required', + '428': 'Precondition Required', + '429': 'Too Many Requests', + '431': 'Request Header Fields Too Large', + '451': 'Unavailable For Legal Reasons', + '500': 'Internal Server Error', + '501': 'Not Implemented', + '502': 'Bad Gateway', + '503': 'Service Unavailable', + '504': 'Gateway Time-out', + '505': 'HTTP Version Not Supported', + '506': 'Variant Also Negotiates', + '507': 'Insufficient Storage', + '511': 'Network Authentication Required', + '1xx': '**Informational**', + '2xx': '**Successful**', + '3xx': '**Redirection**', + '4xx': '**Client Error**', + '5xx': '**Server Error**', + '7xx': '**Developer Error**' +}; diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx index 05d40b952e2fe..a5e6eb622e8fb 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx @@ -222,12 +222,13 @@ export function WaterfallItem({ > { event.stopPropagation(); }} onClickAriaLabel={tooltipContent} - /> + > + {errorCount} + ) : null} diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx index 698980f2faa74..ad83a634bda27 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx @@ -10,9 +10,9 @@ import { EuiFlexItem, EuiPanel, EuiSpacer, - EuiTitle, EuiToolTip, - EuiEmptyPrompt + EuiEmptyPrompt, + EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { Location } from 'history'; @@ -22,10 +22,10 @@ import { Transaction as ITransaction } from '../../../../../typings/es_schemas/u import { IUrlParams } from '../../../../context/UrlParamsContext/types'; import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink'; import { TransactionActionMenu } from '../../../shared/TransactionActionMenu/TransactionActionMenu'; -import { StickyTransactionProperties } from './StickyTransactionProperties'; import { TransactionTabs } from './TransactionTabs'; import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers'; import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt'; +import { TraceSummary } from './TraceSummary/TraceSummary'; function MaybeViewTraceLink({ transaction, @@ -139,7 +139,7 @@ export const WaterfallWithSummmary: React.SFC = ({ return ( - +
@@ -163,13 +163,14 @@ export const WaterfallWithSummmary: React.SFC = ({ - + + - - +