diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/limits')
7 files changed, 662 insertions, 438 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js index d483383472..76ea36db98 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js @@ -1,25 +1,30 @@ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import LimitEditor from './LimitEditor.jsx'; -const mapStateToProps = ({licenseModel: {limitEditor}}) => { +const mapStateToProps = ({ licenseModel: { limitEditor } }) => { + let { data, genericFieldInfo, formReady } = limitEditor; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let {data, genericFieldInfo, formReady} = limitEditor; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - - return { - data, - genericFieldInfo, - isFormValid, - formReady - }; + return { + data, + genericFieldInfo, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}), - onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: (deltaData, formName, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName, + customValidations + }), + onValidateForm: formName => + ValidationHelper.validateForm(dispatch, formName) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
\ No newline at end of file +export default connect(mapStateToProps, mapActionsToProps)(LimitEditor); 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 54f057eaa4..0d1d4eaf10 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx @@ -5,206 +5,349 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js'; +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/validation/InputOptions.jsx'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - metric: PropTypes.shape({ - choice: PropTypes.string, - other: PropTypes.string - }), - value: PropTypes.string, - aggregationFunction: PropTypes.string, - time: PropTypes.string, - unit: PropTypes.shape({ - choice: PropTypes.string, - other: PropTypes.string - }) + id: PropTypes.string, + name: PropTypes.string, + description: PropTypes.string, + metric: PropTypes.shape({ + choice: PropTypes.string, + other: PropTypes.string + }), + value: PropTypes.string, + aggregationFunction: PropTypes.string, + time: PropTypes.string, + unit: PropTypes.shape({ + choice: PropTypes.string, + other: PropTypes.string + }) }); class LimitEditor extends React.Component { - static propTypes = { - data: LimitPropType, - limitsNames: PropTypes.object, - isReadOnlyMode: PropTypes.bool, - isFormValid: PropTypes.bool, - formReady: PropTypes.bool, - genericFieldInfo: PropTypes.object.isRequired, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onValidateForm: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + static propTypes = { + data: LimitPropType, + limitsNames: PropTypes.object, + isReadOnlyMode: PropTypes.bool, + isFormValid: PropTypes.bool, + formReady: PropTypes.bool, + genericFieldInfo: PropTypes.object.isRequired, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onValidateForm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { - this.submit(); - } - } + componentDidUpdate(prevProps) { + if ( + this.props.formReady && + this.props.formReady !== prevProps.formReady + ) { + this.submit(); + } + } - render() { - let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props; - let {name, description, metric, value, aggregationFunction, time, unit} = data; - return ( - <div className='limit-editor'> - {!data.id && - <div className='limit-editor-title'> - {data.name ? data.name : i18n('NEW LIMIT')} - </div>} - { - genericFieldInfo && - <Form - ref='validationForm' - hasButtons={false} - isValid={isFormValid} - formReady={formReady} - onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) } - labledButtons={false} - isReadOnlyMode={isReadOnlyMode} - className='limit-editor-form'> - <GridSection className='limit-editor-form-grid-section' hasLastColSet> - <GridItem colSpan={2}> - <Input - onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})} - label={i18n('Name')} - data-test-id='limit-editor-name' - value={name} - isValid={genericFieldInfo.name.isValid} - errorText={genericFieldInfo.name.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)} - label={i18n('Description')} - data-test-id='limit-editor-description' - value={description} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - isRequired={false} - type='text'/> - </GridItem> - <GridItem colSpan={2}> - <InputOptions - onInputChange={()=>{}} - isMultiSelect={false} - isRequired={true} - onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}}, - LIMITS_FORM_NAME)} - onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER, - other: metric}}, LIMITS_FORM_NAME)} - 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} /> - </GridItem> - <GridItem> - <Input - onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)} - label={i18n('Metric value')} - data-test-id='limit-editor-metric-value' - value={value} - isValid={genericFieldInfo.value.isValid} - errorText={genericFieldInfo.value.errorText} - isRequired={true} - type='text'/> - </GridItem> - <GridItem lastColInRow> - <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' - type='select' - required={false} - selectedEnum={unit && unit.choice} - otherValue={unit && unit.other} - values={selectValues.UNIT} - isValid={genericFieldInfo.unit.isValid} - errorText={genericFieldInfo.unit.errorText} /> - </GridItem> - <GridItem colSpan={2}> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);} - } - value={aggregationFunction} - label={i18n('Aggregation Function')} - data-test-id='limit-editor-aggregation-function' - isValid={genericFieldInfo.aggregationFunction.isValid} - errorText={genericFieldInfo.aggregationFunction.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.AGGREGATION_FUNCTION.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - <GridItem> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({time: val}, LIMITS_FORM_NAME);} - } - value={time} - label={i18n('Time')} - data-test-id='limit-editor-time' - isValid={genericFieldInfo.time.isValid} - errorText={genericFieldInfo.time.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.TIME.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> - </GridItem> - </GridSection> - <GridSection className='limit-editor-buttons'> - <Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> - <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button> - </GridSection> - </Form> - } - </div> - ); - } + render() { + let { + data = {}, + onDataChanged, + isReadOnlyMode, + genericFieldInfo, + onCancel, + isFormValid, + formReady, + onValidateForm + } = this.props; + let { + name, + description, + metric, + value, + aggregationFunction, + time, + unit + } = data; + return ( + <div className="limit-editor"> + {!data.id && ( + <div className="limit-editor-title"> + {data.name ? data.name : i18n('NEW LIMIT')} + </div> + )} + {genericFieldInfo && ( + <Form + ref="validationForm" + hasButtons={false} + isValid={isFormValid} + formReady={formReady} + onValidateForm={() => onValidateForm(LIMITS_FORM_NAME)} + labledButtons={false} + isReadOnlyMode={isReadOnlyMode} + className="limit-editor-form"> + <GridSection + className="limit-editor-form-grid-section" + hasLastColSet> + <GridItem colSpan={2}> + <Input + onChange={name => + onDataChanged( + { name }, + LIMITS_FORM_NAME, + { + name: () => + this.validateName(name) + } + ) + } + label={i18n('Name')} + data-test-id="limit-editor-name" + value={name} + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <Input + onChange={description => + onDataChanged( + { description }, + LIMITS_FORM_NAME + ) + } + label={i18n('Description')} + data-test-id="limit-editor-description" + value={description} + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + isRequired={false} + type="text" + /> + </GridItem> + <GridItem colSpan={2}> + <InputOptions + onInputChange={() => {}} + isMultiSelect={false} + isRequired={true} + onEnumChange={metric => + onDataChanged( + { + metric: { + choice: metric, + other: '' + } + }, + LIMITS_FORM_NAME + ) + } + onOtherChange={metric => + onDataChanged( + { + metric: { + choice: + optionInputOther.OTHER, + other: metric + } + }, + LIMITS_FORM_NAME + ) + } + 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 + } + /> + </GridItem> + <GridItem> + <Input + onChange={value => + onDataChanged( + { value }, + LIMITS_FORM_NAME + ) + } + label={i18n('Metric value')} + data-test-id="limit-editor-metric-value" + value={value} + isValid={genericFieldInfo.value.isValid} + errorText={genericFieldInfo.value.errorText} + isRequired={true} + type="text" + /> + </GridItem> + <GridItem lastColInRow> + <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" + type="select" + required={false} + selectedEnum={unit && unit.choice} + otherValue={unit && unit.other} + values={selectValues.UNIT} + isValid={genericFieldInfo.unit.isValid} + errorText={genericFieldInfo.unit.errorText} + /> + </GridItem> + <GridItem colSpan={2}> + <Input + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onDataChanged( + { aggregationFunction: val }, + LIMITS_FORM_NAME + ); + }} + value={aggregationFunction} + label={i18n('Aggregation Function')} + data-test-id="limit-editor-aggregation-function" + isValid={ + genericFieldInfo.aggregationFunction + .isValid + } + errorText={ + genericFieldInfo.aggregationFunction + .errorText + } + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {selectValues.AGGREGATION_FUNCTION.map( + mtype => ( + <option + key={mtype.enum} + value={mtype.enum}>{`${ + mtype.title + }`}</option> + ) + )} + </Input> + </GridItem> + <GridItem> + <Input + onChange={e => { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onDataChanged( + { time: val }, + LIMITS_FORM_NAME + ); + }} + value={time} + label={i18n('Time')} + data-test-id="limit-editor-time" + isValid={genericFieldInfo.time.isValid} + errorText={genericFieldInfo.time.errorText} + groupClassName="bootstrap-input-options" + className="input-options-select" + type="select"> + {selectValues.TIME.map(mtype => ( + <option + key={mtype.enum} + value={mtype.enum}>{`${ + mtype.title + }`}</option> + ))} + </Input> + </GridItem> + </GridSection> + <GridSection className="limit-editor-buttons"> + <Button + btnType="outline" + disabled={!isFormValid || isReadOnlyMode} + onClick={() => this.submit()} + type="reset"> + {i18n('Save')} + </Button> + <Button + btnType="outline" + color="gray" + onClick={onCancel} + type="reset"> + {i18n('Cancel')} + </Button> + </GridSection> + </Form> + )} + </div> + ); + } - validateName(value) { - const {data: {id}, limitsNames} = this.props; - const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames}); + validateName(value) { + const { data: { id }, limitsNames } = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({ + itemId: id, + itemName: value, + list: limitsNames + }); - return !isExists ? {isValid: true, errorText: ''} : - {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')}; - } + return !isExists + ? { isValid: true, errorText: '' } + : { + isValid: false, + errorText: i18n( + "Limit by the name '" + + value + + "' already exists. Limit name must be unique" + ) + }; + } - - submit() { - if (!this.props.formReady) { - this.props.onValidateForm(LIMITS_FORM_NAME); - } else { - this.props.onSubmit(); - } - } + submit() { + if (!this.props.formReady) { + this.props.onValidateForm(LIMITS_FORM_NAME); + } else { + this.props.onSubmit(); + } + } } 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 8ac845a1a7..a275808d01 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js @@ -14,41 +14,47 @@ * permissions and limitations under the License. */ -import {actionTypes, selectValues} from './LimitEditorConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; - +import { actionTypes, selectValues } from './LimitEditorConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitEditorActionHelper = { - openLimitsEditor(dispatch, {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}); - }, + openLimitsEditor(dispatch, { 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}); - }, + 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: '' - }; - } - } + 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; 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 9829e696c3..a916b9594c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js @@ -3,62 +3,61 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; // import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; export const actionTypes = keyMirror({ - OPEN: null, - CLOSE: null, - DATA_CHANGED: null, + OPEN: null, + CLOSE: null, + DATA_CHANGED: null }); export const LIMITS_FORM_NAME = 'LIMITSFORM'; export const selectValues = { - METRIC: [ - {enum: '', title: i18n('please select…')}, - {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…')}, - {enum: 'Peak', title: 'Peak'}, - {enum: 'Average', title: 'Average'} - ], - TIME: [ - {enum: '', title: i18n('please select…')}, - {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'}, - {enum: 'Hour', title: 'Hour'}, - {enum: 'Minute', title: 'Minute'}, - {enum: 'Second', title: 'Second'}, - {enum: 'Milli-Second', title: 'Milli-Second'} - ] - + METRIC: [ + { enum: '', title: i18n('please select…') }, + { 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…') }, + { enum: 'Peak', title: 'Peak' }, + { enum: 'Average', title: 'Average' } + ], + TIME: [ + { enum: '', title: i18n('please select…') }, + { enum: 'Day', title: 'Day' }, + { 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 = { - SERVICE_PROVIDER: 'ServiceProvider', - VENDOR: 'Vendor' + SERVICE_PROVIDER: 'ServiceProvider', + VENDOR: 'Vendor' }; export const defaultState = { - LIMITS_EDITOR_DATA: { - metric: {choice: '', other: ''}, - } + LIMITS_EDITOR_DATA: { + metric: { choice: '', other: '' } + } }; 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 99d94a09cc..a0c3b0b1b1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js @@ -14,58 +14,73 @@ * permissions and limitations under the License. */ -import {actionTypes, LIMITS_FORM_NAME, defaultState} from './LimitEditorConstants.js'; -import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; +import { + actionTypes, + LIMITS_FORM_NAME, + defaultState +} from './LimitEditorConstants.js'; +import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.OPEN: - return { - ...state, - data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA, - formReady: null, - formName: LIMITS_FORM_NAME, - genericFieldInfo: { - 'description' : { - isValid: true, - errorText: '', - validations: [{type: 'maxLength', data: 1000}] - }, - 'name' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - 'metric' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}] - }, - 'value' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - }, - 'unit' : { - isValid: true, - errorText: '', - validations: [] - }, - 'aggregationFunction' : { - isValid: true, - errorText: '', - validations: [] - }, - 'time' : { - isValid: true, - errorText: '', - validations: [] - } - } - }; - case actionTypes.CLOSE: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.OPEN: + return { + ...state, + data: action.limitItem + ? { ...action.limitItem } + : defaultState.LIMITS_EDITOR_DATA, + formReady: null, + formName: LIMITS_FORM_NAME, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [{ type: 'maxLength', data: 1000 }] + }, + name: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + metric: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { + type: 'requiredChoiceWithOther', + data: optionInputOther.OTHER + } + ] + }, + value: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + unit: { + isValid: true, + errorText: '', + validations: [] + }, + aggregationFunction: { + isValid: true, + errorText: '', + validations: [] + }, + time: { + isValid: true, + errorText: '', + validations: [] + } + } + }; + case actionTypes.CLOSE: + return {}; + default: + return state; + } }; 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 4841d0335c..2667560935 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx @@ -18,99 +18,157 @@ 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 {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js'; +import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js'; -const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => { - 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; +const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => { + 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 - onDelete={onDelete} - onSelect={onSelect} - isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field limit-name'> - <div className='text name'>{name}</div> - </div> + return ( + <ListEditorItemView + onDelete={onDelete} + onSelect={onSelect} + isReadOnlyMode={isReadOnlyMode}> + <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='text description'>{description}</div> - </div> + <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'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> - </div> - </ListEditorItemView> - ); + <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() { + const { + isReadOnlyMode = false, + limitEditor, + limitsList = [], + onCloseLimitEditor, + selectedLimit + } = this.props; + let limitsNames = {}; + for (let i = 0; i < limitsList.length; i++) { + limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id; + } + return ( + <div className="license-model-limits-view"> + <ListEditorView isReadOnlyMode={isReadOnlyMode}> + {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && + limitEditor.data && ( + <LimitEditor + limitsNames={limitsNames} + onCancel={onCloseLimitEditor} + onSubmit={() => this.submit()} + isReadOnlyMode={isReadOnlyMode} + /> + )} + {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.deleteLimit(limit)} + onSelect={ + selectedLimit + ? undefined + : () => this.props.onSelectLimit(limit) + } + clickable={!selectedLimit} + isReadOnlyMode={isReadOnlyMode} + limit={limit} + /> + {limit.id === selectedLimit && + limitEditor.data && ( + <LimitEditor + limitsNames={limitsNames} + onCancel={onCloseLimitEditor} + onSubmit={() => this.submit()} + isReadOnlyMode={isReadOnlyMode} + /> + )} + </div> + ))} + </ListEditorView> + </div> + ); + } - state = { - localFilter: '' - }; + submit() { + let { + onSubmit, + onCloseLimitEditor, + parent, + limitEditor, + licenseModelId, + version, + limitType + } = this.props; + onSubmit( + { type: limitType, ...limitEditor.data }, + parent, + licenseModelId, + version + ).then(() => onCloseLimitEditor()); + } - render() { - const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props; - let limitsNames = {}; - for (let i = 0; i < limitsList.length; i++) { - limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id; - } - return ( - <div className='license-model-limits-view'> - <ListEditorView isReadOnlyMode={isReadOnlyMode}> - {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data && - <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/> - } - {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.deleteLimit(limit)} - onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)} - clickable={!selectedLimit} - isReadOnlyMode={isReadOnlyMode} - limit={limit}/> - {limit.id === selectedLimit && limitEditor.data && - <LimitEditor - limitsNames={limitsNames} - onCancel={onCloseLimitEditor} - onSubmit={ () => this.submit()} - isReadOnlyMode={isReadOnlyMode} /> - } - </div> )} - </ListEditorView> + deleteLimit(limit) { + let { + onDelete, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + } = this.props; + onDelete({ + limit, + parent, + licenseModelId, + version, + onCloseLimitEditor, + selectedLimit + }); + } - </div> - ); - } - - submit() { - let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; - onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor()); - } - - deleteLimit(limit) { - let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props; - onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}); - } - - filterList() { - let {limitsList = []} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return limitsList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return limitsList; - } - } + filterList() { + let { limitsList = [] } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return limitsList.filter(({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + }); + } else { + return limitsList; + } + } } export default Limits; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js index 1b8ecb9d94..679f9975e5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js @@ -16,31 +16,29 @@ // items/{itemId}/users -let list = [ - -]; +let list = []; export default { - fetch() { - return Promise.resolve({ - listCount: list.length, - results: list - }); - }, + fetch() { + return Promise.resolve({ + listCount: list.length, + results: list + }); + }, - put(url, payload) { - // let {removedUsers, addedUsers} = payload; - // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers); - payload.id = Math.random() * (1000 - 1) + 1; - list.push(payload); - return Promise.resolve(); - }, + put(url, payload) { + // let {removedUsers, addedUsers} = payload; + // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers); + payload.id = Math.random() * (1000 - 1) + 1; + list.push(payload); + return Promise.resolve(); + }, - destroy(url) { - const parts = url.split('/'); - const id = parts[parts.length - 1]; - let newList = list.filter(item => item.id !== id); - list = newList; - return Promise.resolve(); - } -};
\ No newline at end of file + destroy(url) { + const parts = url.split('/'); + const id = parts[parts.length - 1]; + let newList = list.filter(item => item.id !== id); + list = newList; + return Promise.resolve(); + } +}; |