[webui] format code by eslint and prettier (#2744)

* update * format as prettier * fix error * add stylelint for scss css file * add arrow-parens rule * update * fix lint * fix conflict Co-authored-by: Lijiao <15910218274@163.com> Co-authored-by: Lijiao <Lijiaoa@outlook.com> Co-authored-by: Lijiao <1425861283@qq.com>
microsoft · Sep 18, 2020 · e2d8cc1 · e2d8cc1
1 parent 4668fc0
commit e2d8cc1
Show file tree

Hide file tree

Showing 74 changed files with 3,433 additions and 1,672 deletions.
diff --git a/src/webui/.eslintignore b/src/webui/.eslintignore
@@ -0,0 +1,3 @@
+/build/**
+/scripts/**
+/src/serviceWorker.ts
diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc
@@ -9,22 +9,29 @@
         "sourceType": "module"
     },
     "plugins": [
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "eslint-plugin-prettier"
     ],
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "prettier/react",
+        "prettier"
     ],
     "rules": {
+        "prettier/prettier": 2,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/no-namespace": 0,
         "@typescript-eslint/consistent-type-assertions": 0,
         "@typescript-eslint/no-inferrable-types": 0,
         "@typescript-eslint/no-use-before-define": [2, "nofunc"],
-        "no-inner-declarations": 0,
         "@typescript-eslint/no-var-requires": 0,
+        "arrow-parens": [2, "as-needed"],
+        "no-inner-declarations": 0,
+        "no-empty": 2,
+        "no-multiple-empty-lines": [2, { "max": 1 }],
         "react/display-name": 0
     },
     "settings": {

diff --git a/src/webui/.stylelintrc.json b/src/webui/.stylelintrc.json
@@ -0,0 +1,11 @@
+{
+    "extends": "stylelint-config-standard",
+    "ignoreFiles": [
+        "build/**"
+    ],
+    "rules": {
+        "at-rule-empty-line-before": null,
+        "indentation": 4,
+        "no-descending-specificity": null
+    }
+}
diff --git a/src/webui/package.json b/src/webui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nni-webui",
   "version": "0.1.0",
-  "private": true,
+  "license": "MIT",
   "dependencies": {
     "axios": "^0.19.0",
     "babel-eslint": "10.0.1",
@@ -75,15 +75,20 @@
     "@typescript-eslint/parser": "^2.11.0",
     "concurrently": "^5.2.0",
     "eslint": "^5.16.0",
+    "eslint-config-prettier": "^6.1.0",
     "eslint-config-react-app": "^4.0.0",
     "eslint-loader": "2.1.2",
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
     "express": "^4.17.1",
     "npx": "^10.2.0",
+    "prettier": "^1.18.2",
+    "stylelint": "^13.7.0",
+    "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.0"
   },
   "proxy": "http://localhost:12138",
@@ -92,6 +97,7 @@
     "build": "node --max-old-space-size=3072 scripts/build.js",
     "test": "node --max-old-space-size=3072 scripts/test.js",
     "eslint": "npx eslint ./ --ext .tsx,.ts",
+    "stylelint": "npx stylelint **/*{.css,.scss}",
     "mock": "node scripts/server.js",
     "dev": "concurrently \"yarn mock\" \"yarn start\""
   },

diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    printWidth: 120,
+    semi: true,
+    tabWidth: 4,
+    trailingComma: 'none',
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    singleQuote: true,
+    eslintIntegration: true,
+    jsxSingleQuote: true,
+    endOfline: 'lf'
+};
diff --git a/src/webui/src/App.scss b/src/webui/src/App.scss
@@ -1,63 +1,63 @@
-.nni{
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  color: #212121;
-  font-size: 14px;
-  background: #f2f2f2;
+.nni {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #212121;
+    font-size: 14px;
+    background: #f2f2f2;
 }
 
-.header{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 56px;
-  background: #0071BC;
-  border-right: 1px solid #ccc;
-  z-index: 1000;
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 56px;
+    background: #0071bc;
+    border-right: 1px solid #ccc;
+    z-index: 1000;
 }
 
-.headerCon{
-  width: 90%;
-  margin: 0 auto;
+.headerCon {
+    width: 90%;
+    margin: 0 auto;
 }
 
-.contentBox{
-  width: 100%;
+.contentBox {
+    width: 100%;
 }
 
-.content{
-  width: 89%;
-  min-width: 1024px;
-  margin: 0 auto;
-  margin-top: 74px;
-  margin-bottom: 30px;
+.content {
+    width: 89%;
+    min-width: 1024px;
+    margin: 0 auto;
+    margin-top: 74px;
+    margin-bottom: 30px;
 }
 
-.bottomDiv{
-  margin-bottom: 10px;
+.bottomDiv {
+    margin-bottom: 10px;
 }
 
-.bgNNI{
-  background-color: #fff;
+.bgNNI {
+    background-color: #fff;
 }
 
-.borderRight{
-  margin-right: 10px;
+.borderRight {
+    margin-right: 10px;
 }
 
 /* office-fabric-ui */
-.ms-Pivot-linkContent{
-  height: 44px;
+.ms-Pivot-linkContent {
+    height: 44px;
 }
 
-.ms-Callout-main{
-  p{
-    font-weight: 500;
-    color: #333;
-  }
+.ms-Callout-main {
+    p {
+        font-weight: 500;
+        color: #333;
+    }
 }
 
-.warning{
-  padding-bottom: 15px;
-  background-color: #f2f2f2;
+.warning {
+    padding-bottom: 15px;
+    background-color: #f2f2f2;
 }
diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
@@ -28,7 +28,7 @@ export const AppContext = React.createContext({
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeColumn: (val: string[]) => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-    changeMetricGraphMode: ( val: 'max' | 'min') => {},
+    changeMetricGraphMode: (val: 'max' | 'min') => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeEntries: (val: string) => {}
 });
@@ -54,10 +54,10 @@ class App extends React.Component<{}, AppState> {
 
     async componentDidMount(): Promise<void> {
         await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
-        this.setState(state => ({ 
-            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, 
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
             trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1,
-            metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max')
+            metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
         }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
         // final result is legal
@@ -78,18 +78,18 @@ class App extends React.Component<{}, AppState> {
                     // illegal final data
                     this.setState(() => ({
                         isillegalFinal: true,
-                        expWarningMessage: 'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
+                        expWarningMessage:
+                            'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
                     }));
                     window.clearInterval(this.dataFormatimer);
                 }
             } else {
                 break;
             }
         }
-    }
+    };
 
     changeInterval = (interval: number): void => {
-
         window.clearTimeout(this.timerId);
         if (interval === 0) {
             return;
@@ -100,22 +100,21 @@ class App extends React.Component<{}, AppState> {
             this.firstLoad = true;
             this.refresh();
         });
-
-    }
+    };
 
     // TODO: use local storage
     changeColumn = (columnList: string[]): void => {
         this.setState({ columnList: columnList });
-    }
+    };
 
     changeMetricGraphMode = (val: 'max' | 'min'): void => {
         this.setState({ metricGraphMode: val });
-    }
+    };
 
     // overview best trial module
     changeEntries = (entries: string): void => {
         this.setState({ bestTrialEntries: entries });
-    }
+    };
 
     shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
         if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
@@ -126,11 +125,18 @@ class App extends React.Component<{}, AppState> {
     }
 
     render(): React.ReactNode {
-        const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast,
-            metricGraphMode, isillegalFinal, expWarningMessage, bestTrialEntries
+        const {
+            interval,
+            columnList,
+            experimentUpdateBroadcast,
+            trialsUpdateBroadcast,
+            metricGraphMode,
+            isillegalFinal,
+            expWarningMessage,
+            bestTrialEntries
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
-            return null;  // TODO: render a loading page
+            return null; // TODO: render a loading page
         }
         const errorList = [
             { errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
@@ -141,38 +147,41 @@ class App extends React.Component<{}, AppState> {
             { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
         ];
         return (
-            <Stack className="nni" style={{ minHeight: window.innerHeight }}>
-                <div className="header">
-                    <div className="headerCon">
+            <Stack className='nni' style={{ minHeight: window.innerHeight }}>
+                <div className='header'>
+                    <div className='headerCon'>
                         <NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
                     </div>
                 </div>
-                <Stack className="contentBox">
-                    <Stack className="content">
+                <Stack className='contentBox'>
+                    <Stack className='content'>
                         {/* if api has error field, show error message */}
-                        {
-                            errorList.map((item, key) => {
-                                return (
-                                    item.errorWhere && <div key={key} className="warning">
-                                        <MessageInfo info={item.errorMessage} typeInfo="error" />
+                        {errorList.map(
+                            (item, key) =>
+                                item.errorWhere && (
+                                    <div key={key} className='warning'>
+                                        <MessageInfo info={item.errorMessage} typeInfo='error' />
                                     </div>
-                                );
-                            })
-                        }
-                        {isillegalFinal && <div className="warning">
-                            <MessageInfo info={expWarningMessage} typeInfo="warning" />
-                        </div>}
-                        <AppContext.Provider value={{
-                            interval,
-                            columnList, 
-                            changeColumn: this.changeColumn,
-                            experimentUpdateBroadcast,
-                            trialsUpdateBroadcast,
-                            metricGraphMode, 
-                            changeMetricGraphMode: this.changeMetricGraphMode,
-                            bestTrialEntries, 
-                            changeEntries: this.changeEntries
-                        }}>
+                                )
+                        )}
+                        {isillegalFinal && (
+                            <div className='warning'>
+                                <MessageInfo info={expWarningMessage} typeInfo='warning' />
+                            </div>
+                        )}
+                        <AppContext.Provider
+                            value={{
+                                interval,
+                                columnList,
+                                changeColumn: this.changeColumn,
+                                experimentUpdateBroadcast,
+                                trialsUpdateBroadcast,
+                                metricGraphMode,
+                                changeMetricGraphMode: this.changeMetricGraphMode,
+                                bestTrialEntries,
+                                changeEntries: this.changeEntries
+                            }}
+                        >
                             {this.props.children}
                         </AppContext.Provider>
                     </Stack>
@@ -192,7 +201,6 @@ class App extends React.Component<{}, AppState> {
             if (trialsUpdated) {
                 this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
             }
-
         } else {
             this.firstLoad = false;
         }
@@ -205,13 +213,15 @@ class App extends React.Component<{}, AppState> {
         }
 
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-
-    }
+    };
 
     public async lastRefresh(): Promise<void> {
         await EXPERIMENT.update();
         await TRIALS.update(true);
-        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
+            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+        }));
     }
 }