1 files changed, 60 insertions, 33 deletions
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;