[webui] format code by eslint and prettier (#2744)

* update

* format as prettier

* fix error

* add stylelint for scss css file

* add arrow-parens rule

* update

* fix lint

* fix conflict
Co-authored-by: Lijiao <15910218274@163.com>
Co-authored-by: Lijiao <Lijiaoa@outlook.com>
Co-authored-by: Lijiao <1425861283@qq.com>

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

@@ -15,10 +15,8 @@ interface AccuracyProps {
 }
 
 class Accuracy extends React.Component<AccuracyProps, {}> {
-
     constructor(props: AccuracyProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -29,11 +27,11 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
                     option={accuracyData}
                     style={{
                         height: height,
-                        margin: '0 auto',
+                        margin: '0 auto'
                     }}
-                    theme="my_theme"
+                    theme='my_theme'
                 />
-                <div className="showMess">{accNodata}</div>
+                <div className='showMess'>{accNodata}</div>
             </div>
         );
     }

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

@@ -4,26 +4,26 @@ import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
 export const BasicInfo = (): any => (
-    <Stack horizontal horizontalAlign="space-between" className="main">
-        <Stack.Item grow={3} className="padItem basic">
+    <Stack horizontal horizontalAlign='space-between' className='main'>
+        <Stack.Item grow={3} className='padItem basic'>
             <p>Name</p>
             <div>{EXPERIMENT.profile.params.experimentName}</div>
         </Stack.Item>
-        <Stack.Item grow={3} className="padItem basic">
+        <Stack.Item grow={3} className='padItem basic'>
             <p>ID</p>
             <div>{EXPERIMENT.profile.id}</div>
         </Stack.Item>
-        <Stack.Item grow={3} className="padItem basic">
+        <Stack.Item grow={3} className='padItem basic'>
             <p>Start time</p>
-            <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+            <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
         </Stack.Item>
-        <Stack.Item grow={3} className="padItem basic">
+        <Stack.Item grow={3} className='padItem basic'>
             <p>End time</p>
-            <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
+            <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
         </Stack.Item>
-        <Stack.Item className="padItem basic">
+        <Stack.Item className='padItem basic'>
             <p>Log directory</p>
-            <div className="nowrap">
+            <div className='nowrap'>
                 <TooltipHost
                     // Tooltip message content
                     content={EXPERIMENT.profile.logDir || 'unknown'}
@@ -35,9 +35,9 @@ export const BasicInfo = (): any => (
                 </TooltipHost>
             </div>
         </Stack.Item>
-        <Stack.Item className="padItem basic">
+        <Stack.Item className='padItem basic'>
             <p>Training platform</p>
-            <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
+            <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
         </Stack.Item>
     </Stack>
 );

src/webui/src/components/overview/Details.tsx

@@ -11,7 +11,6 @@ interface DetailsState {
 }
 
 class Details extends React.Component<DetailsProps, DetailsState> {
-
     constructor(props: DetailsProps) {
         super(props);
         this.state = { isExpand: false };
@@ -22,9 +21,11 @@ class Details extends React.Component<DetailsProps, DetailsState> {
         const { isExpand } = this.state;
         return (
             <div>
-                <div onClick={(): void => {
+                <div
+                    onClick={(): void => {
                         this.setState(() => ({ isExpand: !isExpand }));
-                }}>
+                    }}
+                >
                     <DetailsRow {...detailsProps} />
                 </div>
                 {isExpand && <OpenRow trialId={detailsProps.item.id} />}

src/webui/src/components/overview/NumInput.tsx

@@ -23,32 +23,29 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
             this.props.updateValue(this.input.current.value);
             this.setState({ editting: false });
         }
-    }
+    };
 
     cancel = (): void => {
         this.setState({ editting: false });
-    }
+    };
 
     edit = (): void => {
         this.setState({ editting: true });
-    }
+    };
 
     render(): React.ReactNode {
         if (this.state.editting) {
             return (
-                <Stack horizontal className="inputBox">
+                <Stack horizontal className='inputBox'>
                     <input
-                        type="number"
-                        className="concurrencyInput"
+                        type='number'
+                        className='concurrencyInput'
                         defaultValue={this.props.value.toString()}
                         ref={this.input}
                     />
+                    <PrimaryButton text='Save' onClick={this.save} />
                     <PrimaryButton
-                        text="Save"
-                        onClick={this.save}
-                    />
-                    <PrimaryButton
-                        text="Cancel"
+                        text='Cancel'
                         style={{ display: 'inline-block', marginLeft: 1 }}
                         onClick={this.cancel}
                     />
@@ -56,17 +53,9 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
             );
         } else {
             return (
-                <Stack horizontal className="inputBox">
-                    <input
-                        type="number"
-                        className="concurrencyInput"
-                        disabled={true}
-                        value={this.props.value}
-                    />
-                    <PrimaryButton
-                        text="Edit"
-                        onClick={this.edit}
-                    />
+                <Stack horizontal className='inputBox'>
+                    <input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
+                    <PrimaryButton text='Edit' onClick={this.edit} />
                 </Stack>
             );
         }

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

 import * as React from 'react';
 import {
-    Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
-    getId, getTheme, StackItem, TooltipHost
+    Stack,
+    Callout,
+    Link,
+    IconButton,
+    FontWeights,
+    mergeStyleSets,
+    getId,
+    getTheme,
+    StackItem,
+    TooltipHost
 } from '@fluentui/react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
@@ -11,7 +19,7 @@ import ConcurrencyInput from './NumInput';
 import ProgressBar from './ProgressItem';
 import LogDrawer from '../modals/LogPanel';
 import MessageInfo from '../modals/MessageInfo';
-import { infoIcon } from "../buttons/Icon";
+import { infoIcon } from '../buttons/Icon';
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
@@ -100,7 +108,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
 
     hideSucceedInfo = (): void => {
         this.setState(() => ({ isShowSucceedInfo: false }));
-    }
+    };
 
     /**
      * info: message content
@@ -109,11 +117,12 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
      */
     showMessageInfo = (info: string, typeInfo: string): void => {
         this.setState(() => ({
-            info, typeInfo,
+            info,
+            typeInfo,
             isShowSucceedInfo: true
         }));
         setTimeout(this.hideSucceedInfo, 2000);
-    }
+    };
 
     editTrialConcurrency = async (userInput: string): Promise<void> => {
         if (!userInput.match(/^[1-9]\d*$/)) {
@@ -144,30 +153,33 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
             if (error.response && error.response.data.error) {
                 this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
             } else if (error.response) {
-                this.showMessageInfo(`Failed to update trial concurrency\nServer responsed ${error.response.status}`, 'error');
+                this.showMessageInfo(
+                    `Failed to update trial concurrency\nServer responsed ${error.response.status}`,
+                    'error'
+                );
             } else if (error.message) {
                 this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
             } else {
                 this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
             }
         }
-    }
+    };
 
     isShowDrawer = (): void => {
         this.setState({ isShowLogDrawer: true });
-    }
+    };
 
     closeDrawer = (): void => {
         this.setState({ isShowLogDrawer: false });
-    }
+    };
 
     onDismiss = (): void => {
         this.setState({ isCalloutVisible: false });
-    }
+    };
 
     onShow = (): void => {
         this.setState({ isCalloutVisible: true });
-    }
+    };
 
     render(): React.ReactNode {
         const { bestAccuracy } = this.props;
@@ -187,16 +199,14 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         const execDuration = convertTime(EXPERIMENT.profile.execDuration);
 
         return (
-            <Stack className="progress" id="barBack">
-                <Stack className="basic lineBasic">
+            <Stack className='progress' id='barBack'>
+                <Stack className='basic lineBasic'>
                     <p>Status</p>
-                    <Stack horizontal className="status">
+                    <Stack horizontal className='status'>
                         <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
-                        {
-                            EXPERIMENT.status === 'ERROR'
-                                ?
+                        {EXPERIMENT.status === 'ERROR' ? (
                             <div>
-                                    <div className={styles.buttonArea} ref={(val): any => this.menuButtonElement = val}>
+                                <div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
                                     <IconButton
                                         iconProps={{ iconName: 'info' }}
                                         onClick={isCalloutVisible ? this.onDismiss : this.onShow}
@@ -207,14 +217,16 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                                         className={styles.callout}
                                         ariaLabelledBy={this.labelId}
                                         ariaDescribedBy={this.descriptionId}
-                                            role="alertdialog"
+                                        role='alertdialog'
                                         gapSpace={0}
                                         target={this.menuButtonElement}
                                         onDismiss={this.onDismiss}
                                         setInitialFocus={true}
                                     >
                                         <div className={styles.header}>
-                                                <p className={styles.title} id={this.labelId}>Error</p>
+                                            <p className={styles.title} id={this.labelId}>
+                                                Error
+                                            </p>
                                         </div>
                                         <div className={styles.inner}>
                                             <p className={styles.subtext} id={this.descriptionId}>
@@ -229,81 +241,75 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                                     </Callout>
                                 )}
                             </div>
-                                :
-                                null
-                        }
+                        ) : null}
                     </Stack>
                 </Stack>
                 <ProgressBar
-                    who="Duration"
+                    who='Duration'
                     percent={percent}
                     description={execDuration}
                     bgclass={EXPERIMENT.status}
                     maxString={`Max duration: ${maxDuration}`}
                 />
                 <ProgressBar
-                    who="Trial numbers"
+                    who='Trial numbers'
                     percent={bar2Percent}
                     description={bar2.toString()}
                     bgclass={EXPERIMENT.status}
                     maxString={`Max trial number: ${maxTrialNum}`}
                 />
-                <Stack className="basic colorOfbasic mess" horizontal>
+                <Stack className='basic colorOfbasic mess' horizontal>
                     <StackItem grow={50}>
                         <p>Best metric</p>
                         <div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
                     </StackItem>
                     <StackItem>
-                        {isShowSucceedInfo && <MessageInfo className="info" typeInfo={typeInfo} info={info} />}
+                        {isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
                     </StackItem>
                 </Stack>
-                <Stack horizontal horizontalAlign="space-between" className="mess">
-                    <span style={itemStyles} className="basic colorOfbasic">
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <span style={itemStyles} className='basic colorOfbasic'>
                         <p>Spent</p>
                         <div>{execDuration}</div>
                     </span>
-                    <span style={itemStyles} className="basic colorOfbasic">
+                    <span style={itemStyles} className='basic colorOfbasic'>
                         <p>Remaining</p>
-                        <div className="time">{remaining}</div>
+                        <div className='time'>{remaining}</div>
                     </span>
                     <span style={itemStyles}>
                         {/* modify concurrency */}
                         <TooltipHost content={CONCURRENCYTOOLTIP}>
-                        <p className="cursor">Concurrency<span className="progress-info">{infoIcon}</span></p>
+                            <p className='cursor'>
+                                Concurrency<span className='progress-info'>{infoIcon}</span>
+                            </p>
                         </TooltipHost>
                         <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
                     </span>
-                    <span style={itemStyles} className="basic colorOfbasic"></span>
+                    <span style={itemStyles} className='basic colorOfbasic'></span>
                 </Stack>
-                <Stack horizontal horizontalAlign="space-between" className="mess">
-                    <div style={itemStyles} className="basic colorOfbasic">
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <div style={itemStyles} className='basic colorOfbasic'>
                         <p>Running</p>
                         <div>{count.get('RUNNING')}</div>
                     </div>
-                    <div style={itemStyles} className="basic colorOfbasic">
+                    <div style={itemStyles} className='basic colorOfbasic'>
                         <p>Succeeded</p>
                         <div>{count.get('SUCCEEDED')}</div>
                     </div>
-                    <div style={itemStyles} className="basic">
+                    <div style={itemStyles} className='basic'>
                         <p>Stopped</p>
                         <div>{stoppedCount}</div>
                     </div>
-                    <div style={itemStyles} className="basic">
+                    <div style={itemStyles} className='basic'>
                         <p>Failed</p>
                         <div>{count.get('FAILED')}</div>
                     </div>
                 </Stack>
                 {/* learn about click -> default active key is dispatcher. */}
-                {isShowLogDrawer ? (
-                    <LogDrawer
-                        closeDrawer={this.closeDrawer}
-                        activeTab="dispatcher"
-                    />
-                ) : null}
+                {isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
             </Stack>
         );
     }
-
 }
 
 export default Progressed;

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

@@ -10,10 +10,8 @@ interface ProItemProps {
 }
 
 class ProgressBar extends React.Component<ProItemProps, {}> {
-
     constructor(props: ProItemProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -21,18 +19,19 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
         return (
             <div>
                 <Stack horizontal className={`probar ${bgclass}`}>
-                    <div className="name">{who}</div>
-                    <div className="showProgress" style={{ width: '78%' }}>
-                        <ProgressIndicator
-                            barHeight={30}
-                            percentComplete={percent}
-                        />
-                        <Stack horizontal className="boundary">
+                    <div className='name'>{who}</div>
+                    <div className='showProgress' style={{ width: '78%' }}>
+                        <ProgressIndicator barHeight={30} percentComplete={percent} />
+                        <Stack horizontal className='boundary'>
                             <StackItem grow={30}>0</StackItem>
-                            <StackItem className="right" grow={70}>{maxString}</StackItem>
+                            <StackItem className='right' grow={70}>
+                                {maxString}
+                            </StackItem>
                         </Stack>
                     </div>
-                    <div className="description" style={{ width: '22%' }}>{description}</div>
+                    <div className='description' style={{ width: '22%' }}>
+                        {description}
+                    </div>
                 </Stack>
                 <br />
             </div>

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

@@ -7,20 +7,18 @@ interface SearchspaceProps {
 }
 
 class SearchSpace extends React.Component<SearchspaceProps, {}> {
-
     constructor(props: SearchspaceProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { searchSpace } = this.props;
         return (
-            <div className="searchSpace">
+            <div className='searchSpace'>
                 <MonacoEditor
-                    height="361"
-                    language="json"
-                    theme="vs-light"
+                    height='361'
+                    language='json'
+                    theme='vs-light'
                     value={JSON.stringify(searchSpace, null, 2)}
                     options={MONACO}
                 />

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

@@ -59,7 +59,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     tooltipStr = (
         <div>
             <p>The experiment is running, please wait for the final metric patiently.</p>
-            <div className="link">You could also find status of trial job with <span>{DETAILTABS}</span> button.</div>
+            <div className='link'>
+                You could also find status of trial job with <span>{DETAILTABS}</span> button.
+            </div>
         </div>
     );
 
@@ -73,7 +75,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             isResizable: true,
             data: 'number',
             onColumnClick: this.onColumnClick
-        }, {
+        },
+        {
             name: 'ID',
             key: 'id',
             fieldName: 'id',
@@ -83,7 +86,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             className: 'tableHead leftTitle',
             data: 'string',
             onColumnClick: this.onColumnClick
-        }, {
+        },
+        {
             name: 'Duration',
             key: 'duration',
             minWidth: 100,
@@ -92,12 +96,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             fieldName: 'duration',
             data: 'number',
             onColumnClick: this.onColumnClick,
-            onRender: (item: any): React.ReactNode => {
-                return (
-                    <div className="durationsty"><div>{convertDuration(item.duration)}</div></div>
-                );
+            onRender: (item: any): React.ReactNode => (
+                <div className='durationsty'>
+                    <div>{convertDuration(item.duration)}</div>
+                </div>
+            )
         },
-        }, {
+        {
             name: 'Status',
             key: 'status',
             minWidth: 140,
@@ -105,11 +110,10 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             isResizable: true,
             fieldName: 'status',
             onRender: (item: any): React.ReactNode => {
-                return (
-                    <div className={`${item.status} commonStyle`}>{item.status}</div>
-                );
+                return <div className={`${item.status} commonStyle`}>{item.status}</div>;
             }
-        }, {
+        },
+        {
             name: 'Default metric',
             key: 'accuracy',
             fieldName: 'accuracy',
@@ -119,15 +123,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             data: 'number',
             onColumnClick: this.onColumnClick,
             onRender: (item: any): React.ReactNode => {
-                return (
-                    <DefaultMetric trialId={item.id} />
-                );
+                return <DefaultMetric trialId={item.id} />;
             }
         }
     ];
 
     componentDidUpdate(prevProps: SuccessTableProps): void {
-        if(this.props.trialIds !== prevProps.trialIds){
+        if (this.props.trialIds !== prevProps.trialIds) {
             const { trialIds } = this.props;
             this.setState(() => ({ source: TRIALS.table(trialIds) }));
         }
@@ -135,20 +137,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
 
     render(): React.ReactNode {
         const { columns, source } = this.state;
-        const isNoneData = (source.length === 0) ? true : false;
+        const isNoneData = source.length === 0 ? true : false;
 
         return (
-            <div id="succTable">
+            <div id='succTable'>
                 <DetailsList
                     columns={columns}
                     items={source}
-                    setKey="set"
+                    setKey='set'
                     compact={true}
                     onRenderRow={this.onRenderRow}
                     selectionMode={0} // close selector function
-                    className="succTable"
+                    className='succTable'
                 />
-                {isNoneData && <div className="succTable-tooltip">{this.tooltipStr}</div>}
+                {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
             </div>
         );
     }

src/webui/src/components/overview/Title1.tsx

@@ -5,13 +5,11 @@ import '../../static/style/overviewTitle.scss';
 
 export const Title1 = (): any => (
     <TitleContext.Consumer>
-        {
-            (value): React.ReactNode => (
-                <Stack horizontal className="panelTitle">
-                    <img src={require(`../../static/img/icon/${value.icon}`)} alt="icon" />
+        {(value): React.ReactNode => (
+            <Stack horizontal className='panelTitle'>
+                <img src={require(`../../static/img/icon/${value.icon}`)} alt='icon' />
                 <span style={{ color: value.fontColor }}>{value.text}</span>
             </Stack>
-            )
-        }
+        )}
     </TitleContext.Consumer>
 );

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

@@ -9,15 +9,19 @@ interface TrialInfoProps {
 }
 
 class TrialInfo extends React.Component<TrialInfoProps, {}> {
-
     constructor(props: TrialInfoProps) {
         super(props);
     }
 
     render(): React.ReactNode {
         const blacklist = [
-            'id', 'logDir', 'startTime', 'endTime',
-            'experimentName', 'searchSpace', 'trainingServicePlatform'
+            'id',
+            'logDir',
+            'startTime',
+            'endTime',
+            'experimentName',
+            'searchSpace',
+            'trainingServicePlatform'
         ];
         const filter = (key: string, val: any): any => {
             if (key === 'trialConcurrency') {
@@ -28,12 +32,12 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
 
         return (
-            <div className="profile">
+            <div className='profile'>
                 <MonacoEditor
-                    width="100%"
-                    height="361"
-                    language="json"
-                    theme="vs-light"
+                    width='100%'
+                    height='361'
+                    language='json'
+                    theme='vs-light'
                     value={profile}
                     options={MONACO}
                 />

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

@@ -13,9 +13,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
 
     render(): React.ReactNode {
         const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
-        return (
-            <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>
-        );
+        return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
     }
 }
 

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

@@ -11,9 +11,7 @@ class IntermediateVal extends React.Component<IntermediateValProps, {}> {
     }
 
     render(): React.ReactNode {
-        return (
-            <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>
-        );
+        return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
     }
 }
 

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

@@ -6,10 +6,8 @@ interface LogpathChildProps {
 }
 
 class LogPathChild extends React.Component<LogpathChildProps, {}> {
-
     constructor(props: LogpathChildProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -17,16 +15,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
         const isLink = /^http/gi.test(eachLogpath);
 
         return (
-            <div className="logpath">
-                <span className="logName">{logName}</span>
-                {
-                    isLink
-                        ?
-                        <a className="logContent logHref" rel="noopener noreferrer" href={eachLogpath} target="_blank">{eachLogpath}</a>
-                        :
-                        <span className="logContent">{eachLogpath}</span>
-
-                }
+            <div className='logpath'>
+                <span className='logName'>{logName}</span>
+                {isLink ? (
+                    <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
+                        {eachLogpath}
+                    </a>
+                ) : (
+                    <span className='logContent'>{eachLogpath}</span>
+                )}
             </div>
         );
     }

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

@@ -10,7 +10,6 @@ interface MonacoEditorProps {
 }
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
-
     public _isMonacoMount!: boolean;
 
     constructor(props: MonacoEditorProps) {
@@ -28,34 +27,25 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
     render(): React.ReactNode {
         const { content, loading, height } = this.props;
         return (
-            <div className="just-for-log">
-                {
-                    loading
-                        ?
+            <div className='just-for-log'>
+                {loading ? (
                     <Spinner
-                            label="Wait, wait..."
-                            ariaLive="assertive"
-                            labelPosition="right"
+                        label='Wait, wait...'
+                        ariaLive='assertive'
+                        labelPosition='right'
                         styles={{ root: { width: '100%', height: height } }}
                     >
                         <MonacoEditor
-                                width="100%"
+                            width='100%'
                             height={height}
-                                language="json"
+                            language='json'
                             value={content}
                             options={DRAWEROPTION}
                         />
                     </Spinner>
-                        :
-                        <MonacoEditor
-                            width="100%"
-                            height={height}
-                            language="json"
-                            value={content}
-                            options={DRAWEROPTION}
-                        />
-                }
-
+                ) : (
+                    <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
+                )}
             </div>
         );
     }

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

@@ -23,7 +23,6 @@ interface OpenRowState {
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
-
     constructor(props: OpenRowProps) {
         super(props);
         this.state = {
@@ -35,7 +34,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
 
     hideMessageInfo = (): void => {
         this.setState(() => ({ isHidenInfo: true }));
-    }
+    };
 
     /**
      * info: message content
@@ -45,7 +44,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
     getCopyStatus = (info: string, typeInfo: string): void => {
         this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
         setTimeout(this.hideMessageInfo, 2000);
-    }
+    };
 
     copyParams = (trial: Trial): void => {
         // get copy parameters
@@ -55,27 +54,25 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         } else {
             this.getCopyStatus('Failed !', 'error');
         }
-    }
+    };
 
     openTrialLog = (type: string): void => {
         window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`);
-    }
+    };
 
     render(): React.ReactNode {
         const { isHidenInfo, typeInfo, info } = this.state;
         const trialId = this.props.trialId;
         const trial = TRIALS.getTrial(trialId);
-        const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
+        const logPathRow = trial.info.logPath || "This trial's log path is not available.";
         return (
-            <Stack className="openRow">
-                <Stack className="openRowContent">
+            <Stack className='openRow'>
+                <Stack className='openRowContent'>
                     <Pivot>
-                        <PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
-                            {
-                                trial.info.hyperParameters !== undefined
-                                    ?
-                                    <Stack id="description">
-                                        <Stack className="bgHyper">
+                        <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
+                            {trial.info.hyperParameters !== undefined ? (
+                                <Stack id='description'>
+                                    <Stack className='bgHyper'>
                                         <JSONTree
                                             hideRoot={true}
                                             shouldExpandNode={(): boolean => true} // default expandNode
@@ -83,55 +80,53 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                             data={trial.description.parameters}
                                         />
                                     </Stack>
-                                        <Stack horizontal className="copy">
+                                    <Stack horizontal className='copy'>
                                         <PrimaryButton
                                             onClick={this.copyParams.bind(this, trial)}
-                                                text="Copy as json"
+                                            text='Copy as json'
                                             styles={{ root: { width: 128, marginRight: 10 } }}
                                         />
                                         {/* copy success | failed message info */}
                                         {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
                                     </Stack>
                                 </Stack>
-                                    :
-                                    <Stack className="logpath">
-                                        <span className="logName">Error: </span>
-                                        <span className="error">{`This trial's parameters are not available.'`}</span>
+                            ) : (
+                                <Stack className='logpath'>
+                                    <span className='logName'>Error: </span>
+                                    <span className='error'>{`This trial's parameters are not available.'`}</span>
                                 </Stack>
-                            }
+                            )}
                         </PivotItem>
-                        <PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo">
-                            {
-                                // FIXME: this should not be handled in web UI side
-                                EXPERIMENT.trainingServicePlatform !== 'local'
-                                    ?
+                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
+                            {// FIXME: this should not be handled in web UI side
+                            EXPERIMENT.trainingServicePlatform !== 'local' ? (
                                 <PaiTrialLog
                                     logStr={logPathRow}
                                     id={trialId}
                                     logCollection={EXPERIMENT.logCollectionEnabled}
                                 />
-                                    :
+                            ) : (
                                 <div>
                                     <TrialLog logStr={logPathRow} id={trialId} />
                                     {/* view each trial log in drawer*/}
-                                        <div id="trialog">
-                                            <div className="copy" style={{ marginTop: 15 }}>
+                                    <div id='trialog'>
+                                        <div className='copy' style={{ marginTop: 15 }}>
                                             <PrimaryButton
                                                 onClick={this.openTrialLog.bind(this, 'TRIAL_LOG')}
-                                                    text="View trial log"
+                                                text='View trial log'
                                             />
                                             <PrimaryButton
                                                 onClick={this.openTrialLog.bind(this, 'TRIAL_ERROR')}
-                                                    text="View trial error"
+                                                text='View trial error'
                                                 styles={{ root: { marginLeft: 15 } }}
                                             />
                                         </div>
                                     </div>
                                 </div>
-                            }
+                            )}
                         </PivotItem>
                     </Pivot>
-                </Stack >
+                </Stack>
             </Stack>
         );
     }

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

@@ -9,41 +9,30 @@ interface PaiTrialChildProps {
 }
 
 class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
-
     constructor(props: PaiTrialChildProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { logString, id, logCollect } = this.props;
         return (
             <div>
-                {
-                    logString === ''
-                        ?
-                        null
-                        :
+                {logString === '' ? null : (
                     <div>
-                            {
-                                logCollect
-                                    ?
+                        {logCollect ? (
                             <a
-                                        target="_blank"
-                                        rel="noopener noreferrer"
+                                target='_blank'
+                                rel='noopener noreferrer'
                                 href={`${DOWNLOAD_IP}/trial_${id}.log`}
                                 style={{ marginRight: 10 }}
                             >
                                 Trial stdout
                             </a>
-                                    :
-                                    <LogPathChild
-                                        eachLogpath={logString}
-                                        logName="Trial stdout:"
-                                    />
-                            }
+                        ) : (
+                            <LogPathChild eachLogpath={logString} logName='Trial stdout:' />
+                        )}
                     </div>
-                }
+                )}
             </div>
         );
     }

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

@@ -10,60 +10,42 @@ interface PaitrialLogProps {
 }
 
 class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
-
     constructor(props: PaitrialLogProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { logStr, id, logCollection } = this.props;
-        const isTwopath = logStr.indexOf(',') !== -1
-            ?
-            true
-            :
-            false;
+        const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
         return (
             <div>
                 <div>
-                    {
-                        isTwopath
-                            ?
+                    {isTwopath ? (
                         <div>
-                                {
-                                    logCollection
-                                        ?
+                            {logCollection ? (
                                 <div>
                                     <a
-                                                target="_blank"
-                                                rel="noopener noreferrer"
+                                        target='_blank'
+                                        rel='noopener noreferrer'
                                         href={`${DOWNLOAD_IP}/trial_${id}.log`}
                                         style={{ marginRight: 10 }}
                                     >
                                         Trial stdout
                                     </a>
-                                            <a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>NFS log</a>
+                                    <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
+                                        NFS log
+                                    </a>
                                 </div>
-                                        :
+                            ) : (
                                 <div>
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[0]}
-                                                logName="Trial stdout:"
-                                            />
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[1]}
-                                                logName="Log on NFS:"
-                                            />
+                                    <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
+                                    <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on NFS:' />
                                 </div>
-                                }
+                            )}
                         </div>
-                            :
-                            <PaiTrialChild
-                                logString={logStr}
-                                id={id}
-                                logCollect={logCollection}
-                            />
-                    }
+                    ) : (
+                        <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
+                    )}
                 </div>
             </div>
         );

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

@@ -7,10 +7,8 @@ interface TrialLogProps {
 }
 
 class TrialLog extends React.Component<TrialLogProps, {}> {
-
     constructor(props: TrialLogProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -18,10 +16,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
 
         return (
             <div>
-                <LogPathChild
-                    eachLogpath={logStr}
-                    logName="Log path:"
-                />
+                <LogPathChild eachLogpath={logStr} logName='Log path:' />
             </div>
         );
     }

src/webui/src/components/stateless-component/NNItabs.tsx

@@ -2,24 +2,20 @@ import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
 const OVERVIEWTABS = (
-    <NavLink to={'/oview'} activeClassName="selected" className="common-tabs">
+    <NavLink to={'/oview'} activeClassName='selected' className='common-tabs'>
         Overview
     </NavLink>
 );
 
 const DETAILTABS = (
-    <NavLink to={'/detail'} activeClassName="selected" className="common-tabs">
+    <NavLink to={'/detail'} activeClassName='selected' className='common-tabs'>
         Trials detail
     </NavLink>
 );
 
 const NNILOGO = (
     <NavLink to={'/oview'}>
-        <img
-            src={require('../../static/img/logo2.png')}
-            alt="NNI logo"
-            style={{height: 40}}
-        />
+        <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
     </NavLink>
 );
 

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

@@ -14,11 +14,11 @@ const EmptyGraph = {
     },
     xAxis: {
         name: 'Trial',
-        type: 'category',
+        type: 'category'
     },
     yAxis: {
         name: 'Default metric',
-        type: 'value',
+        type: 'value'
     }
 };
 
@@ -45,7 +45,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
 
     loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
         this.setState({ bestCurveEnabled: checked });
-    }
+    };
 
     shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
         return nextProps.visible;
@@ -54,31 +54,37 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
     metricDataZoom = (e: EventMap): void => {
         if (e.batch !== undefined) {
             this.setState(() => ({
-                startY: (e.batch[0].start !== null ? e.batch[0].start : 0),
-                endY: (e.batch[0].end !== null ? e.batch[0].end : 100)
+                startY: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endY: e.batch[0].end !== null ? e.batch[0].end : 100
             }));
         }
-    }
+    };
 
     generateGraphConfig(maxSequenceId: number): any {
         const { startY, endY } = this.state;
         return {
             grid: {
-                left: '8%',
+                left: '8%'
             },
             tooltip: {
                 trigger: 'item',
                 enterable: true,
-                position: (point: number[], data: TooltipForAccuracy): number[] => (
-                    [(data.data[0] < maxSequenceId ? point[0] : (point[0] - 300)), 80]
-                ),
-                formatter: (data: TooltipForAccuracy): React.ReactNode => (
+                position: (point: number[], data: TooltipForAccuracy): number[] => [
+                    data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
+                    80
+                ],
+                formatter: (data: TooltipForAccuracy): React.ReactNode =>
                     '<div class="tooldetailAccuracy">' +
-                    '<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>' +
+                    '<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>' +
                     '</div>'
-                ),
             },
             dataZoom: [
                 {
@@ -92,27 +98,23 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
             ],
             xAxis: {
                 name: 'Trial',
-                type: 'category',
+                type: 'category'
             },
             yAxis: {
                 name: 'Default metric',
                 type: 'value',
-                scale: true,
+                scale: true
             },
-            series: undefined,
+            series: undefined
         };
     }
 
     generateScatterSeries(trials: Trial[]): any {
-        const data = trials.map(trial => [
-            trial.sequenceId,
-            trial.accuracy,
-            trial.description.parameters,
-        ]);
+        const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
         return {
             symbolSize: 6,
             type: 'scatter',
-            data,
+            data
         };
     }
 
@@ -124,7 +126,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
             const trial = trials[i];
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const delta = trial.accuracy! - best.accuracy!;
-            const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
+            const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
             if (better) {
                 data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
                 best = trial;
@@ -136,36 +138,33 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
         return {
             type: 'line',
             lineStyle: { color: '#FF6600' },
-            data,
+            data
         };
     }
 
     render(): React.ReactNode {
         const graph = this.generateGraph();
-        const accNodata = (graph === EmptyGraph ? 'No data' : '');
-        const onEvents = { 'dataZoom': this.metricDataZoom };
+        const accNodata = graph === EmptyGraph ? 'No data' : '';
+        const onEvents = { dataZoom: this.metricDataZoom };
 
         return (
             <div>
-                <Stack horizontalAlign="end" className="default-metric">
-                    <Toggle label="Optimization curve"
-                        inlineLabel
-                        onChange={this.loadDefault}
-                    />
+                <Stack horizontalAlign='end' className='default-metric'>
+                    <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
                 </Stack>
-                <div className="default-metric-graph">
+                <div className='default-metric-graph'>
                     <ReactEcharts
                         option={graph}
                         style={{
                             width: '100%',
                             height: 402,
-                            margin: '0 auto',
+                            margin: '0 auto'
                         }}
-                        theme="my_theme"
+                        theme='my_theme'
                         notMerge={true} // update now
                         onEvents={onEvents}
                     />
-                    <div className="default-metric-noData">{accNodata}</div>
+                    <div className='default-metric-noData'>{accNodata}</div>
                 </div>
             </div>
         );