From 11f8bea5c260b0a0dde3d53e537f5caf06b9b53d Mon Sep 17 00:00:00 2001 From: Katerina Patticha Date: Thu, 3 Jul 2025 16:32:29 +0300 Subject: [PATCH 1/4] [APM] Fix span flyout in operation page --- .../dependency_operation.cy.ts | 7 +++ .../cypress/fixtures/synthtrace/opbeans.ts | 50 ++++++++++++++++++- .../components/shared/span_links/index.tsx | 3 +- .../shared/span_links/span_links_table.tsx | 3 +- 4 files changed, 59 insertions(+), 4 deletions(-) diff --git a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts index 530d96f00153a..acc3d3cabc61b 100644 --- a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts +++ b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts @@ -47,4 +47,11 @@ describe('Dependency operation', () => { cy.getByTestSubj('apmActionMenuButtonInvestigateButton').click(); cy.getByTestSubj('apmActionMenuInvestigateButtonPopup'); }); + + it('opens Span link flyout', () => { + cy.visitKibana(dependencyOperationHref); + cy.contains('2 Span links').click(); + cy.contains('Span Details'); + cy.contains('Span B'); + }); }); diff --git a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts index b936f2eb8eb7d..61dc7765cf6a0 100644 --- a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts +++ b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts @@ -4,10 +4,27 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { apm, timerange } from '@kbn/apm-synthtrace-client'; +import { apm, timerange, generateLongId, generateShortId } from '@kbn/apm-synthtrace-client'; +import { shuffle, compact } from 'lodash'; + +function generateExternalSpanLinks() { + return Array(2) + .fill(0) + .map(() => ({ span: { id: generateShortId() }, trace: { id: generateLongId() } })); +} + +function getSpanLinksFromEvents(events: ApmFields[]) { + return compact( + events.map((event) => { + const spanId = event['span.id']; + return spanId ? { span: { id: spanId }, trace: { id: event['trace.id']! } } : undefined; + }) + ); +} export function opbeans({ from, to }: { from: number; to: number }) { const range = timerange(from, to); + const producerTimestamps = range.ratePerMinute(1); const opbeansJava = apm .service({ @@ -32,6 +49,25 @@ export function opbeans({ from, to }: { from: number; to: number }) { userAgent: apm.getChromeUserAgentDefaults(), }); + const opbeansJavaInternalOnlyEvents = producerTimestamps.generator((timestamp) => + opbeansJava + .transaction({ transactionName: 'Transaction A' }) + .timestamp(timestamp) + .duration(1000) + .success() + .children( + opbeansJava + .span({ spanName: 'Span A', spanType: 'messaging', spanSubtype: 'kafka' }) + .timestamp(timestamp) + .duration(100) + .success() + ) + ); + + const serializedProducerInternalOnlyEvents = Array.from(opbeansJavaInternalOnlyEvents).flatMap( + (event) => event.serialize() + ); + return range .interval('1s') .rate(1) @@ -57,7 +93,17 @@ export function opbeans({ from, to }: { from: number; to: number }) { .timestamp(timestamp) .duration(50) .failure() - .destination('postgresql') + .destination('postgresql'), + opbeansJava + .span({ spanName: 'Span B', spanType: 'messaging', spanSubtype: 'kafka' }) + .defaults({ + 'span.links': shuffle([ + ...generateExternalSpanLinks(), + ...getSpanLinksFromEvents(opbeansJavaInternalOnlyEvents), + ]), + }) + .timestamp(timestamp) + .duration(900) ), opbeansNode .transaction({ transactionName: 'GET /api/product/:id' }) diff --git a/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/index.tsx b/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/index.tsx index 6a19db9380958..eb6215150c97a 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/index.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/index.tsx @@ -33,7 +33,8 @@ export function SpanLinks({ spanLinksCount, traceId, spanId, processorEvent }: P } = useAnyOfApmParams( '/services/{serviceName}/transactions/view', '/mobile-services/{serviceName}/transactions/view', - '/traces/explorer/waterfall' + '/traces/explorer/waterfall', + '/dependencies/operation' ); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); diff --git a/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/span_links_table.tsx b/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/span_links_table.tsx index f1c84b7a4987a..e48c359af4eb6 100644 --- a/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/span_links_table.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/components/shared/span_links/span_links_table.tsx @@ -40,7 +40,8 @@ export function SpanLinksTable({ items }: Props) { } = useAnyOfApmParams( '/services/{serviceName}/transactions/view', '/mobile-services/{serviceName}/transactions/view', - '/traces/explorer/waterfall' + '/traces/explorer/waterfall', + '/dependencies/operation' ); const [idActionMenuOpen, setIdActionMenuOpen] = useState(); const { From 1fbcdee56e7036ce10e78ae25e7cfc7e37624446 Mon Sep 17 00:00:00 2001 From: Katerina Patticha Date: Fri, 4 Jul 2025 12:00:12 +0300 Subject: [PATCH 2/4] Fix types --- .../apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts index 61dc7765cf6a0..0192744d62443 100644 --- a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts +++ b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/fixtures/synthtrace/opbeans.ts @@ -4,6 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ +import type { ApmFields } from '@kbn/apm-synthtrace-client'; import { apm, timerange, generateLongId, generateShortId } from '@kbn/apm-synthtrace-client'; import { shuffle, compact } from 'lodash'; @@ -64,7 +65,7 @@ export function opbeans({ from, to }: { from: number; to: number }) { ) ); - const serializedProducerInternalOnlyEvents = Array.from(opbeansJavaInternalOnlyEvents).flatMap( + const serializedOpbeansJavaInternalOnlyEvents = Array.from(opbeansJavaInternalOnlyEvents).flatMap( (event) => event.serialize() ); @@ -99,7 +100,7 @@ export function opbeans({ from, to }: { from: number; to: number }) { .defaults({ 'span.links': shuffle([ ...generateExternalSpanLinks(), - ...getSpanLinksFromEvents(opbeansJavaInternalOnlyEvents), + ...getSpanLinksFromEvents(serializedOpbeansJavaInternalOnlyEvents), ]), }) .timestamp(timestamp) From 78db2c25f28f4f16ba389bcb7021b2c9d911bee4 Mon Sep 17 00:00:00 2001 From: Katerina Patticha Date: Mon, 7 Jul 2025 18:48:12 +0300 Subject: [PATCH 3/4] Update test --- .../cypress/e2e/dependency_operation/dependency_operation.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts index acc3d3cabc61b..b68792eb718a2 100644 --- a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts +++ b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts @@ -50,7 +50,7 @@ describe('Dependency operation', () => { it('opens Span link flyout', () => { cy.visitKibana(dependencyOperationHref); - cy.contains('2 Span links').click(); + cy.contains('Span links').click(); cy.contains('Span Details'); cy.contains('Span B'); }); From c065408f8528bbf2aa6a5a3beb06b1c963c23cc6 Mon Sep 17 00:00:00 2001 From: Katerina Patticha Date: Wed, 9 Jul 2025 18:12:02 +0300 Subject: [PATCH 4/4] fix typo --- .../cypress/e2e/dependency_operation/dependency_operation.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts index b68792eb718a2..6a72a50357e31 100644 --- a/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts +++ b/x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/dependency_operation/dependency_operation.cy.ts @@ -51,7 +51,7 @@ describe('Dependency operation', () => { it('opens Span link flyout', () => { cy.visitKibana(dependencyOperationHref); cy.contains('Span links').click(); - cy.contains('Span Details'); + cy.contains('Span details'); cy.contains('Span B'); }); });