webui logpath and document (#135)

* Add webui document and logpath as a href

* fix tslint

* fix comments by Chengmin

docs/WebUI.md

+# WebUI
+
+## View summary page
+
+Click the tab "Overview".
+
+* See the experiment parameters.
+* See search_space json.
+* See good performance trial.
+
+![](./img/overview.jpg)
+
+## View job accuracy
+
+Click the tab "Optimization Progress" to see the point graph of all trials. Hover every point to see its specific accuracy.
+
+![](./img/accuracy.jpg)
+
+## View hyper parameter
+
+Click the tab "Hyper Parameter" to see the parallel graph.
+
+* You can select the percentage to see top trials.
+* Choose two axis to swap its positions
+
+![](./img/searchspace.jpg)
+
+## View trial status 
+
+Click the tab "Trial Status" 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.
+
+![](./img/openRow.jpg)
+
+* Kill: you can kill a job that status is running.
+* Tensor: you can see a job in the tensorflow graph, it will link to the Tensorboard page.
+
+![](./img/trialStatus.jpg)
+
+* Intermediate Result Graph.
+
+![](./img/intermediate.jpg)
+
+## Control 
+
+Click the tab "Control" to add a new trial or update the search_space file and some experiment parameters.
+
+![](./img/control.jpg)
+
+## Feedback
+
+[Known Issues](https://github.com/Microsoft/nni/issues).
\ No newline at end of file

src/webui/README.md

-# webui
+# WebUI
 
-NNI is a research platform for metalearning. It provides easy-to-use interface so that you could perform neural architecture search, hyperparameter optimization and optimizer design for your own problems and models.
-Web UI allows user to monitor the status of the NNI system using a graphical interface.
-
-## Deployment
-
-### To start the webui
-
-> $ yarn
-> $ yarn start
-
-## Usage
-
-### View summary page
+## View summary page
 
 Click the tab "Overview".
 
+* See the experiment parameters.
 * See good performance trial.
 * See search_space json.
 
-### View job accuracy
+## View job accuracy
 
 Click the tab "Optimization Progress" to see the point graph of all trials. Hover every point to see its specific accuracy.
 
-### View hyper parameter
+## View hyper parameter
 
 Click the tab "Hyper Parameter" to see the parallel graph.
 
-* You can select the percentage to cut down some lines.
+* You can select the percentage to see top trials.
 * Choose two axis to swap its positions
 
-### View trial status 
+## View trial status 
 
 Click the tab "Trial Status" to see the status of the all trials. Specifically:
 
-* Running trial: running trial's duration in the bar graph.
-* Trial detail: trial's id, trial's duration, start time, end time, status and accuracy.
+* 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.
 * Tensor: you can see a job in the tensorflow graph, it will link to the Tensorboard page.
 
-### Control 
+## Control 
 
 Click the tab "Control" to add a new trial or update the search_space file and some experiment parameters.
 
-### View Tensorboard Graph 
-   
-Click the tab "Tensorboard" to see a job in the tensorflow graph. 
+## Feedback
+
+[Known Issues](https://github.com/Microsoft/nni/issues).
\ No newline at end of file

src/webui/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "antd": "^3.8.1",
+    "antd": "^3.9.3",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "echarts": "^4.1.0",

src/webui/src/components/Sessionpro.tsx

@@ -5,6 +5,7 @@ import { MANAGER_IP, overviewItem } from '../const';
 const Option = Select.Option;
 import JSONTree from 'react-json-tree';
 require('../style/sessionpro.css');
+require('../style/logPath.css');
 
 interface TableObj {
     key: number;
@@ -14,12 +15,13 @@ interface TableObj {
     end: string;
     status: string;
     acc?: number;
-    description: object;
+    description: Parameters;
 }
 
 interface Parameters {
     parameters: object;
     logPath?: string;
+    isLink?: boolean;
 }
 
 interface Experiment {
@@ -76,7 +78,9 @@ class Sessionpro extends React.Component<{}, SessionState> {
                 end: '',
                 status: '',
                 acc: 0,
-                description: {}
+                description: {
+                    parameters: {}
+                }
             }],
             selNum: overviewItem,
             option: {},
@@ -162,6 +166,10 @@ class Sessionpro extends React.Component<{}, SessionState> {
                             desJobDetail.parameters = JSON.parse(tableData[item].hyperParameters).parameters;
                             if (tableData[item].logPath !== undefined) {
                                 desJobDetail.logPath = tableData[item].logPath;
+                                const isSessionLink = /^http/gi.test(tableData[item].logPath);
+                                if (isSessionLink) {
+                                    desJobDetail.isLink = true;
+                                }
                             }
                             topTableData.push({
                                 key: topTableData.length,
@@ -261,14 +269,35 @@ class Sessionpro extends React.Component<{}, SessionState> {
         }];
 
         const openRow = (record: TableObj) => {
+            const openRowDataSource = {
+                parameters: record.description.parameters
+            };
+            let isLogLink: boolean = false;
+            const logPathRow = record.description.logPath;
+            if (record.description.isLink !== undefined) {
+                isLogLink = true;
+            }
             return (
                 <pre id="description" className="jsontree">
                     <JSONTree
                         hideRoot={true}
                         shouldExpandNode={() => true}  // default expandNode
                         getItemString={() => (<span />)}  // remove the {} items
-                        data={record.description}
+                        data={openRowDataSource}
                     />
+                     {
+                        isLogLink
+                            ?
+                            <div className="logpath">
+                                <span className="logName">logPath: </span>
+                                <a className="logContent logHref" href={logPathRow} target="_blank">{logPathRow}</a>
+                            </div>
+                            :
+                            <div className="logpath">
+                                <span className="logName">logPath: </span>
+                                <span className="logContent">{logPathRow}</span>
+                            </div>
+                    }
                 </pre>
             );
         };

src/webui/src/components/SlideBar.tsx

@@ -11,13 +11,13 @@ class SlideBar extends React.Component<{}, {}> {
         <ul className="nav">
           <li>
             <IndexLink to={'/oview'} activeClassName="high">
-              <Icon className="icon" type="dot-chart" />Overview
+              <Icon className="icon" type="experiment" theme="outlined" />Overview
               <Icon className="floicon" type="right" />
             </IndexLink>
           </li>
           <li>
             <Link to={'/all'} activeClassName="high">
-              <Icon className="icon" type="message" />Optimization Progress
+              <Icon className="icon" type="dot-chart" />Optimization Progress
               <Icon className="floicon" type="right" />
             </Link>
           </li>
@@ -39,6 +39,11 @@ class SlideBar extends React.Component<{}, {}> {
               <Icon className="floicon" type="right" />
             </Link>
           </li>
+          <li>
+            <a href="https://github.com/Microsoft/nni/issues" target="_blank">
+              <Icon className="icon" type="smile" theme="outlined" />Feedback
+            </a>
+          </li>
         </ul>
       </div>
     );

src/webui/src/components/TrialStatus.tsx

@@ -12,6 +12,7 @@ require('echarts/lib/chart/scatter');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');
 require('../style/trialStatus.css');
+require('../style/logPath.css');
 echarts.registerTheme('my_theme', {
     color: '#3c8dbc'
 });
@@ -19,6 +20,7 @@ echarts.registerTheme('my_theme', {
 interface DescObj {
     parameters: Object;
     logPath?: string;
+    isLink?: boolean;
 }
 
 interface TableObj {
@@ -238,6 +240,10 @@ class TrialStatus extends React.Component<{}, TabState> {
                         }
                         if (trialJobs[item].logPath !== undefined) {
                             desc.logPath = trialJobs[item].logPath;
+                            const isHyperLink = /^http/gi.test(trialJobs[item].logPath);
+                            if (isHyperLink) {
+                                desc.isLink = true;
+                            }
                         }
                         if (trialJobs[item].finalMetricData !== undefined) {
                             acc = parseFloat(trialJobs[item].finalMetricData.data);
@@ -472,14 +478,35 @@ class TrialStatus extends React.Component<{}, TabState> {
         ];
 
         const openRow = (record: TableObj) => {
+            const parametersRow = {
+                parameters: record.description.parameters
+            };
+            let isLogLink: boolean = false;
+            const logPathRow = record.description.logPath;
+            if (record.description.isLink !== undefined) {
+                isLogLink = true;
+            }
             return (
                 <pre className="hyperpar">
                     <JSONTree
                         hideRoot={true}
                         shouldExpandNode={() => true}  // default expandNode
                         getItemString={() => (<span />)}  // remove the {} items
-                        data={record.description}
+                        data={parametersRow}
                     />
+                    {
+                        isLogLink
+                            ?
+                            <div className="logpath">
+                                <span className="logName">logPath: </span>
+                                <a className="logContent logHref" href={logPathRow} target="_blank">{logPathRow}</a>
+                            </div>
+                            :
+                            <div className="logpath">
+                                <span className="logName">logPath: </span>
+                                <span className="logContent">{logPathRow}</span>
+                            </div>
+                    }
                     <Button
                         type="primary"
                         className="tableButton"

src/webui/src/style/logPath.css

+.logpath{
+    margin-bottom: 10px;
+    margin-left: 10px;
+}
+.logName{
+    color: #268BD2;
+}
+.logContent{
+    color: #333;
+}
+.logHref:hover{
+    color: blue;
+    text-decoration: underline;
+}

src/webui/src/style/slideBar.css

@@ -23,6 +23,7 @@
 .nav .icon{
     padding-left: 13px;
     padding-right: 13px;
+    font-size: 18px;
 }
 .nav .floicon {
     font-size: 16px;

src/webui/src/style/trialStatus.css

@@ -32,23 +32,6 @@ pre.hyperpar{
     float: right;
     margin-right: 30px; 
 }
-/* the pagination of next and prev */
-.ant-pagination-prev .ant-pagination-item-link:after{
-    content: "Previous";
-    display: block;
-    font-size: 14px;
-    color: #333;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-.ant-pagination-next .ant-pagination-item-link:after {
-    content: "NEXT";
-    display: block;
-    font-size: 14px;
-    color: #333;
-    padding-left: 5px;
-    padding-right: 5px;
-}
 Button.tableButton{
     background:	#3c8dbc;
     border-color: #3c8dbc;