rewrite webui development doc README (#4489)

ts/webui/README.md

 # WebUI
 
-## View summary page
+WebUI is built by using [React](https://reactjs.org/docs/getting-started.html) and [fluentui](https://developer.microsoft.com/en-us/fluentui#/controls/web).
 
-Click the tab "Overview".
 
-* See the experiment parameters.
-* See good performance trial.
-* See search_space json.
+## Development
 
-## View job accuracy
+* Please refer the [installation doc](https://github.com/microsoft/nni#installation) to run an experiment.
+* WebUI uses [eslint](https://eslint.org/docs/user-guide/getting-started) and [prettier](https://prettier.io/docs/en/index.html) to format code. You could change the eslintrc file like this picture when you are coding.
 
-Click the tab "Default Metric" to see the point graph of all trials. Hover every point to see its specific accuracy.
+<img src="../../docs/img/webui-img/rules.png" />
 
-## View hyper parameter
+* Use this command in `webui/ts` directory when you want to see latest website.
+    ```bash
+    yarn build
+    ```
 
-Click the tab "Hyper Parameter" to see the parallel graph.
+## PR
 
-* You can select the percentage to see top trials.
-* Choose two axis to swap its positions
-
-## View trial status
-
-Click the tab "Trials Detail" to see the status of the all trials. Specifically:
-
-* Trial duration: trial's duration in the bar graph.
-* Trial detail: trial's id, trial's duration, start time, end time, status, accuracy and search space file.
-* Kill: you can kill a job that status is running.
-
-## Feedback
-
-[Known Issues](https://github.com/Microsoft/nni/issues).
+* If you need to send the PR, you should change the eslintrc file back and use the command `yarn eslint` to check   style. And `yarn eslint --fix` could fix almost warnings and errors. Also use `yarn stylelint` to confirm `.scss & .css` style.
\ No newline at end of file

ts/webui/README_zh_CN.md

-# Web 界面
-
-## 查看概要页面
-
-点击标签 "Overview"。
-
-* 查看 Experiment 参数。
-* 查看最好结果的 Trial。
-* 查看搜索空间 JSON 文件。
-
-## 查看任务准确度
-
-点击 "Default Metric" 来查看所有尝试的点图。 将鼠标悬停到某个点查看其准确度。
-
-## 查看超参
-
-点击 "Hyper Parameter" 标签查看图像。
-
-* 可选择百分比查看最好的 Trial。
-* 选择两个轴来交换位置。
-
-## 查看 Trial 状态
-
-点击 "Trials Detail" 标签查看所有 Trial 的状态。 特别是：
-
-* Trial duration：Trial 执行时间的条形图。
-* Trial 详情：Trial 的 id，持续时间，开始时间，结束时间，状态，精度和搜索空间。
-* Kill: 可终止正在运行的任务。
-
-## 反馈
-
-[已知问题](https://github.com/Microsoft/nni/issues)