[6.x] [APM] Performance marks for RUM agent (#20931)

x-pack/plugins/apm/common/constants.js

@@ -30,3 +30,5 @@ export const ERROR_CULPRIT = 'error.culprit';
 export const ERROR_LOG_MESSAGE = 'error.log.message';
 export const ERROR_EXC_MESSAGE = 'error.exception.message';
 export const ERROR_EXC_HANDLED = 'error.exception.handled';
+
+export const USER_ID = 'context.user.id';

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js

@@ -29,7 +29,8 @@ import {
   SERVICE_NAME,
   ERROR_GROUP_ID,
   SERVICE_AGENT_NAME,
-  SERVICE_LANGUAGE_NAME
+  SERVICE_LANGUAGE_NAME,
+  USER_ID
 } from '../../../../../common/constants';
 import { fromQuery, toQuery, history } from '../../../../utils/url';
 
@@ -101,8 +102,8 @@ function DetailView({ errorGroup, urlParams, location }) {
     },
     {
       label: 'User ID',
-      fieldName: 'context.user.id',
-      val: get(errorGroup.data, 'error.context.user.id', 'N/A')
+      fieldName: USER_ID,
+      val: get(errorGroup.data.error, USER_ID, 'N/A')
     }
   ];
 

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/TimelineHeader.js

@@ -50,7 +50,7 @@ export default function TimelineHeader({ legends, transactionName }) {
       </TooltipOverlay>
       <Legends>
         {legends.map(({ color, label }) => (
-          <Legend clickable={false} key={color} color={color} text={label} />
+          <Legend key={color} color={color} text={label} />
         ))}
       </Legends>
     </TimelineHeaderContainer>

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/view.js

@@ -43,7 +43,13 @@ const TIMELINE_MARGINS = {
 
 class Spans extends PureComponent {
   render() {
-    const { agentName, urlParams, location, droppedSpans } = this.props;
+    const {
+      agentName,
+      urlParams,
+      location,
+      droppedSpans,
+      agentMarks
+    } = this.props;
     return (
       <SpansRequest
         urlParams={urlParams}
@@ -81,6 +87,7 @@ class Spans extends PureComponent {
                         transactionName={urlParams.transactionName}
                       />
                     }
+                    agentMarks={agentMarks}
                     duration={totalDuration}
                     height={timelineHeight}
                     margins={TIMELINE_MARGINS}
@@ -176,6 +183,7 @@ function getPrimaryType(type) {
 }
 
 Spans.propTypes = {
+  agentMarks: PropTypes.array,
   agentName: PropTypes.string.isRequired,
   droppedSpans: PropTypes.number.isRequired,
   location: PropTypes.object.isRequired,

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/__jest__/view.test.js

@@ -0,0 +1,64 @@
+/*
+ * 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 { getAgentMarks } from '../view';
+
+describe('TransactionDetailsView', () => {
+  describe('getAgentMarks', () => {
+    it('should be sorted', () => {
+      const transaction = {
+        transaction: {
+          marks: {
+            agent: {
+              domInteractive: 117,
+              timeToFirstByte: 10,
+              domComplete: 118
+            }
+          }
+        }
+      };
+      expect(getAgentMarks(transaction)).toEqual([
+        { name: 'timeToFirstByte', timeLabel: 10000, timeAxis: 10000 },
+        { name: 'domInteractive', timeLabel: 117000, timeAxis: 117000 },
+        { name: 'domComplete', timeLabel: 118000, timeAxis: 118000 }
+      ]);
+    });
+
+    it('should ensure they are not too close', () => {
+      const transaction = {
+        transaction: {
+          duration: {
+            us: 1000 * 1000
+          },
+          marks: {
+            agent: {
+              a: 0,
+              b: 10,
+              c: 11,
+              d: 12,
+              e: 968,
+              f: 969,
+              timeToFirstByte: 970,
+              domInteractive: 980,
+              domComplete: 990
+            }
+          }
+        }
+      };
+      expect(getAgentMarks(transaction)).toEqual([
+        { timeLabel: 0, name: 'a', timeAxis: 0 },
+        { timeLabel: 10000, name: 'b', timeAxis: 20000 },
+        { timeLabel: 11000, name: 'c', timeAxis: 40000 },
+        { timeLabel: 12000, name: 'd', timeAxis: 60000 },
+        { timeLabel: 968000, name: 'e', timeAxis: 910000 },
+        { timeLabel: 969000, name: 'f', timeAxis: 930000 },
+        { timeLabel: 970000, name: 'timeToFirstByte', timeAxis: 950000 },
+        { timeLabel: 980000, name: 'domInteractive', timeAxis: 970000 },
+        { timeLabel: 990000, name: 'domComplete', timeAxis: 990000 }
+      ]);
+    });
+  });
+});

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js

@@ -15,7 +15,7 @@ import {
   borderRadius
 } from '../../../../style/variables';
 import { Tab, HeaderMedium } from '../../../shared/UIComponents';
-import { isEmpty, capitalize, get } from 'lodash';
+import { isEmpty, capitalize, get, sortBy, last } from 'lodash';
 
 import { ContextProperties } from '../../../shared/ContextProperties';
 import {
@@ -27,7 +27,10 @@ import DiscoverButton from '../../../shared/DiscoverButton';
 import {
   TRANSACTION_ID,
   PROCESSOR_EVENT,
-  SERVICE_AGENT_NAME
+  SERVICE_AGENT_NAME,
+  TRANSACTION_DURATION,
+  TRANSACTION_RESULT,
+  USER_ID
 } from '../../../../../common/constants';
 import { fromQuery, toQuery, history } from '../../../../utils/url';
 import { asTime } from '../../../../utils/formatters';
@@ -62,6 +65,48 @@ const PropertiesTableContainer = styled.div`
 
 const DEFAULT_TAB = 'timeline';
 
+export function getAgentMarks(transaction) {
+  const duration = get(transaction, TRANSACTION_DURATION);
+  const threshold = duration / 100 * 2;
+
+  return sortBy(
+    Object.entries(get(transaction, 'transaction.marks.agent', [])),
+    '1'
+  )
+    .map(([name, ms]) => ({
+      name,
+      timeLabel: ms * 1000,
+      timeAxis: ms * 1000
+    }))
+    .reduce((acc, curItem) => {
+      const prevTime = get(last(acc), 'timeAxis');
+      const nextValidTime = prevTime + threshold;
+      const isTooClose = prevTime != null && nextValidTime > curItem.timeAxis;
+      const canFit = nextValidTime <= duration;
+
+      if (isTooClose && canFit) {
+        acc.push({ ...curItem, timeAxis: nextValidTime });
+      } else {
+        acc.push(curItem);
+      }
+      return acc;
+    }, [])
+    .reduceRight((acc, curItem) => {
+      const prevTime = get(last(acc), 'timeAxis');
+      const nextValidTime = prevTime - threshold;
+      const isTooClose = prevTime != null && nextValidTime < curItem.timeAxis;
+      const canFit = nextValidTime >= 0;
+
+      if (isTooClose && canFit) {
+        acc.push({ ...curItem, timeAxis: nextValidTime });
+      } else {
+        acc.push(curItem);
+      }
+      return acc;
+    }, [])
+    .reverse();
+}
+
 // Ensure the selected tab exists or use the default
 function getCurrentTab(tabs = [], detailTab) {
   return tabs.includes(detailTab) ? detailTab : DEFAULT_TAB;
@@ -86,22 +131,22 @@ function Transaction({ transaction, location, urlParams }) {
 
   const timestamp = get(transaction, '@timestamp');
   const url = get(transaction, 'context.request.url.full', 'N/A');
-  const duration = get(transaction, 'transaction.duration.us');
+  const duration = get(transaction, TRANSACTION_DURATION);
   const stickyProperties = [
     {
       label: 'Duration',
-      fieldName: 'transaction.duration.us',
+      fieldName: TRANSACTION_DURATION,
       val: duration ? asTime(duration) : 'N/A'
     },
     {
       label: 'Result',
-      fieldName: 'transaction.result',
-      val: get(transaction, 'transaction.result', 'N/A')
+      fieldName: TRANSACTION_RESULT,
+      val: get(transaction, TRANSACTION_RESULT, 'N/A')
     },
     {
       label: 'User ID',
-      fieldName: 'context.user.id',
-      val: get(transaction, 'context.user.id', 'N/A')
+      fieldName: USER_ID,
+      val: get(transaction, USER_ID, 'N/A')
     }
   ];
 
@@ -168,6 +213,7 @@ function Transaction({ transaction, location, urlParams }) {
         {currentTab === DEFAULT_TAB ? (
           <Spans
             agentName={agentName}
+            agentMarks={getAgentMarks(transaction)}
             droppedSpans={get(
               transaction,
               'transaction.spanCount.dropped.total',

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap

@@ -1271,7 +1271,7 @@ Array [
   align-items: center;
   font-size: 12px;
   color: #666666;
-  cursor: pointer;
+  cursor: initial;
   opacity: 1;
   -webkit-user-select: none;
   -moz-user-select: none;

x-pack/plugins/apm/public/components/shared/charts/Legend/index.js

@@ -30,21 +30,21 @@ export default class Legend extends PureComponent {
   render() {
     const {
       onClick,
-      color,
       text,
+      color = colors.apmBlue,
       fontSize = fontSizes.small,
       radius = units.minus - 1,
       disabled = false,
-      clickable = true,
-      className
+      clickable = false,
+      ...rest
     } = this.props;
     return (
       <Container
         onClick={onClick}
         disabled={disabled}
-        clickable={clickable}
+        clickable={clickable || Boolean(onClick)}
         fontSize={fontSize}
-        className={className}
+        {...rest}
       >
         <Indicator color={color} radius={radius} />
         {text}

x-pack/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js

@@ -0,0 +1,53 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { EuiToolTip } from '@elastic/eui';
+import Legend from '../Legend';
+import { colors, units, px } from '../../../../style/variables';
+import styled from 'styled-components';
+import { asTime } from '../../../../utils/formatters';
+
+const NameContainer = styled.div`
+  border-bottom: 1px solid ${colors.gray3};
+  padding-bottom: ${px(units.half)};
+`;
+
+const TimeContainer = styled.div`
+  color: ${colors.gray3};
+  padding-top: ${px(units.half)};
+`;
+
+export default function AgentMarker({ agentMark, x }) {
+  const legendWidth = 11;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: px(x - legendWidth / 2)
+      }}
+    >
+      <EuiToolTip
+        id={agentMark.name}
+        position="top"
+        content={
+          <div>
+            <NameContainer>{agentMark.name}</NameContainer>
+            <TimeContainer>{asTime(agentMark.timeLabel)}</TimeContainer>
+          </div>
+        }
+      >
+        <Legend clickable color={colors.gray3} />
+      </EuiToolTip>
+    </div>
+  );
+}
+
+AgentMarker.propTypes = {
+  agentMark: PropTypes.object.isRequired,
+  x: PropTypes.number.isRequired
+};

x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js

@@ -5,18 +5,20 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import _ from 'lodash';
 import { Sticky } from 'react-sticky';
 import { XYPlot, XAxis } from 'react-vis';
 import LastTickValue from './LastTickValue';
+import AgentMarker from './AgentMarker';
 import { colors, px } from '../../../../style/variables';
 import { getTimeFormatter } from '../../../../utils/formatters';
 
 // Remove last tick if it's too close to xMax
 const getXAxisTickValues = (tickValues, xMax) =>
   _.last(tickValues) * 1.05 > xMax ? tickValues.slice(0, -1) : tickValues;
 
-function TimelineAxis({ header, plotValues }) {
+function TimelineAxis({ header, plotValues, agentMarks }) {
   const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues;
   const tickFormat = getTimeFormatter(xMax);
   const xAxisTickValues = getXAxisTickValues(tickValues, xMax);
@@ -60,6 +62,14 @@ function TimelineAxis({ header, plotValues }) {
               />
 
               <LastTickValue x={xScale(xMax)} value={tickFormat(xMax)} />
+
+              {agentMarks.map(agentMark => (
+                <AgentMarker
+                  key={agentMark.timeAxis}
+                  agentMark={agentMark}
+                  x={xScale(agentMark.timeAxis)}
+                />
+              ))}
             </XYPlot>
           </div>
         );
@@ -68,4 +78,14 @@ function TimelineAxis({ header, plotValues }) {
   );
 }
 
+TimelineAxis.propTypes = {
+  header: PropTypes.node,
+  plotValues: PropTypes.object.isRequired,
+  agentMarks: PropTypes.array
+};
+
+TimelineAxis.defaultProps = {
+  agentMarks: []
+};
+
 export default TimelineAxis;