Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

12 files changed, 1032 insertions, 599 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
index 02c09fbdf8..cd37c317af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
@@ -16,154 +16,270 @@
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes} from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as globalModalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './computeComponents/computeFlavor/ComputeFlavorConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import {
+    actionTypes as globalModalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 
 function baseUrl(softwareProductId, componentId, version) {
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/compute-flavors`;
 }
 
-function baseUrlVSPLevel(softwareProductId, version){
-	const versionId = version.id;
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
+function baseUrlVSPLevel(softwareProductId, version) {
+    const versionId = version.id;
+    const restPrefix = Configuration.get('restPrefix');
+    return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/compute-flavors`;
 }
 
-function fetchComputesList(softwareProductId, componentId, version){
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}`);
+function fetchComputesList(softwareProductId, componentId, version) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}`
+    );
 }
 
-function fetchComputesListForVSP(softwareProductId, version){
-	return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
+function fetchComputesListForVSP(softwareProductId, version) {
+    return RestAPIUtil.fetch(`${baseUrlVSPLevel(softwareProductId, version)}`);
 }
 
 function fetchCompute(softwareProductId, componentId, computeId, version) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+    return RestAPIUtil.fetch(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-function fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`);
+function fetchComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    version
+}) {
+    return RestAPIUtil.fetch(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`
+    );
 }
 
-function postCompute({softwareProductId, componentId, compute, version}) {
-	return RestAPIUtil.post(baseUrl(softwareProductId, componentId, version), compute);
+function postCompute({ softwareProductId, componentId, compute, version }) {
+    return RestAPIUtil.post(
+        baseUrl(softwareProductId, componentId, version),
+        compute
+    );
 }
 
-function putCompute({softwareProductId, componentId, compute, version}) {
-	const computeData = {
-		name: compute.name,
-		description: compute.description
-	};
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${compute.id}`, computeData);
+function putCompute({ softwareProductId, componentId, compute, version }) {
+    const computeData = {
+        name: compute.name,
+        description: compute.description
+    };
+    return RestAPIUtil.put(
+        `${baseUrl(softwareProductId, componentId, version)}/${compute.id}`,
+        computeData
+    );
 }
 
-function putComputeQuestionnaire({softwareProductId, componentId, computeId, qdata, version}) {
-	return RestAPIUtil.put(`${baseUrl(softwareProductId, componentId, version)}/${computeId}/questionnaire`, qdata);
+function putComputeQuestionnaire({
+    softwareProductId,
+    componentId,
+    computeId,
+    qdata,
+    version
+}) {
+    return RestAPIUtil.put(
+        `${baseUrl(
+            softwareProductId,
+            componentId,
+            version
+        )}/${computeId}/questionnaire`,
+        qdata
+    );
 }
 
-function deleteCompute({softwareProductId, componentId, computeId, version}) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId, version)}/${computeId}`);
+function deleteCompute({ softwareProductId, componentId, computeId, version }) {
+    return RestAPIUtil.destroy(
+        `${baseUrl(softwareProductId, componentId, version)}/${computeId}`
+    );
 }
 
-
 const ComputeFlavorActionHelper = {
-	openComputeEditor(dispatch, {props}) {
-		dispatch({
-			type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
-			compute: props.compute || {}
-		});
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
-			data: {
-				modalComponentName: modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
-				modalClassName: `compute-flavor-editor-modal-${props.compute ? 'edit' : 'create'}`,
-				modalComponentProps: {...props, size: props.compute ? modalSizes.LARGE : undefined, dialogClassName:'compute-flavor-editor-modal'},
-				title: `${props.compute ? i18n('Edit Compute Flavor') : i18n('Create New Compute Flavor')}`
-			}
-		});
-	},
-
-	closeComputeEditor(dispatch){
-		dispatch({
-			type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
-		});
-		dispatch({
-			type: actionTypes.computeEditor.CLEAR_DATA
-		});
-	},
-
-	fetchComputesList(dispatch, {softwareProductId, componentId, version}) {
-		return fetchComputesList(softwareProductId, componentId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	fetchComputesListForVSP(dispatch, {softwareProductId, version}) {
-		return fetchComputesListForVSP(softwareProductId, version).then(response => dispatch({
-			type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
-			response
-		}));
-	},
-
-	loadComputeData({softwareProductId, componentId, computeId, version}) {
-		return fetchCompute(softwareProductId, componentId, computeId, version);
-	},
-
-	loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return fetchComputeQuestionnaire({softwareProductId, componentId, computeId, version}).then(response =>
-			ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_COMPUTE_QUESTIONNAIRE ,response: {
-				qdata: response.data ? JSON.parse(response.data) : {},
-				qschema: JSON.parse(response.schema)
-			}})
-		);
-	},
-
-	loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}){
-		return ComputeFlavorActionHelper.loadComputeData({softwareProductId, componentId, computeId, version}).then(({data}) =>
-			ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {softwareProductId, componentId, computeId, version}).then(() =>
-				ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, version, isReadOnlyMode, compute: {id: computeId, ...data}}})
-			));
-	},
-
-	saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data: compute, qdata, version}) {
-		ComputeFlavorActionHelper.closeComputeEditor(dispatch);
-		if(compute.id) {
-			return Promise.all([
-				putComputeQuestionnaire({softwareProductId, componentId, computeId: compute.id, qdata, version}),
-				putCompute({softwareProductId, componentId, compute, version}).then(() => {
-					dispatch({
-						type: actionTypes.COMPUTE_LIST_EDIT,
-						compute
-					});
-				})
-			]);
-		}
-		else {
-			return postCompute({softwareProductId, componentId, compute, version}).then(response =>
-				dispatch({
-					type: actionTypes.ADD_COMPUTE,
-					compute: {
-						...compute,
-						id: response.id,
-						componentId
-					}
-				})
-			);
-		}
-	},
-
-	deleteCompute(dispatch, {softwareProductId, componentId, computeId, version}) {
-		return deleteCompute({softwareProductId, componentId, computeId, version}).then(() => dispatch({
-			type: actionTypes.DELETE_COMPUTE,
-			computeId
-		}));
-	}
+    openComputeEditor(dispatch, { props }) {
+        dispatch({
+            type: actionTypes.computeEditor.LOAD_EDITOR_DATA,
+            compute: props.compute || {}
+        });
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName:
+                    modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
+                modalClassName: `compute-flavor-editor-modal-${
+                    props.compute ? 'edit' : 'create'
+                }`,
+                modalComponentProps: {
+                    ...props,
+                    size: props.compute ? modalSizes.LARGE : undefined,
+                    dialogClassName: 'compute-flavor-editor-modal'
+                },
+                title: `${
+                    props.compute
+                        ? i18n('Edit Compute Flavor')
+                        : i18n('Create New Compute Flavor')
+                }`
+            }
+        });
+    },
+
+    closeComputeEditor(dispatch) {
+        dispatch({
+            type: globalModalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({
+            type: actionTypes.computeEditor.CLEAR_DATA
+        });
+    },
+
+    fetchComputesList(dispatch, { softwareProductId, componentId, version }) {
+        return fetchComputesList(softwareProductId, componentId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    fetchComputesListForVSP(dispatch, { softwareProductId, version }) {
+        return fetchComputesListForVSP(softwareProductId, version).then(
+            response =>
+                dispatch({
+                    type: actionTypes.COMPUTE_FLAVORS_LIST_LOADED,
+                    response
+                })
+        );
+    },
+
+    loadComputeData({ softwareProductId, componentId, computeId, version }) {
+        return fetchCompute(softwareProductId, componentId, computeId, version);
+    },
+
+    loadComputeQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return fetchComputeQuestionnaire({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(response =>
+            ValidationHelper.qDataLoaded(dispatch, {
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE,
+                response: {
+                    qdata: response.data ? JSON.parse(response.data) : {},
+                    qschema: JSON.parse(response.schema)
+                }
+            })
+        );
+    },
+
+    loadCompute(
+        dispatch,
+        { softwareProductId, componentId, version, computeId, isReadOnlyMode }
+    ) {
+        return ComputeFlavorActionHelper.loadComputeData({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(({ data }) =>
+            ComputeFlavorActionHelper.loadComputeQuestionnaire(dispatch, {
+                softwareProductId,
+                componentId,
+                computeId,
+                version
+            }).then(() =>
+                ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                    props: {
+                        softwareProductId,
+                        componentId,
+                        version,
+                        isReadOnlyMode,
+                        compute: { id: computeId, ...data }
+                    }
+                })
+            )
+        );
+    },
+
+    saveComputeDataAndQuestionnaire(
+        dispatch,
+        { softwareProductId, componentId, data: compute, qdata, version }
+    ) {
+        ComputeFlavorActionHelper.closeComputeEditor(dispatch);
+        if (compute.id) {
+            return Promise.all([
+                putComputeQuestionnaire({
+                    softwareProductId,
+                    componentId,
+                    computeId: compute.id,
+                    qdata,
+                    version
+                }),
+                putCompute({
+                    softwareProductId,
+                    componentId,
+                    compute,
+                    version
+                }).then(() => {
+                    dispatch({
+                        type: actionTypes.COMPUTE_LIST_EDIT,
+                        compute
+                    });
+                })
+            ]);
+        } else {
+            return postCompute({
+                softwareProductId,
+                componentId,
+                compute,
+                version
+            }).then(response =>
+                dispatch({
+                    type: actionTypes.ADD_COMPUTE,
+                    compute: {
+                        ...compute,
+                        id: response.id,
+                        componentId
+                    }
+                })
+            );
+        }
+    },
+
+    deleteCompute(
+        dispatch,
+        { softwareProductId, componentId, computeId, version }
+    ) {
+        return deleteCompute({
+            softwareProductId,
+            componentId,
+            computeId,
+            version
+        }).then(() =>
+            dispatch({
+                type: actionTypes.DELETE_COMPUTE,
+                computeId
+            })
+        );
+    }
 };
 
 export default ComputeFlavorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
index 574828c9ef..d595a82e11 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js
@@ -13,35 +13,63 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SoftwareProductComponentComputeView from './SoftwareProductComponentComputeView.jsx';
 import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
+const mapStateToProps = ({ softwareProduct }) => {
+    let {
+        softwareProductEditor: { data: currentVSP },
+        softwareProductComponents
+    } = softwareProduct;
+    let {
+        componentEditor: { qdata, dataMap, qgenericFieldInfo },
+        computeFlavor: { computesList: computeFlavorsList }
+    } = softwareProductComponents;
 
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {qdata, dataMap, qgenericFieldInfo}, computeFlavor: {computesList: computeFlavorsList}} = softwareProductComponents;
-
-	return {
-		qdata,
-		dataMap,
-		qgenericFieldInfo,
-		computeFlavorsList,
-		isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        qdata,
+        dataMap,
+        qgenericFieldInfo,
+        computeFlavorsList,
+        isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
-	return {
-		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE}),
-		onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});},
-		qValidateData: (data, customValidations) => ValidationHelper.qValidateData(dispatch, {data, customValidations: customValidations,
-			qName: COMPONENTS_QUESTIONNAIRE})
-	};
+const mapActionToProps = (
+    dispatch,
+    { softwareProductId, version, componentId }
+) => {
+    return {
+        onQDataChanged: (deltaData, customValidations) =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            }),
+        onSubmit: ({ qdata }) => {
+            return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    vspComponentId: componentId,
+                    qdata
+                }
+            );
+        },
+        qValidateData: (data, customValidations) =>
+            ValidationHelper.qValidateData(dispatch, {
+                data,
+                customValidations: customValidations,
+                qName: COMPONENTS_QUESTIONNAIRE
+            })
+    };
 };
 
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentComputeView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+    withRef: true
+})(SoftwareProductComponentComputeView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
index 55e5e2b30b..e6ce96666e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx
@@ -22,67 +22,99 @@ import ComputeFlavors from './computeComponents/ComputeFlavors.js';
 import Validator from 'nfvo-utils/Validator.js';
 
 class SoftwareProductComponentComputeView extends React.Component {
+    static propTypes = {
+        dataMap: PropTypes.object,
+        qgenericFieldInfo: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onQDataChanged: PropTypes.func.isRequired,
+        qValidateData: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		dataMap: PropTypes.object,
-		qgenericFieldInfo: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onQDataChanged: PropTypes.func.isRequired,
-		qValidateData: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            softwareProductId,
+            componentId,
+            version,
+            qdata,
+            dataMap,
+            qgenericFieldInfo,
+            isReadOnlyMode,
+            onQDataChanged,
+            qValidateData,
+            onSubmit,
+            computeFlavorsList,
+            isManual
+        } = this.props;
 
-	render() {
-		let {softwareProductId, componentId, version, qdata, dataMap, qgenericFieldInfo, isReadOnlyMode, onQDataChanged, qValidateData,
-			onSubmit, computeFlavorsList, isManual} = this.props;
+        return (
+            <div className="vsp-component-questionnaire-view">
+                {qgenericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        formReady={null}
+                        isValid={true}
+                        hasButtons={false}
+                        onSubmit={() => onSubmit({ qdata })}
+                        className="component-questionnaire-validation-form"
+                        isReadOnlyMode={isReadOnlyMode}>
+                        <NumberOfVms
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                            qValidateData={qValidateData}
+                            customValidations={{
+                                'compute/numOfVMs/maximum': this.validateMax,
+                                'compute/numOfVMs/minimum': this.validateMin
+                            }}
+                        />
+                        <GuestOs
+                            onQDataChanged={onQDataChanged}
+                            dataMap={dataMap}
+                            qgenericFieldInfo={qgenericFieldInfo}
+                        />
+                        <ComputeFlavors
+                            computeFlavorsList={computeFlavorsList}
+                            softwareProductId={softwareProductId}
+                            componentId={componentId}
+                            version={version}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-questionnaire-view'>
-				{ qgenericFieldInfo && <Form
-					ref={ (form) => { this.form = form; }}
-					formReady={null}
-					isValid={true}
-					hasButtons={false}
-					onSubmit={() => onSubmit({qdata})}
-					className='component-questionnaire-validation-form'
-					isReadOnlyMode={isReadOnlyMode} >
-					<NumberOfVms onQDataChanged={onQDataChanged} dataMap={dataMap}
-						 qgenericFieldInfo={qgenericFieldInfo} qValidateData={qValidateData}
-						 customValidations={{'compute/numOfVMs/maximum' : this.validateMax, 'compute/numOfVMs/minimum': this.validateMin}} />
-					<GuestOs onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} />
-					<ComputeFlavors computeFlavorsList={computeFlavorsList} softwareProductId={softwareProductId} componentId={componentId}
-						version={version} isReadOnlyMode={isReadOnlyMode} isManual={isManual}/>
-				</Form> }
-			</div>
-		);
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    validateMin(value, state) {
+        let maxVal = state.dataMap['compute/numOfVMs/maximum'];
+        // we are allowed to have an empty maxval, that will allow all minvals.
+        // if we do not have a minval than there is no point to check it either.
+        if (value === undefined || maxVal === undefined) {
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, maxVal, 'maximum');
+        }
+    }
 
-	validateMin(value, state) {
-		let maxVal = state.dataMap['compute/numOfVMs/maximum'];
-		// we are allowed to have an empty maxval, that will allow all minvals.
-		// if we do not have a minval than there is no point to check it either.
-		if (value === undefined || maxVal === undefined) {
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value, maxVal,'maximum');
-		}
-	}
-
-	validateMax(value, state) {
-		let minVal = state.dataMap['compute/numOfVMs/minimum'];
-		if (minVal === undefined ) {
-			// having no minimum is the same as 0, maximum value doesn't need to be checked
-			// against it.
-			return { isValid: true, errorText: '' };
-		} else {
-			return Validator.validateItem(value,minVal,'minimum');
-		}
-	}
+    validateMax(value, state) {
+        let minVal = state.dataMap['compute/numOfVMs/minimum'];
+        if (minVal === undefined) {
+            // having no minimum is the same as 0, maximum value doesn't need to be checked
+            // against it.
+            return { isValid: true, errorText: '' };
+        } else {
+            return Validator.validateItem(value, minVal, 'minimum');
+        }
+    }
 }
 
 export default SoftwareProductComponentComputeView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
index 2b6d84f381..2004c94137 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js
@@ -15,103 +15,159 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onAddComputeClick: (isReadOnlyMode) => ComputeFlavorActionHelper.openComputeEditor(dispatch, {props: {softwareProductId, componentId, isReadOnlyMode, version}}),
-		onEditCompute: ({computeId, isReadOnlyMode}) => ComputeFlavorActionHelper.loadCompute(dispatch, {softwareProductId, componentId, version, computeId, isReadOnlyMode}),
-		onDeleteCompute: ({id, name}) => dispatch({
-			type: modalActionTypes.GLOBAL_MODAL_WARNING,
-			data:{
-				msg: i18n('Are you sure you want to delete "{name}"?', {name: name}),
-				onConfirmed: () => ComputeFlavorActionHelper.deleteCompute(dispatch, {softwareProductId, componentId, computeId: id, version})
-			}
-		})
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onAddComputeClick: isReadOnlyMode =>
+            ComputeFlavorActionHelper.openComputeEditor(dispatch, {
+                props: {
+                    softwareProductId,
+                    componentId,
+                    isReadOnlyMode,
+                    version
+                }
+            }),
+        onEditCompute: ({ computeId, isReadOnlyMode }) =>
+            ComputeFlavorActionHelper.loadCompute(dispatch, {
+                softwareProductId,
+                componentId,
+                version,
+                computeId,
+                isReadOnlyMode
+            }),
+        onDeleteCompute: ({ id, name }) =>
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    msg: i18n('Are you sure you want to delete "{name}"?', {
+                        name: name
+                    }),
+                    onConfirmed: () =>
+                        ComputeFlavorActionHelper.deleteCompute(dispatch, {
+                            softwareProductId,
+                            componentId,
+                            computeId: id,
+                            version
+                        })
+                }
+            })
+    };
 };
 
 const computeItemPropType = PropTypes.shape({
-	id: PropTypes.string,
-	name: PropTypes.string,
-	description: PropTypes.string
+    id: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string
 });
 
 class ComputeFlavors extends React.Component {
+    static propTypes = {
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onAddComputeClick: PropTypes.func,
+        computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
+    };
 
-	static propTypes = {
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onAddComputeClick: PropTypes.func,
-		computeFlavorsList: PropTypes.arrayOf(computeItemPropType)
-	};
+    state = {
+        localFilter: ''
+    };
 
-	state = {
-		localFilter: ''
-	};
+    render() {
+        const { localFilter } = this.state;
+        const {
+            isReadOnlyMode,
+            isManual,
+            onAddComputeClick,
+            onEditCompute,
+            onDeleteCompute
+        } = this.props;
+        return (
+            <div className="computes-list">
+                <ListEditorView
+                    title={i18n('Computes')}
+                    plusButtonTitle={i18n('Add Compute')}
+                    onAdd={
+                        isManual
+                            ? () => onAddComputeClick(isReadOnlyMode)
+                            : null
+                    }
+                    isReadOnlyMode={isReadOnlyMode}
+                    onFilter={
+                        isManual
+                            ? value => this.setState({ localFilter: value })
+                            : null
+                    }
+                    filterValue={localFilter}
+                    twoColumns>
+                    {this.filterList().map(computeItem => (
+                        <ComputeItem
+                            key={computeItem.id}
+                            computeItem={computeItem}
+                            isReadOnlyMode={isReadOnlyMode}
+                            isManual={isManual}
+                            onEditCompute={onEditCompute}
+                            onDeleteCompute={onDeleteCompute}
+                        />
+                    ))}
+                </ListEditorView>
+            </div>
+        );
+    }
 
-	render() {
-		const {localFilter} = this.state;
-		const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props;
-		return (
-			<div className='computes-list'>
-				<ListEditorView
-					title={i18n('Computes')}
-					plusButtonTitle={i18n('Add Compute')}
-					onAdd={isManual ? () => onAddComputeClick(isReadOnlyMode) : null}
-					isReadOnlyMode={isReadOnlyMode}
-					onFilter={isManual ? value => this.setState({localFilter: value}) : null}
-					filterValue={localFilter}
-					twoColumns>
-					{this.filterList().map(computeItem =>
-						<ComputeItem key={computeItem.id}
-							computeItem={computeItem} isReadOnlyMode={isReadOnlyMode} isManual={isManual}
-							onEditCompute={onEditCompute} onDeleteCompute={onDeleteCompute}/>)
-					}
-				</ListEditorView>
-			</div>
-		);
-	}
+    filterList() {
+        const { computeFlavorsList = [] } = this.props;
 
-	filterList() {
-		const {computeFlavorsList = []} = this.props;
-
-		const {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return computeFlavorsList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return computeFlavorsList;
-		}
-	}
+        const { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return computeFlavorsList.filter(
+                ({ name = '', description = '' }) => {
+                    return (
+                        escape(name).match(filter) ||
+                        escape(description).match(filter)
+                    );
+                }
+            );
+        } else {
+            return computeFlavorsList;
+        }
+    }
 }
 
-const ComputeItem = ({computeItem, isReadOnlyMode, isManual, onEditCompute, onDeleteCompute}) => {
-	const {id, name, description} = computeItem;
-	return (
-		<ListEditorItemView
-			key={'item_' + id}
-			className='list-editor-item-view'
-			isReadOnlyMode={isReadOnlyMode}
-			onSelect={() => onEditCompute({computeId: id, isReadOnlyMode})}
-			onDelete={isManual ? () => onDeleteCompute({id, name}) : null}>
-
-			<div className='list-editor-item-view-field'>
-				<div className='name'>{name}</div>
-			</div>
-			<div className='list-editor-item-view-field'>
-				<div className='description'>{description}</div>
-			</div>
-		</ListEditorItemView>
-	);
+const ComputeItem = ({
+    computeItem,
+    isReadOnlyMode,
+    isManual,
+    onEditCompute,
+    onDeleteCompute
+}) => {
+    const { id, name, description } = computeItem;
+    return (
+        <ListEditorItemView
+            key={'item_' + id}
+            className="list-editor-item-view"
+            isReadOnlyMode={isReadOnlyMode}
+            onSelect={() => onEditCompute({ computeId: id, isReadOnlyMode })}
+            onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}>
+            <div className="list-editor-item-view-field">
+                <div className="name">{name}</div>
+            </div>
+            <div className="list-editor-item-view-field">
+                <div className="description">{description}</div>
+            </div>
+        </ListEditorItemView>
+    );
 };
 
-export default connect(null, mapActionsToProps, null, {withRef: true})(ComputeFlavors);
+export default connect(null, mapActionsToProps, null, { withRef: true })(
+    ComputeFlavors
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
index 8ae9961859..c16ab5cdfe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx
@@ -19,57 +19,91 @@ 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 GuestOs = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<div>
-			<GridSection title={i18n('Guest OS')} hasLastColSet>
-				<GridItem>
-					<div className='vertical-flex'>
-						<label key='label' className='control-label'>{i18n('OS Bit Size')}</label>
-						<div className='radio-options-content-row'>
-							{qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => (
-							<Input
-								data-test-id='guestOS-bitSize'
-								type='radio'
-								key={bitSize.enum}
-								name={'compute/guestOS/bitSize'}
-								className='radio-field'
-								value={bitSize.enum}
-								label={bitSize.title}
-								onChange={(bit) => onQDataChanged({'compute/guestOS/bitSize' :  Number(bit)})}
-								isValid={qgenericFieldInfo['compute/guestOS/bitSize'].isValid}
-								errorText={qgenericFieldInfo['compute/guestOS/bitSize'].errorText}
-								checked={dataMap['compute/guestOS/bitSize'] === bitSize.enum} /> )) }
-						</div>
-					</div>
-				</GridItem>
-				<GridItem colSpan={2}/>
-				<GridItem colSpan={2}>
-					<Input
-						data-test-id='guestOS-name'
-						label={i18n('Guest OS')}
-						type='textarea'
-						onChange={(tools) => onQDataChanged({'compute/guestOS/name' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/name'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/name'].errorText}
-						value={dataMap['compute/guestOS/name']} />
-				</GridItem>
-				<GridItem colSpan={2} lastColInRow>
-					<Input
-						data-test-id='guestOS-tools'
-						type='textarea'
-						label={i18n('Guest OS Tools:')}
-						onChange={(tools) => onQDataChanged({'compute/guestOS/tools' : tools})}
-						isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid}
-						errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText}
-						value={dataMap['compute/guestOS/tools']} />
-				</GridItem>
-			</GridSection>
-
-
-		</div>
-	);
+const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <div>
+            <GridSection title={i18n('Guest OS')} hasLastColSet>
+                <GridItem>
+                    <div className="vertical-flex">
+                        <label key="label" className="control-label">
+                            {i18n('OS Bit Size')}
+                        </label>
+                        <div className="radio-options-content-row">
+                            {qgenericFieldInfo[
+                                'compute/guestOS/bitSize'
+                            ].enum.map(bitSize => (
+                                <Input
+                                    data-test-id="guestOS-bitSize"
+                                    type="radio"
+                                    key={bitSize.enum}
+                                    name={'compute/guestOS/bitSize'}
+                                    className="radio-field"
+                                    value={bitSize.enum}
+                                    label={bitSize.title}
+                                    onChange={bit =>
+                                        onQDataChanged({
+                                            'compute/guestOS/bitSize': Number(
+                                                bit
+                                            )
+                                        })
+                                    }
+                                    isValid={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].isValid
+                                    }
+                                    errorText={
+                                        qgenericFieldInfo[
+                                            'compute/guestOS/bitSize'
+                                        ].errorText
+                                    }
+                                    checked={
+                                        dataMap['compute/guestOS/bitSize'] ===
+                                        bitSize.enum
+                                    }
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </GridItem>
+                <GridItem colSpan={2} />
+                <GridItem colSpan={2}>
+                    <Input
+                        data-test-id="guestOS-name"
+                        label={i18n('Guest OS')}
+                        type="textarea"
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/name': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/name'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/name'].errorText
+                        }
+                        value={dataMap['compute/guestOS/name']}
+                    />
+                </GridItem>
+                <GridItem colSpan={2} lastColInRow>
+                    <Input
+                        data-test-id="guestOS-tools"
+                        type="textarea"
+                        label={i18n('Guest OS Tools:')}
+                        onChange={tools =>
+                            onQDataChanged({ 'compute/guestOS/tools': tools })
+                        }
+                        isValid={
+                            qgenericFieldInfo['compute/guestOS/tools'].isValid
+                        }
+                        errorText={
+                            qgenericFieldInfo['compute/guestOS/tools'].errorText
+                        }
+                        value={dataMap['compute/guestOS/tools']}
+                    />
+                </GridItem>
+            </GridSection>
+        </div>
+    );
 };
 
 export default GuestOs;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
index 967c6f7aef..5451354502 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx
@@ -20,38 +20,77 @@ 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 NumberOfVms = ({qgenericFieldInfo, dataMap, onQDataChanged, qValidateData, customValidations}) => {
-	return(
-		<GridSection titleClassName='software-product-compute-number-of-vms' title={i18n('NUMBER OF VMs')}>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-minimum'
-					type='number'
-					label={i18n('Minimum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/minimum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/maximum' : dataMap['compute/numOfVMs/maximum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/minimum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/minimum'].errorText}
-					value={dataMap['compute/numOfVMs/minimum']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-maximum'
-					type='number'
-					label={i18n('Maximum')}
-					onChange={(tools) => { onQDataChanged({'compute/numOfVMs/maximum' : tools}, customValidations);
-						qValidateData({'compute/numOfVMs/minimum' : dataMap['compute/numOfVMs/minimum']}, customValidations); } }
-					isValid={qgenericFieldInfo['compute/numOfVMs/maximum'].isValid}
-					errorText={qgenericFieldInfo['compute/numOfVMs/maximum'].errorText}
-					value={dataMap['compute/numOfVMs/maximum']} />
-			</GridItem>
-		</GridSection>
-	);
+const NumberOfVms = ({
+    qgenericFieldInfo,
+    dataMap,
+    onQDataChanged,
+    qValidateData,
+    customValidations
+}) => {
+    return (
+        <GridSection
+            titleClassName="software-product-compute-number-of-vms"
+            title={i18n('NUMBER OF VMs')}>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-minimum"
+                    type="number"
+                    label={i18n('Minimum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/minimum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/maximum':
+                                    dataMap['compute/numOfVMs/maximum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/minimum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/minimum']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-maximum"
+                    type="number"
+                    label={i18n('Maximum')}
+                    onChange={tools => {
+                        onQDataChanged(
+                            { 'compute/numOfVMs/maximum': tools },
+                            customValidations
+                        );
+                        qValidateData(
+                            {
+                                'compute/numOfVMs/minimum':
+                                    dataMap['compute/numOfVMs/minimum']
+                            },
+                            customValidations
+                        );
+                    }}
+                    isValid={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['compute/numOfVMs/maximum'].errorText
+                    }
+                    value={dataMap['compute/numOfVMs/maximum']}
+                />
+            </GridItem>
+        </GridSection>
+    );
 };
 
 NumberOfVms.propTypes = {
-	minNumberOfVMsSelectedByUser: PropTypes.number
+    minNumberOfVMsSelectedByUser: PropTypes.number
 };
 
 export default NumberOfVms;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
index 41728eefb0..58c27c6bba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js
@@ -19,14 +19,14 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const COMPUTE_FLAVOR_FORM = 'COMPUTE_FLAVOR_FORM';
 
 export const actionTypes = keyMirror({
-	ADD_COMPUTE: null,
-	COMPUTE_FLAVORS_LIST_LOADED: null,
-	COMPUTE_LIST_EDIT: null,
-	EDIT_COMPUTE_FLAVOR: null,
-	DELETE_COMPUTE: null,
-	CONFIRM_DELETE_COMPUTE: null,
-	computeEditor: {
-		LOAD_EDITOR_DATA: null,
-		CLEAR_DATA: null
-	}
+    ADD_COMPUTE: null,
+    COMPUTE_FLAVORS_LIST_LOADED: null,
+    COMPUTE_LIST_EDIT: null,
+    EDIT_COMPUTE_FLAVOR: null,
+    DELETE_COMPUTE: null,
+    CONFIRM_DELETE_COMPUTE: null,
+    computeEditor: {
+        LOAD_EDITOR_DATA: null,
+        CLEAR_DATA: null
+    }
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
index a3ba5fbc4a..06f9e8fd19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js
@@ -13,49 +13,78 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import ComputeFlavorEditorView from './ComputeFlavorEditorView.jsx';
-import {COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js';
 import ComputeFlavorActionHelper from 'sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {onboardingMethod} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { COMPONENTS_COMPUTE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { onboardingMethod } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 export const mapStateToProps = ({
-	softwareProduct: {
-		softwareProductEditor,
-		softwareProductComponents: {computeFlavor: {computeEditor = {}}}
-	},
-	currentScreen: {
-		props: {isReadOnlyMode}
-	}
+    softwareProduct: {
+        softwareProductEditor,
+        softwareProductComponents: { computeFlavor: { computeEditor = {} } }
+    },
+    currentScreen: { props: { isReadOnlyMode } }
 }) => {
-	const {data: currentSoftwareProduct = {}} = softwareProductEditor;
-	let {data , qdata, qgenericFieldInfo, dataMap, genericFieldInfo, formReady} = computeEditor;
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+    const { data: currentSoftwareProduct = {} } = softwareProductEditor;
+    let {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        formReady
+    } = computeEditor;
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	return {
-		data,
-		qdata,
-		qgenericFieldInfo,
-		dataMap,
-		genericFieldInfo,
-		isReadOnlyMode,
-		isFormValid,
-		formReady,
-		isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
-	};
+    return {
+        data,
+        qdata,
+        qgenericFieldInfo,
+        dataMap,
+        genericFieldInfo,
+        isReadOnlyMode,
+        isFormValid,
+        formReady,
+        isManual:
+            currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+    };
 };
 
-
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
-	return {
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: COMPUTE_FLAVOR_FORM}),
-		onQDataChanged: deltaData => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_COMPUTE_QUESTIONNAIRE}),
-		onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
-		onSubmit: ({data, qdata}) => ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(dispatch, {softwareProductId, componentId, data, qdata, version}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
-	};
+const mapActionsToProps = (
+    dispatch,
+    { softwareProductId, componentId, version }
+) => {
+    return {
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: COMPUTE_FLAVOR_FORM
+            }),
+        onQDataChanged: deltaData =>
+            ValidationHelper.qDataChanged(dispatch, {
+                deltaData,
+                qName: COMPONENTS_COMPUTE_QUESTIONNAIRE
+            }),
+        onCancel: () => ComputeFlavorActionHelper.closeComputeEditor(dispatch),
+        onSubmit: ({ data, qdata }) =>
+            ComputeFlavorActionHelper.saveComputeDataAndQuestionnaire(
+                dispatch,
+                {
+                    softwareProductId,
+                    componentId,
+                    data,
+                    qdata,
+                    version
+                }
+            ),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, COMPUTE_FLAVOR_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(ComputeFlavorEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    ComputeFlavorEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
index e542ce1fd1..840f722bb2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
@@ -23,75 +23,112 @@ import VmSizing from './VmSizing.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class ComputeEditorView extends React.Component {
+    static propTypes = {
+        data: PropTypes.object,
+        qdata: PropTypes.object,
+        qschema: PropTypes.object,
+        isReadOnlyMode: PropTypes.bool,
+        isManual: PropTypes.bool,
+        onDataChanged: PropTypes.func.isRequired,
+        onQDataChanged: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired
+    };
 
-	static propTypes = {
-		data: PropTypes.object,
-		qdata: PropTypes.object,
-		qschema: PropTypes.object,
-		isReadOnlyMode: PropTypes.bool,
-		isManual: PropTypes.bool,
-		onDataChanged: PropTypes.func.isRequired,
-		onQDataChanged: PropTypes.func.isRequired,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+    render() {
+        let {
+            data = {},
+            qdata = {},
+            qgenericFieldInfo,
+            dataMap,
+            genericFieldInfo,
+            isReadOnlyMode,
+            isManual,
+            isFormValid,
+            formReady,
+            onDataChanged,
+            onQDataChanged,
+            onSubmit,
+            onCancel,
+            onValidateForm
+        } = this.props;
+        const { id, name, description } = data;
+        const edittingComputeMode = Boolean(id);
 
-	render() {
-		let {data = {}, qdata = {}, qgenericFieldInfo, dataMap, genericFieldInfo, isReadOnlyMode, isManual, isFormValid, formReady,
-			onDataChanged, onQDataChanged, onSubmit, onCancel, onValidateForm} = this.props;
-		const {id, name, description} = data;
-		const edittingComputeMode = Boolean(id);
+        return (
+            <div className="vsp-component-computeFlavor-view">
+                {genericFieldInfo && (
+                    <Form
+                        ref={form => {
+                            this.form = form;
+                        }}
+                        hasButtons={true}
+                        onSubmit={() => onSubmit({ data, qdata })}
+                        onReset={() => onCancel()}
+                        labledButtons={true}
+                        isReadOnlyMode={isReadOnlyMode}
+                        isValid={isFormValid}
+                        formReady={formReady}
+                        onValidateForm={() => onValidateForm()}
+                        className="component-questionnaire-validation-form"
+                        submitButtonText={
+                            edittingComputeMode ? i18n('Save') : i18n('Create')
+                        }>
+                        <GridSection hasLostColSet>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow={!edittingComputeMode}>
+                                <Input
+                                    disabled={!isManual}
+                                    data-test-id="name"
+                                    type="text"
+                                    label={i18n('Flavor Name')}
+                                    value={name}
+                                    onChange={name => onDataChanged({ name })}
+                                    isValid={genericFieldInfo['name'].isValid}
+                                    errorText={
+                                        genericFieldInfo['name'].errorText
+                                    }
+                                    isRequired
+                                />
+                            </GridItem>
+                            <GridItem
+                                colSpan={edittingComputeMode ? 2 : 4}
+                                lastColInRow>
+                                <Input
+                                    data-test-id="description"
+                                    type="textarea"
+                                    label={i18n('Description')}
+                                    value={description}
+                                    onChange={description =>
+                                        onDataChanged({ description })
+                                    }
+                                    isValid={
+                                        genericFieldInfo['description'].isValid
+                                    }
+                                    errorText={
+                                        genericFieldInfo['description']
+                                            .errorText
+                                    }
+                                />
+                            </GridItem>
+                        </GridSection>
+                        {edittingComputeMode && (
+                            <VmSizing
+                                qgenericFieldInfo={qgenericFieldInfo}
+                                dataMap={dataMap}
+                                onQDataChanged={onQDataChanged}
+                            />
+                        )}
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-		return (
-			<div className='vsp-component-computeFlavor-view'>
-				{genericFieldInfo && <Form
-					ref={(form) => {
-						this.form = form;
-					}}
-					hasButtons={true}
-					onSubmit={ () => onSubmit({data, qdata}) }
-					onReset={ () => onCancel() }
-					labledButtons={true}
-					isReadOnlyMode={isReadOnlyMode}
-					isValid={isFormValid}
-					formReady={formReady}
-					onValidateForm={() => onValidateForm() }
-					className='component-questionnaire-validation-form'
-					submitButtonText={edittingComputeMode ? i18n('Save') : i18n('Create')}>
-					<GridSection hasLostColSet>
-						<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow={!edittingComputeMode}>
-							<Input
-								disabled={!isManual}
-								data-test-id='name'
-								type='text'
-								label={i18n('Flavor Name')}
-								value={name}
-								onChange={name => onDataChanged({name})}
-								isValid={genericFieldInfo['name'].isValid}
-								errorText={genericFieldInfo['name'].errorText}
-								isRequired/>
-							</GridItem>
-							<GridItem colSpan={edittingComputeMode ? 2 : 4} lastColInRow>
-							<Input
-								data-test-id='description'
-								type='textarea'
-								label={i18n('Description')}
-								value={description}
-								onChange={description => onDataChanged({description})}
-								isValid={genericFieldInfo['description'].isValid}
-								errorText={genericFieldInfo['description'].errorText}/>
-						</GridItem>
-					</GridSection>
-					{edittingComputeMode && <VmSizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
-				</Form>
-				}
-			</div>
-		);
-	}
-
-	save(){
-		return this.form.handleFormSubmit(new Event('dummy'));
-	}
+    save() {
+        return this.form.handleFormSubmit(new Event('dummy'));
+    }
 }
 
 export default ComputeEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
index 6c02f36c90..b691084cc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js
@@ -14,20 +14,26 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './ComputeFlavorConstants.js';
+import { actionTypes } from './ComputeFlavorConstants.js';
 
 export default (state = [], action) => {
-	switch (action.type) {
-		case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
-			return [...action.response.results];
-		case actionTypes.ADD_COMPUTE:
-			return [...state, action.compute];
-		case actionTypes.COMPUTE_LIST_EDIT:
-			const indexForEdit = state.findIndex(({id}) => id === action.compute.id);
-			return [...state.slice(0, indexForEdit), action.compute, ...state.slice(indexForEdit + 1)];
-		case actionTypes.DELETE_COMPUTE:
-			return state.filter(({id}) => id !== action.computeId);
-		default:
-			return state;
-	}
-};
\ No newline at end of file
+    switch (action.type) {
+        case actionTypes.COMPUTE_FLAVORS_LIST_LOADED:
+            return [...action.response.results];
+        case actionTypes.ADD_COMPUTE:
+            return [...state, action.compute];
+        case actionTypes.COMPUTE_LIST_EDIT:
+            const indexForEdit = state.findIndex(
+                ({ id }) => id === action.compute.id
+            );
+            return [
+                ...state.slice(0, indexForEdit),
+                action.compute,
+                ...state.slice(indexForEdit + 1)
+            ];
+        case actionTypes.DELETE_COMPUTE:
+            return state.filter(({ id }) => id !== action.computeId);
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
index a476f85a19..00d76eff23 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js
@@ -13,33 +13,32 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, COMPUTE_FLAVOR_FORM} from './ComputeFlavorConstants.js';
+import { actionTypes, COMPUTE_FLAVOR_FORM } from './ComputeFlavorConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.computeEditor.LOAD_EDITOR_DATA:
-			return {
-				...state,
-				formName: COMPUTE_FLAVOR_FORM,
-				data: action.compute,
-				formReady: null,
-				genericFieldInfo: {
-					name: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true }]
-					},
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'maxLength', data: 300}]
-					}
-				}
-			};
-		case actionTypes.computeEditor.CLEAR_DATA:
-			return {};
-		default:
-			return state;
-	}
+    switch (action.type) {
+        case actionTypes.computeEditor.LOAD_EDITOR_DATA:
+            return {
+                ...state,
+                formName: COMPUTE_FLAVOR_FORM,
+                data: action.compute,
+                formReady: null,
+                genericFieldInfo: {
+                    name: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 300 }]
+                    }
+                }
+            };
+        case actionTypes.computeEditor.CLEAR_DATA:
+            return {};
+        default:
+            return state;
+    }
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
index 54f22e0760..2f40706736 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx
@@ -18,89 +18,146 @@ 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 VmSizing = ({qgenericFieldInfo, dataMap, onQDataChanged}) => {
-	return(
-		<GridSection title={i18n('VM Sizing')} hasLastColSet>
-			<GridItem>
-				<Input
-					data-test-id='numOfCPUs'
-					type='number'
-					label={i18n('Number of CPUs')}
-					onChange={(tools) => onQDataChanged({'vmSizing/numOfCPUs' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText}
-					value={dataMap['vmSizing/numOfCPUs']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='fileSystemSizeGB'
-					type='number'
-					label={i18n('File System Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText}
-					value={dataMap['vmSizing/fileSystemSizeGB']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='persistentStorageVolumeSize'
-					type='number'
-					label={i18n('Persistent Storage/Volume Size (GB)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText}
-					value={dataMap['vmSizing/persistentStorageVolumeSize']} />
-			</GridItem>
-			<GridItem lastColInRow>
-				<Input
-					data-test-id='ioOperationsPerSec'
-					type='number'
-					label={i18n('I/O Operations (per second)')}
-					onChange={(tools) => onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})}
-					isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText}
-					value={dataMap['vmSizing/ioOperationsPerSec']} />
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-cpuOverSubscriptionRatio'
-					label={i18n('CPU Oversubscription Ratio')}
-					type='select'
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].errorText}
-					value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].enum.map(cpuOSR => <option value={cpuOSR.enum} key={cpuOSR.enum}>{cpuOSR.title}</option>)}
-				</Input>
-			</GridItem>
-			<GridItem>
-				<Input
-					data-test-id='numOfVMs-memoryRAM'
-					type='select'
-					label={i18n('Memory - RAM')}
-					groupClassName='bootstrap-input-options'
-					className='input-options-select'
-					isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
-					errorText={qgenericFieldInfo['vmSizing/memoryRAM'].errorText}
-					value={dataMap['vmSizing/memoryRAM']}
-					onChange={(e) => {
-						const selectedIndex = e.target.selectedIndex;
-						const val = e.target.options[selectedIndex].value;
-						onQDataChanged({'vmSizing/memoryRAM' : val});}
-					}>
-					<option key='placeholder' value=''>{i18n('Select...')}</option>
-					{qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => <option value={mRAM.enum} key={mRAM.enum}>{mRAM.title}</option>)}
-				</Input>
-			</GridItem>
-		</GridSection>
-	);
+const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => {
+    return (
+        <GridSection title={i18n('VM Sizing')} hasLastColSet>
+            <GridItem>
+                <Input
+                    data-test-id="numOfCPUs"
+                    type="number"
+                    label={i18n('Number of CPUs')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/numOfCPUs': tools })
+                    }
+                    isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/numOfCPUs'].errorText
+                    }
+                    value={dataMap['vmSizing/numOfCPUs']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="fileSystemSizeGB"
+                    type="number"
+                    label={i18n('File System Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText
+                    }
+                    value={dataMap['vmSizing/fileSystemSizeGB']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="persistentStorageVolumeSize"
+                    type="number"
+                    label={i18n('Persistent Storage/Volume Size (GB)')}
+                    onChange={tools =>
+                        onQDataChanged({
+                            'vmSizing/persistentStorageVolumeSize': tools
+                        })
+                    }
+                    isValid={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo[
+                            'vmSizing/persistentStorageVolumeSize'
+                        ].errorText
+                    }
+                    value={dataMap['vmSizing/persistentStorageVolumeSize']}
+                />
+            </GridItem>
+            <GridItem lastColInRow>
+                <Input
+                    data-test-id="ioOperationsPerSec"
+                    type="number"
+                    label={i18n('I/O Operations (per second)')}
+                    onChange={tools =>
+                        onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools })
+                    }
+                    isValid={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/ioOperationsPerSec']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/ioOperationsPerSec']}
+                />
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-cpuOverSubscriptionRatio"
+                    label={i18n('CPU Oversubscription Ratio')}
+                    type="select"
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .isValid
+                    }
+                    errorText={
+                        qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio']
+                            .errorText
+                    }
+                    value={dataMap['vmSizing/cpuOverSubscriptionRatio']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({
+                            'vmSizing/cpuOverSubscriptionRatio': val
+                        });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo[
+                        'vmSizing/cpuOverSubscriptionRatio'
+                    ].enum.map(cpuOSR => (
+                        <option value={cpuOSR.enum} key={cpuOSR.enum}>
+                            {cpuOSR.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+            <GridItem>
+                <Input
+                    data-test-id="numOfVMs-memoryRAM"
+                    type="select"
+                    label={i18n('Memory - RAM')}
+                    groupClassName="bootstrap-input-options"
+                    className="input-options-select"
+                    isValid={qgenericFieldInfo['vmSizing/memoryRAM'].isValid}
+                    errorText={
+                        qgenericFieldInfo['vmSizing/memoryRAM'].errorText
+                    }
+                    value={dataMap['vmSizing/memoryRAM']}
+                    onChange={e => {
+                        const selectedIndex = e.target.selectedIndex;
+                        const val = e.target.options[selectedIndex].value;
+                        onQDataChanged({ 'vmSizing/memoryRAM': val });
+                    }}>
+                    <option key="placeholder" value="">
+                        {i18n('Select...')}
+                    </option>
+                    {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => (
+                        <option value={mRAM.enum} key={mRAM.enum}>
+                            {mRAM.title}
+                        </option>
+                    ))}
+                </Input>
+            </GridItem>
+        </GridSection>
+    );
 };
 
 export default VmSizing;