Update webui react version and use fluent ui

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

@@ -1,9 +1,9 @@
 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';