import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; 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 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.shape({ choice: React.PropTypes.string, other: React.PropTypes.string }), value: React.PropTypes.string, aggregationFunction: React.PropTypes.string, time: React.PropTypes.string, unit: React.PropTypes.shape({ choice: React.PropTypes.string, other: React.PropTypes.string }) }); class LimitEditor extends React.Component { static propTypes = { data: LimitPropType, limitsNames: React.PropTypes.object, isReadOnlyMode: React.PropTypes.bool, isFormValid: React.PropTypes.bool, formReady: React.PropTypes.bool, genericFieldInfo: React.PropTypes.object.isRequired, onDataChanged: React.PropTypes.func.isRequired, onSubmit: React.PropTypes.func.isRequired, onValidateForm: React.PropTypes.func.isRequired, onCancel: React.PropTypes.func.isRequired }; 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 (
{!data.id &&
{data.name ? data.name : i18n('NEW LIMIT')}
} { genericFieldInfo &&
onValidateForm(LIMITS_FORM_NAME) } labledButtons={false} isReadOnlyMode={isReadOnlyMode} className='limit-editor-form'> 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'/> 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'/> {}} isMultiSelect={false} isRequired={true} 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} /> 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'/> {}} 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} /> { 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 => )} { 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 => )}
}
); } 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')}; } 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); } else { this.props.onSubmit(); } } } export default LimitEditor;