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

7 files changed, 67 insertions, 54 deletions

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
index af38fb116..9a08612b8 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
@@ -21,23 +21,26 @@
   "author": "Sai Neetha Phulmali",
   "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/connect-app": "*",
-    "react-chartjs-2": "2.7.6",
-    "chart.js": "2.8.0"
+    "@odlux/framework": "*",
+    "chart.js": "2.8.0",
+    "react-chartjs-2": "2.7.6"
   },
   "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/performanceHistoryApp/src/actions/deviceListActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts
index 9637fec81..2b8e6e286 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts
@@ -51,8 +51,8 @@ export class AllDeviceListLoadedAction extends BaseAction {
  */
 export const loadAllDeviceListAsync = async (dispatch: Dispatch) => {
   dispatch(new LoadAllDeviceListAction());
-  const deviceListFromPerfHistory: DeviceListType[] = await PerformanceHistoryService.getDeviceListfromPerf15minHistory().then(ne => (ne)) || [];
-  const deviceListFromPerf24History: DeviceListType[] = await PerformanceHistoryService.getDeviceListfromPerf24hHistory().then(ne => (ne)) || [];
+  const deviceListFromPerfHistory: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf15minHistory().then(ne => (ne))) || [];
+  const deviceListFromPerf24History: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf24hHistory().then(ne => (ne))) || [];
   deviceListFromPerf24History.forEach(deviceList24h => {
     if (deviceListFromPerfHistory.findIndex(deviceList15min => deviceList15min.nodeId === deviceList24h.nodeId) < 0) {
       deviceListFromPerfHistory.push(deviceList24h);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
index e7583de12..e66e6c1e6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
@@ -18,7 +18,9 @@
 
 
 import * as React from 'react';
-import { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
+import { TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+
+import makeStyles from '@mui/styles/makeStyles';
 
 const styles = makeStyles({
     filterInput: {
@@ -44,19 +46,19 @@ const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
             {
                 props.isVisible &&
                 <div className={classes.filterContainer}>
-                    <TextField inputProps={{'aria-label': 'radio-signal-filter'}} className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{
+                    <TextField variant="standard" inputProps={{'aria-label': 'radio-signal-filter'}} className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{
                         shrink: true,
                     }} />
-                    <TextField inputProps={{'aria-label': 'scanner-id-filter'}} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{
+                    <TextField variant="standard" inputProps={{'aria-label': 'scanner-id-filter'}} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{
                         shrink: true,
                     }} />
-                    <TextField inputProps={{'aria-label': 'end-time-filter'}} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{
+                    <TextField variant="standard" inputProps={{'aria-label': 'end-time-filter'}} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{
                         shrink: true,
                     }} />
-                    <FormControl>
+                    <FormControl variant="standard">
                         <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
 
-                        <Select aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
+                        <Select variant="standard" aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
                             <MenuItem value={undefined} aria-label="none">None</MenuItem>
                             <MenuItem value={"true"} aria-label="true">true</MenuItem>
                             <MenuItem value={"false"} aria-label="false">false</MenuItem>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
index b6c14a9ce..ef6cfc712 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -17,13 +17,14 @@
  */
 
 import * as React from 'react';
-import { MenuItem, Select, FormControl, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { MenuItem, Select, FormControl, Typography, SelectChangeEvent } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { LtpIds } from 'models/availableLtps';
 import { Loader } from '../../../../framework/src/components/material-ui';
 
+import { Theme } from '@mui/material/styles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
     display: {
         display: "inline-block"
     },
@@ -47,24 +48,28 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void };
+type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, 
+    availableLtps: LtpIds[], 
+    onChangeLtp(event: SelectChangeEvent<HTMLSelectElement | string> ): void, 
+    selectedTimePeriod: string, 
+    onChangeTimePeriod(event: SelectChangeEvent<HTMLSelectElement | string> ): void };
 
 export const LtpSelection = (props: LtpSelectionProps) => {
     const classes = useStyles();
     return (
         <>
             <h3>Selected Network Element: {props.selectedNE} </h3>
-            <FormControl className={classes.display}>
+            <FormControl variant="standard" className={classes.display}>
                 <span>
                     Select LTP
                 </span>
-                <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
+                <Select variant="standard" className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
                     <MenuItem value={"-1"} aria-label="none"><em>--Select--</em></MenuItem>
                     {props.availableLtps.map(ltp =>
                         (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))}
                 </Select>
                 <span> Time-Period </span>
-                <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
+                <Select variant="standard" className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
                     <MenuItem value={"15min"} aria-label="15minutes">15min</MenuItem>
                     <MenuItem value={"24hours"} aria-label="24hours">24hours</MenuItem>
                 </Select>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
index 88dc9fd11..8696fe4d6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -17,14 +17,14 @@
  */
 
 import * as React from 'react';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import BarChartIcon from '@material-ui/icons/BarChart';
-import TableChartIcon from '@material-ui/icons/TableChart';
-import { makeStyles } from '@material-ui/core';
-import Tooltip from '@material-ui/core/Tooltip';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import makeStyles from '@mui/styles/makeStyles';
+import Tooltip from '@mui/material/Tooltip';
 import ChartFilter from './chartFilter'
-import FilterListIcon from '@material-ui/icons/FilterList';
+import FilterListIcon from '@mui/icons-material/FilterList';
 
 const styles = makeStyles({
     toggleButtonContainer: {
@@ -67,20 +67,20 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
             <div className={classes.toggleButtonContainer} >
                 <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}>
                     <ToggleButton aria-label="display-chart" key={1} value="chart">
-                        <Tooltip title="Chart">
+                        <Tooltip disableInteractive title="Chart">
                             <BarChartIcon />
                         </Tooltip>
                     </ToggleButton>
                     <ToggleButton aria-label="display-table" key={2} value="table">
-                        <Tooltip title="Table">
+                        <Tooltip disableInteractive title="Table">
                             <TableChartIcon />
                         </Tooltip>
                     </ToggleButton>
                 </ToggleButtonGroup>
 
                 <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} >
-                    <ToggleButton aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}>
-                        <Tooltip title={props.showFilter ? 'Hide filter' : 'Show available filter'}>
+                    <ToggleButton value="" aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}>
+                        <Tooltip disableInteractive title={props.showFilter ? 'Hide filter' : 'Show available filter'}>
                             <FilterListIcon />
                         </Tooltip>
                     </ToggleButton>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index b0fd54c42..b33b442d3 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -17,10 +17,13 @@
  */
 import * as React from 'react';
 
-import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 
 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
@@ -50,7 +53,7 @@ import { createSignalToInterferencePreActions, signalToInterferenceReloadAction,
 import { createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
 
 import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
-import { AppBar, Tabs, Tab } from '@material-ui/core';
+import { AppBar, Tabs, Tab, SelectChangeEvent } from '@mui/material';
 import LtpSelection from '../components/ltpSelection';
 import { ResetAllSubViewsAction } from '../actions/toggleActions';
 import { ReloadAction } from '../actions/reloadAction';
@@ -152,7 +155,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
     };
   }
 
-  onChangeTabs = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+  onChangeTabs = (event: React.SyntheticEvent, newValue: PanelId) => {
     const nextActivePanel = newValue;
     this.changeTabs(nextActivePanel);
   }
@@ -244,8 +247,8 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
           {this.state.showPanels &&
             <>
 
-              <AppBar position="static" >
-                <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance-data-tabs">
+              <AppBar enableColorOnDark position="static" >
+                <Tabs indicatorColor="secondary" textColor="inherit" value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance-data-tabs">
                   <Tab label="Performance Data" value="PerformanceData" aria-label="performance-data" />
                   <Tab label="Receive Level" value="ReceiveLevel" aria-label="receive-level" />
                   <Tab label="Transmission Power" value="TransmissionPower" aria-label="transmission-power" />
@@ -411,25 +414,25 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
   /**
   * Function which handles the time period changes.
   */
-  private handleTimePeriodChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  private handleTimePeriodChange = (event: SelectChangeEvent<HTMLSelectElement>) => {
 
     const selectedTimeInterval = event.target.value === "15min"
       ? PmDataInterval.pmInterval15Min
       : PmDataInterval.pmInterval24Hours;
 
     this.setState({
-      selectedTimePeriod: event.target.value,
+      selectedTimePeriod: event.target.value as string,
     });
 
     this.props.timeIntervalChange(selectedTimeInterval);
-    this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
-    this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp);
+    this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp, undefined, this.resetLtpDropdown);
+    this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp);
   }
 
   /**
   * Function which handles the ltp changes.
   */
-  private handleLtpChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  private handleLtpChange = (event:SelectChangeEvent<HTMLSelectElement> ) => {
 
     if (event.target.value === "-1") {
       this.setState({
@@ -440,9 +443,9 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
     } else if (event.target.value !== this.state.selectedLtp) {
       this.setState({
         showPanels: true,
-        selectedLtp: event.target.value
+        selectedLtp: event.target.value as string
       });
-      this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value);
+      this.preFilterChangeAndReload(this.state.selectedNetworkElement, this.state.selectedTimePeriod, event.target.value as string);
 
     }
   }
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
index 5faf69e83..8f2192f12 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js
@@ -85,7 +85,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'",
@@ -103,7 +103,7 @@ module.exports = (env) => {
             from: 'index.html',
             to: distPath
           }]),
-        ]
+        ])
     ],
 
     devServer: {