[ObsUx] Trace timeline: Change the missing trace items warning message (

#173196) Closes #173134 ## Summary This PR is a follow-up to #171196 and changes the missing trace items tooltip message. <img width="1630" alt="image" src="https://github.com/elastic/kibana/assets/14139027/ae13547c-f2fb-4a19-8062-2774ea782111"> ## Testing Same as in #171196 (comment) but the message should be changed to the one in the screenshot here
elastic · Dec 14, 2023 · ade658c · ade658c
1 parent 424708c
commit ade658c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/...c/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx b/...c/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx
@@ -17,7 +17,7 @@ import {
   WaterfallLegendType,
 } from './waterfall/waterfall_helpers/waterfall_helpers';
 import { WaterfallLegends } from './waterfall_legends';
-import { MissingTransactionWarning } from './waterfall/missing_transaction_warning';
+import { OrphanTraceItemsWarning } from './waterfall/orphan_trace_items_warning';
 
 interface Props {
   waterfallItemId?: string;
@@ -39,7 +39,7 @@ export function WaterfallContainer({
   if (!waterfall) {
     return null;
   }
-  const { legends, items, hasOrphanTraceItems } = waterfall;
+  const { legends, items, orphanTraceItemsCount } = waterfall;
 
   // Service colors are needed to color the dot in the error popover
   const serviceLegends = legends.filter(
@@ -116,9 +116,11 @@ export function WaterfallContainer({
               type={colorBy}
             />
           </EuiFlexItem>
-          {hasOrphanTraceItems ? (
+          {orphanTraceItemsCount > 0 ? (
             <EuiFlexItem grow={false}>
-              <MissingTransactionWarning />
+              <OrphanTraceItemsWarning
+                orphanTraceItemsCount={orphanTraceItemsCount}
+              />
             </EuiFlexItem>
           ) : null}
         </EuiFlexGroup>

diff --git a/...waterfall/missing_transaction_warning.tsx → .../waterfall/orphan_trace_items_warning.tsx b/...waterfall/missing_transaction_warning.tsx → .../waterfall/orphan_trace_items_warning.tsx
@@ -9,15 +9,20 @@ import React from 'react';
 import { EuiBadge, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-export function MissingTransactionWarning() {
+export function OrphanTraceItemsWarning({
+  orphanTraceItemsCount,
+}: {
+  orphanTraceItemsCount: number;
+}) {
   return (
     <EuiToolTip
       position="left"
       content={i18n.translate(
         'xpack.apm.transactionDetails.agentMissingTransactionMessage',
         {
           defaultMessage:
-            'This trace contains spans from missing transactions. As a result these spans are not displayed in the timeline.',
+            'This trace is incomplete and {itemsCount} items could not be displayed in the timeline. This could be a temporary problem caused by ingest delay, or a permanent problem caused by some events being dropped.',
+          values: { itemsCount: orphanTraceItemsCount },
         }
       )}
       anchorClassName="eui-fullWidth"

diff --git a/...ll_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.test.ts b/...ll_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.test.ts
@@ -16,7 +16,7 @@ import {
   IWaterfallTransaction,
   IWaterfallError,
   IWaterfallSpanOrTransaction,
-  getHasOrphanTraceItems,
+  getOrphanTraceItemsCount,
 } from './waterfall_helpers';
 import { APMError } from '../../../../../../../../typings/es_schemas/ui/apm_error';
 import {
@@ -719,7 +719,7 @@ describe('waterfall_helpers', () => {
     });
   });
 
-  describe('getHasOrphanTraceItems', () => {
+  describe('getOrphanTraceItemsCount', () => {
     const myTransactionItem = {
       processor: { event: 'transaction' },
       trace: { id: 'myTrace' },
@@ -728,7 +728,7 @@ describe('waterfall_helpers', () => {
       },
     } as WaterfallTransaction;
 
-    it('should return false if there are no orphan items', () => {
+    it('should return missing items count: 0 if there are no orphan items', () => {
       const traceItems: Array<WaterfallTransaction | WaterfallSpan> = [
         myTransactionItem,
         {
@@ -741,10 +741,10 @@ describe('waterfall_helpers', () => {
           },
         } as WaterfallSpan,
       ];
-      expect(getHasOrphanTraceItems(traceItems)).toBe(false);
+      expect(getOrphanTraceItemsCount(traceItems)).toBe(0);
     });
 
-    it('should return true if there are orphan items', () => {
+    it('should return missing items count if there are orphan items', () => {
       const traceItems: Array<WaterfallTransaction | WaterfallSpan> = [
         myTransactionItem,
         {
@@ -757,7 +757,7 @@ describe('waterfall_helpers', () => {
           },
         } as WaterfallSpan,
       ];
-      expect(getHasOrphanTraceItems(traceItems)).toBe(true);
+      expect(getOrphanTraceItemsCount(traceItems)).toBe(1);
     });
   });
 });
diff --git a/...terfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts b/...terfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts
@@ -48,7 +48,7 @@ export interface IWaterfall {
   totalErrorsCount: number;
   traceDocsTotal: number;
   maxTraceItems: number;
-  hasOrphanTraceItems: boolean;
+  orphanTraceItemsCount: number;
 }
 
 interface IWaterfallItemBase<TDocument, TDoctype> {
@@ -416,7 +416,7 @@ function getErrorCountByParentId(
   }, {});
 }
 
-export const getHasOrphanTraceItems = (
+export const getOrphanTraceItemsCount = (
   traceDocs: Array<WaterfallTransaction | WaterfallSpan>
 ) => {
   const waterfallItemsIds = new Set(
@@ -427,9 +427,13 @@ export const getHasOrphanTraceItems = (
     )
   );
 
-  return traceDocs.some(
-    (item) => item.parent?.id && !waterfallItemsIds.has(item.parent.id)
-  );
+  let missingTraceItemsCounter = 0;
+  traceDocs.some((item) => {
+    if (item.parent?.id && !waterfallItemsIds.has(item.parent.id)) {
+      missingTraceItemsCounter++;
+    }
+  });
+  return missingTraceItemsCounter;
 };
 
 export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
@@ -446,7 +450,7 @@ export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
       totalErrorsCount: 0,
       traceDocsTotal: 0,
       maxTraceItems: 0,
-      hasOrphanTraceItems: false,
+      orphanTraceItemsCount: 0,
     };
   }
 
@@ -482,7 +486,7 @@ export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
   const duration = getWaterfallDuration(items);
   const legends = getLegends(items);
 
-  const hasOrphanTraceItems = getHasOrphanTraceItems(traceItems.traceDocs);
+  const orphanTraceItemsCount = getOrphanTraceItemsCount(traceItems.traceDocs);
 
   return {
     entryWaterfallTransaction,
@@ -498,6 +502,6 @@ export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
     totalErrorsCount: traceItems.errorDocs.length,
     traceDocsTotal: traceItems.traceDocsTotal,
     maxTraceItems: traceItems.maxTraceItems,
-    hasOrphanTraceItems,
+    orphanTraceItemsCount,
   };
 }