[WebUI] Show trial log for pai and k8s (#580)

* [WebUI] Show trial log for pai and k8s

* fix lint

* Fix comments

src/webui/src/App.css

@@ -17,12 +17,17 @@
 .headerCon{
   min-width: 1024px;
 }
+.contentBox{
+  width: 100%;
+  background: #f2f2f2;
+}
 .content{
   width: 86%;
   min-width: 1024px;
   margin: 0 auto;
   margin-top: 74px;
   margin-bottom: 30px;
+  background: #fff;
 }
 
 

src/webui/src/App.tsx

@@ -6,16 +6,18 @@ import SlideBar from './components/SlideBar';
 class App extends React.Component<{}, {}> {
   render() {
     return (
-      <Row className="nni">
+      <Row className="nni" style={{minHeight: window.innerHeight}}>
         <Row className="header">
           <Col span={1} />
-          <Col className="headerCon" span={22}> 
+          <Col className="headerCon" span={22}>
             <SlideBar />
           </Col>
-          <Col span={1}/>
+          <Col span={1} />
         </Row>
-        <Row className="content">
+        <Row className="contentBox">
+          <Row className="content">
             {this.props.children}
+          </Row>
         </Row>
       </Row>
     );

src/webui/src/components/Overview.tsx

@@ -215,6 +215,7 @@ class Overview extends React.Component<{}, OverviewState> {
 
                             case 'USER_CANCELED':
                             case 'SYS_CANCELED':
+                            case 'EARLY_STOPPED':
                                 profile.stopTrial += 1;
                                 break;
                             case 'SUCCEEDED':
@@ -461,7 +462,10 @@ class Overview extends React.Component<{}, OverviewState> {
                         </Row>
                     </Col>
                     <Col span={16} id="succeTable">
-                        <SuccessTable tableSource={tableData} />
+                        <SuccessTable
+                            tableSource={tableData}
+                            trainingPlatform={trialProfile.trainingServicePlatform}
+                        />
                     </Col>
                 </Row>
             </div>

src/webui/src/components/TrialsDetail.tsx

@@ -21,6 +21,7 @@ interface TrialDetailState {
     isHasSearch: boolean;
     experimentStatus: string;
     entriesTable: number;
+    experimentPlatform: string;
 }
 
 class TrialsDetail extends React.Component<{}, TrialDetailState> {
@@ -43,6 +44,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             experimentStatus: '',
             entriesTable: 20,
             isHasSearch: false,
+            experimentPlatform: ''
         };
     }
     // trial accuracy graph
@@ -370,13 +372,34 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         alert('TableList component was not properly initialized.');
     }
 
+    checkExperimentPlatform = () => {
+        axios(`${MANAGER_IP}/experiment`, {
+            method: 'GET'
+        })
+            .then(res => {
+                if (res.status === 200) {
+                    const trainingPlatform = res.data.params.trainingServicePlatform !== undefined
+                    ?
+                    res.data.params.trainingServicePlatform
+                    :
+                    '';
+                    if (this._isMounted) {
+                        this.setState({
+                            experimentPlatform: trainingPlatform
+                        });
+                    }
+                }
+            });
+    }
+
     componentDidMount() {
 
         this._isMounted = true;
         this.drawTableList();
         this.drawPointGraph();
         this.interTableList = window.setInterval(this.drawTableList, 10000);
         this.interAccuracy = window.setInterval(this.drawPointGraph, 10000);
+        this.checkExperimentPlatform();
     }
 
     componentWillUnmount() {
@@ -386,7 +409,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     }
 
     render() {
-        const { accSource, accNodata, tableListSource, entriesTable, searchResultSource, isHasSearch } = this.state;
+        const { accSource, accNodata, tableListSource, 
+            entriesTable, searchResultSource, isHasSearch,
+            experimentPlatform
+        } = this.state;
         const titleOfacc = (
             <Title1 text="Default Metric" icon="3.png" />
         );
@@ -463,6 +489,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     updateList={this.drawTableList}
                     searchResult={searchResultSource}
                     isHasSearch={isHasSearch}
+                    platform={experimentPlatform}
                     ref={(tabList) => this.tableList = tabList}
                 />
             </div>

src/webui/src/components/logPath/PaiTrialChild.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Row, Button } from 'antd';
+import { DOWNLOAD_IP } from '../../static/const';
+
+interface PaiTrialChildProps {
+    logString: string;
+    id: string;
+    showLogModal: Function;
+    isdisLogbtn?: boolean;
+}
+
+class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
+
+    constructor(props: PaiTrialChildProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { logString, id, showLogModal, isdisLogbtn } = this.props;
+        return (
+            <div>
+                {
+                    logString === ''
+                        ?
+                        <div />
+                        :
+                        <Row>
+                            <Row>
+                                <a
+                                    target="_blank"
+                                    href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                    style={{ marginRight: 10 }}
+                                >
+                                    trial stdout
+                                </a>
+                            </Row>
+                            <Row>
+                                <Button
+                                    disabled={isdisLogbtn}
+                                    type="primary"
+                                    className="tableButton"
+                                    onClick={showLogModal.bind(this, id)}
+                                >
+                                    View
+                                </Button>
+                            </Row>
+                        </Row>
+                }
+            </div>
+        );
+    }
+}
+
+export default PaiTrialChild;

src/webui/src/components/logPath/PaiTrialLog.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Row, Button } from 'antd';
+import { DOWNLOAD_IP } from '../../static/const';
+import PaiTrialChild from './PaiTrialChild';
+
+interface PaitrialLogProps {
+    logStr: string;
+    id: string;
+    showLogModal: Function;
+    trialStatus?: string;
+    isdisLogbutton?: boolean;
+}
+
+class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
+
+    constructor(props: PaitrialLogProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { logStr, id, showLogModal, 
+            isdisLogbutton 
+        } = this.props;
+        const isTwopath = logStr.indexOf(',') !== -1
+            ?
+            true
+            :
+            false;
+        return (
+            <div>
+                <div>
+                    {
+                        isTwopath
+                            ?
+                            <Row>
+                                <Row>
+                                    <a
+                                        target="_blank"
+                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        trial stdout
+                                    </a>
+                                    <a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
+                                </Row>
+                                <Row>
+                                    <Button
+                                        disabled={isdisLogbutton}
+                                        type="primary"
+                                        className="tableButton"
+                                        onClick={showLogModal.bind(this, id)}
+                                    >
+                                        View
+                                    </Button>
+                                </Row>
+                            </Row>
+                            :
+                            <PaiTrialChild
+                                logString={logStr}
+                                id={id}
+                                showLogModal={showLogModal}
+                                isdisLogbtn={isdisLogbutton}
+                            />
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PaitrialLog;

src/webui/src/components/logPath/TrialLog.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import LogPathChild from './LogPathChild';
+
+interface TrialLogProps {
+    logStr: string;
+    id: string;
+}
+
+class TrialLog extends React.Component<TrialLogProps, {}> {
+
+    constructor(props: TrialLogProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { logStr } = this.props;
+
+        return (
+            <div>
+                <LogPathChild
+                    eachLogpath={logStr}
+                    logName="LogPath:"
+                />
+            </div>
+        );
+    }
+}
+
+export default TrialLog;