openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4 import Form from 'nfvo-components/input/validation/Form.jsx';
   5 import Input from 'nfvo-components/input/validation/Input.jsx';
   6 import GridSection from 'nfvo-components/grid/GridSection.jsx';
   7 import GridItem from 'nfvo-components/grid/GridItem.jsx';
   8 import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
   9 import Button from 'sdc-ui/lib/react/Button.js';
  10 import Validator from 'nfvo-utils/Validator.js';
  11 import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
  12 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
  13
  14 const LimitPropType = PropTypes.shape({
  15         id: PropTypes.string,
  16         name: PropTypes.string,
  17         description: PropTypes.string,
  18         metric: PropTypes.shape({
  19                 choice: PropTypes.string,
  20                 other: PropTypes.string
  21         }),
  22         value: PropTypes.string,
  23         aggregationFunction: PropTypes.string,
  24         time: PropTypes.string,
  25         unit: PropTypes.shape({
  26                 choice: PropTypes.string,
  27                 other: PropTypes.string
  28         })
  29 });
  30
  31 class LimitEditor extends React.Component {
  32         static propTypes = {
  33                 data: LimitPropType,
  34                 limitsNames: PropTypes.object,
  35                 isReadOnlyMode: PropTypes.bool,
  36                 isFormValid: PropTypes.bool,
  37                 formReady: PropTypes.bool,
  38                 genericFieldInfo: PropTypes.object.isRequired,
  39                 onDataChanged: PropTypes.func.isRequired,
  40                 onSubmit: PropTypes.func.isRequired,
  41                 onValidateForm: PropTypes.func.isRequired,
  42                 onCancel: PropTypes.func.isRequired
  43         };
  44
  45         componentDidUpdate(prevProps) {
  46                 if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
  47                         this.submit();
  48                 }
  49         }
  50
  51         render() {
  52                 let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props;
  53                 let {name, description, metric, value, aggregationFunction, time, unit} = data;
  54                 return (
  55                         <div className='limit-editor'>
  56                         {!data.id &&
  57                         <div className='limit-editor-title'>
  58                                 {data.name ? data.name : i18n('NEW LIMIT')}
  59                         </div>}
  60                         {
  61                                 genericFieldInfo &&
  62                                 <Form
  63                                         ref='validationForm'
  64                                         hasButtons={false}
  65                                         isValid={isFormValid}
  66                                         formReady={formReady}
  67                                         onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
  68                                         labledButtons={false}
  69                                         isReadOnlyMode={isReadOnlyMode}
  70                                         className='limit-editor-form'>
  71                                         <GridSection className='limit-editor-form-grid-section' hasLastColSet>
  72                                                 <GridItem colSpan={2}>
  73                                                         <Input
  74                                                                 onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})}
  75                                                                 label={i18n('Name')}
  76                                                                 data-test-id='limit-editor-name'
  77                                                                 value={name}
  78                                                                 isValid={genericFieldInfo.name.isValid}
  79                                                                 errorText={genericFieldInfo.name.errorText}
  80                                                                 isRequired={true}
  81                                                                 type='text'/>
  82                                                 </GridItem>
  83                                                 <GridItem colSpan={2} lastColInRow>
  84                                                         <Input
  85                                                                 onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)}
  86                                                                 label={i18n('Description')}
  87                                                                 data-test-id='limit-editor-description'
  88                                                                 value={description}
  89                                                                 isValid={genericFieldInfo.description.isValid}
  90                                                                 errorText={genericFieldInfo.description.errorText}
  91                                                                 isRequired={false}
  92                                                                 type='text'/>
  93                                                 </GridItem>
  94                                                 <GridItem colSpan={2}>
  95                                                         <InputOptions
  96                                                                 onInputChange={()=>{}}
  97                                                                 isMultiSelect={false}
  98                                                                 isRequired={true}
  99                                                                 onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
 100                                                                         LIMITS_FORM_NAME)}
 101                                                                 onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
 102                                                                         other: metric}}, LIMITS_FORM_NAME)}
 103                                                                 label={i18n('Metric')}
 104                                                                 data-test-id='limit-editor-metric'
 105                                                                 type='select'
 106                                                                 required={true}
 107                                                                 selectedEnum={metric && metric.choice}
 108                                                                 otherValue={metric && metric.other}
 109                                                                 values={selectValues.METRIC}
 110                                                                 isValid={genericFieldInfo.metric.isValid}
 111                                                                 errorText={genericFieldInfo.metric.errorText} />
 112                                                 </GridItem>
 113                                                 <GridItem>
 114                                                         <Input
 115                                                                 onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)}
 116                                                                 label={i18n('Metric value')}
 117                                                                 data-test-id='limit-editor-metric-value'
 118                                                                 value={value}
 119                                                                 isValid={genericFieldInfo.value.isValid}
 120                                                                 errorText={genericFieldInfo.value.errorText}
 121                                                                 isRequired={true}
 122                                                                 type='text'/>
 123                                                 </GridItem>
 124                                                 <GridItem lastColInRow>
 125                                                         <InputOptions
 126                                                                 onInputChange={()=>{}}
 127                                                                 isMultiSelect={false}
 128                                                                 isRequired={false}
 129                                                                 onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
 130                                                                         LIMITS_FORM_NAME)}
 131                                                                 onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
 132                                                                         other: unit}}, LIMITS_FORM_NAME)}
 133                                                                 label={i18n('Units')}
 134                                                                 data-test-id='limit-editor-units'
 135                                                                 type='select'
 136                                                                 required={false}
 137                                                                 selectedEnum={unit && unit.choice}
 138                                                                 otherValue={unit && unit.other}
 139                                                                 values={selectValues.UNIT}
 140                                                                 isValid={genericFieldInfo.unit.isValid}
 141                                                                 errorText={genericFieldInfo.unit.errorText} />
 142                                                 </GridItem>
 143                                                 <GridItem colSpan={2}>
 144                                                         <Input
 145                                                                 onChange={e => {
 146                                                                         const selectedIndex = e.target.selectedIndex;
 147                                                                         const val = e.target.options[selectedIndex].value;
 148                                                                         onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
 149                                                                 }
 150                                                                 value={aggregationFunction}
 151                                                                 label={i18n('Aggregation Function')}
 152                                                                 data-test-id='limit-editor-aggregation-function'
 153                                                                 isValid={genericFieldInfo.aggregationFunction.isValid}
 154                                                                 errorText={genericFieldInfo.aggregationFunction.errorText}
 155                                                                 groupClassName='bootstrap-input-options'
 156                                                                 className='input-options-select'
 157                                                                 type='select' >
 158                                                                 {selectValues.AGGREGATION_FUNCTION.map(mtype =>
 159                                                                         <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
 160                                                         </Input>
 161                                                 </GridItem>
 162                                                 <GridItem>
 163                                                         <Input
 164                                                                 onChange={e => {
 165                                                                         const selectedIndex = e.target.selectedIndex;
 166                                                                         const val = e.target.options[selectedIndex].value;
 167                                                                         onDataChanged({time: val}, LIMITS_FORM_NAME);}
 168                                                                 }
 169                                                                 value={time}
 170                                                                 label={i18n('Time')}
 171                                                                 data-test-id='limit-editor-time'
 172                                                                 isValid={genericFieldInfo.time.isValid}
 173                                                                 errorText={genericFieldInfo.time.errorText}
 174                                                                 groupClassName='bootstrap-input-options'
 175                                                                 className='input-options-select'
 176                                                                 type='select' >
 177                                                                 {selectValues.TIME.map(mtype =>
 178                                                                         <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
 179                                                         </Input>
 180                                                 </GridItem>
 181                                         </GridSection>
 182                                         <GridSection className='limit-editor-buttons'>
 183                                                 <Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
 184                                                 <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
 185                                         </GridSection>
 186                                 </Form>
 187                         }
 188                         </div>
 189                 );
 190         }
 191
 192         validateName(value) {
 193                 const {data: {id}, limitsNames} = this.props;
 194                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames});
 195
 196                 return !isExists ?  {isValid: true, errorText: ''} :
 197                 {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
 198         }
 199
 200
 201         submit() {
 202                 if (!this.props.formReady) {
 203                         this.props.onValidateForm(LIMITS_FORM_NAME);
 204                 } else {
 205                         this.props.onSubmit();
 206                 }
 207         }
 208 }
 209
 210 export default LimitEditor;