[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

49 files changed, 2195 insertions, 1464 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
index 3b8bc4f171..2ae9ad0bae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
@@ -1,44 +1,43 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
-import {actionTypes} from './SoftwareProductComponentsConstants.js';
+import {actionTypes, forms} from './SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
 	switch (action.type) {
-		case actionTypes.COMPONENT_UPDATE:
-			return {
-				...state,
-				data: action.component
-			};
-		case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
-			return {
-				...state,
-				qdata: action.payload.qdata || state.qdata,
-				qschema: action.payload.qschema || state.qschema
-			};
-		case actionTypes.COMPONENT_DATA_CHANGED:
+		case actionTypes.COMPONENT_LOAD:
 			return {
 				...state,
-				data: {
-					...state.data,
-					...action.deltaData
+				formReady: null,
+				formName: forms.ALL_SPC_FORMS,
+				genericFieldInfo: {
+					'displayName' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					},
+					'vfcCode' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					},
+					'description' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					}
 				}
 			};
 		default:
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
index e53b2ecafe..9b3c9eaa73 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
@@ -1,56 +1,51 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
-import {actionTypes} from './SoftwareProductComponentsConstants.js';
+import {actionTypes, COMPONENTS_QUESTIONNAIRE, forms} from './SoftwareProductComponentsConstants.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-function baseUrl(softwareProductId) {
+function baseUrl(softwareProductId, version) {
+	const versionId = version.id;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components`;
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
 }
 
 function fetchSoftwareProductComponents(softwareProductId, version) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}${versionQuery}`);
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function putSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, vspComponent) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId)}/${vspComponentId}/questionnaire`, vspComponent);
+function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent);
 }
 
-function fetchSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, version){
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}/${vspComponentId}/questionnaire${versionQuery}`);
+function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`);
 }
 
-function fetchSoftwareProductComponent(softwareProductId, vspComponentId, version){
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}/${vspComponentId}${versionQuery}`);
+function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`);
 }
 
-function putSoftwareProductComponent(softwareProductId, vspComponentId, vspComponent) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId)}/${vspComponentId}`, {
+function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, {
 		name: vspComponent.name,
 		displayName: vspComponent.displayName,
+		vfcCode: vspComponent.vfcCode,
 		description: vspComponent.description
 	});
 }
@@ -65,27 +60,19 @@ const SoftwareProductComponentsActionHelper = {
 		});
 	},
 
-	componentDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: actionTypes.COMPONENT_DATA_CHANGED,
-			deltaData
-		});
-	},
-
-
-	updateSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId, componentData, qdata}) {
+	updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) {
 		return Promise.all([
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, qdata}),
-			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, vspComponentId, componentData})
+			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}),
+			SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData})
 		]);
 	},
 
-	updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, qdata}) {
-		return putSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, qdata);
+	updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) {
+		return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata);
 	},
 
-	updateSoftwareProductComponentData(dispatch, {softwareProductId, vspComponentId, componentData}) {
-		return putSoftwareProductComponent(softwareProductId, vspComponentId, componentData).then(() => dispatch({
+	updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) {
+		return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({
 			type: actionTypes.COMPONENTS_LIST_EDIT,
 			component: {
 				id: vspComponentId,
@@ -94,36 +81,36 @@ const SoftwareProductComponentsActionHelper = {
 		}));
 	},
 
-
-	fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId, version}) {
-		return fetchSoftwareProductComponentQuestionnaire(softwareProductId, vspComponentId, version).then(response => {
-			dispatch({
-				type: actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE,
-				payload: {
-					qdata: response.data ? JSON.parse(response.data) : {},
-					qschema: JSON.parse(response.schema)
-				}
-			});
+	fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId}) {
+		return fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
+			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
+				qschema: JSON.parse(response.schema)}});
 		});
 	},
 
-	fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId, version}) {
-		return fetchSoftwareProductComponent(softwareProductId, vspComponentId, version).then(response => {
-			dispatch({
-				type: actionTypes.COMPONENT_UPDATE,
-				component: response.data
-			});
+	fetchSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId}) {
+		dispatch({
+			type: actionTypes.COMPONENT_LOAD
 		});
+		return Promise.all([
+			fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => {
+				ValidationHelper.dataChanged(dispatch,{deltaData: response.data, formName: forms.ALL_SPC_FORMS});
+				return response;
+			}),
+			fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
+				ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
+					qschema: JSON.parse(response.schema)}});
+			})
+		]);
 	},
 
-	componentQuestionnaireUpdated(dispatch, {data}) {
+
+	clearComponentsStore(dispatch) {
 		dispatch({
-			type: actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE,
-			payload: {
-				qdata: data
-			}
+			type: actionTypes.COMPONENTS_LIST_UPDATE,
+			componentsList: []
 		});
-	},
+	}
 };
 
 export default SoftwareProductComponentsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
index dee517e5d1..9307b099ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
@@ -1,31 +1,24 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
 	COMPONENTS_LIST_UPDATE: null,
 	COMPONENTS_LIST_EDIT: null,
-	COMPONENT_UPDATE: null,
-	COMPONENT_DATA_CHANGED: null,
-	COMPONENT_QUESTIONNAIRE_UPDATE: null
+	COMPONENT_LOAD: null
 });
 
 export const storageConstants  = keyMirror({
@@ -35,12 +28,18 @@ export const storageConstants  = keyMirror({
 	}
 });
 
+export const forms = keyMirror({
+	ALL_SPC_FORMS: null,
+	NIC_EDIT_FORM: null
+});
+
+export const COMPONENTS_QUESTIONNAIRE = 'component';
+
 export const navigationItems = keyMirror({
 	STORAGE: 'Storage',
 	PROCESS_DETAILS: 'Process Details',
 	MONITORING: 'Monitoring',
 	NETWORK: 'Network',
 	COMPUTE: 'Compute',
-	NETWORK: 'Network',
 	LOAD_BALANCING: 'High Availability & Load Balancing'
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js
index f1c1ed1fcc..f789a92c6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsList.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import SoftwareProductComponentsListView from './SoftwareProductComponentsListView.jsx';
 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
@@ -37,9 +32,9 @@ const mapStateToProps = ({softwareProduct}) => {
 };
 
 
-const mapActionToProps = (dispatch, {version}) => {
+const mapActionToProps = (dispatch) => {
 	return {
-		onComponentSelect: ({id: softwareProductId, componentId}) => {
+		onComponentSelect: ({id: softwareProductId, componentId, version}) => {
 			OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version });
 		}
 	};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
index b91362a0cf..c7aaca5573 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {actionTypes} from './SoftwareProductComponentsConstants.js';
 
 export default (state = [], action) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
index 0c0ba0f646..c28831fbde 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
@@ -1,8 +1,24 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 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 ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
 const ComponentPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
@@ -43,8 +59,9 @@ class SoftwareProductComponentsListView extends React.Component {
 				title={i18n('Virtual Function Components')}
 				filterValue={localFilter}
 				placeholder={i18n('Filter Components')}
-				onFilter={filter => this.setState({localFilter: filter})}
-				isReadOnlyMode={isReadOnlyMode}>
+				onFilter={value => this.setState({localFilter: value})}
+				isReadOnlyMode={isReadOnlyMode}
+				twoColumns>
 				{this.filterList().map(component => this.renderComponentsListItem(component))}
 			</ListEditorView>
 		);
@@ -52,20 +69,18 @@ class SoftwareProductComponentsListView extends React.Component {
 
 	renderComponentsListItem(component) {
 		let {id: componentId, name, displayName, description = ''} = component;
-		let {currentSoftwareProduct: {id}, onComponentSelect} = this.props;
+		let {currentSoftwareProduct: {id, version}, onComponentSelect} = this.props;
 		return (
 			<ListEditorItemView
 				key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
 				className='list-editor-item-view'
-				onSelect={() => onComponentSelect({id, componentId})}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Component')}</div>
+				onSelect={() => onComponentSelect({id, componentId, version})}>
+				<ListEditorItemViewField>
 					<div className='name'>{displayName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
+				</ListEditorItemViewField>
+				<ListEditorItemViewField>
 					<div className='description'>{description}</div>
-				</div>
+				</ListEditorItemViewField>
 			</ListEditorItemView>
 		);
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
index 7ac1c707ab..e97477b54d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
@@ -1,51 +1,46 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx';
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 
 const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, qschema}} = softwareProductComponents;
+	let {componentEditor: {qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
 
-	let minNumberOfVMsSelectedByUser = 0;
-	if(qdata && qdata.compute && qdata.compute.numOfVMs){
-		minNumberOfVMsSelectedByUser = qdata.compute.numOfVMs.minimum || 0;
-	}
-
 	return {
 		qdata,
-		qschema,
-		isReadOnlyMode,
-		minNumberOfVMsSelectedByUser
+		dataMap,
+		qgenericFieldInfo,
+		isReadOnlyMode
 	};
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});}
+		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, customValidations: customValidations,
+			qName: COMPONENTS_QUESTIONNAIRE}),
+		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});},
+		qValidateData: (data, customValidations) => ValidationHelper.qValidateData(dispatch, {data, customValidations: customValidations,
+			qName: COMPONENTS_QUESTIONNAIRE})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
index 3bad147117..8c197f0d49 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
@@ -1,128 +1,71 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
-
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import VmSizing from './computeComponents/VmSizing.jsx';
+import NumberOfVms from './computeComponents/NumberOfVms.jsx';
+import GuestOs from './computeComponents/GuestOs.jsx';
+import Validator from 'nfvo-utils/Validator.js';
 
 class SoftwareProductComponentComputeView extends React.Component {
 
 	static propTypes = {
-		qdata: React.PropTypes.object,
-		qschema: React.PropTypes.object,
+		dataMap: React.PropTypes.object,
+		qgenericFieldInfo: React.PropTypes.object,
 		isReadOnlyMode: React.PropTypes.bool,
-		minNumberOfVMsSelectedByUser: React.PropTypes.number,
 		onQDataChanged: React.PropTypes.func.isRequired,
+		qValidateData: React.PropTypes.func.isRequired,
 		onSubmit: React.PropTypes.func.isRequired
 	};
 
 	render() {
-		let {qdata, qschema, isReadOnlyMode, minNumberOfVMsSelectedByUser, onQDataChanged, onSubmit} = this.props;
+		let {qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData, onSubmit} = this.props;
 
 		return (
 			<div className='vsp-component-questionnaire-view'>
-				<ValidationForm
-					ref='computeValidationForm'
+				{ qgenericFieldInfo && <Form
+					ref={ (form) => { this.form = form; }}
+					formReady={null}
+					isValid={true}
 					hasButtons={false}
 					onSubmit={() => onSubmit({qdata})}
 					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode}
-					onDataChanged={onQDataChanged}
-					data={qdata}
-					schema={qschema}>
-
-					<div className='section-title'>{i18n('VM Sizing')}</div>
-					<div className='rows-section'>
-						<div className='row-flex-components input-row'>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Number of CPUs')}
-									pointer={'/compute/vmSizing/numOfCPUs'}/>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('File System Size (GB)')}
-									pointer={'/compute/vmSizing/fileSystemSizeGB'}/>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Persistent Storage/Volume Size (GB)')}
-									pointer={'/compute/vmSizing/persistentStorageVolumeSize'}/>
-							</div>
-							<ValidationInput
-								type='text'
-								label={i18n('I/O Operations (per second)')}
-								pointer={'/compute/vmSizing/IOOperationsPerSec'}/>
-						</div>
-					</div>
-					<div className='section-title'>{i18n('Number of VMs')}</div>
-					<div className='rows-section'>
-						<div className='row-flex-components input-row'>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Minimum')}
-									pointer={'/compute/numOfVMs/minimum'}/>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Maximum')}
-									pointer={'/compute/numOfVMs/maximum'}
-									validations={{minValue: minNumberOfVMsSelectedByUser}}/>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='select'
-									label={i18n('CPU Oversubscription Ratio')}
-									pointer={'/compute/numOfVMs/CpuOverSubscriptionRatio'}/>
-							</div>
-							<ValidationInput
-								type='select'
-								label={i18n('Memory - RAM')}
-								pointer={'/compute/numOfVMs/MemoryRAM'}/>
-						</div>
-					</div>
-
-					<div className='section-title'>{i18n('Guest OS')}</div>
-					<div className='rows-section'>
-						<div className='section-field row-flex-components input-row'>
-							<div className='two-col'>
-								<ValidationInput
-									label={i18n('Guest OS')}
-									type='text'
-									pointer={'/compute/guestOS/name'}/>
-							</div>
-							<div className='empty-two-col'/>
-						</div>
-						<div className='vertical-flex input-row'>
-							<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
-							<div className='radio-options-content-row input-row'>
-								<ValidationInput
-									type='radiogroup'
-									pointer={'/compute/guestOS/bitSize'}
-									className='radio-field'/>
-							</div>
-						</div>
-						<div className='section-field row-flex-components input-row'>
-							<div className='two-col'>
-								<ValidationInput
-									type='textarea'
-									label={i18n('Guest OS Tools:')}
-									pointer={'/compute/guestOS/tools'}/>
-							</div>
-							<div className='empty-two-col'/>
-						</div>
-					</div>
-				</ValidationForm>
+					isReadOnlyMode={isReadOnlyMode} >
+					<VmSizing onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} />
+					<NumberOfVms onQDataChanged={onQDataChanged} dataMap={dataMap}
+						 qgenericFieldInfo={qgenericFieldInfo} qValidateData={qValidateData}
+						 customValidations={{'compute/numOfVMs/maximum' : this.validateMax, 'compute/numOfVMs/minimum': this.validateMin}} />
+					<GuestOs onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} />
+				</Form> }
 			</div>
 		);
 	}
 
 	save(){
-		return this.refs.computeValidationForm.handleFormSubmit(new Event('dummy'));
+		return this.form.handleFormSubmit(new Event('dummy'));
+	}
+
+	validateMin(value, state) {
+		let maxVal = state.dataMap['compute/numOfVMs/maximum'];
+		return Validator.validateItem(value,maxVal,'maximum');
+	}
+
+	validateMax(value, state) {
+		let minVal = state.dataMap['compute/numOfVMs/minimum'];
+		return Validator.validateItem(value,minVal,'minimum');
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
new file mode 100644
index 0000000000..7a730d6f94
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
@@ -0,0 +1,76 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+
+const GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return(
+		<div>
+			<GridSection title={i18n('Guest OS')} >
+				<GridItem colSpan={2}>
+					<Input
+						data-test-id='guestOS-name'
+						label={i18n('Guest OS')}
+						type='text'
+						onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})}
+						isValid={qgenericFieldInfo['compute/guestOS/name'].isValid}
+						errorText={qgenericFieldInfo['compute/guestOS/name'].errorText}
+						value={dataMap['compute/guestOS/name']} />
+				</GridItem>
+				<GridItem colSpan={2}/>
+				<GridItem>
+					<div className='vertical-flex'>
+						<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
+						<div className='radio-options-content-row'>
+							{qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => (
+							<Input
+								data-test-id='guestOS-bitSize'
+								type='radio'
+								key={bitSize.enum}
+								name={'compute/guestOS/bitSize'}
+								className='radio-field'
+								value={bitSize.enum}
+								label={bitSize.title}
+								onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' :  Number(bit)})}
+								isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid}
+								errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText}
+								checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) }
+						</div>
+					</div>
+				</GridItem>
+				<GridItem colSpan={2}/>
+				<GridItem colSpan={2}>
+					<Input
+						data-test-id='guestOS-tools'
+						type='textarea'
+						label={i18n('Guest OS Tools:')}
+						onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})}
+						isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid}
+						errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText}
+						value={dataMap['compute/guestOS/tools']} />
+				</GridItem>
+			</GridSection>
+
+
+		</div>
+	);
+};
+
+export default GuestOs;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
new file mode 100644
index 0000000000..efeedc653e
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
@@ -0,0 +1,94 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+
+const NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => {
+	return(
+		<GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}>
+			<GridItem>
+				<Input
+					data-test-id='numOfVMs-minimum'
+					type='number'
+					label={i18n('Minimum')}
+					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations);
+						qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } }
+					isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid}
+					errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText}
+					value={dataMap['compute/numOfVMs/minimum']} />
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='numOfVMs-maximum'
+					type='number'
+					label={i18n('Maximum')}
+					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations);
+						qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } }
+					isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid}
+					errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText}
+					value={dataMap['compute/numOfVMs/maximum']} />
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='numOfVMs-CpuOverSubscriptionRatio'
+					label={i18n('CPU Oversubscription Ratio')}
+					type='select'
+					groupClassName='bootstrap-input-options'
+					className='input-options-select'
+					isValid={qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].isValid}
+					errorText={qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].errorText}
+					value={dataMap['compute/numOfVMs/CpuOverSubscriptionRatio']}
+					onChange={(e) => {
+						const selectedIndex = e.target.selectedIndex;
+						const val = e.target.options[selectedIndex].value;
+						onQDataChanged({'compute/numOfVMs/CpuOverSubscriptionRatio' : val});}
+					}>
+					<option key='placeholder' value=''>{i18n('Select...')}</option>
+					{qgenericFieldInfo['compute/numOfVMs/CpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)}
+				</Input>
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='numOfVMs-MemoryRAM'
+					type='select'
+					label={i18n('Memory - RAM')}
+					groupClassName='bootstrap-input-options'
+					className='input-options-select'
+					isValid={qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].isValid}
+					errorText={qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].errorText}
+					value={dataMap['compute/numOfVMs/MemoryRAM']}
+					onChange={(e) => {
+						const selectedIndex = e.target.selectedIndex;
+						const val = e.target.options[selectedIndex].value;
+						onQDataChanged({'compute/numOfVMs/MemoryRAM' : val});}
+					}>
+					<option key='placeholder' value=''>{i18n('Select...')}</option>
+					{qgenericFieldInfo['compute/numOfVMs/MemoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)}
+				</Input>
+			</GridItem>
+		</GridSection>
+	);
+};
+
+NumberOfVms.propTypes = {
+	minNumberOfVMsSelectedByUser: React.PropTypes.number
+};
+
+export default NumberOfVms;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx
new file mode 100644
index 0000000000..39f84807a2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/VmSizing.jsx
@@ -0,0 +1,68 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+const VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return(
+		<GridSection title={i18n('VM Sizing')}>
+			<GridItem>
+				<Input
+					data-test-id='numOfCPUs'
+					type='number'
+					label={i18n('Number of CPUs')}
+					onChange={(tools) => onQDataChanged({'compute/vmSizing/numOfCPUs' : tools})}
+					isValid={qgenericFieldInfo['compute/vmSizing/numOfCPUs'].isValid}
+					errorText={qgenericFieldInfo['compute/vmSizing/numOfCPUs'].errorText}
+					value={dataMap['compute/vmSizing/numOfCPUs']} />
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='fileSystemSizeGB'
+					type='number'
+					label={i18n('File System Size (GB)')}
+					onChange={(tools) => onQDataChanged({'compute/vmSizing/fileSystemSizeGB' : tools})}
+					isValid={qgenericFieldInfo['compute/vmSizing/fileSystemSizeGB'].isValid}
+					errorText={qgenericFieldInfo['compute/vmSizing/fileSystemSizeGB'].errorText}
+					value={dataMap['compute/vmSizing/fileSystemSizeGB']} />
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='persistentStorageVolumeSize'
+					type='number'
+					label={i18n('Persistent Storage/Volume Size (GB)')}
+					onChange={(tools) => onQDataChanged({'compute/vmSizing/persistentStorageVolumeSize' : tools})}
+					isValid={qgenericFieldInfo['compute/vmSizing/persistentStorageVolumeSize'].isValid}
+					errorText={qgenericFieldInfo['compute/vmSizing/persistentStorageVolumeSize'].errorText}
+					value={dataMap['compute/vmSizing/persistentStorageVolumeSize']} />
+			</GridItem>
+			<GridItem>
+				<Input
+					data-test-id='IOOperationsPerSec'
+					type='number'
+					label={i18n('I/O Operations (per second)')}
+					onChange={(tools) => onQDataChanged({'compute/vmSizing/IOOperationsPerSec' : tools})}
+					isValid={qgenericFieldInfo['compute/vmSizing/IOOperationsPerSec'].isValid}
+					errorText={qgenericFieldInfo['compute/vmSizing/IOOperationsPerSec'].errorText}
+					value={dataMap['compute/vmSizing/IOOperationsPerSec']} />
+			</GridItem>
+		</GridSection>
+	);
+};
+
+export default VmSizing;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
index e4c330bec8..34374aa7fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
@@ -1,50 +1,55 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
+import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
+
+
+import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+
 
 export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {data: componentData = {} , qdata, qschema}} = softwareProductComponents;
-
+	let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
+	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
 	return {
 		componentData,
 		qdata,
-		qschema,
-		isReadOnlyMode
+		isReadOnlyMode,
+		genericFieldInfo,
+		qGenericFieldInfo,
+		dataMap,
+		isFormValid
 	};
 };
 
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
-		onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
 		onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-			{softwareProductId, vspComponentId: componentId, componentData, qdata});
-		}
+			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
+		},
+		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData})
 	};
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
index 5d11e42cd3..e4595f97d6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
@@ -1,177 +1,285 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
+const GeneralSection = ({onDataChanged, displayName, vfcCode, description, isReadOnlyMode, genericFieldInfo}) => (
+	<GridSection title={i18n('General')}>
+		{/* disabled until backend will be ready to implement it
+			<div className='validation-input-wrapper'>
+			<div className='form-group'>
+			<label className='control-label'>{i18n('Name')}</label>
+			<div>{name}</div>
+			</div>
+			</div>
+
+		*/}
+		<GridItem>
+			<Input
+				data-test-id='name'
+				label={i18n('Name')}
+				value={displayName}
+				disabled={true}
+				type='text'/>
+			<Input
+				data-test-id='vfcCode'
+				label={i18n('Naming Code')}
+				value={vfcCode}
+				isValid={genericFieldInfo.vfcCode.isValid}
+				errorText={genericFieldInfo.vfcCode.errorText}
+				onChange={vfcCode => onDataChanged({vfcCode})}
+				disabled={isReadOnlyMode}
+				type='text'/>
+		</GridItem>
+		<GridItem colSpan={2}>
+			<Input
+				label={i18n('Description')}
+				isValid={genericFieldInfo.description.isValid}
+				errorText={genericFieldInfo.description.errorText}
+				onChange={description => onDataChanged({description})}
+				disabled={isReadOnlyMode}
+				value={description}
+				groupClassName='multi-line-textarea'
+				data-test-id='description'
+				type='textarea'/>
+		</GridItem>
+		<GridItem />
+	</GridSection>
+		);
+
+const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Hypervisor')}>
+		<GridItem>
+			<Input
+				data-test-id='hypervisor'
+				label={i18n('Supported Hypervisors')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
+				value={dataMap['general/hypervisor/hypervisor']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/hypervisor/hypervisor' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='drivers'
+				onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
+				label={i18n('Hypervisor Drivers')}
+				type='text'
+				isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
+				value={dataMap['general/hypervisor/drivers']}/>
+		</GridItem>
+		<GridItem colSpan={3}>
+			<Input
+				data-test-id='containerFeaturesDescription'
+				label={i18n('Describe Container Features')}
+				type='textarea'
+				onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
+				isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
+				value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Image')}>
+		<GridItem>
+			<Input
+				data-test-id='format'
+				label={i18n('Image format')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/image/format'].isValid}
+				errorText={qgenericFieldInfo['general/image/format'].errorText}
+				value={dataMap['general/image/format']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/image/format' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/image/format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='providedBy'
+				label={i18n('Image provided by')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
+				errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
+				value={dataMap['general/image/providedBy']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/image/providedBy' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/image/providedBy'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='bootDiskSizePerVM'
+				onChange={(bootDiskSizePerVM) => onQDataChanged({'general/image/bootDiskSizePerVM' : bootDiskSizePerVM})}
+				label={i18n('Size of boot disk per VM (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['general/image/bootDiskSizePerVM'].isValid}
+				errorText={qgenericFieldInfo['general/image/bootDiskSizePerVM'].errorText}
+				value={dataMap['general/image/bootDiskSizePerVM']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='ephemeralDiskSizePerVM'
+				onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/image/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
+				label={i18n('Size of ephemeral disk per VM (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].isValid}
+				errorText={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].errorText}
+				value={dataMap['general/image/ephemeralDiskSizePerVM']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Recovery')}>
+		<GridItem>
+			<Input
+				data-test-id='pointObjective'
+				label={i18n('VM Recovery Point Objective (Minutes)')}
+				type='number'
+				onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
+				isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
+				value={dataMap['general/recovery/pointObjective']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='timeObjective'
+				label={i18n('VM Recovery Time Objective (Minutes)')}
+				type='number'
+				onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
+				isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
+				value={dataMap['general/recovery/timeObjective']}/>
+			<div className='empty-two-col' />
+		</GridItem>
+		<GridItem colSpan={2} />
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='vmProcessFailuresHandling'
+				className='textarea'
+				label={i18n('How are in VM process failures handled?')}
+				type='textarea'
+				onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
+				isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
+				value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
+			<div className='empty-two-col' />
+
+		</GridItem>
+		{
+			/** disabled until backend will be ready to implement it
+			<div className='row'>
+			<div className='col-md-3'>
+			<Input
+			label={i18n('VM Recovery Document')}
+			type='text'
+			pointer='/general/recovery/VMRecoveryDocument'/>
+			</div>
+			</div>
+			*/
+		}
+	</GridSection>
+);
+
+const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('DNS Configuration')}>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='dnsConfiguration'
+				label={i18n('Do you have a need for DNS as a Service? Please describe.')}
+				type='textarea'
+				onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
+				isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
+				errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
+				value={dataMap['general/dnsConfiguration']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Clone')}>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='vmCloneUsage'
+				label={i18n('Describe VM Clone Use')}
+				type='textarea'
+				onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
+				isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
+				errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
+				value={dataMap['general/vmCloneUsage']}/>
+		</GridItem>
+	</GridSection>
+);
 
 class SoftwareProductComponentsGeneralView extends React.Component {
 
 	render() {
-		let {qdata, qschema, onQDataChanged, onDataChanged, componentData: {displayName, description}, isReadOnlyMode} =  this.props;
+		let {onQDataChanged, onDataChanged,	genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, description}, isReadOnlyMode} =  this.props;
 		return(
 			<div className='vsp-components-general'>
 				<div className='general-data'>
-					<ValidationForm
-						isReadOnlyMode={isReadOnlyMode}
-						hasButtons={false}>
-					<div className=''>
-						<h3 className='section-title'>{i18n('General')}</h3>
-						<div className='rows-section'>
-							<div className='row-flex-components input-row'>
-							{/** disabled until backend will be ready to implement it
-							 <div className='validation-input-wrapper'>
-							 <div className='form-group'>
-							 <label className='control-label'>{i18n('Name')}</label>
-							 <div>{name}</div>
-							 </div>
-							 </div>
-
-							*/}
-								<div className='single-col'>
-									<ValidationInput label={i18n('Name')} value={displayName}	disabled={true}	type='text'/>
-								</div>
-								<div className='two-col'>
-								<ValidationInput
-									label={i18n('Description')}
-									onChange={description => onDataChanged({description})}
-									disabled={isReadOnlyMode}
-									value={description}
-									type='textarea'/>
-								</div>
-								<div className='empty-col' />
-							</div>
-						</div>
-					</div>
-						</ValidationForm>
-					{
-						qschema &&
-					<ValidationForm
-						onDataChanged={onQDataChanged}
-						data={qdata}
-						schema={qschema}
+					{genericFieldInfo && qGenericFieldInfo && <Form
+						isValid={this.props.isFormValid}
+						formReady={null}
 						isReadOnlyMode={isReadOnlyMode}
+						onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
 						hasButtons={false}>
-							<h3 className='section-title additional-validation-form'>{i18n('Hypervisor')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Supported Hypervisors')}
-											type='select'
-											pointer='/general/hypervisor/hypervisor'/>
-										</div>
-									<div className='two-col'>
-										<ValidationInput
-											label={i18n('Hypervisor Drivers')}
-											type='text'
-											pointer='/general/hypervisor/drivers'/>
-									</div>
-									<div className='empty-col' />
-								</div>
-								<div className='row-flex-components input-row'>
-									<div className='three-col'>
-										<ValidationInput
-											label={i18n('Describe Container Features')}
-											type='textarea'
-											pointer='/general/hypervisor/containerFeaturesDescription'/>
-									</div>
-									<div className='empty-col' />
-								</div>
-							</div>
-							<h3 className='section-title'>{i18n('Image')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Image format')}
-											type='select'
-											pointer='/general/image/format'/>
-									</div>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Image provided by')}
-											type='select'
-											pointer='/general/image/providedBy'/>
-									</div>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Size of boot disk per VM (GB)')}
-											type='text'
-											pointer='/general/image/bootDiskSizePerVM'/>
-									</div>
-									<ValidationInput
-										label={i18n('Size of ephemeral disk per VM (GB)')}
-										type='text'
-										pointer='/general/image/ephemeralDiskSizePerVM'/>
-								</div>
-							</div>
-							<h3 className='section-title'>{i18n('Recovery')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('VM Recovery Point Objective (Minutes)')}
-											type='text'
-											pointer='/general/recovery/pointObjective'/>
-									</div>
-									<ValidationInput
-										label={i18n('VM Recovery Time Objective (Minutes)')}
-										type='text'
-										pointer='/general/recovery/timeObjective'/>
-									<div className='empty-two-col' />
-								</div>
-
-
-								<div className='row-flex-components input-row'>
-									<div className='two-col'>
-										<ValidationInput
-											className='textarea'
-											label={i18n('How are in VM process failures handled?')}
-											type='textarea'
-											pointer='/general/recovery/vmProcessFailuresHandling'/>
-									</div>
-									<div className='empty-two-col' />
-									{
-										/** disabled until backend will be ready to implement it
-											<div className='row'>
-												<div className='col-md-3'>
-													<ValidationInput
-														label={i18n('VM Recovery Document')}
-														type='text'
-														pointer='/general/recovery/VMRecoveryDocument'/>
-												</div>
-											</div>
-										 */
-									}
-									</div>
-								</div>
-								<h3 className='section-title'>{i18n('DNS Configuration')}</h3>
-								<div className='rows-section'>
-									<div className='row-flex-components input-row'>
-										<div className='two-col'>
-											<ValidationInput
-												label={i18n('Do you have a need for DNS as a Service? Please describe.')}
-												type='textarea'
-												pointer='/general/dnsConfiguration'/>
-										</div>
-										<div className='empty-two-col' />
-									</div>
-								</div>
-								<h3 className='section-title'>{i18n('Clone')}</h3>
-								<div className='rows-section'>
-									<div className='row-flex-components input-row'>
-										<div className='two-col'>
-											<ValidationInput
-												label={i18n('Describe VM Clone Use')}
-												type='textarea'
-												pointer='/general/vmCloneUsage'/>
-										</div>
-										<div className='empty-two-col' />
-									</div>
-								</div>
-					</ValidationForm>
-					}
+						<GeneralSection
+							onDataChanged={onDataChanged}
+							displayName={displayName}
+							vfcCode={vfcCode}
+							description={description}
+							isReadOnlyMode={isReadOnlyMode}
+							genericFieldInfo={genericFieldInfo}/>
+						<HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+					</Form> }
 				</div>
 			</div>
 		);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
index 4d4034de5b..0634858219 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
@@ -1,45 +1,43 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, qschema}} = softwareProductComponents;
+	let {componentEditor: {qdata, qgenericFieldInfo : genericFieldInfo, dataMap}} = softwareProductComponents;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
 
 	return {
 		qdata,
-		qschema,
+		genericFieldInfo,
+		dataMap,
 		isReadOnlyMode
 	};
 };
 
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});}
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
+		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});}
 	};
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 1aa2babc12..dc86771400 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -1,11 +1,29 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
-import FontAwesome from 'react-fontawesome';
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Input from'nfvo-components/input/validation/Input.jsx';
 
-const prefix = '/highAvailabilityAndLoadBalancing/';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+
+const prefix = 'highAvailabilityAndLoadBalancing/';
 
 const pointers = [
 	{
@@ -33,6 +51,31 @@ const pointers = [
 	}
 ];
 
+const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
+		<GridItem colSpan={3} key={item.key} >
+			<div className={expanded ? 'title' : 'title add-padding'}
+				 data-test-id={`btn-${item.key}`}
+				 onClick={() => toggle(item.key)}>
+					<SVGIcon name={expanded ? 'chevron-up' : 'chevron-down'}/>
+					<span className='title-text'>{i18n(item.description)}</span>
+					{item.added && <div className='new-line'>{i18n(item.added)}</div>}
+			</div>
+			<div className={expanded ? 'collapse in' : 'collapse'}>
+				<div>
+					<div>
+						<Input
+							data-test-id={`input-${item.key}`}
+							type='textarea'
+							isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
+							errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
+							value={dataMap[`${prefix}${item.key}`]}
+							onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
+					</div>
+				</div>
+			</div>
+		</GridItem>
+);
+
 class SoftwareProductComponentLoadBalancingView extends React.Component {
 	static propTypes = {
 		componentId: React.PropTypes.string.isRequired,
@@ -46,42 +89,65 @@ class SoftwareProductComponentLoadBalancingView extends React.Component {
 		expanded: {}
 	};
 
-	renderTextAreaItem(item) {
-		return (
-			<div className='question'>
-				<div className={this.state.expanded[item.key] ? 'title' : 'title add-padding'}
-					 onClick={() => this.toggle(item.key)}>
-					<FontAwesome name={this.state.expanded[item.key] ? 'chevron-up' : 'chevron-down'}/>
-					{i18n(item.description)}
-					{item.added && <div className='new-line'>{i18n(item.added)}</div>}
-				</div>
-				<div className={this.state.expanded[item.key] ? 'collapse in' : 'collapse'}>
-					<div className='row'>
-						<div className='col-md-9'>
-							<ValidationInput
-								type='textarea'
-								pointer={`${prefix}${item.key}`}
-								maxLength='1000' />
-						</div>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
 	render() {
-		let {qdata, qschema, onQDataChanged, isReadOnlyMode} = this.props;
+		let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
 		return (
 			<div className='vsp-components-load-balancing'>
 				<div className='halb-data'>
-					<div className='load-balancing-page-title'>{i18n('High Availability & Load Balancing')}</div>
-					<ValidationForm
-						onDataChanged={onQDataChanged}
-						data={qdata} schema={qschema}
+					{ genericFieldInfo && <Form
+						formReady={null}
+						isValid={true}
+						onSubmit={() => this.save()}
 						isReadOnlyMode={isReadOnlyMode}
 						hasButtons={false}>
-						{pointers.map(pointer => this.renderTextAreaItem(pointer))}
-					</ValidationForm>
+						<GridSection title={i18n('High Availability & Load Balancing')}>
+							<GridItem colSpan={1}>
+								<Input
+									data-test-id='input-is-component-mandatory'
+									label={i18n('Is Component Mandatory')}
+									type='select'
+									className='input-options-select'
+									groupClassName='bootstrap-input-options'
+									isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
+									errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
+									value={dataMap[`${prefix}isComponentMandatory`]}
+									onChange={(e) => {
+										const selectedIndex = e.target.selectedIndex;
+										const val = e.target.options[selectedIndex].value;
+										onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
+									}>
+									 <option key='placeholder' value=''>{i18n('Select...')}</option>
+									{ genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
+								</Input>
+							</GridItem>
+							<GridItem colSpan={3}/>
+							<GridItem colSpan={1}>
+								<Input
+									data-test-id='input-high-availability-mode'
+									label={i18n('High Availability Mode')}
+									type='select'
+									className='input-options-select'
+									groupClassName='bootstrap-input-options'
+									isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
+									errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
+									value={dataMap[`${prefix}highAvailabilityMode`]}
+									onChange={(e) => {
+										const selectedIndex = e.target.selectedIndex;
+										const val = e.target.options[selectedIndex].value;
+										onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
+									}>
+									<option key='placeholder' value=''>{i18n('Select...')}</option>
+									{genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
+								</Input>
+							</GridItem>
+							<GridItem colSpan={3}/>
+						</GridSection>
+						<GridSection>
+						{pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
+							   genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
+							   expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
+						</GridSection>
+					</Form> }
 				</div>
 			</div>
 		);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
index ed7c5a116a..293e252dca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
@@ -1,27 +1,25 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx';
 import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
 
 
 export const mapStateToProps = ({softwareProduct}) => {
@@ -37,11 +35,12 @@ export const mapStateToProps = ({softwareProduct}) => {
 	};
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
 		onDropMibFileToUpload: (formData, type) =>
 			SoftwareProductComponentsMonitoringAction.uploadSnmpFile(dispatch, {
 				softwareProductId,
+				version,
 				componentId,
 				formData,
 				type
@@ -49,9 +48,18 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
 
 		onDeleteSnmpFile: type => SoftwareProductComponentsMonitoringAction.deleteSnmpFile(dispatch, {
 			softwareProductId,
+			version,
 			componentId,
 			type
-		})
+		}),
+
+		onFileUploadError: () => dispatch({
+			type: modalActionTypes.GLOBAL_MODAL_ERROR,
+			data: {
+				title: i18n('Upload Failed'),
+				msg: i18n('Expected "zip" file. Please check the provided file type.')				
+			}
+		}),
 
 	};
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
index 3faf571c09..64403faa78 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
@@ -1,80 +1,76 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import SoftwareProductComponentsMonitoringConstants, {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 
 const UPLOAD = true;
 
-function baseUrl(vspId, componentId) {
+function baseUrl(vspId, version, componentId) {
+	const versionId = version.id;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/components/${componentId}/monitors`;
+	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/monitors`;
 }
 
-function snmpTrapUrl(vspId, componentId, isUpload) {
-	return `${baseUrl(vspId, componentId)}/snmp-trap${isUpload ? '/upload' : ''}`;
+function snmpTrapUrl(vspId, version, componentId, isUpload) {
+	return `${baseUrl(vspId, version, componentId)}/snmp-trap${isUpload ? '/upload' : ''}`;
 }
 
-function snmpPollUrl(vspId, componentId, isUpload) {
-	return `${baseUrl(vspId, componentId)}/snmp${isUpload ? '/upload' : ''}`;
+function snmpPollUrl(vspId, version, componentId, isUpload) {
+	return `${baseUrl(vspId, version, componentId)}/snmp${isUpload ? '/upload' : ''}`;
 }
 
 let onInvalidFileSizeUpload = (dispatch) => dispatch({
-	type: NotificationConstants.NOTIFY_ERROR,
+	type: modalActionTypes.GLOBAL_MODAL_ERROR,
 	data: {
 		title: i18n('Upload Failed'),
 		msg: i18n('no zip file was uploaded or zip file doesn\'t exist')
 	}
 });
 
-let uploadSnmpTrapFile = (dispatch, {softwareProductId, componentId, formData}) => {
-	RestAPIUtil.create(snmpTrapUrl(softwareProductId, componentId, UPLOAD), formData).then(()=> dispatch({
+let uploadSnmpTrapFile = (dispatch, {softwareProductId, version, componentId, formData}) => {
+	RestAPIUtil.post(snmpTrapUrl(softwareProductId, version, componentId, UPLOAD), formData).then(()=> dispatch({
 		type: actionTypes.SNMP_TRAP_UPLOADED, data: {filename: formData.get('upload').name}
 	}));
 };
 
-let uploadSnmpPollFile = (dispatch, {softwareProductId, componentId, formData}) => {
-	RestAPIUtil.create(snmpPollUrl(softwareProductId, componentId, UPLOAD), formData).then(()=> dispatch({
+let uploadSnmpPollFile = (dispatch, {softwareProductId, version, componentId, formData}) => {
+	RestAPIUtil.post(snmpPollUrl(softwareProductId, version, componentId, UPLOAD), formData).then(()=> dispatch({
 		type: actionTypes.SNMP_POLL_UPLOADED, data: {filename: formData.get('upload').name}
 	}));
 };
 
-let deleteSnmpTrapFile = (dispatch, {softwareProductId, componentId}) => {
-	RestAPIUtil.destroy(snmpTrapUrl(softwareProductId, componentId, !UPLOAD)).then(()=> dispatch({
+let deleteSnmpTrapFile = (dispatch, {softwareProductId, version, componentId}) => {
+	RestAPIUtil.destroy(snmpTrapUrl(softwareProductId, version, componentId, !UPLOAD)).then(()=> dispatch({
 		type: actionTypes.SNMP_TRAP_DELETED
 	}));
 };
 
-let deleteSnmpPollFile = (dispatch, {softwareProductId, componentId}) => {
-	RestAPIUtil.destroy(snmpPollUrl(softwareProductId, componentId, !UPLOAD)).then(()=> dispatch({
+let deleteSnmpPollFile = (dispatch, {softwareProductId, version, componentId}) => {
+	RestAPIUtil.destroy(snmpPollUrl(softwareProductId, version, componentId, !UPLOAD)).then(()=> dispatch({
 		type: actionTypes.SNMP_POLL_DELETED
 	}));
 };
 
 const SoftwareProductComponentsMonitoringAction = {
 
-	fetchExistingFiles(dispatch, {softwareProductId, componentId}){
-		RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/snmp`).then(response =>
+	fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){
+		RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/snmp`).then(response =>
 			dispatch({
 				type: actionTypes.SNMP_FILES_DATA_CHANGE,
 				data: {trapFilename: response.snmpTrap, pollFilename: response.snmpPoll}
@@ -82,13 +78,13 @@ const SoftwareProductComponentsMonitoringAction = {
 		);
 	},
 
-	uploadSnmpFile(dispatch, {softwareProductId, componentId, formData, type}){
+	uploadSnmpFile(dispatch, {softwareProductId, version, componentId, formData, type}){
 		if (formData.get('upload').size) {
 			if (type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP) {
-				uploadSnmpTrapFile(dispatch, {softwareProductId, componentId, formData});
+				uploadSnmpTrapFile(dispatch, {softwareProductId, version, componentId, formData});
 			}
 			else {
-				uploadSnmpPollFile(dispatch, {softwareProductId, componentId, formData});
+				uploadSnmpPollFile(dispatch, {softwareProductId, version, componentId, formData});
 			}
 		}
 		else {
@@ -96,12 +92,12 @@ const SoftwareProductComponentsMonitoringAction = {
 		}
 	},
 
-	deleteSnmpFile(dispatch, {softwareProductId, componentId, type}){
+	deleteSnmpFile(dispatch, {softwareProductId, version, componentId, type}){
 		if (type === SoftwareProductComponentsMonitoringConstants.SNMP_TRAP) {
-			deleteSnmpTrapFile(dispatch, {softwareProductId, componentId});
+			deleteSnmpTrapFile(dispatch, {softwareProductId, version, componentId});
 		}
 		else {
-			deleteSnmpPollFile(dispatch, {softwareProductId, componentId});
+			deleteSnmpPollFile(dispatch, {softwareProductId, version, componentId});
 		}
 	}
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
index eeececb050..d908d36aaa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
index 72e0a85b10..54513b9634 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js';
 
 export default (state = {}, action) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index ca090c5f2f..329cc70353 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -1,3 +1,18 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React, {Component, PropTypes} from 'react';
 import Dropzone from 'react-dropzone';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
@@ -46,7 +61,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 		return (
 			<Dropzone
 				className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
-				onDrop={files => this.handleImport(files, {isReadOnlyMode, type, refAndName})}
+				onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
 				onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
 				onDragLeave={() => this.setState({dragging:false})}
 				multiple={false}
@@ -70,7 +85,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 				className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}>
 				<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
 				<div className='or-text'>{i18n('or')}</div>
-				<div className='upload-btn primary-btn' onClick={() => this.refs[refAndName].open()}>
+				<div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}>
 					<span className='primary-btn-text'>{i18n('Select file')}</span>
 				</div>
 			</div>
@@ -95,17 +110,21 @@ class SoftwareProductComponentsMonitoringView extends Component {
 		}
 	}
 
-	handleImport(files, {isReadOnlyMode, type, refAndName}) {
+	handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) {
 		if (isReadOnlyMode) {
 			return;
 		}
-
-		this.setState({dragging: false});
-		let file = files[0];
-		let formData = new FormData();
-		formData.append('upload', file);
-		this.refs[refAndName].value = '';
-		this.props.onDropMibFileToUpload(formData, type);
+		if (files.length > 0) {
+			this.setState({dragging: false});
+			let file = files[0];
+			let formData = new FormData();
+			formData.append('upload', file);
+			this.refs[refAndName].value = '';
+			this.props.onDropMibFileToUpload(formData, type);
+		} else if (rejectedFiles.length > 0) {
+			this.setState({dragging: false});
+			this.props.onFileUploadError();
+		}
 	}
 
 	getFileTypeDisplayName(type) {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
index a412456e13..7cf1f0189e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
@@ -1,53 +1,66 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
 import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
+import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
 
 	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents} = softwareProduct;
 
 	let {network: {nicEditor = {}}} = softwareProductComponents;
-	let {data, qdata, qschema} = nicEditor;
+	let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	let protocols = [];
+	if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){
+		protocols = qdata.protocols.protocols;
+	}
+	let {version} = currentSoftwareProduct;
+	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) &&  ValidationHelper.checkFormValid(qgenericFieldInfo);
 
 	return {
 		currentSoftwareProduct,
 		isValidityData,
+		version,
 		data,
 		qdata,
-		qschema,
-		isReadOnlyMode
+		dataMap,
+		isFormValid,
+		formReady,
+		genericFieldInfo,
+		qgenericFieldInfo,
+		isReadOnlyMode,
+		protocols
 	};
 
 };
 
 const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
 	return {
-		onDataChanged: deltaData => SoftwareProductComponentsNetworkActionHelper.updateNICData(dispatch, {deltaData}),
-		onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata}),
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData,
+			formName: forms.NIC_EDIT_FORM}),
+		onSubmit: ({data, qdata, version}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}),
 		onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch),
-		onQDataChanged: ({data}) => SoftwareProductComponentsNetworkActionHelper.updateNICQuestionnaire(dispatch, {data})
+		onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
+			qName: NIC_QUESTIONNAIRE}),
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
index d49f9ccb1e..b3c9fe5d98 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
@@ -1,48 +1,43 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
+import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.NICEditor.OPEN:
 			return {
 				...state,
-				data: action.nic
+				data: action.nic,
+				genericFieldInfo: {
+					'description' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					},
+					'name' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					}
+				},
+				formName: forms.NIC_EDIT_FORM
 			};
 		case actionTypes.NICEditor.CLOSE:
 			return {};
-		case actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE:
-			return {
-				...state,
-				qdata: action.payload.qdata || state.qdata,
-				qschema: action.payload.qschema || state.qschema
-			};
-		case actionTypes.NICEditor.DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
index 7393a835dc..aad06c82f0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
@@ -1,321 +1,71 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
-
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Acceptable from './nicEditorComponents/Acceptable.jsx';
+import FlowLength from './nicEditorComponents/FlowLength.jsx';
+import OutFlowTraffic from './nicEditorComponents/OutFlowTraffic.jsx';
+import InFlowTraffic from './nicEditorComponents/InFlowTraffic.jsx';
+import Sizing from './nicEditorComponents/Sizing.jsx';
+import Network from './nicEditorComponents/Network.jsx';
+import IpConfig from './nicEditorComponents/IpConfig.jsx';
+import Protocols from './nicEditorComponents/Protocols.jsx';
+import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx';
 
 class SoftwareProductComponentsNetworkEditorView extends React.Component {
 
 	render() {
-		let {onCancel, isReadOnlyMode} = this.props;
-		return (
-			<ValidationForm
-				ref='validationForm'
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				onReset={ () => onCancel() }
-				labledButtons={true}
-				isReadOnlyMode={isReadOnlyMode}
-				className='vsp-components-network-editor'>
-				{this.renderEditorFields()}
-			</ValidationForm>
-		);
-	}
-
-	renderEditorFields() {
-		let {data = {}, qdata = {}, qschema = {}, onQDataChanged, onDataChanged, isReadOnlyMode} = this.props;
+		let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo, dataMap, onDataChanged, protocols, onQDataChanged} = this.props;
 		let {name, description, networkName} = data;
 		let netWorkValues = [{
 			enum: networkName,
 			title: networkName
 		}];
-		return(
-			<div className='editor-data'>
-				<div className='row'>
-					<div className='col-md-6'>
-						<ValidationInput
-							label={i18n('Name')}
-							value={name}
-							disabled={true}
-							type='text'/>
-					</div>
-					<div className='col-md-6'>
-						<ValidationInput
-							label={i18n('Purpose of NIC')}
-							value={description}
-							onChange={description => onDataChanged({description})}
-							disabled={isReadOnlyMode}
-							type='textarea'/>
-					</div>
-				</div>
-				<ValidationForm
-					onDataChanged={onQDataChanged}
-					data={qdata}
-					schema={qschema}
-					isReadOnlyMode={isReadOnlyMode}
-					hasButtons={false}>
-					<div className='row'>
-						<div className='part-title'>{i18n('Protocols')}</div>
-						<div className='col-md-6'>
-							<ValidationInput
-								label={i18n('Protocols')}
-								type='select'
-								pointer='/protocols/protocols'/>
-						</div>
-						<div className='col-md-6'>
-							<ValidationInput
-								label={i18n('Protocol with Highest Traffic Profile')}
-								type='select'
-								pointer='/protocols/protocolWithHighestTrafficProfile'/>
-						</div>
-					</div>
-					<div className='row'>
-						<div className='part-title'>{i18n('IP Configuration')}</div>
-						<div className='col-md-3'>
-							<ValidationInput
-								label={i18n('IPv4 Required')}
-								type='checkbox'
-								pointer='/ipConfiguration/ipv4Required'/>
-						</div>
-						<div className='col-md-9'>
-							<ValidationInput
-								label={i18n('IPv6 Required')}
-								type='checkbox'
-								pointer='/ipConfiguration/ipv6Required'/>
-						</div>
-					</div>
-				</ValidationForm>
-				<div className='row'>
-					<div className='part-title'>{i18n('Network')}</div>
-					<div className='col-md-2'>
-						<ValidationInput
-							label={i18n('Internal')}
-							disabled
-							checked={true}
-							className='network-radio disabled'
-							type='radio'/>
-					</div>
-					<div className='col-md-4'>
-						<ValidationInput
-							label={i18n('External')}
-							disabled
-							checked={false}
-							className='network-radio disabled'
-							type='radio'/>
-					</div>
-					<div className='col-md-6'>
-						<ValidationInput
-							label={i18n('Network')}
-							type='select'
-							disabled={true}
-							values={netWorkValues}/>
-					</div>
+		return (
+			<div>
+		{qgenericFieldInfo && <Form
+			ref={(form) => { this.form = form; }}
+			hasButtons={true}
+			onSubmit={ () => this.submit() }
+			onReset={ () => onCancel() }
+			labledButtons={true}
+			isReadOnlyMode={isReadOnlyMode}
+			isValid={isFormValid}
+			formReady={formReady}
+			onValidateForm={() => onValidateForm() }
+			className='vsp-components-network-editor'>
+				<div className='editor-data'>
+					<NameAndPurpose name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode}/>
+					<Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<Network networkValues={netWorkValues} />
+					<Sizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<InFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<OutFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<FlowLength qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
+					<Acceptable qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
 				</div>
-				<ValidationForm
-					onDataChanged={onQDataChanged}
-					data={qdata}
-					schema={qschema}
-					isReadOnlyMode={isReadOnlyMode}
-					hasButtons={false}>
-					<div className='row'>
-						<div className='part-title'>{i18n('Sizing')}</div>
-						<div className='col-md-12'>
-							<ValidationInput
-								label={i18n('Describe Quality of Service')}
-								type='textarea'
-								pointer='/sizing/describeQualityOfService'/>
-						</div>
-					</div>
-
-					<div className='row'>
-						<div className='part-title'>{i18n('Inflow Traffic per second')}</div>
-					</div>
-
-					<div className='row'>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Packets')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/inflowTrafficPerSecond/packets/peak'/>
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/inflowTrafficPerSecond/packets/avg'/>
-								</div>
-							</div>
-						</div>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Bytes')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/inflowTrafficPerSecond/bytes/peak'/>
-
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/inflowTrafficPerSecond/bytes/avg'/>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className='row'>
-						<div className='part-title'>{i18n('Outflow Traffic per second')}</div>
-					</div>
-
-					<div className='row'>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Packets')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/outflowTrafficPerSecond/packets/peak'/>
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/outflowTrafficPerSecond/packets/avg'/>
-
-								</div>
-							</div>
-						</div>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Bytes')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/outflowTrafficPerSecond/bytes/peak'/>
-
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/outflowTrafficPerSecond/bytes/avg'/>
-
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className='row'>
-						<div className='part-title'>{i18n('Flow Length')}</div>
-					</div>
-
-					<div className='row'>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Packets')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/flowLength/packets/peak'/>
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/flowLength/packets/avg'/>
-								</div>
-							</div>
-						</div>
-						<div className='col-md-6'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Bytes')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Peak')}
-										type='text'
-										pointer='/sizing/flowLength/bytes/peak'/>
-
-								</div>
-								<div className='col-md-6'>
-									<ValidationInput
-										label={i18n('Avg')}
-										type='text'
-										pointer='/sizing/flowLength/bytes/avg'/>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className='row'>
-						<div className='col-md-9'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Acceptable Jitter')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-4'>
-									<ValidationInput
-										label={i18n('Min')}
-										type='text'
-										pointer='/sizing/acceptableJitter/mean'/>
-								</div>
-								<div className='col-md-4'>
-									<ValidationInput
-										label={i18n('Max')}
-										type='text'
-										pointer='/sizing/acceptableJitter/max'/>
-								</div>
-								<div className='col-md-4'>
-									<ValidationInput
-										label={i18n('Var')}
-										type='text'
-										pointer='/sizing/acceptableJitter/variable'/>
-								</div>
-							</div>
-						</div>
-						<div className='col-md-3'>
-							<div className='row'>
-								<div className='part-title-small'>{i18n('Acceptable Packet Loss %')}</div>
-							</div>
-							<div className='row'>
-								<div className='col-md-12'>
-									<ValidationInput
-										label={i18n('In Percent')}
-										type='text'
-										pointer='/sizing/acceptablePacketLoss'/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</ValidationForm>
+			</Form> }
 			</div>
-
 		);
 	}
+
 	submit() {
-		let {data, qdata, onSubmit} = this.props;
-		onSubmit({data, qdata});
+		let {data, qdata, onSubmit, version} = this.props;
+		onSubmit({data, qdata, version});
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
index bc53e1a7af..5cfc88bdc9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
 
 export default (state = [], action) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
index 8ff6b50189..bc061469b1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
@@ -1,65 +1,60 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
 import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
+import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
 
-function baseUrl(softwareProductId, componentId) {
+function baseUrl(softwareProductId, version, componentId) {
+	const versionId = version.id;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components/${componentId}/nics`;
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
 }
 
 
-function fetchNICQuestionnaire({softwareProductId, componentId, nicId, version}) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/${nicId}/questionnaire${versionQuery}`);
+function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) {
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`);
 }
 
-function fetchNIC({softwareProductId, componentId, nicId, version}) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}/${nicId}${versionQuery}`);
+function fetchNIC({softwareProductId, version, componentId, nicId}) {
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
 }
 
-function fetchNICsList({softwareProductId, componentId, version}) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}${versionQuery}`);
+function fetchNICsList({softwareProductId, version, componentId}) {
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
 }
 
-function saveNIC({softwareProductId, componentId, nic: {id, name, description, networkId}}) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${id}`,{
+function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId}}) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
 		name,
 		description,
 		networkId
 	});
 }
 
-function saveNICQuestionnaire({softwareProductId, componentId, nicId, qdata}) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${nicId}/questionnaire`, qdata);
+function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`, qdata);
 }
 
 const SoftwareProductComponentNetworkActionHelper = {
 
-	fetchNICsList(dispatch, {softwareProductId, componentId, version}) {
-		return fetchNICsList({softwareProductId, componentId, version}).then((response) => {
+	fetchNICsList(dispatch, {softwareProductId, version, componentId}) {
+		return fetchNICsList({softwareProductId, version, componentId}).then((response) => {
 			dispatch({
 				type: actionTypes.NIC_LIST_UPDATE,
 				response: response.results
@@ -80,43 +75,24 @@ const SoftwareProductComponentNetworkActionHelper = {
 		});
 	},
 
-	loadNICData({softwareProductId, componentId, nicId, version}) {
-		return fetchNIC({softwareProductId, componentId, nicId, version});
-	},
-
-	loadNICQuestionnaire(dispatch, {softwareProductId, componentId, nicId, version}) {
-		return fetchNICQuestionnaire({softwareProductId, componentId, nicId, version}).then((response) => {
-			dispatch({
-				type: actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE,
-				payload: {
-					qdata: response.data ? JSON.parse(response.data) : {},
-					qschema: JSON.parse(response.schema)
-				}
-			});
-		});
+	loadNICData({softwareProductId, version, componentId, nicId}) {
+		return fetchNIC({softwareProductId, version, componentId, nicId});
 	},
 
-	updateNICData(dispatch, {deltaData}) {
-		dispatch({
-			type: actionTypes.NICEditor.DATA_CHANGED,
-			deltaData
-		});
-	},
-
-	updateNICQuestionnaire(dispatch, {data}) {
-		dispatch({
-			type: actionTypes.NICEditor.NIC_QUESTIONNAIRE_UPDATE,
-			payload: {
-				qdata: data
-			}
+	loadNICQuestionnaire(dispatch, {softwareProductId, version, componentId, nicId}) {
+		return fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}).then((response) => {
+			ValidationHelper.qDataLoaded(dispatch, {qName: NIC_QUESTIONNAIRE ,response: {
+				qdata: response.data ? JSON.parse(response.data) : {},
+				qschema: JSON.parse(response.schema)
+			}});
 		});
 	},
 
-	saveNICDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata}) {
+	saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}) {
 		SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
 		return Promise.all([
-			saveNICQuestionnaire({softwareProductId, componentId, nicId: data.id, qdata}),
-			saveNIC({softwareProductId, componentId, nic: data}).then(() => {
+			saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}),
+			saveNIC({softwareProductId, version, componentId, nic: data}).then(() => {
 				dispatch({
 					type: actionTypes.NIC_LIST_EDIT,
 					nic: data
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
index 193f4b20b5..39c55d876c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
@@ -26,8 +21,8 @@ export const actionTypes = keyMirror({
 
 	NICEditor: {
 		OPEN: null,
-		CLOSE: null,
-		NIC_QUESTIONNAIRE_UPDATE: null,
-		DATA_CHANGED: null
+		CLOSE: null
 	}
 });
+
+export const NIC_QUESTIONNAIRE = 'nic';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
index 9172dc691a..c2bd8ce479 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
@@ -1,51 +1,47 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
+import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 
 export const mapStateToProps = ({softwareProduct}) => {
 
 	let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-	let {network: {nicEditor = {}, nicList = []}, componentEditor: {data: componentData, qdata, qschema}} = softwareProductComponents;
+	let {network: {nicEditor = {}, nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
 	let {data} = nicEditor;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {version} = currentSoftwareProduct;
-	let manualMode = nicList.length <= 0;
 	let isModalInEditMode = true;
 
 	return {
 		version,
 		componentData,
 		qdata,
-		qschema,
+		dataMap,
+		qgenericFieldInfo,
 		isValidityData,
 		nicList,
 		isDisplayModal: Boolean(data),
 		isModalInEditMode,
-		manualMode,
 		isReadOnlyMode
 	};
 
@@ -53,28 +49,28 @@ export const mapStateToProps = ({softwareProduct}) => {
 
 const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
 	return {
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
-		onAddNIC: () => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch),
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
+			qName: COMPONENTS_QUESTIONNAIRE}),
 		onEditNicClick: (nic, version) => {
 			Promise.all([
 				SoftwareProductComponentsNetworkActionHelper.loadNICData({
 					softwareProductId,
+					version,
 					componentId,
-					nicId: nic.id,
-					version
+					nicId: nic.id
 				}),
 				SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, {
 					softwareProductId,
+					version,
 					componentId,
-					nicId: nic.id,
-					version
+					nicId: nic.id
 				})
 			]).then(
 				([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data})
 			);
 		},
-		onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
-			{softwareProductId,
+		onSubmit: ({qdata, version}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
+			{softwareProductId, version,
 			vspComponentId: componentId,
 			qdata});
 		}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
index b3e17ff94b..f715016ba3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
@@ -1,10 +1,26 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
+import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
+import Input from'nfvo-components/input/validation/Input.jsx';
 import Modal from 'nfvo-components/modal/Modal.jsx';
 
 import SoftwareProductComponentsNICEditor from './SoftwareProductComponentsNICEditor.js';
@@ -16,38 +32,56 @@ class SoftwareProductComponentsNetworkView extends React.Component {
 	};
 
 	render() {
-		let {qdata, qschema, onQDataChanged, isModalInEditMode, isDisplayModal, softwareProductId, componentId, isReadOnlyMode} = this.props;
+		let {dataMap, qgenericFieldInfo, onQDataChanged, isModalInEditMode, isDisplayModal, softwareProductId, componentId, isReadOnlyMode} = this.props;
 
 		return(
 			<div className='vsp-components-network'>
 				<div className='network-data'>
 					<div>
-						<ValidationForm
-							onDataChanged={onQDataChanged}
-							data={qdata}
-							isReadOnlyMode={isReadOnlyMode}
-							schema={qschema}
-							hasButtons={false}>
+{ qgenericFieldInfo && <Form
+	formReady={null}
+	isValid={true}
+	onSubmit={() => this.save()}
+	isReadOnlyMode={isReadOnlyMode}
+	hasButtons={false}>
 							<h3 className='section-title'>{i18n('Network Capacity')}</h3>
 							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
+								<div className='row-flex-components'>
 									<div className='single-col'>
-										<ValidationInput
+										<Input
+											data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs'
 											label={i18n('Protocol with Highest Traffic Profile across all NICs')}
 											type='select'
-											pointer='/network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'/>
+											groupClassName='bootstrap-input-options'
+											className='input-options-select'
+											isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid}
+											errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText}
+											value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']}
+											onChange={(e) => {
+												const selectedIndex = e.target.selectedIndex;
+												const val = e.target.options[selectedIndex].value;
+												onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});}
+											}>
+											<option key='placeholder' value=''>{i18n('Select...')}</option>
+											{ qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto =>
+												<option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
+										</Input>
 									</div>
 									<div className='single-col add-line-break'>
-										<ValidationInput
+										<Input
+											data-test-id='networkTransactionsPerSecond'
 											label={i18n('Network Transactions per Second')}
-											type='text'
-											pointer='/network/networkCapacity/networkTransactionsPerSecond'/>
+											type='number'
+											onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})}
+											isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid}
+											errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText}
+											value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} />
 									</div>
 									<div className='empty-two-col' />
 								</div>
 							</div>
 
-						</ValidationForm>
+						</Form> }
 					</div>
 					{this.renderNicList()}
 				</div>
@@ -70,18 +104,16 @@ class SoftwareProductComponentsNetworkView extends React.Component {
 
 	renderNicList() {
 		const {localFilter} = this.state;
-		let {onAddNIC, manualMode, isReadOnlyMode} = this.props;
-		let onAdd = manualMode ? onAddNIC : false;
+		let {isReadOnlyMode} = this.props;
 		return (
 			<ListEditorView
 				title={i18n('Interfaces')}
-				plusButtonTitle={i18n('Add NIC')}
 				filterValue={localFilter}
 				placeholder={i18n('Filter NICs by Name')}
-				onAdd={onAdd}
 				isReadOnlyMode={isReadOnlyMode}
-				onFilter={filter => this.setState({localFilter: filter})}>
-				{!manualMode && this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
+				onFilter={value => this.setState({localFilter: value})}
+				twoColumns>
+				{this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
 			</ListEditorView>
 		);
 	}
@@ -92,22 +124,22 @@ class SoftwareProductComponentsNetworkView extends React.Component {
 		return (
 			<ListEditorItemView
 				key={id}
-				className='list-editor-item-view'
 				isReadOnlyMode={isReadOnlyMode}
 				onSelect={() => onEditNicClick(nic, version)}>
 
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
+				<ListEditorItemViewField>
 					<div className='name'>{name}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Purpose of NIC')}</div>
-					<div className='description'>{description}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Network')}</div>
-					<div className='artifact-name'>{networkName}</div>
-				</div>
+				</ListEditorItemViewField>
+				<ListEditorItemViewField>
+					<div className='details'>
+						<div className='title'>{i18n('Purpose of NIC')}</div>
+						<div className='description'>{description}</div>
+					</div>
+					<div className='details'>
+						<div className='title'>{i18n('Network')}</div>
+						<div className='artifact-name'>{networkName}</div>
+					</div>
+				</ListEditorItemViewField>
 
 			</ListEditorItemView>
 		);
@@ -128,8 +160,8 @@ class SoftwareProductComponentsNetworkView extends React.Component {
 	}
 
 	save() {
-		let {onSubmit, qdata} = this.props;
-		return onSubmit({qdata});
+		let {onSubmit, qdata, version} = this.props;
+		return onSubmit({qdata, version});
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
new file mode 100644
index 0000000000..524b95c3ad
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
@@ -0,0 +1,75 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const Acceptable = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return(
+		<GridSection>
+				<GridItem colSpan={3}>
+					<div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div>
+				</GridItem>
+				<GridItem>
+					<div className='part-title-small bytes'>{i18n('Allow Packet Loss')}</div>
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('Mean')}
+						type='number'
+						data-test-id='acceptableJitter-mean'
+						isValid={qgenericFieldInfo['sizing/acceptableJitter/mean'].isValid}
+						errorText={qgenericFieldInfo['sizing/acceptableJitter/mean'].errorText}
+						value={dataMap['sizing/acceptableJitter/mean']}
+						onChange={val => onQDataChanged({'sizing/acceptableJitter/mean' : val})} />
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('Max')}
+						type='number'
+						data-test-id='acceptableJitter-max'
+						isValid={qgenericFieldInfo['sizing/acceptableJitter/max'].isValid}
+						errorText={qgenericFieldInfo['sizing/acceptableJitter/max'].errorText}
+						value={dataMap['sizing/acceptableJitter/max']}
+						onChange={val => onQDataChanged({'sizing/acceptableJitter/max' : val})} />
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('Var')}
+						type='number'
+						data-test-id='acceptableJitter-variable'
+						isValid={qgenericFieldInfo['sizing/acceptableJitter/variable'].isValid}
+						errorText={qgenericFieldInfo['sizing/acceptableJitter/variable'].errorText}
+						value={dataMap['sizing/acceptableJitter/variable']}
+						onChange={val => onQDataChanged({'sizing/acceptableJitter/variable' : val})} />
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('In Percent')}
+						type='number'
+						data-test-id='acceptableJitter-acceptablePacketLoss'
+						isValid={qgenericFieldInfo['sizing/acceptablePacketLoss'].isValid}
+						errorText={qgenericFieldInfo['sizing/acceptablePacketLoss'].errorText}
+						value={dataMap['sizing/acceptablePacketLoss']}
+						onChange={val => onQDataChanged({'sizing/acceptablePacketLoss' : val})} />
+				</GridItem>
+		</GridSection>
+	);
+};
+
+export default Acceptable;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
new file mode 100644
index 0000000000..3745fc7c2e
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import PacketsBytes from './PacketsBytes.jsx';
+
+const pointers = [
+		{label: 'Peak', value: 'sizing/flowLength/packets/peak'},
+		{label: 'Avg', value: 'sizing/flowLength/packets/avg'},
+		{label: 'Peak', value: 'sizing/flowLength/bytes/peak'},
+		{label: 'Avg', value: 'sizing/flowLength/bytes/avg'},
+];
+
+const  FlowLength = (props) => {
+	return(
+		<PacketsBytes {...props} title={i18n('Flow Length')} pointers={pointers}/>
+	);
+};
+
+export default FlowLength;
+
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
new file mode 100644
index 0000000000..5476ed90e6
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import PacketsBytes from './PacketsBytes.jsx';
+
+const pointers = [
+		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/packets/peak'},
+		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/packets/avg'},
+		{label: 'Peak', value: 'sizing/inflowTrafficPerSecond/bytes/peak'},
+		{label: 'Avg', value: 'sizing/inflowTrafficPerSecond/bytes/avg'},
+];
+
+const InFlowTraffic = (props) => {
+	return(
+		<PacketsBytes {...props} title={i18n('Inflow Traffic per second')} pointers={pointers}/>
+	);
+};
+
+export default InFlowTraffic;
+
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
new file mode 100644
index 0000000000..b3a5d21625
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
@@ -0,0 +1,45 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const IpConfig = ({dataMap, onQDataChanged}) => {
+	return (
+		<GridSection title={i18n('IP Configuration')}>
+				<GridItem>
+					<Input
+						label={i18n('IPv4 Required')}
+						type='checkbox'
+						onChange={value => onQDataChanged({'ipConfiguration/ipv4Required' : value})}
+						data-test-id='ipConfiguration-ipv4Required'
+						value={dataMap['ipConfiguration/ipv4Required']} />
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('IPv6 Required')}
+						type='checkbox'
+						data-test-id='ipConfiguration-ipv6Required'
+						onChange={value => onQDataChanged({'ipConfiguration/ipv6Required' : value})}
+						value={dataMap['ipConfiguration/ipv6Required']} />
+				</GridItem>
+		</GridSection>
+	);
+};
+
+export default IpConfig;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
new file mode 100644
index 0000000000..3dc153d27f
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
@@ -0,0 +1,54 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const NameAndPurpose = ({onDataChanged, isReadOnlyMode, name, description}) => {
+
+	return (
+		<GridSection>
+			<GridItem colSpan={2}>
+				<Input
+					label={i18n('Name')}
+					value={name}
+					data-test-id='nic-name'
+					disabled={true}
+					type='text' />
+			</GridItem>
+			<GridItem colSpan={2}>
+				<Input
+					label={i18n('Purpose of NIC')}
+					value={description}
+					data-test-id='nic-description'
+					onChange={description => onDataChanged({description})}
+					disabled={isReadOnlyMode}
+					type='textarea'/>
+			</GridItem>
+		</GridSection>
+	);
+};
+
+NameAndPurpose.PropTypes = {
+	name: React.PropTypes.string,
+	description: React.PropTypes.array,
+	onDataChanged: React.PropTypes.func,
+	isReadOnlyMode: React.PropTypes.bool,
+};
+
+export default NameAndPurpose;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
new file mode 100644
index 0000000000..43afdbed3a
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
@@ -0,0 +1,62 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const Network = ({networkValues}) => {
+	return (
+		<GridSection title={i18n('Network')}>
+				<GridItem>
+					<Input
+						label={i18n('Internal')}
+						disabled
+						checked={true}
+						data-test-id='nic-internal'
+						className='network-radio disabled'
+						type='radio'/>
+				</GridItem>
+				<GridItem>
+					<Input
+						label={i18n('External')}
+						disabled
+						checked={false}
+						data-test-id='nic-external'
+						className='network-radio disabled'
+						type='radio'/>
+				</GridItem>
+				<GridItem colSpan={2}>
+					<Input
+						label={i18n('Network')}
+						data-test-id='nic-network'
+						type='select'
+						className='input-options-select'
+						groupClassName='bootstrap-input-options'
+						disabled={true} >
+						{networkValues.map(val => <option key={val.enum} value={val.enum}>{val.title}</option>)}
+					</Input>
+				</GridItem>
+		</GridSection>
+	);
+};
+
+Network.PropTypes = {
+	networkValues: React.PropTypes.array
+};
+
+export default  Network;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
new file mode 100644
index 0000000000..80a3d1579b
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import PacketsBytes from './PacketsBytes.jsx';
+
+const pointers = [
+		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/packets/peak'},
+		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/packets/avg'},
+		{label: 'Peak', value: 'sizing/outflowTrafficPerSecond/bytes/peak'},
+		{label: 'Avg', value: 'sizing/outflowTrafficPerSecond/bytes/avg'},
+];
+
+const OutFlowTraffic = (props) => {
+	return(
+		<PacketsBytes {...props} title={i18n('Outflow Traffic per second')} pointers={pointers}/>
+	);
+};
+
+export default OutFlowTraffic;
+
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
new file mode 100644
index 0000000000..d7ee91bd15
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
@@ -0,0 +1,65 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}) => {
+	return (
+		<GridItem>
+			<Input
+				label={i18n(label)}
+				type='number'
+				data-test-id={`${value}`}
+				isValid={qgenericFieldInfo[value].isValid}
+				errorText={qgenericFieldInfo[value].errorText}
+				value={dataMap[value]}
+				onChange={val => onQDataChanged({[value]: val})} />
+		</GridItem>
+	);
+};
+
+PointerInput.PropTypes = {
+	label: React.PropTypes.string,
+	value: React.PropTypes.string
+};
+
+const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return(
+		<GridSection title={title}>
+				<GridItem colSpan={2}>
+					<div className='part-title-small packets'>{i18n('Packets')}</div>
+				</GridItem>
+				<GridItem colSpan={2}>
+					<div className='part-title-small bytes'>{i18n('Bytes')}</div>
+				</GridItem>
+				{pointers.map(pointer => {return (<PointerInput key={pointer.value} label={pointer.label} value={pointer.value}
+					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} />);})}
+		</GridSection>
+	);
+};
+
+PacketsBytes.PropTypes = {
+	title: React.PropTypes.string,
+	pointers: React.PropTypes.array,
+	onQDataChanged:  React.PropTypes.function,
+	dataMap: React.PropTypes.object,
+	qgenericFieldInfo: React.PropTypes.object
+};
+
+export default PacketsBytes;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
new file mode 100644
index 0000000000..3e8a9f4e77
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
@@ -0,0 +1,74 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+
+const Protocols = ({protocols, qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return (
+		<GridSection title={i18n('Protocols')}>
+				<GridItem colSpan={2}>
+					<InputOptions
+						data-test-id='nic-protocols'
+						label={i18n('Protocols')}
+						type='select'
+						isMultiSelect={true}
+						isValid={qgenericFieldInfo['protocols/protocols'].isValid}
+						errorText={qgenericFieldInfo['protocols/protocols'].errorText}
+						onInputChange={()=>{}}
+						onEnumChange={protocols => {
+							onQDataChanged({'protocols/protocols' : protocols});}
+						}
+						multiSelectedEnum={dataMap['protocols/protocols']}
+						clearable={false}
+						values={qgenericFieldInfo['protocols/protocols'].enum}/>
+				</GridItem>
+				<GridItem colSpan={2}>
+					<Input
+						data-test-id='nic-protocolWithHighestTrafficProfile'
+						label={i18n('Protocol with Highest Traffic Profile')}
+						type='select'
+						groupClassName='bootstrap-input-options'
+						className='input-options-select'
+						isValid={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].isValid}
+						errorText={qgenericFieldInfo['protocols/protocolWithHighestTrafficProfile'].errorText}
+						value={dataMap['protocols/protocolWithHighestTrafficProfile']}
+						onChange={(e) => {
+							const selectedIndex = e.target.selectedIndex;
+							const val = e.target.options[selectedIndex].value;
+							onQDataChanged({'protocols/protocolWithHighestTrafficProfile' : val});}
+						}>
+						{(protocols.length === 0) &&
+							<option key={'You must select protocols first...'} value=''>{i18n('You must select protocols first...')}</option>
+						}
+						{protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
+					</Input>
+				</GridItem>
+		</GridSection>
+	);
+};
+
+Protocols.PropTypes = {
+	protocols: React.PropTypes.array,
+	onQDataChanged:  React.PropTypes.function,
+	dataMap: React.PropTypes.object,
+	qgenericFieldInfo: React.PropTypes.object
+};
+
+export default Protocols;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
new file mode 100644
index 0000000000..1dd0045f7b
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx
@@ -0,0 +1,39 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+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';
+
+const Sizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
+	return(
+		<GridSection title={i18n('Sizing')}>
+			<GridItem colSpan={4}>
+				<Input
+					label={i18n('Describe Quality of Service')}
+					type='textarea'
+					data-test-id='sizing-describeQualityOfService'
+					isValid={qgenericFieldInfo['sizing/describeQualityOfService'].isValid}
+					errorText={qgenericFieldInfo['sizing/describeQualityOfService'].errorText}
+					value={dataMap['sizing/describeQualityOfService']}
+					onChange={val => onQDataChanged({'sizing/describeQualityOfService' : val}) }/>
+			</GridItem>
+		</GridSection>
+	);
+};
+
+export default Sizing;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
index d535a34a82..b2133ad5d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -1,69 +1,65 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
 
-function baseUrl(softwareProductId, componentId) {
+function baseUrl(softwareProductId, version, componentId) {
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components/${componentId}/processes`;
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`;
 }
 
-function fetchProcessesList({softwareProductId, componentId, version}) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}${versionQuery}`);
+function fetchProcessesList({softwareProductId, version, componentId}) {
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
 }
 
-function deleteProcess({softwareProductId, componentId, processId}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId)}/${processId}`);
+function deleteProcess({softwareProductId, version, componentId, processId}) {
+	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`);
 }
 
-function putProcess({softwareProductId, componentId, process}) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${process.id}`, {
+function putProcess({softwareProductId, version, componentId, process}) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, {
 		name: process.name,
-		description: process.description
+		description: process.description,
+		type: process.type === '' ? null : process.type
 	});
 }
 
-function postProcess({softwareProductId,componentId, process}) {
-	return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}`, {
+function postProcess({softwareProductId, version, componentId, process}) {
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, {
 		name: process.name,
-		description: process.description
+		description: process.description,
+		type: process.type === '' ? null : process.type
 	});
 }
 
-function uploadFileToProcess({softwareProductId, processId, componentId, formData}) {
-	return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}/${processId}/upload`, formData);
+function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) {
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/${processId}/upload`, formData);
 }
 
 
 
 const SoftwareProductComponentProcessesActionHelper = {
-	fetchProcessesList(dispatch, {softwareProductId, componentId, version}) {
+	fetchProcessesList(dispatch, {softwareProductId, version, componentId}) {
 		dispatch({
 			type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
 			processesList: []
 		});
 
-		return fetchProcessesList({softwareProductId, componentId, version}).then(response => {
+		return fetchProcessesList({softwareProductId, version, componentId}).then(response => {
 			dispatch({
 				type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
 				processesList: response.results
@@ -71,8 +67,8 @@ const SoftwareProductComponentProcessesActionHelper = {
 		});
 	},
 
-	deleteProcess(dispatch, {process, softwareProductId, componentId}) {
-		return deleteProcess({softwareProductId, processId:process.id, componentId}).then(() => {
+	deleteProcess(dispatch, {process, softwareProductId, version, componentId}) {
+		return deleteProcess({softwareProductId, version, processId:process.id, componentId}).then(() => {
 			dispatch({
 				type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
 				processId: process.id
@@ -81,11 +77,11 @@ const SoftwareProductComponentProcessesActionHelper = {
 
 	},
 
-	saveProcess(dispatch, {softwareProductId, componentId, previousProcess, process}) {
+	saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) {
 		if (previousProcess) {
-			return putProcess({softwareProductId,componentId,  process}).then(() => {
+			return putProcess({softwareProductId, version, componentId,  process}).then(() => {
 				if (process.formData && process.formData.name !== previousProcess.artifactName){
-					uploadFileToProcess({softwareProductId, processId: process.id, formData: process.formData, componentId});
+					uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId});
 				}
 				dispatch({
 					type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
@@ -94,9 +90,9 @@ const SoftwareProductComponentProcessesActionHelper = {
 			});
 		}
 		else {
-			return postProcess({softwareProductId, componentId, process}).then(response => {
+			return postProcess({softwareProductId, version, componentId, process}).then(response => {
 				if (process.formData) {
-					uploadFileToProcess({softwareProductId, processId: response.value, formData: process.formData, componentId});
+					uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId});
 				}
 				dispatch({
 					type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
@@ -133,12 +129,6 @@ const SoftwareProductComponentProcessesActionHelper = {
 		dispatch({
 			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
 		});
-	},
-	processEditorDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: actionTypes.processEditor.DATA_CHANGED,
-			deltaData
-		});
 	}
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
index 78a111a426..d15432b3fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
@@ -27,8 +22,15 @@ export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
 	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
 	FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null,
-	processEditor: {
-		DATA_CHANGED: null
-	}
+	SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
 });
+
+export const optionsInputValues = {
+	PROCESS_TYPE: [
+		{title: 'Select...', enum: ''},
+		{title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'},
+		{title: 'Other', enum: 'Other'}
+	]
+};
+
+export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
index 0138023c30..9502e24b1a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
@@ -1,31 +1,29 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper';
 import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx';
+import {SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
 
-const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
 	let {processesList = [], processesEditor = {}} = componentProcesses;
-	let {data} = processesEditor;
+	let {data, genericFieldInfo, formReady} = processesEditor;
+	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
 	let previousData;
 	const processId = data ? data.id : null;
@@ -35,19 +33,23 @@ const mapStateToProps = ({softwareProduct}) => {
 
 	return {
 		data,
-		previousData
+		genericFieldInfo,
+		previousData,
+		isFormValid,
+		formReady
 	};
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 
 	return {
-		onDataChanged: deltaData => SoftwareProductComponentProcessesActionHelper.processEditorDataChanged(dispatch, {deltaData}),
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM}),
 		onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
 		onSubmit: ({previousProcess, process}) => {
 			SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, previousProcess, componentId, process});
-		}
+			SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, componentId, process});
+		},
+		onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM)
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
index f859f690e8..9afaa6d5fd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
@@ -1,43 +1,53 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
 			return {
 				...state,
+				formReady: null,
+				formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
+				genericFieldInfo: {
+					'name' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
+					},
+					'description' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'maxLength', data: 1000}]
+					},
+					'artifactName' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					},
+					'type' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					}
+				},
 				data: action.process
 			};
 		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
 			return {};
-
-		case actionTypes.processEditor.DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index ca6d843af7..18f2ee129c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -1,18 +1,48 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Dropzone from 'react-dropzone';
 
-
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.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';
 
 const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
 	name: React.PropTypes.string,
 	description: React.PropTypes.string,
-	artifactName: React.PropTypes.string
+	artifactName: React.PropTypes.string,
+	type: React.PropTypes.string
 });
 
+const FileUploadBox = ({onClick}) => {
+	return (
+		<div className='file-upload-box'>
+			<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
+			<div className='or-text'>{i18n('or')}</div>
+			<div className='upload-btn primary-btn' onClick={onClick}>
+				<span className='primary-btn-text'>{i18n('Select file')}</span>
+			</div>
+		</div>
+	);
+};
+
 class SoftwareProductProcessesEditorView extends React.Component {
 
 	state = {
@@ -30,65 +60,91 @@ class SoftwareProductProcessesEditorView extends React.Component {
 	};
 
 	render() {
-		let {isReadOnlyMode, onCancel, onDataChanged, data = {}} = this.props;
-		let {name, description, artifactName} = data;
+		let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props;
+		let {name, description, artifactName, type} = data;
 
 		return (
 			<div>
-				<ValidationForm
+				{ genericFieldInfo && <Form
 					ref='validationForm'
 					isReadOnlyMode={isReadOnlyMode}
 					hasButtons={true}
 					labledButtons={true}
 					onSubmit={ () => this.submit() }
 					onReset={ () => onCancel() }
+					isValid={this.props.isFormValid}
+					formReady={this.props.formReady}
+					onValidateForm={() => this.props.onValidateForm() }
 					className='vsp-processes-editor'>
-				<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
-					<Dropzone
-						className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
-						onDrop={files => this.handleImportSubmit(files)}
-						onDragEnter={() => this.setState({dragging:true})}
-						onDragLeave={() => this.setState({dragging:false})}
-						multiple={false}
-						disableClick={true}
-						ref='processEditorFileInput'
-						name='processEditorFileInput'
-						accept='*.*'>
-						<div className='row'>
-							<div className='col-md-6'>
-								<ValidationInput
-									onChange={name => onDataChanged({name})}
-									label={i18n('Name')}
-									value={name}
-									validations={{validateName: true, maxLength: 120, required: true}}
-									type='text'/>
-								<ValidationInput
-									label={i18n('Artifacts')}
-									value={artifactName}
-									type='text'
-									disabled/>
-							</div>
-							<div className='col-md-6'>
-									<div className='file-upload-box'>
-										<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-										<div className='or-text'>{i18n('or')}</div>
-										<div className='upload-btn primary-btn' onClick={() => this.refs.processEditorFileInput.open()}>
-											<span className='primary-btn-text'>{i18n('Select file')}</span>
-										</div>
-									</div>
-							</div>
-						</div>
-						<ValidationInput
-							onChange={description => onDataChanged({description})}
-							label={i18n('Notes')}
-							value={description}
-							name='vsp-process-description'
-							className='vsp-process-description'
-							validations={{maxLength: 1000}}
-							type='textarea'/>
-					</Dropzone>
-				</div>
-			</ValidationForm>
+					<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
+						<Dropzone
+							className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
+							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
+							onDragEnter={() => this.setState({dragging:true})}
+							onDragLeave={() => this.setState({dragging:false})}
+							multiple={false}
+							disableClick={true}
+							ref='processEditorFileInput'
+							name='processEditorFileInput'>
+							<GridSection>
+								<GridItem colSpan={2}>
+									<Input
+										onChange={name => onDataChanged({name})}
+										isValid={genericFieldInfo.name.isValid}
+										isRequired={true}
+										data-test-id='name'
+										errorText={genericFieldInfo.name.errorText}
+										label={i18n('Name')}
+										value={name}
+										type='text'/>
+								</GridItem>
+								<GridItem colSpan={2}>
+									<FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} />
+								</GridItem>
+							</GridSection>
+							<GridSection>
+								<GridItem colSpan={2}>
+									<Input
+										name='vsp-process-description'
+										groupClassName='vsp-process-description'
+										onChange={description => onDataChanged({description})}
+										isValid={genericFieldInfo.description.isValid}
+										errorText={genericFieldInfo.description.errorText}
+										label={i18n('Notes')}
+										value={description}
+										data-test-id='vsp-process-description'
+										type='textarea'/>
+								</GridItem>
+								<GridItem colSpan={2}>
+									<Input
+										label={i18n('Artifacts')}
+										data-test-id='artifacts'
+										value={artifactName}
+										type='text'
+										disabled/>
+									<Input
+										onChange={e => {
+											// setting the unit to the correct value
+											const selectedIndex = e.target.selectedIndex;
+											const val = e.target.options[selectedIndex].value;
+											onDataChanged({type: val});}
+										}
+										value={type}
+										label={i18n('Process Type')}
+										data-test-id='process-type'
+										isValid={genericFieldInfo.type.isValid}
+										errorText={genericFieldInfo.type.errorText}
+										type='select'
+										className='input-options-select'
+										groupClassName='bootstrap-input-options' >
+										{ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
+											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
+									</Input>
+								</GridItem>
+							</GridSection>
+						</Dropzone>
+					</div>
+				</Form>}
 			</div>
 		);
 	}
@@ -110,14 +166,25 @@ class SoftwareProductProcessesEditorView extends React.Component {
 	}
 
 
-	handleImportSubmit(files) {
-		let {onDataChanged} = this.props;
-		this.setState({
-			dragging: false,
-			complete: '0',
-			files
-		});
-		onDataChanged({artifactName: files[0].name});
+	handleImportSubmit(files, rejectedFiles) {
+		if (files.length > 0) {
+			let {onDataChanged} = this.props;
+			this.setState({
+				dragging: false,
+				complete: '0',
+				files
+			});
+			onDataChanged({artifactName: files[0].name});
+		}
+		else if (rejectedFiles.length > 0) {
+			this.setState({
+				dragging: false
+			});
+			if (DEBUG) {
+				console.log('file was rejected ' + rejectedFiles[0].name);
+			}
+		}
+
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
index 5f6932897e..a8cb709194 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
@@ -1,30 +1,27 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
 
 import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
 
-const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({softwareProduct}) => {
 
 	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
 	let{processesList = [], processesEditor = {}} = componentProcesses;
@@ -42,12 +39,19 @@ const mapStateToProps = ({softwareProduct}) => {
 
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
+const mapActionsToProps = (dispatch, {componentId, softwareProductId}) => {
 
 	return {
 		onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
 		onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openDeleteProcessesConfirm(dispatch, {process, softwareProductId})
+		onDeleteProcessClick: (process, version) => dispatch({
+			type: modalActionTypes.GLOBAL_MODAL_WARNING,
+			data:{
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
+				onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch,
+					{process, softwareProductId, version, componentId})
+			}
+		})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
index 4bb124d52f..98e24a9c21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
 
 export default (state = [], action) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx
deleted file mode 100644
index 48fa862364..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx';
-import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-function renderMsg(processToDelete) {
-	let name = processToDelete ? processToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name});
-	return (
-		<div>
-			<p>{msg}</p>
-		</div>
-	);
-};
-
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor, softwareProductComponents} = softwareProduct;
-	let {componentProcesses} = softwareProductComponents;
-	let {processToDelete} = componentProcesses;
-	let softwareProductId = softwareProductEditor.data.id;
-	const show = processToDelete !== false;
-	return {
-		show,
-		title: 'Warning!',
-		type: 'warning',
-		msg: renderMsg(processToDelete),
-		confirmationDetails: {processToDelete, softwareProductId}
-	};
-};
-
-const mapActionsToProps = (dispatch,{componentId, softwareProductId}) => {
-	return {
-		onConfirmed: ({processToDelete}) => {
-			SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, {process: processToDelete, softwareProductId, componentId});
-			SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch);
-		},
-		onDeclined: () => {
-			SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch);
-		}
-	};
-};
-
-export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView);
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
index a8b07e9194..650d6d5ebc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -1,3 +1,18 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
@@ -6,7 +21,6 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
 import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js';
-import SoftwareProductComponentsProcessesConfirmationModal from './SoftwareProductComponentsProcessesConfirmationModal.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
 
@@ -22,12 +36,11 @@ class SoftwareProductProcessesView extends React.Component {
 		isModalInEditMode: React.PropTypes.bool,
 		onStorageSelect: React.PropTypes.func,
 		componentId: React.PropTypes.string,
-		softwareProductId: React.PropTypes.string
+		softwareProductId: React.PropTypes.string,
+		currentSoftwareProduct: React.PropTypes.object
 	};
 
 	render() {
-		let { softwareProductId, componentId} = this.props;
-
 		return (
 			<div className='vsp-processes-page'>
 				<div className='software-product-view'>
@@ -35,18 +48,15 @@ class SoftwareProductProcessesView extends React.Component {
 						{this.renderEditor()}
 						{this.renderProcessList()}
 					</div>
-					<SoftwareProductComponentsProcessesConfirmationModal
-						componentId={componentId}
-						softwareProductId={softwareProductId}/>
 				</div>
 			</div>
 		);
 	}
 
 	renderEditor() {
-		let {softwareProductId, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
+		let {softwareProductId, currentSoftwareProduct: {version}, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
 		return (
-			<Modal show={isDisplayModal} bsSize='large' animation={true}>
+			<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
 				<Modal.Header>
 					<Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
 				</Modal.Header>
@@ -54,6 +64,7 @@ class SoftwareProductProcessesView extends React.Component {
 					<SoftwareProductProcessesEditor
 						componentId={componentId}
 						softwareProductId={softwareProductId}
+						version={version}
 						isReadOnlyMode={isReadOnlyMode}/>
 				</Modal.Body>
 			</Modal>
@@ -72,7 +83,8 @@ class SoftwareProductProcessesView extends React.Component {
 					placeholder={i18n('Filter Process')}
 					onAdd={onAddProcess}
 					isReadOnlyMode={isReadOnlyMode}
-					onFilter={filter => this.setState({localFilter: filter})}>
+					title={i18n('Process Details')}
+					onFilter={value => this.setState({localFilter: value})}>
 					{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
 				</ListEditorView>
 			</div>
@@ -81,14 +93,14 @@ class SoftwareProductProcessesView extends React.Component {
 
 	renderProcessListItem(process, isReadOnlyMode) {
 		let {id, name, description, artifactName = ''} = process;
-		let {onEditProcessClick, onDeleteProcessClick} =  this.props;
+		let {currentSoftwareProduct: {version}, onEditProcessClick, onDeleteProcessClick} =  this.props;
 		return (
 			<ListEditorItemView
 				key={id}
 				className='list-editor-item-view'
 				isReadOnlyMode={isReadOnlyMode}
 				onSelect={() => onEditProcessClick(process)}
-				onDelete={() => onDeleteProcessClick(process)}>
+				onDelete={() => onDeleteProcessClick(process, version)}>
 
 				<div className='list-editor-item-view-field'>
 					<div className='title'>{i18n('Name')}</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
index fbd3f81ec2..18a3b1e8ff 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
@@ -1,47 +1,48 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
  */
-
 import {connect} from 'react-redux';
 
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
 import SoftwareProductComponentStorageView from './SoftwareProductComponentStorageView.jsx';
 
+import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+
 const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {data: componentData , qdata, qschema}} = softwareProductComponents;
+	let {componentEditor: {data: componentData , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
 
 	return {
 		componentData,
 		qdata,
-		qschema,
-		isReadOnlyMode
+		isReadOnlyMode,
+		qGenericFieldInfo,
+		dataMap
 	};
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
-		onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, vspComponentId: componentId, qdata});}
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
+		onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
+			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
+		}
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
index 9c9600c376..28bdf8e5e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
@@ -1,8 +1,156 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import classnames from 'classnames';
 
+const BackupSection = ({isReadOnlyMode,dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Backup')}>
+		<GridItem>
+			<div className='vertical-flex'>
+				<label key='label' className={classnames('control-label',{'disabled': isReadOnlyMode})}>{i18n('Backup Type')}</label>
+				<div className='radio-options-content-row'>
+					{qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => (
+						<Input
+							data-test-id='backupType'
+							type='radio'
+							key={onSite.enum}
+							name={'compute/guestOS/bitSize'}
+							className='radio-field'
+							value={onSite.enum}
+							label={onSite.title}
+							onChange={(site) => onQDataChanged({'storage/backup/backupType' :  site})}
+							isValid={qgenericFieldInfo['storage/backup/backupType'].isValid}
+							errorText={qgenericFieldInfo['storage/backup/backupType'].errorText}
+							checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) }
+				</div>
+			</div>
+		</GridItem>
+		<GridItem>
+			<Input
+				className='section-field'
+				data-test-id='backupSolution'
+				onChange={(backupSolution) => onQDataChanged({'storage/backup/backupSolution' : backupSolution})}
+				label={i18n('Backup Solution')}
+				type='text'
+				isValid={qgenericFieldInfo['storage/backup/backupSolution'].isValid}
+				errorText={qgenericFieldInfo['storage/backup/backupSolution'].errorText}
+				value={dataMap['storage/backup/backupSolution']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				className='section-field'
+				data-test-id='backupStorageSize'
+				onChange={(backupStorageSize) => onQDataChanged({'storage/backup/backupStorageSize' : backupStorageSize})}
+				label={i18n('Backup Storage Size (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['storage/backup/backupStorageSize'].isValid}
+				errorText={qgenericFieldInfo['storage/backup/backupStorageSize'].errorText}
+				value={dataMap['storage/backup/backupStorageSize']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='backupNIC'
+				label={i18n('Backup NIC')}
+				type='select'
+				className='input-options-select section-field'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
+				errorText={qgenericFieldInfo['storage/backup/backupNIC'].errorText}
+				value={dataMap['storage/backup/backupNIC']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'storage/backup/backupNIC' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+	</GridSection>
+);
+
+const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Snapshot Backup')}>
+		<GridItem>
+			<Input
+				className='section-field'
+				data-test-id='snapshotFrequency'
+				onChange={(snapshotFrequency) => onQDataChanged({'storage/snapshotBackup/snapshotFrequency' : snapshotFrequency})}
+				label={i18n('Backup Storage Size (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].isValid}
+				errorText={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].errorText}
+				value={dataMap['storage/snapshotBackup/snapshotFrequency']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Log Backup')}>
+		<GridItem>
+			<Input
+				className='section-field'
+				data-test-id='sizeOfLogFiles'
+				onChange={(sizeOfLogFiles) => onQDataChanged({'storage/logBackup/sizeOfLogFiles' : sizeOfLogFiles})}
+				label={i18n('Backup Storage Size (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].isValid}
+				errorText={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].errorText}
+				value={dataMap['storage/logBackup/sizeOfLogFiles']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				className='section-field'
+				label={i18n('Log Retention Period (days)')}
+				data-test-id='logRetentionPeriod'
+				onChange={(logRetentionPeriod) => onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})}
+				type='number'
+				isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid}
+				errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText}
+				value={dataMap['storage/logBackup/logRetentionPeriod']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				className='section-field'
+				label={i18n('Log Backup Frequency (days)')}
+				data-test-id='logBackupFrequency'
+				onChange={(logBackupFrequency) => onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})}
+				type='number'
+				isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid}
+				errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText}
+				value={dataMap['storage/logBackup/logBackupFrequency']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				className='section-field'
+				label={i18n('Log File Location')}
+				data-test-id='logFileLocation'
+				onChange={(logFileLocation) => onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})}
+				type='text'
+				isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid}
+				errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText}
+				value={dataMap['storage/logBackup/logFileLocation']}/>
+		</GridItem>
+	</GridSection>
+);
 
 class SoftwareProductComponentStorageView extends React.Component {
 
@@ -14,110 +162,28 @@ class SoftwareProductComponentStorageView extends React.Component {
 	};
 
 	render() {
-		let {qdata, qschema, onQDataChanged, onSubmit, isReadOnlyMode} = this.props;
+		let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} =  this.props;
 
 		return(
 			<div className='vsp-component-questionnaire-view'>
-				<ValidationForm
-					ref='storageValidationForm'
-					hasButtons={false}
+				{qGenericFieldInfo && <Form
+					ref={form => this.form = form }
+					isValid={true}
+					formReady={null}
 					onSubmit={() => onSubmit({qdata})}
 					className='component-questionnaire-validation-form'
 					isReadOnlyMode={isReadOnlyMode}
-					onDataChanged={onQDataChanged}
-					data={qdata}
-					schema={qschema}>
-
-					<div className='section-title'>{i18n('Backup')}</div>
-					<div className='rows-section'>
-						<div className='row-flex-components input-row'>
-							<div className='single-col'>
-								<div className='vertical-flex'>
-									<label key='label' className='control-label'>{i18n('Backup Type')}</label>
-									<div className='radio-options-content-row'>
-										<ValidationInput
-											label={i18n('On Site')}
-											type='radiogroup'
-											pointer={'/storage/backup/backupType'}
-											className='radio-field'/>
-									</div>
-								</div>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Backup Solution')}
-									pointer={'/storage/backup/backupSolution'}
-									className='section-field'/>
-							</div>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Backup Storage Size (GB)')}
-									pointer={'/storage/backup/backupStorageSize'}
-									className='section-field'/>
-							</div>
-							<ValidationInput
-								type='select'
-								label={i18n('Backup NIC')}
-								pointer={'/storage/backup/backupNIC'}
-								className='section-field'/>
-						</div>
-					</div>
-
-					<div className='section-title'>{i18n('Snapshot Backup')}</div>
-					<div className='rows-section'>
-						<div className='row-flex-components input-row'>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Snapshot Frequency (hours)')}
-									pointer={'/storage/snapshotBackup/snapshotFrequency'}
-									className='section-field'/>
-							</div>
-							<div className='empty-two-col' />
-							<div className='empty-col' />
-						</div>
-					</div>
-
-					<div className='section-title'>{i18n('Log Backup')}</div>
-					<div className='rows-section'>
-						<div className='row-flex-components input-row'>
-							<div className='single-col'>
-								<ValidationInput
-									type='text'
-									label={i18n('Size of Log Files (GB)')}
-									pointer={'/storage/logBackup/sizeOfLogFiles'}
-									className='section-field'/>
-								</div>
-							<div className='single-col'>
-							<ValidationInput
-								type='text'
-								label={i18n('Log Retention Period (days)')}
-								pointer={'/storage/logBackup/logRetentionPeriod'}
-								className='section-field'/>
-								</div>
-							<div className='single-col'>
-							<ValidationInput
-								type='text'
-								label={i18n('Log Backup Frequency (days)')}
-								pointer={'/storage/logBackup/logBackupFrequency'}
-								className='section-field'/>
-							</div>
-							<ValidationInput
-								type='text'
-								label={i18n('Log File Location')}
-								pointer={'/storage/logBackup/logFileLocation'}
-								className='section-field'/>
-						</div>
-					</div>
-				</ValidationForm>
+					hasButtons={false}>
+					<BackupSection isReadOnlyMode={isReadOnlyMode} onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+					<SnapshotBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+					<LogBackupSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+				</Form> }
 			</div>
 		);
 	}
 
 	save(){
-		return this.refs.storageValidationForm.handleFormSubmit(new Event('dummy'));
+		return this.form.handleFormSubmit(new Event('dummy'));
 	}
 }