1 files changed, 14 insertions, 13 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 d7ee91bd15..f5f28aea59 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
@@ -14,14 +14,15 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 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}) => {
+const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap, lastColInRow}) => {
 	return (
-		<GridItem>
+		<GridItem lastColInRow={lastColInRow}>
 			<Input
 				label={i18n(label)}
 				type='number'
@@ -35,31 +36,31 @@ const PointerInput = ({label, value, onQDataChanged, qgenericFieldInfo, dataMap}
 };
 
 PointerInput.PropTypes = {
-	label: React.PropTypes.string,
-	value: React.PropTypes.string
+	label: PropTypes.string,
+	value: PropTypes.string
 };
 
 const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => {
 	return(
-		<GridSection title={title}>
+		<GridSection title={title} hasLastColSet>
 				<GridItem colSpan={2}>
 					<div className='part-title-small packets'>{i18n('Packets')}</div>
 				</GridItem>
-				<GridItem colSpan={2}>
+				<GridItem colSpan={2} lastColInRow>
 					<div className='part-title-small bytes'>{i18n('Bytes')}</div>
 				</GridItem>
-				{pointers.map(pointer => {return (<PointerInput key={pointer.value} label={pointer.label} value={pointer.value}
-					qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged} dataMap={dataMap} />);})}
+				{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: React.PropTypes.string,
-	pointers: React.PropTypes.array,
-	onQDataChanged:  React.PropTypes.function,
-	dataMap: React.PropTypes.object,
-	qgenericFieldInfo: React.PropTypes.object
+	title: PropTypes.string,
+	pointers: PropTypes.array,
+	onQDataChanged:  PropTypes.function,
+	dataMap: PropTypes.object,
+	qgenericFieldInfo: PropTypes.object
 };
 
 export default PacketsBytes;