Skip to content

Commit

Permalink
Sync badge (#55113)
Browse files Browse the repository at this point in the history
* adding span sync badge on waterfall and flyout
  • Loading branch information
brittanyjoiner15 authored Jan 30, 2020
1 parent 349851c commit 8a4d680
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -188,6 +189,7 @@ export function SpanFlyout({
<SpanBadge color="hollow">{spanTypes.spanAction}</SpanBadge>
</EuiToolTip>
)}
<SyncBadge sync={span.span.sync} />
</>
]}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -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
}
}
);
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -231,6 +232,7 @@ export function WaterfallItem({
</ErrorOverviewLink>
) : null}
<Duration item={item} />
{item.docType === 'span' && <SyncBadge sync={item.doc.span.sync} />}
</ItemText>
</Container>
);
Expand Down

0 comments on commit 8a4d680

Please sign in to comment.