diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx index 57bfc2b61fc53..0087b0f9d1fac 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx @@ -211,7 +211,7 @@ export function SpanFlyout({ - + , ]} /> diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.stories.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.stories.tsx index 6b52fbe2d784a..dea05961c4cef 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.stories.tsx @@ -15,10 +15,27 @@ export default { sync: { control: { type: 'inline-radio', options: [true, false, undefined] }, }, + agentName: { + control: { + type: 'select', + options: [ + 'nodejs', + 'js-base', + 'rum-js', + 'php', + 'python', + 'dotnet', + 'iOS/swift', + 'ruby', + 'java', + 'go', + ], + }, + }, }, }; -export function Example({ sync }: SyncBadgeProps) { - return ; +export function Example({ sync, agentName }: SyncBadgeProps) { + return ; } -Example.args = { sync: true } as SyncBadgeProps; +Example.args = { sync: true, agentName: 'nodejs' } as SyncBadgeProps; diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.test.tsx new file mode 100644 index 0000000000000..b73532cfab812 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.test.tsx @@ -0,0 +1,82 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { getSyncLabel } from './sync_badge'; + +describe('Sync badge', () => { + describe('Nodejs', () => { + it('shows blocking badge', () => { + expect(getSyncLabel('nodejs', true)).toBe('blocking'); + }); + it('does not show async badge', () => { + expect(getSyncLabel('nodejs', false)).toBeUndefined(); + }); + }); + describe('PHP', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('php', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('php', false)).toBe('async'); + }); + }); + describe('Python', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('python', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('python', false)).toBe('async'); + }); + }); + describe('.NET', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('dotnet', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('dotnet', false)).toBe('async'); + }); + }); + describe('iOS', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('iOS/swift', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('iOS/swift', false)).toBe('async'); + }); + }); + describe('Ruby', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('ruby', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('ruby', false)).toBe('async'); + }); + }); + describe('Java', () => { + it('does not show blocking badge', () => { + expect(getSyncLabel('java', true)).toBeUndefined(); + }); + it('shows async badge', () => { + expect(getSyncLabel('java', false)).toBe('async'); + }); + }); + describe('JS', () => { + it('shows blocking badge', () => { + expect(getSyncLabel('js-base', true)).toBe('blocking'); + }); + it('does not show async badge', () => { + expect(getSyncLabel('js-base', false)).toBeUndefined(); + }); + }); + describe('RUM', () => { + it('shows blocking badge', () => { + expect(getSyncLabel('rum-js', true)).toBe('blocking'); + }); + it('does not show async badge', () => { + expect(getSyncLabel('rum-js', false)).toBeUndefined(); + }); + }); +}); diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.tsx index fe74f3d51c8bc..a51d710bf3961 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/sync_badge.tsx @@ -8,33 +8,65 @@ import { EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; +import { AgentName } from '../../../../../../../typings/es_schemas/ui/fields/agent'; export interface SyncBadgeProps { /** * Is the request synchronous? True will show blocking, false will show async. */ sync?: boolean; + agentName: AgentName; } -export function SyncBadge({ sync }: SyncBadgeProps) { - switch (sync) { - case true: - return ( - - {i18n.translate('xpack.apm.transactionDetails.syncBadgeBlocking', { - defaultMessage: 'blocking', - })} - - ); - case false: - return ( - - {i18n.translate('xpack.apm.transactionDetails.syncBadgeAsync', { - defaultMessage: 'async', - })} - - ); - default: - return null; +const BLOCKING_LABEL = i18n.translate( + 'xpack.apm.transactionDetails.syncBadgeBlocking', + { + defaultMessage: 'blocking', } +); + +const ASYNC_LABEL = i18n.translate( + 'xpack.apm.transactionDetails.syncBadgeAsync', + { + defaultMessage: 'async', + } +); + +// true will show blocking, false will show async. +// otel doesn't set sync field +const agentsSyncMap: Record = { + nodejs: true, + 'js-base': true, + 'rum-js': true, + php: false, + python: false, + dotnet: false, + 'iOS/swift': false, + ruby: false, + java: false, + go: false, +}; + +export function getSyncLabel(agentName: AgentName, sync?: boolean) { + if (sync === undefined) { + return; + } + + const agentSyncValue = agentsSyncMap[agentName]; + if (sync && agentSyncValue) { + return BLOCKING_LABEL; + } + + if (!sync && !agentSyncValue) { + return ASYNC_LABEL; + } +} + +export function SyncBadge({ sync, agentName }: SyncBadgeProps) { + const syncLabel = getSyncLabel(agentName, sync); + if (!syncLabel) { + return null; + } + + return {syncLabel}; } diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx index 056a2847c68bf..d8942cab36f77 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx @@ -228,7 +228,12 @@ export function WaterfallItem({ - {item.docType === 'span' && } + {item.docType === 'span' && ( + + )} );