diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src')
5 files changed, 51 insertions, 41 deletions
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); } } |