Update odlux

Fix scrolling and resizing bug in all tables, update the ui, minior bugfixes

Issue-ID: SDNC-1067
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I6322d5f612dcbc0c044b4b67ef3c73d6d2c90949

25 files changed, 205 insertions, 202 deletions

diff --git a/sdnr/wt/odlux/apps/apiDemo/package.json b/sdnr/wt/odlux/apps/apiDemo/package.json
index d6f74278b..44dae6854 100644
--- a/sdnr/wt/odlux/apps/apiDemo/package.json
+++ b/sdnr/wt/odlux/apps/apiDemo/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/package.json b/sdnr/wt/odlux/apps/configurationApp/package.json
index 2985ba4fb..b18d1ce10 100644
--- a/sdnr/wt/odlux/apps/configurationApp/package.json
+++ b/sdnr/wt/odlux/apps/configurationApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
index dc158c05a..25378d767 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
@@ -35,7 +35,6 @@ export const UIElementUnion = (props: UiElementUnionProps) => {
 
     const verifyValues = (data: string) => {
 
-        debugger;
         let foundObjectElements = 0;
         let errorMessage = "";
         let isPatternCorrect = null;
diff --git a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js
index 6a5c5d55e..dccf34919 100644
--- a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js
@@ -127,27 +127,27 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/yang-schema/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/database/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/restconf/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/help/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/websocket": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           ws: true,
           changeOrigin: false,
           secure: false
diff --git a/sdnr/wt/odlux/apps/connectApp/package.json b/sdnr/wt/odlux/apps/connectApp/package.json
index 04653d520..774daba6b 100644
--- a/sdnr/wt/odlux/apps/connectApp/package.json
+++ b/sdnr/wt/odlux/apps/connectApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
index 4e5ca65e1..ad7b247b0 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
@@ -38,7 +38,7 @@ type ConnectionStatusLogComponentProps = Connect<typeof mapProps, typeof mapDisp
 class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogComponentProps> {
   render(): JSX.Element {
     return (
-      <ConnectionStatusTable tableId="connection-status-table" columns={[
+      <ConnectionStatusTable stickyHeader tableId="connection-status-table" columns={[
         { property: "timestamp", title: "Time", type: ColumnType.text },
         { property: "nodeId", title: "Node Name", type: ColumnType.text },
         { property: "status", title: "Connection status", type: ColumnType.text },
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index 0f4b0e8ff..0370df7cb 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -24,11 +24,6 @@ import LinkOffIcon from '@material-ui/icons/LinkOff';
 import RemoveIcon from '@material-ui/icons/RemoveCircleOutline';
 import EditIcon from '@material-ui/icons/Edit';
 import Info from '@material-ui/icons/Info';
-import ComputerIcon from '@material-ui/icons/Computer';
-
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
 
 import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
@@ -43,6 +38,7 @@ import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNe
 import InfoNetworkElementDialog, { InfoNetworkElementDialogMode } from './infoNetworkElementDialog';
 import { loadAllInfoElementAsync } from '../actions/infoNetworkElementActions';
 import { TopologyNode } from '../models/topologyNetconf';
+import { MenuItem, Divider, Typography } from '@material-ui/core';
 
 const styles = (theme: Theme) => createStyles({
   connectionStatusConnected: {
@@ -68,6 +64,7 @@ const styles = (theme: Theme) => createStyles({
 
 const mapProps = (state: IApplicationStoreState) => ({
   networkElementsProperties: createNetworkElementsProperties(state),
+  applicationState: state,
 });
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
@@ -105,6 +102,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
 
   render(): JSX.Element {
     const { classes } = this.props;
+    const { framework, connect, configuration, fault, help, inventory, maintenance, mediator  } = this.props.applicationState as any;
     const { networkElementToEdit } = this.state;
     const addRequireNetworkElementAction = {
       icon: AddIcon, tooltip: 'Add', onClick: () => {
@@ -117,7 +115,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
     let counter = 0;
     return (
       <>
-        <NetworkElementTable tableId="network-element-table" customActionButtons={[addRequireNetworkElementAction]} columns={[
+        <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[addRequireNetworkElementAction]} columns={[
           { property: "nodeId", title: "Node Name", type: ColumnType.text },
           { property: "isRequired", title: "Required", type: ColumnType.boolean },
           { property: "status", title: "Connection Status", type: ColumnType.text },
@@ -125,44 +123,26 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
           { property: "port", title: "Port", type: ColumnType.numeric },
           { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
           { property: "deviceType", title: "Type", type: ColumnType.text },
-          {
-            property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => {
-              counter++;
-              return (
-                <>
-                  <div className={classes.spacer}>
-                    {
-                      rowData.webUri && <Tooltip title={"Web Client"} ><IconButton aria-label={"web-client-button-" + counter} className={classes.button} onClick={event => { console.log(rowData); window.open(rowData.webUri, "_blank") }}><ComputerIcon /></IconButton></Tooltip>
-                    }
-                    <Tooltip title={"Mount"} >
-                      <IconButton aria-label={"mount-button-" + counter} className={classes.button} onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} >
-                        <LinkIcon /></IconButton>
-                    </Tooltip>
-                    <Tooltip title={"Unmount"} >
-                      <IconButton aria-label={"unmount-button-" + counter} className={classes.button} onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)} >
-                        <LinkOffIcon /></IconButton>
-                    </Tooltip>
-                    <Tooltip title={"Info"} ><IconButton aria-label={"info-button-" + counter} className={classes.button} onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} >
-                      <Info /></IconButton>
-                    </Tooltip>
-                    <Tooltip title={"Edit"} ><IconButton aria-label={"edit-button-" + counter} className={classes.button} onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)} ><EditIcon /></IconButton></Tooltip>
-                    <Tooltip title={"Remove"} ><IconButton aria-label={"remove-button-" + counter} className={classes.button} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /></IconButton></Tooltip>
-                  </div>
-                  <div className={classes.spacer}>
-                    <Tooltip title={"Inventory"} ><Button aria-label={"inventory-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("inventory", rowData)} >I</Button></Tooltip>
-                  </div>
-                  <div className={classes.spacer}>
-                    <Tooltip title={"Fault"} ><Button aria-label={"fault-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("fault", rowData)} >F</Button></Tooltip>
-                    <Tooltip title={"Configure"} ><Button aria-label={"configure-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("configuration", rowData)} >C</Button></Tooltip>
-                    <Tooltip title={"Accounting "} ><Button className={classes.button} onClick={this.navigateToApplicationHandlerCreator("accounting", rowData)} disabled={true} >A</Button></Tooltip>
-                    <Tooltip title={"Performance"} ><Button aria-label={"performance-button-" + counter} className={classes.button} onClick={this.navigateToApplicationHandlerCreator("performanceHistory", rowData)}>P</Button></Tooltip>
-                    <Tooltip title={"Security"} ><Button className={classes.button} onClick={this.navigateToApplicationHandlerCreator("security", rowData)} disabled={true} >S</Button></Tooltip>
-                  </div>
-                </>
-              )
-            }
-          },
-        ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus >
+        ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => {
+          return [
+            <MenuItem onClick={event => this.onOpenMountdNetworkElementsDialog(event, rowData)} ><LinkIcon /><Typography>Mount</Typography></MenuItem>,
+            <MenuItem onClick={event => this.onOpenUnmountdNetworkElementsDialog(event, rowData)}><LinkOffIcon /><Typography>Unmount</Typography></MenuItem>,
+            <Divider />,
+            <MenuItem onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} ><Info /><Typography>Info</Typography></MenuItem>,
+            <MenuItem onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
+            !rowData.isRequired
+              ? <MenuItem onClick={event => this.onOpenAddNetworkElementDialog(event, rowData)} ><AddIcon /><Typography>Add</Typography></MenuItem>
+              : <MenuItem onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
+            <Divider />,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("inventory", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !inventory}><Typography>Inventory</Typography></MenuItem>,
+            <Divider />,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("fault", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !fault}><Typography>Fault</Typography></MenuItem>,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("configuration", rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !configuration}><Typography>Configure</Typography></MenuItem>,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("accounting", rowData)} disabled={true}><Typography>Accounting</Typography></MenuItem>,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("performanceHistory", rowData)} disabled={true}><Typography>Performance</Typography></MenuItem>,
+            <MenuItem onClick={event => this.navigateToApplicationHandlerCreator("security", rowData)} disabled={true} ><Typography>Security</Typography></MenuItem>,
+          ];
+        }} >
         </NetworkElementTable>
         <EditNetworkElementDialog
           initialNetworkElement={networkElementToEdit}
@@ -182,13 +162,18 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
     this.props.networkElementsActions.onRefresh();
   }
 
+  private onOpenAddNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
+    this.setState({
+      networkElementToEdit: element,
+      networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement
+    });
+  }
+
   private onOpenRemoveNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
     this.setState({
       networkElementToEdit: element,
       networkElementEditorMode: EditNetworkElementDialogMode.RemoveNetworkElement
     });
-    event.preventDefault();
-    event.stopPropagation();
   }
 
   private onOpenEditNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -203,8 +188,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       },
       networkElementEditorMode: EditNetworkElementDialogMode.EditNetworkElement
     });
-    event.preventDefault();
-    event.stopPropagation();
   }
 
   private onOpenUnmountdNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -212,8 +195,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       networkElementToEdit: element,
       networkElementEditorMode: EditNetworkElementDialogMode.UnmountNetworkElement
     });
-    event.preventDefault();
-    event.stopPropagation();
   }
 
   private onOpenMountdNetworkElementsDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -221,8 +202,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       networkElementToEdit: element,
       networkElementEditorMode: EditNetworkElementDialogMode.MountNetworkElement
     });
-    event.preventDefault();
-    event.stopPropagation();
   }
 
   private onOpenInfoNetworkElementDialog = (event: React.MouseEvent<HTMLElement>, element: NetworkElementConnection) => {
@@ -231,8 +210,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       networkElementToEdit: element,
       infoNetworkElementEditorMode: InfoNetworkElementDialogMode.InfoNetworkElement,
     });
-    event.preventDefault();
-    event.stopPropagation();
   }
 
   private onCloseEditNetworkElementDialog = () => {
@@ -250,8 +227,6 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
 
   private navigateToApplicationHandlerCreator = (applicationName: string, element: NetworkElementConnection) => (event: React.MouseEvent<HTMLElement>) => {
     this.props.navigateToApplication(applicationName, element.nodeId);
-    event.preventDefault();
-    event.stopPropagation();
   }
 }
 
diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index f8c0f3a82..a96d3d635 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -28,6 +28,7 @@ import { ConnectionStatusLog } from '../components/connectionStatusLog';
 import { setPanelAction, findWebUrisForGuiCutThroughAsyncAction, SetWeburiSearchBusy } from '../actions/commonNetworkElementsActions';
 import { PanelId } from '../models/panelId';
 import { NetworkElementConnection } from 'models/networkElementConnection';
+import { AppBar, Tabs, Tab } from '@material-ui/core';
 
 const mapProps = (state: IApplicationStoreState) => ({
   panelId: state.connect.currentOpenPanel,
@@ -56,7 +57,15 @@ type ConnectApplicationComponentProps = Connect<typeof mapProps, typeof mapDispa
 
 class ConnectApplicationComponent extends React.Component<ConnectApplicationComponentProps>{
 
-  componentDidUpdate = async () => {
+  public componentDidMount() {
+    if (this.props.panelId === null) { //don't change tabs, if one is selected already
+      this.onTogglePanel("NetworkElements");
+    }
+    this.props.networkElementsActions.onToggleFilter();
+    this.props.connectionStatusLogActions.onToggleFilter();
+  }
+
+  public componentDidUpdate = async () => {
     // search for guicutthroughs after networkelements were found
     const networkElements = this.props.netWorkElements;
 
@@ -66,7 +75,7 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
   }
 
   private onTogglePanel = (panelId: PanelId) => {
-    const nextActivePanel = panelId === this.props.panelId ? null : panelId;
+    const nextActivePanel = panelId;
     this.props.switchActivePanel(nextActivePanel);
 
     switch (nextActivePanel) {
@@ -86,25 +95,31 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
 
   };
 
+  private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+    this.props.switchActivePanel(newValue);
+  }
+
   render(): JSX.Element {
-    const { panelId } = this.props;
+    const { panelId: activePanelId } = this.props;
 
     return (
       <>
-        <Panel activePanel={panelId} panelId={'NetworkElements'} onToggle={this.onTogglePanel} title={"Network Elements"}>
-          <NetworkElementsList />
-        </Panel>
-        <Panel activePanel={panelId} panelId={'ConnectionStatusLog'} onToggle={this.onTogglePanel} title={"Connection Status Log"}>
-          <ConnectionStatusLog />
-        </Panel>
+        <AppBar position="static">
+          <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example">
+            <Tab label="Network Elements" value="NetworkElements" />
+            <Tab label="Connection Status Log" value="ConnectionStatusLog" />
+          </Tabs>
+        </AppBar>
+        {activePanelId === 'NetworkElements'
+          ? <NetworkElementsList />
+          : activePanelId === 'ConnectionStatusLog'
+            ? <ConnectionStatusLog />
+            : null}
       </>
     );
   };
-  public componentDidMount() {
-    this.onTogglePanel("NetworkElements");
-    this.props.networkElementsActions.onToggleFilter();
-    this.props.connectionStatusLogActions.onToggleFilter();
-  }
+
+
 }
 
 export const ConnectApplication = (connect(mapProps, mapDispatcher)(ConnectApplicationComponent));
diff --git a/sdnr/wt/odlux/apps/connectApp/webpack.config.js b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
index aa3acf00c..b72f5da76 100644
--- a/sdnr/wt/odlux/apps/connectApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
@@ -126,23 +126,23 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/database/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/restconf/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/help/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/websocket": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           ws: true,
           changeOrigin: true,
           secure: false
diff --git a/sdnr/wt/odlux/apps/demoApp/package.json b/sdnr/wt/odlux/apps/demoApp/package.json
index f692d69ed..b5857099b 100644
--- a/sdnr/wt/odlux/apps/demoApp/package.json
+++ b/sdnr/wt/odlux/apps/demoApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/eventLogApp/package.json b/sdnr/wt/odlux/apps/eventLogApp/package.json
index 2594debc1..ce8b8859d 100644
--- a/sdnr/wt/odlux/apps/eventLogApp/package.json
+++ b/sdnr/wt/odlux/apps/eventLogApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/faultApp/package.json b/sdnr/wt/odlux/apps/faultApp/package.json
index 909626303..b922df351 100644
--- a/sdnr/wt/odlux/apps/faultApp/package.json
+++ b/sdnr/wt/odlux/apps/faultApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts b/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts
index f032c139a..58da19d46 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts
+++ b/sdnr/wt/odlux/apps/faultApp/src/actions/panelChangeActions.ts
@@ -24,3 +24,7 @@ export class SetPanelAction extends Action {
   }
 }
 
+export const setPanelAction = (panelId: PanelId) => {
+  return new SetPanelAction(panelId);
+}
+
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
index fd1c48ac5..5adc9d49c 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
+++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
@@ -33,13 +33,13 @@ import { PanelId } from '../models/panelId';
 
 import { createCurrentProblemsProperties, createCurrentProblemsActions, currentProblemsReloadAction } from '../handlers/currentProblemsHandler';
 import { createAlarmLogEntriesProperties, createAlarmLogEntriesActions, alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler';
-import { SetPanelAction } from '../actions/panelChangeActions';
-import { Tooltip, IconButton } from '@material-ui/core';
+import { setPanelAction } from '../actions/panelChangeActions';
+import { Tooltip, IconButton, AppBar, Tabs, Tab } from '@material-ui/core';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import ClearStuckAlarmsDialog, { ClearStuckAlarmsDialogMode } from '../components/clearStuckAlarmsDialog';
 
 const mapProps = (state: IApplicationStoreState) => ({
-  activePanel: state.fault.currentOpenPanel,
+  panelId: state.fault.currentOpenPanel,
   currentProblemsProperties: createCurrentProblemsProperties(state),
   faultNotifications: state.fault.faultNotifications,
   alarmLogEntriesProperties: createAlarmLogEntriesProperties(state)
@@ -50,7 +50,9 @@ const mapDisp = (dispatcher: IDispatcher) => ({
   alarmLogEntriesActions: createAlarmLogEntriesActions(dispatcher.dispatch),
   reloadCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction),
   reloadAlarmLogEntries: () => dispatcher.dispatch(alarmLogEntriesReloadAction),
-  setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
+  switchActivePanel: (panelId: PanelId) => {
+    dispatcher.dispatch(setPanelAction(panelId));
+  }
 });
 
 type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp>;
@@ -84,6 +86,29 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
     this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.Show, stuckAlarms: stuckAlarms })
   }
 
+  private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+    this.props.switchActivePanel(newValue);
+    //this.onToggleTabs(newValue);
+  }
+
+  private onToggleTabs = (panelId: PanelId) => {
+    const nextActivePanel = panelId;
+    this.props.switchActivePanel(nextActivePanel);
+    switch (nextActivePanel) {
+      case 'CurrentProblem':
+        this.props.reloadCurrentProblems();
+        break;
+      case 'AlarmLog':
+        this.props.reloadAlarmLogEntries();
+        break;
+      case 'AlarmNotifications':
+      case null:
+      default:
+        // nothing to do
+        break;
+    }
+  };
+
 
 
   render(): JSX.Element {
@@ -94,31 +119,19 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
     const areFaultsAvailable = this.props.currentProblemsProperties.rows && this.props.currentProblemsProperties.rows.length > 0
     const customAction = areFaultsAvailable ? [refreshButton] : [];
 
-    const { activePanel } = this.props;
-
-    const onTogglePanel = (panelId: PanelId) => {
-      const nextActivePanel = panelId === this.props.activePanel ? null : panelId;
-      this.props.setCurrentPanel(nextActivePanel);
-
-      switch (nextActivePanel) {
-        case 'CurrentProblem':
-          this.props.reloadCurrentProblems();
-          break;
-        case 'AlarmLog':
-          this.props.reloadAlarmLogEntries();
-          break;
-        case 'AlarmNotifications':
-        case null:
-        default:
-          // nothing to do
-          break;
-      }
-    };
+    const { panelId: activePanelId } = this.props;
 
     return (
       <>
-        <Panel activePanel={activePanel} panelId={'CurrentProblem'} onToggle={onTogglePanel} title={'Current Problem List'}>
-          <FaultTable idProperty={'id'} customActionButtons={customAction} columns={[
+        <AppBar position="static" >
+          <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault tabs">
+            <Tab label="Current Problem List" value="CurrentProblem" />
+            <Tab label={`Alarm Notifications (${this.props.faultNotifications.faults.length})`} value="AlarmNotifications" />
+            <Tab label="Alarm Log" value="AlarmLog" />
+          </Tabs>
+        </AppBar>
+        {
+          activePanelId === 'CurrentProblem' && <FaultTable stickyHeader idProperty={'id'} customActionButtons={customAction} columns={[
             { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
             { property: "timestamp", type: ColumnType.text, title: "Time Stamp" },
             { property: "nodeId", title: "Node Name", type: ColumnType.text },
@@ -127,9 +140,10 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
             { property: "problem", title: "Alarm Type", type: ColumnType.text },
             { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" },
           ]} {...this.props.currentProblemsProperties} {...this.props.currentProblemsActions} />
-        </Panel>
-        <Panel activePanel={activePanel} panelId={'AlarmNotifications'} onToggle={onTogglePanel} title={`Alarm Notifications ${this.props.faultNotifications.faults.length} since ${this.props.faultNotifications.since}`}>
-          <FaultAlarmNotificationTable rows={this.props.faultNotifications.faults} asynchronus columns={[
+        }
+        {activePanelId === 'AlarmNotifications' &&
+
+          <FaultAlarmNotificationTable stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[
             { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
             { property: "timeStamp", title: "Time Stamp" },
             { property: "nodeName", title: "Node Name" },
@@ -138,29 +152,35 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
             { property: "problem", title: "Alarm Type" },
             { property: "severity", title: "Severity", width: "140px" },
           ]} idProperty={'id'} />
-        </Panel>
-        <Panel activePanel={activePanel} panelId={'AlarmLog'} onToggle={onTogglePanel} title={'Alarm Log'}>
-          <FaultTable idProperty={'id'} columns={[
-            { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
-            { property: "timestamp", title: "Time Stamp" },
-            { property: "nodeId", title: "Node Name" },
-            { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
-            { property: "objectId", title: "Object Id" },
-            { property: "problem", title: "Alarm Type" },
-            { property: "severity", title: "Severity", width: "140px" },
-            { property: "sourceType", title: "Source", width: "140px" },
-          ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} />
-        </Panel>
-        {
-          this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} />
 
         }
 
+        {activePanelId === 'AlarmLog' && <FaultTable stickyHeader idProperty={'id'} columns={[
+          { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
+          { property: "timestamp", title: "Time Stamp" },
+          { property: "nodeId", title: "Node Name" },
+          { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
+          { property: "objectId", title: "Object Id" },
+          { property: "problem", title: "Alarm Type" },
+          { property: "severity", title: "Severity", width: "140px" },
+          { property: "sourceType", title: "Source", width: "140px" },
+        ]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} />
+
+        }
+        {
+          this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} />
+        }
       </>
-    );
+    )
+
   };
 
   public componentDidMount() {
+
+    if (this.props.panelId === null) { //don't change tabs, if one is selected already
+      this.onToggleTabs("CurrentProblem");
+    }
+
     this.props.alarmLogEntriesActions.onToggleFilter();
     this.props.currentProblemsActions.onToggleFilter();
   }
diff --git a/sdnr/wt/odlux/apps/faultApp/webpack.config.js b/sdnr/wt/odlux/apps/faultApp/webpack.config.js
index 66926edfb..c91b1f4cc 100644
--- a/sdnr/wt/odlux/apps/faultApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/faultApp/webpack.config.js
@@ -125,23 +125,23 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:28181/",
+          target: "http://localhost:48181",
           secure: false
         },
         "/database/": {
-          target: "http://10.20.6.29:28181/",
+          target: "http://localhost:48181",
           secure: false
         },
         "/restconf/": {
-          target: "http://10.20.6.29:28181/",
+          target: "http://localhost:48181",
           secure: false
         },
         "/help/": {
-          target: "http://10.20.6.29:28181/",
+          target: "http://localhost:48181",
           secure: false
         },
         "/websocket/": {
-          target: "http://10.20.6.29:28181/",
+          target: "http://localhost:48181",
           ws: true,
           changeOrigin: true,
           secure: false
diff --git a/sdnr/wt/odlux/apps/helpApp/package.json b/sdnr/wt/odlux/apps/helpApp/package.json
index 1f106ab65..2a331f68a 100644
--- a/sdnr/wt/odlux/apps/helpApp/package.json
+++ b/sdnr/wt/odlux/apps/helpApp/package.json
@@ -32,14 +32,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/inventoryApp/package.json b/sdnr/wt/odlux/apps/inventoryApp/package.json
index 9e004c112..929ca0fb4 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/package.json
+++ b/sdnr/wt/odlux/apps/inventoryApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/package.json b/sdnr/wt/odlux/apps/maintenanceApp/package.json
index 96f9f7d2b..edd582744 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/package.json
+++ b/sdnr/wt/odlux/apps/maintenanceApp/package.json
@@ -28,14 +28,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
index 3b7879351..f557e5399 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
@@ -37,7 +37,7 @@ import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType';
 
 import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog';
 import { convertToLocaleString } from '../utils/timeUtils';
-import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties, maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
+import { createmaintenanceEntriesActions, createmaintenanceEntriesProperties,maintenanceEntriesReloadAction } from '../handlers/maintenenceEntriesHandler';
 
 const styles = (theme: Theme) => createStyles({
   button: {
@@ -60,7 +60,7 @@ const mapProps = (state: IApplicationStoreState) => ({
 
 const mapDispatcher = (dispatcher: IDispatcher) => ({
   maintenanceEntriesActions: createmaintenanceEntriesActions(dispatcher.dispatch),
-  onLoadMaintenanceEntries: async () => {
+  onLoadMaintenanceEntries: async() => {
     await dispatcher.dispatch(maintenanceEntriesReloadAction)
   }
 });
@@ -104,8 +104,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
         this.setState({
           maintenenceEntryToEdit: {
             ...emptyMaintenenceEntry,
-            start: convertToLocaleString(startTime),
-            end: convertToLocaleString(endTime),
+              start: convertToLocaleString(startTime),
+              end: convertToLocaleString(endTime),
           },
           maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.AddMaintenenceEntry
         });
@@ -120,7 +120,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
             {
               property: "notifications", title: "Notification", width: 50, align: "center", type: ColumnType.custom, customControl: ({ rowData }) => (
                 rowData.active && (Date.parse(rowData.start).valueOf() <= now) && (Date.parse(rowData.end).valueOf() >= now) && <FontAwesomeIcon icon={faBan} /> || null
-              )
+                )
             },
             { property: "active", title: "Activation State", type: ColumnType.boolean, labels: { "true": "active", "false": "not active" }, },
             { property: "start", title: "Start Date (UTC)", type: ColumnType.text },
@@ -140,7 +140,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
               )
             },
           ]
-        } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable>
+        } idProperty={'_id'}{...this.props.maintenanceEntriesActions} {...this.props.maintenanceEntriesProperties} asynchronus > </MaintenenceEntriesTable>        
         <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenenceEntryEditorMode}
           onClose={this.onCloseEditMaintenenceEntryDialog} />
       </>
@@ -160,8 +160,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
     this.setState({
       maintenenceEntryToEdit: {
         ...entry,
-        start: convertToLocaleString(startTime),
-        end: convertToLocaleString(endTime),
+          start: convertToLocaleString(startTime),
+          end: convertToLocaleString(endTime),
       },
       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
     });
@@ -175,8 +175,8 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
     this.setState({
       maintenenceEntryToEdit: {
         ...entry,
-        start: convertToLocaleString(startTime),
-        end: convertToLocaleString(endTime),
+          start: convertToLocaleString(startTime),
+          end: convertToLocaleString(endTime),
       },
       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
     });
@@ -190,7 +190,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
     this.setState({
       maintenenceEntryToEdit: {
         ...entry,
-        ...(entry.start && endTime)
+          ...(entry.start && endTime)
           ? { start: convertToLocaleString(entry.start), end: convertToLocaleString(entry.end) }
           : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }
       },
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js b/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js
index e6d968564..33a3bed73 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/maintenanceApp/webpack.config.js
@@ -127,23 +127,23 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/database/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/restconf/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/help/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/websocket/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:48181",
           ws: true,
           changeOrigin: true,
           secure: false
diff --git a/sdnr/wt/odlux/apps/mediatorApp/package.json b/sdnr/wt/odlux/apps/mediatorApp/package.json
index 718d2fd03..cfd4bd9e9 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/package.json
+++ b/sdnr/wt/odlux/apps/mediatorApp/package.json
@@ -28,14 +28,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
index 3efe2d015..94943ecd5 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
@@ -127,29 +127,19 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:3000",
           secure: false
         },
         "/database/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:3000",
           secure: false
         },
         "/restconf/": {
-          target: "http://10.20.6.29:28181",
+          target: "http://localhost:3000",
           secure: false
         },
         "/help/": {
-          target: "http://10.20.6.29:28181",
-          secure: false
-        },
-        "/ms/": {
-          target: "http://10.20.6.29:28181",
-          secure: false
-        },
-        "/websocket": {
-          target: "http://10.20.6.29:28181",
-          ws: true,
-          changeOrigin: true,
+          target: "http://localhost:3000",
           secure: false
         }
       }
diff --git a/sdnr/wt/odlux/apps/minimumApp/package.json b/sdnr/wt/odlux/apps/minimumApp/package.json
index d9b18a3ce..5a8352e4b 100644
--- a/sdnr/wt/odlux/apps/minimumApp/package.json
+++ b/sdnr/wt/odlux/apps/minimumApp/package.json
@@ -27,14 +27,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
index 1e6adf7c3..e1ca8013b 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
@@ -30,14 +30,14 @@
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "4.3.1",
-    "@material-ui/core": "4.6.1",
+    "@material-ui/core": "4.9.0",
     "@material-ui/icons": "4.5.1",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
     "jquery": "3.3.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-router-dom": "4.3.1"
   }
 }
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
index 9c2414864..bbbc3e43e 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
@@ -126,15 +126,15 @@ module.exports = (env) => {
       },
       proxy: {
         "/oauth2/": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/restconf": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         },
         "/database": {
-          target: "http://10.20.6.29:48181",
+          target: "http://localhost:48181",
           secure: false
         }
       }