From 99c35f65a987148e3e974b36234615b91456ce12 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Thu, 12 Mar 2020 15:02:56 -0500 Subject: [PATCH] Convert Timeline to TypeScript (#59966) Will need to be touching some of these soon as part of elastic/observability-dev#532 so I'm converting to TypeScript. Get rid of default exports on all of them as well. --- .../Waterfall/WaterfallItem.tsx | 12 +--- .../WaterfallContainer/Waterfall/index.tsx | 2 +- .../{LastTickValue.js => LastTickValue.tsx} | 7 +- .../Timeline.test.js => Timeline.test.tsx} | 7 +- .../{TimelineAxis.js => TimelineAxis.tsx} | 45 ++++++------ .../{VerticalLines.js => VerticalLines.tsx} | 30 ++++---- .../Timeline.test.tsx.snap} | 2 +- .../shared/charts/Timeline/index.js | 49 ------------- .../shared/charts/Timeline/index.tsx | 70 +++++++++++++++++++ .../Timeline/{plotUtils.js => plotUtils.ts} | 15 +++- 10 files changed, 135 insertions(+), 104 deletions(-) rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{LastTickValue.js => LastTickValue.tsx} (75%) rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{__test__/Timeline.test.js => Timeline.test.tsx} (94%) rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{TimelineAxis.js => TimelineAxis.tsx} (81%) rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{VerticalLines.js => VerticalLines.tsx} (73%) rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{__test__/__snapshots__/Timeline.test.js.snap => __snapshots__/Timeline.test.tsx.snap} (99%) delete mode 100644 x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.js create mode 100644 x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.tsx rename x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/{plotUtils.js => plotUtils.ts} (69%) 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 b7b3e8d82ce61..5c6e0cc5ce435 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 @@ -18,12 +18,13 @@ import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers'; import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink'; import { TRACE_ID } from '../../../../../../../../../../plugins/apm/common/elasticsearch_fieldnames'; import { SyncBadge } from './SyncBadge'; +import { Margins } from '../../../../../shared/charts/Timeline'; type ItemType = 'transaction' | 'span' | 'error'; interface IContainerStyleProps { type: ItemType; - timelineMargins: ITimelineMargins; + timelineMargins: Margins; isSelected: boolean; } @@ -72,15 +73,8 @@ const ItemText = styled.span` } `; -interface ITimelineMargins { - right: number; - left: number; - top: number; - bottom: number; -} - interface IWaterfallItemProps { - timelineMargins: ITimelineMargins; + timelineMargins: Margins; totalDuration?: number; item: IWaterfallItem; color: string; diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx index 4f584786f2f9a..8bb62bf3b4305 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx @@ -14,7 +14,7 @@ import styled from 'styled-components'; import { px } from '../../../../../../style/variables'; import { history } from '../../../../../../utils/history'; // @ts-ignore -import Timeline from '../../../../../shared/charts/Timeline'; +import { Timeline } from '../../../../../shared/charts/Timeline'; import { fromQuery, toQuery } from '../../../../../shared/Links/url_helpers'; import { getAgentMarks } from '../Marks/get_agent_marks'; import { getErrorMarks } from '../Marks/get_error_marks'; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.tsx similarity index 75% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.js rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.tsx index 8a8a745eb2347..6780c79e5f35d 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.tsx @@ -6,7 +6,12 @@ import React from 'react'; -export default function LastTickValue({ x, marginTop, value }) { +interface LastTickValueProps { + x: number; + marginTop: number; + value: string; +} +export function LastTickValue({ x, marginTop, value }: LastTickValueProps) { return ( diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx similarity index 94% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx index 5428dd8317f64..af98a22dd0bac 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx @@ -4,12 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; import { mount } from 'enzyme'; +import React from 'react'; import { StickyContainer } from 'react-sticky'; - -import Timeline from '../index'; -import { mockMoment, toJson } from '../../../../../utils/testHelpers'; +import { mockMoment, toJson } from '../../../../utils/testHelpers'; +import { Timeline } from '.'; describe('Timeline', () => { beforeAll(() => { diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx similarity index 81% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx index 40df82b4cf1e0..dda4c6855ac4c 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx @@ -4,19 +4,23 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import PropTypes from 'prop-types'; +import theme from '@elastic/eui/dist/eui_theme_light.json'; import { inRange } from 'lodash'; +import React, { ReactNode } from 'react'; import { Sticky } from 'react-sticky'; -import { XYPlot, XAxis } from 'react-vis'; -import LastTickValue from './LastTickValue'; -import { Marker } from './Marker'; +import { XAxis, XYPlot } from 'react-vis'; import { px } from '../../../../style/variables'; import { getDurationFormatter } from '../../../../utils/formatters'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { Mark } from './'; +import { LastTickValue } from './LastTickValue'; +import { Marker } from './Marker'; +import { PlotValues } from './plotUtils'; // Remove any tick that is too close to topTraceDuration -const getXAxisTickValues = (tickValues, topTraceDuration) => { +const getXAxisTickValues = ( + tickValues: number[], + topTraceDuration?: number +) => { if (topTraceDuration == null) { return tickValues; } @@ -31,7 +35,18 @@ const getXAxisTickValues = (tickValues, topTraceDuration) => { }); }; -function TimelineAxis({ plotValues, marks, topTraceDuration }) { +interface TimelineAxisProps { + header?: ReactNode; + plotValues: PlotValues; + marks?: Mark[]; + topTraceDuration: number; +} + +export function TimelineAxis({ + plotValues, + marks = [], + topTraceDuration +}: TimelineAxisProps) { const { margins, tickValues, width, xDomain, xMax, xScale } = plotValues; const tickFormatter = getDurationFormatter(xMax); const xAxisTickValues = getXAxisTickValues(tickValues, topTraceDuration); @@ -67,7 +82,7 @@ function TimelineAxis({ plotValues, marks, topTraceDuration }) { orientation="top" tickSize={0} tickValues={xAxisTickValues} - tickFormat={time => tickFormatter(time).formatted} + tickFormat={(time?: number) => tickFormatter(time).formatted} tickPadding={20} style={{ text: { fill: theme.euiColorDarkShade } @@ -92,15 +107,3 @@ function TimelineAxis({ plotValues, marks, topTraceDuration }) { ); } - -TimelineAxis.propTypes = { - header: PropTypes.node, - plotValues: PropTypes.object.isRequired, - marks: PropTypes.array -}; - -TimelineAxis.defaultProps = { - marks: [] -}; - -export default TimelineAxis; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx similarity index 73% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx index baf3a26cb6cbf..5618aee8278d0 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.tsx @@ -4,14 +4,21 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { XYPlot, VerticalGridLines } from 'react-vis'; import theme from '@elastic/eui/dist/eui_theme_light.json'; +import React, { PureComponent } from 'react'; +import { VerticalGridLines, XYPlot } from 'react-vis'; +import { Mark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks'; +import { PlotValues } from './plotUtils'; + +interface VerticalLinesProps { + marks?: Mark[]; + plotValues: PlotValues; + topTraceDuration: number; +} -class VerticalLines extends PureComponent { +export class VerticalLines extends PureComponent { render() { - const { topTraceDuration, marks } = this.props; + const { topTraceDuration, marks = [] } = this.props; const { width, height, @@ -52,7 +59,7 @@ class VerticalLines extends PureComponent { {topTraceDuration > 0 && ( )} @@ -60,14 +67,3 @@ class VerticalLines extends PureComponent { ); } } - -VerticalLines.propTypes = { - plotValues: PropTypes.object.isRequired, - marks: PropTypes.array -}; - -VerticalLines.defaultProps = { - marks: [] -}; - -export default VerticalLines; diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap similarity index 99% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap index 0cc51dda4a9b5..63b8dc54a55b9 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap @@ -906,7 +906,7 @@ exports[`Timeline should render with data 1`] = ` className="rv-xy-plot__grid-lines__line" style={ Object { - "stroke": undefined, + "stroke": "#98a2b3", } } x1={900} diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.js deleted file mode 100644 index 327049a61a1ac..0000000000000 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.js +++ /dev/null @@ -1,49 +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 React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; - -import { makeWidthFlexible } from 'react-vis'; -import { getPlotValues } from './plotUtils'; -import TimelineAxis from './TimelineAxis'; -import VerticalLines from './VerticalLines'; - -class Timeline extends PureComponent { - render() { - const { width, duration, marks, height, margins } = this.props; - if (duration == null || !width) { - return null; - } - const plotValues = getPlotValues({ width, duration, height, margins }); - - return ( -
- - -
- ); - } -} - -Timeline.propTypes = { - marks: PropTypes.array, - duration: PropTypes.number, - height: PropTypes.number.isRequired, - header: PropTypes.node, - margins: PropTypes.object.isRequired, - width: PropTypes.number -}; - -export default makeWidthFlexible(Timeline); diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.tsx new file mode 100644 index 0000000000000..491dd97d0f62d --- /dev/null +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/index.tsx @@ -0,0 +1,70 @@ +/* + * 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 PropTypes from 'prop-types'; +import React, { PureComponent, ReactNode } from 'react'; +import { makeWidthFlexible } from 'react-vis'; +import { getPlotValues } from './plotUtils'; +import { TimelineAxis } from './TimelineAxis'; +import { VerticalLines } from './VerticalLines'; +import { ErrorMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks'; +import { AgentMark } from '../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks'; + +export type Mark = AgentMark | ErrorMark; + +export interface Margins { + top: number; + right: number; + bottom: number; + left: number; +} + +interface TimelineProps { + marks?: Mark[]; + duration?: number; + height: number; + header?: ReactNode; + margins: Margins; + width?: number; +} + +class TL extends PureComponent { + // We normally do not define propTypes for TypeScript components, but the + // `makeWidthFlexible` HOC from react-vis depends on them. + static propTypes = { + marks: PropTypes.array, + duration: PropTypes.number, + height: PropTypes.number.isRequired, + header: PropTypes.node, + margins: PropTypes.object.isRequired, + width: PropTypes.number + }; + + render() { + const { width, duration, marks, height, margins } = this.props; + if (duration == null || !width) { + return null; + } + const plotValues = getPlotValues({ width, duration, height, margins }); + + return ( +
+ + +
+ ); + } +} + +export const Timeline = makeWidthFlexible(TL); diff --git a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.js b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.ts similarity index 69% rename from x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.js rename to x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.ts index e3004edd7b3d9..53fbd483b548c 100644 --- a/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.js +++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.ts @@ -5,8 +5,21 @@ */ import { scaleLinear } from 'd3-scale'; +import { Margins } from './'; -export function getPlotValues({ width, duration, height, margins }) { +export type PlotValues = ReturnType; + +export function getPlotValues({ + width, + duration, + height, + margins +}: { + width: number; + duration: number; + height: number; + margins: Margins; +}) { const xMin = 0; const xMax = duration; const xScale = scaleLinear()