diff options
author | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2022-02-01 13:18:42 +0100 |
---|---|---|
committer | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2022-02-01 13:18:42 +0100 |
commit | 1a868116614dd9996c78e69941b537e9da19460b (patch) | |
tree | 352e8e4226f6ce798610d75ceef08ad9056df6d9 /sdnr/wt/odlux/apps/performanceHistoryApp/src/components | |
parent | 9912e1626d93afeb4f7148dd5d826ae1caa1ef8a (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/src/components')
3 files changed, 31 insertions, 24 deletions
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> |