From 280f8015d06af1f41a3ef12e8300801c7a5e0d54 Mon Sep 17 00:00:00 2001
From: AviZi <avi.ziv@amdocs.com>
Date: Fri, 9 Jun 2017 02:39:56 +0300
Subject: [SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>
---
 .../network/SoftwareProductComponentsNICEditor.js  |  51 +--
 .../SoftwareProductComponentsNICEditorReducer.js   |  51 ++-
 .../SoftwareProductComponentsNICEditorView.jsx     | 356 +++------------------
 .../SoftwareProductComponentsNICListReducer.js     |  21 +-
 ...SoftwareProductComponentsNetworkActionHelper.js |  96 +++---
 .../SoftwareProductComponentsNetworkConstants.js   |  27 +-
 .../SoftwareProductComponentsNetworkList.js        |  46 ++-
 .../SoftwareProductComponentsNetworkListView.jsx   | 104 +++---
 .../network/nicEditorComponents/Acceptable.jsx     |  75 +++++
 .../network/nicEditorComponents/FlowLength.jsx     |  35 ++
 .../network/nicEditorComponents/InFlowTraffic.jsx  |  35 ++
 .../network/nicEditorComponents/IpConfig.jsx       |  45 +++
 .../network/nicEditorComponents/NameAndPurpose.jsx |  54 ++++
 .../network/nicEditorComponents/Network.jsx        |  62 ++++
 .../network/nicEditorComponents/OutFlowTraffic.jsx |  35 ++
 .../network/nicEditorComponents/PacketsBytes.jsx   |  65 ++++
 .../network/nicEditorComponents/Protocols.jsx      |  74 +++++
 .../network/nicEditorComponents/Sizing.jsx         |  39 +++
 18 files changed, 771 insertions(+), 500 deletions(-)
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
 create mode 100644 openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx

(limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network')

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;
-- 
cgit 1.2.3-korg