23.69% - Convert SearchResults, some search utils, and TopNav

Signed-off-by: Everett Ross <reverett@uber.com>
renovate-bot · Mar 18, 2019 · f9b2461 · f9b2461
1 parent c0f81a6
commit f9b2461
Show file tree

Hide file tree

Showing 12 changed files with 457 additions and 74 deletions.
diff --git a/...es/jaeger-ui/src/components/App/TopNav.js → ...s/jaeger-ui/src/components/App/TopNav.tsx b/...es/jaeger-ui/src/components/App/TopNav.js → ...s/jaeger-ui/src/components/App/TopNav.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,6 +14,7 @@
 
 import React from 'react';
 import { Dropdown, Icon, Menu } from 'antd';
+import _has from 'lodash/has';
 import { connect } from 'react-redux';
 import { Link, withRouter } from 'react-router-dom';
 
@@ -26,8 +25,8 @@ import * as diffUrl from '../TraceDiff/url';
 import { getConfigValue } from '../../utils/config/get-config';
 import prefixUrl from '../../utils/prefix-url';
 
-import type { ReduxState } from '../../types';
-import type { ConfigMenuItem, ConfigMenuGroup } from '../../types/config';
+import { ReduxState } from '../../types';
+import { ConfigMenuItem, ConfigMenuGroup } from '../../types/config';
 
 type Props = ReduxState;
 
@@ -74,6 +73,10 @@ function CustomNavDropdown({ label, items }: ConfigMenuGroup) {
   );
 }
 
+function isItem(itemOrGroup: ConfigMenuItem | ConfigMenuGroup): itemOrGroup is ConfigMenuItem {
+  return !_has(itemOrGroup, 'items');
+}
+
 export function TopNavImpl(props: Props) {
   const { config, router } = props;
   const { pathname } = router.location;
@@ -82,13 +85,12 @@ export function TopNavImpl(props: Props) {
     <div>
       <Menu theme="dark" mode="horizontal" selectable={false} className="ub-right" selectedKeys={[pathname]}>
         {menuItems.map(m => {
-          if (!m.items) {
+          if (isItem(m)) {
             return getItemLink(m);
           }
-          const group = ((m: any): ConfigMenuGroup);
           return (
-            <Menu.Item key={group.label}>
-              <CustomNavDropdown key={group.label} {...group} />
+            <Menu.Item key={m.label}>
+              <CustomNavDropdown key={m.label} {...m} />
             </Menu.Item>
           );
         })}
@@ -114,10 +116,6 @@ export function TopNavImpl(props: Props) {
   );
 }
 
-TopNavImpl.defaultProps = {
-  menuConfig: [],
-};
-
 TopNavImpl.CustomNavDropdown = CustomNavDropdown;
 
 function mapStateToProps(state: Props) {

diff --git a/.../components/SearchTracePage/FileLoader.js → ...components/SearchTracePage/FileLoader.tsx b/.../components/SearchTracePage/FileLoader.js → ...components/SearchTracePage/FileLoader.tsx
@@ -20,7 +20,7 @@ import { Upload, Icon } from 'antd';
 const Dragger = Upload.Dragger;
 
 type FileLoaderProps = {
-  loadJsonTraces: (fileList: FileList) => void,
+  loadJsonTraces: (fileList: FileList) => void;
 };
 
 export default function FileLoader(props: FileLoaderProps) {

diff --git a/...hTracePage/SearchResults/DiffSelection.js → ...TracePage/SearchResults/DiffSelection.tsx b/...hTracePage/SearchResults/DiffSelection.js → ...TracePage/SearchResults/DiffSelection.tsx
@@ -23,27 +23,26 @@ import { getUrl } from '../../TraceDiff/url';
 import { getUrl as getTracePageUrl } from '../../TracePage/url';
 import { fetchedState } from '../../../constants';
 
-import type { FetchedTrace } from '../../../types';
+import { FetchedTrace } from '../../../types';
 
 import './DiffSelection.css';
 
 type Props = {
-  toggleComparison: (string, boolean) => void,
-  traces: FetchedTrace[],
+  toggleComparison: (traceID: string, isInDiffCohort: boolean) => void;
+  traces: FetchedTrace[];
 };
 
 // Exported for tests
 export const CTA_MESSAGE = <h2 className="ub-m0">Compare traces by selecting result items</h2>;
 
 export default class DiffSelection extends React.PureComponent<Props> {
-  props: Props;
-
   render() {
     const { toggleComparison, traces } = this.props;
     const cohort = traces.filter(ft => ft.state !== fetchedState.ERROR).map(ft => ft.id);
-    const compareHref = cohort.length > 1 ? getUrl({ cohort }) : null;
+    // TODO
+    const compareHref = cohort.length > 1 ? getUrl({ a: undefined, b: undefined, cohort }) : null;
     const compareBtn = (
-      <Button className="ub-right" disabled={cohort.length < 2} type="primary">
+      <Button className="ub-right" disabled={cohort.length < 2} htmlType="button" type="primary">
         Compare Traces
       </Button>
     );
@@ -52,19 +51,19 @@ export default class DiffSelection extends React.PureComponent<Props> {
         {traces.length > 0 && (
           <div className="DiffSelection--selectedItems">
             {traces.map(fetchedTrace => {
-              const { data = {}, error, id, state } = fetchedTrace;
+              const { data, error, id, state } = fetchedTrace;
               return (
                 <ResultItemTitle
                   key={id}
-                  duration={data.duration}
+                  duration={data && data.duration}
                   error={error}
                   isInDiffCohort
                   linkTo={getTracePageUrl(id)}
                   state={state}
                   targetBlank
                   toggleComparison={toggleComparison}
                   traceID={id}
-                  traceName={data.traceName}
+                  traceName={data && data.traceName}
                 />
               );
             })}

diff --git a/...archTracePage/SearchResults/ResultItem.js → ...rchTracePage/SearchResults/ResultItem.tsx b/...archTracePage/SearchResults/ResultItem.js → ...rchTracePage/SearchResults/ResultItem.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,24 +24,22 @@ import ResultItemTitle from './ResultItemTitle';
 import colorGenerator from '../../../utils/color-generator';
 import { formatRelativeDate } from '../../../utils/date';
 
-import type { Trace } from '../../../types/trace';
+import { KeyValuePair, Trace } from '../../../types/trace';
 
 import './ResultItem.css';
 
 type Props = {
-  durationPercent: number,
-  isInDiffCohort: boolean,
-  linkTo: string,
-  toggleComparison: string => void,
-  trace: Trace,
-  disableComparision: boolean,
+  durationPercent: number;
+  isInDiffCohort: boolean;
+  linkTo: string;
+  toggleComparison: (traceID: string) => void;
+  trace: Trace;
+  disableComparision: boolean;
 };
 
-const isErrorTag = ({ key, value }) => key === 'error' && (value === true || value === 'true');
+const isErrorTag = ({ key, value }: KeyValuePair) => key === 'error' && (value === true || value === 'true');
 
 export default class ResultItem extends React.PureComponent<Props> {
-  props: Props;
-
   render() {
     const {
       disableComparision,

diff --git a/...racePage/SearchResults/ResultItemTitle.js → ...acePage/SearchResults/ResultItemTitle.tsx b/...racePage/SearchResults/ResultItemTitle.js → ...acePage/SearchResults/ResultItemTitle.tsx
@@ -1,5 +1,3 @@
-// @flow
-
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,31 +20,30 @@ import TraceName from '../../common/TraceName';
 import { fetchedState } from '../../../constants';
 import { formatDuration } from '../../../utils/date';
 
-import type { FetchedState } from '../../../types';
-import type { ApiError } from '../../../types/api-error';
+import { FetchedState } from '../../../types';
+import TNullable from '../../../types/nullable';
+import { ApiError } from '../../../types/api-error';
 
 import './ResultItemTitle.css';
 
 type Props = {
-  duration: number,
-  durationPercent?: number,
-  error?: ApiError,
-  isInDiffCohort: boolean,
-  linkTo: ?string,
-  state?: ?FetchedState,
-  targetBlank?: boolean,
-  toggleComparison: (string, boolean) => void,
-  traceID: string,
-  traceName: string,
-  disableComparision?: boolean,
+  duration?: number;
+  durationPercent?: number;
+  error?: ApiError;
+  isInDiffCohort: boolean;
+  linkTo: string | TNullable;
+  state?: FetchedState | TNullable;
+  targetBlank?: boolean;
+  toggleComparison: (traceID: string, isInDiffCohort: boolean) => void;
+  traceID: string;
+  traceName?: string;
+  disableComparision?: boolean;
 };
 
 const DEFAULT_DURATION_PERCENT = 0;
 
 export default class ResultItemTitle extends React.PureComponent<Props> {
-  props: Props;
-
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
     disableComparision: false,
     durationPercent: DEFAULT_DURATION_PERCENT,
     error: undefined,
@@ -73,11 +70,11 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
       traceName,
     } = this.props;
     // Use a div when the ResultItemTitle doesn't link to anything
-    let WrapperComponent = 'div';
-    const wrapperProps: { [string]: string } = { className: 'ResultItemTitle--item ub-flex-auto' };
+    let WrapperComponent: string | typeof Link = 'div';
+    const wrapperProps: Record<string, string> = { className: 'ResultItemTitle--item ub-flex-auto' };
     if (linkTo) {
-      WrapperComponent = Link;
       wrapperProps.to = linkTo;
+      WrapperComponent = Link;
       if (targetBlank) {
         wrapperProps.target = '_blank';
         wrapperProps.rel = 'noopener noreferrer';
@@ -94,7 +91,10 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
             onChange={this.toggleComparison}
           />
         )}
-        <WrapperComponent {...wrapperProps}>
+        {/* <WrapperComponent to={linkTo || ''} {...wrapperProps}> */}
+        {/* <WrapperComponent {...wrapperProps}> */}
+        {/* TODO: Everett figure out how to ensure type is correct */}
+        <WrapperComponent {...wrapperProps as { [key: string]: any; to: string }}>
           <span
             className="ResultItemTitle--durationBar"
             style={{ width: `${durationPercent || DEFAULT_DURATION_PERCENT}%` }}

diff --git a/packages/jaeger-ui/src/components/common/TraceName.tsx b/packages/jaeger-ui/src/components/common/TraceName.tsx
@@ -19,16 +19,16 @@ import LoadingIndicator from './LoadingIndicator';
 import { fetchedState, FALLBACK_TRACE_NAME } from '../../constants';
 
 import { FetchedState } from '../../types';
+import TNullable from '../../types/nullable';
 import { ApiError } from '../../types/api-error';
 
 import './TraceName.css';
 
 type Props = {
   className?: string;
-  // TODO nullable type
-  error?: ApiError | undefined | null;
-  state?: FetchedState | undefined | null;
-  traceName?: string | undefined | null;
+  error?: ApiError | TNullable;
+  state?: FetchedState | TNullable;
+  traceName?: string | TNullable;
 };
 
 export default function TraceName(props: Props) {