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

src/webui/src/components/overview/SuccessTable.tsx

 import * as React from 'react';
-import { DetailsList, IDetailsListProps, IColumn } from 'office-ui-fabric-react';
+import { DetailsList, IDetailsListProps, IColumn } from '@fluentui/react';
 import DefaultMetric from '../public-child/DefaultMetric';
 import Details from './Details';
 import { convertDuration } from '../../static/function';

src/webui/src/components/overview/Title1.tsx

 import * as React from 'react';
-import {Stack} from 'office-ui-fabric-react';
+import { Stack } from '@fluentui/react';
+import { TitleContext } from '../Overview';
 import '../../static/style/overviewTitle.scss';
-interface Title1Props {
-    text: string;
-    icon?: string;
-    fontColor?: string;
-}
 
-class Title1 extends React.Component<Title1Props, {}> {
-
-    constructor(props: Title1Props) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        const { text, icon, fontColor } = this.props;
-        return (
-            <Stack horizontal className="panelTitle">
-                <img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
-                <span style={{ color: fontColor }}>{text}</span>
-            </Stack>
-        );
-    }
-}
-
-export default Title1;
\ No newline at end of file
+export const Title1 = (): any => (
+    <TitleContext.Consumer>
+        {
+            (value): React.ReactNode => (
+                <Stack horizontal className="panelTitle">
+                    <img src={require(`../../static/img/icon/${value.icon}`)} alt="icon" />
+                    <span style={{ color: value.fontColor }}>{value.text}</span>
+                </Stack>
+            )
+        }
+    </TitleContext.Consumer>
+);
\ No newline at end of file

src/webui/src/components/public-child/MonacoEditor.tsx

 import * as React from 'react';
-import { Spinner } from 'office-ui-fabric-react';
+import { Spinner } from '@fluentui/react';
 import { DRAWEROPTION } from '../../static/const';
 import MonacoEditor from 'react-monaco-editor';
 

src/webui/src/components/public-child/OpenRow.tsx

 import * as React from 'react';
 import * as copy from 'copy-to-clipboard';
-import { Stack, PrimaryButton, Pivot, PivotItem } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Pivot, PivotItem } from '@fluentui/react';
 import { Trial } from '../../static/model/trial';
 import { MANAGER_IP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import JSONTree from 'react-json-tree';
 import PaiTrialLog from '../public-child/PaiTrialLog';
 import TrialLog from '../public-child/TrialLog';
-import MessageInfo from '../Modals/MessageInfo';
+import MessageInfo from '../modals/MessageInfo';
 import '../../static/style/overview.scss';
 import '../../static/style/copyParameter.scss';
 import '../../static/style/openRow.scss';

src/webui/src/components/stateless-component/NNItabs.tsx

 import * as React from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 const OVERVIEWTABS = (
-    <Link to={'/oview'} activeClassName="high-light" className="common-tabs">
+    <NavLink to={'/oview'} activeClassName="selected" className="common-tabs">
         Overview
-    </Link>
+    </NavLink>
 );
 
 const DETAILTABS = (
-    <Link to={'/detail'} activeClassName="high-light" className="common-tabs">
+    <NavLink to={'/detail'} activeClassName="selected" className="common-tabs">
         Trials detail
-    </Link>
+    </NavLink>
 );
 
 const NNILOGO = (
-    <Link to={'/oview'}>
+    <NavLink to={'/oview'}>
         <img
             src={require('../../static/img/logo2.png')}
             alt="NNI logo"
             style={{height: 40}}
         />
-    </Link>
+    </NavLink>
 );
 
 export { OVERVIEWTABS, DETAILTABS, NNILOGO };
\ No newline at end of file

src/webui/src/components/trial-detail/DefaultMetricPoint.tsx

 import * as React from 'react';
-import { Toggle, Stack } from 'office-ui-fabric-react';
+import { Toggle, Stack } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { Trial } from '../../static/model/trial';
@@ -25,7 +25,6 @@ const EmptyGraph = {
 interface DefaultPointProps {
     trialIds: string[];
     visible: boolean;
-    trialsUpdateBroadcast: number;
 }
 
 interface DefaultPointState {

src/webui/src/components/trial-detail/Intermediate.tsx

 import * as React from 'react';
-import { Stack, PrimaryButton, Toggle, IStackTokens } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Toggle, IStackTokens } from '@fluentui/react';
 import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '../../static/interface';
 import ReactEcharts from 'echarts-for-react';
 import 'echarts/lib/component/tooltip';

src/webui/src/components/trial-detail/Para.tsx

 import * as d3 from 'd3';
-import { Dropdown, IDropdownOption, Stack } from 'office-ui-fabric-react';
+import { Dropdown, IDropdownOption, Stack } from '@fluentui/react';
 import ParCoords from 'parcoord-es';
 import 'parcoord-es/dist/parcoords.css';
 import * as React from 'react';

src/webui/src/components/trial-detail/TableList.tsx

-import * as React from 'react';
+import React, { lazy } from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
     Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
     PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost, IStackTokens
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import ReactPaginate from 'react-paginate';
-import { LineChart, blocked, copy } from '../Buttons/Icon';
+import { LineChart, blocked, copy } from '../buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { TableRecord, TrialJobInfo } from '../../static/interface';
-import Details from '../overview/Details';
-import ChangeColumnComponent from '../Modals/ChangeColumnComponent';
-import Compare from '../Modals/Compare';
-import KillJob from '../Modals/Killjob';
-import Customize from '../Modals/CustomizedTrial';
-import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
+const Details = lazy(() => import('../overview/Details'));
+const ChangeColumnComponent = lazy(() => import('../modals/ChangeColumnComponent'));
+const Compare = lazy(() => import('../modals/Compare'));
+const KillJob = lazy(() => import('../modals/Killjob'));
+const Customize = lazy(() => import('../modals/CustomizedTrial'));
+import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
 import '../../static/style/search.scss';
 import '../../static/style/tableStatus.css';
 import '../../static/style/logPath.scss';
@@ -25,7 +25,6 @@ import '../../static/style/button.scss';
 import '../../static/style/openRow.scss';
 import '../../static/style/pagination.scss';
 
-
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -36,7 +35,7 @@ echarts.registerTheme('my_theme', {
 
 const horizontalGapStackTokens: IStackTokens = {
     childrenGap: 20,
-    padding: 10,
+    padding: 10
 };
 
 interface TableListProps {
@@ -180,7 +179,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
         className: 'tableHead leftTitle'
     };
 
-
     StartTimeColumnConfig: any = {
         name: 'Start time',
         key: 'startTime',

src/webui/src/index.tsx

-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
-import Overview from './components/Overview';
-import TrialsDetail from './components/TrialsDetail';
+import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+const Overview = lazy(() => import('./components/Overview'));
+const TrialsDetail = lazy(() => import('./components/TrialsDetail'));
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   (
-    <Router history={browserHistory}>
-      <Route path="/" component={App}>
-        <IndexRedirect to="/oview" />
-        <Route path="/oview" component={Overview} />
-        <Route path="/detail" component={TrialsDetail} />
-        {/* test branch */}
-      </Route>
+    <Router>
+      <App>
+        <Switch>
+          <Suspense fallback={null}>
+            <Route path="/oview" component={Overview} />
+            <Route path="/detail" component={TrialsDetail} />
+            <Route path="/" render={(): React.ReactNode => <Redirect to={{ pathname: '/oview' }} />} />
+          </Suspense>
+        </Switch>
+      </App>
     </Router>
 
   ),

src/webui/src/static/style/nav/nav.scss

@@ -42,8 +42,8 @@ $barHeight: 56px;
     }
     &-refresh-num{
         position: absolute;
-        top: -10px;
-        left: 18px;
+        top: -13px;
+        left: 17px;
         color: #fff;
         font-size: 12px;
     }
@@ -56,11 +56,11 @@ a.common-tabs{
     color: #b8c7ce;
     text-decoration: none;
 }
-.common-tabs:visited, .high-light:hover{
+.common-tabs:visited, .selected:hover{
     color: #fff;
     text-decoration: none;
 }
-.common-tabs:hover, .high-light{
+.common-tabs:hover, .selected{
     color: #fff;
     border-bottom: 1px solid #fff;
 }

src/webui/src/static/style/trialsDetail.scss

@@ -19,6 +19,10 @@
                 background: #999;
             }
         }
+
+        .is-selected::before{
+            border-bottom: none;
+        }
     }
     
     .ms-Pivot-icon{