Refine webui (#4548)

ts/webui/src/components/modals/Killjob.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/killTrial/Killjob.tsx

 import * as React from 'react';
-import {
-    Stack,
-    FocusTrapCallout,
-    DefaultButton,
-    FocusZone,
-    PrimaryButton,
-    getTheme,
-    mergeStyleSets,
-    FontWeights
-} from '@fluentui/react';
-import { killJob } from '../../static/function';
-import { blocked } from '../buttons/Icon';
-
-const theme = getTheme();
-const styles = mergeStyleSets({
-    buttonArea: {
-        verticalAlign: 'top',
-        display: 'inline-block',
-        textAlign: 'center',
-        height: 32
-    },
-    callout: {
-        maxWidth: 300
-    },
-    header: {
-        padding: '18px 24px 12px'
-    },
-    title: [
-        theme.fonts.xLarge,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ],
-    inner: {
-        height: '100%',
-        padding: '0 24px 20px'
-    },
-    actions: {
-        position: 'relative',
-        marginTop: 20,
-        width: '100%',
-        whiteSpace: 'nowrap'
-    },
-    buttons: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        padding: '0 24px 24px'
-    },
-    subtext: [
-        theme.fonts.small,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ]
-});
+import { Stack, FocusTrapCallout, DefaultButton, FocusZone, PrimaryButton } from '@fluentui/react';
+import { killJob } from '@static/function';
+import { blocked } from '@components/fluent/Icon';
+import { styles } from '@components/experiment/overview/params/basicInfoStyles';
 
 interface KillJobState {
     isCalloutVisible: boolean;
@@ -74,23 +19,6 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
         this.state = { isCalloutVisible: false };
     }
 
-    onDismiss = (): void => {
-        this.setState(() => ({ isCalloutVisible: false }));
-    };
-
-    onKill = (): void => {
-        this.setState({ isCalloutVisible: false }, () => {
-            const { trial } = this.props;
-            killJob(trial.key, trial.id, trial.status);
-        });
-    };
-
-    openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setState({ isCalloutVisible: true });
-    };
-
     render(): React.ReactNode {
         const { isCalloutVisible } = this.state;
         const prompString = 'Are you sure to cancel this trial?';
@@ -135,6 +63,23 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
             </div>
         );
     }
+
+    private onDismiss = (): void => {
+        this.setState(() => ({ isCalloutVisible: false }));
+    };
+
+    private onKill = (): void => {
+        this.setState({ isCalloutVisible: false }, () => {
+            const { trial } = this.props;
+            killJob(trial.key, trial.id, trial.status);
+        });
+    };
+
+    private openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({ isCalloutVisible: true });
+    };
 }
 
 export default KillJob;

ts/webui/src/components/trial-detail/search/GeneralSearch.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/GeneralSearch.tsx

 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Stack, PrimaryButton } from '@fluentui/react';
-import { searchConditonsGap } from '../../modals/ChildrenGap';
+import { gap10 } from '@components/fluent/ChildrenGap';
 import { getSearchInputValueBySearchList } from './searchFunction';
 
 // This file is for search trial ['Trial id', 'Trial No.']
@@ -62,7 +62,7 @@ function GeneralSearch(props): any {
 
     return (
         // Trial id & Trial No.
-        <Stack horizontal className='filterConditions' tokens={searchConditonsGap}>
+        <Stack horizontal className='filterConditions' tokens={gap10}>
             <span>{searchName === 'Trial id' ? 'Includes' : 'Equals to'}</span>
             <input type='text' className='input input-padding' onChange={updateFirstInputVal} value={firstInputVal} />
             <PrimaryButton text='Apply' className='btn-vertical-middle' onClick={startFilterTrial} />

ts/webui/src/components/trial-detail/search/Search.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/Search.tsx

@@ -8,8 +8,8 @@ import {
     DirectionalHint,
     SearchBox
 } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
-import { SearchItems } from '../../../static/interface';
+import { EXPERIMENT } from '@static/datamodel';
+import { SearchItems } from '@static/interface';
 import SearchParameterConditions from './SearchParameterConditions';
 import GeneralSearch from './GeneralSearch';
 import { classNames, isChoiceType } from './searchFunction';

ts/webui/src/components/trial-detail/search/SearchParameterConditions.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/SearchParameterConditions.tsx

 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Stack, PrimaryButton, Dropdown, IDropdownOption } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
+import { EXPERIMENT } from '@static/datamodel';
 import { getDropdownOptions, getSearchInputValueBySearchList } from './searchFunction';
-import { searchConditonsGap } from '../../modals/ChildrenGap';
+import { gap10 } from '@components/fluent/ChildrenGap';
 
 // This file is for filtering trial parameters and trial status
 
@@ -131,7 +131,7 @@ function SearchParameterConditions(props): any {
 
     return (
         // for trial parameters & Status
-        <Stack horizontal className='filterConditions' tokens={searchConditonsGap}>
+        <Stack horizontal className='filterConditions' tokens={gap10}>
             <Dropdown
                 selectedKey={operatorVal}
                 options={operatorList.map(item => ({

ts/webui/src/components/trial-detail/search/searchFunction.ts → ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/searchFunction.ts

 import { mergeStyleSets } from '@fluentui/react';
-import { trialJobStatus } from '../../../static/const';
-import { EXPERIMENT } from '../../../static/datamodel';
-import { TableObj, SearchItems } from '../../../static/interface';
+import { trialJobStatus } from '@static/const';
+import { EXPERIMENT } from '@static/datamodel';
+import { TableObj, SearchItems } from '@static/interface';
 
 const classNames = mergeStyleSets({
     menu: {

ts/webui/src/components/modals/tensorboard/TensorboardUI.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/tensorboard/TensorboardUI.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
-import { MANAGER_IP } from '../../../static/const';
-import { disableTensorboard, getTensorboardMenu } from '../../../static/function';
-import { Tensorboard } from '../../../static/interface';
+import { MANAGER_IP } from '@static/const';
+import { disableTensorboard, getTensorboardMenu } from '@static/function';
+import { Tensorboard } from '@static/interface';
 import TensorboardDialog from './TensorboardDialog';
 
 function TensorboardUI(props): any {

ts/webui/src/components/managementExp/ExperimentManager.tsx → ts/webui/src/components/experimentManagement/ExperimentManagerIndex.tsx

 import * as React from 'react';
 import { Stack, DetailsList, DefaultButton, Icon, SearchBox, IColumn, IStackTokens } from '@fluentui/react';
-import { ExperimentsManager } from '../../static/model/experimentsManager';
-import { expformatTimestamp, copyAndSort } from '../../static/function';
-import { AllExperimentList, SortInfo } from '../../static/interface';
-import MessageInfo from '../modals/MessageInfo';
+import { ExperimentsManager } from '@model/experimentsManager';
+import { expformatTimestamp, copyAndSort } from '@static/function';
+import { AllExperimentList, SortInfo } from '@static/interface';
+import MessageInfo from '@components/common/MessageInfo';
 import { compareDate, filterByStatusOrPlatform, getSortedSource } from './expFunction';
 import { MAXSCREENCOLUMNWIDHT, MINSCREENCOLUMNWIDHT } from './experimentConst';
 import { Hearder } from './Header';
 import TrialIdColumn from './TrialIdColumn';
 import FilterBtns from './FilterBtns';
-import { TitleContext } from '../overview/TitleContext';
-import { Title } from '../overview/Title';
-import '../../App.scss';
-import '../../static/style/common.scss';
-import '../../static/style/nav/nav.scss';
-import '../../static/style/experiment/experiment.scss';
-import '../../static/style/overview/probar.scss';
-import '../../static/style/tableStatus.css';
+import { TitleContext } from '../experiment/overview/TitleContext';
+import { Title } from '../experiment/overview/Title';
+import '@style/App.scss';
+import '@style/nav/nav.scss';
+import '@style/common/common.scss';
+import '@style/common/experimentStatusColor.scss';
+import '@style/common/trialStatus.css';
+import '@style/experimentManagement/experiment.scss';
 
 const expTokens: IStackTokens = {
     childrenGap: 25

ts/webui/src/components/managementExp/FilterBtns.tsx → ts/webui/src/components/experimentManagement/FilterBtns.tsx

 import * as React from 'react';
 import { DefaultButton, Icon, Dropdown, DatePicker, DayOfWeek } from '@fluentui/react';
-import { EXPERIMENTSTATUS } from '../../static/const';
+import { EXPERIMENTSTATUS } from '@static/const';
 import { fillOptions } from './expFunction';
 
 interface FilterBtnsProps {

ts/webui/src/components/managementExp/Header.tsx → ts/webui/src/components/experimentManagement/Header.tsx

 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Stack, StackItem, CommandBarButton } from '@fluentui/react';
-import { RevToggleKey } from '../buttons/Icon';
-import { NNILOGO } from '../stateless-component/NNItabs';
-import { stackTokens, stackStyle } from '../NavConst';
+import { RevToggleKey } from '../fluent/Icon';
+import { NNILOGO } from '../nav/slideNav/NNItabs';
+import { gap15, stackStyle } from '../fluent/ChildrenGap';
 
 export const Hearder = (): any => (
     <div className='header'>
@@ -14,7 +14,7 @@ export const Hearder = (): any => (
                     <span className='logoTitle'>Neural Network Intelligence</span>
                 </StackItem>
                 <StackItem grow={70} className='navOptions'>
-                    <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
+                    <Stack horizontal horizontalAlign='end' tokens={gap15} styles={stackStyle}>
                         <Link to='/oview' className='experiment'>
                             <CommandBarButton iconProps={RevToggleKey} text='Back to the experiment' />
                         </Link>

ts/webui/src/components/managementExp/TrialIdColumn.tsx → ts/webui/src/components/experimentManagement/TrialIdColumn.tsx

 import * as React from 'react';
 import { Stack } from '@fluentui/react';
-import { AllExperimentList } from '../../static/interface';
-import CopyButton from '../public-child/CopyButton';
+import { AllExperimentList } from '@static/interface';
+import CopyButton from '../common/CopyButton';
 
 interface TrialIdColumnProps {
     item: AllExperimentList;

ts/webui/src/components/managementExp/expFunction.ts → ts/webui/src/components/experimentManagement/expFunction.ts

-import { AllExperimentList, SortInfo } from '../../static/interface';
-import { copyAndSort } from '../../static/function';
+import { AllExperimentList, SortInfo } from '@static/interface';
+import { copyAndSort } from '@static/function';
 
 function compareDate(date1: Date, date2: Date): boolean {
     if (date1 !== undefined && date2 !== undefined) {

ts/webui/src/components/NavConst.ts → ts/webui/src/components/fluent/ChildrenGap.ts

 import { IStackTokens, IStackStyles } from '@fluentui/react';
 
-const stackTokens: IStackTokens = {
+// name: gap + specific gap number
+
+const gap10: IStackTokens = {
+    childrenGap: 10
+};
+
+const gap15: IStackTokens = {
     childrenGap: 15
 };
+
 const stackStyle: IStackStyles = {
     root: {
         minWidth: 400,
@@ -12,4 +19,4 @@ const stackStyle: IStackStyles = {
     }
 };
 
-export { stackTokens, stackStyle };
+export { gap10, gap15, stackStyle };

ts/webui/src/components/modals/ChildrenGap.ts

-import { IStackTokens } from '@fluentui/react';
-
-const searchConditonsGap: IStackTokens = {
-    childrenGap: 10
-};
-
-export { searchConditonsGap };

ts/webui/src/components/NavCon.tsx → ts/webui/src/components/nav/Nav.tsx

 import * as React from 'react';
 import axios from 'axios';
-import { WEBUIDOC, MANAGER_IP } from '../static/const';
 import { Stack, StackItem, CommandBarButton, IContextualMenuProps } from '@fluentui/react';
 import { Link } from 'react-router-dom';
-import { infoIconAbout, timeIcon, disableUpdates, requency, closeTimer, ChevronRightMed } from './buttons/Icon';
-import ExperimentSummaryPanel from './modals/ExperimentSummaryPanel';
-import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
-import { EXPERIMENT } from '../static/datamodel';
-import { stackTokens, stackStyle } from './NavConst';
-import '../static/style/nav/nav.scss';
-import '../static/style/icon.scss';
+import { WEBUIDOC, MANAGER_IP } from '@static/const';
+import ExperimentSummaryPanel from './slideNav/ExperimentSummaryPanel';
+import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './slideNav/NNItabs';
+import { EXPERIMENT } from '@static/datamodel';
+import { gap15, stackStyle } from '@components/fluent/ChildrenGap';
+import {
+    infoIconAbout,
+    timeIcon,
+    disableUpdates,
+    requency,
+    closeTimer,
+    ChevronRightMed
+} from '@components/fluent/Icon';
+import '@style/nav/nav.scss';
+import '@style/icon.scss';
 
 interface NavState {
     version: string;
@@ -121,7 +128,7 @@ class NavCon extends React.Component<NavProps, NavState> {
                         <span>{DETAILTABS}</span>
                     </StackItem>
                     <StackItem grow={70} className='navOptions'>
-                        <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
+                        <Stack horizontal horizontalAlign='end' tokens={gap15} styles={stackStyle}>
                             {/* refresh button danyi*/}
                             {/* TODO: fix bug */}
                             {/* <CommandBarButton

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

 import * as React from 'react';
-import { downFile } from '../../static/function';
 import { Stack, PrimaryButton, DefaultButton, Panel, StackItem } from '@fluentui/react';
-import { DRAWEROPTION } from '../../static/const';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { caclMonacoEditorHeight } from '../../static/function';
 import MonacoEditor from 'react-monaco-editor';
-import '../../static/style/logDrawer.scss';
+import { downFile } from '@static/function';
+import { DRAWEROPTION } from '@static/const';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { caclMonacoEditorHeight } from '@static/function';
+import '@style/logPanel.scss';
 
 interface ExpDrawerProps {
     closeExpDrawer: () => void;