Support to show 2 logPath, add hdfsLogPath (#420)

* Support to show 2 logPath

* fix lint

* Update trial status color

src/nni_manager/training_service/pai/paiJobInfoCollector.ts

@@ -124,7 +124,7 @@ export class PAIJobInfoCollector {
                         }
                         // Set pai trial job's url to WebHDFS output path
                         if(paiTrialJob.hdfsLogPath) {
-                            paiTrialJob.url = paiTrialJob.hdfsLogPath;
+                            paiTrialJob.url += `,${paiTrialJob.hdfsLogPath}`;
                         }
                     }
                 }

src/webui/src/components/Overview.tsx

@@ -225,10 +225,6 @@ class Overview extends React.Component<{}, OverviewState> {
                                 }
                                 if (tableData[item].logPath !== undefined) {
                                     desJobDetail.logPath = tableData[item].logPath;
-                                    const isSessionLink = /^http/gi.test(tableData[item].logPath);
-                                    if (isSessionLink) {
-                                        desJobDetail.isLink = true;
-                                    }
                                 }
                                 topTableData.push({
                                     key: topTableData.length,

src/webui/src/components/TrialsDetail.tsx

@@ -129,8 +129,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
-                            parameters: {},
-                            intermediate: []
+                            parameters: {}
                         };
                         let duration = 0;
                         const id = trialJobs[item].id !== undefined
@@ -155,10 +154,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         }
                         if (trialJobs[item].logPath !== undefined) {
                             desc.logPath = trialJobs[item].logPath;
-                            const isHyperLink = /^http/gi.test(trialJobs[item].logPath);
-                            if (isHyperLink) {
-                                desc.isLink = true;
-                            }
                         }
                         const acc = getFinalResult(trialJobs[item].finalMetricData);
                         trialTable.push({

src/webui/src/components/logPath/LogPath.tsx

+import * as React from 'react';
+import LogPathChild from './LogPathChild';
+
+interface LogpathProps {
+    logStr: string;
+}
+
+class LogPath extends React.Component<LogpathProps, {}> {
+
+    constructor(props: LogpathProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { logStr } = this.props;
+        const isTwopath = logStr.indexOf(',') !== -1
+            ?
+            true
+            :
+            false;
+        return (
+            <div>
+                {
+                    isTwopath
+                        ?
+                        <div>
+                            <LogPathChild
+                                eachLogpath={logStr.split(',')[0]}
+                                logName="LogPath:"
+                            />
+                            <LogPathChild
+                                eachLogpath={logStr.split(',')[1]}
+                                logName="hdfsLogPath:"
+                            />
+                        </div>
+                        :
+                        <LogPathChild
+                            eachLogpath={logStr}
+                            logName="LogPath:"
+                        />
+                }
+            </div>
+        );
+    }
+}
+
+export default LogPath;
\ No newline at end of file

src/webui/src/components/logPath/LogPathChild.tsx

+import * as React from 'react';
+
+interface LogpathChildProps {
+    eachLogpath: string;
+    logName: string;
+}
+
+class LogPathChild extends React.Component<LogpathChildProps, {}> {
+
+    constructor(props: LogpathChildProps) {
+        super(props);
+
+    }
+
+    render() {
+        const { eachLogpath, logName } = this.props;
+        const isLink = /^http/gi.test(eachLogpath);
+
+        return (
+            <div>
+                {
+                    isLink
+                        ?
+                        <div className="logpath">
+                            <span className="logName">{logName}</span>
+                            <a className="logContent logHref" href={eachLogpath} target="_blank">{eachLogpath}</a>
+                        </div>
+                        :
+                        <div className="logpath">
+                            <span className="logName">{logName}</span>
+                            <span className="logContent">{eachLogpath}</span>
+                        </div>
+                }
+            </div>
+        );
+    }
+}
+
+export default LogPathChild;

src/webui/src/components/overview/SuccessTable.tsx

@@ -4,6 +4,7 @@ import { Table } from 'antd';
 import { TableObj } from '../../static/interface';
 import { convertDuration } from '../../static/function';
 import '../../static/style/tableStatus.css';
+import LogPath from '../logPath/LogPath';
 
 interface SuccessTableProps {
     tableSource: Array<TableObj>;
@@ -106,11 +107,11 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
             const openRowDataSource = {
                 parameters: record.description.parameters
             };
-            let isLogLink: boolean = false;
-            const logPathRow = record.description.logPath;
-            if (record.description.isLink !== undefined) {
-                isLogLink = true;
-            }
+            const logPathRow = record.description.logPath !== undefined
+                ?
+                record.description.logPath
+                :
+                'This trial\'s logPath are not available.';
             return (
                 <pre id="description" className="hyperpar">
                     {
@@ -128,19 +129,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                                 <span className="error">'This trial's parameters are not available.'</span>
                             </div>
                     }
-                    {
-                        isLogLink
-                            ?
-                            <div className="logpath">
-                                <span className="logName">logPath: </span>
-                                <a className="logContent logHref" href={logPathRow} target="_blank">{logPathRow}</a>
-                            </div>
-                            :
-                            <div className="logpath">
-                                <span className="logName">logPath: </span>
-                                <span className="logContent">{logPathRow}</span>
-                            </div>
-                    }
+                    <LogPath logStr={logPathRow}/>
                 </pre>
             );
         };

src/webui/src/components/trial-detail/TableList.tsx

@@ -6,6 +6,7 @@ import { Row, Table, Button, Popconfirm, Modal, message } from 'antd';
 import { MANAGER_IP, trialJobStatus } from '../../static/const';
 import { convertDuration } from '../../static/function';
 import { TableObj, TrialJob } from '../../static/interface';
+import LogPath from '../logPath/LogPath';
 require('../../static/style/tableStatus.css');
 require('../../static/style/logPath.scss');
 require('../../static/style/search.scss');
@@ -305,11 +306,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
             const parametersRow = {
                 parameters: record.description.parameters
             };
-            let isLogLink: boolean = false;
-            const logPathRow = record.description.logPath;
-            if (record.description.isLink !== undefined) {
-                isLogLink = true;
-            }
+            const logPathRow = record.description.logPath !== undefined
+                ?
+                record.description.logPath
+                :
+                'This trial\'s logPath are not available.';
             return (
                 <pre id="allList" className="hyperpar">
                     {
@@ -327,19 +328,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 <span className="error">'This trial's parameters are not available.'</span>
                             </div>
                     }
-                    {
-                        isLogLink
-                            ?
-                            <div className="logpath">
-                                <span className="logName">logPath: </span>
-                                <a className="logContent logHref" href={logPathRow} target="_blank">{logPathRow}</a>
-                            </div>
-                            :
-                            <div className="logpath">
-                                <span className="logName">logPath: </span>
-                                <span className="logContent">{logPathRow}</span>
-                            </div>
-                    }
+                    <LogPath logStr={logPathRow}/>
                 </pre>
             );
         };

src/webui/src/static/interface.ts

@@ -14,8 +14,6 @@ interface ErrorParameter {
 interface Parameters {
     parameters: ErrorParameter;
     logPath?: string;
-    isLink?: boolean;
-    intermediate?: Array<string>;
 }
 
 interface Experiment {

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

-.RUNNING{
-    color: #3c8dbc;
+.RUNNING,.USER_CANCELED{
+    color: #0071BC;
 }
 .FAILED{
     color: #dd4b39;
 }
-.USER_CANCELED{
-    color:	#FF4500;
-}
 .SUCCEEDED{
-    color: #009245;
+    color: #00A445;
 }
 .UNKNOWN{
     color:	#FF8C00;
 }
 .SYS_CANCELED{
-    color:	red;
+    color:	#EB0716;
 }
 .WAITING{
     color:	#008B8B;