import React from 'react'; import PropTypes from 'prop-types'; 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 'onap-ui-react'; import Validator from 'nfvo-utils/Validator.js'; 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 }) }); 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 }; 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 ) } 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 } /> 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" ) }; } submit() { if (!this.props.formReady) { this.props.onValidateForm(LIMITS_FORM_NAME); } else { this.props.onSubmit(); } } } export default LimitEditor;