diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx | 19 |
1 files changed, 12 insertions, 7 deletions
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> |