Update webui react version and use fluent ui (#2873)

src/webui/package.json

@@ -22,12 +22,15 @@
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
+    "jest": "24.7.1",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.7.1",
+    "jest-watch-typeahead": "0.3.0",
     "json5": "^2.1.1",
     "mini-css-extract-plugin": "0.5.0",
     "monaco-editor": "^0.19.0",
     "monaco-editor-webpack-plugin": "^1.8.1",
     "node-sass": "^4.13.0",
-    "office-ui-fabric-react": "^7.78.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "parcoord-es": "^2.2.10",
     "pnp-webpack-plugin": "1.2.1",
@@ -44,7 +47,8 @@
     "react-monaco-editor": "^0.32.1",
     "react-paginate": "^6.3.2",
     "react-pagination": "^1.0.0",
-    "react-router": "^3.2.3",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-table": "^7.0.0-rc.15",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
@@ -59,17 +63,16 @@
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
+    "@fluentui/react": "^7.135.0",
     "@svgr/webpack": "4.1.0",
     "@types/d3": "^5.7.2",
     "@types/jest": "24.0.12",
     "@types/json5": "^0.0.30",
-    "@types/node": "^10.13.0",
-    "@types/react": "16.8.6",
-    "@types/react-dom": "^16.0.7",
-    "@types/react-router": "^3.0.20",
+    "@types/node": "^10.14.2",
+    "@types/react": "16.8.15",
+    "@types/react-dom": "16.8.4",
     "@typescript-eslint/eslint-plugin": "^2.11.0",
     "@typescript-eslint/parser": "^2.11.0",
-    "@uifabric/fluent-theme": "^0.16.7",
     "concurrently": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-react-app": "^4.0.0",

src/webui/src/App.tsx

 import * as React from 'react';
-import { Stack } from 'office-ui-fabric-react';
+import { Stack } from '@fluentui/react';
 import { COLUMN } from './static/const';
 import { EXPERIMENT, TRIALS } from './static/datamodel';
 import NavCon from './components/NavCon';
-import MessageInfo from './components/Modals/MessageInfo';
+import MessageInfo from './components/modals/MessageInfo';
 import './App.scss';
 
 interface AppState {
@@ -18,6 +18,21 @@ interface AppState {
     isUpdate: boolean;
 }
 
+export const AppContext = React.createContext({
+    interval: 10, // sendons
+    columnList: COLUMN,
+    experimentUpdateBroadcast: 0,
+    trialsUpdateBroadcast: 0,
+    metricGraphMode: 'max',
+    bestTrialEntries: '10',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeColumn: (val: string[]) => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeMetricGraphMode: ( val: 'max' | 'min') => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeEntries: (val: string) => {}
+});
+
 class App extends React.Component<{}, AppState> {
     private timerId!: number | undefined;
     private dataFormatimer!: number;
@@ -103,8 +118,7 @@ class App extends React.Component<{}, AppState> {
     }
 
     shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
-        
-        if(!(nextState.isUpdate || nextState.isUpdate === undefined)){
+        if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
             nextState.isUpdate = true;
             return false;
         }
@@ -126,19 +140,6 @@ class App extends React.Component<{}, AppState> {
             { errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
             { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
         ];
-
-        const reactPropsChildren = React.Children.map(this.props.children, child =>
-            React.cloneElement(
-                child as React.ReactElement<any>, {
-                interval,
-                columnList, changeColumn: this.changeColumn,
-                experimentUpdateBroadcast,
-                trialsUpdateBroadcast,
-                metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
-                bestTrialEntries, changeEntries: this.changeEntries
-            })
-        );
-
         return (
             <Stack className="nni" style={{ minHeight: window.innerHeight }}>
                 <div className="header">
@@ -161,7 +162,19 @@ class App extends React.Component<{}, AppState> {
                         {isillegalFinal && <div className="warning">
                             <MessageInfo info={expWarningMessage} typeInfo="warning" />
                         </div>}
-                        {reactPropsChildren}
+                        <AppContext.Provider value={{
+                            interval,
+                            columnList, 
+                            changeColumn: this.changeColumn,
+                            experimentUpdateBroadcast,
+                            trialsUpdateBroadcast,
+                            metricGraphMode, 
+                            changeMetricGraphMode: this.changeMetricGraphMode,
+                            bestTrialEntries, 
+                            changeEntries: this.changeEntries
+                        }}>
+                            {this.props.children}
+                        </AppContext.Provider>
                     </Stack>
                 </Stack>
             </Stack>
@@ -203,5 +216,3 @@ class App extends React.Component<{}, AppState> {
 }
 
 export default App;
-
-

src/webui/src/components/NavCon.tsx

@@ -4,13 +4,13 @@ import { WEBUIDOC, MANAGER_IP } from '../static/const';
 import {
     Stack, initializeIcons, StackItem, CommandBarButton,
     IContextualMenuProps, IStackTokens, IStackStyles
-} from 'office-ui-fabric-react';
-import LogPanel from './Modals/LogPanel';
-import ExperimentPanel from './Modals/ExperimentPanel';
+} from '@fluentui/react';
+import LogPanel from './modals/LogPanel';
+import ExperimentPanel from './modals/ExperimentPanel';
 import {
     downLoadIcon, infoIconAbout,
     timeIcon, disableUpdates, requency, closeTimer
-} from './Buttons/Icon';
+} from './buttons/Icon';
 import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
 import { EXPERIMENT } from '../static/datamodel';
 import '../static/style/nav/nav.scss';

src/webui/src/components/Overview.tsx

 import * as React from 'react';
-import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
+import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
-import Title1 from './overview/Title1';
+import { AppContext } from "../App";
+import { Title1 } from './overview/Title1';
 import SuccessTable from './overview/SuccessTable';
 import Progressed from './overview/Progress';
 import Accuracy from './overview/Accuracy';
 import SearchSpace from './overview/SearchSpace';
-import BasicInfo from './overview/BasicInfo';
+import { BasicInfo } from './overview/BasicInfo';
 import TrialInfo from './overview/TrialProfile';
 import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
@@ -24,21 +25,20 @@ const entriesOption = [
     { key: '100', text: 'Display top 100 trials' }
 ];
 
-interface OverviewProps {
-    experimentUpdateBroadcast: number;
-    trialsUpdateBroadcast: number;
-    metricGraphMode: 'max' | 'min';
-    bestTrialEntries: string;
-    changeMetricGraphMode: (val: 'max' | 'min') => void;
-    changeEntries: (entries: string) => void;
-}
-
 interface OverviewState {
     trialConcurrency: number;
 }
 
-class Overview extends React.Component<OverviewProps, OverviewState> {
-    constructor(props: OverviewProps) {
+export const TitleContext = React.createContext({
+    text: '',
+    icon: '',
+    fontColor: ''
+});
+
+class Overview extends React.Component<{}, OverviewState> {
+    static contextType = AppContext;
+
+    constructor(props) {
         super(props);
         this.state = {
             trialConcurrency: EXPERIMENT.trialConcurrency
@@ -48,14 +48,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         // #999 panel active bgcolor; #b3b3b3 as usual
-        const { changeMetricGraphMode } = this.props;
+        const { changeMetricGraphMode } = this.context;
         changeMetricGraphMode('max');
     }
 
 
     clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
-        const { changeMetricGraphMode } = this.props;
+        const { changeMetricGraphMode } = this.context;
         changeMetricGraphMode('min');
     }
 
@@ -66,34 +66,39 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
     updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
         if (item !== undefined) {
-            this.props.changeEntries(item.key);
+            this.context.changeEntries(item.key);
         }
     }
 
     render(): React.ReactNode {
         const { trialConcurrency } = this.state;
-        const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
         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';
-
+        return (
+            <AppContext.Consumer>
+                {(value): React.ReactNode => {
+                    const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
                     const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
                     const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
-
                     return (
                         <div className="overview">
                             {/* status and experiment block */}
                             <Stack className="bottomDiv bgNNI">
-                    <Title1 text="Experiment" icon="11.png" />
-                    <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
+                                <TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}>
+                                    <Title1 />
+                                </TitleContext.Provider>
+                                <BasicInfo />
                             </Stack>
 
                             <Stack horizontal className="overMessage bottomDiv">
                                 {/* status block */}
                                 <Stack.Item grow className="prograph bgNNI borderRight">
-                        <Title1 text="Status" icon="5.png" />
+                                    <TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}>
+                                        <Title1 />
+                                    </TitleContext.Provider>
                                     <Progressed
                                         bestAccuracy={bestAccuracy}
                                         concurrency={trialConcurrency}
@@ -102,15 +107,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                                     />
                                 </Stack.Item>
                                 {/* experiment parameters search space tuner assessor... */}
-                    <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
-                        <Title1 text="Search space" icon="10.png" />
+                                <Stack.Item grow styles={{ root: { width: 450 } }} className="overviewBoder borderRight bgNNI">
+                                    <TitleContext.Provider value={{ text: "Search space", icon: "10.png", fontColor: '' }}>
+                                        <Title1 />
+                                    </TitleContext.Provider>
                                     <Stack className="experiment">
                                         <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
                                     </Stack>
                                 </Stack.Item>
-                    {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
-                    <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI">
-                        <Title1 text="Config" icon="4.png" />
+                                <Stack.Item grow styles={{ root: { width: 450 } }} className="bgNNI">
+                                    <TitleContext.Provider value={{ text: "Config", icon: "4.png", fontColor: '' }}>
+                                        <Title1 />
+                                    </TitleContext.Provider>
                                     <Stack className="experiment">
                                         {/* the scroll bar all the trial profile in the searchSpace div*/}
                                         <div className="experiment searchSpace">
@@ -123,21 +131,25 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                                 </Stack.Item>
                             </Stack>
 
-                <Stack style={{backgroundColor: '#fff'}}>
-                    <Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}>
+                            <Stack style={{ backgroundColor: '#fff' }}>
+                                <Stack horizontal className="top10bg" style={{ position: 'relative', height: 42 }}>
                                     <div
                                         className="title"
                                         onClick={this.clickMaxTop}
                                     >
-                            <Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
+                                        <TitleContext.Provider value={{ text: "Top maximal trials", icon: "max.png", fontColor: titleMaxbgcolor }}>
+                                            <Title1 />
+                                        </TitleContext.Provider>
                                     </div>
                                     <div
                                         className="title minTitle"
                                         onClick={this.clickMinTop}
                                     >
-                            <Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
+                                        <TitleContext.Provider value={{ text: "Top minimal trials", icon: "min.png", fontColor: titleMinbgcolor }}>
+                                            <Title1 />
+                                        </TitleContext.Provider>
                                     </div>
-                        <div style={{position: 'absolute', right: '2%', top: 8}}>
+                                    <div style={{ position: 'absolute', right: '2%', top: 8 }}>
                                         <Dropdown
                                             selectedKey={bestTrialEntries}
                                             options={entriesOption}
@@ -147,26 +159,30 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                                     </div>
                                 </Stack>
                                 <Stack horizontal tokens={stackTokens}>
-                        <div style={{ width: '40%', position: 'relative'}}>
+                                    <div style={{ width: '40%', position: 'relative' }}>
                                         <Accuracy
                                             accuracyData={accuracyGraphData}
                                             accNodata={noDataMessage}
                                             height={404}
                                         />
                                     </div>
-                        <div style={{ width: '60%'}}>
+                                    <div style={{ width: '60%' }}>
                                         <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
                                     </div>
                                 </Stack>
                             </Stack>
                         </div>
+                    )
+                }
+                }
+            </AppContext.Consumer>
         );
     }
 
     private findBestTrials(): Trial[] {
         const bestTrials = TRIALS.sort();
-        const { bestTrialEntries } = this.props;
-        if (this.props.metricGraphMode === 'max') {
+        const { bestTrialEntries, metricGraphMode } = this.context;
+        if (metricGraphMode === 'max') {
             bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
         } else {
             bestTrials.splice(JSON.parse(bestTrialEntries));

src/webui/src/components/TrialsDetail.tsx

 import * as React from 'react';
 import {
     Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
-import { tableListIcon } from './Buttons/Icon';
+import { AppContext } from "../App";
+import { tableListIcon } from './buttons/Icon';
 import DefaultPoint from './trial-detail/DefaultMetricPoint';
 import Duration from './trial-detail/Duration';
 import Para from './trial-detail/Para';
@@ -13,6 +14,13 @@ import TableList from './trial-detail/TableList';
 import '../static/style/trialsDetail.scss';
 import '../static/style/search.scss';
 
+const searchOptions = [
+    { key: 'id', text: 'Id' },
+    { key: 'Trial No.', text: 'Trial No.' },
+    { key: 'status', text: 'Status' },
+    { key: 'parameters', text: 'Parameters' },
+];
+
 interface TrialDetailState {
     tablePageSize: number; // table components val
     whichChart: string;
@@ -20,22 +28,15 @@ interface TrialDetailState {
     searchFilter: (trial: Trial) => boolean;
 }
 
-interface TrialsDetailProps {
-    columnList: string[];
-    changeColumn: (val: string[]) => void;
-    experimentUpdateBroacast: number;
-    trialsUpdateBroadcast: number;
-}
-
-class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
-
+class TrialsDetail extends React.Component<{}, TrialDetailState> {
+    static contextType = AppContext;
     public interAccuracy = 0;
     public interAllTableList = 2;
 
     public tableList!: TableList | null;
     public searchInput!: HTMLInputElement | null;
 
-    constructor(props: TrialsDetailProps) {
+    constructor(props) {
         super(props);
         this.state = {
             tablePageSize: 20,
@@ -82,7 +83,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
     }
 
     handleWhichTabs = (item: any): void => {
-        this.setState({whichChart: item.props.headerText});
+        this.setState({ whichChart: item.props.headerText });
     }
 
     updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
@@ -97,17 +98,13 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
 
     render(): React.ReactNode {
         const { tablePageSize, whichChart, searchType } = this.state;
-        const { columnList, changeColumn } = this.props;
         const source = TRIALS.filter(this.state.searchFilter);
         const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-        const searchOptions = [
-            { key: 'id', text: 'Id' },
-            { key: 'Trial No.', text: 'Trial No.' },
-            { key: 'status', text: 'Status' },
-            { key: 'parameters', text: 'Parameters' },
-        ];
+        
         return (
-            <div>
+            <AppContext.Consumer>
+                {(value): React.ReactNode =>
+                    <React.Fragment>
                         <div className="trial" id="tabsty">
                             <Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
                                 {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
@@ -116,7 +113,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                                         <DefaultPoint
                                             trialIds={trialIds}
                                             visible={whichChart === 'Default metric'}
-                                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
                                         />
                                     </Stack>
                                 </PivotItem>
@@ -183,14 +179,16 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                             <TableList
                                 pageSize={tablePageSize}
                                 tableSource={source.map(trial => trial.tableRecord)}
-                        columnList={columnList}
-                        changeColumn={changeColumn}
-                        trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+                                columnList={value.columnList}
+                                changeColumn={value.changeColumn}
+                                trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
                                 // TODO: change any to specific type
                                 ref={(tabList): any => this.tableList = tabList}
                             />
                         </div>
-            </div>
+                    </React.Fragment>
+                }
+            </AppContext.Consumer>
         );
     }
 }

src/webui/src/components/Buttons/Icon.tsx → src/webui/src/components/buttons/Icon.tsx

 import * as React from 'react';
-import { Icon, initializeIcons } from 'office-ui-fabric-react';
+import { Icon, initializeIcons } from '@fluentui/react';
 initializeIcons();
 
 const infoIcon = <Icon iconName='info' />;
@@ -11,7 +11,7 @@ const copy = <Icon iconName='Copy' />;
 const tableListIcon = <Icon iconName='BulletedList' />;
 const downLoadIcon = { iconName: 'Download' };
 const infoIconAbout = { iconName: 'info' };
-const timeIcon = { iconName: 'ReminderTime' };
+const timeIcon = { iconName: 'Refresh' };
 const disableUpdates = { iconName: 'DisableUpdates' };
 const requency = { iconName: 'Timer' }; 
 const closeTimer = { iconName: 'Blocked2' };

src/webui/src/components/Buttons/ModalTheme.tsx → src/webui/src/components/buttons/ModalTheme.tsx

-import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react';
+import { getTheme, mergeStyleSets, FontWeights, FontSizes } from '@fluentui/react';
 // Themed styles for the example.
 const theme = getTheme();
 const contentStyles = mergeStyleSets({

src/webui/src/components/Modals/ChangeColumnComponent.tsx → src/webui/src/components/modals/ChangeColumnComponent.tsx

 import * as React from 'react';
-import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { OPERATION } from '../../static/const';
 
 interface ChangeColumnState {

src/webui/src/components/Modals/Compare.tsx → src/webui/src/components/modals/Compare.tsx

 import * as React from 'react';
-import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from 'office-ui-fabric-react';
+import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
 import IntermediateVal from '../public-child/IntermediateVal';
 import { TRIALS } from '../../static/datamodel';
 import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
-import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
+import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
 import '../../static/style/compare.scss';
 
 const dragOptions: IDragOptions = {

src/webui/src/components/Modals/CustomizedTrial.tsx → src/webui/src/components/modals/CustomizedTrial.tsx

 import * as React from 'react';
 import axios from 'axios';
-import { Stack, StackItem, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
 import { MANAGER_IP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { warining, errorBadge, completed } from '../Buttons/Icon';
+import { warining, errorBadge, completed } from '../buttons/Icon';
 import './customized.scss';
 
 interface CustomizeProps {

src/webui/src/components/Modals/ExperimentPanel.tsx → src/webui/src/components/modals/ExperimentPanel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { downFile } from '../../static/function';
 import {
     Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import { DRAWEROPTION } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import MonacoEditor from 'react-monaco-editor';

src/webui/src/components/Modals/Killjob.tsx → src/webui/src/components/modals/Killjob.tsx

@@ -3,9 +3,9 @@ import {
     Stack, FocusTrapCallout, DefaultButton,
     FocusZone,
     PrimaryButton, getTheme, mergeStyleSets, FontWeights
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import { killJob } from '../../static/function';
-import { blocked } from '../Buttons/Icon';
+import { blocked } from '../buttons/Icon';
 
 const theme = getTheme();
 const styles = mergeStyleSets({

src/webui/src/components/Modals/LogPanel.tsx → src/webui/src/components/modals/LogPanel.tsx

@@ -3,8 +3,8 @@ import axios from 'axios';
 import {
     Stack, StackItem, Panel, PrimaryButton, DefaultButton,
     Pivot, PivotItem
-} from 'office-ui-fabric-react';
-import { infoIcon } from '../Buttons/Icon';
+} 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';

src/webui/src/components/Modals/MessageInfo.tsx → src/webui/src/components/modals/MessageInfo.tsx

 import * as React from 'react';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 
 interface MessageInfoProps {
     info: string;

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

-import * as React from 'react';
-import { Stack, TooltipHost, getId } from 'office-ui-fabric-react';
+import React from 'react';
+import { Stack, TooltipHost } from '@fluentui/react';
 import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
-interface BasicInfoProps {
-    experimentUpdateBroadcast: number;
-}
-
-class BasicInfo extends React.Component<BasicInfoProps, {}> {
-    // Use getId() to ensure that the ID is unique on the page.
-    // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
-    // for tooltip user the log directory
-    private _hostId: string = getId('tooltipHost');
-    constructor(props: BasicInfoProps) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        return (
+export const BasicInfo = (): any => (
     <Stack horizontal horizontalAlign="space-between" className="main">
         <Stack.Item grow={3} className="padItem basic">
             <p>Name</p>
@@ -41,7 +27,6 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                 <TooltipHost
                     // Tooltip message content 
                     content={EXPERIMENT.profile.logDir || 'unknown'}
-                            id={this._hostId}
                     calloutProps={{ gapSpace: 0 }}
                     styles={{ root: { display: 'inline-block' } }}
                 >
@@ -54,10 +39,5 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
             <p>Training platform</p>
             <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
         </Stack.Item>
-
     </Stack>
-        );
-    }
+);
\ No newline at end of file
-}
-
-export default BasicInfo;

src/webui/src/components/overview/Details.tsx

 import * as React from 'react';
-import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
+import { DetailsRow, IDetailsRowBaseProps } from '@fluentui/react';
 import OpenRow from '../public-child/OpenRow';
 
 interface DetailsProps {

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

 import * as React from 'react';
-import { Stack, PrimaryButton } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton } from '@fluentui/react';
 
 interface ConcurrencyInputProps {
     value: number;

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

@@ -2,16 +2,16 @@ import * as React from 'react';
 import {
     Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
     getId, getTheme, StackItem, TooltipHost
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { convertTime } from '../../static/function';
 import ConcurrencyInput from './NumInput';
 import ProgressBar from './ProgressItem';
-import LogDrawer from '../Modals/LogPanel';
-import MessageInfo from '../Modals/MessageInfo';
-import { infoIcon } from "../Buttons/Icon";
+import LogDrawer from '../modals/LogPanel';
+import MessageInfo from '../modals/MessageInfo';
+import { infoIcon } from "../buttons/Icon";
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {

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

 import * as React from 'react';
-import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
+import { Stack, StackItem, ProgressIndicator } from '@fluentui/react';
 
 interface ProItemProps {
     who: string;