From 0c47b397459c656804181afed4072a35d167ebd0 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Thu, 6 Feb 2020 21:09:24 -0600
Subject: [PATCH] Sync badge (#55113) (#57047)

* adding span sync badge on waterfall and flyout

Co-authored-by: Brittany Joiner <brittanyjoiner15@gmail.com>
---
 .../Waterfall/SpanFlyout/index.tsx            |  2 +
 .../Waterfall/SyncBadge.stories.tsx           | 44 ++++++++++++++++++
 .../Waterfall/SyncBadge.tsx                   | 46 +++++++++++++++++++
 .../Waterfall/WaterfallItem.tsx               |  2 +
 4 files changed, 94 insertions(+)
 create mode 100644 x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
 create mode 100644 x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
index 4863d6519de07..6f93762e11a82 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
@@ -34,6 +34,7 @@ import { DatabaseContext } from './DatabaseContext';
 import { StickySpanProperties } from './StickySpanProperties';
 import { HttpInfoSummaryItem } from '../../../../../../shared/Summary/HttpInfoSummaryItem';
 import { SpanMetadata } from '../../../../../../shared/MetadataTable/SpanMetadata';
+import { SyncBadge } from '../SyncBadge';
 
 function formatType(type: string) {
   switch (type) {
@@ -188,6 +189,7 @@ export function SpanFlyout({
                     <SpanBadge color="hollow">{spanTypes.spanAction}</SpanBadge>
                   </EuiToolTip>
                 )}
+                <SyncBadge sync={span.span.sync} />
               </>
             ]}
           />
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
new file mode 100644
index 0000000000000..c7d3f6cc6f0c6
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { SyncBadge } from './SyncBadge';
+
+storiesOf('app/TransactionDetails/SyncBadge', module)
+  .add(
+    'sync=true',
+    () => {
+      return <SyncBadge sync={true} />;
+    },
+    {
+      info: {
+        source: false
+      }
+    }
+  )
+  .add(
+    'sync=false',
+    () => {
+      return <SyncBadge sync={false} />;
+    },
+    {
+      info: {
+        source: false
+      }
+    }
+  )
+  .add(
+    'sync=undefined',
+    () => {
+      return <SyncBadge />;
+    },
+    {
+      info: {
+        source: false
+      }
+    }
+  );
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
new file mode 100644
index 0000000000000..764f15f943ad2
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import styled from 'styled-components';
+import { px, units } from '../../../../../../style/variables';
+
+const SpanBadge = styled(EuiBadge)`
+  display: inline-block;
+  margin-right: ${px(units.quarter)};
+`;
+
+interface SyncBadgeProps {
+  /**
+   * Is the request synchronous? True will show blocking, false will show async.
+   */
+  sync?: boolean;
+}
+
+export function SyncBadge({ sync }: SyncBadgeProps) {
+  switch (sync) {
+    case true:
+      return (
+        <SpanBadge>
+          {i18n.translate('xpack.apm.transactionDetails.syncBadgeBlocking', {
+            defaultMessage: 'blocking'
+          })}
+        </SpanBadge>
+      );
+    case false:
+      return (
+        <SpanBadge>
+          {i18n.translate('xpack.apm.transactionDetails.syncBadgeAsync', {
+            defaultMessage: 'async'
+          })}
+        </SpanBadge>
+      );
+    default:
+      return null;
+  }
+}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index 8a82547d717db..f57ccc3c34467 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -17,6 +17,7 @@ import { ErrorCount } from '../../ErrorCount';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
 import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';
+import { SyncBadge } from './SyncBadge';
 
 type ItemType = 'transaction' | 'span' | 'error';
 
@@ -231,6 +232,7 @@ export function WaterfallItem({
           </ErrorOverviewLink>
         ) : null}
         <Duration item={item} />
+        {item.docType === 'span' && <SyncBadge sync={item.doc.span.sync} />}
       </ItemText>
     </Container>
   );