[APM] Show errors on the timeline instead of under the transaction

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/ErrorCount.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { EuiText, EuiTextColor } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+interface Props {
+  count: number;
+}
+
+export const ErrorCount = ({ count }: Props) => (
+  <EuiText size="xs">
+    <h4>
+      <EuiTextColor
+        color="danger"
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+        }}
+      >
+        {i18n.translate('xpack.apm.transactionDetails.errorCount', {
+          defaultMessage:
+            '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}',
+          values: { errorCount: count }
+        })}
+      </EuiTextColor>
+    </h4>
+  </EuiText>
+);

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx

@@ -25,8 +25,9 @@ export const MaybeViewTraceLink = ({
     }
   );
 
+  const { rootTransaction } = waterfall;
   // the traceroot cannot be found, so we cannot link to it
-  if (!waterfall.traceRoot) {
+  if (!rootTransaction) {
     return (
       <EuiFlexItem grow={false}>
         <EuiToolTip
@@ -45,8 +46,7 @@ export const MaybeViewTraceLink = ({
     );
   }
 
-  const isRoot =
-    transaction.transaction.id === waterfall.traceRoot.transaction.id;
+  const isRoot = transaction.transaction.id === rootTransaction.transaction.id;
 
   // the user is already viewing the full trace, so don't link to it
   if (isRoot) {
@@ -69,15 +69,14 @@ export const MaybeViewTraceLink = ({
 
     // the user is viewing a zoomed in version of the trace. Link to the full trace
   } else {
-    const traceRoot = waterfall.traceRoot;
     return (
       <EuiFlexItem grow={false}>
         <TransactionDetailLink
-          serviceName={traceRoot.service.name}
-          transactionId={traceRoot.transaction.id}
-          traceId={traceRoot.trace.id}
-          transactionName={traceRoot.transaction.name}
-          transactionType={traceRoot.transaction.type}
+          serviceName={rootTransaction.service.name}
+          transactionId={rootTransaction.transaction.id}
+          traceId={rootTransaction.trace.id}
+          transactionName={rootTransaction.transaction.name}
+          transactionType={rootTransaction.transaction.type}
         >
           <EuiButton iconType="apmTrace">{viewFullTraceButtonLabel}</EuiButton>
         </TransactionDetailLink>

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx

@@ -77,7 +77,6 @@ export function TransactionTabs({
 
       {currentTab.key === timelineTab.key ? (
         <WaterfallContainer
-          transaction={transaction}
           location={location}
           urlParams={urlParams}
           waterfall={waterfall}

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { px, unit } from '../../../../../style/variables';
 // @ts-ignore
-import Legend from '../../../../shared/charts/Legend';
+import { Legend } from '../../../../shared/charts/Legend';
 import { IServiceColors } from './Waterfall/waterfall_helpers/waterfall_helpers';
 
 const Legends = styled.div`

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -101,7 +101,7 @@ export function SpanFlyout({
   const dbContext = span.span.db;
   const httpContext = span.span.http;
   const spanTypes = getSpanTypes(span);
-  const spanHttpStatusCode = httpContext?.response.status_code;
+  const spanHttpStatusCode = httpContext?.response?.status_code;
   const spanHttpUrl = httpContext?.url?.original;
   const spanHttpMethod = httpContext?.method;
 

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx

@@ -27,8 +27,8 @@ import { DroppedSpansWarning } from './DroppedSpansWarning';
 interface Props {
   onClose: () => void;
   transaction?: Transaction;
-  errorCount: number;
-  traceRootDuration?: number;
+  errorCount?: number;
+  rootTransactionDuration?: number;
 }
 
 function TransactionPropertiesTable({
@@ -49,8 +49,8 @@ function TransactionPropertiesTable({
 export function TransactionFlyout({
   transaction: transactionDoc,
   onClose,
-  errorCount,
-  traceRootDuration
+  errorCount = 0,
+  rootTransactionDuration
 }: Props) {
   if (!transactionDoc) {
     return null;
@@ -84,7 +84,7 @@ export function TransactionFlyout({
           <EuiSpacer size="m" />
           <TransactionSummary
             transaction={transactionDoc}
-            totalDuration={traceRootDuration}
+            totalDuration={rootTransactionDuration}
             errorCount={errorCount}
           />
           <EuiHorizontalRule margin="m" />

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallFlyout.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 { Location } from 'history';
+import React from 'react';
+import { SpanFlyout } from './SpanFlyout';
+import { TransactionFlyout } from './TransactionFlyout';
+import { IWaterfall } from './waterfall_helpers/waterfall_helpers';
+
+interface Props {
+  waterfallItemId?: string;
+  waterfall: IWaterfall;
+  location: Location;
+  toggleFlyout: ({ location }: { location: Location }) => void;
+}
+export const WaterfallFlyout: React.FC<Props> = ({
+  waterfallItemId,
+  waterfall,
+  location,
+  toggleFlyout
+}) => {
+  const currentItem = waterfall.items.find(item => item.id === waterfallItemId);
+
+  if (!currentItem) {
+    return null;
+  }
+
+  switch (currentItem.docType) {
+    case 'span':
+      const parentTransaction =
+        currentItem.parent?.docType === 'transaction'
+          ? currentItem.parent?.custom
+          : undefined;
+
+      return (
+        <SpanFlyout
+          totalDuration={waterfall.duration}
+          span={currentItem.custom}
+          parentTransaction={parentTransaction}
+          onClose={() => toggleFlyout({ location })}
+        />
+      );
+    case 'transaction':
+      return (
+        <TransactionFlyout
+          transaction={currentItem.custom}
+          onClose={() => toggleFlyout({ location })}
+          rootTransactionDuration={
+            waterfall.rootTransaction?.transaction.duration.us
+          }
+          errorCount={waterfall.errorsPerTransaction[currentItem.id]}
+        />
+      );
+    default:
+      return null;
+  }
+};

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

@@ -13,12 +13,12 @@ import { i18n } from '@kbn/i18n';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
 import { asDuration } from '../../../../../../utils/formatters';
-import { ErrorCountBadge } from '../../ErrorCountBadge';
+import { ErrorCount } from '../../ErrorCount';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
 import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';
 
-type ItemType = 'transaction' | 'span';
+type ItemType = 'transaction' | 'span' | 'error' | 'agentMark';
 
 interface IContainerStyleProps {
   type: ItemType;
@@ -89,24 +89,29 @@ interface IWaterfallItemProps {
 }
 
 function PrefixIcon({ item }: { item: IWaterfallItem }) {
-  if (item.docType === 'span') {
-    // icon for database spans
-    const isDbType = item.span.span.type.startsWith('db');
-    if (isDbType) {
-      return <EuiIcon type="database" />;
+  switch (item.docType) {
+    case 'span': {
+      // icon for database spans
+      const isDbType = item.custom.span.type.startsWith('db');
+      if (isDbType) {
+        return <EuiIcon type="database" />;
+      }
+
+      // omit icon for other spans
+      return null;
     }
-
-    // omit icon for other spans
-    return null;
-  }
-
-  // icon for RUM agent transactions
-  if (isRumAgentName(item.transaction.agent.name)) {
-    return <EuiIcon type="globe" />;
+    case 'transaction': {
+      // icon for RUM agent transactions
+      if (isRumAgentName(item.custom.agent.name)) {
+        return <EuiIcon type="globe" />;
+      }
+
+      // icon for other transactions
+      return <EuiIcon type="merge" />;
+    }
+    default:
+      return null;
   }
-
-  // icon for other transactions
-  return <EuiIcon type="merge" />;
 }
 
 interface SpanActionToolTipProps {
@@ -117,10 +122,10 @@ const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
   item,
   children
 }) => {
-  if (item && item.docType === 'span') {
+  if (item?.docType === 'span') {
     return (
       <EuiToolTip
-        content={`${item.span.span.subtype}.${item.span.span.action}`}
+        content={`${item.custom.span.subtype}.${item.custom.span.action}`}
       >
         <>{children}</>
       </EuiToolTip>
@@ -140,9 +145,8 @@ function Duration({ item }: { item: IWaterfallItem }) {
 function HttpStatusCode({ item }: { item: IWaterfallItem }) {
   // http status code for transactions of type 'request'
   const httpStatusCode =
-    item.docType === 'transaction' &&
-    item.transaction.transaction.type === 'request'
-      ? item.transaction.transaction.result
+    item.docType === 'transaction' && item.custom.transaction.type === 'request'
+      ? item.custom.transaction.result
       : undefined;
 
   if (!httpStatusCode) {
@@ -153,14 +157,18 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
 }
 
 function NameLabel({ item }: { item: IWaterfallItem }) {
-  if (item.docType === 'span') {
-    return <EuiText size="s">{item.name}</EuiText>;
+  switch (item.docType) {
+    case 'span':
+      return <EuiText size="s">{item.custom.span.name}</EuiText>;
+    case 'transaction':
+      return (
+        <EuiTitle size="xxs">
+          <h5>{item.custom.transaction.name}</h5>
+        </EuiTitle>
+      );
+    default:
+      return null;
   }
-  return (
-    <EuiTitle size="xxs">
-      <h5>{item.name}</h5>
-    </EuiTitle>
-  );
 }
 
 export function WaterfallItem({
@@ -210,24 +218,17 @@ export function WaterfallItem({
         <NameLabel item={item} />
         {errorCount > 0 && item.docType === 'transaction' ? (
           <ErrorOverviewLink
-            serviceName={item.transaction.service.name}
+            serviceName={item.custom.service.name}
             query={{
               kuery: encodeURIComponent(
-                `${TRACE_ID} : "${item.transaction.trace.id}" and transaction.id : "${item.transaction.transaction.id}"`
+                `${TRACE_ID} : "${item.custom.trace.id}" and transaction.id : "${item.custom.transaction.id}"`
               )
             }}
             color="danger"
             style={{ textDecoration: 'none' }}
           >
             <EuiToolTip content={tooltipContent}>
-              <ErrorCountBadge
-                onClick={event => {
-                  event.stopPropagation();
-                }}
-                onClickAriaLabel={tooltipContent}
-              >
-                {errorCount}
-              </ErrorCountBadge>
+              <ErrorCount count={errorCount} />
             </EuiToolTip>
           </ErrorOverviewLink>
         ) : null}