[APM] Display all errors in trace overview (#44274) (#44597)

* [APM] Display all errors in child transactions/spans in trace overview

Closes #42357.

* Refactor ErrorCountBadge

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Transaction/ErrorCountBadge.tsx

@@ -4,78 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { EuiBadge } from '@elastic/eui';
 import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
-import { i18n } from '@kbn/i18n';
-import React, { Fragment } from 'react';
-import styled from 'styled-components';
-import { Transaction } from '../../../../../typings/es_schemas/ui/Transaction';
-import { fontSize } from '../../../../style/variables';
-import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
+import React from 'react';
 
-const LinkLabel = styled.span`
-  font-size: ${fontSize};
-`;
-
-interface Props {
+type Props = React.ComponentProps<typeof EuiBadge> & {
   errorCount: number;
-  transaction: Transaction;
-  verbose?: boolean;
-}
-
-export const ErrorCountBadge: React.SFC<Props> = ({
-  errorCount = 0,
-  transaction,
-  verbose
-}) => {
-  const toolTipContent = i18n.translate(
-    'xpack.apm.transactionDetails.errorsOverviewLinkTooltip',
-    {
-      values: { errorCount },
-      defaultMessage:
-        '{errorCount, plural, one {View 1 related error} other {View # related errors}}'
-    }
-  );
-
-  const errorCountBadge = (
-    <EuiBadge
-      color={euiThemeLight.euiColorDanger}
-      onClick={(event: any) => {
-        (event as MouseEvent).stopPropagation();
-      }}
-      onClickAriaLabel={toolTipContent}
-    >
-      {errorCount}
-    </EuiBadge>
-  );
-  const serviceName = transaction.service.name;
-
-  return (
-    <ErrorOverviewLink
-      serviceName={serviceName}
-      query={{
-        kuery: encodeURIComponent(
-          `trace.id : "${transaction.trace.id}" and transaction.id : "${transaction.transaction.id}"`
-        )
-      }}
-      color="danger"
-      style={{ textDecoration: 'none' }}
-    >
-      {verbose ? (
-        <Fragment>
-          {errorCountBadge}
-          <LinkLabel>
-            &nbsp;
-            {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', {
-              values: { errorCount },
-              defaultMessage:
-                '{errorCount, plural, one {Related error} other {Related errors}}'
-            })}
-          </LinkLabel>
-        </Fragment>
-      ) : (
-        <EuiToolTip content={toolTipContent}>{errorCountBadge}</EuiToolTip>
-      )}
-    </ErrorOverviewLink>
-  );
 };
+
+export const ErrorCountBadge = ({ errorCount = 0, ...rest }: Props) => (
+  <EuiBadge color={euiThemeLight.euiColorDanger} {...rest}>
+    {errorCount}
+  </EuiBadge>
+);

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.tsx

@@ -8,6 +8,7 @@ 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,
   TRANSACTION_RESULT,
@@ -24,6 +25,7 @@ import {
 } from '../../../shared/StickyProperties';
 import { ErrorCountBadge } from './ErrorCountBadge';
 import { isRumAgentName } from '../../../../../common/agent_name';
+import { fontSize } from '../../../../style/variables';
 
 interface Props {
   transaction: Transaction;
@@ -31,6 +33,10 @@ interface Props {
   errorCount?: number;
 }
 
+const ErrorTitle = styled.span`
+  font-size: ${fontSize};
+`;
+
 export function StickyTransactionProperties({
   transaction,
   totalDuration,
@@ -124,11 +130,17 @@ export function StickyTransactionProperties({
         }
       ),
       val: errorCount ? (
-        <ErrorCountBadge
-          errorCount={errorCount}
-          transaction={transaction}
-          verbose
-        />
+        <>
+          <ErrorCountBadge errorCount={errorCount} />
+          <ErrorTitle>
+            &nbsp;
+            {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', {
+              values: { errorCount },
+              defaultMessage:
+                '{errorCount, plural, one {Related error} other {Related errors}}'
+            })}
+          </ErrorTitle>
+        </>
       ) : (
         noErrorsText
       ),

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx

@@ -9,11 +9,13 @@ import styled from 'styled-components';
 
 import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { i18n } from '@kbn/i18n';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
 import { asTime } from '../../../../../../utils/formatters';
 import { ErrorCountBadge } from '../../ErrorCountBadge';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
+import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
 
 type ItemType = 'transaction' | 'span';
 
@@ -178,6 +180,15 @@ export function WaterfallItem({
   const width = (item.duration / totalDuration) * 100;
   const left = ((item.offset + item.skew) / totalDuration) * 100;
 
+  const tooltipContent = i18n.translate(
+    'xpack.apm.transactionDetails.errorsOverviewLinkTooltip',
+    {
+      values: { errorCount },
+      defaultMessage:
+        '{errorCount, plural, one {View 1 related error} other {View # related errors}}'
+    }
+  );
+
   return (
     <Container
       type={item.docType}
@@ -199,10 +210,26 @@ export function WaterfallItem({
         <HttpStatusCode item={item} />
         <NameLabel item={item} />
         {errorCount > 0 && item.docType === 'transaction' ? (
-          <ErrorCountBadge
-            errorCount={errorCount}
-            transaction={item.transaction}
-          />
+          <ErrorOverviewLink
+            serviceName={item.transaction.service.name}
+            query={{
+              kuery: encodeURIComponent(
+                `trace.id : "${item.transaction.trace.id}" and transaction.id : "${item.transaction.transaction.id}"`
+              )
+            }}
+            color="danger"
+            style={{ textDecoration: 'none' }}
+          >
+            <EuiToolTip content={tooltipContent}>
+              <ErrorCountBadge
+                errorCount={errorCount}
+                onClick={event => {
+                  event.stopPropagation();
+                }}
+                onClickAriaLabel={tooltipContent}
+              />
+            </EuiToolTip>
+          </ErrorOverviewLink>
         ) : null}
         <Duration item={item} />
       </ItemText>

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/Transaction/index.tsx

@@ -16,6 +16,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import React from 'react';
+import { sum } from 'lodash';
 import { Transaction as ITransaction } from '../../../../../typings/es_schemas/ui/Transaction';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
@@ -120,12 +121,9 @@ export const Transaction: React.SFC<Props> = ({
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h5>
-              {i18n.translate(
-                'xpack.apm.transactionDetails.transactionSampleTitle',
-                {
-                  defaultMessage: 'Transaction sample'
-                }
-              )}
+              {i18n.translate('xpack.apm.transactionDetails.traceSampleTitle', {
+                defaultMessage: 'Trace sample'
+              })}
             </h5>
           </EuiTitle>
         </EuiFlexItem>
@@ -144,9 +142,7 @@ export const Transaction: React.SFC<Props> = ({
       </EuiFlexGroup>
 
       <StickyTransactionProperties
-        errorCount={
-          waterfall.errorCountByTransactionId[transaction.transaction.id]
-        }
+        errorCount={sum(Object.values(waterfall.errorCountByTransactionId))}
         transaction={transaction}
         totalDuration={waterfall.traceRootDuration}
       />

x-pack/plugins/translations/translations/ja-JP.json

@@ -3871,7 +3871,6 @@
     "xpack.apm.transactionDetails.spanFlyout.viewSpanInDiscoverButtonLabel": "ディスカバリでスパンを表示",
     "xpack.apm.transactionDetails.timestampLabel": "タイムスタンプ",
     "xpack.apm.transactionDetails.transactionLabel": "トランザクション",
-    "xpack.apm.transactionDetails.transactionSampleTitle": "トランザクションサンプル",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.noSampleTooltip": "このバケットに利用可能なサンプルがありません",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# request} 1 {# 件のリクエスト} other {# 件のリクエスト}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# transaction} 1 {# 件のトランザクション} other {# 件のトランザクション}}",

x-pack/plugins/translations/translations/zh-CN.json

@@ -3872,7 +3872,6 @@
     "xpack.apm.transactionDetails.spanFlyout.viewSpanInDiscoverButtonLabel": "在 Discover 中查看跨度",
     "xpack.apm.transactionDetails.timestampLabel": "时间戳",
     "xpack.apm.transactionDetails.transactionLabel": "事务",
-    "xpack.apm.transactionDetails.transactionSampleTitle": "事务样例",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.noSampleTooltip": "此存储桶没有可用样例",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.requestTypeUnitLongLabel": "{transCount, plural, =0 {# 个请求} one {# 个请求} other {# 个请求}}",
     "xpack.apm.transactionDetails.transactionsDurationDistributionChart.transactionTypeUnitLongLabel": "{transCount, plural, =0 {# 个事务} one {# 个事务} other {# 个事务}}",