Skip to content

Commit

Permalink
refactoring marker component and waterfall helper
Browse files Browse the repository at this point in the history
  • Loading branch information
cauemarcondes committed Jan 6, 2020
1 parent a58e6aa commit af9e22e
Show file tree
Hide file tree
Showing 20 changed files with 258 additions and 130 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
import { getAgentMarks } from './get_agent_marks';
import { Transaction } from '../../../../../../../../typings/es_schemas/ui/Transaction';
import { getAgentMarks } from '../get_agent_marks';

describe('getAgentMarks', () => {
it('should sort the marks by time', () => {
Expand All @@ -21,9 +21,24 @@ describe('getAgentMarks', () => {
}
} as any;
expect(getAgentMarks(transaction)).toEqual([
{ name: 'timeToFirstByte', offset: 10000, docType: 'agentMark' },
{ name: 'domInteractive', offset: 117000, docType: 'agentMark' },
{ name: 'domComplete', offset: 118000, docType: 'agentMark' }
{
id: 'timeToFirstByte',
offset: 10000,
type: 'agentMark',
verticalLine: true
},
{
id: 'domInteractive',
offset: 117000,
type: 'agentMark',
verticalLine: true
},
{
id: 'domComplete',
offset: 118000,
type: 'agentMark',
verticalLine: true
}
]);
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* 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 { IWaterfallItem } from '../../Waterfall/waterfall_helpers/waterfall_helpers';
import { getErrorMarks } from '../get_error_marks';

describe('getErrorMarks', () => {
describe('returns empty array', () => {
it('when items are missing', () => {
expect(getErrorMarks([])).toEqual([]);
});
it('when any error is available', () => {
const items = [
{ docType: 'span' },
{ docType: 'transaction' }
] as IWaterfallItem[];
expect(getErrorMarks(items)).toEqual([]);
});
});

it('returns error marks', () => {
const items = [
{
docType: 'error',
offset: 10,
skew: 5,
custom: { error: { id: 1 } },
serviceColor: 'blue'
} as unknown,
{ docType: 'transaction' },
{
docType: 'error',
offset: 50,
skew: 0,
custom: { error: { id: 2 } },
serviceColor: 'red'
} as unknown
] as IWaterfallItem[];
expect(getErrorMarks(items)).toEqual([
{
type: 'errorMark',
offset: 15,
verticalLine: false,
id: 1,
error: { error: { id: 1 } },
serviceColor: 'blue'
},
{
type: 'errorMark',
offset: 50,
verticalLine: false,
id: 2,
error: { error: { id: 2 } },
serviceColor: 'red'
}
]);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
*/

import { sortBy } from 'lodash';
import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
import { Transaction } from '../../../../../../../typings/es_schemas/ui/Transaction';
import { Mark } from '.';

export interface AgentMark {
docType: 'agentMark';
name: string;
offset: number;
// Extends Mark without adding new properties to it.
export interface AgentMark extends Mark {
type: 'agentMark';
}

export function getAgentMarks(transaction?: Transaction): AgentMark[] {
Expand All @@ -21,9 +21,10 @@ export function getAgentMarks(transaction?: Transaction): AgentMark[] {

return sortBy(
Object.entries(agent).map(([name, ms]) => ({
docType: 'agentMark',
name,
offset: ms * 1000
type: 'agentMark',
id: name,
offset: ms * 1000,
verticalLine: true
})),
'offset'
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* 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 { isEmpty } from 'lodash';
import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/ErrorRaw';
import {
IWaterfallItem,
IWaterfallError
} from '../Waterfall/waterfall_helpers/waterfall_helpers';
import { Mark } from '.';

export interface ErrorMark extends Mark {
type: 'errorMark';
error: ErrorRaw;
serviceColor?: string;
}

export const getErrorMarks = (items: IWaterfallItem[]): ErrorMark[] => {
if (isEmpty(items)) {
return [];
}

return (items.filter(
item => item.docType === 'error'
) as IWaterfallError[]).map(error => ({
type: 'errorMark',
offset: error.offset + error.skew,
verticalLine: false,
id: error.doc.error.id,
error: error.doc,
serviceColor: error.serviceColor
}));
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/*
* 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.
*/

export interface Mark {
type: string;
offset: number;
verticalLine: boolean;
id: string;
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,21 @@ export const WaterfallFlyout: React.FC<Props> = ({
case 'span':
const parentTransaction =
currentItem.parent?.docType === 'transaction'
? currentItem.parent?.custom
? currentItem.parent?.doc
: undefined;

return (
<SpanFlyout
totalDuration={waterfall.duration}
span={currentItem.custom}
span={currentItem.doc}
parentTransaction={parentTransaction}
onClose={() => toggleFlyout({ location })}
/>
);
case 'transaction':
return (
<TransactionFlyout
transaction={currentItem.custom}
transaction={currentItem.doc}
onClose={() => toggleFlyout({ location })}
rootTransactionDuration={
waterfall.rootTransaction?.transaction.duration.us
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
import { TRACE_ID } from '../../../../../../../common/elasticsearch_fieldnames';

type ItemType = 'transaction' | 'span' | 'error' | 'agentMark';
type ItemType = 'transaction' | 'span' | 'error';

interface IContainerStyleProps {
type: ItemType;
Expand Down Expand Up @@ -92,7 +92,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
switch (item.docType) {
case 'span': {
// icon for database spans
const isDbType = item.custom.span.type.startsWith('db');
const isDbType = item.doc.span.type.startsWith('db');
if (isDbType) {
return <EuiIcon type="database" />;
}
Expand All @@ -102,7 +102,7 @@ function PrefixIcon({ item }: { item: IWaterfallItem }) {
}
case 'transaction': {
// icon for RUM agent transactions
if (isRumAgentName(item.custom.agent.name)) {
if (isRumAgentName(item.doc.agent.name)) {
return <EuiIcon type="globe" />;
}

Expand All @@ -125,7 +125,7 @@ const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
if (item?.docType === 'span') {
return (
<EuiToolTip
content={`${item.custom.span.subtype}.${item.custom.span.action}`}
content={`${item.doc.span.subtype}.${item.doc.span.action}`}
>
<>{children}</>
</EuiToolTip>
Expand All @@ -145,8 +145,8 @@ function Duration({ item }: { item: IWaterfallItem }) {
function HttpStatusCode({ item }: { item: IWaterfallItem }) {
// http status code for transactions of type 'request'
const httpStatusCode =
item.docType === 'transaction' && item.custom.transaction.type === 'request'
? item.custom.transaction.result
item.docType === 'transaction' && item.doc.transaction.type === 'request'
? item.doc.transaction.result
: undefined;

if (!httpStatusCode) {
Expand All @@ -159,11 +159,11 @@ function HttpStatusCode({ item }: { item: IWaterfallItem }) {
function NameLabel({ item }: { item: IWaterfallItem }) {
switch (item.docType) {
case 'span':
return <EuiText size="s">{item.custom.span.name}</EuiText>;
return <EuiText size="s">{item.doc.span.name}</EuiText>;
case 'transaction':
return (
<EuiTitle size="xxs">
<h5>{item.custom.transaction.name}</h5>
<h5>{item.doc.transaction.name}</h5>
</EuiTitle>
);
default:
Expand Down Expand Up @@ -218,10 +218,10 @@ export function WaterfallItem({
<NameLabel item={item} />
{errorCount > 0 && item.docType === 'transaction' ? (
<ErrorOverviewLink
serviceName={item.custom.service.name}
serviceName={item.doc.service.name}
query={{
kuery: encodeURIComponent(
`${TRACE_ID} : "${item.custom.trace.id}" and transaction.id : "${item.custom.transaction.id}"`
`${TRACE_ID} : "${item.doc.trace.id}" and transaction.id : "${item.doc.transaction.id}"`
)
}}
color="danger"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { history } from '../../../../../../utils/history';
// @ts-ignore
import Timeline from '../../../../../shared/charts/Timeline';
import { fromQuery, toQuery } from '../../../../../shared/Links/url_helpers';
import { getAgentMarks } from '../get_agent_marks';
import { getAgentMarks } from '../Marks/get_agent_marks';
import { getErrorMarks } from '../Marks/get_error_marks';
import { WaterfallFlyout } from './WaterfallFlyout';
import { WaterfallItem } from './WaterfallItem';
import {
Expand Down Expand Up @@ -48,10 +49,8 @@ const toggleFlyout = ({
...location,
search: fromQuery({
...toQuery(location.search),
...{
flyoutDetailTab: undefined,
waterfallItemId: item ? String(item.id) : undefined
}
flyoutDetailTab: undefined,
waterfallItemId: item?.id
})
});
};
Expand Down Expand Up @@ -80,8 +79,8 @@ export const Waterfall: React.FC<Props> = ({

const { serviceColors, duration } = waterfall;

const agentMarkers = getAgentMarks(waterfall.entryTransaction);
const errorMarkers = waterfall.items.filter(item => item.docType === 'error');
const agentMarks = getAgentMarks(waterfall.entryTransaction);
const errorMarks = getErrorMarks(waterfall.items);

const renderWaterfallItem = (item: IWaterfallItem) => {
if (item.docType === 'error') {
Expand All @@ -90,14 +89,14 @@ export const Waterfall: React.FC<Props> = ({

const errorCount =
item.docType === 'transaction'
? waterfall.errorsPerTransaction[item.custom.transaction.id]
? waterfall.errorsPerTransaction[item.doc.transaction.id]
: 0;

return (
<WaterfallItem
key={item.id}
timelineMargins={TIMELINE_MARGINS}
color={serviceColors[item.custom.service.name]}
color={serviceColors[item.doc.service.name]}
item={item}
totalDuration={duration}
isSelected={item.id === waterfallItemId}
Expand All @@ -122,7 +121,7 @@ export const Waterfall: React.FC<Props> = ({
)}
<StickyContainer>
<Timeline
marks={[...agentMarkers, ...errorMarkers]}
marks={[...agentMarks, ...errorMarks]}
duration={duration}
height={waterfallHeight}
margins={TIMELINE_MARGINS}
Expand Down
Loading

0 comments on commit af9e22e

Please sign in to comment.