diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents')
10 files changed, 419 insertions, 275 deletions
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 index 0fc7404c56..0b2783ebe7 100644 --- 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 @@ -19,57 +19,97 @@ 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 hasLastColSet> - <GridItem colSpan={3}> - <div className='part-title-small packets'>{i18n('Acceptable Jitter')}</div> - </GridItem> - <GridItem lastColInRow> - <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 lastColInRow> - <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> - ); +const Acceptable = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection hasLastColSet> + <GridItem colSpan={3}> + <div className="part-title-small packets"> + {i18n('Acceptable Jitter')} + </div> + </GridItem> + <GridItem lastColInRow> + <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 lastColInRow> + <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 index 3745fc7c2e..32a5516eb4 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index 5476ed90e6..150e58af52 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index b3a5d21625..695835606b 100644 --- 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 @@ -19,27 +19,37 @@ 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> - ); +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 index 06a2bb445c..5a89239dc6 100644 --- 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 @@ -20,40 +20,48 @@ 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, genericFieldInfo, isReadOnlyMode, name, description, isManual}) => { - - return ( - <GridSection hastLastColSet> - <GridItem colSpan={2}> - <Input - label={i18n('Name')} - value={name} - data-test-id='nic-name' - disabled={!isManual} - isRequired={true} - onChange={name => onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - type='text' /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <Input - label={i18n('Purpose of NIC')} - value={description} - data-test-id='nic-description' - onChange={description => onDataChanged({description})} - disabled={isReadOnlyMode} - type='textarea' /> - </GridItem> - </GridSection> - ); +const NameAndPurpose = ({ + onDataChanged, + genericFieldInfo, + isReadOnlyMode, + name, + description, + isManual +}) => { + return ( + <GridSection hastLastColSet> + <GridItem colSpan={2}> + <Input + label={i18n('Name')} + value={name} + data-test-id="nic-name" + disabled={!isManual} + isRequired={true} + onChange={name => onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={genericFieldInfo['name'].errorText} + type="text" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <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: PropTypes.string, - description: PropTypes.array, - onDataChanged: PropTypes.func, - isReadOnlyMode: PropTypes.bool, + name: PropTypes.string, + description: PropTypes.array, + onDataChanged: PropTypes.func, + isReadOnlyMode: 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 index 7e6712cb5e..c440d2fbd3 100644 --- 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 @@ -21,56 +21,70 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; import { networkTypes } from '../SoftwareProductComponentsNetworkConstants.js'; -const Network = ({networkValues, networkType, networkDescription, onDataChanged, isReadOnlyMode}) => { - const isExternal = networkType === networkTypes.EXTERNAL; - return ( - <GridSection title={i18n('Network')} hasLastColSet> - <GridItem> - <Input - label={i18n('Internal')} - disabled - checked={!isExternal} - data-test-id='nic-internal' - className='network-radio disabled' - type='radio' /> - </GridItem> - <GridItem> - <Input - label={i18n('External')} - disabled - checked={isExternal} - data-test-id='nic-external' - className='network-radio disabled' - type='radio' /> - </GridItem> - <GridItem colSpan={2} lastColInRow> - { - isExternal ? - <Input - label={i18n('Network Description')} - value={networkDescription} - data-test-id='nic-network-description' - onChange={networkDescription => onDataChanged({networkDescription})} - disabled={isReadOnlyMode} - type='text' /> - : - <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> - ); +const Network = ({ + networkValues, + networkType, + networkDescription, + onDataChanged, + isReadOnlyMode +}) => { + const isExternal = networkType === networkTypes.EXTERNAL; + return ( + <GridSection title={i18n('Network')} hasLastColSet> + <GridItem> + <Input + label={i18n('Internal')} + disabled + checked={!isExternal} + data-test-id="nic-internal" + className="network-radio disabled" + type="radio" + /> + </GridItem> + <GridItem> + <Input + label={i18n('External')} + disabled + checked={isExternal} + data-test-id="nic-external" + className="network-radio disabled" + type="radio" + /> + </GridItem> + <GridItem colSpan={2} lastColInRow> + {isExternal ? ( + <Input + label={i18n('Network Description')} + value={networkDescription} + data-test-id="nic-network-description" + onChange={networkDescription => + onDataChanged({ networkDescription }) + } + disabled={isReadOnlyMode} + type="text" + /> + ) : ( + <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: PropTypes.array + networkValues: PropTypes.array }; -export default Network; +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 index 80a3d1579b..7173294536 100644 --- 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 @@ -18,18 +18,20 @@ 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'}, + { 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}/> - ); +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 index f5f28aea59..070ac816ad 100644 --- 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 @@ -20,47 +20,74 @@ 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, lastColInRow}) => { - return ( - <GridItem lastColInRow={lastColInRow}> - <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> - ); +const PointerInput = ({ + label, + value, + onQDataChanged, + qgenericFieldInfo, + dataMap, + lastColInRow +}) => { + return ( + <GridItem lastColInRow={lastColInRow}> + <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: PropTypes.string, - value: PropTypes.string + label: PropTypes.string, + value: PropTypes.string }; -const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => { - return( - <GridSection title={title} hasLastColSet> - <GridItem colSpan={2}> - <div className='part-title-small packets'>{i18n('Packets')}</div> - </GridItem> - <GridItem colSpan={2} lastColInRow> - <div className='part-title-small bytes'>{i18n('Bytes')}</div> - </GridItem> - {pointers.map((pointer, i) => {return (<PointerInput key={i} label={pointer.label} value={pointer.value} - qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} lastColInRow={i === 3} />);})} - </GridSection> - ); +const PacketsBytes = ({ + title, + pointers = [], + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + <GridSection title={title} hasLastColSet> + <GridItem colSpan={2}> + <div className="part-title-small packets"> + {i18n('Packets')} + </div> + </GridItem> + <GridItem colSpan={2} lastColInRow> + <div className="part-title-small bytes">{i18n('Bytes')}</div> + </GridItem> + {pointers.map((pointer, i) => { + return ( + <PointerInput + key={i} + label={pointer.label} + value={pointer.value} + qgenericFieldInfo={qgenericFieldInfo} + onQDataChanged={onQDataChanged} + dataMap={dataMap} + lastColInRow={i === 3} + /> + ); + })} + </GridSection> + ); }; PacketsBytes.PropTypes = { - title: PropTypes.string, - pointers: PropTypes.array, - onQDataChanged: PropTypes.function, - dataMap: PropTypes.object, - qgenericFieldInfo: PropTypes.object + title: PropTypes.string, + pointers: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: 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 index be4093da59..eb762b11b2 100644 --- 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 @@ -21,55 +21,83 @@ 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')} hasLastColSet> - <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} lastColInRow> - <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> - ); +const Protocols = ({ + protocols, + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + <GridSection title={i18n('Protocols')} hasLastColSet> + <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} lastColInRow> + <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: PropTypes.array, - onQDataChanged: PropTypes.function, - dataMap: PropTypes.object, - qgenericFieldInfo: PropTypes.object + protocols: PropTypes.array, + onQDataChanged: PropTypes.function, + dataMap: PropTypes.object, + qgenericFieldInfo: 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 index 202d458f25..f9ec7261ac 100644 --- 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 @@ -19,21 +19,32 @@ 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')} hasLastColSet> - <GridItem colSpan={4} lastColInRow> - <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> - ); +const Sizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + <GridSection title={i18n('Sizing')} hasLastColSet> + <GridItem colSpan={4} lastColInRow> + <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; |