Fix issue #927: show experiment profile in the Overview page (#932)

src/webui/src/components/Overview.tsx

@@ -20,6 +20,7 @@ require('../static/style/overviewTitle.scss');
 
 interface OverviewState {
     tableData: Array<TableObj>;
+    experimentAPI: object;
     searchSpace: object;
     status: string;
     errorStr: string;
@@ -47,6 +48,7 @@ class Overview extends React.Component<{}, OverviewState> {
         super(props);
         this.state = {
             searchSpace: {},
+            experimentAPI: {},
             status: '',
             errorStr: '',
             trialProfile: {
@@ -143,6 +145,7 @@ class Overview extends React.Component<{}, OverviewState> {
                     });
                     if (this._isMounted) {
                         this.setState({
+                            experimentAPI: res.data,
                             trialProfile: trialPro[0],
                             searchSpace: searchSpace,
                             isLogCollection: expLogCollection
@@ -390,7 +393,7 @@ class Overview extends React.Component<{}, OverviewState> {
         const {
             trialProfile, searchSpace, tableData, accuracyData,
             accNodata, status, errorStr, trialNumber, bestAccuracy,
-            titleMaxbgcolor, titleMinbgcolor, isLogCollection
+            titleMaxbgcolor, titleMinbgcolor, isLogCollection, experimentAPI
         } = this.state;
 
         return (
@@ -425,9 +428,7 @@ class Overview extends React.Component<{}, OverviewState> {
                         <Row className="experiment">
                             {/* the scroll bar all the trial profile in the searchSpace div*/}
                             <div className="experiment searchSpace">
-                                <TrialPro
-                                    tiralProInfo={trialProfile}
-                                />
+                            <TrialPro experiment={experimentAPI} />
                             </div>
                         </Row>
                     </Col>

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

 import * as React from 'react';
-import { Experiment } from '../../static/interface';
 import MonacoEditor from 'react-monaco-editor';
 import { MONACO } from '../../static/const';
 
 interface TrialInfoProps {
-    tiralProInfo: Experiment;
+    experiment: object;
 }
 
 class TrialInfo extends React.Component<TrialInfoProps, {}> {
@@ -13,19 +12,32 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         super(props);
     }
 
-    render() {
-        const { tiralProInfo } = this.props;
-        const showProInfo = [];
-        showProInfo.push({
-            revision: tiralProInfo.revision,
-            authorName: tiralProInfo.author,
-            trialConcurrency: tiralProInfo.runConcurren,
-            tuner: tiralProInfo.tuner,
-            assessor: tiralProInfo.assessor ? tiralProInfo.assessor : undefined,
-            logCollection: tiralProInfo.logCollection ? tiralProInfo.logCollection : undefined,
-            advisor: tiralProInfo.advisor ? tiralProInfo.advisor : undefined,
-            clusterMetaData: tiralProInfo.clusterMetaData ? tiralProInfo.clusterMetaData : undefined
+    componentWillReceiveProps(nextProps: TrialInfoProps) {
+        const experiments = nextProps.experiment;
+        Object.keys(experiments).map(key => {
+            switch (key) {
+                case 'id':
+                case 'logDir':
+                case 'startTime':
+                case 'endTime':
+                    experiments[key] = undefined;
+                    break;
+                case 'params':
+                    const params = experiments[key];
+                    Object.keys(params).map(item => {
+                        if (item === 'experimentName' || item === 'searchSpace'
+                            || item === 'trainingServicePlatform') {
+                            params[item] = undefined;
+                        }
+                    });
+                    break;
+                default:
+            }
         });
+    }
+
+    render() {
+        const { experiment } = this.props;
         return (
             <div className="profile">
                 <MonacoEditor
@@ -33,7 +45,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
                     height="380"
                     language="json"
                     theme="vs-light"
-                    value={JSON.stringify(showProInfo[0], null, 2)}
+                    value={JSON.stringify(experiment, null, 2)}
                     options={MONACO}
                 />
             </div>
@@ -41,4 +53,4 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
     }
 }
 
-export default TrialInfo;
\ No newline at end of file
+export default TrialInfo;