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' && (
+
+ )}
);