Flow for remaining TraceTimelineViewer components

src/components/TracePage/TraceTimelineViewer/SpanBar.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,17 +20,32 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
 
 import './SpanBar.css';
 
-function toPercent(value) {
+type SpanBarProps = {
+  color: string,
+  hintSide: string,
+  label: string,
+  onClick: (SyntheticMouseEvent<any>) => void,
+  viewEnd: number,
+  viewStart: number,
+  rpc: {
+    viewStart: number,
+    viewEnd: number,
+    color: string,
+  },
+  setLongLabel: () => void,
+  setShortLabel: () => void,
+};
+
+function toPercent(value: number) {
   return `${value * 100}%`;
 }
 
-function SpanBar(props) {
+function SpanBar(props: SpanBarProps) {
   const { viewEnd, viewStart, color, label, hintSide, onClick, setLongLabel, setShortLabel, rpc } = props;
 
   return (
@@ -59,29 +76,6 @@ function SpanBar(props) {
   );
 }
 
-SpanBar.propTypes = {
-  color: PropTypes.string.isRequired,
-  hintSide: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  viewEnd: PropTypes.number.isRequired,
-  viewStart: PropTypes.number.isRequired,
-  rpc: PropTypes.shape({
-    viewStart: PropTypes.number,
-    viewEnd: PropTypes.number,
-    color: PropTypes.string,
-  }),
-  setLongLabel: PropTypes.func,
-  setShortLabel: PropTypes.func,
-};
-
-SpanBar.defaultProps = {
-  rpc: null,
-  onClick: null,
-  onMouseOver: null,
-  onMouseOut: null,
-};
-
 export default compose(
   withState('label', 'setLabel', props => props.shortLabel),
   withProps(({ setLabel, shortLabel, longLabel }) => ({

src/components/TracePage/TraceTimelineViewer/SpanBarRow.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,7 +21,6 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import TimelineRow from './TimelineRow';
 import SpanTreeOffset from './SpanTreeOffset';
@@ -28,7 +29,34 @@ import Ticks from './Ticks';
 
 import './SpanBarRow.css';
 
-export default function SpanBarRow(props) {
+type SpanBarRowProps = {
+  className: string,
+  color: string,
+  columnDivision: number,
+  depth: number,
+  isChildrenExpanded: boolean,
+  isDetailExapnded: boolean,
+  isFilteredOut: boolean,
+  isParent: boolean,
+  label: string,
+  onDetailToggled: () => void,
+  onChildrenToggled: () => void,
+  operationName: string,
+  numTicks: number,
+  rpc: ?{
+    viewStart: number,
+    viewEnd: number,
+    color: string,
+    operationName: string,
+    serviceName: string,
+  },
+  serviceName: string,
+  showErrorIcon: boolean,
+  viewEnd: number,
+  viewStart: number,
+};
+
+export default function SpanBarRow(props: SpanBarRowProps) {
   const {
     className,
     color,
@@ -124,33 +152,6 @@ export default function SpanBarRow(props) {
   );
 }
 
-SpanBarRow.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.string.isRequired,
-  columnDivision: PropTypes.number.isRequired,
-  depth: PropTypes.number.isRequired,
-  isChildrenExpanded: PropTypes.bool.isRequired,
-  isDetailExapnded: PropTypes.bool.isRequired,
-  isFilteredOut: PropTypes.bool.isRequired,
-  isParent: PropTypes.bool.isRequired,
-  label: PropTypes.string.isRequired,
-  onDetailToggled: PropTypes.func.isRequired,
-  onChildrenToggled: PropTypes.func.isRequired,
-  operationName: PropTypes.string.isRequired,
-  numTicks: PropTypes.number.isRequired,
-  rpc: PropTypes.shape({
-    viewStart: PropTypes.number,
-    viewEnd: PropTypes.number,
-    color: PropTypes.string,
-    operationName: PropTypes.string,
-    serviceName: PropTypes.string,
-  }),
-  serviceName: PropTypes.string.isRequired,
-  showErrorIcon: PropTypes.bool.isRequired,
-  viewEnd: PropTypes.number.isRequired,
-  viewStart: PropTypes.number.isRequired,
-};
-
 SpanBarRow.defaultProps = {
   className: '',
   rpc: null,

src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,12 +20,19 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import './SpanTreeOffset.css';
 
-export default function SpanTreeOffset({ level, hasChildren, childrenVisible, onClick }) {
+type SpanTreeOffsetProps = {
+  level: number,
+  hasChildren: boolean,
+  childrenVisible: boolean,
+  onClick: ?() => void,
+};
+
+export default function SpanTreeOffset(props: SpanTreeOffsetProps) {
+  const { level, hasChildren, childrenVisible, onClick } = props;
   const className = hasChildren ? 'span-kids-toggle' : '';
   const icon = hasChildren
     ? <i className={`span-tree-toggle-icon icon square ${childrenVisible ? 'outline minus' : 'plus'}`} />
@@ -36,13 +45,6 @@ export default function SpanTreeOffset({ level, hasChildren, childrenVisible, on
   );
 }
 
-SpanTreeOffset.propTypes = {
-  level: PropTypes.number.isRequired,
-  hasChildren: PropTypes.bool,
-  childrenVisible: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
 SpanTreeOffset.defaultProps = {
   hasChildren: false,
   childrenVisible: false,

src/components/TracePage/TraceTimelineViewer/Ticks.js

@@ -27,10 +27,10 @@ import { formatDuration } from './utils';
 import './Ticks.css';
 
 type TicksProps = {
-  endTime: number,
+  endTime?: number,
   numTicks: number,
   showLabels?: boolean,
-  startTime: number,
+  startTime?: ?number,
 };
 
 export default function Ticks(props: TicksProps) {
@@ -39,7 +39,7 @@ export default function Ticks(props: TicksProps) {
   let labels: string[];
   if (showLabels) {
     labels = [];
-    const viewingDuration = endTime - startTime;
+    const viewingDuration = (endTime || 0) - (startTime || 0);
     for (let i = 0; i < numTicks; i++) {
       const durationAtTick = startTime + i / (numTicks - 1) * viewingDuration;
       labels.push(formatDuration(durationAtTick));

src/components/TracePage/TraceTimelineViewer/TimelineRow.js

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -18,34 +20,36 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 
 import './TimelineRow.css';
 
-const propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object,
+type TimelineRowProps = {
+  children?: React.Node,
+  className: string,
 };
 
-const defaultProps = {
-  children: null,
-  className: '',
+type TimelineRowCellProps = {
+  children?: React.Node,
+  className: string,
+  width: number,
+  style?: Object,
 };
 
-export default function TimelineRow(props) {
+export default function TimelineRow(props: TimelineRowProps) {
   const { children, className, ...rest } = props;
   return (
     <div className={`flex-row ${className}`} {...rest}>
       {children}
     </div>
   );
 }
-TimelineRow.propTypes = { ...propTypes };
-TimelineRow.defaultProps = { ...defaultProps };
 
-function TimelineRowCell(props) {
+TimelineRow.defaultProps = {
+  className: '',
+};
+
+function TimelineRowCell(props: TimelineRowCellProps) {
   const { children, className, width, style, ...rest } = props;
   const widthPercent = `${width * 100}%`;
   const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent };
@@ -55,7 +59,7 @@ function TimelineRowCell(props) {
     </div>
   );
 }
-TimelineRowCell.propTypes = { ...propTypes, width: PropTypes.number.isRequired };
-TimelineRowCell.defaultProps = { ...defaultProps };
+
+TimelineRowCell.defaultProps = { className: '' };
 
 TimelineRow.Cell = TimelineRowCell;