Visualizing composite spans.

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/index.tsx

@@ -8,6 +8,7 @@
 import {
   EuiBadge,
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyoutBody,
@@ -21,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
+import { CompositeSpanDurationSummaryItem } from '../../../../../../shared/Summary/CompositeSpanDurationSummaryItem';
 import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
@@ -123,7 +125,6 @@ export function SpanFlyout({
                 </h2>
               </EuiTitle>
             </EuiFlexItem>
-
             <EuiFlexItem grow={false}>
               <DiscoverSpanLink span={span}>
                 <EuiButtonEmpty iconType="discoverApp">
@@ -137,18 +138,41 @@ export function SpanFlyout({
               </DiscoverSpanLink>
             </EuiFlexItem>
           </EuiFlexGroup>
+          {span.span.composite && (
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiCallOut color="warning" iconType="gear" size="s">
+                  {i18n.translate(
+                    'xpack.apm.transactionDetails.spanFlyout.compositeExampleWarning',
+                    {
+                      defaultMessage:
+                        'This is a sample document for a group of consecutive, similar spans',
+                    }
+                  )}
+                </EuiCallOut>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <StickySpanProperties span={span} transaction={parentTransaction} />
           <EuiSpacer size="m" />
           <Summary
             items={[
               <TimestampTooltip time={span.timestamp.us / 1000} />,
-              <DurationSummaryItem
-                duration={span.span.duration.us}
-                totalDuration={totalDuration}
-                parentType="transaction"
-              />,
+              <>
+                <DurationSummaryItem
+                  duration={span.span.duration.us}
+                  totalDuration={totalDuration}
+                  parentType="transaction"
+                />
+                {span.span.composite && (
+                  <CompositeSpanDurationSummaryItem
+                    count={span.span.composite.count}
+                    durationSum={span.span.composite.sum.us}
+                  />
+                )}
+              </>,
               <>
                 {spanHttpUrl && (
                   <HttpInfoContainer>

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/waterfall_item.tsx

@@ -147,7 +147,15 @@ function HttpStatusCode({ item }: { item: IWaterfallSpanOrTransaction }) {
 function NameLabel({ item }: { item: IWaterfallSpanOrTransaction }) {
   switch (item.docType) {
     case 'span':
-      return <EuiText size="s">{item.doc.span.name}</EuiText>;
+      let name = item.doc.span.name;
+      if (item.doc.span.composite) {
+        const compositePrefix =
+          item.doc.span.composite.compression_strategy === 'exact_match'
+            ? 'x'
+            : '';
+        name = `${item.doc.span.composite.count}${compositePrefix} ${name}`;
+      }
+      return <EuiText size="s">{name}</EuiText>;
     case 'transaction':
       return (
         <EuiTitle size="xxs">
@@ -182,6 +190,9 @@ export function WaterfallItem({
     }
   );
 
+  const isCompositeSpan = item.docType === 'span' && item.doc.span.composite;
+  const itemBarStyle = getItemBarStyle(item, color, width, left);
+
   return (
     <Container
       type={item.docType}
@@ -193,8 +204,8 @@ export function WaterfallItem({
       }}
     >
       <ItemBar // using inline styles instead of props to avoid generating a css class for each item
-        style={{ left: `${left}%`, width: `${width}%` }}
-        color={color}
+        style={itemBarStyle}
+        color={isCompositeSpan ? 'transparent' : color}
         type={item.docType}
       />
       <ItemText // using inline styles instead of props to avoid generating a css class for each item
@@ -227,3 +238,32 @@ export function WaterfallItem({
     </Container>
   );
 }
+
+function getItemBarStyle(
+  item: IWaterfallSpanOrTransaction,
+  color: string,
+  width: number,
+  left: number
+): React.CSSProperties {
+  let itemBarStyle = { left: `${left}%`, width: `${width}%` };
+
+  if (item.docType === 'span' && item.doc.span.composite) {
+    const percNumItems = 100.0 / item.doc.span.composite.count;
+    const spanSumRatio =
+      item.doc.span.composite.sum.us / item.doc.span.duration.us;
+    const percDuration = percNumItems * spanSumRatio;
+
+    itemBarStyle = {
+      ...itemBarStyle,
+      ...{
+        backgroundImage:
+          `repeating-linear-gradient(90deg, ${color},` +
+          ` ${color} max(${percDuration}%,3px),` +
+          ` transparent max(${percDuration}%,3px),` +
+          ` transparent max(${percNumItems}%,max(${percDuration}%,3px) + 3px))`,
+      },
+    };
+  }
+
+  return itemBarStyle;
+}

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

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiToolTip, EuiText } from '@elastic/eui';
+import { asDuration } from '../../../../common/utils/formatters';
+
+interface Props {
+  count: number;
+  durationSum: number;
+}
+
+function CompositeSpanDurationSummaryItem({ count, durationSum }: Props) {
+  const avgDuration = durationSum / count;
+
+  return (
+    <EuiToolTip
+      content={i18n.translate('xpack.apm.compositeSpanDurationLabel', {
+        defaultMessage: 'Average duration',
+      })}
+    >
+      <EuiText>
+        {i18n.translate('xpack.apm.compositeSpanCallsLabel', {
+          defaultMessage: `, {count} calls, on avg. {duration}`,
+          values: {
+            count,
+            duration: asDuration(avgDuration),
+          },
+        })}
+      </EuiText>
+    </EuiToolTip>
+  );
+}
+
+export { CompositeSpanDurationSummaryItem };

x-pack/plugins/apm/typings/es_schemas/raw/span_raw.ts

@@ -54,6 +54,11 @@ export interface SpanRaw extends APMBaseDoc {
       body?: string;
       headers?: Record<string, unknown>;
     };
+    composite?: {
+      count: number;
+      sum: { us: number };
+      compression_strategy: string;
+    };
   };
   timestamp: TimestampUs;
   transaction?: {