Optimization of copy as python (#987)

optimization of copy as python

src/webui/src/components/Control.tsx

-import * as React from 'react';
-import { Input, Button, message } from 'antd';
-import axios from 'axios';
-import { MANAGER_IP, CONTROLTYPE } from '../static/const';
-const { TextArea } = Input;
-import '../static/style/control.scss';
-
-interface ExperimentParams {
-    authorName: string;
-    experimentName: string;
-    trialConcurrency: number;
-    maxExecDuration: number;
-    maxTrialNum: number;
-    searchSpace: string;
-    tuner: {
-        tunerCommand: string;
-        tunerCwd: string;
-        tunerCheckpointDirectory: string;
-        tunerGpuNum?: number;
-    };
-    assessor?: {
-        assessorCommand: string;
-        assessorCwd: string;
-        assessorCheckpointDirectory: string;
-        assessorGpuNum?: number;
-    };
-}
-
-interface Experiments {
-    params: ExperimentParams;
-    id: string;
-    startTime?: Date;
-    endTime?: Date;
-    revision: number;
-    execDuration: number;
-}
-
-interface TrialNumber {
-    maxExecDuration: number;
-    trialConcurrency: number;
-}
-
-interface ControlState {
-    addisabled: boolean;
-    addTrial: string;
-    updateSearch: string;
-    trialNum: TrialNumber;
-    trialMess: string;
-    updisabled: boolean;
-    upTrialdis: boolean;
-    experiment: Experiments;
-}
-
-class Control extends React.Component<{}, ControlState> {
-
-    public _isMounted = false;
-
-    constructor(props: {}) {
-
-        super(props);
-        this.state = {
-            addisabled: false,
-            upTrialdis: false,
-            addTrial: '',
-            updateSearch: '',
-            updisabled: false,
-            trialNum: {
-                maxExecDuration: 0,
-                trialConcurrency: 0
-            },
-            trialMess: '',
-            // experiment origin data obj
-            experiment: {
-                params: {
-                    authorName: '',
-                    experimentName: '',
-                    trialConcurrency: 0,
-                    maxExecDuration: 0,
-                    maxTrialNum: 0,
-                    searchSpace: '',
-                    tuner: {
-                        tunerCommand: '',
-                        tunerCwd: '',
-                        tunerCheckpointDirectory: '',
-                    }
-                },
-                id: '',
-                revision: 0,
-                execDuration: 0,
-            }
-        };
-    }
-    
-    updateTrialNumLoad = () => {
-        if (this._isMounted) {
-            this.setState({
-                upTrialdis: true,
-            });
-        }
-    }
-
-    updateTrialNumNormal = () => {
-        if (this._isMounted) {
-            this.setState({
-                upTrialdis: false,
-            });
-        }
-    }
-
-    addButtonLoad = () => {
-        if (this._isMounted) {
-            this.setState({
-                addisabled: true
-            });
-        }
-    }
-
-    addButtonNormal = () => {
-        if (this._isMounted) {
-            this.setState({
-                addisabled: false,
-            });
-        }
-    }
-
-    updateSearchLoad = () => {
-        if (this._isMounted) {
-            this.setState({
-                updisabled: true,
-            });
-        }
-    }
-
-    updateSearchNormal = () => {
-        if (this._isMounted) {
-            this.setState({
-                updisabled: false,
-            });
-        }
-    }
-
-    getTrialNum = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (this._isMounted) {
-            this.setState({
-                trialMess: event.target.value
-            });
-        }
-    }
-
-    getAddTrialval = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (this._isMounted) {
-            this.setState({
-                addTrial: event.target.value
-            });
-        }
-    }
-
-    updateSearchCon = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (this._isMounted) {
-            this.setState({
-                updateSearch: event.target.value
-            });
-        }
-    }
-
-    // get add trial example
-    getAddExample = () => {
-        axios(`${MANAGER_IP}/trial-jobs`, {
-            method: 'GET'
-        }).then(res => {
-            if (res.status === 200 && this._isMounted) {
-                if (res.data.length !== 0) {
-                    const addTrialExam = JSON.parse(res.data[0].hyperParameters).parameters;
-                    this.setState({
-                        addTrial: JSON.stringify(addTrialExam, null, 4)
-                    });
-                }
-            }
-        });
-    }
-
-    // get update search_space file and experiment
-    getUpdateExample = () => {
-        axios(`${MANAGER_IP}/experiment`, {
-            method: 'GET'
-        }).then(res => {
-            if (res.status === 200 && this._isMounted) {
-                const sespaceExam = JSON.parse(res.data.params.searchSpace);
-                const trialnum: Array<TrialNumber> = [];
-                trialnum.push({
-                    maxExecDuration: res.data.params.maxExecDuration,
-                    trialConcurrency: res.data.params.trialConcurrency
-                });
-                this.setState(() => ({
-                    updateSearch: JSON.stringify(sespaceExam, null, 4),
-                    trialNum: trialnum[0],
-                    trialMess: JSON.stringify(trialnum[0], null, 4),
-                    experiment: res.data
-                }));
-            }
-        });
-    }
-
-    // update trial number parameters
-    trialParameterMess = (exper: Experiments, str: string) => {
-    
-        axios(`${MANAGER_IP}/experiment`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json;charset=utf-8'
-            },
-            data: exper,
-            params: {
-                update_type: str,
-            }
-        }).then(res => {
-            if (res.status === 200) {
-                message.success(`Update ${str.toLocaleLowerCase()} successfully`);
-                this.getUpdateExample();
-            } else {
-                message.error(`Update ${str.toLocaleLowerCase()} failed`);
-            }
-        });
-    }
-
-    updateTrialMess = () => {
-        const { trialMess } = this.state;
-        if (trialMess !== '' || trialMess !== null) {
-            this.updateTrialNumLoad();
-            const { experiment } = this.state;
-            const newExperiment = JSON.parse(JSON.stringify(experiment));
-            const trialObj = JSON.parse(trialMess);
-            const orimaxDuration = experiment.params.maxExecDuration;
-            const oriconTrial = experiment.params.trialConcurrency;
-            const flagMax = (trialObj.maxExecDuration !== orimaxDuration);
-            const flagCon = (trialObj.trialConcurrency !== oriconTrial);
-            if (flagCon && flagMax) {
-                newExperiment.params.trialConcurrency = trialObj.trialConcurrency;
-                newExperiment.params.maxExecDuration = trialObj.maxExecDuration;
-                this.trialParameterMess(newExperiment, CONTROLTYPE[1]);
-                this.trialParameterMess(newExperiment, CONTROLTYPE[2]);
-            } else if (flagCon) {
-                newExperiment.params.trialConcurrency = trialObj.trialConcurrency;
-                this.trialParameterMess(newExperiment, CONTROLTYPE[1]);
-            } else if (flagMax) {
-                newExperiment.params.maxExecDuration = trialObj.maxExecDuration;
-                this.trialParameterMess(newExperiment, CONTROLTYPE[2]);
-            } else {
-                message.info('you have not modified this file');
-            }
-            this.updateTrialNumNormal();
-        } else {
-            message.error('The text can not be empty');
-        }
-    }
-
-    userSubmitJob = () => {
-        const { addTrial } = this.state;
-        if (addTrial === null || addTrial === '') {
-            message.error('The text can not be empty');
-        } else {
-            this.addButtonLoad();
-            // new experiment obj
-            axios(`${MANAGER_IP}/trial-jobs`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                data: addTrial
-            }).then(res => {
-                if (res.status === 200) {
-                    message.success('Submit successfully');
-                } else {
-                    message.error('Submit failed');
-                }
-                this.addButtonNormal();
-            });
-        }
-
-    }
-
-    userUpdateSeaspace = () => {
-
-        this.updateSearchLoad();
-        const { updateSearch } = this.state;
-        if (updateSearch !== '' || updateSearch !== null) {
-            const { experiment } = this.state;
-            const newExperiment = JSON.parse(JSON.stringify(experiment));
-            newExperiment.params.searchSpace = updateSearch;
-            this.trialParameterMess(newExperiment, CONTROLTYPE[0]);
-            this.updateSearchNormal();
-        } else {
-            message.error('The text can not be empty');
-        }
-    }
-
-    componentDidMount() {
-
-        this._isMounted = true;
-        this.getAddExample();
-        this.getUpdateExample();
-    }
-
-    componentWillUnmount() {
-
-        this._isMounted = false;
-    }
-
-    render() {
-        const { addTrial, addisabled, updateSearch, updisabled,
-            trialMess, upTrialdis
-        } = this.state;
-        return (
-            <div className="user">
-                <div className="userCon">
-                    <div className="addtrial">
-                        <div className="addtitle">
-                            <span className="line">|</span>
-                            Experiment parameters
-                        </div>
-                        <div className="userInput">
-                            <TextArea
-                                value={trialMess}
-                                autosize={{ minRows: 9 }}
-                                onChange={this.getTrialNum}
-                            />
-                        </div>
-                        <div className="addBtubox">
-                            <Button
-                                className="userSubmit"
-                                type="primary"
-                                onClick={this.updateTrialMess}
-                                disabled={upTrialdis}
-                            >
-                                Update
-                            </Button>
-                        </div>
-                    </div>
-                    <div className="clear" />
-                    <div className="addtrial">
-                        <div className="addtitle">
-                            <span className="line">|</span>
-                            Add New Trail
-                        </div>
-                        <div className="userInput">
-                            <TextArea
-                                id="userInputJob"
-                                value={addTrial}
-                                autosize={{ minRows: 9 }}
-                                onChange={this.getAddTrialval}
-                            />
-                        </div>
-                        <div className="addBtubox">
-                            <Button
-                                className="userSubmit"
-                                type="primary"
-                                onClick={this.userSubmitJob}
-                                disabled={addisabled}
-                            >
-                                Submit
-                            </Button>
-                        </div>
-                    </div>
-                    {/* clear float */}
-                    <div className="clear" />
-                    <div className="searchbox">
-                        <div className="updatesear">
-                            <span className="line">|</span>
-                            user update search_space file
-                        </div>
-                        <div className="userInput">
-                            <TextArea
-                                id="InputUpdate"
-                                autosize={{ minRows: 20 }}
-                                value={updateSearch}
-                                onChange={this.updateSearchCon}
-                            />
-                        </div>
-                        <div className="addBtubox">
-                            <Button
-                                className="buttonbac"
-                                type="primary"
-                                onClick={this.userUpdateSeaspace}
-                                disabled={updisabled}
-                            >
-                                Update
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-export default Control;
\ No newline at end of file

src/webui/src/components/Overview.tsx

@@ -315,6 +315,10 @@ class Overview extends React.Component<{}, OverviewState> {
             indexarr.push(items.sequenceId);
         });
         const accOption = {
+            grid: {
+                left: 40,
+                right: 40
+            },
             tooltip: {
                 trigger: 'item'
             },
@@ -324,7 +328,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 data: indexarr
             },
             yAxis: {
-                name: 'Default Metric',
+                name: 'Default metric',
                 type: 'value',
                 scale: true,
                 data: accarr
@@ -405,7 +409,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 </Row>
                 <Row className="overMessage">
                     {/* status graph */}
-                    <Col span={8} className="prograph overviewBoder">
+                    <Col span={9} className="prograph overviewBoder">
                         <Title1 text="Status" icon="5.png" />
                         <Progressed
                             trialNumber={trialNumber}
@@ -417,8 +421,8 @@ class Overview extends React.Component<{}, OverviewState> {
                         />
                     </Col>
                     {/* experiment parameters search space tuner assessor... */}
-                    <Col span={8} className="overviewBoder">
-                        <Title1 text="Search Space" icon="10.png" />
+                    <Col span={7} className="overviewBoder">
+                        <Title1 text="Search space" icon="10.png" />
                         <Row className="experiment">
                             <SearchSpace searchSpace={searchSpace} />
                         </Row>
@@ -436,7 +440,7 @@ class Overview extends React.Component<{}, OverviewState> {
                 <Row className="overGraph">
                     <Row className="top10bg">
                         <Col span={4} className="top10Title">
-                            <Title1 text="Top10  Trials" icon="7.png" />
+                            <Title1 text="Top10  trials" icon="7.png" />
                         </Col>
                         <Col
                             span={2}
@@ -453,6 +457,7 @@ class Overview extends React.Component<{}, OverviewState> {
                             <Title1 text="Minimal" icon="min.png" bgcolor={titleMinbgcolor} />
                         </Col>
                     </Row>
+                    <Row>
                         <Col span={8} className="overviewBoder">
                             <Row className="accuracy">
                                 <Accuracy
@@ -470,6 +475,7 @@ class Overview extends React.Component<{}, OverviewState> {
                             />
                         </Col>
                     </Row>
+                </Row>
             </div>
         );
     }

src/webui/src/components/SlideBar.tsx

@@ -209,7 +209,7 @@ class SlideBar extends React.Component<{}, SliderState> {
             </li>
             <li className="tab">
               <Link to={'/detail'} activeClassName="high">
-                Trials Detail
+                Trials detail
             </Link>
             </li>
           </ul>

src/webui/src/components/TrialsDetail.tsx

@@ -38,21 +38,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     public tableList: TableList | null;
 
     private titleOfacc = (
-        <Title1 text="Default Metric" icon="3.png" />
+        <Title1 text="Default metric" icon="3.png" />
     );
 
     private titleOfhyper = (
-        <Title1 text="Hyper Parameter" icon="1.png" />
+        <Title1 text="Hyper-parameter" icon="1.png" />
     );
 
     private titleOfDuration = (
-        <Title1 text="Trial Duration" icon="2.png" />
+        <Title1 text="Trial duration" icon="2.png" />
     );
 
     private titleOfIntermediate = (
         <div className="panelTitle">
             <Icon type="line-chart" />
-            <span>Intermediate Result</span>
+            <span>Intermediate result</span>
         </div>
     );
 
@@ -360,10 +360,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     </Tabs>
                 </div>
                 {/* trial table list */}
-                <Title1 text="Trial Jobs" icon="6.png" />
+                <Title1 text="Trial jobs" icon="6.png" />
                 <Row className="allList">
                     <Col span={12}>
-                        <span>show</span>
+                        <span>Show</span>
                         <Select
                             className="entry"
                             onSelect={this.handleEntriesSelect}
@@ -384,13 +384,13 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                     className="tableButton editStyle"
                                     onClick={this.tableList ? this.tableList.addColumn : this.test}
                                 >
-                                    AddColumn
+                                    Add column
                                 </Button>
                             </Col>
                             <Col span={12}>
                                 <Input
                                     type="text"
-                                    placeholder="search by Id, Trial No. or Status"
+                                    placeholder="Search by id, trial No. or status"
                                     onChange={this.searchTrial}
                                     style={{ width: 230, marginLeft: 6 }}
                                 />

src/webui/src/components/overview/Accuracy.tsx

@@ -28,7 +28,7 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
                 <ReactEcharts
                     option={accuracyData}
                     style={{
-                        width: '100%',
+                        width: '90%',
                         height: height,
                         margin: '0 auto',
                     }}

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

@@ -27,11 +27,11 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                     <div>{trialProfile.id}</div>
                 </Col>
                 <Col span={8} className="padItem basic">
-                    <p>Start Time</p>
+                    <p>Start time</p>
                     <div className="nowrap">
                         {new Date(trialProfile.startTime).toLocaleString('en-US')}
                     </div>
-                    <p>End Time</p>
+                    <p>End time</p>
                     <div className="nowrap">
                         {
                             trialProfile.endTime
@@ -43,13 +43,13 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                     </div>
                 </Col>
                 <Col span={8} className="padItem basic">
-                    <p>Log Directory</p>
+                    <p>Log directory</p>
                     <div className="nowrap">
                         <Tooltip placement="top" title={trialProfile.logDir}>
                             {trialProfile.logDir}
                         </Tooltip>
                     </div>
-                    <p>TrainingPlatform</p>
+                    <p>Training platform</p>
                     <div className="nowrap">
                         {
                             trialProfile.trainingServicePlatform

src/webui/src/components/overview/Progress.tsx

@@ -60,6 +60,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                             const trialConcurrency = experimentFile.params.trialConcurrency;
                             if (userInputVal !== undefined) {
                                 if (userInputVal === trialConcurrency.toString() || userInputVal === '0') {
+                                    message.destroy();
                                     message.info(
                                         `trialConcurrency's value is ${trialConcurrency}, you did not modify it`, 2);
                                 } else {
@@ -76,6 +77,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                                         }
                                     }).then(res => {
                                         if (res.status === 200) {
+                                            message.destroy();
                                             message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()} 
                                             successfully`);
                                             // rerender trial profile message
@@ -200,87 +202,85 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                     percent={percent}
                     description={runDuration}
                     bgclass={status}
-                    maxString={`MaxDuration: ${convertTime(trialProfile.maxDuration)}`}
+                    maxString={`Max duration: ${convertTime(trialProfile.maxDuration)}`}
                 />
                 <ProgressBar
-                    who="TrialNum"
+                    who="Trial numbers"
                     percent={bar2Percent}
                     description={bar2.toString()}
                     bgclass={status}
-                    maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
+                    maxString={`Max trial number: ${trialProfile.MaxTrialNum}`}
                 />
                 <Row className="basic colorOfbasic mess">
-                    <Col span={10}>
-                        <p>best metric</p>
+                    <p>Best metric</p>
                     <div>{bestAccuracy.toFixed(6)}</div>
-                    </Col>
-                    <Col span={14}>
-                        {/* modify concurrency */}
-                        <p>concurrency</p>
-                        <Row className="inputBox">
-                            <input
-                                type="number"
-                                disabled={isEnable}
-                                onChange={this.getUserTrialConcurrency}
-                                className="concurrencyInput"
-                                ref={(input) => this.conInput = input}
-                            />
-                            <Button
-                                type="primary"
-                                className="tableButton editStyle"
-                                onClick={this.editTrialConcurrency}
-                            >{btnName}
-                            </Button>
-                            <Button
-                                type="primary"
-                                onClick={this.cancelFunction}
-                                style={{ display: cancelSty, marginLeft: 1 }}
-                                className="tableButton editStyle"
-                            >
-                                Cancel
-                            </Button>
-                        </Row>
-                    </Col>
                 </Row>
                 <Row className="mess">
-                    <Col span={8}>
+                    <Col span={6}>
                         <Row className="basic colorOfbasic">
-                            <p>spent</p>
+                            <p>Spent</p>
                             <div>{convertTime(trialProfile.execDuration)}</div>
                         </Row>
                     </Col>
-                    <Col span={9}>
+                    <Col span={6}>
                         <Row className="basic colorOfbasic">
-                            <p>remaining</p>
+                            <p>Remaining</p>
                             <div>{remaining}</div>
                         </Row>
                     </Col>
-                    <Col span={7}>
+                    <Col span={6}>
                         <Row className="basic colorOfbasic">
-                            <p>running</p>
+                            <p>Running</p>
                             <div>{trialNumber.runTrial}</div>
                         </Row>
                     </Col>
-                </Row>
-                <Row className="mess">
-                    <Col span={8}>
+                    <Col span={6}>
                         <Row className="basic colorOfbasic">
-                            <p>succeed</p>
+                            <p>Succeeded</p>
                             <div>{trialNumber.succTrial}</div>
                         </Row>
                     </Col>
-                    <Col span={9}>
+                </Row>
+                <Row className="mess">
+                    <Col span={6}>
                         <Row className="basic">
-                            <p>stopped</p>
+                            <p>Stopped</p>
                             <div>{trialNumber.stopTrial}</div>
                         </Row>
                     </Col>
-                    <Col span={7}>
+                    <Col span={6}>
                         <Row className="basic">
-                            <p>failed</p>
+                            <p>Failed</p>
                             <div>{trialNumber.failTrial}</div>
                         </Row>
                     </Col>
+                    <Col span={12}>
+                        {/* modify concurrency */}
+                        <p>Concurrency</p>
+                        <Row className="inputBox">
+                            <input
+                                type="number"
+                                disabled={isEnable}
+                                onChange={this.getUserTrialConcurrency}
+                                className="concurrencyInput"
+                                ref={(input) => this.conInput = input}
+                            />
+                            <Button
+                                type="primary"
+                                className="tableButton editStyle"
+                                onClick={this.editTrialConcurrency}
+                            >{btnName}
+                            </Button>
+                            <Button
+                                type="primary"
+                                onClick={this.cancelFunction}
+                                style={{ display: cancelSty, marginLeft: 1 }}
+                                className="tableButton editStyle"
+                            >
+                                Cancel
+                            </Button>
+                        </Row>
+                    </Col>
                 </Row>
             </Row>
         );

src/webui/src/components/overview/ProgressItem.tsx

@@ -22,10 +22,10 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
         return (
             <div>
                 <Row className={`probar ${bgclass}`}>
-                        <Col span={6}>
+                        <Col span={8}>
                             <div className="name">{who}</div>
                         </Col>
-                        <Col span={17} className="bar">
+                        <Col span={16} className="bar">
                             <div className="showProgress">
                                 <Progress
                                     percent={percent}

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

@@ -19,7 +19,7 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
             <div className="searchSpace">
                 <MonacoEditor
                     width="100%"
-                    height="380"
+                    height="361"
                     language="json"
                     theme="vs-light"
                     value={JSON.stringify(searchSpace, null, 2)}

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

@@ -5,7 +5,7 @@ import DefaultMetric from '../public-child/DefaultMetrc';
 import { TableObj } from '../../static/interface';
 import { convertDuration } from '../../static/function';
 import '../../static/style/tableStatus.css';
-import '../../static/style/tableList.scss';
+import '../../static/style/openRow.scss';
 
 interface SuccessTableProps {
     tableSource: Array<TableObj>;
@@ -52,11 +52,11 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
             width: 140,
             className: 'tableHead'
         }, {
-            title: 'Id',
+            title: 'ID',
             dataIndex: 'id',
             key: 'id',
             width: 60,
-            className: 'tableHead idtitle',
+            className: 'tableHead leftTitle',
             render: (text: string, record: TableObj) => {
                 return (
                     <div>{record.id}</div>
@@ -92,7 +92,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                 );
             }
         }, {
-            title: 'Default Metric',
+            title: 'Default metric',
             dataIndex: 'acc',
             key: 'acc',
             sorter: (a: TableObj, b: TableObj) => {

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

@@ -42,7 +42,7 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
             <div className="profile">
                 <MonacoEditor
                     width="100%"
-                    height="380"
+                    height="361"
                     language="json"
                     theme="vs-light"
                     value={JSON.stringify(experiment, null, 2)}

src/webui/src/components/public-child/LogPath.tsx

@@ -31,13 +31,13 @@ class LogPath extends React.Component<LogpathProps, {}> {
                             />
                             <LogPathChild
                                 eachLogpath={logStr.split(',')[1]}
-                                logName="hdfsLogPath:"
+                                logName="Log on HDFS:"
                             />
                         </div>
                         :
                         <LogPathChild
                             eachLogpath={logStr}
-                            logName="LogPath:"
+                            logName="Log path:"
                         />
                 }
             </div>

src/webui/src/components/public-child/OpenRow.tsx

@@ -13,26 +13,44 @@ interface OpenRowProps {
     logCollection: boolean;
 }
 
-class OpenRow extends React.Component<OpenRowProps, {}> {
+interface OpenRowState {
+    idList: Array<string>;
+}
+
+class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
 
     constructor(props: OpenRowProps) {
         super(props);
+        this.state = {
+            idList: ['']
+        };
 
     }
 
     copyParams = (record: TableObj) => {
-        let params = JSON.stringify(record.description.parameters);
+        // json format
+        const params = JSON.stringify(record.description.parameters, null, 4);
         if (copy(params)) {
+            message.destroy();
             message.success('Success copy parameters to clipboard in form of python dict !', 3);
+            const { idList } = this.state;
+            const copyIdList: Array<string> = idList;
+            copyIdList[copyIdList.length - 1] = record.id;
+            this.setState(() => ({
+                idList: copyIdList
+            }));
         } else {
+            message.destroy();
             message.error('Failed !', 2);
         }
     }
 
     render() {
         const { trainingPlatform, record, logCollection } = this.props;
-
+        const { idList } = this.state;
+        let isClick = false;
         let isHasParameters = true;
+        if (idList.indexOf(record.id) !== -1) { isClick = true; }
         if (record.description.parameters.error) {
             isHasParameters = false;
         }
@@ -43,33 +61,42 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
             ?
             record.description.logPath
             :
-            'This trial\'s logPath are not available.';
+            'This trial\'s log path are not available.';
         return (
-            <pre id="description" className="hyperpar">
-                <Row className="openRowContent">
+            <Row className="openRowContent hyperpar">
                 <Tabs tabPosition="left" className="card">
                     <TabPane tab="Parameters" key="1">
                         {
                             isHasParameters
                                 ?
-                                    <div>
+                                <Row id="description">
+                                    <Row className="bgHyper">
+                                        {
+                                            isClick
+                                                ?
+                                                <pre>{JSON.stringify(openRowDataSource.parameters, null, 4)}</pre>
+                                                :
                                                 <JSONTree
                                                     hideRoot={true}
                                                     shouldExpandNode={() => true}  // default expandNode
                                                     getItemString={() => (<span />)}  // remove the {} items
                                                     data={openRowDataSource.parameters}
                                                 />
+                                        }
+                                    </Row>
+                                    <Row className="copy">
                                         <Button
                                             onClick={this.copyParams.bind(this, record)}
                                         >
-                                            Copy as Python
+                                            Copy as python
                                         </Button>
-                                    </div>
+                                    </Row>
+                                </Row>
                                 :
-                                    <div className="logpath">
+                                <Row className="logpath">
                                     <span className="logName">Error: </span>
                                     <span className="error">'This trial's parameters are not available.'</span>
-                                    </div>
+                                </Row>
                         }
                     </TabPane>
                     <TabPane tab="Log" key="2">
@@ -86,8 +113,7 @@ class OpenRow extends React.Component<OpenRowProps, {}> {
                         }
                     </TabPane>
                 </Tabs>
-                </Row>
-            </pre>
+            </Row >
         );
     }
 }

src/webui/src/components/public-child/PaiTrialLog.tsx

@@ -40,7 +40,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
                                                 href={`${DOWNLOAD_IP}/trial_${id}.log`}
                                                 style={{ marginRight: 10 }}
                                             >
-                                                trial stdout
+                                                Trial stdout
                                             </a>
                                             <a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
                                         </Row>
@@ -48,11 +48,11 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
                                         <Row>
                                             <LogPathChild
                                                 eachLogpath={logStr.split(',')[0]}
-                                                logName="trial stdout:"
+                                                logName="Trial stdout:"
                                             />
                                             <LogPathChild
                                                 eachLogpath={logStr.split(',')[1]}
-                                                logName="hdfsLog:"
+                                                logName="Log on HDFS:"
                                             />
                                         </Row>
                                 }

src/webui/src/components/public-child/TrialLog.tsx

@@ -20,7 +20,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
             <div>
                 <LogPathChild
                     eachLogpath={logStr}
-                    logName="LogPath:"
+                    logName="Log path:"
                 />
             </div>
         );

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

@@ -63,8 +63,8 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
                 },
                 formatter: function (data: TooltipForAccuracy) {
                     const result = '<div class="tooldetailAccuracy">' +
-                        '<div>Trial No: ' + data.data[0] + '</div>' +
-                        '<div>Default Metric: ' + data.data[1] + '</div>' +
+                        '<div>Trial No.: ' + data.data[0] + '</div>' +
+                        '<div>Default metric: ' + data.data[1] + '</div>' +
                         '<div>Parameters: ' +
                         '<pre>' + JSON.stringify(data.data[2], null, 4) + '</pre>' +
                         '</div>' +
@@ -77,7 +77,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
                 type: 'category',
             },
             yAxis: {
-                name: 'Default Metric',
+                name: 'Default metric',
                 type: 'value',
             },
             series: [{

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

@@ -109,7 +109,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             obj = temp.hyperPara;
                         }
                         return '<div class="tooldetailAccuracy">' +
-                            '<div>Trial Id: ' + trialId + '</div>' +
+                            '<div>Trial ID: ' + trialId + '</div>' +
                             '<div>Intermediate: ' + data.data + '</div>' +
                             '<div>Parameters: ' +
                             '<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
@@ -252,7 +252,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                                     />
                                 </Col>
                                 <Col className="range" span={10}>
-                                    <span>Intermediate Result</span>
+                                    <span>Intermediate result</span>
                                     <input
                                         placeholder="number"
                                         ref={input => this.minValInput = input}

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

@@ -401,7 +401,7 @@ class Para extends React.Component<ParaProps, ParaState> {
                     <Col span={6} />
                     <Col span={18}>
                         <Row className="meline">
-                            <span>top</span>
+                            <span>Top</span>
                             <Select
                                 style={{ width: '20%', marginRight: 10 }}
                                 placeholder="100%"

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

@@ -17,7 +17,7 @@ require('../../static/style/logPath.scss');
 require('../../static/style/search.scss');
 require('../../static/style/table.scss');
 require('../../static/style/button.scss');
-require('../../static/style/tableList.scss');
+require('../../static/style/openRow.scss');
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -132,12 +132,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
         Object.keys(checkedValues).map(m => {
             switch (checkedValues[m]) {
                 case 'Trial No.':
-                case 'Id':
+                case 'ID':
                 case 'Duration':
                 case 'Status':
                 case 'Operation':
                 case 'Default':
-                case 'Intermediate Result':
+                case 'Intermediate result':
                     break;
                 default:
                     finalKeys.push(checkedValues[m]);
@@ -238,13 +238,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 (a.sequenceId as number) - (b.sequenceId as number)
                     });
                     break;
-                case 'Id':
+                case 'ID':
                     showColumn.push({
-                        title: 'Id',
+                        title: 'ID',
                         dataIndex: 'id',
                         key: 'id',
                         width: 60,
-                        className: 'tableHead idtitle',
+                        className: 'tableHead leftTitle',
                         // the sort of string
                         sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
                         render: (text: string, record: TableObj) => {
@@ -298,10 +298,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     break;
                 case 'Default':
                     showColumn.push({
-                        title: 'Default Metric',
+                        title: 'Default metric',
+                        className: 'leftTitle',
                         dataIndex: 'acc',
                         key: 'acc',
-                        width: 160,
+                        width: 120,
                         sorter: (a: TableObj, b: TableObj) => {
                             const aa = a.description.intermediate;
                             const bb = b.description.intermediate;
@@ -359,9 +360,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     });
                     break;
 
-                case 'Intermediate Result':
+                case 'Intermediate result':
                     showColumn.push({
-                        title: 'Intermediate Result',
+                        title: 'Intermediate result',
                         dataIndex: 'intermediate',
                         key: 'intermediate',
                         width: '16%',
@@ -413,7 +414,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     />
                     {/* Intermediate Result Modal */}
                     <Modal
-                        title="Intermediate Result"
+                        title="Intermediate result"
                         visible={modalVisible}
                         onCancel={this.hideIntermediateModal}
                         footer={null}
@@ -446,7 +447,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         className="titleColumn"
                     />
                 </Modal>
-
             </Row>
         );
     }