diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx index abd6aee61f407..aa2ea7388ffd6 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx +++ b/x-pack/plugins/apm/public/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} /> - {hasOrphanTraceItems ? ( + {orphanTraceItemsCount > 0 ? ( - + ) : null} diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/missing_transaction_warning.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/orphan_trace_items_warning.tsx similarity index 71% rename from x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/missing_transaction_warning.tsx rename to x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/orphan_trace_items_warning.tsx index 62d1d05bca6c2..c3554e2c84c40 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/missing_transaction_warning.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/orphan_trace_items_warning.tsx @@ -9,7 +9,11 @@ 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 ( { }); }); - 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 = [ 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 = [ myTransactionItem, { @@ -757,7 +757,7 @@ describe('waterfall_helpers', () => { }, } as WaterfallSpan, ]; - expect(getHasOrphanTraceItems(traceItems)).toBe(true); + expect(getOrphanTraceItemsCount(traceItems)).toBe(1); }); }); }); diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts index b197859ff1083..7152cecc3f805 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_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 { @@ -416,7 +416,7 @@ function getErrorCountByParentId( }, {}); } -export const getHasOrphanTraceItems = ( +export const getOrphanTraceItemsCount = ( traceDocs: Array ) => { 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, }; }