gerrit.o-ran-sc Code Review - oam/oam-controller.git/blob

   1
   2 /**
   3  * ============LICENSE_START========================================================================
   4  * ONAP : ccsdk feature sdnr wt odlux
   5  * =================================================================================================
   6  * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
   7  * =================================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   9  * in compliance with the License. You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software distributed under the License
  14  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  15  * or implied. See the License for the specific language governing permissions and limitations under
  16  * the License.
  17  * ============LICENSE_END==========================================================================
  18  */
  19
  20 import React, { FC, useEffect, useState } from 'react';
  21
  22 import CloseIcon from '@mui/icons-material/Close';
  23 import makeStyles from '@mui/styles/makeStyles';
  24 import { InputProps } from '@mui/material/Input';
  25 import Dialog from '@mui/material/Dialog';
  26 import DialogContentText from '@mui/material/DialogContentText';
  27 import DialogTitle from '@mui/material/DialogTitle';
  28 import DialogContent from '@mui/material/DialogContent';
  29 import DialogActions from '@mui/material/DialogActions';
  30 import IconButton from '@mui/material/IconButton';
  31 import Box from '@mui/material/Box';
  32
  33 import MaterialTable, { ColumnType, MaterialTableCtorType } from '../../../../../framework/src/components/material-table';
  34
  35 import { AdaptiveModulationTable } from '../model/adaptiveModulationTable';
  36 import { Modulation } from '../model/modulation';
  37 import Checkbox from '@mui/material/Checkbox';
  38 import Button from '@mui/material/Button';
  39
  40
  41 type PropTypes = InputProps & {
  42   style?: React.CSSProperties;
  43   open: boolean;
  44   close(): void;
  45   row: AdaptiveModulationTable[];
  46   direction: string;
  47   selectedElement: string[];
  48   updateModulation(data: string[]): void;
  49 };
  50
  51 const ModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveModulationTable>;
  52 const styles = makeStyles({
  53   closeIcon: {
  54     position: 'absolute',
  55     top: 0,
  56     right: 0,
  57     color: 'black',
  58   },
  59   closeButton: {
  60     marginTop: 20, position: 'absolute', top: '850px', right: '50px',
  61   },
  62   applyButton: {
  63     marginTop: 20, position: 'absolute', top: '850px', right: '160px',
  64   },
  65 });
  66
  67 export const AdaptiveModulationDialog: FC<PropTypes> = ({ open, row, close, direction, selectedElement, updateModulation }) => {
  68   const [selectedElements, setSelectedElements] = useState<string[]>(selectedElement);
  69   const classes = styles();
  70
  71   const onChange = (element: any) => {
  72     const data: { modulation: string; parameters: Modulation | null } = { modulation: element.target.value, parameters: null };
  73     setSelectedElements([element.target.value]);
  74
  75     if (selectedElements.includes(data.modulation)) {
  76
  77       setSelectedElements(selectedElements.filter((i) => i !== data.modulation));
  78
  79     } else {
  80       var newData = [...selectedElements, data.modulation];
  81       setSelectedElements(newData);
  82
  83     }
  84   };
  85
  86   const onClose = () => {
  87     close();
  88   };
  89
  90   const onSave = () => {
  91     updateModulation(selectedElements);
  92     close();
  93   };
  94   useEffect(() => {
  95     setSelectedElements(selectedElement);
  96   }, []);
  97
  98   return (
  99     <div>
 100       <Dialog onClose={() => onClose()} open={open} fullWidth maxWidth={'lg'} >
 101         <DialogContent>
 102           <DialogContentText>
 103             Adaptive Modulation
 104           </DialogContentText>
 105           <DialogTitle>{direction}</DialogTitle>
 106
 107           <DialogActions>
 108             <IconButton
 109               aria-label="close"
 110               className={classes.closeIcon}
 111               onClick={() => onClose()}
 112               size="large">
 113               <CloseIcon />
 114             </IconButton>
 115
 116           </DialogActions>
 117
 118           {row !== null ?
 119             <><ModulationTable allowHtmlHeader stickyHeader idProperty="modulation" tableId={`adaptive-modulation-${direction}`} title='Select adaptive modulations'
 120               defaultSortColumn='modulation' defaultSortOrder='desc' rows={row}
 121               columns={[
 122                 { property: 'modulation', title: 'Supported Modulation', type: ColumnType.text, width: '20px' },
 123                 {
 124                   property: 'enabledModulation', type: ColumnType.custom, title: 'Enabled Modulation',
 125                   customControl: ({ rowData }) => (<Checkbox color="secondary" checked={selectedElements.includes(rowData.modulation)}
 126                     value={rowData.modulation} onClick={(e) => onChange(e)} />),
 127                 },
 128                 { property: 'dataRate', title: 'Data Rate (Mbit/s)', type: ColumnType.numeric },
 129                 { property: 'receiverThresholdBER-3', title: 'Thrs BER 10<sup>-3</sup> (dBm)', type: ColumnType.numeric },
 130                 { property: 'receiverThresholdBER-6', title: 'Thrs BER 10<sup>-6</sup> (dBm)', type: ColumnType.numeric },
 131                 { property: 'receivedSignalLevel', title: 'RSL (dBm)', type: ColumnType.numeric },
 132                 { property: 'linkMarginBER-3', title: 'Margin (dB)\n BER 10<sup>-3</sup>', type: ColumnType.numeric },
 133                 { property: 'linkMarginBER-6', title: 'Margin (dB)\n BER 10<sup>-6</sup>', type: ColumnType.numeric },
 134                 { property: 'txPowerMin', title: 'txPower\nMin(dBm)', type: ColumnType.numeric },
 135                 { property: 'txPowerMax', title: 'txPower\nMax(dBm)', type: ColumnType.numeric },
 136                 { property: 'rainAvailabilityBER-3', title: 'Rain Availability\n BER10<sup>-3</sup>', type: ColumnType.numeric },
 137                 { property: 'rainAvailabilityBER-6', title: 'Rain Availability\n BER10<sup>-6</sup>', type: ColumnType.numeric },
 138                 { property: 'multipathAvailabilityBER-3', title: 'multipath Fading\n BER10<sup>-3</sup>', type: ColumnType.numeric },
 139                 { property: 'multipathAvailabilityBER-6', title: 'multipath Fading\n BER10<sup>-6</sup>', type: ColumnType.numeric },
 140               ]} />
 141               <Box>
 142                 <Button variant="contained" color="primary" onClick={() => onClose()} className={classes.closeButton}>
 143                   CANCEL
 144                 </Button>
 145                 <Button variant="contained" color="primary" onClick={() => onSave()} className={classes.applyButton}>
 146                   SAVE
 147                 </Button>
 148               </Box>
 149             </>
 150             : null
 151           }
 152         </DialogContent>
 153       </Dialog>
 154     </div >
 155   );
 156 };
 157 export default AdaptiveModulationDialog;