[APM] Only show span.sync badge when relevant

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({
 
                 <FailureBadge outcome={span.event?.outcome} />
 
-                <SyncBadge sync={span.span.sync} />
+                <SyncBadge sync={span.span.sync} agentName={span.agent.name} />
               </ContainerWithMarginRight>,
             ]}
           />

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 <SyncBadge sync={sync} />;
+export function Example({ sync, agentName }: SyncBadgeProps) {
+  return <SyncBadge sync={sync} agentName={agentName} />;
 }
-Example.args = { sync: true } as SyncBadgeProps;
+Example.args = { sync: true, agentName: 'nodejs' } as SyncBadgeProps;

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

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 (
-        <EuiBadge>
-          {i18n.translate('xpack.apm.transactionDetails.syncBadgeBlocking', {
-            defaultMessage: 'blocking',
-          })}
-        </EuiBadge>
-      );
-    case false:
-      return (
-        <EuiBadge>
-          {i18n.translate('xpack.apm.transactionDetails.syncBadgeAsync', {
-            defaultMessage: 'async',
-          })}
-        </EuiBadge>
-      );
-    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<string, boolean> = {
+  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 <EuiBadge>{syncLabel}</EuiBadge>;
 }

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({
 
         <Duration item={item} />
         <RelatedErrors item={item} errorCount={errorCount} />
-        {item.docType === 'span' && <SyncBadge sync={item.doc.span.sync} />}
+        {item.docType === 'span' && (
+          <SyncBadge
+            sync={item.doc.span.sync}
+            agentName={item.doc.agent.name}
+          />
+        )}
       </ItemText>
     </Container>
   );