Update ODLUX

Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes

Issue-ID: CCSDK-3580
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c

8 files changed, 160 insertions, 128 deletions

diff --git a/sdnr/wt/odlux/apps/mediatorApp/package.json b/sdnr/wt/odlux/apps/mediatorApp/package.json
index 74fdd33ac..867a8790d 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/package.json
+++ b/sdnr/wt/odlux/apps/mediatorApp/package.json
@@ -21,21 +21,24 @@
   "author": "Matthias Fischer",
   "license": "Apache-2.0",
   "dependencies": {
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/material": "^5.2.2",
+    "@mui/styles": "^5.2.2",
     "@odlux/framework": "*"
   },
   "peerDependencies": {
     "@fortawesome/free-solid-svg-icons": "5.6.3",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.2",
-    "@types/react-router-dom": "5.1.7",
-    "@material-ui/core": "4.11.4",
-    "@material-ui/icons": "4.11.2",
     "@types/classnames": "2.2.6",
     "@types/flux": "3.1.8",
     "@types/jquery": "3.3.10",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-router-dom": "5.1.7",
     "jquery": "3.3.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
index bcbccccd7..34ffc5e20 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
@@ -16,30 +16,34 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { Theme, createStyles, WithStyles, withStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Theme, Typography, FormControlLabel, Checkbox } from '@mui/material';
 
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Select from '@material-ui/core/Select';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Select from '@mui/material/Select';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
-import IconButton from '@material-ui/core/IconButton';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+import Fab from '@mui/material/Fab';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
 
 import { addMediatorConfigAsyncActionCreator, updateMediatorConfigAsyncActionCreator, removeMediatorConfigAsyncActionCreator } from '../actions/mediatorConfigActions';
 import { MediatorConfig, ODLConfig } from '../models/mediatorServer';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
 
 import { Panel } from '../../../../framework/src/components/material-ui/panel';
 
@@ -202,10 +206,10 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
             <Tab label="ODL AutoConnect" />
           </Tabs>
           {this.state.activeTab === 0 ? <TabContainer >
-            <TextField disabled={setting.readonly || setting.readonlyName} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.Name} onChange={(event) => { this.setState({ Name: event.target.value }); }} />
-            <FormControl fullWidth disabled={setting.readonly}>
+            <TextField variant="standard" disabled={setting.readonly || setting.readonlyName} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.Name} onChange={(event) => { this.setState({ Name: event.target.value }); }} />
+            <FormControl variant="standard" fullWidth disabled={setting.readonly}>
               <InputLabel htmlFor="deviceType">Device</InputLabel>
-              <Select value={this.state.DeviceType} onChange={(event, value) => {
+              <Select variant="standard" value={this.state.DeviceType} onChange={(event, value) => {
                 const device = this.props.supportedDevices.find(device => device.id === event.target.value);
                 if (device) {
                   this.setState({
@@ -223,46 +227,48 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
                 {this.props.supportedDevices.map(device => (<MenuItem key={device.id} value={device.id} >{`${device.vendor} - ${device.device} (${device.version || '0.0.0'}) `}</MenuItem>))}
               </Select>
             </FormControl>
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ipAddress" label="Device IP" type="text" fullWidth value={this.state.DeviceIp} onChange={(event) => { this.setState({ DeviceIp: event.target.value }); }} />
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="devicePort" label="Device SNMP Port" type="number" fullWidth value={this.state.DevicePort || ""} onChange={(event) => { this.setState({ DevicePort: +event.target.value }); }} />
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="trapsPort" label="TrapsPort" type="number" fullWidth value={this.state.TrapPort || ""} onChange={(event) => { this.setState({ TrapPort: +event.target.value }); }} />
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncUser" label="Netconf User" type="text" fullWidth value={this.state.NcUsername} onChange={(event) => { this.setState({ NcUsername: event.target.value }); }} />
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPassword" label="Netconf Password" type="password" fullWidth value={this.state.NcPassword} onChange={(event) => { this.setState({ NcPassword: event.target.value }); }} />
-            <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPort" label="Netconf Port" type="number" fullWidth value={this.state.NcPort || ""} onChange={(event) => { this.setState({ NcPort: +event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ipAddress" label="Device IP" type="text" fullWidth value={this.state.DeviceIp} onChange={(event) => { this.setState({ DeviceIp: event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="devicePort" label="Device SNMP Port" type="number" fullWidth value={this.state.DevicePort || ""} onChange={(event) => { this.setState({ DevicePort: +event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="trapsPort" label="TrapsPort" type="number" fullWidth value={this.state.TrapPort || ""} onChange={(event) => { this.setState({ TrapPort: +event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncUser" label="Netconf User" type="text" fullWidth value={this.state.NcUsername} onChange={(event) => { this.setState({ NcUsername: event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPassword" label="Netconf Password" type="password" fullWidth value={this.state.NcPassword} onChange={(event) => { this.setState({ NcPassword: event.target.value }); }} />
+            <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPort" label="Netconf Port" type="number" fullWidth value={this.state.NcPort || ""} onChange={(event) => { this.setState({ NcPort: +event.target.value }); }} />
           </TabContainer> : null}
           {this.state.activeTab === 1 ? <TabContainer >
             {this.state.ODLConfig && this.state.ODLConfig.length > 0
               ? this.state.ODLConfig.map((cfg, ind) => {
                 const panelId = `panel-${ind}`;
-                const deleteButton = (<IconButton onClick={() => {
-                  this.setState({
-                    ODLConfig: [
-                      ...this.state.ODLConfig.slice(0, ind),
-                      ...this.state.ODLConfig.slice(ind + 1)
-                    ]
-                  });
-                }} ><DeleteIcon /></IconButton>)
+                const deleteButton = (<IconButton
+                  onClick={() => {
+                    this.setState({
+                      ODLConfig: [
+                        ...this.state.ODLConfig.slice(0, ind),
+                        ...this.state.ODLConfig.slice(ind + 1)
+                      ]
+                    });
+                  }}
+                  size="large"><DeleteIcon /></IconButton>)
                 return (
                   <Panel title={cfg.Server && `${cfg.User ? `${cfg.User}@` : ''}${cfg.Protocol}://${cfg.Server}:${cfg.Port}` || "new odl config"} key={panelId} panelId={panelId} activePanel={this.state.activeOdlConfig} customActionButtons={[deleteButton]}
                     onToggle={(id) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); console.log("activeOdlConfig " + id); this.hideHostnameErrormessage(id) }} >
                     <div className={classes.alignInOneLine}>
-                      <FormControl className={classes.left} margin={"dense"} >
+                      <FormControl variant="standard" className={classes.left} margin={"dense"} >
                         <InputLabel htmlFor={`protocol-${ind}`}>Protocoll</InputLabel>
-                        <Select value={cfg.Protocol} onChange={(e, v) => this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => v)} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
+                        <Select variant="standard"  value={cfg.Protocol} onChange={(e, v) => this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => v)} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
                           <MenuItem value={"http"}>http</MenuItem>
                           <MenuItem value={"https"}>https</MenuItem>
                         </Select>
                       </FormControl>
-                      <TextField className={classes.left} spellCheck={false} margin="dense" id="hostname" label="Hostname" type="text" value={cfg.Server} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Server", e => e.target.value)} />
-                      <TextField className={classes.right} style={{ maxWidth: "65px" }} spellCheck={false} margin="dense" id="port" label="Port" type="number" value={cfg.Port || ""} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Port", e => +e.target.value)} />
+                      <TextField variant="standard" className={classes.left} spellCheck={false} margin="dense" id="hostname" label="Hostname" type="text" value={cfg.Server} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Server", e => e.target.value)} />
+                      <TextField variant="standard" className={classes.right} style={{ maxWidth: "65px" }} spellCheck={false} margin="dense" id="port" label="Port" type="number" value={cfg.Port || ""} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Port", e => +e.target.value)} />
                     </div>
                     {
                       this.state.isOdlConfigHostnameEmpty &&
                       <Typography component={"div"} className={classes.left} color="error" gutterBottom>Please add a hostname.</Typography>
                     }
                     <div className={classes.alignInOneLine}>
-                      <TextField className={classes.left} spellCheck={false} margin="dense" id="username" label="Username" type="text" value={cfg.User} onChange={this.odlConfigValueChangeHandlerCreator(ind, "User", e => e.target.value)} />
-                      <TextField className={classes.right} spellCheck={false} margin="dense" id="password" label="Password" type="password" value={cfg.Password} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Password", e => e.target.value)} />
+                      <TextField variant="standard" className={classes.left} spellCheck={false} margin="dense" id="username" label="Username" type="text" value={cfg.User} onChange={this.odlConfigValueChangeHandlerCreator(ind, "User", e => e.target.value)} />
+                      <TextField variant="standard" className={classes.right} spellCheck={false} margin="dense" id="password" label="Password" type="password" value={cfg.Password} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Password", e => e.target.value)} />
                     </div>
                     <div className={classes.alignInOneLine}>
                       <FormControlLabel className={classes.right} control={<Checkbox checked={cfg.Trustall} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Trustall", e => e.target.checked)} />} label="Trustall" />
@@ -288,7 +294,7 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
 
         </DialogContent>
         <DialogActions>
-          <Button onClick={(event) => { this.addConfig(event) }} > {setting.applyButtonText} </Button>
+          <Button color="inherit" onClick={(event) => { this.addConfig(event) }} > {setting.applyButtonText} </Button>
           <Button onClick={(event) => {
             this.onCancel();
             event.preventDefault();
@@ -297,7 +303,7 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
       </Dialog>
-    )
+    );
   }
 
   private addConfig = (event: any) => {
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
index d520db466..c8b158749 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
@@ -17,19 +17,19 @@
  */
 import * as React from 'react';
 
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
 
 import { addAvaliableMediatorServerAsyncActionCreator, removeAvaliableMediatorServerAsyncActionCreator, updateAvaliableMediatorServerAsyncActionCreator } from '../actions/avaliableMediatorServersActions';
 import { MediatorServer } from '../models/mediatorServer';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 export enum EditMediatorServerDialogMode {
   None = "none",
@@ -151,8 +151,8 @@ class EditMediatorServerDialogComponent extends React.Component<EditMediatorServ
             {setting.dialogDescription}
           </DialogContentText>
           {/* <TextField disabled spellCheck={false} autoFocus margin="dense" id="id" label="Id" type="text" fullWidth value={ this.state._id } onChange={(event)=>{ this.setState({_id: event.target.value}); } } /> */}
-          <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.name} onChange={(event) => { this.setState({ name: event.target.value }); }} />
-          <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="url" label="Url" type="text" fullWidth value={this.state.url} onChange={(event) => { this.setState({ url: event.target.value }); }} />
+          <TextField variant="standard" disabled={setting.readonly} spellCheck={false} margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.name} onChange={(event) => { this.setState({ name: event.target.value }); }} />
+          <TextField variant="standard" disabled={setting.readonly} spellCheck={false} margin="dense" id="url" label="Url" type="text" fullWidth value={this.state.url} onChange={(event) => { this.setState({ url: event.target.value }); }} />
 
           <Typography id="errorMessage" component={"div"} color="error">{this.state.errorMessage.map((error, index) => <div key={index}>{error}</div>)}</Typography>
 
@@ -174,7 +174,7 @@ class EditMediatorServerDialogComponent extends React.Component<EditMediatorServ
 
             event.preventDefault();
             event.stopPropagation();
-          }} > {setting.applyButtonText} </Button>
+          }} color="inherit" > {setting.applyButtonText} </Button>
           <Button onClick={(event) => {
             this.onCancel();
             this.setState({ errorMessage: [] });
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx
index af94f5a32..db1ef8771 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx
@@ -17,12 +17,12 @@
  */
 import * as React from 'react';
 
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
 import { avaliableMediatorServersReloadAction } from '../handlers/avaliableMediatorServersHandler';
 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
@@ -94,13 +94,13 @@ class RefreshMediatorDialogComponent extends React.Component<RefreshMediatorDial
         <DialogActions>
           <Button aria-label="dialog-confirm-button" onClick={(event) => {
             this.onRefresh();
-          }} > {setting.applyButtonText} </Button>
+          }} color="inherit" > {setting.applyButtonText} </Button>
           <Button aria-label="dialog-cancel-button" onClick={(event) => {
             this.onCancel();
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
       </Dialog>
-    )
+    );
   }
 
   private onRefresh = () => {
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
index fd8a2496a..2b91079b5 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
@@ -17,7 +17,7 @@
  */
 
 import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, DialogContentText, Checkbox, Button, FormControlLabel, FormGroup } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, DialogContentText, Checkbox, Button, FormControlLabel, FormGroup } from '@mui/material';
 import { IApplicationState } from '../../../../framework/src/handlers/applicationStateHandler';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { Connect } from '../../../../framework/src/flux/connect';
@@ -73,11 +73,11 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
             <Dialog open={this.props.mode !== MediatorInfoDialogMode.None} onBackdropClick={this.props.onClose} >
                 <DialogTitle>{this.props.config.Name}</DialogTitle>
                 <DialogContent>
-                    <TextField disabled margin="dense" id="deviceIp" label="Device IP" fullWidth defaultValue={this.props.config.DeviceIp} />
-                    <TextField disabled margin="dense" id="deviceport" label="Device Port" fullWidth defaultValue={this.props.config.DevicePort} />
-                    <TextField disabled margin="dense" id="status" label="Status" fullWidth defaultValue={this.state.status} />
-                    <TextField disabled margin="dense" id="deviceType" label="Device Type" fullWidth defaultValue={this.state.devicetype} />
-                    <TextField disabled margin="dense" id="ncPort" label="Netconf Port" fullWidth defaultValue={this.props.config.NcPort} />
+                    <TextField variant="standard" disabled margin="dense" id="deviceIp" label="Device IP" fullWidth defaultValue={this.props.config.DeviceIp} />
+                    <TextField variant="standard" disabled margin="dense" id="deviceport" label="Device Port" fullWidth defaultValue={this.props.config.DevicePort} />
+                    <TextField variant="standard" disabled margin="dense" id="status" label="Status" fullWidth defaultValue={this.state.status} />
+                    <TextField variant="standard" disabled margin="dense" id="deviceType" label="Device Type" fullWidth defaultValue={this.state.devicetype} />
+                    <TextField variant="standard" disabled margin="dense" id="ncPort" label="Netconf Port" fullWidth defaultValue={this.props.config.NcPort} />
                     <FormGroup>
                         <FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNCConnected}></Checkbox>} label="Netconf Connection" />
                         <FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNeConnected}></Checkbox>} label="Network Element Connection" />
@@ -86,8 +86,8 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
                     {
                         this.props.config.ODLConfig.map((element, index) =>
                             <Panel title={"ODL config " + (this.props.config.ODLConfig.length > 1 ? index + 1 : '')} key={index} panelId={'panel-' + index} activePanel={this.state.activeOdlConfig} onToggle={(id: string) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); }}>
-                                <TextField disabled margin="dense" defaultValue={element.Protocol + '://' + element.Server} label="Server" />
-                                <TextField disabled margin="dense" defaultValue={element.Port} label="Port" />
+                                <TextField variant="standard" disabled margin="dense" defaultValue={element.Protocol + '://' + element.Server} label="Server" />
+                                <TextField variant="standard" disabled margin="dense" defaultValue={element.Port} label="Port" />
                                 <FormControlLabel control={<Checkbox disabled checked={element.Trustall} />} label="Trustall" />
                             </Panel>
                         )
@@ -95,7 +95,7 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
 
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={this.onClose}>Close</Button>
+                    <Button onClick={this.onClose} color="inherit">Close</Button>
                 </DialogActions>
             </Dialog>
         )
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
index fbf6d5774..da0ffa048 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
@@ -16,17 +16,21 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
 
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import InfoIcon from '@material-ui/icons/Info';
-import StartIcon from '@material-ui/icons/PlayArrow';
-import StopIcon from '@material-ui/icons/Stop';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
-import CircularProgress from '@material-ui/core/CircularProgress'
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import InfoIcon from '@mui/icons-material/Info';
+import StartIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
@@ -130,23 +134,34 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo
     const renderActions = (rowData: MediatorConfigResponse) => (
       <>
         <div className={classes.spacer}>
-          <Tooltip title={"Start"} >
-            <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+          <Tooltip disableInteractive title={"Start"} >
+            <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
               <StartIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.startMediator(rowData.Name); }} />
             </IconButton>
           </Tooltip>
-          <Tooltip title={"Stop"} >
-            <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+          <Tooltip disableInteractive title={"Stop"} >
+            <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
               <StopIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.stopMediator(rowData.Name); }} />
             </IconButton>
           </Tooltip>
         </div>
         <div className={classes.spacer}>
-          <Tooltip title={"Info"} ><IconButton className={classes.button} onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}><InfoIcon /></IconButton></Tooltip>
+          <Tooltip disableInteractive title={"Info"} ><IconButton
+            className={classes.button}
+            onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}
+            size="large"><InfoIcon /></IconButton></Tooltip>
         </div>
         <div className={classes.spacer}>
-          {process.env.NODE_ENV === "development" ? <Tooltip title={"Edit"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}><EditIcon /></IconButton></Tooltip> : null}
-          <Tooltip title={"Remove"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}><DeleteIcon /></IconButton></Tooltip>
+          {process.env.NODE_ENV === "development" ? <Tooltip disableInteractive title={"Edit"} ><IconButton
+            disabled={rowData[BusySymbol]}
+            className={classes.button}
+            onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}
+            size="large"><EditIcon /></IconButton></Tooltip> : null}
+          <Tooltip disableInteractive title={"Remove"} ><IconButton
+            disabled={rowData[BusySymbol]}
+            className={classes.button}
+            onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}
+            size="large"><DeleteIcon /></IconButton></Tooltip>
         </div>
       </>
     );
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
index be1ecc718..c44e2ccc1 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
@@ -16,13 +16,17 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from 'react';
-import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
 
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import Refresh from '@material-ui/icons/Refresh';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Refresh from '@mui/icons-material/Refresh';
 
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
@@ -105,31 +109,35 @@ class MediatorServerSelectionComponent extends React.Component<MediatorServerSel
         });
       }
     };
-    return (
-      <>
-        <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
-          {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
-            { property: "name", title: "Name", type: ColumnType.text },
-            { property: "url", title: "Url", type: ColumnType.text },
-            {
-              property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
-                <div className={classes.spacer}>
-                  <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={event => { this.onEditMediatorServer(event, rowData); }}><EditIcon /></IconButton></Tooltip>
-                  <Tooltip title={"Remove"} ><IconButton className={classes.button} onClick={event => { this.onRemoveMediatorServer(event, rowData); }}><DeleteIcon /></IconButton></Tooltip>
-                </div>
-              )
-            }
-          ]} onHandleClick={this.onSelectMediatorServer} />
-        <EditMediatorServerDialog
-          mediatorServer={this.state.mediatorServerToEdit}
-          mode={this.state.mediatorServerEditorMode}
-          onClose={this.onCloseEditMediatorServerDialog} />
-        <RefreshMediatorDialog
-          mode={this.state.refreshMediatorEditorMode}
-          onClose={this.onCloseRefreshMediatorDialog}
-        />
-      </>
-    );
+    return <>
+      <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
+        {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
+          { property: "name", title: "Name", type: ColumnType.text },
+          { property: "url", title: "Url", type: ColumnType.text },
+          {
+            property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
+              <div className={classes.spacer}>
+                <Tooltip disableInteractive title={"Edit"} ><IconButton
+                  className={classes.button}
+                  onClick={event => { this.onEditMediatorServer(event, rowData); }}
+                  size="large"><EditIcon /></IconButton></Tooltip>
+                <Tooltip disableInteractive title={"Remove"} ><IconButton
+                  className={classes.button}
+                  onClick={event => { this.onRemoveMediatorServer(event, rowData); }}
+                  size="large"><DeleteIcon /></IconButton></Tooltip>
+              </div>
+            )
+          }
+        ]} onHandleClick={this.onSelectMediatorServer} />
+      <EditMediatorServerDialog
+        mediatorServer={this.state.mediatorServerToEdit}
+        mode={this.state.mediatorServerEditorMode}
+        onClose={this.onCloseEditMediatorServerDialog} />
+      <RefreshMediatorDialog
+        mode={this.state.refreshMediatorEditorMode}
+        onClose={this.onCloseRefreshMediatorDialog}
+      />
+    </>;
   }
 
   public componentDidMount() {
diff --git a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
index 94943ecd5..f626632e2 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
@@ -86,7 +86,7 @@ module.exports = (env) => {
         manifest: require(path.resolve(frameworkPath, "app-manifest.json")),
         sourceType: "umd2"
       }),
-      ...(env === "release") ? [
+      ...(env === "release" ? [
         new webpack.DefinePlugin({
           "process.env": {
             NODE_ENV: "'production'",
@@ -104,7 +104,7 @@ module.exports = (env) => {
             from: 'index.html',
             to: distPath
           }]),
-        ]
+        ])
     ],
 
     devServer: {