Fix web UI bugs found in bug bash (#1613)

* bugfix

* trigger pipeline

* trigger pipeline

* fix failed trial not shown issue

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

@@ -8,89 +8,46 @@ 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;
 }
 
 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,
         };
     }
 
-    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,36 +58,22 @@ 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();
-    }
-
-    componentWillReceiveProps(nextProps: LogDrawerProps) {
-        const { isVisble, activeTab } = nextProps;
-        if (isVisble === true) {
-            if (activeTab === 'nnimanager') {
-                this.getNNImanagerLogmessage();
-            }
-            if (activeTab === 'dispatcher') {
-                this.getdispatcherLogmessage();
-            }
-        }
+    async componentDidMount() {
+        this.refresh();
     }
 
     componentWillUnmount() {
-        this._isLogDrawer = false;
+        window.clearTimeout(this.timerId);
     }
 
     render() {
-        const { isVisble, closeDrawer, activeTab } = this.props;
-        const { nniManagerLogStr, dispatcherLogStr, isLoadispatcher, isLoading } = this.state;
+        const { closeDrawer, activeTab } = this.props;
+        const { nniManagerLogStr, dispatcherLogStr, isLoading } = this.state;
         const heights: number = window.innerHeight - 48; // padding top and bottom
         return (
             <Row>
@@ -139,7 +82,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     closable={false}
                     destroyOnClose={true}
                     onClose={closeDrawer}
-                    visible={isVisble}
+                    visible={true}
                     width="76%"
                     height={heights}
                 // className="logDrawer"
@@ -150,7 +93,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                             {/* <TabPane tab="Dispatcher Log" key="dispatcher"> */}
                             <TabPane tab={this.dispatcherHTML()} key="dispatcher">
                                 <div>
-                                    <MonacoHTML content={dispatcherLogStr} loading={isLoadispatcher} />
+                                    <MonacoHTML content={dispatcherLogStr || 'Loading...'} loading={isLoading} />
                                 </div>
                                 <Row className="buttons">
                                     <Col span={12} className="download">
@@ -174,7 +117,7 @@ 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} />
                                 </div>
                                 <Row className="buttons">
                                     <Col span={12} className="download">
@@ -201,6 +144,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

@@ -338,11 +338,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                 {tablet}
                 {desktop}
                 {/* the drawer for dispatcher & nnimanager log message */}
+                {isvisibleLogDrawer ? (
                     <LogDrawer
-                    isVisble={isvisibleLogDrawer}
                         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. */}
+                {isShowLogDrawer ? (
                     <LogDrawer
-                    isVisble={isShowLogDrawer}
                         closeDrawer={this.closeDrawer}
                         activeTab="dispatcher"
                     />
+                ) : null}
             </Row>
         );
     }

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 parameterStr: Array<string> = [];
+        if (tableSource.length > 0) {
             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)`);
             });
+        }
         showTitle = COLUMNPro.concat(parameterStr);
 
         // only succeed trials have final keys

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 {