Refine webui (#4548)

ts/webui/.eslintrc

@@ -10,7 +10,8 @@
     },
     "plugins": [
         "@typescript-eslint",
-        "eslint-plugin-prettier"
+        "eslint-plugin-prettier",
+        "import"
     ],
     "extends": [
         "eslint:recommended",
@@ -50,6 +51,15 @@
         "react": {
             "version": "detect"
         },
+        "import/resolver": {
+            "alias": {
+                "@": "src",
+                "@components": "src/components",
+                "@static": "src/static",
+                "@style": "src/static/style",
+                "@model": "src/static/model"
+            }
+        },
         "ignorePatterns": [
             "node_modules/",
             "build/",

ts/webui/scripts/config/webpack.config.dev.js

@@ -27,7 +27,14 @@ const config = {
     },
     optimization: { minimize: false },
     resolve: {
-        modules: [ 'node_modules' ],
+        modules: [ 'node_modules', 'src' ],
+        alias: { 
+            '@': paths.appSrc,
+            '@components': `${paths.appSrc}/components`,
+            '@static': `${paths.appSrc}/static`,
+            '@style': `${paths.appSrc}/static/style`,
+            '@model': `${paths.appSrc}/static/model`
+        },
         extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
     },
     module: {

ts/webui/scripts/config/webpack.config.js

@@ -19,7 +19,11 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
-const modules = require('./modules');
+// note this line because it will cause this error:
+// "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+// ' Create React App does not support other values at this time.'
+// Only set baseUrl to '.' could fix the `absolute path` issue
+// const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
@@ -252,7 +256,16 @@ module.exports = function(webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
+      // modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
+      modules: ['node_modules', 'src'],
+      alias: {
+        'react-native': 'react-native-web',
+        '@': paths.appSrc,
+        '@components': `${paths.appSrc}/components`,
+        '@static': `${paths.appSrc}/static`,
+        '@style': `${paths.appSrc}/static/style`,
+        '@model': `${paths.appSrc}/static/model`
+      },
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
@@ -262,11 +275,6 @@ module.exports = function(webpackEnv) {
       extensions: paths.moduleFileExtensions
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-      },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
         // guards against forgotten dependencies and such.

ts/webui/src/App.tsx

 import * as React from 'react';
 import { Stack } from '@fluentui/react';
-import { COLUMN } from './static/const';
-import { EXPERIMENT, TRIALS } from './static/datamodel';
-import { isManagerExperimentPage } from './static/function';
-import NavCon from './components/NavCon';
-import MessageInfo from './components/modals/MessageInfo';
-import { SlideNavBtns } from './components/slideNav/SlideNavBtns';
+import { SlideNavBtns } from '@components/nav/slideNav/SlideNavBtns';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import NavCon from '@components/nav/Nav';
+import MessageInfo from '@components/common/MessageInfo';
+import { COLUMN } from '@static/const';
+import { isManagerExperimentPage } from '@static/function';
+
+import '@style/App.scss';
+import '@style/common/common.scss';
+import '@style/experiment/trialdetail/trialsDetail.scss';
+
 const echarts = require('echarts/lib/echarts');
 echarts.registerTheme('nni_theme', {
     color: '#3c8dbc'
 });
-import './App.scss';
-import './static/style/common.scss';
-import './static/style/trialsDetail.scss';
 
 interface AppState {
     interval: number;

ts/webui/src/components/public-child/CopyButton.tsx → ts/webui/src/components/common/CopyButton.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
-import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
+import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
 
 const COPIED_TOOLTIP_CLOSE_DELAY = 1000;
 

ts/webui/src/components/public-child/ExpandableDetails.tsx → ts/webui/src/components/common/ExpandableDetails.tsx

 import * as React from 'react';
 import { DetailsRow, IDetailsRowBaseProps } from '@fluentui/react';
-import OpenRow from '../public-child/OpenRow';
+import OpenRow from './OpenRow';
 
 interface ExpandableDetailsProps {
     detailsProps: IDetailsRowBaseProps;

ts/webui/src/components/public-child/OpenRow.tsx → ts/webui/src/components/common/OpenRow.tsx

 import * as React from 'react';
 import * as copy from 'copy-to-clipboard';
 import { Stack, PrimaryButton, Pivot, PivotItem, DefaultButton } from '@fluentui/react';
-import { Trial } from '../../static/model/trial';
-import { MANAGER_IP, RETIARIIPARAMETERS } from '../../static/const';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { reformatRetiariiParameter } from '../../static/function';
 import JSONTree from 'react-json-tree';
-import PaiTrialLog from '../public-child/PaiTrialLog';
-import TrialLog from '../public-child/TrialLog';
-import MessageInfo from '../modals/MessageInfo';
-import PanelMonacoEditor from '../public-child/PanelMonacoEditor';
-import '../../static/style/overview/overview.scss';
-import '../../static/style/copyParameter.scss';
-import '../../static/style/openRow.scss';
+import { Trial } from '@model/trial';
+import { MANAGER_IP, RETIARIIPARAMETERS } from '@static/const';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { reformatRetiariiParameter } from '@static/function';
+import PaiTrialLog from './PaiTrialLog';
+import TrialLog from './TrialLog';
+import MessageInfo from './MessageInfo';
+import PanelMonacoEditor from './PanelMonacoEditor';
+import '@style/experiment/overview/overview.scss';
+import '@style/copyParameter.scss';
+import '@style/openRow.scss';
 
 /**
  *  netron URL must be synchronized with ts/nni_manager/rest_server/index.ts`.

ts/webui/src/components/public-child/PaiTrialChild.tsx → ts/webui/src/components/common/PaiTrialChild.tsx

 import * as React from 'react';
-import { DOWNLOAD_IP } from '../../static/const';
+import { DOWNLOAD_IP } from '@static/const';
 import LogPathChild from './LogPathChild';
 
 interface PaiTrialChildProps {

ts/webui/src/components/public-child/PaiTrialLog.tsx → ts/webui/src/components/common/PaiTrialLog.tsx

 import * as React from 'react';
-import { DOWNLOAD_IP } from '../../static/const';
+import { DOWNLOAD_IP } from '@static/const';
 import PaiTrialChild from './PaiTrialChild';
 import LogPathChild from './LogPathChild';
 

ts/webui/src/components/public-child/PanelMonacoEditor.tsx → ts/webui/src/components/common/PanelMonacoEditor.tsx

 import * as React from 'react';
 import { Stack, Panel, PrimaryButton } from '@fluentui/react';
 import MonacoEditor from 'react-monaco-editor';
-import { caclMonacoEditorHeight } from '../../static/function';
-import '../../static/style/logDrawer.scss';
+import { caclMonacoEditorHeight } from '@static/function';
+import '@style/logPanel.scss';
 
-interface LogDrawerProps {
+interface LogPanelProps {
     hideConfigPanel: () => void;
     panelName: string;
     panelContent: string;
 }
 
-interface LogDrawerState {
+interface LogPanelState {
     panelInnerHeight: number;
 }
 
@@ -21,8 +21,8 @@ interface LogDrawerState {
  * panel
  */
 
-class PanelMonacoEditor extends React.Component<LogDrawerProps, LogDrawerState> {
-    constructor(props: LogDrawerProps) {
+class PanelMonacoEditor extends React.Component<LogPanelProps, LogPanelState> {
+    constructor(props: LogPanelProps) {
         super(props);
 
         this.state = {
@@ -31,16 +31,16 @@ class PanelMonacoEditor extends React.Component<LogDrawerProps, LogDrawerState>
     }
 
     // use arrow function for change window size met error: this.setState is not a function
-    setLogDrawerHeight = (): void => {
+    setLogPanelHeight = (): void => {
         this.setState(() => ({ panelInnerHeight: window.innerHeight, innerWidth: window.innerWidth }));
     };
 
     async componentDidMount(): Promise<void> {
-        window.addEventListener('resize', this.setLogDrawerHeight);
+        window.addEventListener('resize', this.setLogPanelHeight);
     }
 
     componentWillUnmount(): void {
-        window.removeEventListener('resize', this.setLogDrawerHeight);
+        window.removeEventListener('resize', this.setLogPanelHeight);
     }
 
     render(): React.ReactNode {

ts/webui/src/components/Overview.tsx → ts/webui/src/components/experiment/overview/Overview.tsx

 import * as React from 'react';
 import { Stack, Icon, Dropdown, DefaultButton } from '@fluentui/react';
-import { EXPERIMENT, TRIALS } from '../static/datamodel';
-import { Trial } from '../static/model/trial';
-import { AppContext } from '../App';
-import { Title } from './overview/Title';
-import SuccessTable from './overview/table/SuccessTable';
-import DefaultPoint from './trial-detail/DefaultMetricPoint';
-import { BasicInfo } from './overview/params/BasicInfo';
-import { ExpDuration } from './overview/count/ExpDuration';
-import { ExpDurationContext } from './overview/count/ExpDurationContext';
-import { TrialCount } from './overview/count/TrialCount';
-import { Command1 } from './overview/command/Command1';
-import { Command2 } from './overview/command/Command2';
-import { TitleContext } from './overview/TitleContext';
-import { itemStyleSucceed, entriesOption } from './overview/overviewConst';
-import '../static/style/overview/overview.scss';
-import '../static/style/overview/topTrial.scss';
-import '../static/style/logPath.scss';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { Trial } from '@static/model/trial';
+import { AppContext } from '@/App';
+import { Title } from './Title';
+import SuccessTable from './table/SuccessTable';
+import DefaultPoint from '../trialdetail/chart/DefaultMetricPoint';
+import { BasicInfo } from './params/BasicInfo';
+import { ExpDuration } from './count/ExpDuration';
+import { ExpDurationContext } from './count/ExpDurationContext';
+import { TrialCount } from './count/TrialCount';
+import { Command1 } from './command/Command1';
+import { Command2 } from './command/Command2';
+import { TitleContext } from './TitleContext';
+import { itemStyleSucceed, entriesOption } from './overviewConst';
+import '@style/experiment/overview/overview.scss';
+import '@style/experiment/overview/topTrial.scss';
+import '@style/logPath.scss';
+
+/**
+ * single experiment
+ * overview page
+ */
 
 interface OverviewState {
     trialConcurrency: number;

ts/webui/src/components/overview/Title.tsx → ts/webui/src/components/experiment/overview/Title.tsx

 import React from 'react';
-import { Stack, Icon, initializeIcons } from '@fluentui/react';
+import { Stack, Icon } from '@fluentui/react';
 import { TitleContext } from './TitleContext';
-import '../../static/style/overview/overviewTitle.scss';
-initializeIcons();
+import '@style/experiment/overview/overviewTitle.scss';
 
 export const Title = (): any => (
     <TitleContext.Consumer>

ts/webui/src/components/overview/command/Command1.tsx → ts/webui/src/components/experiment/overview/command/Command1.tsx

 import React from 'react';
-import { EXPERIMENT } from '../../../static/datamodel';
+import { EXPERIMENT } from '@static/datamodel';
 import { rightEidtParam } from '../count/commonStyle';
-import '../../../static/style/overview/command.scss';
+import '@style/experiment/overview/command.scss';
 
 export const Command1 = (): any => {
     const tuner = EXPERIMENT.profile.params.tuner;

ts/webui/src/components/overview/command/Command2.tsx → ts/webui/src/components/experiment/overview/command/Command2.tsx

 import React from 'react';
 import { TooltipHost, DirectionalHint } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
+import { EXPERIMENT } from '@static/datamodel';
 import { leftProgress } from '../count/commonStyle';
-import { TOOLTIP_BACKGROUND_COLOR } from '../../../static/const';
-import '../../../static/style/overview/command.scss';
+import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import '@style/experiment/overview/command.scss';
 
 export const Command2 = (): any => {
     return (