Convert SearchResults and index components to TS

As with jaegertracing#1218, convert
SearchResults and the root index component to use TS and the .tsx file
extension rather than plain .js. TS was chosen here since SearchResults
was already using Flow types, and index is trivially convertible.

Adding `@types/react-form` as a new dev dependency to provide typings
for `redux-form` in `SearchResults` in turn revealed type errors in the
usage of `redux-form` in the `ServicesView` component, so update that
component accordingly. Likewise, the conversion from Flow to TS revealed
some typing errors in child components.

Also update the list of JS files to be included in the TS linting
process - since we now have two new TS files to be built and linted, the
JS files that these import in turn need to be explicitly listed in
tsconfig.lint.json, otherwise `tsc` complains that they are not included
in the build.

Signed-off-by: Máté Szabó <mszabo@fandom.com>

packages/jaeger-ui/package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@types/match-sorter": "^2.3.0",
     "@types/react-window": "^1.8.0",
+    "@types/redux-form": "^8.3.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-plugin-import": "1.13.5",
     "bluebird": "^3.5.0",

packages/jaeger-ui/src/components/DeepDependencies/traces.tsx

@@ -13,12 +13,13 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { History as RouterHistory, Location } from 'history';
 import _get from 'lodash/get';
 import memoizeOne from 'memoize-one';
 import queryString from 'query-string';
 import { connect } from 'react-redux';
 
-import { DeepDependencyGraphPageImpl, TOwnProps, TProps, TReduxProps } from '.';
+import { DeepDependencyGraphPageImpl, TReduxProps } from '.';
 import { getUrlState, sanitizeUrlState } from './url';
 import { ROUTE_PATH } from '../SearchTracePage/url';
 import GraphModel, { makeGraph } from '../../model/ddg/GraphModel';
@@ -59,8 +60,13 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
   };
 }
 
+type TOwnProps = {
+  history: RouterHistory;
+  location: Location;
+};
+
 // export for tests
-export class TracesDdgImpl extends React.PureComponent<TProps & { showSvcOpsHeader: never; baseUrl: never }> {
+export class TracesDdgImpl extends React.PureComponent<TOwnProps & TReduxProps> {
   render(): React.ReactNode {
     const { location } = this.props;
     const urlArgs = queryString.parse(location.search);

packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx

@@ -18,8 +18,7 @@ import { ActionFunction, Action } from 'redux-actions';
 import _debounce from 'lodash/debounce';
 import _isEqual from 'lodash/isEqual';
 import _isEmpty from 'lodash/isEmpty';
-// @ts-ignore
-import { Field, formValueSelector, reduxForm } from 'redux-form';
+import { Field, formValueSelector, InjectedFormProps, reduxForm } from 'redux-form';
 // @ts-ignore
 import store from 'store';
 import { connect } from 'react-redux';
@@ -137,8 +136,10 @@ const convertServiceErrorRateToPercentages = (serviceErrorRate: null | ServiceMe
   return { ...serviceErrorRate, metricPoints: convertedMetricsPoints };
 };
 
+type TPropsWithInjectedFormProps = TProps & InjectedFormProps<{}, TProps>;
+
 // export for tests
-export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
+export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithInjectedFormProps, StateType> {
   docsLink: string;
   graphDivWrapper: React.RefObject<HTMLInputElement>;
   serviceSelectorValue: string = '';
@@ -150,7 +151,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
     graphXDomain: [],
   };
 
-  constructor(props: TProps) {
+  constructor(props: TPropsWithInjectedFormProps) {
     super(props);
     this.graphDivWrapper = React.createRef();
     this.docsLink = getConfigValue('monitor.docsLink');
@@ -271,7 +272,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
             <Col span={6}>
               <h2 className="service-selector-header">Choose service</h2>
               <Field
-                onChange={(e: Event, newValue: string) => trackSelectService(newValue)}
+                onChange={(e, newValue: string) => trackSelectService(newValue)}
                 name="service"
                 component={AdaptedVirtualSelect}
                 placeholder="Select A Service"
@@ -310,7 +311,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
                 name="timeframe"
                 component={AdaptedVirtualSelect}
                 placeholder="Select A Timeframe"
-                onChange={(e: Event, value: number) => {
+                onChange={(e, value: number) => {
                   const { label } = timeFrameOptions.find(option => option.value === value)!;
                   trackSelectTimeframe(label);
                 }}
@@ -455,7 +456,7 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(
-  reduxForm({
+  reduxForm<{}, TProps>({
     form: 'serviceForm',
   })(MonitorATMServicesViewImpl)
 );

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx

@@ -14,6 +14,7 @@
 
 import * as React from 'react';
 import { Col, Divider, Row, Tag } from 'antd';
+import { LocationDescriptor } from 'history';
 import { Link } from 'react-router-dom';
 
 import { sortBy } from 'lodash';
@@ -34,7 +35,7 @@ import './ResultItem.css';
 type Props = {
   durationPercent: number;
   isInDiffCohort: boolean;
-  linkTo: string;
+  linkTo: LocationDescriptor;
   toggleComparison: (traceID: string) => void;
   trace: Trace;
   disableComparision: boolean;

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.tsx

@@ -14,6 +14,7 @@
 
 import * as React from 'react';
 import { Checkbox } from 'antd';
+import { LocationDescriptor } from 'history';
 import { Link } from 'react-router-dom';
 
 import TraceName from '../../common/TraceName';
@@ -30,7 +31,7 @@ type Props = {
   durationPercent?: number;
   error?: ApiError;
   isInDiffCohort: boolean;
-  linkTo: string | TNil;
+  linkTo: LocationDescriptor | TNil;
   state?: FetchedState | TNil;
   targetBlank?: boolean;
   toggleComparison: (traceID: string, isInDiffCohort: boolean) => void;
@@ -72,7 +73,9 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
     } = this.props;
     // Use a div when the ResultItemTitle doesn't link to anything
     let WrapperComponent: string | typeof Link = 'div';
-    const wrapperProps: Record<string, string> = { className: 'ResultItemTitle--item ub-flex-auto' };
+    const wrapperProps: Record<string, string | LocationDescriptor> = {
+      className: 'ResultItemTitle--item ub-flex-auto',
+    };
     if (linkTo) {
       wrapperProps.to = linkTo;
       WrapperComponent = Link;

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.js → packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx

@@ -17,14 +17,14 @@
 import * as React from 'react';
 import { Select } from 'antd';
 import { History as RouterHistory, Location } from 'history';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
 import { Field, formValueSelector, reduxForm } from 'redux-form';
 import queryString from 'query-string';
 
 import AltViewOptions from './AltViewOptions';
 import DiffSelection from './DiffSelection';
 import * as markers from './index.markers';
-import { trackAltView } from './index.track';
+import { EAltViewActions, trackAltView } from './index.track';
 import ResultItem from './ResultItem';
 import ScatterPlot from './ScatterPlot';
 import { getUrl } from '../url';
@@ -37,28 +37,28 @@ import { getPercentageOfDuration } from '../../../utils/date';
 import { stripEmbeddedState } from '../../../utils/embedded-url';
 import reduxFormFieldAdapter from '../../../utils/redux-form-field-adapter';
 
-import type { FetchedTrace } from '../../../types';
-import type { SearchQuery } from '../../../types/search';
-import type { KeyValuePair } from '../../../types/trace';
+import { FetchedTrace } from '../../../types';
+import { SearchQuery } from '../../../types/search';
+import { KeyValuePair, Trace } from '../../../types/trace';
 
 import './index.css';
 
 type SearchResultsProps = {
-  cohortAddTrace: string => void,
-  cohortRemoveTrace: string => void,
-  diffCohort: FetchedTrace[],
-  disableComparisons: boolean,
-  goToTrace: string => void,
-  hideGraph: boolean,
-  history: RouterHistory,
-  loading: boolean,
-  location: Location,
-  maxTraceDuration: number,
-  queryOfResults?: SearchQuery,
-  showStandaloneLink: boolean,
-  skipMessage?: boolean,
-  spanLinks?: Record<string, string> | undefined | null,
-  traces: TraceSummary[],
+  cohortAddTrace: (traceId: string) => void;
+  cohortRemoveTrace: (traceId: string) => void;
+  diffCohort: FetchedTrace[];
+  disableComparisons: boolean;
+  goToTrace: (traceId: string) => void;
+  hideGraph: boolean;
+  history: RouterHistory;
+  loading: boolean;
+  location: Location;
+  maxTraceDuration: number;
+  queryOfResults?: SearchQuery;
+  showStandaloneLink: boolean;
+  skipMessage?: boolean;
+  spanLinks?: Record<string, string> | undefined;
+  traces: Trace[];
 };
 
 const Option = Select.Option;
@@ -90,12 +90,10 @@ const SelectSort = reduxForm({
 
 export const sortFormSelector = formValueSelector('traceResultsSort');
 
-export class UnconnectedSearchResults extends React.PureComponent<SearchResultsProps> {
-  props: SearchResultsProps;
-
+export class UnconnectedSearchResults extends React.PureComponent<SearchResultsProps & RouteComponentProps> {
   static defaultProps = { skipMessage: false, spanLinks: undefined, queryOfResults: undefined };
 
-  toggleComparison = (traceID: string, remove: boolean) => {
+  toggleComparison = (traceID: string, remove?: boolean) => {
     const { cohortAddTrace, cohortRemoveTrace } = this.props;
     if (remove) {
       cohortRemoveTrace(traceID);
@@ -107,7 +105,7 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
   onDdgViewClicked = () => {
     const { location, history } = this.props;
     const urlState = queryString.parse(location.search);
-    const view = urlState.view && urlState.view === 'ddg' ? 'traces' : 'ddg';
+    const view = urlState.view && urlState.view === 'ddg' ? EAltViewActions.Traces : EAltViewActions.Ddg;
     trackAltView(view);
     history.push(getUrl({ ...urlState, view }));
   };
@@ -172,7 +170,7 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
                   name: t.traceName,
                   color: t.spans.some(sp => sp.tags.some(isErrorTag)) ? 'red' : '#12939A',
                 }))}
-                onValueClick={t => {
+                onValueClick={(t: Trace) => {
                   goToTrace(t.traceID);
                 }}
               />

packages/jaeger-ui/src/components/SearchTracePage/index.js

@@ -108,7 +108,7 @@ export class SearchTracePageImpl extends Component {
                 </TabPane>
                 <TabPane tab="JSON File" key="fileLoader">
                   <FileLoader
-                    loadJsonTraces={(fileList: FileList) => {
+                    loadJsonTraces={fileList => {
                       loadJsonTraces(fileList);
                     }}
                   />

packages/jaeger-ui/src/index.js → packages/jaeger-ui/src/index.tsx

@@ -20,7 +20,6 @@ import './site-prefix';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
-import { document } from 'global';
 
 import JaegerUIApp from './components/App';
 import { context as trackingContext } from './utils/tracking';
@@ -36,9 +35,9 @@ import 'u-basscss/css/typography.css';
 
 const UI_ROOT_ID = 'jaeger-ui-root';
 
-const root = createRoot(document.getElementById(UI_ROOT_ID));
+const root = createRoot(document.getElementById(UI_ROOT_ID)!);
 
-if (trackingContext) {
+if (typeof trackingContext === 'object' && trackingContext !== null) {
   trackingContext.context(() => {
     root.render(
       <BrowserRouter>

packages/jaeger-ui/src/types/search.tsx

@@ -25,30 +25,3 @@ export type SearchQuery = {
   start: number | string;
   tags: string | TNil;
 };
-
-/**
- * Type used to summarize traces for the search page.
- */
-export type TraceSummary = {
-  /**
-   * Duration of trace in milliseconds.
-   */
-  duration: number;
-  /**
-   * Start time of trace in milliseconds.
-   */
-  timestamp: number;
-  traceName: string;
-  traceID: string;
-  numberOfErredSpans: number;
-  numberOfSpans: number;
-  services: { name: string; numberOfSpans: number }[];
-};
-
-export type TraceSummaries = {
-  /**
-   * Duration of longest trace in `traces` in milliseconds.
-   */
-  maxDuration: number;
-  traces: TraceSummary[];
-};

packages/jaeger-ui/tsconfig.lint.json

@@ -28,11 +28,29 @@
   "files": [
     "src/actions/jaeger-api.js",
     "src/api/jaeger.js",
+    "src/components/App/index.js",
+    "src/components/DependencyGraph/DAG.js",
+    "src/components/DependencyGraph/DependencyForceGraph.js",
+    "src/components/DependencyGraph/index.js",
+    "src/components/SearchTracePage/index.js",
+    "src/components/SearchTracePage/SearchForm.js",
+    "src/components/SearchTracePage/SearchForm.markers.js",
+    "src/components/SearchTracePage/SearchResults/ScatterPlot.js",
+    "src/components/SearchTracePage/SearchResults/index.markers.js",
     "src/components/SearchTracePage/SearchResults/ResultItem.markers.js",
+    "src/middlewares/index.js",
     "src/model/order-by.js",
+    "src/propTypes/dependencies.js",
+    "src/reducers/config.js",
+    "src/reducers/dependencies.js",
+    "src/reducers/index.js",
+    "src/reducers/services.js",
+    "src/reducers/trace.js",
+    "src/selectors/dependencies.js",
     "src/selectors/process.js",
     "src/selectors/span.js",
     "src/selectors/trace.js",
+    "src/utils/configure-store.js",
     "src/utils/sort.js",
     "src/utils/TreeNode.js"
   ]

yarn.lock

@@ -2718,6 +2718,14 @@
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.2.1.tgz#c1f4a7283ecd3cd696291550361e441bf9389370"
 
+"@types/redux-form@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/@types/redux-form/-/redux-form-8.3.5.tgz#7c55f4182952a41eca67e9d26e2a41ad425859a5"
+  integrity sha512-SchB4i7nxgWNbJS4cXEZducztkvHzVrb5xlAXwfLpbrLPo6tMY06+kx1GqMv42+YnGy9TpCAkF51a21HatqWBA==
+  dependencies:
+    "@types/react" "*"
+    redux "^3.6.0 || ^4.0.0"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -15311,6 +15319,13 @@ redux@^3.0.2, redux@^3.6.0, redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
+"redux@^3.6.0 || ^4.0.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"