Shift plexus to TypeScript (from flowtypes)

.eslintrc.js

@@ -0,0 +1,80 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+module.exports = {
+  env: {
+    browser: true,
+    jest: true,
+    jasmine: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', 'json', '.ts', '.tsx'],
+      },
+    },
+  },
+  extends: ['react-app', 'airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
+  rules: {
+    /* general */
+    'arrow-parens': [1, 'as-needed'],
+    'comma-dangle': 0,
+    'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+    'no-continue': 0,
+    'no-plusplus': 0,
+    'no-self-compare': 0,
+    'no-underscore-dangle': 0,
+    'prefer-destructuring': 0,
+
+    /* jsx */
+    'jsx-a11y/anchor-is-valid': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/href-no-hash': 0,
+    'jsx-a11y/interactive-supports-focus': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/mouse-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 1,
+
+    /* react */
+    'react/destructuring-assignment': 0,
+    'react/jsx-curly-brace-presence': ['error', 'never'],
+    'react/jsx-filename-extension': 0,
+    'react/forbid-prop-types': 1,
+    'react/require-default-props': 1,
+    'react/no-array-index-key': 1,
+    'react/sort-comp': [
+      2,
+      {
+        order: [
+          'type-annotations',
+          'statics',
+          'state',
+          'propTypes',
+          'static-methods',
+          'constructor',
+          'lifecycle',
+          'everything-else',
+          '/^on.+$/',
+          'render',
+        ],
+      },
+    ],
+
+    /* import */
+    'import/prefer-default-export': 1,
+    'import/no-named-default': 0,
+    'import/extensions': 0,
+  },
+};

.flowconfig

@@ -4,6 +4,8 @@
 .*/node_modules/react-motion/.*
 .*/node_modules/draft-js/.*
 .*/node_modules/nwb/.*
+.*/packages/jaeger-ui/node_modules/.cache/.*
+.*/packages/plexus/src/.*
 
 [include]
 

BUILD.md

@@ -0,0 +1,111 @@
+# Build Considerations: Project Root
+
+`yarn` is used instead of `npm`.
+
+## `package.json`
+
+### Dependencies (dev and otherwise)
+
+#### `@typescript-eslint/eslint-plugin`
+
+ESLint is being used to lint the repo, as a whole. Within `./packages/plexus` (for now), [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin) is used to apply ESLint to TypeScript. This application is localized to plexus via configuring `./packages/plexus/.eslintrc.js` for TypeScript, which means the change in settings is only applied to subdirectories of `./packages/plexus`. This package works really well, but there are quite a few issues it doesn't catch. For that, we use the TypeScript compiler.
+
+#### `typescript`
+
+The TypeScript package (e.g. `typescript`) is **not for compiling** TypeScript source but is included for the purpose of bolstering the linting of TypeScript files. `tsc` catches quite a few issues that ESLint does not pick up on.
+
+### Workspaces
+
+[Create React App](https://facebook.github.io/create-react-app/) (CRA) is used as the build-tooling for the Jaeger UI website. In 2.1.2+ CRA introduced a guard for the `start`, `build` and `test` scripts which checks the version of NPM packages available to make sure they're consistent with CRA's expectations ([reference](https://github.com/facebook/create-react-app/blob/dea19fdb30c2e896ed8ac75b68a612b0b92b2406/packages/react-scripts/scripts/utils/verifyPackageTree.js#L23-L29)). This process checks `node_modules` in parent directories and errors if an unexpected package version is encountered.
+
+To avoid a world of pain, the [`nohoist`](https://yarnpkg.com/blog/2018/02/15/nohoist/#scope-private) feature of `yarn` workspaces is leveraged. CRA and it's dependencies are local to `./packages/jaeger-ui/node_modules` instead of `./node_modules`, i.e. they're not hoisted. This ensures CRA is using the packages it expects to use.
+
+Unfortunately, the CRA check is not savvy to `yarn` workspaces and errors even though the _`yarn` workspace-magic_ ensures the right packages are actually used by the CRA scripts. So, the escape hatch provided by CRA is used to skip the check: the envvar `SKIP_PREFLIGHT_CHECK=true`, set in `./packages/jaeger-ui/.env`.
+
+### Scripts
+
+#### `build`
+
+`lerna run build` executes the build in each of `./packages/*` sub-packages.
+
+#### `eslint`
+
+This applies ESLint to the repo, as a whole. The TypeScript linting has a distinct configuration, which is a descendent of `./.eslintrc.js`. See [TypeScript](#typescript), above.
+
+#### `lint`
+
+This is an amalgamation of linting scripts that run to make sure things are all-good. It's run in CI (travis) and as part of a pre-commit hook.
+
+* `prettier-lint`
+* `tsc-lint`
+* `eslint`
+* `flow`
+* `check-license`
+
+#### `prepare`
+
+Runs after the top-level `yarn install`. This ensures `./packages/plexus` builds and is available to `./packages/jaeger-ui`.
+
+#### `prettier-comment`, `prettier`, `prettier-lint`
+
+`prettier-comment` is just an explanation for why the `./node_module/.bin/bin-prettier.js` path is used instead of just `yarn prettier etc`; it's due to an [issue with `yarn`](https://github.com/yarnpkg/yarn/issues/6300).
+
+`prettier` formats the code.
+
+`prettier-lint` runs `bin-prettier` in the `--list-different` mode, which only outputs filenames if they would be changed by prettier formatting. If any such files are encountered, the program exits with a non-zero code. This is handy for blocking CI and pre-commits.
+
+#### `tsc-lint`, `tsc-lint-debug`
+
+`tsc` is run with the [`--noEmit`](https://www.typescriptlang.org/docs/handbook/compiler-options.html) option to bolster linting of TypeScript files. See [TypeScript](#typescript), above.
+
+`tsc-lint-debug` is for diagnosing problems with linking, resolving files, or aliases in TypeScript code. It lists the files involved in the compilation.
+
+### `husky` . `hooks` . `pre-commit`
+
+Runs the `lint` and `test` scripts.
+
+## `.eslintrc.js`
+
+Pretty basic. Needs to be cleaned up. The `airbnb` configuration needs to be updated.
+
+Note: This configuration is extended by `./packages/plexus/.eslintrc.js`.
+
+## `.flowconfig`
+
+Being phased out.
+
+## `.travis.yml`
+
+Currently `./packages/plexus` doesn't have any tests... But, when it does, `.travis.yml` needs to be updated to send coverage info for all `./packages/*` to codecov.io. ([Ticket](https://github.com/jaegertracing/jaeger-ui/issues/340))
+
+[`yarn install --frozen-lockfile`](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-frozen-lockfile) ensures installs in CI fail if they would typically mutate the lockfile.
+
+## `lerna.json`
+
+We should probably audit our use of `lerna` to make sure a) it's necessary and b) it's idiomatic if it is necessary. We have ended up relying quite a bit on `yarn` workspaces, which has reduced the relevance of `lerna`. ([Ticket](https://github.com/jaegertracing/jaeger-ui/issues/341))
+
+## `tsconfig.json`
+
+Used to configure the `tsc-lint` script and, in theory, the IDE (such as VS Code).
+
+A few notable [compiler settings](http://www.typescriptlang.org/docs/handbook/compiler-options.html):
+
+* `lib`
+  * [es2017](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es2017.d.ts)
+  * [dom](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts)
+  * [dom.iterable](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.iterable.d.ts)
+  * [webworker](https://github.com/Microsoft/TypeScript/blob/master/lib/lib.webworker.d.ts)
+* `skipLibCheck` - Maybe worth reevaluating in the future
+* `strict` - Very important
+* `noEmit` - We're using this for linting, after all
+* `include` - We've included `./typgings` here because it turned out to be a lot simpler than configuring `types`, `typeRoots` and `paths`
+
+## `typings/{custom.d.ts, index.d.ts}`
+
+This is relevant for `./packages/plexus/src/LayoutManager/layout.worker.js` and the `viz.js` package.
+
+I wasn't able to get much in the line of error messaging, so I'm pretty vague on this.
+
+The version of `viz.js` in use (1.8.1) ships with an `index.d.ts` file, but it has some issues. I was able to define alternate type declarations for `viz.js` in `./typings/custom.d.ts` and referring `./typings/index.d.ts` to `./typings/custom.d.ts`. I also changed the import for `viz.js` to `viz.js/viz.js`, which is importing it's main file, directly, instead of implicitly.
+
+For `./packages/plexus/src/LayoutManager/layout.worker.js`, webpack (in `./packages/plexus`) is set up to use the [`worker-loader`](https://github.com/webpack-contrib/worker-loader) to load the file. This converts it to a `WebWorker` by instantiating the `WebWorker` with the source as a `Blob`. Consequently, `layout.worker.js` is implemented in the context of a `WorkerGlobalScope` but consumed as if it's a regular class that extends `Worker`. To deal with this mismatch, a **webpack alias** was created mapping `worker-alias/` to `./packages/plexus/src`. This allowed a type declaration to be defined for `worker-alias/*` as a subclass of `Worker`.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Releases
 
+## Next (unreleased)
+
+### Chores & Maintenance
+
+* **Jaeger UI codebase:** `plexus` package changed to use TypeScript instead of Flow (Partially addresses [#306](https://github.com/jaegertracing/jaeger-ui/issues/306)) ([@tiffon](https://github.com/tiffon) in [#331](https://github.com/jaegertracing/jaeger-ui/pull/331))
+
 ## v1.1.0 (March 3, 2019)
 
 ### Enhancements

package.json

@@ -1,44 +1,60 @@
 {
   "private": true,
+  "name": "jaeger-ui-monorepo",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/jaegertracing/jaeger-ui.git"
   },
   "devDependencies": {
-    "babel-eslint": "9.x.x",
-    "eslint": "5.6.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-config-prettier": "^2.3.0",
-    "eslint-config-react-app": "^2.0.0",
-    "eslint-plugin-flowtype": "^2.35.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.12.2",
-    "flow-bin": "^0.71.0",
+    "@typescript-eslint/eslint-plugin": "1.4.1",
+    "babel-eslint": "10.0.1",
+    "eslint": "5.14.1",
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-prettier": "4.0.0",
+    "eslint-config-react-app": "3.0.7",
+    "eslint-plugin-flowtype": "3.4.2",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-react": "7.12.4",
+    "flow-bin": "0.71.0",
     "glow": "^1.2.2",
     "husky": "1.3.1",
     "isomorphic-fetch": "2.2.1",
-    "jsdom": "13.1.0",
-    "lerna": "^2.10.2",
-    "prettier": "^1.10.2",
-    "rxjs-compat": "6.3.3"
+    "jsdom": "13.2.0",
+    "lerna": "3.13.0",
+    "prettier": "1.10.2",
+    "rxjs-compat": "6.4.0",
+    "typescript": "3.3.3333"
+  },
+  "workspaces": {
+    "packages": ["packages/*"],
+    "nohoist": [
+      "**/customize-cra",
+      "**/customize-cra/**",
+      "**/react-scripts",
+      "**/react-scripts/**",
+      "**/react-app-rewired",
+      "**/react-app-rewired/**"
+    ]
   },
-  "workspaces": ["packages/*"],
   "scripts": {
     "build": "lerna run build",
     "check-license": "./scripts/check-license.sh",
     "coverage": "lerna run coverage",
-    "eslint": "eslint 'scripts/*.js' 'packages/*/src/**/*.js' 'packages/*/*.js'",
+    "eslint": "eslint 'scripts/*.{js,ts,tsx}' 'packages/*/src/**/*.{js,ts,tsx}' 'packages/*/*.{js,ts,tsx}'",
     "flow": "glow",
-    "lint": "yarn run prettier-lint && yarn run eslint && yarn run flow && yarn run check-license",
+    "lint":
+      "yarn run prettier-lint && yarn run tsc-lint && yarn run eslint && yarn run flow && yarn run check-license",
     "prepare": "lerna run --stream --sort prepublishOnly",
     "prettier-comment": "https://github.com/yarnpkg/yarn/issues/6300",
     "prettier":
-      "./node_modules/prettier/bin-prettier.js --write '{.,scripts}/*.{js,json,md}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
+      "./node_modules/prettier/bin-prettier.js --write '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'",
     "prettier-lint":
-      "./node_modules/prettier/bin-prettier.js --list-different '{.,scripts}/*.{js,json,md}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md}' 'packages/*/*.{css,js,json,md}'",
+      "./node_modules/prettier/bin-prettier.js --list-different '{.,scripts}/*.{js,json,md,ts,tsx}' 'packages/*/{src,demo/src}/**/!(react-vis).{css,js,json,md,ts,tsx}' 'packages/*/*.{css,js,json,md,ts,tsx}'",
     "test": "lerna run test",
+    "tsc-lint": "tsc",
+    "tsc-lint-debug": "tsc --listFiles",
     "start": "cd packages/jaeger-ui && yarn start"
   },
   "prettier": {

packages/jaeger-ui/.env

@@ -0,0 +1,8 @@
+# create-react-app does a check on several packages to make sure the
+# versions required by CRA are the package versions available:
+# https://github.com/facebook/create-react-app/blob/dea19fdb30c2e896ed8ac75b68a612b0b92b2406/packages/react-scripts/scripts/utils/verifyPackageTree.js#L23-L29
+# The repo is set up to use yarn workspaces and keeps all
+# packages/jaeger-ui packages local to packages/jaeger-ui. But, the
+# check CRA does not detect this. So, the following env-var skips the
+# check.
+SKIP_PREFLIGHT_CHECK=true

packages/jaeger-ui/package.json

@@ -5,6 +5,16 @@
   "main": "src/index.js",
   "license": "Apache-2.0",
   "homepage": ".",
+  "workspaces": {
+    "nohoist": [
+      "customize-cra",
+      "customize-cra/**",
+      "react-scripts",
+      "react-scripts/**",
+      "react-app-rewired",
+      "react-app-rewired/**"
+    ]
+  },
   "devDependencies": {
     "babel-plugin-import": "1.11.0",
     "bluebird": "^3.5.0",
@@ -23,7 +33,7 @@
     "source-map-explorer": "^1.6.0"
   },
   "dependencies": {
-    "@jaegertracing/plexus": "0.0.1-dev.3",
+    "@jaegertracing/plexus": "0.0.1-dev.4",
     "antd": "3.8.0",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",

packages/jaeger-ui/src/components/App/TraceIDSearchInput.js

@@ -20,7 +20,7 @@ import { withRouter } from 'react-router-dom';
 
 import type { RouterHistory } from 'react-router-dom';
 
-import { getUrl } from '../../components/TracePage/url';
+import { getUrl } from '../TracePage/url';
 
 import './TraceIDSearchInput.css';