Add download button (#332)

src/webui/src/components/Overview.tsx

 import * as React from 'react';
 import axios from 'axios';
-import { Row, Col } from 'antd';
+import { Row, Col, Button } from 'antd';
 import { MANAGER_IP } from '../static/const';
 import {
     Experiment, TableObj,
@@ -31,6 +31,7 @@ interface SessionState {
     bestAccuracy: string;
     accNodata: string;
     trialNumber: TrialNumber;
+    downBool: boolean;
 }
 
 class Overview extends React.Component<{}, SessionState> {
@@ -81,7 +82,8 @@ class Overview extends React.Component<{}, SessionState> {
                 runTrial: 0,
                 unknowTrial: 0,
                 totalCurrentTrial: 0
-            }
+            },
+            downBool: false
         };
     }
 
@@ -263,6 +265,9 @@ class Overview extends React.Component<{}, SessionState> {
     }
 
     downExperimentContent = () => {
+        this.setState(() => ({
+            downBool: true
+        }));
         axios
             .all([
                 axios.get(`${MANAGER_IP}/experiment`),
@@ -307,6 +312,9 @@ class Overview extends React.Component<{}, SessionState> {
                         eventMouse.initEvent('click', false, false);
                         downTag.dispatchEvent(eventMouse);
                     }
+                    this.setState(() => ({
+                        downBool: false
+                    }));
                 }
             }));
     }
@@ -389,14 +397,28 @@ class Overview extends React.Component<{}, SessionState> {
             accNodata,
             status,
             trialNumber,
-            bestAccuracy
+            bestAccuracy,
+            downBool
         } = this.state;
 
         return (
             <div className="overview">
                 {/* status and experiment block */}
-                <Row className="basicExperiment">
-                    <Title1 text="Experiment" icon="11.png" />
+                <Row>
+                    <Row className="exbgcolor">
+                        <Col span={4}><Title1 text="Experiment" icon="11.png" /></Col>
+                        <Col span={4}>
+                            <Button
+                                type="primary"
+                                className="changeBtu download"
+                                onClick={this.downExperimentContent}
+                                disabled={downBool}
+                            >
+                                <span>Download</span> 
+                                <img src={require('../static/img/icon/download.png')} alt="icon" />
+                            </Button>
+                        </Col>
+                    </Row>
                     <BasicInfo trialProfile={trialProfile} status={status} />
                 </Row>
                 <Row className="overMessage">

src/webui/src/components/overview/BasicInfo.tsx

@@ -52,7 +52,7 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                 </Col>
                 <Col span={8} className="padItem basic">
                     <p>LogPath</p>
-                    <div className="logPath">
+                    <div className="nowrap">
                         <Tooltip placement="top" title={trialProfile.logDir}>
                             {trialProfile.logDir}
                         </Tooltip>

src/webui/src/components/overview/TrialProfile.tsx

@@ -23,7 +23,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
             clusterMetaData: tiralProInfo.clusterMetaData ? tiralProInfo.clusterMetaData : undefined
         });
         return (
-            <div style={{ paddingLeft: 20 }}>
+            <div className="profile">
                 <pre>
                     {JSON.stringify(showProInfo[0], null, 4)}
                 </pre>

src/webui/src/index.css

@@ -49,9 +49,6 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-pre{
-	overflow: hidden;
-}
 @font-face { 
 	font-family: 'Segoe'; 
 	src: url('./static/font/SegoePro-Regular.ttf');

src/webui/src/static/style/logPath.scss

 .logpath{
-    margin-bottom: 10px;
     margin-left: 10px;
 
     .logName{

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

@@ -44,3 +44,36 @@
 .main{
     margin: 9px 0;
 }
+
+.profile{
+    padding: 0 20px;
+    pre{
+        overflow: inherit;
+    }
+}
+
+.exbgcolor {
+    background: #b3b3b3;
+
+    .download{
+        height: 30px;
+        border: 1px solid #fff;
+        border-radius: 0;
+        margin-top: 4px;
+
+        span{
+            font-family: 'Segoe';
+            font-size: 16px;
+            line-height: 30px;
+        }
+        
+        img{
+            height: 16px;
+            margin-left: 10px;
+            margin-top: -6px;
+        }
+    }
+}
+.exbgcolor .download:hover{
+    border: 1px solid #fff;
+}
\ No newline at end of file

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

@@ -74,9 +74,9 @@
 .mess{
     margin: 10px 0;
 }
-
+/*
 .ant-tooltip-inner{
-    white-space: nowrap;
     min-width: 300px;
 }
+*/
 

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

@@ -89,6 +89,8 @@ pre.hyperpar{
     text-align: left;
     line-height: 18px;
     font-size: 14px;
+    overflow: hidden;
+    margin-bottom: 10px;
 }
 
 /* the position of the pagination */

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

-/* status bgcolor */
-/*
-.commonStyle{
-    border-radius: 3px;
-    color: white;
-}
-.RUNNING{
-    padding: 3px 8px; 
-    background: #3c8dbc;
-}
-.FAILED{
-    padding: 3px 24px;
-    background:	#dd4b39;
-}
-.USER_CANCELED{
-    padding: 3px 8px; 
-    background:	#FF4500;
-}
-.SUCCEEDED{
-    padding: 3px 6px;
-    background: #00a65a;
-}
-.UNKNOWN{
-    padding: 3px 15px;
-    background:	#FF8C00;
-}
-.SYS_CANCELED{
-    padding: 3px 24px;
-    background:	red;
-}
-.WAITING{
-    padding: 3px 24px;
-    background:	#008B8B;
-}
-*/
 .RUNNING{
     color: #3c8dbc;
 }