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

   1 import React from 'react';
   2
   3
   4 import i18n from 'nfvo-utils/i18n/i18n.js';
   5
   6 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   7 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   8 import {optionsInputValues as  EntitlementPoolsOptionsInputValues, thresholdUnitType}  from  './EntitlementPoolsConstants.js';
   9 import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
  10
  11
  12 const EntitlementPoolPropType = React.PropTypes.shape({
  13         id: React.PropTypes.string,
  14         name: React.PropTypes.string,
  15         description: React.PropTypes.string,
  16         manufacturerReferenceNumber: React.PropTypes.string,
  17         operationalScope: React.PropTypes.shape({
  18                 choices: React.PropTypes.array,
  19                 other: React.PropTypes.string
  20         }),
  21         aggregationFunction: React.PropTypes.shape({
  22                 choice: React.PropTypes.string,
  23                 other: React.PropTypes.string
  24         }),
  25         increments: React.PropTypes.string,
  26         time: React.PropTypes.shape({
  27                 choice: React.PropTypes.string,
  28                 other: React.PropTypes.string
  29         }),
  30         entitlementMetric: React.PropTypes.shape({
  31                 choice: React.PropTypes.string,
  32                 other: React.PropTypes.string
  33         })
  34 });
  35
  36 class EntitlementPoolsEditorView extends React.Component {
  37
  38         static propTypes = {
  39                 data: EntitlementPoolPropType,
  40                 previousData: EntitlementPoolPropType,
  41                 isReadOnlyMode: React.PropTypes.bool,
  42                 onDataChanged: React.PropTypes.func.isRequired,
  43                 onSubmit: React.PropTypes.func.isRequired,
  44                 onCancel: React.PropTypes.func.isRequired
  45         };
  46
  47         static defaultProps = {
  48                 data: {}
  49         };
  50
  51         render() {
  52                 let {data = {}, onDataChanged, isReadOnlyMode} = this.props;
  53                 let {
  54                         name, description, manufacturerReferenceNumber, operationalScope, aggregationFunction, thresholdUnits, thresholdValue,
  55                         increments, time, entitlementMetric} = data;
  56                 let thresholdValueValidation = thresholdUnits === thresholdUnitType.PERCENTAGE ? {numeric: true, required: true, maxValue: 100} : {numeric: true, required: true};
  57                 let timeValidation = time && time.choice === optionInputOther.OTHER ? {numeric: true, required: true} : {required: true};
  58
  59                 return (
  60                         <ValidationForm
  61                                 ref='validationForm'
  62                                 hasButtons={true}
  63                                 onSubmit={ () => this.submit() }
  64                                 onReset={ () => this.props.onCancel() }
  65                                 labledButtons={true}
  66                                 isReadOnlyMode={isReadOnlyMode}
  67                                 className='entitlement-pools-form'>
  68                                 <div className='entitlement-pools-form-row'>
  69                                         <ValidationInput
  70                                                 onChange={name => onDataChanged({name})}
  71                                                 label={i18n('Name')}
  72                                                 value={name}
  73                                                 validations={{maxLength: 120, required: true}}
  74                                                 type='text'/>
  75
  76                                         <ValidationInput
  77                                                 isMultiSelect={true}
  78                                                 onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}})}
  79                                                 onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], other: operationalScope}})}
  80                                                 multiSelectedEnum={operationalScope && operationalScope.choices}
  81                                                 label={i18n('Operational Scope')}
  82                                                 otherValue={operationalScope && operationalScope.other}
  83                                                 validations={{required: true}}
  84                                                 values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE}/>
  85
  86                                 </div>
  87                                 <div className='entitlement-pools-form-row'>
  88                                         <ValidationInput
  89                                                 onChange={description => onDataChanged({description})}
  90                                                 label={i18n('Description')}
  91                                                 value={description}
  92                                                 validations={{maxLength: 1000, required: true}}
  93                                                 type='textarea'/>
  94                                         <div className='entitlement-pools-form-row-group'>
  95                                                 <div className='entitlement-pools-form-row'>
  96                                                         <ValidationInput
  97                                                                 onEnumChange={thresholdUnits => onDataChanged({thresholdUnits})}
  98                                                                 selectedEnum={thresholdUnits}
  99                                                                 label={i18n('Threshold Value')}
 100                                                                 type='select'
 101                                                                 values={EntitlementPoolsOptionsInputValues.THRESHOLD_UNITS}
 102                                                                 validations={{required: true}}/>
 103                                                         <ValidationInput
 104                                                                 className='entitlement-pools-form-row-threshold-value'
 105                                                                 onChange={thresholdValue => onDataChanged({thresholdValue})}
 106                                                                 value={thresholdValue}
 107                                                                 validations={thresholdValueValidation}
 108                                                                 type='text'/>
 109                                                 </div>
 110
 111                                                 <ValidationInput
 112                                                         onEnumChange={entitlementMetric => onDataChanged({entitlementMetric:{choice: entitlementMetric, other: ''}})}
 113                                                         onOtherChange={entitlementMetric => onDataChanged({entitlementMetric:{choice: optionInputOther.OTHER, other: entitlementMetric}})}
 114                                                         selectedEnum={entitlementMetric && entitlementMetric.choice}
 115                                                         otherValue={entitlementMetric && entitlementMetric.other}
 116                                                         label={i18n('Entitlement Metric')}
 117                                                         validations={{required: true}}
 118                                                         values={EntitlementPoolsOptionsInputValues.ENTITLEMENT_METRIC}/>
 119                                                 <ValidationInput
 120                                                         onEnumChange={aggregationFunction => onDataChanged({aggregationFunction:{choice: aggregationFunction, other: ''}})}
 121                                                         onOtherChange={aggregationFunction => onDataChanged({aggregationFunction:{choice: optionInputOther.OTHER, other: aggregationFunction}})}
 122                                                         selectedEnum={aggregationFunction && aggregationFunction.choice}
 123                                                         otherValue={aggregationFunction && aggregationFunction.other}
 124                                                         validations={{required: true}}
 125                                                         label={i18n('Aggregate Function')}
 126                                                         values={EntitlementPoolsOptionsInputValues.AGGREGATE_FUNCTION}/>
 127
 128                                         </div>
 129                                 </div>
 130                                 <div className='entitlement-pools-form-row'>
 131
 132                                         <ValidationInput
 133                                                 onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber})}
 134                                                 label={i18n('Manufacturer Reference Number')}
 135                                                 value={manufacturerReferenceNumber}
 136                                                 validations={{maxLength: 100, required: true}}
 137                                                 type='text'/>
 138
 139                                         <ValidationInput
 140                                                 onEnumChange={time => onDataChanged({time:{choice: time, other: ''}})}
 141                                                 onOtherChange={time => onDataChanged({time:{choice: optionInputOther.OTHER, other: time}})}
 142                                                 selectedEnum={time && time.choice}
 143                                                 otherValue={time && time.other}
 144                                                 validations={timeValidation}
 145                                                 label={i18n('Time')}
 146                                                 values={EntitlementPoolsOptionsInputValues.TIME}/>
 147                                 </div>
 148                                 <div className='entitlement-pools-form-row'>
 149                                         <ValidationInput
 150                                                 onChange={increments => onDataChanged({increments})}
 151                                                 label={i18n('Increments')}
 152                                                 value={increments}
 153                                                 validations={{maxLength: 120}}
 154                                                 type='text'/>
 155
 156                                 </div>
 157                         </ValidationForm>
 158                 );
 159         }
 160
 161         submit() {
 162                 const {data: entitlementPool, previousData: previousEntitlementPool} = this.props;
 163                 this.props.onSubmit({entitlementPool, previousEntitlementPool});
 164         }
 165 }
 166
 167 export default EntitlementPoolsEditorView;