diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/limits')
5 files changed, 152 insertions, 80 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx index f70f917725..5c4e50d673 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx @@ -7,16 +7,24 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js'; import Button from 'sdc-ui/lib/react/Button.js'; import Validator from 'nfvo-utils/Validator.js'; +import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; +import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitPropType = React.PropTypes.shape({ id: React.PropTypes.string, name: React.PropTypes.string, description: React.PropTypes.string, - metric: React.PropTypes.string, - value: React.PropTypes.number, + metric: React.PropTypes.shape({ + choice: React.PropTypes.string, + other: React.PropTypes.string + }), + value: React.PropTypes.string, aggregationFunction: React.PropTypes.string, time: React.PropTypes.string, - unit: React.PropTypes.number + unit: React.PropTypes.shape({ + choice: React.PropTypes.string, + other: React.PropTypes.string + }) }); class LimitEditor extends React.Component { @@ -33,8 +41,8 @@ class LimitEditor extends React.Component { onCancel: React.PropTypes.func.isRequired }; - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { + componentDidUpdate(prevProps) { + if (this.props.formReady && this.props.formReady !== prevProps.formReady) { this.submit(); } } @@ -44,21 +52,21 @@ class LimitEditor extends React.Component { let {name, description, metric, value, aggregationFunction, time, unit} = data; return ( <div className='limit-editor'> - {!data.id && + {!data.id && <div className='limit-editor-title'> {data.name ? data.name : i18n('NEW LIMIT')} </div>} { - genericFieldInfo && + genericFieldInfo && <Form ref='validationForm' - hasButtons={false} + hasButtons={false} isValid={isFormValid} formReady={formReady} onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) } labledButtons={false} isReadOnlyMode={isReadOnlyMode} - className='limit-editor-form'> + className='limit-editor-form'> <GridSection className='limit-editor-form-grid-section'> <GridItem colSpan={2}> <Input @@ -83,24 +91,23 @@ class LimitEditor extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({metric: val}, LIMITS_FORM_NAME);} - } + <InputOptions + onInputChange={()=>{}} + isMultiSelect={false} isRequired={true} - value={metric} + onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}}, + LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} + onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER, + other: metric}}, LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} label={i18n('Metric')} data-test-id='limit-editor-metric' + type='select' + required={true} + selectedEnum={metric && metric.choice} + otherValue={metric && metric.other} + values={selectValues.METRIC} isValid={genericFieldInfo.metric.isValid} - errorText={genericFieldInfo.metric.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.METRIC.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> + errorText={genericFieldInfo.metric.errorText} /> </GridItem> <GridItem> <Input @@ -111,22 +118,30 @@ class LimitEditor extends React.Component { isValid={genericFieldInfo.value.isValid} errorText={genericFieldInfo.value.errorText} isRequired={true} - type='number'/> + type='text'/> </GridItem> <GridItem> - <Input - onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)} + <InputOptions + onInputChange={()=>{}} + isMultiSelect={false} + isRequired={false} + onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}}, + LIMITS_FORM_NAME)} + onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER, + other: unit}}, LIMITS_FORM_NAME)} label={i18n('Units')} data-test-id='limit-editor-units' - value={unit} + type='select' + required={false} + selectedEnum={unit && unit.choice} + otherValue={unit && unit.other} + values={selectValues.UNIT} isValid={genericFieldInfo.unit.isValid} - errorText={genericFieldInfo.unit.errorText} - isRequired={false} - type='number'/> + errorText={genericFieldInfo.unit.errorText} /> </GridItem> <GridItem colSpan={2}> <Input - onChange={e => { + onChange={e => { const selectedIndex = e.target.selectedIndex; const val = e.target.options[selectedIndex].value; onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);} @@ -145,7 +160,7 @@ class LimitEditor extends React.Component { </GridItem> <GridItem> <Input - onChange={e => { + onChange={e => { const selectedIndex = e.target.selectedIndex; const val = e.target.options[selectedIndex].value; onDataChanged({time: val}, LIMITS_FORM_NAME);} @@ -160,15 +175,15 @@ class LimitEditor extends React.Component { type='select' > {selectValues.TIME.map(mtype => <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> + </Input> </GridItem> </GridSection> <GridSection className='limit-editor-buttons'> - <Button btnType='outline' disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> + <Button btnType='outline' disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button> - </GridSection> - </Form> - } + </GridSection> + </Form> + } </div> ); } @@ -181,6 +196,24 @@ class LimitEditor extends React.Component { {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')}; } + validateChoiceWithOther(value) { + let chosen = value.choice; + // if we have an empty multiple select we have a problem since it's required + if (value.choices) { + if (value.choices.length === 0) { + return Validator.validate('field', '', [{type: 'required', data: true}]); + } else { + // continuing validation with the first chosen value in case we have the 'Other' field + chosen = value.choices[0]; + } + } + if (chosen !== optionInputOther.OTHER) { + return Validator.validate('field', chosen, [{type: 'required', data: true}]); + } else { // when 'Other' was chosen, validate other value + return Validator.validate('field', value.other, [{type: 'required', data: true}]); + } + } + submit() { if (!this.props.formReady) { this.props.onValidateForm(LIMITS_FORM_NAME); @@ -190,4 +223,4 @@ class LimitEditor extends React.Component { } } -export default LimitEditor;
\ No newline at end of file +export default LimitEditor; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js index 09c64ada62..8ac845a1a7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js @@ -14,17 +14,41 @@ * permissions and limitations under the License. */ -import {actionTypes} from './LimitEditorConstants.js'; +import {actionTypes, selectValues} from './LimitEditorConstants.js'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitEditorActionHelper = { openLimitsEditor(dispatch, {limit}) { - dispatch({type: actionTypes.OPEN, limitItem: limit}); + let modifiedLimit = {...limit}; + if (limit && limit.metric) { + modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC); + } + if (limit && limit.unit) { + modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT); + } + dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit}); }, closeLimitsEditor(dispatch) { dispatch({type: actionTypes.CLOSE}); + }, + + createChoiceObject(value, optionsList) { + let option = optionsList.find(function(item) { return item.enum === value; }); + if (!option) { + return { + choice: optionInputOther.OTHER, + other: value + }; + } + else { + return { + choice: value, + other: '' + }; + } } }; -export default LimitEditorActionHelper;
\ No newline at end of file +export default LimitEditorActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js index 1bef286442..9829e696c3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js @@ -13,18 +13,25 @@ export const LIMITS_FORM_NAME = 'LIMITSFORM'; export const selectValues = { METRIC: [ {enum: '', title: i18n('please select…')}, - {enum: 'Software_Instances_Count', title: 'Software Instances'}, - {enum: 'Core', title: 'Core'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Trunks', title: 'Trunks'}, - {enum: 'User', title: 'User'}, - {enum: 'Subscribers', title: 'Subscribers'}, - {enum: 'Tenants', title: 'Tenants'}, - {enum: 'Tokens', title: 'Tokens'}, - {enum: 'Seats', title: 'Seats'}, - {enum: 'Units_TB', title: 'Units-TB'}, - {enum: 'Units_GB', title: 'Units-GB'}, - {enum: 'Units_MB', title: 'Units-MB'} + {enum: 'BWTH', title: 'BWTH'}, + {enum: 'Country', title: 'Country'}, + {enum: 'Session', title: 'Session'}, + {enum: 'LoB', title: 'LoB'}, + {enum: 'Site', title: 'Site'}, + {enum: 'Usage', title: 'Usage'} + ], + UNIT: [ + {enum: '', title: i18n('please select…')}, + {enum: 'trunk', title: 'Trunks'}, + {enum: 'user', title: 'Users'}, + {enum: 'subscriber', title: 'Subscribers'}, + {enum: 'session', title: 'Sessions'}, + {enum: 'tenant', title: 'Tenants'}, + {enum: 'token', title: 'Tokens'}, + {enum: 'seats', title: 'Seats'}, + {enum: 'TB', title: 'TB'}, + {enum: 'GB', title: 'GB'}, + {enum: 'MB', title: 'MB'} ], AGGREGATION_FUNCTION: [ {enum: '', title: i18n('please select…')}, @@ -33,11 +40,14 @@ export const selectValues = { ], TIME: [ {enum: '', title: i18n('please select…')}, - {enum: 'Hour', title: 'Hour'}, {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'} + {enum: 'Month', title: 'Month'}, + {enum: 'Hour', title: 'Hour'}, + {enum: 'Minute', title: 'Minute'}, + {enum: 'Second', title: 'Second'}, + {enum: 'Milli-Second', title: 'Milli-Second'} ] - + }; export const limitType = { @@ -46,7 +56,9 @@ export const limitType = { }; export const defaultState = { - LIMITS_EDITOR_DATA: {} + LIMITS_EDITOR_DATA: { + metric: {choice: '', other: ''}, + } }; -export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
\ No newline at end of file +export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js index 2499093af2..de9e7c8c38 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js @@ -20,7 +20,7 @@ export default (state = {}, action) => { switch (action.type) { case actionTypes.OPEN: return { - ...state, + ...state, data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA, formReady: null, formName: LIMITS_FORM_NAME, @@ -38,17 +38,17 @@ export default (state = {}, action) => { 'metric' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}] + validations: [] }, 'value' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}, {type: 'numeric', data: true}, {type: 'minimum', data: 0}] + validations: [{type: 'required', data: true}] }, 'unit' : { isValid: true, errorText: '', - validations: [{type: 'numeric', data: true}] + validations: [] }, 'aggregationFunction' : { isValid: true, @@ -67,4 +67,4 @@ export default (state = {}, action) => { default: return state; } -};
\ No newline at end of file +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx index ec5a1dff72..b144f63968 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx @@ -17,40 +17,43 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; -import LimitEditor from './LimitEditor.js'; +import LimitEditor from './LimitEditor.js'; import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js'; const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => { - const {name, description, metric, value, aggregationFunction = '', time = ''} = limit; + const {name, description, value, metric, aggregationFunction = '', time = ''} = limit; const timeLabel = time ? `per ${time}` : ''; + let metricOption = selectValues.METRIC.find(item => item.enum === metric); + metricOption = metricOption ? metricOption.title : metric; + return ( - <ListEditorItemView + <ListEditorItemView onDelete={onDelete} onSelect={onSelect} isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field limit-name'> + <div className='list-editor-item-view-field limit-name'> <div className='text name'>{name}</div> </div> - <div className='list-editor-item-view-field limit-description'> + <div className='list-editor-item-view-field limit-description'> <div className='text description'>{description}</div> </div> - <div className='list-editor-item-view-field limit-metric-details'> - <div className='text description'>{`${selectValues.METRIC.find(item => item.enum === metric).title} ${value} ${aggregationFunction} ${timeLabel}`}</div> - </div> + <div className='list-editor-item-view-field limit-metric-details'> + <div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> + </div> </ListEditorItemView> ); }; class Limits extends React.Component { - + state = { localFilter: '' }; - render() { + render() { const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props; let limitsNames = {}; for (let i = 0; i < limitsList.length; i++) { @@ -66,26 +69,26 @@ class Limits extends React.Component { {limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>} {limitsList.map(limit => <div key={limit.id} className='limit-item-wrapper'> - <LimitItem - onDelete={() => this.delete(limit)} + <LimitItem + onDelete={() => this.deleteLimit(limit)} onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)} - clickable={!selectedLimit} - isReadOnlyMode={isReadOnlyMode} + clickable={!selectedLimit} + isReadOnlyMode={isReadOnlyMode} limit={limit}/> {limit.id === selectedLimit && limitEditor.data && <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()}/>} </div> )} </ListEditorView> - + </div> ); } submit() { - let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; + let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor()); } - delete(limit) { + deleteLimit(limit) { let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props; onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}); } |