Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 14, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d5e8de
Rename to OrphanTraceItemsWarning and change message
jennypavlova Dec 12, 2023
0ac5ea0
Merge branch 'main' into 173134-obsux-trace-timeline-change-the-missi…
jennypavlova Dec 13, 2023
3f88051
Merge branch 'main' into 173134-obsux-trace-timeline-change-the-missi…
jennypavlova Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions ...c/components/app/transaction_details/waterfall_with_summary/waterfall_container/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(
Expand Down Expand Up @@ -116,9 +116,11 @@ export function WaterfallContainer({
type={colorBy}
/>
</EuiFlexItem>
{hasOrphanTraceItems ? (
{orphanTraceItemsCount > 0 ? (
<EuiFlexItem grow={false}>
<MissingTransactionWarning />
<OrphanTraceItemsWarning
orphanTraceItemsCount={orphanTraceItemsCount}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
Expand Down
9 changes: 7 additions & 2 deletions ...waterfall/missing_transaction_warning.tsx → .../waterfall/orphan_trace_items_warning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions ...ll_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
IWaterfallTransaction,
IWaterfallError,
IWaterfallSpanOrTransaction,
getHasOrphanTraceItems,
getOrphanTraceItemsCount,
} from './waterfall_helpers';
import { APMError } from '../../../../../../../../typings/es_schemas/ui/apm_error';
import {
Expand Down Expand Up @@ -719,7 +719,7 @@ describe('waterfall_helpers', () => {
});
});

describe('getHasOrphanTraceItems', () => {
describe('getOrphanTraceItemsCount', () => {
const myTransactionItem = {
processor: { event: 'transaction' },
trace: { id: 'myTrace' },
Expand All @@ -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,
{
Expand All @@ -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,
{
Expand All @@ -757,7 +757,7 @@ describe('waterfall_helpers', () => {
},
} as WaterfallSpan,
];
expect(getHasOrphanTraceItems(traceItems)).toBe(true);
expect(getOrphanTraceItemsCount(traceItems)).toBe(1);
});
});
});
20 changes: 12 additions & 8 deletions ...terfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export interface IWaterfall {
totalErrorsCount: number;
traceDocsTotal: number;
maxTraceItems: number;
hasOrphanTraceItems: boolean;
orphanTraceItemsCount: number;
}

interface IWaterfallItemBase<TDocument, TDoctype> {
Expand Down Expand Up @@ -416,7 +416,7 @@ function getErrorCountByParentId(
}, {});
}

export const getHasOrphanTraceItems = (
export const getOrphanTraceItemsCount = (
traceDocs: Array<WaterfallTransaction | WaterfallSpan>
) => {
const waterfallItemsIds = new Set(
Expand All @@ -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 {
Expand All @@ -446,7 +450,7 @@ export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
totalErrorsCount: 0,
traceDocsTotal: 0,
maxTraceItems: 0,
hasOrphanTraceItems: false,
orphanTraceItemsCount: 0,
};
}

Expand Down Expand Up @@ -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,
Expand All @@ -498,6 +502,6 @@ export function getWaterfall(apiResponse: TraceAPIResponse): IWaterfall {
totalErrorsCount: traceItems.errorDocs.length,
traceDocsTotal: traceItems.traceDocsTotal,
maxTraceItems: traceItems.maxTraceItems,
hasOrphanTraceItems,
orphanTraceItemsCount,
};
}
Loading