From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001
From: Einav Weiss Keidar <einavw@amdocs.com>
Date: Tue, 20 Mar 2018 14:45:40 +0200
Subject: Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
---
 .../network/nicEditorComponents/Acceptable.jsx     | 142 +++++++++++++--------
 .../network/nicEditorComponents/FlowLength.jsx     |  22 ++--
 .../network/nicEditorComponents/InFlowTraffic.jsx  |  22 ++--
 .../network/nicEditorComponents/IpConfig.jsx       |  52 +++++---
 .../network/nicEditorComponents/NameAndPurpose.jsx |  70 +++++-----
 .../network/nicEditorComponents/Network.jsx        | 110 +++++++++-------
 .../network/nicEditorComponents/OutFlowTraffic.jsx |  22 ++--
 .../network/nicEditorComponents/PacketsBytes.jsx   |  93 +++++++++-----
 .../network/nicEditorComponents/Protocols.jsx      | 120 ++++++++++-------
 .../network/nicEditorComponents/Sizing.jsx         |  41 +++---
 10 files changed, 419 insertions(+), 275 deletions(-)

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

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