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 41ccb6a6c736e..18fab683bd679 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 { TimestampSummaryItem } from '../../../shared/Summary/TimestampSummaryItem';
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..531e616b87586
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.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 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')`
+ color: ${theme.textColors.subdued};
+ font-size: ${theme.euiFontSizeS};
+`;
+
+export function UserAgentSummaryItem({
+ name,
+ version
+}: UserAgentSummaryItemProps) {
+ return (
+
+ <>
+ {name}
+ {version && ({version})}
+ >
+
+ );
+}