WebUI eslint configuration (#1847)

* enable webui eslint
* enable react eslint plugin

azure-pipelines.yml

@@ -21,6 +21,9 @@ jobs:
       set -e
       cd src/nni_manager
       yarn eslint
+      # uncomment following 2 lines to enable webui eslint
+      # cd ../webui
+      # yarn eslint
     displayName: 'Run eslint'
   - script: |
       python3 -m pip install torch==0.4.1 --user
@@ -43,7 +46,7 @@ jobs:
     displayName: 'Run pylint'
   - script: |
       python3 -m pip install flake8 --user
-      EXCLUDES=./src/nni_manager/,./tools/nni_annotation/testcase/,./examples/trials/mnist-nas/*/mnist*.py,./examples/trials/nas_cifar10/src/cifar10/general_child.py
+      EXCLUDES=./src/nni_manager/,./src/webui,./tools/nni_annotation/testcase/,./examples/trials/mnist-nas/*/mnist*.py,./examples/trials/nas_cifar10/src/cifar10/general_child.py
       python3 -m flake8 . --count --exclude=$EXCLUDES --select=E9,F63,F72,F82 --show-source --statistics
     displayName: 'Run flake8 tests to find Python syntax errors and undefined names'
   - script: |

src/webui/.eslintrc

+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-namespace": 0,
+        "@typescript-eslint/consistent-type-assertions": 0,
+        "@typescript-eslint/no-inferrable-types": 0,
+        "no-inner-declarations": 0,
+        "@typescript-eslint/no-var-requires": 0
+    },
+    "ignorePatterns": [
+        "node_modules/",
+        "build/",
+        "**/*.js"
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

src/webui/config/paths.js

@@ -52,7 +52,6 @@ module.exports = {
   appNodeModules: resolveApp('node_modules'),
   appTsConfig: resolveApp('tsconfig.json'),
   appTsProdConfig: resolveApp('tsconfig.prod.json'),
-  appTsLint: resolveApp('tslint.json'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
 };

src/webui/config/webpack.config.dev.js

@@ -186,7 +186,7 @@ module.exports = {
       async: false,
       watch: paths.appSrc,
       tsconfig: paths.appTsConfig,
-      tslint: paths.appTsLint,
+      eslint: false
     }),
   ],
   // Some libraries import Node modules but don't use them in the browser.

src/webui/config/webpack.config.prod.js

@@ -231,7 +231,7 @@ module.exports = {
     new ForkTsCheckerWebpackPlugin({
       async: false,
       tsconfig: paths.appTsProdConfig,
-      tslint: paths.appTsLint,
+      eslint: false
     }),
   ],
   // Some libraries import Node modules but don't use them in the browser.

src/webui/package.json

@@ -43,8 +43,6 @@
     "ts-import-plugin": "^1.4.3",
     "ts-loader": "^6.0.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslint": "^5.7.0",
-    "tslint-react": "^4.0.0",
     "url-loader": "^2.1.0",
     "webpack": "^4.39.1",
     "webpack-dev-server": "^3.7.2",
@@ -53,7 +51,8 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "start": "node --trace-warnings scripts/start.js"
+    "start": "node --trace-warnings scripts/start.js",
+    "eslint": "npx eslint ./ --ext .tsx,.ts"
   },
   "devDependencies": {
     "@types/node": "^10.14.14",
@@ -62,6 +61,11 @@
     "@types/react-json-tree": "^0.6.11",
     "@types/react-responsive": "^3.0.3",
     "@types/react-router": "^3.0.20",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-react": "^7.17.0",
+    "npx": "^10.2.0",
     "typescript": "^3.5.3"
   },
   "resolutions": {

src/webui/src/App.tsx

@@ -60,7 +60,6 @@ class App extends React.Component<{}, AppState> {
         }
         const reactPropsChildren = React.Children.map(this.props.children, child =>
             React.cloneElement(
-                // tslint:disable-next-line:no-any
                 child as React.ReactElement<any>, {
                     interval,
                     columnList, changeColumn: this.changeColumn,

src/webui/src/components/overview/TrialProfile.tsx

@@ -19,7 +19,6 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
             'id', 'logDir', 'startTime', 'endTime',
             'experimentName', 'searchSpace', 'trainingServicePlatform'
         ];
-        // tslint:disable-next-line:no-any
         const filter = (key: string, val: any) => {
             if (key === 'trialConcurrency') {
                 return this.props.concurrency;

src/webui/src/registerServiceWorker.ts

-// tslint:disable:no-console
 // In production, we register a service worker to serve assets from local cache.
 
 // This lets the app load faster on subsequent visits in production, and gives
@@ -19,34 +18,6 @@ const isLocalhost = Boolean(
   )
 );
 
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(
-      process.env.PUBLIC_URL!,
-      window.location.toString()
-    );
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (!isLocalhost) {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
-      } else {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
-      }
-    });
-  }
-}
-
 function registerValidSW(swUrl: string) {
   navigator.serviceWorker
     .register(swUrl)
@@ -105,6 +76,34 @@ function checkValidServiceWorker(swUrl: string) {
     });
 }
 
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL!,
+      window.location.toString()
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (!isLocalhost) {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      } else {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+      }
+    });
+  }
+}
+
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {

src/webui/src/static/function.ts

@@ -24,7 +24,7 @@ const convertDuration = (num: number) => {
     const hour = Math.floor(num / 3600);
     const minute = Math.floor(num / 60 % 60);
     const second = Math.floor(num % 60);
-    let result = [ ];
+    const result = [ ];
     if (hour > 0) {
         result.push(`${hour}h`);
     }
@@ -163,7 +163,7 @@ const downFile = (content: string, fileName: string) => {
             downTag.download = fileName;
             downTag.href = URL.createObjectURL(file);
         });
-        let eventMouse = document.createEvent('MouseEvents');
+        const eventMouse = document.createEvent('MouseEvents');
         eventMouse.initEvent('click', false, false);
         downTag.dispatchEvent(eventMouse);
     }

src/webui/src/static/interface.ts

-// tslint:disable:no-any
-
 // draw accuracy graph data interface
 interface TableObj {
     key: number;

src/webui/src/static/model/trial.ts

@@ -109,7 +109,7 @@ class Trial implements TableObj {
     }
 
     get description(): Parameters {
-        let ret: Parameters = {
+        const ret: Parameters = {
             parameters: { },
             intermediate: [ ],
             multiProgress: 1

src/webui/src/static/model/trialmanager.ts

@@ -3,6 +3,18 @@ import { MANAGER_IP, METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE } f
 import { MetricDataRecord, TableRecord, TrialJobInfo } from '../interface';
 import { Trial } from './trial';
 
+function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
+    const ret = new Map<string, MetricDataRecord[]>();
+    for (const metric of metrics) {
+        if (ret.has(metric.trialJobId)) {
+            ret.get(metric.trialJobId)!.push(metric);
+        } else {
+            ret.set(metric.trialJobId, [ metric ]);
+        }
+    }
+    return ret;
+}
+
 class TrialManager {
     private trials: Map<string, Trial> = new Map<string, Trial>();
     private infoInitialized: boolean = false;
@@ -141,16 +153,4 @@ class TrialManager {
     }
 }
 
-function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
-    const ret = new Map<string, MetricDataRecord[]>();
-    for (const metric of metrics) {
-        if (ret.has(metric.trialJobId)) {
-            ret.get(metric.trialJobId)!.push(metric);
-        } else {
-            ret.set(metric.trialJobId, [ metric ]);
-        }
-    }
-    return ret;
-}
-
 export { TrialManager };

src/webui/tslint.json

-{
-  "extends": [
-      "tslint-react"
-  ],
-  "rules": {
-      "align": [
-          true,
-          "parameters",
-          "arguments",
-          "statements"
-      ],
-      "ban": false,
-      "class-name": true,
-      "curly": true,
-      "eofline": false,
-      "forin": true,
-      "indent": [
-          true,
-          "spaces"
-      ],
-      "interface-name": [
-          true,
-          "never-prefix"
-      ],
-      "jsdoc-format": true,
-      "jsx-no-lambda": false,
-      "jsx-no-multiline-js": false,
-      "label-position": true,
-      "max-line-length": [
-          true,
-          120
-      ],
-      "member-ordering": [
-          true,
-          "public-before-private",
-          "static-before-instance",
-          "variables-before-functions"
-      ],
-      "no-arg": true,
-      "no-bitwise": true,
-      "no-console": false,
-      "no-consecutive-blank-lines": true,
-      "no-construct": true,
-      "no-debugger": true,
-      "no-duplicate-variable": true,
-      "no-empty": true,
-      "no-eval": true,
-      "no-shadowed-variable": true,
-      "no-string-literal": true,
-      "no-switch-case-fall-through": true,
-      "no-trailing-whitespace": false,
-      "no-unused-expression": true,
-      "one-line": [
-          true,
-          "check-catch",
-          "check-else",
-          "check-open-brace",
-          "check-whitespace"
-      ],
-      "quotemark": [
-          true,
-          "single",
-          "jsx-double"
-      ],
-      "radix": true,
-      "semicolon": [
-          true,
-          "always"
-      ],
-      "switch-default": true,
-      "trailing-comma": [
-          false
-      ],
-      "triple-equals": [
-          true,
-          "allow-null-check"
-      ],
-      "typedef": [
-          true,
-          "parameter",
-          "property-declaration"
-      ],
-      "typedef-whitespace": [
-          true,
-          {
-              "call-signature": "nospace",
-              "index-signature": "nospace",
-              "parameter": "nospace",
-              "property-declaration": "nospace",
-              "variable-declaration": "nospace"
-          }
-      ],
-      "variable-name": [
-          true,
-          "ban-keywords",
-          "check-format",
-          "allow-leading-underscore",
-          "allow-pascal-case"
-      ],
-      "whitespace": [
-          true,
-          "check-branch",
-          "check-decl",
-          "check-module",
-          "check-operator",
-          "check-separator",
-          "check-type",
-          "check-typecast"
-      ]
-  }
-}