From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Tue, 1 Feb 2022 13:18:42 +0100
Subject: 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
---
 .../src/actions/deviceListActions.ts               |  4 +--
 .../src/components/chartFilter.tsx                 | 14 +++++----
 .../src/components/ltpSelection.tsx                | 19 ++++++++-----
 .../src/components/toggleContainer.tsx             | 22 +++++++--------
 .../src/views/performanceHistoryApplication.tsx    | 33 ++++++++++++----------
 5 files changed, 51 insertions(+), 41 deletions(-)

(limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src')

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);
 
     }
   }
-- 
cgit 1.2.3-korg