diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx index eba9f281abdce..7c623d976b29c 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx @@ -39,6 +39,7 @@ import { Summary } from '../../../shared/Summary'; import { TimestampTooltip } from '../../../shared/TimestampTooltip'; import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem'; import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink'; +import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem'; const HeaderContainer = styled.div` display: flex; @@ -121,6 +122,9 @@ export function DetailView({ errorGroup, urlParams, location }: Props) { status={status} /> ) : null, + transaction && transaction.user_agent ? ( + + ) : null, transaction && ( , getTransactionResultSummaryItem(transaction), - errorCount ? : null + errorCount ? : null, + transaction.user_agent ? ( + + ) : null ]; return ; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx new file mode 100644 index 0000000000000..09bf90f6d4b1d --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.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 { shallow, render } from 'enzyme'; +import { UserAgentSummaryItem } from './UserAgentSummaryItem'; + +describe('UserAgentSummaryItem', () => { + describe('render', () => { + const props = { original: 'Other' }; + + it('renders', () => { + expect(() => + shallow() + ).not.toThrowError(); + }); + + describe('with a version', () => { + it('shows the version', () => { + const p = { ...props, version: '1.0' }; + const wrapper = render(); + + expect(wrapper.text()).toContain('(1.0)'); + }); + }); + }); +}); diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx new file mode 100644 index 0000000000000..1a019ae0a5e42 --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx @@ -0,0 +1,39 @@ +/* + * 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 styled from 'styled-components'; +import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { EuiToolTip } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { UserAgent } from '../../../../typings/es_schemas/raw/fields/UserAgent'; + +type UserAgentSummaryItemProps = UserAgent; + +const Version = styled('span')` + font-size: ${theme.euiFontSizeS}; +`; + +export function UserAgentSummaryItem({ + name, + version +}: UserAgentSummaryItemProps) { + return ( + + <> + {name}  + {version && ({version})} + + + ); +}