Adds UI notification for dropped spans (#25017) (#25581)

* Adds icon and tooltip for dropped spans

* Adds callout and style in transaction flyout instead of timeline for dropped spans message

* Review tweaks and linting fixes

Author: jasonrhodes

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

@@ -6,17 +6,22 @@
 
 import {
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiHorizontalRule,
+  EuiLink,
   EuiPortal,
   EuiTitle
 } from '@elastic/eui';
+import { get } from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
+import { APM_AGENT_DROPPED_SPANS_DOCS } from 'x-pack/plugins/apm/public/utils/documentation/agents';
 import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
 import { DiscoverTransactionLink } from '../../../ActionMenu';
 import { StickyTransactionProperties } from '../../../StickyTransactionProperties';
@@ -32,6 +37,61 @@ interface Props {
   waterfall: IWaterfall;
 }
 
+const ResponsiveFlyout = styled(EuiFlyout)`
+  width: 100%;
+
+  @media (min-width: 800px) {
+    width: 90%;
+  }
+
+  @media (min-width: 1000px) {
+    width: 70%;
+  }
+
+  @media (min-width: 1400px) {
+    width: 50%;
+  }
+
+  @media (min-width: 2000px) {
+    width: 35%;
+  }
+`;
+
+function DroppedSpansWarning({
+  transactionDoc
+}: {
+  transactionDoc: Transaction;
+}) {
+  const dropped: number = get(
+    transactionDoc,
+    'transaction.span_count.dropped.total',
+    0
+  );
+
+  if (dropped === 0) {
+    return null;
+  }
+
+  const url =
+    APM_AGENT_DROPPED_SPANS_DOCS[transactionDoc.context.service.agent.name];
+
+  const docsLink = url ? (
+    <EuiLink href={url} target="_blank">
+      Learn more.
+    </EuiLink>
+  ) : null;
+
+  return (
+    <React.Fragment>
+      <EuiCallOut size="s">
+        The APM agent that reported this transaction dropped {dropped} spans or
+        more based on its configuration. {docsLink}
+      </EuiCallOut>
+      <EuiHorizontalRule />
+    </React.Fragment>
+  );
+}
+
 export function TransactionFlyout({
   transaction: transactionDoc,
   onClose,
@@ -45,7 +105,7 @@ export function TransactionFlyout({
 
   return (
     <EuiPortal>
-      <EuiFlyout onClose={onClose} size="m" ownFocus={true}>
+      <ResponsiveFlyout onClose={onClose} ownFocus={true} maxWidth={false}>
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
@@ -71,13 +131,14 @@ export function TransactionFlyout({
             totalDuration={waterfall.traceRootDuration}
           />
           <EuiHorizontalRule />
+          <DroppedSpansWarning transactionDoc={transactionDoc} />
           <TransactionPropertiesTableForFlyout
             transaction={transactionDoc}
             location={location}
             urlParams={urlParams}
           />
         </EuiFlyoutBody>
-      </EuiFlyout>
+      </ResponsiveFlyout>
     </EuiPortal>
   );
 }

x-pack/plugins/apm/public/utils/documentation/agents.ts

@@ -6,16 +6,17 @@
 
 const AGENT_URL_ROOT = 'https://www.elastic.co/guide/en/apm/agent';
 
-// TODO: currently unused but should be added to timeline view
-export const APM_AGENT_DROPPED_SPANS_DOCS = {
+interface AgentNamedValues {
+  [agentName: string]: string;
+}
+
+export const APM_AGENT_DROPPED_SPANS_DOCS: AgentNamedValues = {
   nodejs: `${AGENT_URL_ROOT}/nodejs/1.x/agent-api.html#transaction-max-spans`,
   python: `${AGENT_URL_ROOT}/python/2.x/configuration.html#config-transaction-max-spans`
 };
 
 const APM_AGENT_FEATURE_DOCS: {
-  [featureName: string]: {
-    [agentName: string]: string;
-  };
+  [featureName: string]: AgentNamedValues;
 } = {
   user: {
     java: `${AGENT_URL_ROOT}/java/0.7/public-api.html#api-transaction-set-user`,