Convert Timeline to TypeScript (#59966) (#60062)

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.

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;

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';

x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/LastTickValue.js → 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 (
     <g transform={`translate(${x}, ${marginTop})`}>
       <text textAnchor="middle" dy="0" transform="translate(0, -8)">

x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/__test__/Timeline.test.js → 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(() => {

x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js → 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 }) {
     </Sticky>
   );
 }
-
-TimelineAxis.propTypes = {
-  header: PropTypes.node,
-  plotValues: PropTypes.object.isRequired,
-  marks: PropTypes.array
-};
-
-TimelineAxis.defaultProps = {
-  marks: []
-};
-
-export default TimelineAxis;

x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js → 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<VerticalLinesProps> {
   render() {
-    const { topTraceDuration, marks } = this.props;
+    const { topTraceDuration, marks = [] } = this.props;
     const {
       width,
       height,
@@ -52,22 +59,11 @@ class VerticalLines extends PureComponent {
           {topTraceDuration > 0 && (
             <VerticalGridLines
               tickValues={[topTraceDuration]}
-              style={{ stroke: theme.gray3euiColorMediumShade }}
+              style={{ stroke: theme.euiColorMediumShade }}
             />
           )}
         </XYPlot>
       </div>
     );
   }
 }
-
-VerticalLines.propTypes = {
-  plotValues: PropTypes.object.isRequired,
-  marks: PropTypes.array
-};
-
-VerticalLines.defaultProps = {
-  marks: []
-};
-
-export default VerticalLines;

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<TimelineProps> {
+  // 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 (
+      <div>
+        <TimelineAxis
+          plotValues={plotValues}
+          marks={marks}
+          topTraceDuration={duration}
+        />
+        <VerticalLines
+          plotValues={plotValues}
+          marks={marks}
+          topTraceDuration={duration}
+        />
+      </div>
+    );
+  }
+}
+
+export const Timeline = makeWidthFlexible(TL);

x-pack/legacy/plugins/apm/public/components/shared/charts/Timeline/plotUtils.js → 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<typeof getPlotValues>;
+
+export function getPlotValues({
+  width,
+  duration,
+  height,
+  margins
+}: {
+  width: number;
+  duration: number;
+  height: number;
+  margins: Margins;
+}) {
   const xMin = 0;
   const xMax = duration;
   const xScale = scaleLinear()