Add error message when experiment's status is error (#338)

* Add error message when experiment error

* delete unuseful code

* Fix bug of bgcolor when experiment status is running

src/webui/src/components/Overview.tsx

@@ -20,10 +20,11 @@ require('../static/style/accuracy.css');
 require('../static/style/table.scss');
 require('../static/style/overviewTitle.scss');
 
-interface SessionState {
+interface OverviewState {
     tableData: Array<TableObj>;
     searchSpace: object;
     status: string;
+    errorStr: string;
     trialProfile: Experiment;
     option: object;
     noData: string;
@@ -34,7 +35,7 @@ interface SessionState {
     downBool: boolean;
 }
 
-class Overview extends React.Component<{}, SessionState> {
+class Overview extends React.Component<{}, OverviewState> {
 
     public _isMounted = false;
     public intervalID = 0;
@@ -45,6 +46,7 @@ class Overview extends React.Component<{}, SessionState> {
         this.state = {
             searchSpace: {},
             status: '',
+            errorStr: '',
             trialProfile: {
                 id: '',
                 author: '',
@@ -126,8 +128,8 @@ class Overview extends React.Component<{}, SessionState> {
                         switch (key) {
                             case 'loguniform':
                             case 'qloguniform':
-                                const a = Math.pow(10, value[0]);
-                                const b = Math.pow(10, value[1]);
+                                const a = Math.pow(Math.E, value[0]);
+                                const b = Math.pow(Math.E, value[1]);
                                 value = [a, b];
                                 searchSpace[item]._value = value;
                                 break;
@@ -150,17 +152,30 @@ class Overview extends React.Component<{}, SessionState> {
                     }
                 }
             });
+        this.checkStatus();
 
+    }
+
+    checkStatus = () => {
         axios(`${MANAGER_IP}/check-status`, {
             method: 'GET'
         })
             .then(res => {
                 if (res.status === 200 && this._isMounted) {
-                    this.setState({
-                        status: res.data.status
-                    });
+                    const errors = res.data.errors;
+                    if (errors.length !== 0) {
+                        this.setState({
+                            status: res.data.status,
+                            errorStr: res.data.errors[0]
+                        });
+                    } else {
+                        this.setState({
+                            status: res.data.status,
+                        });
+                    }
                 }
             });
+
     }
 
     showTrials = () => {
@@ -396,6 +411,7 @@ class Overview extends React.Component<{}, SessionState> {
             accuracyData,
             accNodata,
             status,
+            errorStr,
             trialNumber,
             bestAccuracy,
             downBool
@@ -414,7 +430,7 @@ class Overview extends React.Component<{}, SessionState> {
                                 onClick={this.downExperimentContent}
                                 disabled={downBool}
                             >
-                                <span>Download</span> 
+                                <span>Download</span>
                                 <img src={require('../static/img/icon/download.png')} alt="icon" />
                             </Button>
                         </Col>
@@ -430,6 +446,7 @@ class Overview extends React.Component<{}, SessionState> {
                             trialProfile={trialProfile}
                             bestAccuracy={bestAccuracy}
                             status={status}
+                            errors={errorStr}
                         />
                     </Col>
                     {/* experiment parameters search space tuner assessor... */}

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

@@ -2,17 +2,20 @@ import * as React from 'react';
 import {
     Row,
     Col,
+    Popover
 } from 'antd';
 import { Experiment, TrialNumber } from '../../static/interface';
 import { convertTime } from '../../static/function';
 import ProgressBar from './ProgressItem';
 import '../../static/style/progress.scss';
+import '../../static/style/probar.scss';
 
 interface ProgressProps {
     trialProfile: Experiment;
     trialNumber: TrialNumber;
     bestAccuracy: string;
     status: string;
+    errors: string;
 }
 
 class Progressed extends React.Component<ProgressProps, {}> {
@@ -24,7 +27,7 @@ class Progressed extends React.Component<ProgressProps, {}> {
     render() {
         const { trialProfile,
             trialNumber, bestAccuracy,
-            status
+            status, errors
         } = this.props;
         // remaining time
         const bar2 = trialNumber.totalCurrentTrial - trialNumber.waitTrial - trialNumber.unknowTrial;
@@ -32,23 +35,49 @@ class Progressed extends React.Component<ProgressProps, {}> {
         const percent = (trialProfile.execDuration / trialProfile.maxDuration) * 100;
         const runDuration = convertTime(trialProfile.execDuration);
         const remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
-
+        let errorContent;
+        if (errors !== '') {
+            errorContent = (
+                <div className="errors">
+                    {errors}
+                </div>
+            );
+        }
         return (
-            <Row className="progress">
+            <Row className="progress" id="barBack">
                 <Row className="basic">
                     <p>Status</p>
-                    <div className="status">{status}</div>
+                    <div className="status">
+                        <span className={status}>{status}</span>
+                        {
+                            status === 'ERROR'
+                                ?
+                                <Popover
+                                    placement="rightTop"
+                                    content={errorContent}
+                                    title="Error"
+                                    trigger="hover"
+                                >
+                                    <span className="errorBtn">i</span>
+                                </Popover>
+                                :
+                                <span />
+                        }
+
+                    </div>
                 </Row>
                 <ProgressBar
                     who="Duration"
                     percent={percent}
                     description={runDuration}
+                    bgclass={status}
                     maxString={`MaxDuration: ${convertTime(trialProfile.maxDuration)}`}
                 />
                 <ProgressBar
                     who="TrialNum"
                     percent={bar2Percent}
                     description={bar2.toString()}
+                    bgclass={status}
                     maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
                 />
                 <Row className="basic colorOfbasic mess">

src/webui/src/components/overview/ProgressItem.tsx

@@ -6,6 +6,7 @@ interface ProItemProps {
     percent: number;
     description: string;
     maxString: string;
+    bgclass: string;
 }
 
 class ProgressBar extends React.Component<ProItemProps, {}> {
@@ -16,11 +17,11 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
     }
 
     render() {
-        const { who, percent, description, maxString  } = this.props;
+        const { who, percent, description, maxString, bgclass } = this.props;
 
         return (
             <div>
-                <Row className="probar">
+                <Row className={`probar ${bgclass}`}>
                         <Col span={6}>
                             <div className="name">{who}</div>
                         </Col>
@@ -34,8 +35,8 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
                                 />
                             </div>
                             <Row className="description">
-                                <Col span={12}>0</Col>
-                                <Col className="right" span={12}>{maxString}</Col>
+                                <Col span={9}>0</Col>
+                                <Col className="right" span={15}>{maxString}</Col>
                             </Row>
                         </Col>
                     </Row>

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

@@ -2,7 +2,6 @@ Button.changeBtu, Button.changeBtu:hover, Button.changeBtu:focus{
     background-color: #3c8dbc;
     border-color: #3c8dbc;
     line-height: 30px;
-    font-size: 16px;
 }
 
 Button.tableButton{

src/webui/src/static/style/overview.scss

@@ -60,15 +60,15 @@
         border: 1px solid #fff;
         border-radius: 0;
         margin-top: 4px;
+        background-color: #0071BC;
 
         span{
             font-family: 'Segoe';
-            font-size: 16px;
-            line-height: 30px;
+            font-size: 14px;
         }
         
         img{
-            height: 16px;
+            height: 14px;
             margin-left: 10px;
             margin-top: -6px;
         }

src/webui/src/static/style/probar.scss

+#barBack{
+    /* status: 'INITIALIZED' | 'EXPERIMENT_RUNNING' | 'ERROR' | 'STOPPING' | 'STOPPED' | 'DONE' */
+    .EXPERIMENT_RUNNING, .STOPPING, .INITIALIZED{
+        /* specific status color */
+        color: #0071bc;
+        .ant-progress-bg {
+            background-color: #0071bc;
+        }
+        .ant-progress-text{
+            color: #0071bc;
+        }
+    }
+    .DONE, .STOPPED{
+        color: #009245;
+        .ant-progress-bg {
+            background-color: #009245;
+        }
+        .ant-progress-text{
+            color: #009245;
+        }
+    }
+    .ERROR{
+        color: #eb0716;
+        .ant-progress-bg {
+            background-color: #eb0716;
+        }
+        .ant-progress-text{
+            color: #eb0716;
+        }
+
+    }
+    .ant-progress-bg{
+        border-radius: 0 !important;
+    }
+    .ant-progress-status-success .ant-progress-bg{
+        border-radius: 0 12px 12px 0 !important;
+    }
+}
+
+.errorBtn{
+    margin-left: 15px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    font-size: 14px;
+    border: 1px solid #4d4d4d;
+    border-radius: 50%;
+    background-color: #4d4d4d;
+    color: #fff;
+}
+.errorBtn:hover{
+    cursor: pointer;
+}
+
+.errors{
+    width: 240px;
+    font-size: 14px;
+    color: #212121;
+}

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

@@ -17,14 +17,6 @@
             border: 2px solid #e6e6e6;
             border-radius: 0 12px 12px 0 !important;
         }
-        .ant-progress-bg {
-            border-radius: 0 !important;
-        }
-        .ant-progress-status-success .ant-progress-bg{
-            border-radius: 0 12px 12px 0 !important;
-            color: #009245;
-            background-color: #009245;
-        }
         .name{
             height: 34px;
             line-height: 30px;
@@ -43,6 +35,7 @@
             width: 100%;
             line-height: 24px;
             font-size: 12px;
+            color: #212121;
             .right{
                 text-align: right;
             }

src/webui/src/static/style/trialStatus.scss

-.hyper{
-    width: 98%;
-    margin: 30px auto;
-}
-.rungraph{
-    width: 100%;
-}
-
-pre.hyperpar{
-    text-align: left;
-}
-.tables{
-    width: 100%;
-}
-
-/* the position of the pagination */
-.ant-table-pagination.ant-pagination{
-    margin: 16px 0;
-    float: right;
-    margin-right: 30px; 
-}
-Button.tableButton{
-    background:	#3c8dbc;
-    border-color: #3c8dbc;
-    height: 28px;
-    line-height: 28px;
-    /* padding: 3px 4px; */
-}
-
-.hyperpar ul, .hyperpar ul li{
-    background: none !important;
-}
-/* kill btn style: delete its own hover style */
-/* after button click the color not change */
-Button.tableButton:hover, Button.tableButton:focus{
-    background-color: #3c8dbc;
-    border-color: #3c8dbc;
-}
-.ant-modal-title{
-    font-size: 20px;
-}
-
-
-