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>
---
 .../SoftwareProductComponentsNetworkListView.jsx   | 104 ++++++++++++++-------
 1 file changed, 68 insertions(+), 36 deletions(-)

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

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