[SDC] Full OnBoard health-check and NFoD support

Change-Id: I606f8a52c7e6d2bd5558f824957d890e552c5423
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

1 files changed, 193 insertions, 0 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
new file mode 100644
index 0000000000..f70f917725
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -0,0 +1,193 @@
+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';
+
+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,
+	aggregationFunction: React.PropTypes.string,
+	time: React.PropTypes.string,
+	unit: React.PropTypes.number
+});
+
+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 (
+			<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'>
+						<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}>
+							<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}>
+							<Input
+								onChange={e => {									
+									const selectedIndex = e.target.selectedIndex;
+									const val = e.target.options[selectedIndex].value;
+									onDataChanged({metric: val}, LIMITS_FORM_NAME);}
+								}
+								isRequired={true}
+								value={metric}
+								label={i18n('Metric')}
+								data-test-id='limit-editor-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>
+						</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='number'/>
+						</GridItem>
+						<GridItem>
+							<Input
+								onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)}
+								label={i18n('Units')}
+								data-test-id='limit-editor-units'
+								value={unit}
+								isValid={genericFieldInfo.unit.isValid}
+								errorText={genericFieldInfo.unit.errorText}
+								isRequired={false}
+								type='number'/>
+						</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} 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});
+
+		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;
\ No newline at end of file