openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Validator from 'nfvo-utils/Validator.js';
  20
  21 import Input from 'nfvo-components/input/validation/Input.jsx';
  22 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
  23 import Form from 'nfvo-components/input/validation/Form.jsx';
  24 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  25 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  26 import {optionsInputValues as  EntitlementPoolsOptionsInputValues, thresholdUnitType, SP_ENTITLEMENT_POOL_FORM}  from  './EntitlementPoolsConstants.js';
  27 import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
  28
  29 const EntitlementPoolPropType = React.PropTypes.shape({
  30         id: React.PropTypes.string,
  31         name: React.PropTypes.string,
  32         description: React.PropTypes.string,
  33         manufacturerReferenceNumber: React.PropTypes.string,
  34         operationalScope: React.PropTypes.shape({
  35                 choices: React.PropTypes.array,
  36                 other: React.PropTypes.string
  37         }),
  38         aggregationFunction: React.PropTypes.shape({
  39                 choice: React.PropTypes.string,
  40                 other: React.PropTypes.string
  41         }),
  42         increments: React.PropTypes.string,
  43         time: React.PropTypes.shape({
  44                 choice: React.PropTypes.string,
  45                 other: React.PropTypes.string
  46         }),
  47         entitlementMetric: React.PropTypes.shape({
  48                 choice: React.PropTypes.string,
  49                 other: React.PropTypes.string
  50         })
  51 });
  52
  53 const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName, validateChoiceWithOther, validateTimeOtherValue, thresholdValueValidation}) => {
  54         let {
  55                 name, description, manufacturerReferenceNumber, operationalScope , aggregationFunction,  thresholdUnits, thresholdValue,
  56                 increments, time, entitlementMetric} = data;
  57
  58         return (
  59                 <GridSection>
  60                         <GridItem colSpan={2}>
  61                                 <Input
  62                                         onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})}
  63                                         isValid={genericFieldInfo.name.isValid}
  64                                         isRequired={true}
  65                                         errorText={genericFieldInfo.name.errorText}
  66                                         label={i18n('Name')}
  67                                         value={name}
  68                                         data-test-id='create-ep-name'
  69                                         type='text'/>
  70                         </GridItem>
  71                         <GridItem colSpan={2}>
  72                                 <InputOptions
  73                                         onInputChange={()=>{}}
  74                                         isMultiSelect={true}
  75
  76                                         isRequired={true}
  77                                         onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
  78                                                 SP_ENTITLEMENT_POOL_FORM, {operationalScope: validateChoiceWithOther})}
  79                                         onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
  80                                                 other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM, {operationalScope: validateChoiceWithOther})}
  81                                         label={i18n('Operational Scope')}
  82                                         data-test-id='create-ep-operational-scope'
  83                                         type='select'
  84                                         multiSelectedEnum={operationalScope && operationalScope.choices}
  85                                         otherValue={operationalScope && operationalScope.other}
  86                                         values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE}
  87                                         isValid={genericFieldInfo.operationalScope.isValid}
  88                                         errorText={genericFieldInfo.operationalScope.errorText} />
  89                         </GridItem>
  90                         <GridItem colSpan={2} stretch>
  91                                 <Input
  92                                         onChange={description => onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)}
  93                                         isValid={genericFieldInfo.description.isValid}
  94                                         errorText={genericFieldInfo.description.errorText}
  95                                         label={i18n('Description')}
  96                                         value={description}
  97                                         isRequired={true}
  98                                         data-test-id='create-ep-description'
  99                                         type='textarea'/>
 100                         </GridItem>
 101                         <GridItem colSpan={2}>
 102                                 <div className='threshold-section'>
 103                                         <Input
 104                                                 isRequired={true}
 105                                                 onChange={e => {
 106                                                         // setting the unit to the correct value
 107                                                         const selectedIndex = e.target.selectedIndex;
 108                                                         const val = e.target.options[selectedIndex].value;
 109                                                         onDataChanged({thresholdUnits: val}, SP_ENTITLEMENT_POOL_FORM);
 110                                                         // TODO make sure that the value is valid too
 111                                                         onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{thresholdValue : thresholdValueValidation});}
 112
 113                                                 }
 114                                                 value={thresholdUnits}
 115                                                 label={i18n('Threshold Units')}
 116                                                 data-test-id='create-ep-threshold-units'
 117                                                 isValid={genericFieldInfo.thresholdUnits.isValid}
 118                                                 errorText={genericFieldInfo.thresholdUnits.errorText}
 119                                                 groupClassName='bootstrap-input-options'
 120                                                 className='input-options-select'
 121                                                 type='select' >
 122                                                 {EntitlementPoolsOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
 123                                                         <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
 124                                         </Input>
 125
 126                                         <Input
 127                                                 className='entitlement-pools-form-row-threshold-value'
 128                                                 onChange={thresholdValue => onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM,
 129                                                         {thresholdValue : thresholdValueValidation})}
 130                                                 label={i18n('Threshold Value')}
 131                                                 isValid={genericFieldInfo.thresholdValue.isValid}
 132                                                 errorText={genericFieldInfo.thresholdValue.errorText}
 133                                                 data-test-id='create-ep-threshold-value'
 134                                                 value={thresholdValue}
 135                                                 isRequired={true}
 136                                                 type='text'/>
 137                                 </div>
 138                                 <InputOptions
 139                                         onInputChange={()=>{}}
 140                                         isMultiSelect={false}
 141                                         isRequired={true}
 142                                         onEnumChange={entitlementMetric => onDataChanged({entitlementMetric:{choice: entitlementMetric, other: ''}},
 143                                                 SP_ENTITLEMENT_POOL_FORM, {entitlementMetric: validateChoiceWithOther})}
 144                                         onOtherChange={entitlementMetric => onDataChanged({entitlementMetric:{choice: optionInputOther.OTHER,
 145                                                 other: entitlementMetric}}, SP_ENTITLEMENT_POOL_FORM, {entitlementMetric: validateChoiceWithOther})}
 146                                         label={i18n('Entitlement Metric')}
 147                                         data-test-id='create-ep-entitlement-metric'
 148                                         type='select'
 149                                         required={true}
 150                                         selectedEnum={entitlementMetric && entitlementMetric.choice}
 151                                         otherValue={entitlementMetric && entitlementMetric.other}
 152                                         values={EntitlementPoolsOptionsInputValues.ENTITLEMENT_METRIC}
 153                                         isValid={genericFieldInfo.entitlementMetric.isValid}
 154                                         errorText={genericFieldInfo.entitlementMetric.errorText} />
 155                                 <InputOptions
 156                                         onInputChange={()=>{}}
 157                                         isMultiSelect={false}
 158                                         isRequired={true}
 159                                         onEnumChange={aggregationFunction => onDataChanged({aggregationFunction:{choice: aggregationFunction, other: ''}},
 160                                                 SP_ENTITLEMENT_POOL_FORM, {aggregationFunction: validateChoiceWithOther})}
 161                                         onOtherChange={aggregationFunction => onDataChanged({aggregationFunction:{choice: optionInputOther.OTHER,
 162                                                 other: aggregationFunction}}, SP_ENTITLEMENT_POOL_FORM, {aggregationFunction: validateChoiceWithOther})}
 163                                         label={i18n('Aggregate Function')}
 164                                         data-test-id='create-ep-aggregate-function'
 165                                         type='select'
 166                                         required={true}
 167                                         selectedEnum={aggregationFunction && aggregationFunction.choice}
 168                                         otherValue={aggregationFunction && aggregationFunction.other}
 169                                         values={EntitlementPoolsOptionsInputValues.AGGREGATE_FUNCTION}
 170                                         isValid={genericFieldInfo.aggregationFunction.isValid}
 171                                         errorText={genericFieldInfo.aggregationFunction.errorText} />
 172                         </GridItem>
 173                         <GridItem colSpan={2}>
 174                                 <Input
 175                                         onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, SP_ENTITLEMENT_POOL_FORM)}
 176                                         label={i18n('Manufacturer Reference Number')}
 177                                         value={manufacturerReferenceNumber}
 178                                         isRequired={true}
 179                                         data-test-id='create-ep-reference-number'
 180                                         type='text'/>
 181                         </GridItem>
 182                         <GridItem colSpan={2}>
 183                                 <InputOptions
 184                                         onInputChange={()=>{}}
 185                                         isMultiSelect={false}
 186                                         isRequired={true}
 187                                         onEnumChange={time => onDataChanged({time:{choice: time, other: ''}},
 188                                                 SP_ENTITLEMENT_POOL_FORM, {time: validateChoiceWithOther})}
 189                                         onOtherChange={time => onDataChanged({time:{choice: optionInputOther.OTHER,
 190                                                 other: time}}, SP_ENTITLEMENT_POOL_FORM, {time: validateTimeOtherValue})}
 191                                         label={i18n('Time')}
 192                                         data-test-id='create-ep-time'
 193                                         type='select'
 194                                         required={true}
 195                                         selectedEnum={time && time.choice}
 196                                         otherValue={time && time.other}
 197                                         values={EntitlementPoolsOptionsInputValues.TIME}
 198                                         isValid={genericFieldInfo.time.isValid}
 199                                         errorText={genericFieldInfo.time.errorText} />
 200                         </GridItem>
 201                         <GridItem colSpan={2}>
 202                                 <Input
 203                                         onChange={increments => onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)}
 204                                         label={i18n('Increments')}
 205                                         value={increments}
 206                                         data-test-id='create-ep-increments'
 207                                         type='text'/>
 208                         </GridItem>
 209                 </GridSection>
 210         );
 211 };
 212
 213 class EntitlementPoolsEditorView extends React.Component {
 214
 215         static propTypes = {
 216                 data: EntitlementPoolPropType,
 217                 previousData: EntitlementPoolPropType,
 218                 EPNames: React.PropTypes.object,
 219                 isReadOnlyMode: React.PropTypes.bool,
 220                 onDataChanged: React.PropTypes.func.isRequired,
 221                 onSubmit: React.PropTypes.func.isRequired,
 222                 onCancel: React.PropTypes.func.isRequired
 223         };
 224
 225         static defaultProps = {
 226                 data: {}
 227         };
 228
 229         render() {
 230                 let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo} = this.props;
 231
 232
 233                 return (
 234                         <div>
 235                                 {
 236                                         genericFieldInfo && <Form
 237                                                 ref='validationForm'
 238                                                 hasButtons={true}
 239                                                 onSubmit={ () => this.submit() }
 240                                                 onReset={ () => this.props.onCancel() }
 241                                                 labledButtons={true}
 242                                                 isReadOnlyMode={isReadOnlyMode}
 243                                                 isValid={this.props.isFormValid}
 244                                                 formReady={this.props.formReady}
 245                                                 onValidateForm={() => this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) }
 246                                                 className='entitlement-pools-form'>
 247                                                 <EntitlementPoolsFormContent
 248                                                         data={data}
 249                                                         genericFieldInfo={genericFieldInfo}
 250                                                         onDataChanged={onDataChanged}
 251                                                         validateName={(value)=> this.validateName(value)}
 252                                                         validateTimeOtherValue ={(value)=> this.validateTimeOtherValue(value)}
 253                                                         validateChoiceWithOther={(value)=> this.validateChoiceWithOther(value)}
 254                                                         thresholdValueValidation={(value, state)=> this.thresholdValueValidation(value, state)}/>
 255                                         </Form>
 256                                 }
 257                         </div>
 258                 );
 259         }
 260
 261         submit() {
 262                 const {data: entitlementPool, previousData: previousEntitlementPool} = this.props;
 263                 this.props.onSubmit({entitlementPool, previousEntitlementPool});
 264         }
 265
 266         validateName(value) {
 267                 const {data: {id}, EPNames} = this.props;
 268                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames});
 269
 270                 return !isExists ?  {isValid: true, errorText: ''} :
 271                 {isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')};
 272         }
 273
 274         validateTimeOtherValue(value) {
 275                 return Validator.validate('time', value.other, [{type: 'required', data: true}, {type: 'numeric', data: true}]);
 276         }
 277
 278         validateChoiceWithOther(value) {
 279                 let chosen = value.choice;
 280                 // if we have an empty multiple select we have a problem since it's required
 281                 if (value.choices) {
 282                         if (value.choices.length === 0) {
 283                                 return  Validator.validate('field', '', [{type: 'required', data: true}]);
 284                         } else {
 285                                 // continuing validation with the first chosen value in case we have the 'Other' field
 286                                 chosen = value.choices[0];
 287                         }
 288                 }
 289                 if (chosen !== optionInputOther.OTHER) {
 290                         return  Validator.validate('field', chosen, [{type: 'required', data: true}]);
 291                 } else { // when 'Other' was chosen, validate other value
 292                         return  Validator.validate('field', value.other, [{type: 'required', data: true}]);
 293                 }
 294         }
 295
 296         thresholdValueValidation(value, state) {
 297
 298                 let  unit = state.data.thresholdUnits;
 299                 if (unit === thresholdUnitType.PERCENTAGE) {
 300                         return Validator.validate('thresholdValue', value, [
 301                                 {type: 'required', data: true},
 302                                 {type: 'numeric', data: true},
 303                                 {type: 'maximum', data: 100},
 304                                 {type: 'minimum', data: 0}]);
 305                 } else {
 306                         return Validator.validate('thresholdValue', value, [
 307                                 {type: 'numeric', data: true},
 308                                 {type: 'required', data: true}]);
 309                 }
 310         }
 311
 312 }
 313
 314 export default EntitlementPoolsEditorView;