From 583deb8de9579b296587d34a48b515a9105b28e3 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Mon, 7 Oct 2019 15:45:27 -0500
Subject: [PATCH 1/2] [APM] Add User agent to trace summary

---
 .../ErrorGroupDetails/DetailView/index.tsx    |  4 ++
 .../shared/Summary/TransactionSummary.tsx     |  6 ++-
 .../Summary/UserAgentSummaryItem.test.tsx     | 30 +++++++++++++++
 .../shared/Summary/UserAgentSummaryItem.tsx   | 37 +++++++++++++++++++
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.test.tsx
 create mode 100644 x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx

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 ? (
+            <UserAgentSummaryItem {...transaction.user_agent} />
+          ) : null,
           transaction && (
             <EuiToolTip
               content={i18n.translate(
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx
index aea7e3ef2d384..665a925e01a19 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/TransactionSummary.tsx
+++ b/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>;
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(<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)');
+      });
+    });
+  });
+});
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 (
+    <EuiToolTip
+      content={i18n.translate('xpack.apm.transactionDetails.userAgentLabel', {
+        defaultMessage: 'User agent'
+      })}
+    >
+      <>
+        {name}&nbsp;
+        {version && <Version>({version})</Version>}
+      </>
+    </EuiToolTip>
+  );
+}

From 41d4dd0cd92967750d35c4ec101206d4333b88e3 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Tue, 8 Oct 2019 10:28:55 -0500
Subject: [PATCH 2/2] Updates based on feedback

---
 .../components/shared/Summary/UserAgentSummaryItem.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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
index 531e616b87586..1a019ae0a5e42 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
@@ -14,7 +14,6 @@ import { UserAgent } from '../../../../typings/es_schemas/raw/fields/UserAgent';
 type UserAgentSummaryItemProps = UserAgent;
 
 const Version = styled('span')`
-  color: ${theme.textColors.subdued};
   font-size: ${theme.euiFontSizeS};
 `;
 
@@ -24,9 +23,12 @@ export function UserAgentSummaryItem({
 }: UserAgentSummaryItemProps) {
   return (
     <EuiToolTip
-      content={i18n.translate('xpack.apm.transactionDetails.userAgentLabel', {
-        defaultMessage: 'User agent'
-      })}
+      content={i18n.translate(
+        'xpack.apm.transactionDetails.userAgentAndVersionLabel',
+        {
+          defaultMessage: 'User agent & version'
+        }
+      )}
     >
       <>
         {name}&nbsp;