[webui] eslint fix

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,15 +27,15 @@ 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 }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
         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,40 +106,40 @@ 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;
             this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
         }
     }
 
-    componentWillReceiveProps(nextProps: CustomizeProps) {
+    componentWillReceiveProps(nextProps: CustomizeProps): void {
         const { copyTrialId } = nextProps;
         if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
             const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
             this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
         }
     }
 
-    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();
     }