PR comment - Flow typing for props

https://github.com/uber/jaeger-ui/pull/64#discussion_r134792924

Author: tiffon

src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.js

@@ -1,3 +1,4 @@
+// @flow
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,22 +20,17 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import KeyValuesTable from './KeyValuesTable';
 import toggleEnhancer from './toggle-enhancer';
 
 import './AccordianKeyValues.css';
 
-const dataPropType = PropTypes.arrayOf(
-  PropTypes.shape({
-    key: PropTypes.string,
-    type: PropTypes.string,
-    value: PropTypes.value,
-  })
-);
+type KeyValuesSummaryProps = {
+  data: { key: string, value: any }[],
+};
 
-function KeyValuesSummary(props) {
+function KeyValuesSummary(props: KeyValuesSummaryProps) {
   const { data } = props;
   return (
     <ul className="AccordianKeyValues--summary">
@@ -53,15 +49,16 @@ function KeyValuesSummary(props) {
   );
 }
 
-KeyValuesSummary.propTypes = {
-  data: dataPropType,
-};
-
-KeyValuesSummary.defaultProps = {
-  data: [],
+type AccordianKeyValuesProps = {
+  compact?: boolean,
+  data: { key: string, value: any }[],
+  highContrast?: boolean,
+  isOpen: boolean,
+  label: string,
+  onToggle: () => void,
 };
 
-function AccordianKeyValues(props) {
+function AccordianKeyValues(props: AccordianKeyValuesProps) {
   const { compact, data, highContrast, isOpen, label, onToggle } = props;
   return (
     <div className={`AccordianKeyValues ${compact ? 'is-compact' : ''}`}>
@@ -83,20 +80,9 @@ function AccordianKeyValues(props) {
   );
 }
 
-AccordianKeyValues.propTypes = {
-  compact: PropTypes.bool,
-  data: dataPropType,
-  highContrast: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  label: PropTypes.string,
-  onToggle: PropTypes.func.isRequired,
-};
-
 AccordianKeyValues.defaultProps = {
   compact: false,
-  data: [],
   highContrast: false,
-  label: null,
 };
 
 export default toggleEnhancer(AccordianKeyValues);

src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.js

@@ -1,3 +1,4 @@
+// @flow
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -20,15 +21,26 @@
 
 import React from 'react';
 import _sortBy from 'lodash/sortBy';
-import PropTypes from 'prop-types';
 
 import AccordianKeyValues from './AccordianKeyValues';
 import toggleEnhancer from './toggle-enhancer';
 import { formatDuration } from '../utils';
 
 import './AccordianLogs.css';
 
-function AccordianLogs(props) {
+type LogMessage = {
+  timestamp: number,
+  fields: { key: string, value: any }[],
+};
+
+type AccordianLogsProps = {
+  isOpen: boolean,
+  logs: LogMessage[],
+  onToggle: () => void,
+  timestamp: number,
+};
+
+function AccordianLogs(props: AccordianLogsProps) {
   const { logs, timestamp, isOpen, onToggle } = props;
   return (
     <div className="ui segment">
@@ -61,16 +73,4 @@ function AccordianLogs(props) {
   );
 }
 
-AccordianLogs.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  logs: PropTypes.arrayOf(
-    PropTypes.shape({
-      timestamp: PropTypes.number,
-      fields: PropTypes.array,
-    })
-  ).isRequired,
-  timestamp: PropTypes.number.isRequired,
-};
-
 export default toggleEnhancer(AccordianLogs);

src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.js

@@ -1,3 +1,4 @@
+// @flow
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -20,7 +21,6 @@
 
 import React from 'react';
 import jsonMarkup from 'json-markup';
-import PropTypes from 'prop-types';
 
 import './KeyValuesTable.css';
 
@@ -32,7 +32,11 @@ function parseOrPass(value) {
   }
 }
 
-export default function KeyValuesTable(props) {
+type KeyValuesTableProps = {
+  data: { key: string, value: any }[],
+};
+
+export default function KeyValuesTable(props: KeyValuesTableProps) {
   const { data } = props;
   return (
     <div className="KeyValueTable">
@@ -55,12 +59,3 @@ export default function KeyValuesTable(props) {
     </div>
   );
 }
-
-KeyValuesTable.propTypes = {
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      value: PropTypes.any,
-    })
-  ).isRequired,
-};

src/components/TracePage/TraceTimelineViewer/SpanDetail/index.js

@@ -19,15 +19,20 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import AccordianKeyValues from './AccordianKeyValues';
 import AccordianLogs from './AccordianLogs';
 import { formatDuration } from '../utils';
+import type { XformedSpan, XformedTrace } from '../transforms';
 
 import './index.css';
 
-export default function SpanDetail(props) {
+type SpanDetailProps = {
+  span: XformedSpan,
+  trace: XformedTrace,
+};
+
+export default function SpanDetail(props: SpanDetailProps) {
   const { span, trace } = props;
   return (
     <div>
@@ -74,7 +79,3 @@ export default function SpanDetail(props) {
     </div>
   );
 }
-SpanDetail.propTypes = {
-  span: PropTypes.object,
-  trace: PropTypes.object,
-};

src/components/TracePage/TraceTimelineViewer/transforms.js

@@ -1,3 +1,4 @@
+// @flow
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -25,23 +26,50 @@ import {
   getTraceSpansAsMap,
   getTraceTimestamp,
 } from '../../../selectors/trace';
+import type { Process, Span } from '../../../types';
 
-const cache = new Map();
+type SpanWithProcess = Span & { process: Process };
 
-export function transformTrace(trace) {
-  if (cache.has(trace.traceID)) {
-    return cache.get(trace.traceID);
+export type XformedSpan = SpanWithProcess & {
+  depth: number,
+  hasChildren: boolean,
+  relativeStartTime: number,
+};
+
+type TracePartial = {
+  processes: { [string]: Process },
+  traceID: string,
+};
+
+export type XformedTrace = TracePartial & {
+  duration: number,
+  endTime: number,
+  spans: XformedSpan[],
+  startTime: number,
+};
+
+const cache: Map<string, ?XformedTrace> = new Map();
+
+// eslint-disable-next-line import/prefer-default-export
+export function transformTrace(trace: TracePartial & { spans: SpanWithProcess[] }): XformedTrace {
+  const cached = cache.get(trace.traceID);
+  if (cached) {
+    return cached;
   }
   const traceStartTime = getTraceTimestamp(trace);
   const traceEndTime = getTraceEndTimestamp(trace);
-  const spanMap = getTraceSpansAsMap(trace);
+  const spanMap: Map<string, ?SpanWithProcess> = getTraceSpansAsMap(trace);
   const tree = getTraceSpanIdsAsTree(trace);
-  const spans = [];
+  const spans: XformedSpan[] = [];
+
   tree.walk((spanID, node, depth) => {
     if (spanID === '__root__') {
       return;
     }
-    const span = spanMap.get(spanID);
+    const span: ?SpanWithProcess = spanMap.get(spanID);
+    if (!span) {
+      return;
+    }
     spans.push({
       ...span,
       relativeStartTime: span.startTime - traceStartTime,
@@ -50,8 +78,12 @@ export function transformTrace(trace) {
     });
   });
   const transform = {
-    ...trace,
     spans,
+    // can't use spread operator for intersection types
+    // repl: https://goo.gl/4Z23MJ
+    // issue: https://github.com/facebook/flow/issues/1511
+    processes: trace.processes,
+    traceID: trace.traceID,
     duration: getTraceDuration(trace),
     startTime: traceStartTime,
     endTime: traceEndTime,