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

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 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 import React from 'react';
  19
  20 import { FormControl, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
  21 import { Theme } from '@mui/material/styles';
  22 import makeStyles from '@mui/styles/makeStyles';
  23 import { Loader } from '../../../../framework/src/components/material-ui';
  24 import { LtpIds } from '../models/availableLtps';
  25
  26 const useStyles = makeStyles((theme: Theme) => ({
  27   display: {
  28     display: 'inline-block',
  29   },
  30   selectDropdown: {
  31     borderRadius: 1,
  32     position: 'relative',
  33     backgroundColor: theme.palette.background.paper,
  34     border: '1px solid #ced4da',
  35     fontSize: 16,
  36     width: 'auto',
  37     padding: '5px 5px 5px 5px',
  38     transition: theme.transitions.create(['border-color', 'box-shadow']),
  39   },
  40   center: {
  41     'flex': '1',
  42     'height': '100%',
  43     'display': 'flex',
  44     'alignItems': 'center',
  45     'justifyContent': 'center',
  46     flexDirection: 'column',
  47   },
  48 }));
  49
  50 type LtpSelectionProps = {
  51   selectedNE: string; error?: string; finishedLoading: boolean; selectedLtp: string;
  52   availableLtps: LtpIds[];
  53   onChangeLtp(event: SelectChangeEvent<HTMLSelectElement | string>): void;
  54   selectedTimePeriod: string;
  55   onChangeTimePeriod(event: SelectChangeEvent<HTMLSelectElement | string>): void;
  56 };
  57
  58 export const LtpSelection = (props: LtpSelectionProps) => {
  59   const classes = useStyles();
  60   return (
  61     <>
  62       <h3>Selected Network Element: {props.selectedNE} </h3>
  63       <FormControl variant="standard" className={classes.display}>
  64         <span>
  65           Select LTP
  66         </span>
  67         <Select variant="standard" className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
  68           <MenuItem value={'-1'} aria-label="none"><em>--Select--</em></MenuItem>
  69           {props.availableLtps.map(ltp =>
  70             (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))}
  71         </Select>
  72         <span> Time-Period </span>
  73         <Select variant="standard" className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
  74           <MenuItem value={'15min'} aria-label="15minutes">15min</MenuItem>
  75           <MenuItem value={'24hours'} aria-label="24hours">24hours</MenuItem>
  76         </Select>
  77       </FormControl>
  78       {
  79         !props.finishedLoading && !props.error &&
  80         <div className={classes.center}>
  81           <Loader />
  82           <h3>Collecting Data ...</h3>
  83         </div>
  84       }
  85       {
  86         props.finishedLoading && props.error &&
  87         <div className={classes.center}>
  88           <h3>Data couldn't be loaded</h3>
  89           <Typography variant="body1">{props.error}</Typography>
  90         </div>
  91       }
  92       {
  93         props.selectedLtp === '-1' && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ?
  94           <div className={classes.center}>
  95             <h3>Please select a LTP</h3>
  96           </div>
  97           :
  98           <div className={classes.center}>
  99             <h3>No performance data found</h3>
 100           </div>)
 101       }
 102     </>);
 103 };
 104
 105 export default LtpSelection;