aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/performanceHistoryApp
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2022-02-01 13:18:42 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2022-02-01 13:18:42 +0100
commit1a868116614dd9996c78e69941b537e9da19460b (patch)
tree352e8e4226f6ce798610d75ceef08ad9056df6d9 /sdnr/wt/odlux/apps/performanceHistoryApp
parent9912e1626d93afeb4f7148dd5d826ae1caa1ef8a (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp')
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/package.json25
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts4
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx14
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx19
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx22
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx33
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/webpack.config.js4
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: {