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

13 files changed, 547 insertions, 112 deletions

diff --git a/sdnr/wt/odlux/apps/connectApp/package.json b/sdnr/wt/odlux/apps/connectApp/package.json
index a6b23df84..9ecdaf853 100644
--- a/sdnr/wt/odlux/apps/connectApp/package.json
+++ b/sdnr/wt/odlux/apps/connectApp/package.json
@@ -21,20 +21,25 @@
   "author": "Matthias Fischer",
   "license": "Apache-2.0",
   "dependencies": {
-    "@odlux/framework": "*"
+    "@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": "*",
+    "react-chartjs-2": "2.7.6",
+    "chart.js": "2.8.0"
   },
   "peerDependencies": {
-    "@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/connectApp/src/actions/networkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
index 1e569a196..041cff9da 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
@@ -37,7 +37,7 @@ export const addNewNetworkElementAsyncActionCreator = (element: NetworkElementCo
 
 /** Represents an async thunk action creator to edit network element. */
 export const editNetworkElementAsyncActionCreator = (element: UpdateNetworkElement) => async (dispatch: Dispatch) => {
-  const connectionStatus: ConnectionStatus[] = await connectService.getNetworkElementConnectionStatus(element.id).then(ne => (ne)) || [];
+  const connectionStatus: ConnectionStatus[] = (await connectService.getNetworkElementConnectionStatus(element.id).then(ne => (ne))) || [];
   const currentConnectionStatus = connectionStatus[0].status;
   if (currentConnectionStatus === "Disconnected") {
     const res = await connectService.deleteNetworkElement(element);
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
index 5a5ebcc45..a7d96d072 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
@@ -19,7 +19,7 @@ import * as React from 'react';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
-import  Refresh  from '@material-ui/icons/Refresh';
+import  Refresh  from '@mui/icons-material/Refresh';
 
 import { createConnectionStatusLogActions, createConnectionStatusLogProperties } from '../handlers/connectionStatusLogHandler';
 import { NetworkElementConnectionLog } from '../models/networkElementConnectionLog';
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx
new file mode 100644
index 000000000..683c59623
--- /dev/null
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx
@@ -0,0 +1,425 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+import * as React from 'react';
+
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';;
+import { Theme } from '@mui/material';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import { Doughnut } from 'react-chartjs-2';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+
+const styles = (theme: Theme) => createStyles({
+  pageWidthSettings: {
+    width: '50%',
+    float: 'left'
+  },
+})
+
+const scrollbar = { overflow: "auto", paddingRight: "20px" }
+
+let connectionStatusinitialLoad = true;
+let connectionStatusinitialStateChanged = false;
+let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
+let connectionTotalCount = 0;
+
+let alarmStatusinitialLoad = true;
+let alarmStatusinitialStateChanged = false;
+let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
+let alarmTotalCount = 0;
+
+const mapProps = (state: IApplicationStoreState) => ({
+  connectionStatusCount: state.connect.connectionStatusCount,
+  alarmStatus: state.fault.faultStatus
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+  navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
+});
+
+type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
+
+class DashboardHome extends React.Component<HomeComponentProps>  {
+  constructor(props: HomeComponentProps) {
+    super(props);
+    this.state = {
+    }
+  }
+
+  render(): JSX.Element {
+    const { classes } = this.props;
+
+    if (!this.props.connectionStatusCount.isLoadingConnectionStatusChart) {
+      connectionStatusDataLoad = [
+        this.props.connectionStatusCount.Connected,
+        this.props.connectionStatusCount.Connecting,
+        this.props.connectionStatusCount.Disconnected,
+        this.props.connectionStatusCount.UnableToConnect
+      ];
+      connectionTotalCount = this.props.connectionStatusCount.Connected + this.props.connectionStatusCount.Connecting
+        + this.props.connectionStatusCount.Disconnected + this.props.connectionStatusCount.UnableToConnect;
+
+    }
+
+    if (!this.props.alarmStatus.isLoadingAlarmStatusChart) {
+      alarmStatusDataLoad = [
+        this.props.alarmStatus.critical,
+        this.props.alarmStatus.major,
+        this.props.alarmStatus.minor,
+        this.props.alarmStatus.warning
+      ];
+      alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
+        + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
+    }
+
+    /** Available Network Connection Status chart data */
+    const connectionStatusData = {
+      labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'],
+      datasets: [{
+        data: connectionStatusDataLoad,
+        backgroundColor: [
+          'rgb(0, 153, 51)',
+          'rgb(255, 102, 0)',
+          'rgb(191, 191, 191)',
+          'rgb(191, 191, 191)'
+        ]
+      }]
+    };
+
+
+    /** No Devices available */
+    const connectionStatusUnavailableData = {
+      labels: ['No Devices available'],
+      datasets: [{
+        data: [1],
+        backgroundColor: [
+          'rgb(255, 255, 255)'
+        ]
+      }]
+    };
+
+    /** Loading Connection Status chart */
+    const connectionStatusisLoading = {
+      labels: ['Loading chart...'],
+      datasets: [{
+        data: [1],
+        backgroundColor: [
+          'rgb(255, 255, 255)'
+        ]
+      }]
+    };
+
+    /** Loading Alarm Status chart */
+    const alarmStatusisLoading = {
+      labels: ['Loading chart...'],
+      datasets: [{
+        data: [1],
+        backgroundColor: [
+          'rgb(255, 255, 255)'
+        ]
+      }]
+    };
+
+    /** Connection status options */
+    let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'];
+    const connectionStatusOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'top'
+        }
+      },
+      onClick: (event: MouseEvent, item: any) => {
+        if (item[0]) {
+          let connectionStatus = labels[item[0]._index] + '';
+          this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus);
+        }
+      }
+    }
+
+    /** Connection status unavailable options */
+    const connectionStatusUnavailableOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+
+    /** Add text inside the doughnut chart for Connection Status */
+    const connectionStatusPlugins = [{
+      beforeDraw: function (chart: any) {
+        var width = chart.width,
+          height = chart.height,
+          ctx = chart.ctx;
+        ctx.restore();
+        var fontSize = (height / 480).toFixed(2);
+        ctx.font = fontSize + "em sans-serif";
+        ctx.textBaseline = "top";
+        var text = "Network Connection Status",
+          textX = Math.round((width - ctx.measureText(text).width) / 2),
+          textY = height / 2;
+        ctx.fillText(text, textX, textY);
+        ctx.save();
+      }
+    }]
+
+    /** Alarm status Data */
+    const alarmStatusData = {
+      labels: [
+        'Critical',
+        'Major',
+        'Minor',
+        'Warning'
+      ],
+      datasets: [{
+        data: alarmStatusDataLoad,
+        backgroundColor: [
+          'rgb(240, 25, 10)',
+          'rgb(240, 133, 10)',
+          'rgb(240, 240, 10)',
+          'rgb(46, 115, 176)'
+        ],
+      }]
+    }
+
+    /** No Alarm status available */
+    const alarmStatusUnavailableData = {
+      labels: ['No Alarms available'],
+      datasets: [{
+        data: [1],
+        backgroundColor: [
+          'rgb(0, 153, 51)'
+        ]
+      }]
+    };
+
+    /** Alarm status Options */
+    let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
+    const alarmStatusOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'top'
+        }
+      },
+      onClick: (event: MouseEvent, item: any) => {
+        if (item[0]) {
+          let severity = alarmLabels[item[0].index] + '';
+          this.props.navigateToApplication("fault", '/alarmStatus/' + severity);
+        }
+      },
+    };
+
+    /** Alarm status unavailable options */
+    const alarmStatusUnavailableOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+    /** Add text inside the doughnut chart for Alarm Status */
+    const alarmStatusPlugins = [{
+      beforeDraw: function (chart: any) {
+        var width = chart.width,
+          height = chart.height,
+          ctx = chart.ctx;
+        ctx.restore();
+        var fontSize = (height / 480).toFixed(2);
+        ctx.font = fontSize + "em sans-serif";
+        ctx.textBaseline = "top";
+        var text = "Network Alarm Status",
+          textX = Math.round((width - ctx.measureText(text).width) / 2),
+          textY = height / 2;
+        ctx.fillText(text, textX, textY);
+        ctx.save();
+      }
+    }]
+
+    return (
+      <>
+        <div style={scrollbar} >
+          <h1>Welcome to ODLUX</h1>
+          <div style={{ width: '50%', float: 'left' }}>
+            {this.checkElementsAreLoaded() ?
+              this.checkConnectionStatus() && connectionTotalCount != 0 ?
+                <Doughnut
+                  data={connectionStatusData}
+                  type={Doughnut}
+                  width={500}
+                  height={500}
+                  options={connectionStatusOptions}
+                  plugins={connectionStatusPlugins}
+                />
+                : <Doughnut
+                  data={connectionStatusUnavailableData}
+                  type={Doughnut}
+                  width={500}
+                  height={500}
+                  options={connectionStatusUnavailableOptions}
+                  plugins={connectionStatusPlugins} />
+              : <Doughnut
+                data={connectionStatusisLoading}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={connectionStatusUnavailableOptions}
+                plugins={connectionStatusPlugins}
+              />
+            }
+          </div>
+          <div style={{ width: '50%', float: 'left' }}>
+            {this.checkAlarmsAreLoaded() ?
+              this.checkAlarmStatus() && alarmTotalCount != 0 ?
+                <Doughnut
+                  data={alarmStatusData}
+                  type={Doughnut}
+                  width={500}
+                  height={500}
+                  options={alarmStatusOptions}
+                  plugins={alarmStatusPlugins}
+                />
+                : <Doughnut
+                  data={alarmStatusUnavailableData}
+                  type={Doughnut}
+                  width={500}
+                  height={500}
+                  options={alarmStatusUnavailableOptions}
+                  plugins={alarmStatusPlugins}
+                />
+              : <Doughnut
+                data={alarmStatusisLoading}
+                type={Doughnut}
+                width={500}
+                height={500}
+                options={alarmStatusUnavailableOptions}
+                plugins={alarmStatusPlugins}
+              />
+            }
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  /** Check if connection status data available */
+  public checkConnectionStatus = () => {
+    let statusCount = this.props.connectionStatusCount;
+    if (statusCount.isLoadingConnectionStatusChart) {
+      return true;
+    }
+    if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
+      && statusCount.UnableToConnect == 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  /** Check if connection status chart data is loaded */
+  public checkElementsAreLoaded = () => {
+    let isLoadingCheck = this.props.connectionStatusCount;
+    if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
+      if (this.checkConnectionStatus()) {
+        connectionStatusinitialLoad = false;
+        return true;
+      }
+      return false;
+    } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
+      connectionStatusinitialLoad = false;
+      connectionStatusinitialStateChanged = true;
+      return !isLoadingCheck.isLoadingConnectionStatusChart;
+    } else if (connectionStatusinitialStateChanged) {
+      if (!isLoadingCheck.isLoadingConnectionStatusChart) {
+        connectionStatusinitialStateChanged = false;
+      }
+      return !isLoadingCheck.isLoadingConnectionStatusChart;
+    }
+    return true;
+  }
+
+  /** Check if alarms data available */
+  public checkAlarmStatus = () => {
+    let alarmCount = this.props.alarmStatus;
+    if (alarmCount.isLoadingAlarmStatusChart) {
+      return true;
+    }
+    if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
+      return false;
+    }
+    else {
+      return true;
+    }
+  }
+
+  /** Check if alarm status chart data is loaded */
+  public checkAlarmsAreLoaded = () => {
+    let isLoadingCheck = this.props.alarmStatus;
+    if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
+      if (this.checkAlarmStatus()) {
+        alarmStatusinitialLoad = false;
+        return true;
+      }
+      return false;
+    } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
+      alarmStatusinitialLoad = false;
+      alarmStatusinitialStateChanged = true;
+      return !isLoadingCheck.isLoadingAlarmStatusChart;
+    } else if (alarmStatusinitialStateChanged) {
+      if (!isLoadingCheck.isLoadingAlarmStatusChart) {
+        alarmStatusinitialStateChanged = false;
+      }
+      return !isLoadingCheck.isLoadingAlarmStatusChart;
+    }
+    return true;
+  }
+}
+
+export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index 061303976..7324ffab8 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -17,14 +17,14 @@
  */
 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 { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@material-ui/core';
+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 { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@mui/material';
 import { loadAllTlsKeyListAsync } from '../actions/tlsKeyActions';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 
@@ -222,32 +222,32 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
           <DialogContentText>
             {setting.dialogDescription}
           </DialogContentText>
-          <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" aria-label="name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
+          <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" aria-label="name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
           {!this.state.isNameValid && <Typography variant="body1" color="error">Name cannot be empty.</Typography>}
-          <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} />
+          <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} />
           {!this.state.isHostSet && <Typography variant="body1" color="error">IP Adress cannot be empty.</Typography>}
 
-          <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} />
-          {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null}
+          <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} />
+          {setting.enableUsernameEditor && <TextField variant="standard" disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null}
 
           {setting.enableUsernameEditor &&
             <RadioGroup row aria-label="password-tls-key" name="password-tls-key" value={radioSelected}
               onChange={this.handleRadioChange} >
-              <FormControlLabel aria-label="passwordSelection" value='password' control={<Radio />} label="Password" onChange={this.onRadioSelect} />
-              <FormControlLabel aria-label="tlsKeySelection" value='tlsKey' control={<Radio />} label="TlsKey" onChange={this.onRadioSelect} />
+              <FormControlLabel aria-label="passwordSelection" value='password' control={<Radio color="secondary" />} label="Password" onChange={this.onRadioSelect} />
+              <FormControlLabel aria-label="tlsKeySelection" value='tlsKey' control={<Radio color="secondary" />} label="TlsKey" onChange={this.onRadioSelect} />
             </RadioGroup> || null}
 
           {setting.enableUsernameEditor && showPasswordTextField &&
-            <TextField disabled={!setting.enableUsernameEditor || !showPasswordTextField} spellCheck={false} margin="dense"
+            <TextField variant="standard" disabled={!setting.enableUsernameEditor || !showPasswordTextField} spellCheck={false} margin="dense"
               id="password" aria-label="password" type="password" fullWidth value={this.state.password}
               onChange={(event) => { this.setState({ password: event.target.value }); }}
             /> || null}
 
-          <FormControl fullWidth disabled={!setting.enableUsernameEditor}>
+          <FormControl variant="standard" fullWidth disabled={!setting.enableUsernameEditor}>
             {setting.enableUsernameEditor && showTlsDropdown &&
               <div>
                 <InputLabel htmlFor="pass">--Select tls-key--</InputLabel>
-                <Select disabled={!setting.enableUsernameEditor || !showTlsDropdown}
+                <Select variant="standard" disabled={!setting.enableUsernameEditor || !showTlsDropdown}
                   id="tlsKey" aria-label="tlsKey" value={this.state.tlsKey} fullWidth // displayEmpty
                   onChange={(event) => { this.setState({ tlsKey: event.target.value as any }); }}
                   inputProps={{ name: 'tlsKey', id: 'tlsKey' }}  >
@@ -259,9 +259,9 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
             }
           </FormControl>
 
-          <FormControl fullWidth disabled={!setting.enableUsernameEditor}>
+          <FormControl variant="standard" fullWidth disabled={!setting.enableUsernameEditor}>
             <InputLabel htmlFor="active">Required</InputLabel>
-            <Select aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => {
+            <Select variant="standard" aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => {
               this.setState({ isRequired: event.target.value as any as boolean });
             }} inputProps={{ name: 'required', id: 'required' }} fullWidth >
               <MenuItem value={true as any as string} aria-label="true">True</MenuItem>
@@ -286,7 +286,7 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
             }
             event.preventDefault();
             event.stopPropagation();
-          }} > {setting.applyButtonText} </Button>
+          }} color="inherit" > {setting.applyButtonText} </Button>
           <Button aria-label="dialog-cancel-button" onClick={(event) => {
             this.onCancel();
             event.preventDefault();
@@ -294,7 +294,7 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
       </Dialog>
-    )
+    );
   }
 
   public renderTlsKeys = () => {
@@ -333,7 +333,8 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
       case EditNetworkElementDialogMode.AddNewNetworkElement:
         element && this.props.addNewNetworkElement(element);
         this.setState({
-          radioSelected: ''
+          radioSelected: '',
+          isPasswordSelected: true,
         });
         break;
       case EditNetworkElementDialogMode.MountNetworkElement:
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
index aeaaa91e7..5514fa5f8 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
@@ -17,10 +17,10 @@
  */
  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 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 DialogTitle from '@mui/material/DialogTitle';
  import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
  import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
  
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index 4a7a0d269..a17a247d2 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -16,17 +16,21 @@
 * ============LICENSE_END==========================================================================
 */
 import * as React from 'react';
-import { Theme, createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
-
-import AddIcon from '@material-ui/icons/Add';
-import Refresh from '@material-ui/icons/Refresh';
-import LinkIcon from '@material-ui/icons/Link';
-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 { MenuItem, Divider, Typography } from '@material-ui/core';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+
+import AddIcon from '@mui/icons-material/Add';
+import Refresh from '@mui/icons-material/Refresh';
+import LinkIcon from '@mui/icons-material/Link';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import EditIcon from '@mui/icons-material/Edit';
+import Info from '@mui/icons-material/Info';
+import ComputerIcon from '@mui/icons-material/Computer';
+import { MenuItem, Divider, Typography } from '@mui/material';
 
 import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
@@ -189,39 +193,37 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
       }
     };
 
-    return (
-      <>
-        <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...canAdd ? [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, width:'15%' },
-          { property: "host", title: "Host", type: ColumnType.text },
-          { property: "port", title: "Port", type: ColumnType.numeric },
-          { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
-          { property: "deviceType", title: "Device Type", type: ColumnType.text },
-          { property: "deviceFunction", title: "Device Function", type: ColumnType.text, width: '15%' }
-        ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => {
-
-          return this.getContextMenu(rowData);
-        }} >
-        </NetworkElementTable>
-        <EditNetworkElementDialog
-          initialNetworkElement={networkElementToEdit}
-          mode={this.state.networkElementEditorMode}
-          onClose={this.onCloseEditNetworkElementDialog}
-          radioChecked={savedRadio}
-        />
-        <RefreshNetworkElementsDialog
-          mode={this.state.refreshNetworkElementsEditorMode}
-          onClose={this.onCloseRefreshNetworkElementsDialog}
-        />
-        <InfoNetworkElementDialog
-          initialNetworkElement={networkElementToEdit}
-          mode={this.state.infoNetworkElementEditorMode}
-          onClose={this.onCloseInfoNetworkElementDialog}
-        />
-      </>
-    );
+    return <>
+      <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...(canAdd ? [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, width:'15%' },
+        { property: "host", title: "Host", type: ColumnType.text },
+        { property: "port", title: "Port", type: ColumnType.numeric },
+        { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
+        { property: "deviceType", title: "Device Type", type: ColumnType.text },
+        { property: "deviceFunction", title: "Device Function", type: ColumnType.text, width: '15%' }
+      ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => {
+
+        return this.getContextMenu(rowData);
+      }} >
+      </NetworkElementTable>
+      <EditNetworkElementDialog
+        initialNetworkElement={networkElementToEdit}
+        mode={this.state.networkElementEditorMode}
+        onClose={this.onCloseEditNetworkElementDialog}
+        radioChecked={savedRadio}
+      />
+      <RefreshNetworkElementsDialog
+        mode={this.state.refreshNetworkElementsEditorMode}
+        onClose={this.onCloseRefreshNetworkElementsDialog}
+      />
+      <InfoNetworkElementDialog
+        initialNetworkElement={networkElementToEdit}
+        mode={this.state.infoNetworkElementEditorMode}
+        onClose={this.onCloseInfoNetworkElementDialog}
+      />
+    </>;
   };
 
   public componentDidMount() {
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx
index 41229eae6..c09f59b40 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.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 { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler';
 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
@@ -94,13 +94,13 @@ class RefreshConnectionStatusLogDialogComponent extends React.Component<RefreshC
         <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/connectApp/src/components/refreshNetworkElementsDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx
index a349977ab..27288faa6 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.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 { networkElementsReloadAction } from '../handlers/networkElementsHandler';
 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
@@ -94,13 +94,13 @@ class RefreshNetworkElementsDialogComponent extends React.Component<RefreshNetwo
         <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/connectApp/src/pluginConnect.tsx b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
index afca74664..83763485b 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
@@ -32,18 +32,19 @@ import { createNetworkElementsActions, createNetworkElementsProperties, networkE
 import connectAppRootHandler from './handlers/connectAppRootHandler';
 import ConnectApplication from './views/connectView';
 import { PanelId } from "./models/panelId";
-import { NetworkElementsList } from './components/networkElements'
+import { NetworkElementsList } from './components/networkElements';
+import DashboardHome from "./components/dashboardHome";
 
 let currentStatus: string | undefined = undefined;
 let refreshInterval: ReturnType<typeof window.setInterval> | null = null;
 
 
 const mapProps = (state: IApplicationStoreState) => ({
-  currentProblemsProperties: createNetworkElementsProperties(state),
+  networkElementDashboardProperties: createNetworkElementsProperties(state),
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
-  currentProblemsActions: createNetworkElementsActions(dispatcher.dispatch, true),
+  networkElementsDashboardActions: createNetworkElementsActions(dispatcher.dispatch, true),
   setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
 });
 
@@ -53,13 +54,13 @@ const ConnectApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteC
     window.setTimeout(() => {
       if (currentStatus) {
         props.setCurrentPanel("NetworkElements");
-        props.currentProblemsActions.onFilterChanged("status", currentStatus);
-        if (!props.currentProblemsProperties.showFilter) {
-          props.currentProblemsActions.onToggleFilter(false);
-          props.currentProblemsActions.onRefresh();
+        props.networkElementsDashboardActions.onFilterChanged("status", currentStatus);
+        if (!props.networkElementDashboardProperties.showFilter) {
+          props.networkElementsDashboardActions.onToggleFilter(false);
+          props.networkElementsDashboardActions.onRefresh();
         }
         else
-          props.currentProblemsActions.onRefresh();
+          props.networkElementsDashboardActions.onRefresh();
       }
     });
   }
@@ -83,6 +84,7 @@ export function register() {
     icon: faPlug,
     rootComponent: App,
     rootActionHandler: connectAppRootHandler,
+    dashbaordElement: DashboardHome,
     menuEntry: "Connect"
   });
 
diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index 34b1b94b6..e99b6af8e 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -28,7 +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';
+import { AppBar, Tabs, Tab } from '@mui/material';
 
 const mapProps = (state: IApplicationStoreState) => ({
   panelId: state.connect.currentOpenPanel,
@@ -96,7 +96,7 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
 
   };
 
-  private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+  private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
     this.props.switchActivePanel(newValue);
   }
 
@@ -105,8 +105,8 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
 
     return (
       <>
-        <AppBar position="static">
-          <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
+        <AppBar enableColorOnDark position="static">
+          <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
             <Tab aria-label="network-elements-list-tab" label="Network Elements" value="NetworkElements" />
             <Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
           </Tabs>
diff --git a/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml b/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
index 685ea76ba..295e8f894 100644
--- a/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
+++ b/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
@@ -25,6 +25,6 @@
     <bean id="bundle" init-method="initialize" destroy-method="clean" class="org.onap.ccsdk.features.sdnr.wt.odlux.bundles.MyOdluxBundle">
         <property name="loader" ref="loadersvc"/>
         <property name="bundleName" value="connectApp"/>
-        <property name="index" value="0"/>
+        <property name="index" value="1"/>
     </bean>
 </blueprint>
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/webpack.config.js b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
index 70ddd4932..b283e426c 100644
--- a/sdnr/wt/odlux/apps/connectApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
@@ -87,7 +87,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'",
@@ -105,7 +105,7 @@ module.exports = (env) => {
             from: 'index.html',
             to: distPath
           }]),
-        ]
+        ])
     ],
 
     devServer: {