Merge pull request microsoft#190 from microsoft/master

merge master

src/sdk/pynni/nni/bohb_advisor/requirements.txt

@@ -1,2 +1,2 @@
 ConfigSpace==0.4.7
-statsmodels==0.9.0
+statsmodels==0.10.0

src/webui/src/App.css

@@ -1,4 +1,5 @@
 .nni{
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: #212121;
   font-size: 14px;
   background: #f2f2f2;

src/webui/src/components/Modal/ExperimentDrawer.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import axios from 'axios';
+import { downFile } from '../../static/function';
+import { Drawer, Tabs, Row, Col, Button } from 'antd';
+import { MANAGER_IP, DRAWEROPTION } from '../../static/const';
+import MonacoEditor from 'react-monaco-editor';
+const { TabPane } = Tabs;
+import '../../static/style/logDrawer.scss';
+
+interface ExpDrawerProps {
+    isVisble: boolean;
+    closeExpDrawer: () => void;
+}
+
+interface ExpDrawerState {
+    experiment: string;
+}
+
+class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
+
+    public _isCompareMount: boolean;
+    constructor(props: ExpDrawerProps) {
+        super(props);
+
+        this.state = {
+            experiment: ''
+        };
+    }
+
+    getExperimentContent = () => {
+        axios
+            .all([
+                axios.get(`${MANAGER_IP}/experiment`),
+                axios.get(`${MANAGER_IP}/trial-jobs`),
+                axios.get(`${MANAGER_IP}/metric-data`)
+            ])
+            .then(axios.spread((res, res1, res2) => {
+                if (res.status === 200 && res1.status === 200 && res2.status === 200) {
+                    if (res.data.params.searchSpace) {
+                        res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
+                    }
+                    let trialMessagesArr = res1.data;
+                    const interResultList = res2.data;
+                    Object.keys(trialMessagesArr).map(item => {
+                        // transform hyperparameters as object to show elegantly
+                        trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters);
+                        const trialId = trialMessagesArr[item].id;
+                        // add intermediate result message
+                        trialMessagesArr[item].intermediate = [];
+                        Object.keys(interResultList).map(key => {
+                            const interId = interResultList[key].trialJobId;
+                            if (trialId === interId) {
+                                trialMessagesArr[item].intermediate.push(interResultList[key]);
+                            }
+                        });
+                    });
+                    const result = {
+                        experimentParameters: res.data,
+                        trialMessage: trialMessagesArr
+                    };
+                    if (this._isCompareMount === true) {
+                        this.setState(() => ({ experiment: JSON.stringify(result, null, 4) }));
+                    }
+                }
+            }));
+    }
+
+    downExperimentParameters = () => {
+        const { experiment } = this.state;
+        downFile(experiment, 'experiment.json');
+    }
+
+    componentDidMount() {
+        this._isCompareMount = true;
+        this.getExperimentContent();
+    }
+
+    componentWillReceiveProps(nextProps: ExpDrawerProps) {
+        const { isVisble } = nextProps;
+        if (isVisble === true) {
+            this.getExperimentContent();
+        }
+    }
+
+    componentWillUnmount() {
+        this._isCompareMount = false;
+    }
+
+    render() {
+        const { isVisble, closeExpDrawer } = this.props;
+        const { experiment } = this.state;
+        const heights: number = window.innerHeight - 48;
+        return (
+            <Row className="logDrawer">
+                <Drawer
+                    // title="Log Message"
+                    placement="right"
+                    closable={false}
+                    destroyOnClose={true}
+                    onClose={closeExpDrawer}
+                    visible={isVisble}
+                    width="54%"
+                    height={heights}
+                >
+                    <div className="card-container log-tab-body" style={{ height: heights }}>
+                        <Tabs type="card">
+                            <TabPane tab="Experiment Parameters" key="Experiment">
+                                <div className="just-for-log">
+                                    <MonacoEditor
+                                        width="100%"
+                                        height={heights * 0.9}
+                                        language="json"
+                                        value={experiment}
+                                        options={DRAWEROPTION}
+                                    />
+                                </div>
+                                <Row className="buttons">
+                                    <Col span={12}>
+                                        <Button
+                                            type="primary"
+                                            onClick={this.downExperimentParameters}
+                                        >
+                                            Download
+                                        </Button>
+                                    </Col>
+                                    <Col span={12} className="close">
+                                        <Button
+                                            type="default"
+                                            onClick={closeExpDrawer}
+                                        >
+                                            Close
+                                        </Button>
+                                    </Col>
+                                </Row>
+                            </TabPane>
+                        </Tabs>
+                    </div>
+                </Drawer>
+            </Row>
+        );
+    }
+}
+
+export default ExperimentDrawer;

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

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import axios from 'axios';
+import { Drawer, Tabs, Row, Col, Button, Icon } from 'antd';
+import { DOWNLOAD_IP } from '../../static/const';
+import { downFile } from '../../static/function';
+const { TabPane } = Tabs;
+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;
+    isLoading: boolean;
+    isLoadispatcher: boolean;
+}
+
+class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
+
+    public _isLogDrawer: boolean;
+    constructor(props: LogDrawerProps) {
+        super(props);
+
+        this.state = {
+            nniManagerLogStr: 'nnimanager',
+            dispatcherLogStr: 'dispatcher',
+            isLoading: false,
+            isLoadispatcher: false
+        };
+    }
+
+    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');
+    }
+
+    downloadDispatcher = () => {
+        const { dispatcherLogStr } = this.state;
+        downFile(dispatcherLogStr, 'dispatcher.log');
+    }
+
+    dispatcherHTML = () => {
+        return (
+            <div>
+                <span>Dispatcher Log</span>
+                <span className="refresh" onClick={this.getdispatcherLogmessage}>
+                    <Icon type="sync" />
+                </span>
+            </div>
+        );
+    }
+
+    nnimanagerHTML = () => {
+        return (
+            <div>
+                <span>NNImanager Log</span>
+                <span className="refresh" onClick={this.getNNImanagerLogmessage}><Icon type="sync" /></span>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this._isLogDrawer = true;
+        this.getNNImanagerLogmessage();
+        this.getdispatcherLogmessage();
+    }
+
+    componentWillReceiveProps(nextProps: LogDrawerProps) {
+        const { isVisble, activeTab } = nextProps;
+        if (isVisble === true) {
+            if (activeTab === 'nnimanager') {
+                this.getNNImanagerLogmessage();
+            }
+            if (activeTab === 'dispatcher') {
+                this.getdispatcherLogmessage();
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this._isLogDrawer = false;
+    }
+
+    render() {
+        const { isVisble, closeDrawer, activeTab } = this.props;
+        const { nniManagerLogStr, dispatcherLogStr, isLoadispatcher, isLoading } = this.state;
+        const heights: number = window.innerHeight - 48; // padding top and bottom
+        return (
+            <Row>
+                <Drawer
+                    placement="right"
+                    closable={false}
+                    destroyOnClose={true}
+                    onClose={closeDrawer}
+                    visible={isVisble}
+                    width="76%"
+                    height={heights}
+                    // className="logDrawer"
+                >
+                    <div className="card-container log-tab-body" style={{ height: heights }}>
+                        <Tabs type="card" defaultActiveKey={activeTab}>
+                            {/* <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} />
+                                </div>
+                                <Row className="buttons">
+                                    <Col span={12}>
+                                        <Button
+                                            type="primary"
+                                            onClick={this.downloadDispatcher}
+                                        >
+                                            Download
+                                        </Button>
+                                    </Col>
+                                    <Col span={12} className="close">
+                                        <Button
+                                            type="default"
+                                            onClick={closeDrawer}
+                                        >
+                                            Close
+                                        </Button>
+                                    </Col>
+                                </Row>
+                            </TabPane>
+                            <TabPane tab={this.nnimanagerHTML()} key="nnimanager">
+                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
+                                <div>
+                                    <MonacoHTML content={nniManagerLogStr} loading={isLoading} />
+                                </div>
+                                <Row className="buttons">
+                                    <Col span={12} className="download">
+                                        <Button
+                                            type="primary"
+                                            onClick={this.downloadNNImanager}
+                                        >
+                                            Download
+                                        </Button>
+                                    </Col>
+                                    <Col span={12} className="close">
+                                        <Button
+                                            type="default"
+                                            onClick={closeDrawer}
+                                        >
+                                            Close
+                                        </Button>
+                                    </Col>
+                                </Row>
+                            </TabPane>
+                        </Tabs>
+                    </div>
+                </Drawer>
+            </Row>
+        );
+    }
+}
+
+export default LogDrawer;