sdnr/wt-odlux/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19
  20 import * as React from 'react';
  21
  22 import { TextField, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
  23
  24 import makeStyles from '@mui/styles/makeStyles';
  25
  26 const styles = makeStyles({
  27   filterInput: {
  28     marginRight: '15px',
  29   },
  30   filterContainer: {
  31     marginLeft: '90px',
  32   },
  33 });
  34
  35 type filterProps = { isVisible: boolean; onFilterChanged: (property: string, filterTerm: string) => void; filters: any };
  36
  37 const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
  38
  39
  40   const classes = styles();
  41
  42   // make sure suspectIntervalFlag is a string to show the correct value in the select element
  43
  44   const suspectIntervalFlag = props.filters.suspectIntervalFlag === undefined ? undefined : props.filters.suspectIntervalFlag.toString();
  45   return (
  46     <>
  47       {
  48         props.isVisible &&
  49         <div className={classes.filterContainer}>
  50           <TextField variant="standard" inputProps={{ 'aria-label': 'radio-signal-filter' }} className={classes.filterInput}
  51             label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged('radioSignalId', event.target.value)} InputLabelProps={{
  52               shrink: true,
  53             }} />
  54           <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={{
  55             shrink: true,
  56           }} />
  57           <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={{
  58             shrink: true,
  59           }} />
  60           <FormControl variant="standard">
  61             <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
  62
  63             <Select variant="standard" aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged('suspectIntervalFlag', event.target.value as string)}>
  64               <MenuItem value={undefined} aria-label="none">None</MenuItem>
  65               <MenuItem value={'true'} aria-label="true">true</MenuItem>
  66               <MenuItem value={'false'} aria-label="false">false</MenuItem>
  67             </Select>
  68           </FormControl>
  69         </ div>
  70       }
  71     </>
  72   );
  73 };
  74
  75 export default ChartFilter;