Merge pull request #161 from Microsoft/master

merge master

src/webui/src/components/trial-detail/Intermeidate.tsx

@@ -109,7 +109,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             obj = temp.hyperPara;
                         }
                         return '<div class="tooldetailAccuracy">' +
-                            '<div>Trial Id: ' + trialId + '</div>' +
+                            '<div>Trial ID: ' + trialId + '</div>' +
                             '<div>Intermediate: ' + data.data + '</div>' +
                             '<div>Parameters: ' +
                             '<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
@@ -252,7 +252,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                                     />
                                 </Col>
                                 <Col className="range" span={10}>
-                                    <span>Intermediate Result</span>
+                                    <span>Intermediate result</span>
                                     <input
                                         placeholder="number"
                                         ref={input => this.minValInput = input}

src/webui/src/components/trial-detail/Para.tsx

@@ -401,7 +401,7 @@ class Para extends React.Component<ParaProps, ParaState> {
                     <Col span={6} />
                     <Col span={18}>
                         <Row className="meline">
-                            <span>top</span>
+                            <span>Top</span>
                             <Select
                                 style={{ width: '20%', marginRight: 10 }}
                                 placeholder="100%"

src/webui/src/components/trial-detail/TableList.tsx

@@ -17,7 +17,7 @@ require('../../static/style/logPath.scss');
 require('../../static/style/search.scss');
 require('../../static/style/table.scss');
 require('../../static/style/button.scss');
-require('../../static/style/tableList.scss');
+require('../../static/style/openRow.scss');
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -132,12 +132,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
         Object.keys(checkedValues).map(m => {
             switch (checkedValues[m]) {
                 case 'Trial No.':
-                case 'Id':
+                case 'ID':
                 case 'Duration':
                 case 'Status':
                 case 'Operation':
                 case 'Default':
-                case 'Intermediate Result':
+                case 'Intermediate result':
                     break;
                 default:
                     finalKeys.push(checkedValues[m]);
@@ -238,13 +238,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 (a.sequenceId as number) - (b.sequenceId as number)
                     });
                     break;
-                case 'Id':
+                case 'ID':
                     showColumn.push({
-                        title: 'Id',
+                        title: 'ID',
                         dataIndex: 'id',
                         key: 'id',
                         width: 60,
-                        className: 'tableHead idtitle',
+                        className: 'tableHead leftTitle',
                         // the sort of string
                         sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
                         render: (text: string, record: TableObj) => {
@@ -298,10 +298,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     break;
                 case 'Default':
                     showColumn.push({
-                        title: 'Default Metric',
+                        title: 'Default metric',
+                        className: 'leftTitle',
                         dataIndex: 'acc',
                         key: 'acc',
-                        width: 160,
+                        width: 120,
                         sorter: (a: TableObj, b: TableObj) => {
                             const aa = a.description.intermediate;
                             const bb = b.description.intermediate;
@@ -359,9 +360,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     });
                     break;
 
-                case 'Intermediate Result':
+                case 'Intermediate result':
                     showColumn.push({
-                        title: 'Intermediate Result',
+                        title: 'Intermediate result',
                         dataIndex: 'intermediate',
                         key: 'intermediate',
                         width: '16%',
@@ -413,7 +414,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     />
                     {/* Intermediate Result Modal */}
                     <Modal
-                        title="Intermediate Result"
+                        title="Intermediate result"
                         visible={modalVisible}
                         onCancel={this.hideIntermediateModal}
                         footer={null}
@@ -446,7 +447,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         className="titleColumn"
                     />
                 </Modal>
-
             </Row>
         );
     }

src/webui/src/index.tsx

@@ -4,7 +4,6 @@ import * as ReactDOM from 'react-dom';
 import App from './App';
 import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
 import registerServiceWorker from './registerServiceWorker';
-import Control from './components/Control';
 import Overview from './components/Overview';
 import TrialsDetail from './components/TrialsDetail';
 import './index.css';
@@ -15,7 +14,6 @@ ReactDOM.render(
             <IndexRedirect to="/oview" />
             <Route path="/oview" component={Overview} />
             <Route path="/detail" component={TrialsDetail} />
-            <Route path="/control" component={Control} />
         </Route>
     </Router>,
     document.getElementById('root') as HTMLElement

src/webui/src/static/const.ts

@@ -25,7 +25,7 @@ const COLUMN_INDEX = [
         index: 1
     },
     {
-        name: 'Id',
+        name: 'ID',
         index: 2
     },
     {
@@ -45,11 +45,11 @@ const COLUMN_INDEX = [
         index: 10000
     },
     {
-        name: 'Intermediate Result',
+        name: 'Intermediate result',
         index: 10001
     }
 ];
-const COLUMN = ['Trial No.', 'Id', 'Duration', 'Status', 'Default', 'Operation', 'Intermediate Result'];
+const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation', 'Intermediate result'];
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX

src/webui/src/static/function.ts

@@ -90,7 +90,7 @@ const intermediateGraphOption = (intermediateArr: number[], id: string) => {
             data: sequence
         },
         yAxis: {
-            name: 'Default Metric',
+            name: 'Default metric',
             type: 'value',
             data: intermediateArr
         },
@@ -112,6 +112,7 @@ const killJob = (key: number, id: string, status: string, updateList: Function)
     })
         .then(res => {
             if (res.status === 200) {
+                message.destroy();
                 message.success('Cancel the job successfully');
                 // render the table
                 updateList();

src/webui/src/static/style/tableList.scss → src/webui/src/static/style/openRow.scss

-
+/* website theme color */
 $color: #0071bc;
+/* bg light grey */
+$bgColor: #f2f2f2;
 .openRowContent{
     .ant-tabs-vertical.ant-tabs-left .ant-tabs-bar .ant-tabs-tab{
         text-align: left !important;
@@ -12,6 +14,7 @@ $color: #0071bc;
 }
 .openRowContent{
     margin-top: 15px;
+    background-color: $bgColor;
     .card{
         .ant-tabs-vertical .ant-tabs-bar .ant-tabs-tab{
             margin: 0;
@@ -25,7 +28,7 @@ $color: #0071bc;
         }
         .ant-tabs-tabpane{
             background: #f2f2f2;
-            padding: 10px 20px;
+            padding: 12px 12px 12px 0;
         }
     }
 }
@@ -44,3 +47,24 @@ $color: #0071bc;
         height: 100%;
     }
 }
+
+#description{
+    .bgHyper{
+        background-color: #fff;
+        margin-bottom: 12px;
+    }
+    .copy{
+        Button{
+            background-color: #ccc;
+            color: #191919;
+            border: none;
+            outline: none;
+        }
+        Button:hover{
+            background-color: #ccc;
+            color: #191919;
+            border: none;
+            outline: none;
+        }
+    }
+}

src/webui/src/static/style/progress.scss

@@ -53,7 +53,7 @@
     }
     div{
         font-size: 16px;
-        color: #333;
+        color: #0573bc;
     }
 }
 
@@ -73,7 +73,7 @@
 */
 .inputBox{
     height: 26px;
-    margin-top: -3px;
+    margin-top: 5px;
     .concurrencyInput{
         width: 25%;
         height: 26px;

src/webui/src/static/style/table.scss

-
-/* react-json-view background */
+/* react-json-tree background */
 #description ul, #allList ul{
     background: none !important;
 }
@@ -10,10 +9,10 @@
     #succeTable .commonTableStyle{
         overflow-y: scroll;
     }
-
 }
+
 #succeTable, #tableList{
-    .commonTableStyle .idtitle div{
+    .commonTableStyle .leftTitle div{
         text-align: left;
     }
     .durationsty{
@@ -52,7 +51,6 @@
     }
 
     tr:hover{ 
-
         /* cancel antd table default hover style */
         td{
             background-color: transparent;
@@ -85,7 +83,8 @@
     }
 }
 
-pre.hyperpar{
+/* let openrow content left*/
+.hyperpar{
     text-align: left;
     line-height: 18px;
     font-size: 14px;

src/webui/src/static/style/tableStatus.css

+/* all table status font-color */
 .RUNNING,.USER_CANCELED{
     color: #0071BC;
 }

test/pipelines-it-kubeflow.yml

@@ -46,6 +46,7 @@ jobs:
       python3 -m pip install tensorflow==1.12.0 --user
       sudo apt-get install swig -y
       PATH=$HOME/.local/bin:$PATH nnictl package install --name=SMAC
+      PATH=$HOME/.local/bin:$PATH nnictl package install --name=BOHB
     displayName: 'Install dependencies for integration tests in Kubeflow mode'
 
   - script: |

test/pipelines-it-local.yml

@@ -15,6 +15,7 @@ jobs:
       python3 -m pip install tensorflow-gpu==1.12.0 --user
       sudo apt-get install swig -y
       PATH=$HOME/.local/bin:$PATH nnictl package install --name=SMAC
+      PATH=$HOME/.local/bin:$PATH nnictl package install --name=BOHB
     displayName: 'Install dependencies for integration tests'
   - script: |
       cd test

test/pipelines-it-pai.yml

@@ -46,6 +46,7 @@ jobs:
       python3 -m pip install tensorflow-gpu==1.12.0 --user
       sudo apt-get install swig -y
       PATH=$HOME/.local/bin:$PATH nnictl package install --name=SMAC
+      PATH=$HOME/.local/bin:$PATH nnictl package install --name=BOHB
     displayName: 'Install dependencies for integration tests in PAI mode'
 
   - script: |

test/pipelines-it-remote.yml

@@ -16,6 +16,7 @@ jobs:
   - script: |
       sudo apt-get install swig -y
       PATH=$HOME/.local/bin:$PATH nnictl package install --name=SMAC
+      PATH=$HOME/.local/bin:$PATH nnictl package install --name=BOHB
     displayName: 'Install dependencies for integration tests in remote mode'
   - task: CopyFilesOverSSH@0
     inputs:

test/tuner_test.py

@@ -49,6 +49,10 @@ def switch(dispatch_type, dispatch_name):
                 'optimize_mode': 'maximize'
             }
         }
+    if dispatch_name == 'BatchTuner':
+        experiment_config['searchSpacePath'] = 'batchtuner_search_space.json'
+    else:
+        experiment_config['searchSpacePath'] = 'search_space.json'
     dump_yml_content(config_path, experiment_config)
 
 def test_builtin_dispatcher(dispatch_type, dispatch_name):

test/tuner_test/batchtuner_search_space.json

+{
+    "combine_params":
+    {
+        "_type" : "choice",
+        "_value" : [{"x": 1},
+                    {"x": 100}]
+    }
+}