[APM] One-line trace summary

Replace the `StickyTransactionProperties` with a trace summary that puts everything on one line.

Fixes elastic#43247.

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<typeof EuiBadge> & {
-  errorCount: number;
-};
+type Props = React.ComponentProps<typeof EuiBadge>;
 
-export const ErrorCountBadge = ({ errorCount = 0, ...rest }: Props) => (
+export const ErrorCountBadge = ({ children, ...rest }: Props) => (
   <EuiBadge color={euiThemeLight.euiColorDanger} {...rest}>
-    {errorCount}
+    {children}
   </EuiBadge>
 );

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 ? (
+        <EuiToolTip
+          content={i18n.translate(
+            'xpack.apm.transactionDetails.percentOfTraceLabelExplanation',
+            {
+              defaultMessage:
+                'The % of trace exceeds 100% because this transaction takes longer than the root transaction.'
+            }
+          )}
+        >
+          <>{percentOfTraceText}</>
+        </EuiToolTip>
+      ) : (
+        `(${percentOfTraceText})`
+      )}
+    </>
+  );
+}

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,14 +17,15 @@ 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
 } from '../../../shared/StickyProperties';
 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 ? (
-          <EuiToolTip
-            content={i18n.translate(
-              'xpack.apm.transactionDetails.percentOfTraceLabelExplanation',
-              {
-                defaultMessage:
-                  'The % of trace exceeds 100% because this transaction takes longer than the root transaction.'
-              }
-            )}
-          >
-            <span>&gt;100%</span>
-          </EuiToolTip>
-        ) : (
-          asPercent(duration, totalDuration, NOT_AVAILABLE_LABEL)
-        ),
+      val: <PercentOfTrace duration={duration} totalDuration={totalDuration} />,
       width: '25%'
     },
     {
@@ -131,7 +116,7 @@ export function StickyTransactionProperties({
       ),
       val: errorCount ? (
         <>
-          <ErrorCountBadge errorCount={errorCount} />
+          <ErrorCountBadge>{errorCount}</ErrorCountBadge>
           <ErrorTitle>
             &nbsp;
             {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', {

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 (
+    <Span>
+      <EuiToolTip content={label}>
+        <EuiText>{asTime(duration)}</EuiText>
+      </EuiToolTip>{' '}
+      <PercentOfTrace duration={duration} totalDuration={totalDuration} />
+    </Span>
+  );
+}

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(<HttpInfo {...props} />)).not.toThrowError();
+    });
+
+    describe('with status code 200', () => {
+      it('shows a success color', () => {
+        const wrapper = mount(<HttpInfo {...props} />);
+
+        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(<HttpInfo {...p} />);
+
+        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(<HttpInfo {...p} />);
+
+        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(<HttpInfo {...p} />);
+
+        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(<HttpInfo {...p} />);
+
+        expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
+          'default'
+        );
+      });
+    });
+  });
+});

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 (
+    <EuiToolTip content={label}>
+      <EuiBadge color={getStatusColor(status)}>
+        {status} {statusCodes[status.toString()]}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+}
+
+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 (
+    <Span>
+      <HttpInfoBadge title={undefined}>
+        <EuiToolTip content={methodLabel}>
+          <strong>{method}</strong>
+        </EuiToolTip>{' '}
+        <EuiToolTip content={url}>
+          <Url>{url}</Url>
+        </EuiToolTip>
+      </HttpInfoBadge>
+      {status && <HttpStatusBadge status={status} />}
+    </Span>
+  );
+}

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 (
+    <EuiToolTip
+      content={i18n.translate('xpack.apm.transactionDetails.resultLabel', {
+        defaultMessage: 'Result'
+      })}
+    >
+      <EuiBadge color="default" title={undefined}>
+        {result}
+      </EuiBadge>
+    </EuiToolTip>
+  );
+}