[APM] Add User agent to trace summary (elastic#47526)

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 ? (
+            <UserAgentSummaryItem {...transaction.user_agent} />
+          ) : null,
           transaction && (
             <EuiToolTip
               content={i18n.translate(

x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx

@@ -13,6 +13,7 @@ import { ErrorCountSummaryItem } from './ErrorCountSummaryItem';
 import { isRumAgentName } from '../../../../common/agent_name';
 import { HttpInfoSummaryItem } from './HttpInfoSummaryItem';
 import { TransactionResultSummaryItem } from './TransactionResultSummaryItem';
+import { UserAgentSummaryItem } from './UserAgentSummaryItem';
 
 interface Props {
   transaction: Transaction;
@@ -54,7 +55,10 @@ const TransactionSummary = ({
       parentType="trace"
     />,
     getTransactionResultSummaryItem(transaction),
-    errorCount ? <ErrorCountSummaryItem count={errorCount} /> : null
+    errorCount ? <ErrorCountSummaryItem count={errorCount} /> : null,
+    transaction.user_agent ? (
+      <UserAgentSummaryItem {...transaction.user_agent} />
+    ) : null
   ];
 
   return <Summary items={items}></Summary>;

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(<UserAgentSummaryItem {...props} />)
+      ).not.toThrowError();
+    });
+
+    describe('with a version', () => {
+      it('shows the version', () => {
+        const p = { ...props, version: '1.0' };
+        const wrapper = render(<UserAgentSummaryItem {...p} />);
+
+        expect(wrapper.text()).toContain('(1.0)');
+      });
+    });
+  });
+});

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 (
+    <EuiToolTip
+      content={i18n.translate(
+        'xpack.apm.transactionDetails.userAgentAndVersionLabel',
+        {
+          defaultMessage: 'User agent & version'
+        }
+      )}
+    >
+      <>
+        {name}&nbsp;
+        {version && <Version>({version})</Version>}
+      </>
+    </EuiToolTip>
+  );
+}