Remove intermediate result (#410)

src/webui/package.json

@@ -11,6 +11,7 @@
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-json-tree": "^0.11.0",
+    "react-monaco-editor": "^0.22.0",
     "react-router": "3.2.1",
     "react-scripts-ts-antd": "2.17.0"
   },

src/webui/src/components/TrialsDetail.tsx

@@ -73,9 +73,9 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             enterable: true,
                             position: function (point: Array<number>, data: TooltipForAccuracy) {
                                 if (data.data[0] < resultList.length / 2) {
-                                    return [point[0], 10];
+                                    return [point[0], 80];
                                 } else {
-                                    return [point[0] - 300, 10];
+                                    return [point[0] - 300, 80];
                                 }
                             },
                             formatter: function (data: TooltipForAccuracy) {
@@ -121,15 +121,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
 
     drawTableList = () => {
 
-        axios
-            .all([
-                axios.get(`${MANAGER_IP}/trial-jobs`),
-                axios.get(`${MANAGER_IP}/metric-data`)
-            ])
-            .then(axios.spread((res, res1) => {
-                if (res.status === 200 && res1.status === 200) {
+            axios.get(`${MANAGER_IP}/trial-jobs`)
+            .then(res => {
+                if (res.status === 200) {
                     const trialJobs = res.data;
-                    const metricSource = res1.data;
                     const trialTable: Array<TableObj> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
@@ -165,14 +160,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                 desc.isLink = true;
                             }
                         }
-                        let mediate: Array<string> = [];
-                        Object.keys(metricSource).map(key => {
-                            const items = metricSource[key];
-                            if (items.trialJobId === id) {
-                                mediate.push(items.data);
-                            }
-                        });
-                        desc.intermediate = mediate;
                         const acc = getFinalResult(trialJobs[item].finalMetricData);
                         trialTable.push({
                             key: trialTable.length,
@@ -191,7 +178,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         }));
                     }
                 }
-            }));
+            });
     }
 
     callback = (key: string) => {

src/webui/src/components/overview/SearchSpace.tsx

 import * as React from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import { MONACO } from '../../static/const';
 
 interface SearchspaceProps {
     searchSpace: object;
@@ -14,9 +16,16 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
     render() {
         const { searchSpace } = this.props;
         return (
-            <pre className="experiment searchSpace" style={{paddingLeft: 20}}>
-                {JSON.stringify(searchSpace, null, 4)}
-            </pre>
+            <div className="searchSpace">
+                <MonacoEditor
+                    width="100%"
+                    height="380"
+                    language="json"
+                    theme="vs-light"
+                    value={JSON.stringify(searchSpace, null, 2)}
+                    options={MONACO}
+                />
+            </div>
         );
     }
 }

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

 import * as React from 'react';
-import { Experiment  } from '../../static/interface';
+import { Experiment } from '../../static/interface';
+import MonacoEditor from 'react-monaco-editor';
+import { MONACO } from '../../static/const';
 
 interface TrialInfoProps {
     tiralProInfo: Experiment;
@@ -25,9 +27,14 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         });
         return (
             <div className="profile">
-                <pre>
-                    {JSON.stringify(showProInfo[0], null, 4)}
-                </pre>
+                <MonacoEditor
+                    width="100%"
+                    height="386"
+                    language="json"
+                    theme="vs-light"
+                    value={JSON.stringify(showProInfo[0], null, 2)}
+                    options={MONACO}
+                />
             </div>
         );
     }

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

@@ -305,11 +305,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             const parametersRow = {
                 parameters: record.description.parameters
             };
-            const intermediate = record.description.intermediate;
-            let showIntermediate = '';
-            if (intermediate && intermediate.length > 0) {
-                showIntermediate = intermediate.join(', ');
-            }
             let isLogLink: boolean = false;
             const logPathRow = record.description.logPath;
             if (record.description.isLink !== undefined) {
@@ -345,10 +340,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 <span className="logContent">{logPathRow}</span>
                             </div>
                     }
-                    <Row className="intermediate logpath">
-                        <span className="logName">Intermediate Result:</span> 
-                        {showIntermediate}
-                    </Row>
                 </pre>
             );
         };

src/webui/src/static/const.ts

@@ -14,3 +14,7 @@ export const CONTROLTYPE = [
     'TRIAL_CONCURRENCY',
     'MAX_EXEC_DURATION'
 ];
+export const MONACO = {
+    readOnly: true,
+    automaticLayout: true
+};

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

@@ -20,7 +20,3 @@
     text-decoration: underline;
 }
 
-.intermediate{
-    white-space: normal;
-    font-size: 14px;
-}

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

@@ -30,7 +30,6 @@
     height: 386px;
     line-height: 22px;
     font-size: 14px;
-    overflow-y: scroll;
     padding: 15px 0;
     color: #212121;
 }
@@ -46,7 +45,6 @@
 }
 
 .profile{
-    padding: 0 20px;
     pre{
         overflow: inherit;
     }