Refine webui (#4548)

ts/webui/src/components/modals/LogPanel.tsx → ts/webui/src/components/nav/slideNav/LogPanel.tsx

 import * as React from 'react';
 import axios from 'axios';
 import { Stack, StackItem, Panel, PrimaryButton, DefaultButton, Pivot, PivotItem } from '@fluentui/react';
-import { infoIcon } from '../buttons/Icon';
-import { DOWNLOAD_IP } from '../../static/const';
-import { downFile } from '../../static/function';
-import MonacoHTML from '../public-child/MonacoEditor';
-import '../../static/style/logDrawer.scss';
-
-interface LogDrawerProps {
-    closeDrawer: () => void;
+import { DOWNLOAD_IP } from '@static/const';
+import { downFile } from '@static/function';
+import { infoIcon } from '@components/fluent/Icon';
+import MonacoHTML from '@components/common/MonacoEditor';
+import '@style/logPanel.scss';
+
+interface LogPanelProps {
+    closePanel: () => void;
     activeTab?: string;
 }
 
-interface LogDrawerState {
+interface LogPanelState {
     nniManagerLogStr: string | null;
     dispatcherLogStr: string | null;
     isLoading: boolean;
-    logDrawerHeight: number;
+    logPanelHeight: number;
 }
 
-class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
+class LogPanel extends React.Component<LogPanelProps, LogPanelState> {
     private timerId: number | undefined;
 
-    constructor(props: LogDrawerProps) {
+    constructor(props: LogPanelProps) {
         super(props);
 
         this.state = {
             nniManagerLogStr: null,
             dispatcherLogStr: null,
             isLoading: true,
-            logDrawerHeight: window.innerHeight
+            logPanelHeight: window.innerHeight
         };
     }
 
@@ -63,25 +63,25 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         </div>
     );
 
-    setLogDrawerHeight = (): void => {
-        this.setState(() => ({ logDrawerHeight: window.innerHeight }));
+    setLogPanelHeight = (): void => {
+        this.setState(() => ({ logPanelHeight: window.innerHeight }));
     };
 
     async componentDidMount(): Promise<void> {
         this.refresh();
-        window.addEventListener('resize', this.setLogDrawerHeight);
+        window.addEventListener('resize', this.setLogPanelHeight);
     }
 
     componentWillUnmount(): void {
         window.clearTimeout(this.timerId);
-        window.removeEventListener('resize', this.setLogDrawerHeight);
+        window.removeEventListener('resize', this.setLogPanelHeight);
     }
 
     render(): React.ReactNode {
-        const { closeDrawer, activeTab } = this.props;
-        const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
+        const { closePanel, activeTab } = this.props;
+        const { nniManagerLogStr, dispatcherLogStr, isLoading, logPanelHeight } = this.state;
         // tab[height: 56] + tab[margin-bottom: 20] + button[32] + button[margin-top: 45, -bottom: 7] + fluent-panel own paddingBottom[20] + title-border[2]
-        const monacoHeight = logDrawerHeight - 182;
+        const monacoHeight = logPanelHeight - 182;
         return (
             <Stack>
                 <Panel
@@ -89,7 +89,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     hasCloseButton={false}
                     isFooterAtBottom={true}
                     isLightDismiss={true}
-                    onLightDismissClick={closeDrawer}
+                    onLightDismissClick={closePanel}
                     className='logPanel'
                 >
                     <Pivot selectedKey={activeTab} style={{ minHeight: 190 }}>
@@ -105,7 +105,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                                         <PrimaryButton text='Download' onClick={this.downloadDispatcher} />
                                     </StackItem>
                                     <StackItem grow={12} className='close'>
-                                        <DefaultButton text='Close' onClick={closeDrawer} />
+                                        <DefaultButton text='Close' onClick={closePanel} />
                                     </StackItem>
                                 </Stack>
                             </div>
@@ -122,7 +122,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                                         <PrimaryButton text='Download' onClick={this.downloadNNImanager} />
                                     </StackItem>
                                     <StackItem grow={12} className='close'>
-                                        <DefaultButton text='Close' onClick={closeDrawer} />
+                                        <DefaultButton text='Close' onClick={closePanel} />
                                     </StackItem>
                                 </Stack>
                             </div>
@@ -159,4 +159,4 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
     };
 }
 
-export default LogDrawer;
+export default LogPanel;

ts/webui/src/components/stateless-component/NNItabs.tsx → ts/webui/src/components/nav/slideNav/NNItabs.tsx

 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { getPrefix } from '../../static/function';
+import { getPrefix } from '@static/function';
 
 const OVERVIEWTABS = (
     <NavLink to='/oview' activeClassName='selected' className='common-tabs'>

ts/webui/src/components/slideNav/SlideNavBtns.tsx → ts/webui/src/components/nav/slideNav/SlideNavBtns.tsx

@@ -2,10 +2,14 @@ import React, { useState, useCallback } from 'react';
 import { Stack, DefaultButton, Icon } from '@fluentui/react';
 import MediaQuery from 'react-responsive';
 import TrialConfigPanel from './TrialConfigPanel';
-import LogPanel from '../modals/LogPanel';
+import LogPanel from './LogPanel';
 import IconButtonTemplate from './IconButtonTemplet';
-import '../../static/style/overview/panel.scss';
+import '@style/nav/slideNavBtns.scss';
 
+/***
+ * this file is the container of [config, search space, dispatcher/nnimanager log]
+ * these three button is in the right of page
+ */
 export const SlideNavBtns = (): any => {
     const [isShowConfigPanel, setShowConfigPanle] = useState(false);
     const [isShowLogPanel, setShowLogPanel] = useState(false);
@@ -57,7 +61,7 @@ export const SlideNavBtns = (): any => {
             </Stack>
             {isShowConfigPanel && <TrialConfigPanel panelName={panelName} hideConfigPanel={hideConfigPanel} />}
             {/* the panel for dispatcher & nnimanager log message */}
-            {isShowLogPanel && <LogPanel closeDrawer={hideLogPanel} />}
+            {isShowLogPanel && <LogPanel closePanel={hideLogPanel} />}
         </React.Fragment>
     );
 };

ts/webui/src/components/slideNav/TrialConfigPanel.tsx → ts/webui/src/components/nav/slideNav/TrialConfigPanel.tsx

 import * as React from 'react';
 import { Stack, Panel, PrimaryButton } from '@fluentui/react';
-import { EXPERIMENT } from '../../static/datamodel';
-import MonacoEditor from 'react-monaco-editor';
-import { MONACO } from '../../static/const';
-import { convertDuration, caclMonacoEditorHeight } from '../../static/function';
-import { prettyStringify } from '../../static/json_util';
 import lodash from 'lodash';
-import '../../static/style/logDrawer.scss';
+import MonacoEditor from 'react-monaco-editor';
+import { EXPERIMENT } from '@static/datamodel';
+import { MONACO } from '@static/const';
+import { convertDuration, caclMonacoEditorHeight } from '@static/function';
+import { prettyStringify } from '@static/jsonutil';
+import '@static/style/logPanel.scss';
 
 interface LogDrawerProps {
     hideConfigPanel: () => void;

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

-import * as React from 'react';
-import { TRIALS } from '../../static/datamodel';
-
-interface IntermediateValProps {
-    trialId: string;
-}
-
-class IntermediateVal extends React.Component<IntermediateValProps, {}> {
-    constructor(props: IntermediateValProps) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
-    }
-}
-
-export default IntermediateVal;

ts/webui/src/index.tsx

@@ -3,11 +3,11 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import { getPrefix } from './static/function';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-const Overview = lazy(() => import('./components/Overview'));
-const TrialsDetail = lazy(() => import('./components/TrialsDetail'));
-const Experiment = lazy(() => import('./components/managementExp/ExperimentManager'));
-import './index.css';
-import './static/style/loading.scss';
+const Overview = lazy(() => import('./components/experiment/overview/Overview'));
+const TrialsDetail = lazy(() => import('./components/experiment/trialdetail/TrialsDetail'));
+const ExperimentManagerIndex = lazy(() => import('./components/experimentManagement/ExperimentManagerIndex'));
+import '@style/index.css';
+import '@style/loading.scss';
 import * as serviceWorker from './serviceWorker';
 
 const path = getPrefix();
@@ -21,7 +21,7 @@ ReactDOM.render(
                 </div>
             }
         >
-            <Route path='/experiment' component={Experiment} exact />
+            <Route path='/experiment' component={ExperimentManagerIndex} exact />
             <Switch>
                 <App>
                     <Route path='/' component={Overview} exact />

ts/webui/src/static/style/overview/probar.scss → ts/webui/src/static/style/common/experimentStatusColor.scss

@@ -36,6 +36,7 @@ $error: #a4262c;
     }
 }
 
+/* set color for experiment best-metric value in overview page */
 .bestMetric {
     .DONE,
     .STOPPED,

ts/webui/src/static/style/tableStatus.css → ts/webui/src/static/style/common/trialStatus.css

-/* all table status font-color */
+/* all trial status font-color in the table */
 .RUNNING,
 .USER_CANCELED {
     color: #0071bc;