Merge v1.1 back to master

Merge v1.1 back to master

src/webui/src/components/Modal/LogDrawer.tsx

@@ -8,89 +8,48 @@ import MonacoHTML from '../public-child/MonacoEditor';
 import '../../static/style/logDrawer.scss';
 
 interface LogDrawerProps {
-    isVisble: boolean;
     closeDrawer: () => void;
     activeTab?: string;
 }
 
 interface LogDrawerState {
-    nniManagerLogStr: string;
-    dispatcherLogStr: string;
+    nniManagerLogStr: string | null;
+    dispatcherLogStr: string | null;
     isLoading: boolean;
-    isLoadispatcher: boolean;
+    logDrawerHeight: number;
 }
 
 class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
+    private timerId: number | undefined;
 
-    public _isLogDrawer: boolean;
     constructor(props: LogDrawerProps) {
         super(props);
 
         this.state = {
-            nniManagerLogStr: 'nnimanager',
-            dispatcherLogStr: 'dispatcher',
-            isLoading: false,
-            isLoadispatcher: false
+            nniManagerLogStr: null,
+            dispatcherLogStr: null,
+            isLoading: true,
+            logDrawerHeight: window.innerHeight - 48
         };
     }
 
-    getNNImanagerLogmessage = () => {
-        if (this._isLogDrawer === true) {
-            this.setState({ isLoading: true }, () => {
-                axios(`${DOWNLOAD_IP}/nnimanager.log`, {
-                    method: 'GET'
-                })
-                    .then(res => {
-                        if (res.status === 200) {
-                            setTimeout(() => { this.setNNImanager(res.data); }, 300);
-                        }
-                    });
-            });
-        }
-    }
-
-    setDispatcher = (value: string) => {
-        if (this._isLogDrawer === true) {
-            this.setState({ isLoadispatcher: false, dispatcherLogStr: value });
-        }
-    }
-
-    setNNImanager = (val: string) => {
-        if (this._isLogDrawer === true) {
-            this.setState({ isLoading: false, nniManagerLogStr: val });
-        }
-    }
-
-    getdispatcherLogmessage = () => {
-        if (this._isLogDrawer === true) {
-            this.setState({ isLoadispatcher: true }, () => {
-                axios(`${DOWNLOAD_IP}/dispatcher.log`, {
-                    method: 'GET'
-                })
-                    .then(res => {
-                        if (res.status === 200) {
-                            setTimeout(() => { this.setDispatcher(res.data); }, 300);
-                        }
-                    });
-            });
-        }
-    }
-
     downloadNNImanager = () => {
-        const { nniManagerLogStr } = this.state;
-        downFile(nniManagerLogStr, 'nnimanager.log');
+        if (this.state.nniManagerLogStr !== null) {
+            downFile(this.state.nniManagerLogStr, 'nnimanager.log');
+        }
     }
 
     downloadDispatcher = () => {
-        const { dispatcherLogStr } = this.state;
-        downFile(dispatcherLogStr, 'dispatcher.log');
+        if (this.state.dispatcherLogStr !== null) {
+            downFile(this.state.dispatcherLogStr, 'dispatcher.log');
+        }
     }
 
     dispatcherHTML = () => {
         return (
             <div>
                 <span>Dispatcher Log</span>
-                <span className="refresh" onClick={this.getdispatcherLogmessage}>
+                <span className="refresh" onClick={this.manualRefresh}>
                     <Icon type="sync" />
                 </span>
             </div>
@@ -101,37 +60,28 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         return (
             <div>
                 <span>NNImanager Log</span>
-                <span className="refresh" onClick={this.getNNImanagerLogmessage}><Icon type="sync" /></span>
+                <span className="refresh" onClick={this.manualRefresh}><Icon type="sync" /></span>
             </div>
         );
     }
 
-    componentDidMount() {
-        this._isLogDrawer = true;
-        this.getNNImanagerLogmessage();
-        this.getdispatcherLogmessage();
+    setLogDrawerHeight = () => {
+        this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
     }
 
-    componentWillReceiveProps(nextProps: LogDrawerProps) {
-        const { isVisble, activeTab } = nextProps;
-        if (isVisble === true) {
-            if (activeTab === 'nnimanager') {
-                this.getNNImanagerLogmessage();
-            }
-            if (activeTab === 'dispatcher') {
-                this.getdispatcherLogmessage();
-            }
-        }
+    async componentDidMount() {
+        this.refresh();
+        window.addEventListener('resize', this.setLogDrawerHeight);
     }
 
     componentWillUnmount() {
-        this._isLogDrawer = false;
+        window.clearTimeout(this.timerId);
+        window.removeEventListener('resize', this.setLogDrawerHeight);
     }
 
     render() {
-        const { isVisble, closeDrawer, activeTab } = this.props;
-        const { nniManagerLogStr, dispatcherLogStr, isLoadispatcher, isLoading } = this.state;
-        const heights: number = window.innerHeight - 48; // padding top and bottom
+        const { closeDrawer, activeTab } = this.props;
+        const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
         return (
             <Row>
                 <Drawer
@@ -139,18 +89,26 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     closable={false}
                     destroyOnClose={true}
                     onClose={closeDrawer}
-                    visible={isVisble}
+                    visible={true}
                     width="76%"
-                    height={heights}
+                    height={logDrawerHeight}
                 // className="logDrawer"
                 >
-                    <div className="card-container log-tab-body" style={{ height: heights }}>
-                        <Tabs type="card" defaultActiveKey={activeTab} style={{ height: heights + 19 }}>
+                    <div className="card-container log-tab-body">
+                        <Tabs
+                            type="card"
+                            defaultActiveKey={activeTab}
+                            style={{ height: logDrawerHeight, minHeight: 190 }}
+                        >
                             {/* <Tabs type="card" onTabClick={this.selectwhichLog} defaultActiveKey={activeTab}> */}
                             {/* <TabPane tab="Dispatcher Log" key="dispatcher"> */}
                             <TabPane tab={this.dispatcherHTML()} key="dispatcher">
                                 <div>
-                                    <MonacoHTML content={dispatcherLogStr} loading={isLoadispatcher} />
+                                    <MonacoHTML
+                                        content={dispatcherLogStr || 'Loading...'}
+                                        loading={isLoading}
+                                        height={logDrawerHeight - 104}
+                                    />
                                 </div>
                                 <Row className="buttons">
                                     <Col span={12} className="download">
@@ -174,7 +132,11 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                             <TabPane tab={this.nnimanagerHTML()} key="nnimanager">
                                 {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
                                 <div>
-                                    <MonacoHTML content={nniManagerLogStr} loading={isLoading} />
+                                    <MonacoHTML
+                                        content={nniManagerLogStr || 'Loading...'}
+                                        loading={isLoading}
+                                        height={logDrawerHeight - 104}
+                                    />
                                 </div>
                                 <Row className="buttons">
                                     <Col span={12} className="download">
@@ -201,6 +163,31 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
             </Row>
         );
     }
+
+    private refresh = () => {
+        window.clearTimeout(this.timerId);
+        const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
+        const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
+        dispatcherPromise.then(res => {
+            if (res.status === 200) {
+                this.setState({ dispatcherLogStr: res.data });
+            }
+        });
+        nniManagerPromise.then(res => {
+            if (res.status === 200) {
+                this.setState({ nniManagerLogStr: res.data });
+            }
+        });
+        Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
+            this.setState({ isLoading: false });
+            this.timerId = window.setTimeout(this.refresh, 300);
+        });
+    }
+
+    private manualRefresh = () => {
+        this.setState({ isLoading: true });
+        this.refresh();
+    }
 }
 
 export default LogDrawer;

src/webui/src/components/SlideBar.tsx

@@ -214,7 +214,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                             type="ghost"
                         >
                             <a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
-                                <Icon type="question" /><span>Help</span>
+                                <img
+                                    src={require('../static/img/icon/ques.png')}
+                                    alt="question"
+                                    className="question"
+                                />
+                                <span>Help</span>
                             </a>
                         </Button>
                     </span>
@@ -329,8 +334,8 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
 
     render() {
         const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>);
-        const tablet = (<MediaQuery minWidth={885} maxWidth={1241}>{this.tabeltHTML()}</MediaQuery>);
-        const desktop = (<MediaQuery minWidth={1242}>{this.desktopHTML()}</MediaQuery>);
+        const tablet = (<MediaQuery minWidth={885} maxWidth={1281}>{this.tabeltHTML()}</MediaQuery>);
+        const desktop = (<MediaQuery minWidth={1282}>{this.desktopHTML()}</MediaQuery>);
         const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state;
         return (
             <div>
@@ -338,11 +343,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                 {tablet}
                 {desktop}
                 {/* the drawer for dispatcher & nnimanager log message */}
-                <LogDrawer
-                    isVisble={isvisibleLogDrawer}
-                    closeDrawer={this.closeLogDrawer}
-                    activeTab={activeKey}
-                />
+                {isvisibleLogDrawer ? (
+                    <LogDrawer
+                        closeDrawer={this.closeLogDrawer}
+                        activeTab={activeKey}
+                    />
+                ) : null}
                 <ExperimentDrawer
                     isVisble={isvisibleExperimentDrawer}
                     closeExpDrawer={this.closeExpDrawer}

src/webui/src/components/TrialsDetail.tsx

@@ -100,10 +100,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         this.setState({ whichGraph: activeKey });
     }
 
-    test = () => {
-        alert('TableList component was not properly initialized.');
-    }
-
     updateSearchFilterType = (value: string) => {
         // clear input value and re-render table
         if (this.searchInput !== null) {
@@ -167,14 +163,14 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     <Col span={14} className="right">
                         <Button
                             className="common"
-                            onClick={this.tableList ? this.tableList.addColumn : this.test}
+                            onClick={() => { if (this.tableList) { this.tableList.addColumn(); }}}
                         >
                             Add column
                         </Button>
                         <Button
                             className="mediateBtn common"
                             // use child-component tableList's function, the function is in child-component.
-                            onClick={this.tableList ? this.tableList.compareBtn : this.test}
+                            onClick={() => { if (this.tableList) { this.tableList.compareBtn(); }}}
                         >
                             Compare
                         </Button>

src/webui/src/components/overview/Progress.tsx

@@ -184,11 +184,12 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                     </Col>
                 </Row>
                 {/* learn about click -> default active key is dispatcher. */}
-                <LogDrawer
-                    isVisble={isShowLogDrawer}
-                    closeDrawer={this.closeDrawer}
-                    activeTab="dispatcher"
-                />
+                {isShowLogDrawer ? (
+                    <LogDrawer
+                        closeDrawer={this.closeDrawer}
+                        activeTab="dispatcher"
+                    />
+                ) : null}
             </Row>
         );
     }

src/webui/src/components/public-child/MonacoEditor.tsx

@@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor';
 interface MonacoEditorProps {
     content: string;
     loading: boolean;
+    height: number;
 }
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
@@ -25,18 +26,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
     }
 
     render() {
-        const { content, loading } = this.props;
-        const heights: number = window.innerHeight - 48;
+        const { content, loading, height } = this.props;
         return (
             <div className="just-for-log">
                 <Spin
                     // tip="Loading..."
-                    style={{ width: '100%', height: heights * 0.9 }}
+                    style={{ width: '100%', height: height }}
                     spinning={loading}
                 >
                     <MonacoEditor
                         width="100%"
-                        height={heights * 0.9}
+                        height={height}
                         language="json"
                         value={content}
                         options={DRAWEROPTION}

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

@@ -135,17 +135,17 @@ function generateScatterSeries(trials: Trial[]) {
 
 function generateBestCurveSeries(trials: Trial[]) {
     let best = trials[0];
-    const data = [[ best.sequenceId, best.accuracy, best.info.hyperParameters ]];
+    const data = [[ best.sequenceId, best.accuracy, best.description.parameters ]];
 
     for (let i = 1; i < trials.length; i++) {
         const trial = trials[i];
         const delta = trial.accuracy! - best.accuracy!;
         const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
         if (better) {
-            data.push([ trial.sequenceId, trial.accuracy, trial.info.hyperParameters ]);
+            data.push([ trial.sequenceId, trial.accuracy, trial.description.parameters ]);
             best = trial;
         } else {
-            data.push([ trial.sequenceId, best.accuracy, trial.info.hyperParameters ]);
+            data.push([ trial.sequenceId, best.accuracy, trial.description.parameters ]);
         }
     }
 

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

@@ -262,16 +262,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             <div>
                 {/* style in para.scss */}
                 <Row className="meline intermediate">
-                    {/* filter message */}
-                    <span>Filter</span>
-                    <Switch
-                        defaultChecked={false}
-                        onChange={this.switchTurn}
-                    />
                     {
                         isFilter
                             ?
-                            <span>
+                            <span style={{marginRight: 15}}>
                                 <span className="filter-x"># Intermediate result</span>
                                 <input
                                     // placeholder="point"
@@ -300,6 +294,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             :
                             null
                     }
+                    {/* filter message */}
+                    <span>Filter</span>
+                    <Switch
+                        defaultChecked={false}
+                        onChange={this.switchTurn}
+                    />
                 </Row>
                 <Row className="intermediate-graph">
                     <ReactEcharts

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

@@ -251,13 +251,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
         const showColumn: Array<object> = [];
 
         // parameter as table column
-        const trialMess = TRIALS.getTrial(tableSource[0].id);
-        const trial = trialMess.description.parameters;
-        const parameterColumn: Array<string> = Object.keys(trial);
         const parameterStr: Array<string> = [];
-        parameterColumn.forEach(value => {
-            parameterStr.push(`${value} (search space)`);
-        });
+        if (tableSource.length > 0) {
+            const trialMess = TRIALS.getTrial(tableSource[0].id);
+            const trial = trialMess.description.parameters;
+            const parameterColumn: Array<string> = Object.keys(trial);
+            parameterColumn.forEach(value => {
+                parameterStr.push(`${value} (search space)`);
+            });
+        }
         showTitle = COLUMNPro.concat(parameterStr);
 
         // only succeed trials have final keys
@@ -330,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                         <Icon type="line-chart" />
                                     </Button>
                                     {/* kill job */}
-                                    <Popconfirm
-                                        title="Are you sure to cancel this trial?"
-                                        onConfirm={killJob.
-                                            bind(this, record.key, record.id, record.status)}
-                                    >
-                                        <Button
-                                            type="default"
-                                            disabled={flag}
-                                            className="margin-mediate special"
-                                            title="kill"
-                                        >
-                                            <Icon type="stop" />
-                                        </Button>
-                                    </Popconfirm>
+                                    {
+                                        flag
+                                            ?
+                                            <Button
+                                                type="default"
+                                                disabled={true}
+                                                className="margin-mediate special"
+                                                title="kill"
+                                            >
+                                                <Icon type="stop" />
+                                            </Button>
+                                            :
+                                            <Popconfirm
+                                                title="Are you sure to cancel this trial?"
+                                                okText="Yes"
+                                                cancelText="No"
+                                                onConfirm={killJob.
+                                                    bind(this, record.key, record.id, record.status)}
+                                            >
+                                                <Button
+                                                    type="default"
+                                                    disabled={false}
+                                                    className="margin-mediate special"
+                                                    title="kill"
+                                                >
+                                                    <Icon type="stop" />
+                                                </Button>
+                                            </Popconfirm>
+                                    }
                                 </Row>
                             );
                         },

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

@@ -43,7 +43,7 @@ class Trial implements TableObj {
     }
 
     get sortable(): boolean {
-        return this.finalAcc !== undefined && !isNaN(this.finalAcc);
+        return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
     }
 
     /* table obj start */
@@ -132,7 +132,7 @@ class Trial implements TableObj {
     /* table obj end */
 
     public initialized(): boolean {
-        return !!(this.infoField && this.metricsInitialized);
+        return Boolean(this.infoField);
     }
 
     public updateMetrics(metrics: MetricDataRecord[]): boolean {

src/webui/src/static/style/button.scss

@@ -6,7 +6,7 @@ Button.tableButton{
     border-color: $btnBgcolor;
     height: 26px;
     font-size: 14px;
-    margin-top: 2px;
+    margin-top: 4px;
     border-radius: 0;
 }
 

src/webui/src/static/style/logDrawer.scss

@@ -25,8 +25,9 @@
   height: 100%;
 }
 
+/* log drawer download & close button's row */
 .buttons{
-  margin-top: 11px;
+  margin-top: 16px;
   .close{
     text-align: right;
   }

src/webui/src/static/style/slideBar.scss

@@ -21,7 +21,7 @@ $drowHoverBgColor: #e2e2e2;
     padding-bottom: 14px;
     .down-icon{
         font-size: 20px !important;
-        padding-right: 2px;
+        padding-right: 6px;
     }
 }
 
@@ -186,6 +186,11 @@ $drowHoverBgColor: #e2e2e2;
             width: 20px;
             margin-right: 8px;
         }
+        /* ? icon style */
+        .question{
+            width: 14px;
+            margin-right: 4px;
+        }
         .feedback{
             font-size: 16px;
             margin: 0 20px;

src/webui/src/static/style/trialsDetail.scss

@@ -15,10 +15,12 @@
     .ant-tabs-tab-active{
         .panelTitle{
             background-color: #999;
+            /*
             span{
                 color: #fff;
                 font-weight: normal;
             }
+            */
         }
     }
     .panelTitle{

tools/nni_cmd/command_utils.py

@@ -3,10 +3,11 @@ import sys
 import os
 import signal
 import psutil
-from .common_utils import  print_error, print_normal, print_warning
+from .common_utils import print_error, print_normal, print_warning
+
 
 def check_output_command(file_path, head=None, tail=None):
-    '''call check_output command to read content from a file'''
+    """call check_output command to read content from a file"""
     if os.path.exists(file_path):
         if sys.platform == 'win32':
             cmds = ['powershell.exe', 'type', file_path]
@@ -26,8 +27,9 @@ def check_output_command(file_path, head=None, tail=None):
         print_error('{0} does not exist!'.format(file_path))
         exit(1)
 
+
 def kill_command(pid):
-    '''kill command'''
+    """kill command"""
     if sys.platform == 'win32':
         process = psutil.Process(pid=pid)
         process.send_signal(signal.CTRL_BREAK_EVENT)
@@ -35,21 +37,35 @@ def kill_command(pid):
         cmds = ['kill', str(pid)]
         call(cmds)
 
+
 def install_package_command(package_name):
-    '''install python package from pip'''
-    #TODO refactor python logic
-    if sys.platform == "win32":
-        cmds = 'python -m pip install --user {0}'.format(package_name)
-    else:
-        cmds = 'python3 -m pip install --user {0}'.format(package_name)
-    call(cmds, shell=True)
+    """
+    Install python package from pip.
+
+    Parameters
+    ----------
+    package_name: str
+        The name of package to be installed.
+    """
+    call(_get_pip_install() + [package_name], shell=False)
+
 
 def install_requirements_command(requirements_path):
-    '''install requirements.txt'''
-    cmds = 'cd ' + requirements_path + ' && {0} -m pip install --user -r requirements.txt'
-    #TODO refactor python logic
-    if sys.platform == "win32":
-        cmds = cmds.format('python')
-    else:
-        cmds = cmds.format('python3')
-    call(cmds, shell=True)
+    """
+    Install packages from `requirements.txt` in `requirements_path`.
+
+    Parameters
+    ----------
+    requirements_path: str
+        Path to the directory that contains `requirements.txt`.
+    """
+    call(_get_pip_install() + ["-r", os.path.join(requirements_path, "requirements.txt")], shell=False)
+
+
+def _get_pip_install():
+    python = "python" if sys.platform == "win32" else "python3"
+    ret = [python, "-m", "pip", "install"]
+    if "CONDA_DEFAULT_ENV" not in os.environ and "VIRTUAL_ENV" not in os.environ and \
+            (sys.platform != "win32" and os.getuid() != 0):  # on unix and not running in root
+        ret.append("--user")  # not in virtualenv or conda
+    return ret