diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx | 356 |
1 files changed, 53 insertions, 303 deletions
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}); } } |