[webui] eslint fix (#1864)

azure-pipelines.yml

@@ -22,8 +22,8 @@ jobs:
       cd src/nni_manager
       yarn eslint
       # uncomment following 2 lines to enable webui eslint
-      # cd ../webui
-      # yarn eslint
+      cd ../webui
+      yarn eslint
     displayName: 'Run eslint'
   - script: |
       python3 -m pip install torch==0.4.1 --user

src/webui/.eslintrc

@@ -23,7 +23,8 @@
         "@typescript-eslint/consistent-type-assertions": 0,
         "@typescript-eslint/no-inferrable-types": 0,
         "no-inner-declarations": 0,
-        "@typescript-eslint/no-var-requires": 0
+        "@typescript-eslint/no-var-requires": 0,
+        "react/display-name": 0
     },
     "ignorePatterns": [
         "node_modules/",

src/webui/src/App.tsx

@@ -27,7 +27,7 @@ class App extends React.Component<{}, AppState> {
         };
     }
 
-    async componentDidMount() {
+    async componentDidMount(): Promise<void> {
         await Promise.all([ EXPERIMENT.init(), TRIALS.init() ]);
         this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
         this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
@@ -35,7 +35,7 @@ class App extends React.Component<{}, AppState> {
         this.setState({ metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max') });
     }
 
-    changeInterval = (interval: number) => {
+    changeInterval = (interval: number): void => {
         this.setState({ interval });
         if (this.timerId === null && interval !== 0) {
             window.setTimeout(this.refresh);
@@ -45,15 +45,15 @@ class App extends React.Component<{}, AppState> {
     }
 
     // TODO: use local storage
-    changeColumn = (columnList: Array<string>) => {
+    changeColumn = (columnList: Array<string>): void => {
         this.setState({ columnList: columnList });
     }
 
-    changeMetricGraphMode = (val: 'max' | 'min') => {
+    changeMetricGraphMode = (val: 'max' | 'min'): void => {
         this.setState({ metricGraphMode: val });
     }
 
-    render() {
+    render(): React.ReactNode{
         const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast, metricGraphMode } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
             return null;  // TODO: render a loading page
@@ -86,7 +86,7 @@ class App extends React.Component<{}, AppState> {
         );
     }
 
-    private refresh = async () => {
+    private refresh = async (): Promise<void> => {
         const [ experimentUpdated, trialsUpdated ] = await Promise.all([ EXPERIMENT.update(), TRIALS.update() ]);
         if (experimentUpdated) {
             this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
@@ -107,7 +107,7 @@ class App extends React.Component<{}, AppState> {
         }
     }
 
-    private async lastRefresh() {
+    private async lastRefresh(): Promise<void> {
         await EXPERIMENT.update();
         await TRIALS.update(true);
         this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));

src/webui/src/components/Modal/Compare.tsx

@@ -20,7 +20,7 @@ class Compare extends React.Component<CompareProps, {}> {
         super(props);
     }
 
-    intermediate = () => {
+    intermediate = (): any => {
         const { compareRows } = this.props;
         const trialIntermediate: Array<Intermedia> = [];
         const idsList: Array<string> = [];
@@ -40,7 +40,7 @@ class Compare extends React.Component<CompareProps, {}> {
         const legend: Array<string> = [];
         // max length
         const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
-        const xAxis: Array<number> = [];
+        const xAxis: number[] = [];
         Object.keys(trialIntermediate).map(item => {
             const temp = trialIntermediate[item];
             legend.push(temp.name);
@@ -52,14 +52,14 @@ class Compare extends React.Component<CompareProps, {}> {
             tooltip: {
                 trigger: 'item',
                 enterable: true,
-                position: function (point: Array<number>, data: TooltipForIntermediate) {
+                position: function (point: number[], data: TooltipForIntermediate): number[] {
                     if (data.dataIndex < length / 2) {
                         return [point[0], 80];
                     } else {
                         return [point[0] - 300, 80];
                     }
                 },
-                formatter: function (data: TooltipForIntermediate) {
+                formatter: function (data: TooltipForIntermediate): any {
                     const trialId = data.seriesName;
                     let obj = {};
                     const temp = trialIntermediate.find(key => key.name === trialId);
@@ -106,10 +106,10 @@ class Compare extends React.Component<CompareProps, {}> {
     }
 
     // render table column ---
-    initColumn = () => {
+    initColumn = (): React.ReactNode => {
         const idList: Array<string> = [];
-        const sequenceIdList: Array<number> = [];
-        const durationList: Array<number> = [];
+        const sequenceIdList: number[] = [];
+        const durationList: number[] = [];
 
         const compareRows = this.props.compareRows.map(tableRecord => TRIALS.getTrial(tableRecord.id));
 
@@ -195,15 +195,15 @@ class Compare extends React.Component<CompareProps, {}> {
         );
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this._isCompareMount = true;
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         this._isCompareMount = false;
     }
 
-    render() {
+    render(): React.ReactNode{
         const { visible, cancelFunc } = this.props;
 
         return (

src/webui/src/components/Modal/CustomizedTrial.tsx

@@ -39,7 +39,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
     }
 
     // [submit click] user add a new trial [submit a trial]
-    addNewTrial = () => {
+    addNewTrial = (): void => {
         const { searchSpace, copyTrialParameter } = this.state;
         // get user edited hyperParameter, ps: will change data type if you modify the input val
         const customized = this.props.form.getFieldsValue();
@@ -76,19 +76,19 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
 
     }
 
-    warningConfirm = () => {
+    warningConfirm = (): void => {
         this.setState(() => ({ isShowWarning: false }));
         const { customParameters } = this.state;
         this.submitCustomize(customParameters);
     }
 
-    warningCancel = () => {
+    warningCancel = (): void => {
         this.setState(() => ({ isShowWarning: false }));
     }
 
-    submitCustomize = (customized: Object) => {
+    submitCustomize = (customized: Record<string, any>): void => {
         // delete `tag` key
-        for (let i in customized) {
+        for (const i in customized) {
             if (i === 'tag') {
                 delete customized[i];
             }
@@ -106,24 +106,24 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                     this.setState(() => ({ isShowSubmitFailed: true }));
                 }
             })
-            .catch(error => {
+            .catch(() => {
                 this.setState(() => ({ isShowSubmitFailed: true }));
             });
     }
 
-    closeSucceedHint = () => {
+    closeSucceedHint = (): void => {
         // also close customized trial modal
         this.setState(() => ({ isShowSubmitSucceed: false }));
         this.props.closeCustomizeModal();
     }
 
-    closeFailedHint = () => {
+    closeFailedHint = (): void => {
         // also close customized trial modal
         this.setState(() => ({ isShowSubmitFailed: false }));
         this.props.closeCustomizeModal();
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         const { copyTrialId } = this.props;
         if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
             const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
@@ -131,7 +131,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
         }
     }
 
-    componentWillReceiveProps(nextProps: CustomizeProps) {
+    componentWillReceiveProps(nextProps: CustomizeProps): void {
         const { copyTrialId } = nextProps;
         if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
             const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
@@ -139,7 +139,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
         }
     }
 
-    render() {
+    render(): React.ReactNode {
         const { closeCustomizeModal, visible } = this.props;
         const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
         const {

src/webui/src/components/Modal/ExperimentDrawer.tsx

@@ -29,7 +29,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
         };
     }
 
-    getExperimentContent = () => {
+    getExperimentContent = (): void => {
         axios
             .all([
                 axios.get(`${MANAGER_IP}/experiment`),
@@ -41,7 +41,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
                     if (res.data.params.searchSpace) {
                         res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
                     }
-                    let trialMessagesArr = res1.data;
+                    const trialMessagesArr = res1.data;
                     const interResultList = res2.data;
                     Object.keys(trialMessagesArr).map(item => {
                         // not deal with trial's hyperParameters
@@ -66,34 +66,34 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
             }));
     }
 
-    downExperimentParameters = () => {
+    downExperimentParameters = (): void => {
         const { experiment } = this.state;
         downFile(experiment, 'experiment.json');
     }
 
-    onWindowResize = () => {
+    onWindowResize = (): void => {
         this.setState(() => ({expDrawerHeight: window.innerHeight - 48}));
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this._isCompareMount = true;
         this.getExperimentContent();
         window.addEventListener('resize', this.onWindowResize);
     }
 
-    componentWillReceiveProps(nextProps: ExpDrawerProps) {
+    componentWillReceiveProps(nextProps: ExpDrawerProps): void {
         const { isVisble } = nextProps;
         if (isVisble === true) {
             this.getExperimentContent();
         }
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         this._isCompareMount = false;
         window.removeEventListener('resize', this.onWindowResize);
     }
 
-    render() {
+    render(): React.ReactNode {
         const { isVisble, closeExpDrawer } = this.props;
         const { experiment, expDrawerHeight } = this.state;
         return (

src/webui/src/components/Modal/LogDrawer.tsx

@@ -33,19 +33,19 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         };
     }
 
-    downloadNNImanager = () => {
+    downloadNNImanager = (): void => {
         if (this.state.nniManagerLogStr !== null) {
             downFile(this.state.nniManagerLogStr, 'nnimanager.log');
         }
     }
 
-    downloadDispatcher = () => {
+    downloadDispatcher = (): void => {
         if (this.state.dispatcherLogStr !== null) {
             downFile(this.state.dispatcherLogStr, 'dispatcher.log');
         }
     }
 
-    dispatcherHTML = () => {
+    dispatcherHTML = (): any => {
         return (
             <div>
                 <span>Dispatcher Log</span>
@@ -56,7 +56,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         );
     }
 
-    nnimanagerHTML = () => {
+    nnimanagerHTML = (): any => {
         return (
             <div>
                 <span>NNImanager Log</span>
@@ -65,21 +65,21 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         );
     }
 
-    setLogDrawerHeight = () => {
+    setLogDrawerHeight = (): void => {
         this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
     }
 
-    async componentDidMount() {
+    async componentDidMount(): Promise<void> {
         this.refresh();
         window.addEventListener('resize', this.setLogDrawerHeight);
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         window.clearTimeout(this.timerId);
         window.removeEventListener('resize', this.setLogDrawerHeight);
     }
 
-    render() {
+    render(): React.ReactNode {
         const { closeDrawer, activeTab } = this.props;
         const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
         return (
@@ -164,7 +164,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         );
     }
 
-    private refresh = () => {
+    private refresh = (): void => {
         window.clearTimeout(this.timerId);
         const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
         const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
@@ -184,7 +184,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         });
     }
 
-    private manualRefresh = () => {
+    private manualRefresh = (): void => {
         this.setState({ isLoading: true });
         this.refresh();
     }

src/webui/src/components/Overview.tsx

@@ -35,30 +35,31 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         };
     }
 
-    clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
+    clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         // #999 panel active bgcolor; #b3b3b3 as usual
         const { changeMetricGraphMode } = this.props;
         changeMetricGraphMode('max');
     }
 
-    clickMinTop = (event: React.SyntheticEvent<EventTarget>) => {
+    clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         const { changeMetricGraphMode } = this.props;
         changeMetricGraphMode('min');
     }
 
-    changeConcurrency = (val: number) => {
+    changeConcurrency = (val: number): void => {
         this.setState({ trialConcurrency: val });
     }
 
-    render() {
+    render(): React.ReactNode {
         const { trialConcurrency } = this.state;
         const { experimentUpdateBroadcast, metricGraphMode } = this.props;
 
         const searchSpace = this.convertSearchSpace();
 
         const bestTrials = this.findBestTrials();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
         const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
         const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
@@ -147,7 +148,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         const searchSpace = Object.assign({}, EXPERIMENT.searchSpace);
         Object.keys(searchSpace).map(item => {
             const key = searchSpace[item]._type;
-            let value = searchSpace[item]._value;
+            const value = searchSpace[item]._value;
             switch (key) {
                 case 'quniform':
                 case 'qnormal':
@@ -161,7 +162,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     }
 
     private findBestTrials(): Trial[] {
-        let bestTrials = TRIALS.sort();
+        const bestTrials = TRIALS.sort();
         if (this.props.metricGraphMode === 'max') {
             bestTrials.reverse().splice(10);
         } else {

src/webui/src/components/SlideBar.tsx

@@ -50,7 +50,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         };
     }
 
-    getNNIversion = () => {
+    getNNIversion = (): void => {
         axios(`${MANAGER_IP}/version`, {
             method: 'GET'
         })
@@ -61,7 +61,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
             });
     }
 
-    handleMenuClick = (e: EventPer) => {
+    handleMenuClick = (e: EventPer): void => {
         this.setState({ menuVisible: false });
         switch (e.key) {
             // to see & download experiment parameters
@@ -87,11 +87,11 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         }
     }
 
-    handleVisibleChange = (flag: boolean) => {
+    handleVisibleChange = (flag: boolean): void => {
         this.setState({ menuVisible: flag });
     }
 
-    getInterval = (value: string) => {
+    getInterval = (value: string): void => {
         if (value === 'close') {
             this.props.changeInterval(0);
         } else {
@@ -99,7 +99,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         }
     }
 
-    menu = () => {
+    menu = (): any => {
         return (
             <Menu onClick={this.handleMenuClick}>
                 <Menu.Item key="1">Experiment Parameters</Menu.Item>
@@ -110,14 +110,14 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
     }
 
     // nav bar
-    navigationBar = () => {
+    navigationBar = (): any => {
         const { version } = this.state;
         const feedBackLink = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         return (
             <Menu onClick={this.handleMenuClick} className="menu-list" style={{ width: 216 }}>
                 {/* <Menu onClick={this.handleMenuClick} className="menu-list" style={{width: window.innerWidth}}> */}
                 <Menu.Item key="feedback">
-                    <a href={feedBackLink} target="_blank">Feedback</a>
+                    <a href={feedBackLink}  rel="noopener noreferrer" target="_blank">Feedback</a>
                 </Menu.Item>
                 <Menu.Item key="version">Version: {version}</Menu.Item>
                 <SubMenu
@@ -137,7 +137,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    mobileTabs = () => {
+    mobileTabs = (): any => {
         return (
             // <Menu className="menuModal" style={{width: 880, position: 'fixed', left: 0, top: 56}}>
             <Menu className="menuModal" style={{ padding: '0 10px' }}>
@@ -147,7 +147,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    refreshInterval = () => {
+    refreshInterval = (): any => {
         const {
             form: { getFieldDecorator },
             // form: { getFieldDecorator, getFieldValue },
@@ -171,7 +171,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    select = () => {
+    select = (): any => {
         const { isdisabledFresh } = this.state;
 
         return (
@@ -189,7 +189,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    fresh = (event: React.SyntheticEvent<EventTarget>) => {
+    fresh = (event: React.SyntheticEvent<EventTarget>): void => {
         event.preventDefault();
         event.stopPropagation();
         this.setState({ isdisabledFresh: true }, () => {
@@ -197,7 +197,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         });
     }
 
-    desktopHTML = () => {
+    desktopHTML = (): any => {
         const { version, menuVisible } = this.state;
         const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         return (
@@ -213,7 +213,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                             className="fresh"
                             type="ghost"
                         >
-                            <a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
+                            <a target="_blank" rel="noopener noreferrer" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
                                 <img
                                     src={require('../static/img/icon/ques.png')}
                                     alt="question"
@@ -246,7 +246,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                         </Dropdown>
                     </span>
                     <span className="feedback">
-                        <a href={feed} target="_blank">
+                        <a href={feed} target="_blank" rel="noopener noreferrer">
                             <img
                                 src={require('../static/img/icon/issue.png')}
                                 alt="NNI github issue"
@@ -260,7 +260,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    tabeltHTML = () => {
+    tabeltHTML = (): any => {
         return (
             <Row className="nav">
                 <Col className="tabelt-left" span={14}>
@@ -280,7 +280,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    mobileHTML = () => {
+    mobileHTML = (): any => {
         const { isdisabledFresh } = this.state;
         return (
             <Row className="nav">
@@ -319,20 +319,20 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
     // close log drawer (nnimanager.dispatcher)
-    closeLogDrawer = () => {
+    closeLogDrawer = (): void => {
         this.setState({ isvisibleLogDrawer: false, activeKey: '' });
     }
 
     // close download experiment parameters drawer
-    closeExpDrawer = () => {
+    closeExpDrawer = (): void => {
         this.setState({ isvisibleExperimentDrawer: false });
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this.getNNIversion();
     }
 
-    render() {
+    render(): React.ReactNode {
         const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>);
         const tablet = (<MediaQuery minWidth={885} maxWidth={1281}>{this.tabeltHTML()}</MediaQuery>);
         const desktop = (<MediaQuery minWidth={1282}>{this.desktopHTML()}</MediaQuery>);

src/webui/src/components/TrialsDetail.tsx

@@ -60,13 +60,15 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             tablePageSize: 20,
             whichGraph: '1',
             searchType: 'id',
-            searchFilter: trial => true,
+            // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-unused-vars
+            searchFilter: trial => true 
         };
     }
 
     // search a trial by trial No. & trial id
-    searchTrial = (event: React.ChangeEvent<HTMLInputElement>) => {
+    searchTrial = (event: React.ChangeEvent<HTMLInputElement>): void => {
         const targetValue = event.target.value;
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-unused-vars
         let filter = (trial: Trial) => true;
         if (!targetValue.trim()) {
             this.setState({ searchFilter: filter });
@@ -74,17 +76,17 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         }
         switch (this.state.searchType) {
             case 'id':
-                filter = trial => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
+                filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
                 break;
             case 'Trial No.':
-                filter = trial => trial.info.sequenceId.toString() === targetValue;
+                filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
                 break;
             case 'status':
-                filter = trial => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
+                filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
                 break;
             case 'parameters':
                 // TODO: support filters like `x: 2` (instead of `"x": 2`)
-                filter = trial => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
+                filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
                 break;
             default:
                 alert(`Unexpected search filter ${this.state.searchType}`);
@@ -92,15 +94,15 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         this.setState({ searchFilter: filter });
     }
 
-    handleTablePageSizeSelect = (value: string) => {
+    handleTablePageSizeSelect = (value: string): void => {
         this.setState({ tablePageSize: value === 'all' ? -1 : parseInt(value, 10) });
     }
 
-    handleWhichTabs = (activeKey: string) => {
+    handleWhichTabs = (activeKey: string): void => {
         this.setState({ whichGraph: activeKey });
     }
 
-    updateSearchFilterType = (value: string) => {
+    updateSearchFilterType = (value: string): void => {
         // clear input value and re-render table
         if (this.searchInput !== null) {
             this.searchInput.value = '';
@@ -108,7 +110,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         this.setState({ searchType: value });
     }
 
-    render() {
+    render(): React.ReactNode {
         const { tablePageSize, whichGraph } = this.state;
         const { columnList, changeColumn } = this.props;
         const source = TRIALS.filter(this.state.searchFilter);
@@ -163,14 +165,14 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     <Col span={14} className="right">
                         <Button
                             className="common"
-                            onClick={() => { if (this.tableList) { this.tableList.addColumn(); }}}
+                            onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); }}}
                         >
                             Add column
                         </Button>
                         <Button
                             className="mediateBtn common"
                             // use child-component tableList's function, the function is in child-component.
-                            onClick={() => { if (this.tableList) { this.tableList.compareBtn(); }}}
+                            onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); }}}
                         >
                             Compare
                         </Button>
@@ -186,6 +188,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                             placeholder={`Search by ${this.state.searchType}`}
                             onChange={this.searchTrial}
                             style={{ width: 230 }}
+                            // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
                             ref={text => (this.searchInput) = text}
                         />
                     </Col>
@@ -196,7 +199,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     columnList={columnList}
                     changeColumn={changeColumn}
                     trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                    ref={(tabList) => this.tableList = tabList}
+                    ref={(tabList) => this.tableList = tabList} // eslint-disable-line @typescript-eslint/explicit-function-return-type
                 />
             </div>
         );

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

@@ -21,7 +21,7 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
 
     }
 
-    render() {
+    render(): React.ReactNode {
         const { accNodata, accuracyData, height } = this.props;
         return (
             <div>

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

@@ -12,7 +12,7 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
         super(props);
     }
 
-    render() {
+    render(): React.ReactNode {
         return (
             <Row className="main">
                 <Col span={8} className="padItem basic">

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

@@ -18,22 +18,22 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
         this.state = { editting: false };
     }
 
-    save = () => {
+    save = (): void => {
         if (this.input.current !== null) {
             this.props.updateValue(this.input.current.value);
             this.setState({ editting: false });
         }
     }
 
-    cancel = () => {
+    cancel = (): void => {
         this.setState({ editting: false });
     }
 
-    edit = () => {
+    edit = (): void => {
         this.setState({ editting: true });
     }
 
-    render() {
+    render(): React.ReactNode {
         if (this.state.editting) {
             return (
                 <Row className="inputBox">

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

@@ -29,7 +29,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         };
     }
 
-    editTrialConcurrency = async (userInput: string) => {
+    editTrialConcurrency = async (userInput: string): Promise<void> => {
         if (!userInput.match(/^[1-9]\d*$/)) {
             message.error('Please enter a positive integer!', 2);
             return;
@@ -46,6 +46,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         // rest api, modify trial concurrency value
         try {
             const res = await axios.put(`${MANAGER_IP}/experiment`, newProfile, {
+                // eslint-disable-next-line @typescript-eslint/camelcase
                 params: { update_type: 'TRIAL_CONCURRENCY' }
             });
             if (res.status === 200) {
@@ -66,20 +67,22 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         }
     }
 
-    isShowDrawer = () => {
+    isShowDrawer = (): void => {
         this.setState({ isShowLogDrawer: true });
     }
 
-    closeDrawer = () => {
+    closeDrawer = (): void => {
         this.setState({ isShowLogDrawer: false });
     }
 
-    render() {
+    render(): React.ReactNode {
         const { bestAccuracy } = this.props;
         const { isShowLogDrawer } = this.state;
 
         const count = TRIALS.countStatus();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
 
         const bar2Percent = (bar2 / EXPERIMENT.profile.params.maxTrialNum) * 100;
@@ -98,6 +101,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                 </div>
             );
         }
+
         return (
             <Row className="progress" id="barBack">
                 <Row className="basic lineBasic">

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

@@ -16,7 +16,7 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
 
     }
 
-    render() {
+    render(): React.ReactNode {
         const { who, percent, description, maxString, bgclass } = this.props;
 
         return (
@@ -31,7 +31,7 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
                                     percent={percent}
                                     strokeWidth={30}
                                     // strokeLinecap={'square'}
-                                    format={() => description}
+                                    format={(): string => description}
                                 />
                             </div>
                             <Row className="description">

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

@@ -13,7 +13,7 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
 
     }
 
-    render() {
+    render(): React.ReactNode {
         const { searchSpace } = this.props;
         return (
             <div className="searchSpace">

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

@@ -12,7 +12,7 @@ interface SuccessTableProps {
     trialIds: string[];
 }
 
-function openRow(record: TableRecord) {
+function openRow(record: TableRecord): any {
     return (
         <OpenRow trialId={record.id} />
     );
@@ -23,7 +23,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
         super(props);
     }
 
-    render() {
+    render(): React.ReactNode {
         const columns = [
             {
                 title: 'Trial No.',
@@ -35,7 +35,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                 dataIndex: 'id',
                 width: 60,
                 className: 'tableHead leftTitle',
-                render: (text: string, record: TableRecord) => {
+                render: (text: string, record: TableRecord): React.ReactNode => {
                     return (
                         <div>{record.id}</div>
                     );
@@ -44,7 +44,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                 title: 'Duration',
                 dataIndex: 'duration',
                 width: 140,
-                render: (text: string, record: TableRecord) => {
+                render: (text: string, record: TableRecord): React.ReactNode => {
                     return (
                         <div className="durationsty"><div>{convertDuration(record.duration)}</div></div>
                     );
@@ -54,7 +54,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
                 dataIndex: 'status',
                 width: 150,
                 className: 'tableStatus',
-                render: (text: string, record: TableRecord) => {
+                render: (text: string, record: TableRecord): React.ReactNode => {
                     return (
                         <div className={`${record.status} commonStyle`}>{record.status}</div>
                     );
@@ -62,7 +62,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
             }, {
                 title: 'Default metric',
                 dataIndex: 'accuracy',
-                render: (text: string, record: TableRecord) => {
+                render: (text: string, record: TableRecord): React.ReactNode => {
                     return (
                         <DefaultMetric trialId={record.id} />
                     );

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

@@ -12,7 +12,7 @@ class Title1 extends React.Component<Title1Props, {}> {
         super(props);
     }
 
-    render() {
+    render(): React.ReactNode {
         const { text, icon, bgcolor } = this.props;
         return (
             <div>

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

@@ -14,12 +14,12 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         super(props);
     }
 
-    render() {
+    render(): React.ReactNode {
         const blacklist = [
             'id', 'logDir', 'startTime', 'endTime',
             'experimentName', 'searchSpace', 'trainingServicePlatform'
         ];
-        const filter = (key: string, val: any) => {
+        const filter = (key: string, val: any): any => {
             if (key === 'trialConcurrency') {
                 return this.props.concurrency;
             }

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

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