updates for sync badge

elastic · Jan 27, 2020 · e1d2d0f · e1d2d0f
1 parent 124269b
commit e1d2d0f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git a/...ansactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/...ansactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
@@ -8,40 +8,37 @@ 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
+storiesOf('app/TransactionDetails/SyncBadge', module)
+ .add(
+  'sync=true',
+ () => {
+ return <SyncBadge sync={true} />;
+ },
+  {
+  info: {
+  source: false
+ }
  }
- }
-).add(
+ )
+ .add(
  'sync=false',
- () => {
- return (
- <SyncBadge sync={false}/>
- );
- },
- {
- info: {
- source: false
+ () => {
+ return <SyncBadge sync={false} />;
+ },
+ {
+ info: {
+ source: false
+ }
  }
- }
-).add(
+ )
+ .add(
  'sync=undefined',
- () => {
- return (
- <SyncBadge/>
- );
- },
- {
- info: {
- source: false
+ () => {
+ return <SyncBadge />;
+ },
+ {
+ info: {
+ source: false
+ }
  }
- }
-)
+ );
diff --git a/...s/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx b/...s/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
@@ -8,6 +8,7 @@ import { EuiBadge } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 import { px, units } from '../../../../../../style/variables';
+import { i18n } from '@kbn/i18n';
 
 const SpanBadge = styled(EuiBadge)`
  display: inline-block;
@@ -21,9 +22,16 @@ interface SyncBadgeProps {
 export function SyncBadge({ sync }: SyncBadgeProps) {
  switch (sync) {
  case true:
- return <SpanBadge>{'blocking'}</SpanBadge>;
+ return (
+ <SpanBadge>
+ {i18n.translate('xpack.apm.transactionDetails.syncBadgeBlocking', {
+ defaultMessage: 'blocking'
+ })}
+ blocking
+ </SpanBadge>
+ );
  case false:
- return <SpanBadge>{'async'}</SpanBadge>;
+ return <SpanBadge>async</SpanBadge>;
  default:
  return null;
  }