diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/ServiceLegends.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/ServiceLegends.tsx index f511c9d93fecac..a909fcc20dfb97 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/ServiceLegends.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/ServiceLegends.tsx @@ -10,6 +10,7 @@ import styled from 'styled-components'; import { px, unit } from '../../../../../style/variables'; // @ts-ignore import Legend from '../../../../shared/charts/Legend'; +import { IServiceColors } from './Waterfall/waterfall_helpers/waterfall_helpers'; const Legends = styled.div` display: flex; @@ -23,9 +24,7 @@ const Legends = styled.div` `; interface Props { - serviceColors: { - [key: string]: string; - }; + serviceColors: IServiceColors; } export function ServiceLegends({ serviceColors }: Props) { diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx index df44c20c772206..999a5d96efa4a6 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx @@ -44,7 +44,7 @@ const SpanLabel = styled<{ left: number }, any>('div')` white-space: nowrap; position: relative; left: ${props => `${props.left}%`}; - width: ${props => `${100 - props.left}%`}; + width: ${props => `${Math.max(100 - props.left, 0)}%`}; direction: rtl; text-align: left; margin: ${px(units.quarter)} 0 0; diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx index d114484a4de393..57d293cfb55efd 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx @@ -19,6 +19,7 @@ import { AgentMark } from '../get_agent_marks'; import { SpanFlyout } from './SpanFlyout'; import { TransactionFlyout } from './TransactionFlyout'; import { + IServiceColors, IWaterfall, IWaterfallItem } from './waterfall_helpers/waterfall_helpers'; @@ -42,9 +43,7 @@ interface Props { urlParams: IUrlParams; waterfall: IWaterfall; location: any; - serviceColors: { - [key: string]: string; - }; + serviceColors: IServiceColors; } export class Waterfall extends Component { @@ -129,6 +128,7 @@ export class Waterfall extends Component { @@ -157,8 +157,3 @@ export class Waterfall extends Component { }); } } - -// TODO: the agent marks and note about dropped spans were removed. Need to be re-added -// agentMarks: PropTypes.array, -// agentName: PropTypes.string.isRequired, -// droppedSpans: PropTypes.number.isRequired, diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts index 3669f6a378a7c7..6d4447029286cd 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts @@ -8,6 +8,7 @@ import { groupBy, indexBy } from 'lodash'; import { Span } from 'x-pack/plugins/apm/typings/Span'; import { Transaction } from 'x-pack/plugins/apm/typings/Transaction'; import { + getClockSkew, getWaterfallItems, IWaterfallIndex, IWaterfallItem @@ -101,4 +102,79 @@ describe('waterfall_helpers', () => { ).toMatchSnapshot(); }); }); + + describe('getClockSkew', () => { + it('should adjust when child starts before parent', () => { + const item = { + docType: 'transaction', + timestamp: 0, + duration: 50 + } as IWaterfallItem; + + const parentItem = { + timestamp: 100, + skew: 5, + duration: 100 + } as IWaterfallItem; + const parentTransactionSkew = 1337; + + expect(getClockSkew(item, parentItem, parentTransactionSkew)).toBe(130); + }); + + it('should adjust when child starts after parent has ended', () => { + const item = { + docType: 'transaction', + timestamp: 250, + duration: 50 + } as IWaterfallItem; + + const parentItem = { + timestamp: 100, + skew: 5, + duration: 100 + } as IWaterfallItem; + const parentTransactionSkew = 1337; + + expect(getClockSkew(item, parentItem, parentTransactionSkew)).toBe(-120); + }); + + it('should not adjust when child starts within parent duration', () => { + const item = { + docType: 'transaction', + timestamp: 150, + duration: 50 + } as IWaterfallItem; + + const parentItem = { + timestamp: 100, + skew: 5, + duration: 100 + } as IWaterfallItem; + const parentTransactionSkew = 1337; + + expect(getClockSkew(item, parentItem, parentTransactionSkew)).toBe(0); + }); + + it('should return parentTransactionSkew for spans', () => { + const item = { + docType: 'span' + } as IWaterfallItem; + + const parentItem = {} as IWaterfallItem; + const parentTransactionSkew = 1337; + + expect(getClockSkew(item, parentItem, parentTransactionSkew)).toBe(1337); + }); + + it('should handle missing parentItem', () => { + const item = { + docType: 'transaction' + } as IWaterfallItem; + + const parentItem = undefined; + const parentTransactionSkew = 1337; + + expect(getClockSkew(item, parentItem, parentTransactionSkew)).toBe(0); + }); + }); }); diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts index 1191149992d598..604d7252b6753c 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts @@ -11,8 +11,10 @@ import { indexBy, isEmpty, sortBy, - uniq + uniq, + zipObject } from 'lodash'; +import { colors } from 'x-pack/plugins/apm/public/style/variables'; import { Span } from '../../../../../../../../typings/Span'; import { Transaction } from '../../../../../../../../typings/Transaction'; @@ -26,12 +28,17 @@ export interface IWaterfallGroup { export interface IWaterfall { traceRoot?: Transaction; - traceRootDuration?: number; - duration?: number; + traceRootDuration: number; + + /** + * Duration in us + */ + duration: number; services: string[]; items: IWaterfallItem[]; itemsById: IWaterfallIndex; getTransactionById: (id?: IWaterfallItem['id']) => Transaction | undefined; + serviceColors: IServiceColors; } interface IWaterfallItemBase { @@ -39,9 +46,25 @@ interface IWaterfallItemBase { parentId?: string; serviceName: string; name: string; + + /** + * Duration in us + */ duration: number; + + /** + * start timestamp in us + */ timestamp: number; + + /** + * offset from first item in us + */ offset: number; + + /** + * skew from timestamp in us + */ skew: number; childIds?: Array; } @@ -120,38 +143,39 @@ function getSpanItem(span: Span): IWaterfallItemSpan { }; } -function getClockSkew( +export function getClockSkew( item: IWaterfallItem, - itemsById: IWaterfallIndex, + parentItem: IWaterfallItem | undefined, parentTransactionSkew: number ) { switch (item.docType) { case 'span': return parentTransactionSkew; case 'transaction': { - if (!item.parentId) { - return 0; - } - - const parentItem = itemsById[item.parentId]; - // For some reason the parent span and related transactions might be missing. if (!parentItem) { return 0; } - // determine if child starts before the parent, and in that case how much - const diff = parentItem.timestamp + parentItem.skew - item.timestamp; + const parentStart = parentItem.timestamp + parentItem.skew; + const parentEnd = parentStart + parentItem.duration; - // If child transaction starts after parent span there is no clock skew - if (diff < 0) { + // determine if child starts before the parent + const offsetStart = parentStart - item.timestamp; + + // determine if child starts after the parent has ended + const offsetEnd = item.timestamp - parentEnd; + + // child transaction starts before parent OR + // child transaction starts after parent has ended + if (offsetStart > 0 || offsetEnd > 0) { + const latency = Math.max(parentItem.duration - item.duration, 0) / 2; + return offsetStart + latency; + + // child transaction starts withing parent duration and no adjustment is needed + } else { return 0; } - - // latency can only be calculated if parent duration is larger than child duration - const latency = Math.max(parentItem.duration - item.duration, 0); - const skew = diff + latency / 2; - return skew; } } } @@ -165,7 +189,8 @@ export function getWaterfallItems( item: IWaterfallItem, parentTransactionSkew: number ): IWaterfallItem[] { - const skew = getClockSkew(item, itemsById, parentTransactionSkew); + const parentItem = item.parentId ? itemsById[item.parentId] : undefined; + const skew = getClockSkew(item, parentItem, parentTransactionSkew); const children = sortBy(childrenByParentId[item.id] || [], 'timestamp'); item.childIds = children.map(child => child.id); @@ -193,6 +218,45 @@ function getServices(items: IWaterfallItem[]) { return uniq(serviceNames); } +export interface IServiceColors { + [key: string]: string; +} + +function getServiceColors(services: string[]) { + const assignedColors = [ + colors.apmBlue, + colors.apmGreen, + colors.apmPurple, + colors.apmRed2, + colors.apmTan, + colors.apmOrange, + colors.apmYellow + ]; + + return zipObject(services, assignedColors) as IServiceColors; +} + +function getDuration(items: IWaterfallItem[]) { + const timestampStart = items[0].timestamp; + const timestampEnd = Math.max( + ...items.map(item => item.timestamp + item.duration + item.skew) + ); + return timestampEnd - timestampStart; +} + +function createGetTransactionById(itemsById: IWaterfallIndex) { + return (id?: IWaterfallItem['id']) => { + if (!id) { + return; + } + + const item = itemsById[id]; + if (item.docType === 'transaction') { + return item.transaction; + } + }; +} + export function getWaterfall( hits: Array, entryTransaction: Transaction @@ -200,9 +264,12 @@ export function getWaterfall( if (isEmpty(hits)) { return { services: [], + duration: 0, + traceRootDuration: 0, items: [], itemsById: {}, - getTransactionById: () => undefined + getTransactionById: () => undefined, + serviceColors: {} }; } @@ -235,25 +302,22 @@ export function getWaterfall( entryTransactionItem ); const traceRoot = getTraceRoot(childrenByParentId); - - const getTransactionById = (id?: IWaterfallItem['id']) => { - if (!id) { - return; - } - - const item = itemsById[id]; - if (item.docType === 'transaction') { - return item.transaction; - } - }; + const duration = getDuration(items); + const traceRootDuration = traceRoot + ? traceRoot.transaction.duration.us + : duration; + const services = getServices(items); + const getTransactionById = createGetTransactionById(itemsById); + const serviceColors = getServiceColors(services); return { traceRoot, - traceRootDuration: traceRoot && traceRoot.transaction.duration.us, - duration: entryTransaction.transaction.duration.us, - services: getServices(items), + traceRootDuration, + duration, + services, items, itemsById, - getTransactionById + getTransactionById, + serviceColors }; } diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/getServiceColors.ts b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/getServiceColors.ts deleted file mode 100644 index 77d179d4b64eb7..00000000000000 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/getServiceColors.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * 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 { zipObject } from 'lodash'; -import { colors } from '../../../../../style/variables'; - -interface IServiceColors { - [key: string]: string; -} - -export function getServiceColors(services: string[]): IServiceColors { - const assignedColors = [ - colors.apmBlue, - colors.apmGreen, - colors.apmPurple, - colors.apmRed2, - colors.apmTan, - colors.apmOrange, - colors.apmYellow - ]; - - return zipObject(services, assignedColors); -} diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/index.tsx index a48f944b8f2cd0..5d78ce85d0775e 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/index.tsx +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/index.tsx @@ -17,7 +17,6 @@ import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams'; import { getAgentMarks } from './get_agent_marks'; -import { getServiceColors } from './getServiceColors'; import { ServiceLegends } from './ServiceLegends'; import { Waterfall } from './Waterfall'; import { IWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers'; @@ -39,13 +38,12 @@ export function WaterfallContainer({ if (!waterfall) { return null; } - const serviceColors = getServiceColors(waterfall.services); return (
- + diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js index 887789f4f2b683..9731813e5d943b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js @@ -6,7 +6,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import _ from 'lodash'; +import { inRange } from 'lodash'; import { Sticky } from 'react-sticky'; import { XYPlot, XAxis } from 'react-vis'; import LastTickValue from './LastTickValue'; @@ -14,14 +14,26 @@ import AgentMarker from './AgentMarker'; import { colors, px } from '../../../../style/variables'; import { getTimeFormatter } from '../../../../utils/formatters'; -// Remove last tick if it's too close to xMax -const getXAxisTickValues = (tickValues, xMax) => - _.last(tickValues) * 1.05 > xMax ? tickValues.slice(0, -1) : tickValues; +// Remove any tick that is too close to traceRootDuration +const getXAxisTickValues = (tickValues, traceRootDuration) => { + if (!tickValues) { + return []; + } -function TimelineAxis({ plotValues, agentMarks }) { + const padding = (tickValues[1] - tickValues[0]) / 2; + const lowerBound = traceRootDuration - padding; + const upperBound = traceRootDuration + padding; + + return tickValues.filter(value => { + const isInRange = inRange(value, lowerBound, upperBound); + return !isInRange && value !== traceRootDuration; + }); +}; + +function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) { const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues; const tickFormat = getTimeFormatter(xMax); - const xAxisTickValues = getXAxisTickValues(tickValues, xMax); + const xAxisTickValues = getXAxisTickValues(tickValues, traceRootDuration); return ( @@ -62,8 +74,8 @@ function TimelineAxis({ plotValues, agentMarks }) { /> diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js index ae1297aa1a1911..265b673f5ac954 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js @@ -11,13 +11,13 @@ import { colors } from '../../../../style/variables'; class VerticalLines extends PureComponent { render() { + const { traceRootDuration } = this.props; const { width, height, margins, xDomain, - tickValues, - xMax + tickValues } = this.props.plotValues; const agentMarkTimes = this.props.agentMarks.map(({ us }) => us); @@ -43,7 +43,7 @@ class VerticalLines extends PureComponent { /> diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js index 2b92ae4c9fbf27..ba30c70c596721 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js @@ -9,7 +9,6 @@ import { mount } from 'enzyme'; import { StickyContainer } from 'react-sticky'; import Timeline from '../index'; -import props from './props.json'; import { mockMoment, toJson } from '../../../../../utils/testHelpers'; describe('Timeline', () => { @@ -18,9 +17,28 @@ describe('Timeline', () => { }); it('should render with data', () => { + const props = { + traceRootDuration: 200000, + width: 1000, + duration: 200000, + height: 116, + margins: { + top: 100, + left: 50, + right: 50, + bottom: 0 + }, + animation: null, + agentMarks: [ + { name: 'timeToFirstByte', us: 100000 }, + { name: 'domInteractive', us: 110000 }, + { name: 'domComplete', us: 190000 } + ] + }; + const wrapper = mount( - Hello - i am a header
} {...props} /> + ); diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap index 9911e730da0ea5..30ed07350adace 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap @@ -144,7 +144,7 @@ exports[`Timeline should render with data 1`] = ` }, } } - transform="translate(87.9408646541237, 0)" + transform="translate(90, 0)" > - 205 ms + 200 ms @@ -531,7 +531,7 @@ exports[`Timeline should render with data 1`] = ` style={ Object { "bottom": 0, - "left": "484.2043232706185px", + "left": "494.5px", "position": "absolute", } } @@ -561,7 +561,7 @@ exports[`Timeline should render with data 1`] = ` style={ Object { "bottom": 0, - "left": "528.1747555976804px", + "left": "539.5px", "position": "absolute", } } @@ -591,7 +591,7 @@ exports[`Timeline should render with data 1`] = ` style={ Object { "bottom": 0, - "left": "879.9382142141751px", + "left": "899.5px", "position": "absolute", } } @@ -673,8 +673,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={87.9408646541237} - x2={87.9408646541237} + x1={90} + x2={90} y1={0} y2={116} /> @@ -685,8 +685,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={175.8817293082474} - x2={175.8817293082474} + x1={180} + x2={180} y1={0} y2={116} /> @@ -697,8 +697,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={263.82259396237106} - x2={263.82259396237106} + x1={270} + x2={270} y1={0} y2={116} /> @@ -709,8 +709,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={351.7634586164948} - x2={351.7634586164948} + x1={360} + x2={360} y1={0} y2={116} /> @@ -721,8 +721,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={439.7043232706185} - x2={439.7043232706185} + x1={450} + x2={450} y1={0} y2={116} /> @@ -733,8 +733,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={527.6451879247421} - x2={527.6451879247421} + x1={540} + x2={540} y1={0} y2={116} /> @@ -745,8 +745,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={615.5860525788659} - x2={615.5860525788659} + x1={630} + x2={630} y1={0} y2={116} /> @@ -757,8 +757,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={703.5269172329896} - x2={703.5269172329896} + x1={720} + x2={720} y1={0} y2={116} /> @@ -769,8 +769,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={791.4677818871132} - x2={791.4677818871132} + x1={810} + x2={810} y1={0} y2={116} /> @@ -781,8 +781,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#f5f5f5", } } - x1={879.408646541237} - x2={879.408646541237} + x1={900} + x2={900} y1={0} y2={116} /> @@ -798,8 +798,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#999999", } } - x1={439.7043232706185} - x2={439.7043232706185} + x1={450} + x2={450} y1={0} y2={116} /> @@ -810,8 +810,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#999999", } } - x1={483.6747555976803} - x2={483.6747555976803} + x1={495.00000000000006} + x2={495.00000000000006} y1={0} y2={116} /> @@ -822,8 +822,8 @@ exports[`Timeline should render with data 1`] = ` "stroke": "#999999", } } - x1={835.4382142141751} - x2={835.4382142141751} + x1={855} + x2={855} y1={0} y2={116} /> diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/props.json b/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/props.json deleted file mode 100644 index 5952118967b740..00000000000000 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/props.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "width": 1000, - "duration": 204683, - "height": 116, - "margins": { - "top": 100, - "left": 50, - "right": 50, - "bottom": 0 - }, - "animation": null, - "agentMarks": [ - { "name": "timeToFirstByte", "us": 100000 }, - { "name": "domInteractive", "us": 110000 }, - { "name": "domComplete", "us": 190000 } - ] -} diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.js b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.js index 711007341c50e6..0449f3e195c79e 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.js +++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/index.js @@ -14,17 +14,31 @@ import VerticalLines from './VerticalLines'; class Timeline extends PureComponent { render() { - const { width, duration, agentMarks, height, margins } = this.props; + const { + width, + duration, + agentMarks, + traceRootDuration, + height, + margins + } = this.props; if (duration == null || !width) { return null; } - const plotValues = getPlotValues({ width, duration, height, margins }); return (
- - + +
); }