aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js150
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js93
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js360
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js50
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js32
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx168
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js362
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentCompute.js74
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/SoftwareProductComponentComputeView.jsx144
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/ComputeFlavors.js218
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/GuestOs.jsx136
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/NumberOfVms.jsx97
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorConstants.js20
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditor.js99
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx169
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js36
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js53
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/VmSizing.jsx223
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js64
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx121
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js92
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx572
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js375
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js10
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js119
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js47
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx116
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js161
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js15
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx237
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx78
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx54
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx33
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx42
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js55
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx359
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js79
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js115
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js27
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js37
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx232
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js66
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js54
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js65
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx217
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js125
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js62
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx147
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js26
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js300
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js26
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js179
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx313
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Acceptable.jsx142
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/FlowLength.jsx22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/InFlowTraffic.jsx22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/IpConfig.jsx52
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx70
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx110
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/OutFlowTraffic.jsx22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx93
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx120
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Sizing.jsx41
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js263
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js27
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js86
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js78
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx17
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js83
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js34
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx110
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js59
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx450
74 files changed, 5562 insertions, 3449 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
index b13bde03c8..e59337c122 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentEditorReducer.js
@@ -13,79 +13,83 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, forms} from './SoftwareProductComponentsConstants.js';
+import { actionTypes, forms } from './SoftwareProductComponentsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.COMPONENT_CREATE_OPEN:
- return {
- ...state,
- formName: forms.CREATE_FORM,
- formReady: null,
- genericFieldInfo: {
- 'displayName' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'validateName', data: true}, {type: 'maxLength', data: 25}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- }
- }
- };
- case actionTypes.COMPONENT_LOAD:
- return {
- ...state,
- data: action.component,
- formReady: null,
- formName: forms.ALL_SPC_FORMS,
- genericFieldInfo: {
- 'displayName' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'vfcCode' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'nfcFunction' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 30}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: []
- }
- }
- };
- case actionTypes.COMPONENT_UPDATE:
- return {
- ...state,
- data: action.component
- };
- case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
- return {
- ...state,
- qdata: action.payload.qdata || state.qdata,
- qschema: action.payload.qschema || state.qschema
- };
- case actionTypes.COMPONENT_DATA_CHANGED:
- return {
- ...state,
- data: {
- ...state.data,
- ...action.deltaData
- }
- };
- case actionTypes.COMPONENT_DATA_CLEAR:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.COMPONENT_CREATE_OPEN:
+ return {
+ ...state,
+ formName: forms.CREATE_FORM,
+ formReady: null,
+ genericFieldInfo: {
+ displayName: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'validateName', data: true },
+ { type: 'maxLength', data: 25 }
+ ]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ }
+ }
+ };
+ case actionTypes.COMPONENT_LOAD:
+ return {
+ ...state,
+ data: action.component,
+ formReady: null,
+ formName: forms.ALL_SPC_FORMS,
+ genericFieldInfo: {
+ displayName: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ vfcCode: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ nfcFunction: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 30 }]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ }
+ };
+ case actionTypes.COMPONENT_UPDATE:
+ return {
+ ...state,
+ data: action.component
+ };
+ case actionTypes.COMPONENT_QUESTIONNAIRE_UPDATE:
+ return {
+ ...state,
+ qdata: action.payload.qdata || state.qdata,
+ qschema: action.payload.qschema || state.qschema
+ };
+ case actionTypes.COMPONENT_DATA_CHANGED:
+ return {
+ ...state,
+ data: {
+ ...state.data,
+ ...action.deltaData
+ }
+ };
+ case actionTypes.COMPONENT_DATA_CLEAR:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
index f74b2fe2fb..bffa9f7d25 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
@@ -1,50 +1,71 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SoftwareProductComponentsActionHelper from '../components/SoftwareProductComponentsActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} from '../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../SoftwareProductConstants.js';
import ConfirmationModalConstants from 'nfvo-components/modal/GlobalModalConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import SoftwareProductComponentsView from './SoftwareProductComponentsListView.jsx';
import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-const generateMessage = (name) => {
- return i18n('Are you sure you want to delete {name}?', {name: name});
+const generateMessage = name => {
+ return i18n('Are you sure you want to delete {name}?', { name: name });
};
-const mapStateToProps = ({softwareProduct, currentScreen: {props: {version}}}) => {
- let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
- let {componentsList} = softwareProductComponents;
- let {onboardingMethod = onboardingMethodTypes.HEAT} = currentSoftwareProduct;
- return {
- currentSoftwareProduct,
- componentsList,
- isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
- version
- };
+const mapStateToProps = ({
+ softwareProduct,
+ currentScreen: { props: { version } }
+}) => {
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductComponents
+ } = softwareProduct;
+ let { componentsList } = softwareProductComponents;
+ let {
+ onboardingMethod = onboardingMethodTypes.HEAT
+ } = currentSoftwareProduct;
+ return {
+ currentSoftwareProduct,
+ componentsList,
+ isManual: onboardingMethod === onboardingMethodTypes.MANUAL,
+ version
+ };
};
-const mapActionToProps = (dispatch) => {
- return {
- onComponentSelect: ({id: softwareProductId, componentId, version}) =>
- ScreensHelper.loadScreen(dispatch, {
- screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version, componentId}
- }),
- onAddComponent: (softwareProductId, version) => SoftwareProductActionHelper.addComponent(dispatch, {softwareProductId, version, modalClassName: 'create-vfc-modal'}),
- onDeleteComponent: (component, softwareProductId, version) => dispatch({
- type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING,
- data:{
- msg: generateMessage(component.displayName),
- onConfirmed: ()=>SoftwareProductComponentsActionHelper.deleteComponent(dispatch, {
- softwareProductId,
- componentId: component.id,
- version
- })
- }
- })
- };
+const mapActionToProps = dispatch => {
+ return {
+ onComponentSelect: ({ id: softwareProductId, componentId, version }) =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version, componentId }
+ }),
+ onAddComponent: (softwareProductId, version) =>
+ SoftwareProductActionHelper.addComponent(dispatch, {
+ softwareProductId,
+ version,
+ modalClassName: 'create-vfc-modal'
+ }),
+ onDeleteComponent: (component, softwareProductId, version) =>
+ dispatch({
+ type: ConfirmationModalConstants.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: generateMessage(component.displayName),
+ onConfirmed: () =>
+ SoftwareProductComponentsActionHelper.deleteComponent(
+ dispatch,
+ {
+ softwareProductId,
+ componentId: component.id,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductComponentsView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
index cf63ad79d0..73a971ccbb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js
@@ -16,157 +16,265 @@
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, COMPONENTS_QUESTIONNAIRE} from './SoftwareProductComponentsConstants.js';
+import {
+ actionTypes,
+ COMPONENTS_QUESTIONNAIRE
+} from './SoftwareProductComponentsConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
function baseUrl(softwareProductId, version) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components`;
}
function fetchSoftwareProductComponents(softwareProductId, version) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
-function putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, vspComponent) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`, vspComponent);
+function putSoftwareProductComponentQuestionnaire(
+ softwareProductId,
+ version,
+ vspComponentId,
+ vspComponent
+) {
+ return RestAPIUtil.put(
+ `${baseUrl(
+ softwareProductId,
+ version
+ )}/${vspComponentId}/questionnaire`,
+ vspComponent
+ );
}
-function fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId){
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`);
+function fetchSoftwareProductComponentQuestionnaire(
+ softwareProductId,
+ version,
+ vspComponentId
+) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version)}/${vspComponentId}/questionnaire`
+ );
}
-function fetchSoftwareProductComponent(softwareProductId, version, vspComponentId){
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${vspComponentId}`);
+function fetchSoftwareProductComponent(
+ softwareProductId,
+ version,
+ vspComponentId
+) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version)}/${vspComponentId}`
+ );
}
-function putSoftwareProductComponent(softwareProductId, version, vspComponentId, vspComponent) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${vspComponentId}`, {
- name: vspComponent.name,
- displayName: vspComponent.displayName,
- vfcCode: vspComponent.vfcCode,
- nfcFunction: vspComponent.nfcFunction,
- description: vspComponent.description
- });
+function putSoftwareProductComponent(
+ softwareProductId,
+ version,
+ vspComponentId,
+ vspComponent
+) {
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version)}/${vspComponentId}`,
+ {
+ name: vspComponent.name,
+ displayName: vspComponent.displayName,
+ vfcCode: vspComponent.vfcCode,
+ nfcFunction: vspComponent.nfcFunction,
+ description: vspComponent.description
+ }
+ );
}
-function deleteSoftwareProductComponent(softwareProductId, componentId, version) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${componentId}`,);
+function deleteSoftwareProductComponent(
+ softwareProductId,
+ componentId,
+ version
+) {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version)}/${componentId}`
+ );
}
+function postSoftwareProductComponent(
+ softwareProductId,
+ vspComponent,
+ version
+) {
+ return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+ name: vspComponent.displayName,
+ displayName: vspComponent.displayName,
+ description: vspComponent.description
+ });
+}
-function postSoftwareProductComponent(softwareProductId, vspComponent, version) {
+const SoftwareProductComponentsActionHelper = {
+ fetchSoftwareProductComponents(dispatch, { softwareProductId, version }) {
+ return fetchSoftwareProductComponents(softwareProductId, version).then(
+ response => {
+ dispatch({
+ type: actionTypes.COMPONENTS_LIST_UPDATE,
+ componentsList: response.results
+ });
+ return response;
+ }
+ );
+ },
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
- name: vspComponent.displayName,
- displayName: vspComponent.displayName,
- description: vspComponent.description
- });
-}
+ updateSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, version, vspComponentId, componentData, qdata }
+ ) {
+ return Promise.all([
+ SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ { softwareProductId, version, vspComponentId, qdata }
+ ),
+ SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(
+ dispatch,
+ { softwareProductId, version, vspComponentId, componentData }
+ )
+ ]);
+ },
+ updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ { softwareProductId, version, vspComponentId, qdata }
+ ) {
+ return putSoftwareProductComponentQuestionnaire(
+ softwareProductId,
+ version,
+ vspComponentId,
+ qdata
+ );
+ },
-const SoftwareProductComponentsActionHelper = {
- fetchSoftwareProductComponents(dispatch, {softwareProductId, version}) {
- return fetchSoftwareProductComponents(softwareProductId, version).then(response => {
- dispatch({
- type: actionTypes.COMPONENTS_LIST_UPDATE,
- componentsList: response.results
- });
- return response;
- });
- },
-
- updateSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId, componentData, qdata}) {
- return Promise.all([
- SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}),
- SoftwareProductComponentsActionHelper.updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData})
- ]);
- },
-
- updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId, qdata}) {
- return putSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId, qdata);
- },
-
- updateSoftwareProductComponentData(dispatch, {softwareProductId, version, vspComponentId, componentData}) {
- return putSoftwareProductComponent(softwareProductId, version, vspComponentId, componentData).then(() => dispatch({
- type: actionTypes.COMPONENTS_LIST_EDIT,
- component: {
- id: vspComponentId,
- ...componentData
- }
- }));
- },
-
- fetchSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId}) {
- return fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
- ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
- qschema: JSON.parse(response.schema)}});
- });
- },
-
- fetchSoftwareProductComponent(dispatch, {softwareProductId, version, vspComponentId}) {
- return Promise.all([
- fetchSoftwareProductComponent(softwareProductId, version, vspComponentId).then(response => {
- dispatch({
- type: actionTypes.COMPONENT_LOAD,
- component: response.data
- });
- return response;
- }),
- fetchSoftwareProductComponentQuestionnaire(softwareProductId, version, vspComponentId).then(response => {
- ValidationHelper.qDataLoaded(dispatch, {qName: COMPONENTS_QUESTIONNAIRE, response: {qdata: response.data ? JSON.parse(response.data) : {},
- qschema: JSON.parse(response.schema)}});
- })
- ]);
- },
-
-
- clearComponentsStore(dispatch) {
- dispatch({
- type: actionTypes.COMPONENTS_LIST_UPDATE,
- componentsList: []
- });
- },
-
- createSoftwareProductComponent(dispatch,{softwareProductId, componentData, version}) {
- SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch);
- /* for mock only */
-
- dispatch({
- type: actionTypes.COMPONENTS_LIST_UPDATE,
- componentsList: [{id: '123', ...componentData}]
- });
-
- postSoftwareProductComponent(softwareProductId, componentData, version).then(() => {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
- });
- },
-
- clearComponentCreationData(dispatch) {
- dispatch({
- type: actionTypes.COMPONENT_DATA_CLEAR
- });
- },
-
- closeComponentCreationModal(dispatch) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
- },
-
- deleteComponent(dispatch, {softwareProductId, componentId, version}) {
- deleteSoftwareProductComponent(softwareProductId, componentId, version);
- dispatch({
- type: actionTypes.COMPONENT_DELETE,
- componentId: componentId
- });
- },
+ updateSoftwareProductComponentData(
+ dispatch,
+ { softwareProductId, version, vspComponentId, componentData }
+ ) {
+ return putSoftwareProductComponent(
+ softwareProductId,
+ version,
+ vspComponentId,
+ componentData
+ ).then(() =>
+ dispatch({
+ type: actionTypes.COMPONENTS_LIST_EDIT,
+ component: {
+ id: vspComponentId,
+ ...componentData
+ }
+ })
+ );
+ },
+
+ fetchSoftwareProductComponentQuestionnaire(
+ dispatch,
+ { softwareProductId, version, vspComponentId }
+ ) {
+ return fetchSoftwareProductComponentQuestionnaire(
+ softwareProductId,
+ version,
+ vspComponentId
+ ).then(response => {
+ ValidationHelper.qDataLoaded(dispatch, {
+ qName: COMPONENTS_QUESTIONNAIRE,
+ response: {
+ qdata: response.data ? JSON.parse(response.data) : {},
+ qschema: JSON.parse(response.schema)
+ }
+ });
+ });
+ },
+
+ fetchSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, version, vspComponentId }
+ ) {
+ return Promise.all([
+ fetchSoftwareProductComponent(
+ softwareProductId,
+ version,
+ vspComponentId
+ ).then(response => {
+ dispatch({
+ type: actionTypes.COMPONENT_LOAD,
+ component: response.data
+ });
+ return response;
+ }),
+ fetchSoftwareProductComponentQuestionnaire(
+ softwareProductId,
+ version,
+ vspComponentId
+ ).then(response => {
+ ValidationHelper.qDataLoaded(dispatch, {
+ qName: COMPONENTS_QUESTIONNAIRE,
+ response: {
+ qdata: response.data ? JSON.parse(response.data) : {},
+ qschema: JSON.parse(response.schema)
+ }
+ });
+ })
+ ]);
+ },
+
+ clearComponentsStore(dispatch) {
+ dispatch({
+ type: actionTypes.COMPONENTS_LIST_UPDATE,
+ componentsList: []
+ });
+ },
+
+ createSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, componentData, version }
+ ) {
+ SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+ dispatch
+ );
+ /* for mock only */
+
+ dispatch({
+ type: actionTypes.COMPONENTS_LIST_UPDATE,
+ componentsList: [{ id: '123', ...componentData }]
+ });
+
+ postSoftwareProductComponent(
+ softwareProductId,
+ componentData,
+ version
+ ).then(() => {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version }
+ );
+ });
+ },
+ clearComponentCreationData(dispatch) {
+ dispatch({
+ type: actionTypes.COMPONENT_DATA_CLEAR
+ });
+ },
+ closeComponentCreationModal(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ SoftwareProductComponentsActionHelper.clearComponentCreationData(
+ dispatch
+ );
+ },
+ deleteComponent(dispatch, { softwareProductId, componentId, version }) {
+ deleteSoftwareProductComponent(softwareProductId, componentId, version);
+ dispatch({
+ type: actionTypes.COMPONENT_DELETE,
+ componentId: componentId
+ });
+ }
};
export default SoftwareProductComponentsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
index 35633b65cf..cc120d359a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js
@@ -16,40 +16,40 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- COMPONENTS_LIST_UPDATE: null,
- COMPONENTS_LIST_EDIT: null,
- COMPONENT_UPDATE: null,
- COMPONENT_DATA_CHANGED: null,
- COMPONENT_DATA_CLEAR: null,
- COMPONENT_QUESTIONNAIRE_UPDATE: null,
- COMPONENT_DELETE: null,
- COMPONENT_LOAD: null,
- COMPONENT_CREATE_OPEN: null
+ COMPONENTS_LIST_UPDATE: null,
+ COMPONENTS_LIST_EDIT: null,
+ COMPONENT_UPDATE: null,
+ COMPONENT_DATA_CHANGED: null,
+ COMPONENT_DATA_CLEAR: null,
+ COMPONENT_QUESTIONNAIRE_UPDATE: null,
+ COMPONENT_DELETE: null,
+ COMPONENT_LOAD: null,
+ COMPONENT_CREATE_OPEN: null
});
-export const storageConstants = keyMirror({
- backupType: {
- ON_SITE: 'OnSite',
- OFF_SITE: 'OffSite'
- }
+export const storageConstants = keyMirror({
+ backupType: {
+ ON_SITE: 'OnSite',
+ OFF_SITE: 'OffSite'
+ }
});
export const forms = keyMirror({
- ALL_SPC_FORMS: null,
- NIC_EDIT_FORM: null,
- CREATE_FORM: null,
- IMAGE_EDIT_FORM: null
+ ALL_SPC_FORMS: null,
+ NIC_EDIT_FORM: null,
+ CREATE_FORM: null,
+ IMAGE_EDIT_FORM: null
});
export const COMPONENTS_QUESTIONNAIRE = 'component';
export const COMPONENTS_COMPUTE_QUESTIONNAIRE = 'compute';
export const navigationItems = keyMirror({
- STORAGE: 'Storage',
- PROCESS_DETAILS: 'Process Details',
- MONITORING: 'Monitoring',
- NETWORK: 'Network',
- IMAGES: 'Images',
- COMPUTE: 'Compute',
- LOAD_BALANCING: 'High Availability & Load Balancing'
+ STORAGE: 'Storage',
+ PROCESS_DETAILS: 'Process Details',
+ MONITORING: 'Monitoring',
+ NETWORK: 'Network',
+ IMAGES: 'Images',
+ COMPUTE: 'Compute',
+ LOAD_BALANCING: 'High Availability & Load Balancing'
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
index 92211e0fd2..e1cf5f4fc3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListReducer.js
@@ -13,18 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.COMPONENTS_LIST_UPDATE:
- return [...action.componentsList];
- case actionTypes.COMPONENTS_LIST_EDIT:
- const indexForEdit = state.findIndex(component => component.id === action.component.id);
- return [...state.slice(0, indexForEdit), action.component, ...state.slice(indexForEdit + 1)];
- case actionTypes.COMPONENT_DELETE:
- return state.filter(component => component.id !== action.componentId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.COMPONENTS_LIST_UPDATE:
+ return [...action.componentsList];
+ case actionTypes.COMPONENTS_LIST_EDIT:
+ const indexForEdit = state.findIndex(
+ component => component.id === action.component.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.component,
+ ...state.slice(indexForEdit + 1)
+ ];
+ case actionTypes.COMPONENT_DELETE:
+ return state.filter(
+ component => component.id !== action.componentId
+ );
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
index 0bf32df1a3..fc8abf6ff6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsListView.jsx
@@ -22,85 +22,113 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
const ComponentPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- displayName: PropTypes.string,
- description: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ displayName: PropTypes.string,
+ description: PropTypes.string
});
class SoftwareProductComponentsListView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
+ static propTypes = {
+ isReadOnlyMode: PropTypes.bool,
+ componentsList: PropTypes.arrayOf(ComponentPropType),
+ onComponentSelect: PropTypes.func
+ };
- static propTypes = {
- isReadOnlyMode: PropTypes.bool,
- componentsList: PropTypes.arrayOf(ComponentPropType),
- onComponentSelect: PropTypes.func
- };
+ render() {
+ let { componentsList = [], isManual } = this.props;
+ return (
+ <div className="">
+ {(componentsList.length > 0 || isManual) &&
+ this.renderComponents()}
+ </div>
+ );
+ }
- render() {
- let {componentsList = [], isManual} = this.props;
- return (
- <div className=''>
- {
- (componentsList.length > 0 || isManual) && this.renderComponents()
- }
- </div>
- );
- }
+ renderComponents() {
+ const { localFilter } = this.state;
+ const {
+ isManual,
+ onAddComponent,
+ isReadOnlyMode,
+ version,
+ currentSoftwareProduct: { id: softwareProductId },
+ componentsList
+ } = this.props;
+ return (
+ <ListEditorView
+ title={i18n('Virtual Function Components')}
+ filterValue={localFilter}
+ placeholder={i18n('Filter Components')}
+ onFilter={value => this.setState({ localFilter: value })}
+ isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
+ plusButtonTitle={i18n('Add Component')}
+ onAdd={
+ isManual && componentsList.length === 0
+ ? () => onAddComponent(softwareProductId, version)
+ : false
+ }
+ twoColumns>
+ {this.filterList().map(component =>
+ this.renderComponentsListItem(component)
+ )}
+ </ListEditorView>
+ );
+ }
- renderComponents() {
- const {localFilter} = this.state;
- const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props;
- return (
- <ListEditorView
- title={i18n('Virtual Function Components')}
- filterValue={localFilter}
- placeholder={i18n('Filter Components')}
- onFilter={value => this.setState({localFilter: value})}
- isReadOnlyMode={isReadOnlyMode || !!this.filterList().length}
- plusButtonTitle={i18n('Add Component')}
- onAdd={isManual && componentsList.length === 0 ? () => onAddComponent(softwareProductId, version) : false}
- twoColumns>
- {this.filterList().map(component => this.renderComponentsListItem(component))}
- </ListEditorView>
- );
- }
+ renderComponentsListItem(component) {
+ let {
+ id: componentId,
+ name,
+ displayName,
+ description = ''
+ } = component;
+ let {
+ currentSoftwareProduct: { id },
+ onComponentSelect,
+ version
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={
+ name + Math.floor(Math.random() * (100 - 1) + 1).toString()
+ }
+ className="list-editor-item-view"
+ onSelect={() =>
+ onComponentSelect({ id, componentId, version })
+ }>
+ <ListEditorItemViewField>
+ <div className="name">{displayName}</div>
+ </ListEditorItemViewField>
+ <ListEditorItemViewField>
+ <div className="description">{description}</div>
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ );
+ }
- renderComponentsListItem(component) {
- let {id: componentId, name, displayName, description = ''} = component;
- let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props;
- return (
- <ListEditorItemView
- key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
- className='list-editor-item-view'
- onSelect={() => onComponentSelect({id, componentId, version})}>
- <ListEditorItemViewField>
- <div className='name'>{displayName}</div>
- </ListEditorItemViewField>
- <ListEditorItemViewField>
- <div className='description'>{description}</div>
- </ListEditorItemViewField>
- </ListEditorItemView>
- );
- }
+ filterList() {
+ let { componentsList = [] } = this.props;
- filterList() {
- let {componentsList = []} = this.props;
-
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return componentsList.filter(({displayName = '', description = ''}) => {
- return escape(displayName).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return componentsList;
- }
- }
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return componentsList.filter(
+ ({ displayName = '', description = '' }) => {
+ return (
+ escape(displayName).match(filter) ||
+ escape(description).match(filter)
+ );
+ }
+ );
+ } else {
+ return componentsList;
+ }
+ }
}
export default SoftwareProductComponentsListView;
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
index 9f59cd5b27..d831765674 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreation.js
@@ -14,36 +14,50 @@
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import SoftwareProductComponentCreationView from './SoftwareProductComponentCreationView.jsx';
import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductComponents: {componentEditor: {data, genericFieldInfo, formReady}}} = softwareProduct;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- return {
- data,
- genericFieldInfo,
- formReady,
- isFormValid
- };
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductComponents: {
+ componentEditor: { data, genericFieldInfo, formReady }
+ }
+ } = softwareProduct;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ return {
+ data,
+ genericFieldInfo,
+ formReady,
+ isFormValid
+ };
};
-
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.CREATE_FORM}),
- //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
- onSubmit: (componentData) => {
- return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(dispatch,
- {softwareProductId, componentData, version});
- },
- onCancel: () => SoftwareProductComponentsActionHelper.closeComponentCreationModal(dispatch),
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
-
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: forms.CREATE_FORM
+ }),
+ //onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
+ onSubmit: componentData => {
+ return SoftwareProductComponentsActionHelper.createSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, componentData, version }
+ );
+ },
+ onCancel: () =>
+ SoftwareProductComponentsActionHelper.closeComponentCreationModal(
+ dispatch
+ ),
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductComponentCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
index 42804ce5a6..0b33b4017f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
@@ -21,59 +21,80 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
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';
-import {forms} from '../SoftwareProductComponentsConstants.js';
+import { forms } from '../SoftwareProductComponentsConstants.js';
class ComponentCreationView extends React.Component {
- render() {
- let {data = {}, onDataChanged, onCancel, genericFieldInfo} = this.props;
- let {displayName, description} = data;
- return(
- <div>
- {
- genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- submitButtonText={i18n('Create')}
- labledButtons={true}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(forms.CREATE_FORM) }
- className='entitlement-pools-form'>
- <GridSection hasLastColSet>
- <GridItem colSpan={4} lastColInRow>
- <Input
- data-test-id='name'
- onChange={displayName => onDataChanged({displayName})}
- label={i18n('Name')}
- isRequired={true}
- isValid={genericFieldInfo.displayName.isValid}
- errorText={genericFieldInfo.displayName.errorText}
- value={displayName}
- type='text'/>
- </GridItem>
- <GridItem colSpan={4} lastColInRow>
- <Input
- label={i18n('Description')}
- onChange={description => onDataChanged({description})}
- value={description}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- data-test-id='description'
- type='textarea'/>
- </GridItem>
- </GridSection>
- </Form>
- }
- </div>
- );
- }
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ onCancel,
+ genericFieldInfo
+ } = this.props;
+ let { displayName, description } = data;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ submitButtonText={i18n('Create')}
+ labledButtons={true}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(forms.CREATE_FORM)
+ }
+ className="entitlement-pools-form">
+ <GridSection hasLastColSet>
+ <GridItem colSpan={4} lastColInRow>
+ <Input
+ data-test-id="name"
+ onChange={displayName =>
+ onDataChanged({ displayName })
+ }
+ label={i18n('Name')}
+ isRequired={true}
+ isValid={
+ genericFieldInfo.displayName.isValid
+ }
+ errorText={
+ genericFieldInfo.displayName.errorText
+ }
+ value={displayName}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={4} lastColInRow>
+ <Input
+ label={i18n('Description')}
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ value={description}
+ isValid={
+ genericFieldInfo.description.isValid
+ }
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ data-test-id="description"
+ type="textarea"
+ />
+ </GridItem>
+ </GridSection>
+ </Form>
+ )}
+ </div>
+ );
+ }
- submit() {
- const {onSubmit, data} = this.props;
- onSubmit(data);
- }
+ submit() {
+ const { onSubmit, data } = this.props;
+ onSubmit(data);
+ }
}
export default ComponentCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
index 8c06fd0ab8..f3f64e4b20 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
@@ -13,41 +13,79 @@
* 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 SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
-import {onboardingMethod} from '../../SoftwareProductConstants.js';
+import {
+ forms,
+ COMPONENTS_QUESTIONNAIRE
+} from '../SoftwareProductComponentsConstants.js';
+import { onboardingMethod } from '../../SoftwareProductConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
- let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: { data: currentVSP },
+ softwareProductComponents
+ } = softwareProduct;
+ let {
+ componentEditor: {
+ data: componentData = {},
+ qdata,
+ qgenericFieldInfo: qGenericFieldInfo,
+ dataMap,
+ genericFieldInfo
+ }
+ } = softwareProductComponents;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- return {
- componentData,
- qdata,
- isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
- genericFieldInfo,
- qGenericFieldInfo,
- dataMap,
- isFormValid
- };
+ return {
+ componentData,
+ qdata,
+ isManual: currentVSP.onboardingMethod === onboardingMethod.MANUAL,
+ genericFieldInfo,
+ qGenericFieldInfo,
+ dataMap,
+ isFormValid
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
- onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
- {softwareProductId, version, vspComponentId: componentId, componentData, qdata});
- },
- onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData})
- };
-
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, version, componentId }
+) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: forms.ALL_SPC_FORMS
+ }),
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: COMPONENTS_QUESTIONNAIRE
+ }),
+ onSubmit: ({ componentData, qdata }) => {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ componentData,
+ qdata
+ }
+ );
+ },
+ onValidityChanged: isValidityData =>
+ SoftwareProductActionHelper.setIsValidityData(dispatch, {
+ isValidityData
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsGeneralView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsGeneralView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
index 6aa51d1609..ad1fcaacff 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
@@ -21,9 +21,18 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => (
- <GridSection title={i18n('General')}>
- {/* disabled until backend will be ready to implement it
+const GeneralSection = ({
+ onDataChanged,
+ displayName,
+ vfcCode,
+ nfcFunction,
+ description,
+ isReadOnlyMode,
+ genericFieldInfo,
+ isManual
+}) => (
+ <GridSection title={i18n('General')}>
+ {/* disabled until backend will be ready to implement it
<div className='validation-input-wrapper'>
<div className='form-group'>
<label className='control-label'>{i18n('Name')}</label>
@@ -32,156 +41,248 @@ const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, descr
</div>
*/}
- <GridItem>
- <Input
- data-test-id='name'
- label={i18n('Name')}
- value={displayName}
- disabled={!isManual || isReadOnlyMode}
- type='text'/>
- {!isManual && <Input
- data-test-id='vfcCode'
- label={i18n('Naming Code')}
- value={vfcCode}
- isValid={genericFieldInfo.vfcCode.isValid}
- errorText={genericFieldInfo.vfcCode.errorText}
- onChange={vfcCode => onDataChanged({vfcCode})}
- disabled={isReadOnlyMode}
- type='text'/> }
- <Input
- data-test-id='nfcFunction'
- label={i18n('Function')}
- value={nfcFunction}
- isValid={genericFieldInfo.nfcFunction.isValid}
- errorText={genericFieldInfo.nfcFunction.errorText}
- onChange={nfcFunction => onDataChanged({nfcFunction})}
- disabled={isReadOnlyMode}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- label={i18n('Description')}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- onChange={description => onDataChanged({description})}
- disabled={isReadOnlyMode}
- value={description}
- groupClassName='multi-line-textarea'
- data-test-id='description'
- type='textarea'/>
- </GridItem>
- <GridItem />
- </GridSection>
+ <GridItem>
+ <Input
+ data-test-id="name"
+ label={i18n('Name')}
+ value={displayName}
+ disabled={!isManual || isReadOnlyMode}
+ type="text"
+ />
+ {!isManual && (
+ <Input
+ data-test-id="vfcCode"
+ label={i18n('Naming Code')}
+ value={vfcCode}
+ isValid={genericFieldInfo.vfcCode.isValid}
+ errorText={genericFieldInfo.vfcCode.errorText}
+ onChange={vfcCode => onDataChanged({ vfcCode })}
+ disabled={isReadOnlyMode}
+ type="text"
+ />
+ )}
+ <Input
+ data-test-id="nfcFunction"
+ label={i18n('Function')}
+ value={nfcFunction}
+ isValid={genericFieldInfo.nfcFunction.isValid}
+ errorText={genericFieldInfo.nfcFunction.errorText}
+ onChange={nfcFunction => onDataChanged({ nfcFunction })}
+ disabled={isReadOnlyMode}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ label={i18n('Description')}
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ onChange={description => onDataChanged({ description })}
+ disabled={isReadOnlyMode}
+ value={description}
+ groupClassName="multi-line-textarea"
+ data-test-id="description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem />
+ </GridSection>
);
-const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Hypervisor')}>
- <GridItem>
- <Input
- data-test-id='hypervisor'
- label={i18n('Supported Hypervisors')}
- type='select'
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
- errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
- value={dataMap['general/hypervisor/hypervisor']}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({'general/hypervisor/hypervisor' : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
- </Input>
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- data-test-id='drivers'
- onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
- label={i18n('Hypervisor Drivers')}
- type='text'
- isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
- errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
- value={dataMap['general/hypervisor/drivers']}/>
- </GridItem>
- <GridItem colSpan={3}>
- <Input
- data-test-id='containerFeaturesDescription'
- label={i18n('Describe Container Features')}
- type='textarea'
- onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
- isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
- errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
- value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
- </GridItem>
- </GridSection>
+const HypervisorSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+ <GridSection title={i18n('Hypervisor')}>
+ <GridItem>
+ <Input
+ data-test-id="hypervisor"
+ label={i18n('Supported Hypervisors')}
+ type="select"
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ isValid={
+ qgenericFieldInfo['general/hypervisor/hypervisor'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/hypervisor/hypervisor'].errorText
+ }
+ value={dataMap['general/hypervisor/hypervisor']}
+ onChange={e => {
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onQDataChanged({ 'general/hypervisor/hypervisor': val });
+ }}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(
+ hv => (
+ <option value={hv.enum} key={hv.enum}>
+ {hv.title}
+ </option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="drivers"
+ onChange={driver =>
+ onQDataChanged({ 'general/hypervisor/drivers': driver })
+ }
+ label={i18n('Hypervisor Drivers')}
+ type="text"
+ isValid={
+ qgenericFieldInfo['general/hypervisor/drivers'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/hypervisor/drivers'].errorText
+ }
+ value={dataMap['general/hypervisor/drivers']}
+ />
+ </GridItem>
+ <GridItem colSpan={3}>
+ <Input
+ data-test-id="containerFeaturesDescription"
+ label={i18n('Describe Container Features')}
+ type="textarea"
+ onChange={containerFeaturesDescription =>
+ onQDataChanged({
+ 'general/hypervisor/containerFeaturesDescription': containerFeaturesDescription
+ })
+ }
+ isValid={
+ qgenericFieldInfo[
+ 'general/hypervisor/containerFeaturesDescription'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'general/hypervisor/containerFeaturesDescription'
+ ].errorText
+ }
+ value={
+ dataMap['general/hypervisor/containerFeaturesDescription']
+ }
+ />
+ </GridItem>
+ </GridSection>
);
-const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Disk')}>
- <GridItem>
- <Input
- data-test-id='bootDiskSizePerVM'
- onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})}
- label={i18n('Size of boot disk per VM (GB)')}
- type='number'
- isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid}
- errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText}
- value={dataMap['general/disk/bootDiskSizePerVM']}/>
- </GridItem>
- <GridItem>
- <Input
- data-test-id='ephemeralDiskSizePerVM'
- onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
- label={i18n('Size of ephemeral disk per VM (GB)')}
- type='number'
- isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid}
- errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText}
- value={dataMap['general/disk/ephemeralDiskSizePerVM']}/>
- </GridItem>
- </GridSection>
+const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+ <GridSection title={i18n('Disk')}>
+ <GridItem>
+ <Input
+ data-test-id="bootDiskSizePerVM"
+ onChange={bootDiskSizePerVM =>
+ onQDataChanged({
+ 'general/disk/bootDiskSizePerVM': bootDiskSizePerVM
+ })
+ }
+ label={i18n('Size of boot disk per VM (GB)')}
+ type="number"
+ isValid={
+ qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/disk/bootDiskSizePerVM']
+ .errorText
+ }
+ value={dataMap['general/disk/bootDiskSizePerVM']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="ephemeralDiskSizePerVM"
+ onChange={ephemeralDiskSizePerVM =>
+ onQDataChanged({
+ 'general/disk/ephemeralDiskSizePerVM': ephemeralDiskSizePerVM
+ })
+ }
+ label={i18n('Size of ephemeral disk per VM (GB)')}
+ type="number"
+ isValid={
+ qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM']
+ .errorText
+ }
+ value={dataMap['general/disk/ephemeralDiskSizePerVM']}
+ />
+ </GridItem>
+ </GridSection>
);
-const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Recovery')}>
- <GridItem>
- <Input
- data-test-id='pointObjective'
- label={i18n('VM Recovery Point Objective (Minutes)')}
- type='number'
- onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
- isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
- errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
- value={dataMap['general/recovery/pointObjective']}/>
- </GridItem>
- <GridItem>
- <Input
- data-test-id='timeObjective'
- label={i18n('VM Recovery Time Objective (Minutes)')}
- type='number'
- onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
- isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
- errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
- value={dataMap['general/recovery/timeObjective']}/>
- <div className='empty-two-col' />
- </GridItem>
- <GridItem colSpan={2} />
- <GridItem colSpan={2}>
- <Input
- data-test-id='vmProcessFailuresHandling'
- className='textarea'
- label={i18n('How are in VM process failures handled?')}
- type='textarea'
- onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
- isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
- errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
- value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
- <div className='empty-two-col' />
-
- </GridItem>
- {
- /** disabled until backend will be ready to implement it
+const RecoverySection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+ <GridSection title={i18n('Recovery')}>
+ <GridItem>
+ <Input
+ data-test-id="pointObjective"
+ label={i18n('VM Recovery Point Objective (Minutes)')}
+ type="number"
+ onChange={pointObjective =>
+ onQDataChanged({
+ 'general/recovery/pointObjective': pointObjective
+ })
+ }
+ isValid={
+ qgenericFieldInfo['general/recovery/pointObjective'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/recovery/pointObjective']
+ .errorText
+ }
+ value={dataMap['general/recovery/pointObjective']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="timeObjective"
+ label={i18n('VM Recovery Time Objective (Minutes)')}
+ type="number"
+ onChange={timeObjective =>
+ onQDataChanged({
+ 'general/recovery/timeObjective': timeObjective
+ })
+ }
+ isValid={
+ qgenericFieldInfo['general/recovery/timeObjective'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['general/recovery/timeObjective']
+ .errorText
+ }
+ value={dataMap['general/recovery/timeObjective']}
+ />
+ <div className="empty-two-col" />
+ </GridItem>
+ <GridItem colSpan={2} />
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="vmProcessFailuresHandling"
+ className="textarea"
+ label={i18n('How are in VM process failures handled?')}
+ type="textarea"
+ onChange={vmProcessFailuresHandling =>
+ onQDataChanged({
+ 'general/recovery/vmProcessFailuresHandling': vmProcessFailuresHandling
+ })
+ }
+ isValid={
+ qgenericFieldInfo[
+ 'general/recovery/vmProcessFailuresHandling'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'general/recovery/vmProcessFailuresHandling'
+ ].errorText
+ }
+ value={dataMap['general/recovery/vmProcessFailuresHandling']}
+ />
+ <div className="empty-two-col" />
+ </GridItem>
+ {/** disabled until backend will be ready to implement it
<div className='row'>
<div className='col-md-3'>
<Input
@@ -190,78 +291,127 @@ const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
pointer='/general/recovery/VMRecoveryDocument'/>
</div>
</div>
- */
- }
- </GridSection>
+ */}
+ </GridSection>
);
-const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('DNS Configuration')}>
- <GridItem colSpan={2}>
- <Input
- data-test-id='dnsConfiguration'
- label={i18n('Do you have a need for DNS as a Service? Please describe.')}
- type='textarea'
- onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
- isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
- errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
- value={dataMap['general/dnsConfiguration']}/>
- </GridItem>
- </GridSection>
+const DNSConfigurationSection = ({
+ dataMap,
+ onQDataChanged,
+ qgenericFieldInfo
+}) => (
+ <GridSection title={i18n('DNS Configuration')}>
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="dnsConfiguration"
+ label={i18n(
+ 'Do you have a need for DNS as a Service? Please describe.'
+ )}
+ type="textarea"
+ onChange={dnsConfiguration =>
+ onQDataChanged({
+ 'general/dnsConfiguration': dnsConfiguration
+ })
+ }
+ isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
+ errorText={
+ qgenericFieldInfo['general/dnsConfiguration'].errorText
+ }
+ value={dataMap['general/dnsConfiguration']}
+ />
+ </GridItem>
+ </GridSection>
);
-const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Clone')}>
- <GridItem colSpan={2}>
- <Input
- data-test-id='vmCloneUsage'
- label={i18n('Describe VM Clone Use')}
- type='textarea'
- onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
- isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
- errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
- value={dataMap['general/vmCloneUsage']}/>
- </GridItem>
- </GridSection>
+const CloneSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+ <GridSection title={i18n('Clone')}>
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="vmCloneUsage"
+ label={i18n('Describe VM Clone Use')}
+ type="textarea"
+ onChange={vmCloneUsage =>
+ onQDataChanged({ 'general/vmCloneUsage': vmCloneUsage })
+ }
+ isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
+ errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
+ value={dataMap['general/vmCloneUsage']}
+ />
+ </GridItem>
+ </GridSection>
);
class SoftwareProductComponentsGeneralView extends React.Component {
+ render() {
+ let {
+ isManual,
+ onQDataChanged,
+ onDataChanged,
+ genericFieldInfo,
+ dataMap,
+ qGenericFieldInfo,
+ componentData: { displayName, vfcCode, nfcFunction, description },
+ isReadOnlyMode
+ } = this.props;
+ return (
+ <div className="vsp-components-general">
+ <div className="general-data">
+ {genericFieldInfo &&
+ qGenericFieldInfo && (
+ <Form
+ isValid={this.props.isFormValid}
+ formReady={null}
+ isReadOnlyMode={isReadOnlyMode}
+ onValidityChanged={isValidityData =>
+ this.props.onValidityChanged(isValidityData)
+ }
+ hasButtons={false}>
+ <GeneralSection
+ onDataChanged={onDataChanged}
+ displayName={displayName}
+ vfcCode={vfcCode}
+ nfcFunction={nfcFunction}
+ description={description}
+ isManual={isManual}
+ isReadOnlyMode={isReadOnlyMode}
+ genericFieldInfo={genericFieldInfo}
+ />
+ <HypervisorSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <ImageSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <RecoverySection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <DNSConfigurationSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <CloneSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ </Form>
+ )}
+ </div>
+ </div>
+ );
+ }
- render() {
- let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} = this.props;
- return(
- <div className='vsp-components-general'>
- <div className='general-data'>
- {genericFieldInfo && qGenericFieldInfo && <Form
- isValid={this.props.isFormValid}
- formReady={null}
- isReadOnlyMode={isReadOnlyMode}
- onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
- hasButtons={false}>
- <GeneralSection
- onDataChanged={onDataChanged}
- displayName={displayName}
- vfcCode={vfcCode}
- nfcFunction={nfcFunction}
- description={description}
- isManual={isManual}
- isReadOnlyMode={isReadOnlyMode}
- genericFieldInfo={genericFieldInfo}/>
- <HypervisorSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <ImageSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <RecoverySection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <DNSConfigurationSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <CloneSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- </Form> }
- </div>
- </div>
- );
- }
-
- save() {
- let {onSubmit, componentData, qdata} = this.props;
- return onSubmit({componentData, qdata});
- }
+ save() {
+ let { onSubmit, componentData, qdata } = this.props;
+ return onSubmit({ componentData, qdata });
+ }
}
export default SoftwareProductComponentsGeneralView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
index 2483d0aaa2..900a9a1c46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -1,6 +1,6 @@
-
import Validator from 'nfvo-utils/Validator.js';
-export const imageCustomValidations = {
- 'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+export const imageCustomValidations = {
+ version: value =>
+ Validator.validate('version', value, [{ type: 'required', data: true }])
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
index 8d70d6f14c..3f661b76fe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
@@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
function baseUrl(softwareProductId, version, componentId) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`;
}
-function fetchImagesList({softwareProductId, componentId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchImagesList({ softwareProductId, componentId, version }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}`
+ );
}
-function fetchImage({softwareProductId, componentId, imageId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function fetchImage({ softwareProductId, componentId, imageId, version }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+ );
}
-function destroyImage({softwareProductId, componentId, version, imageId}) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`);
+function destroyImage({ softwareProductId, componentId, version, imageId }) {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version, componentId)}/${imageId}`
+ );
}
-function createImage({softwareProductId, componentId, version, data}) {
- return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
- fileName: data.fileName
- });
+function createImage({ softwareProductId, componentId, version, data }) {
+ return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), {
+ fileName: data.fileName
+ });
}
-function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`);
+function fetchImageQuestionnaire({
+ softwareProductId,
+ componentId,
+ imageId,
+ version
+}) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(
+ softwareProductId,
+ version,
+ componentId
+ )}/${imageId}/questionnaire`
+ );
}
-function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
- fileName
- });
-
+function saveImage({
+ softwareProductId,
+ version,
+ componentId,
+ image: { id, fileName }
+}) {
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+ {
+ fileName
+ }
+ );
}
-function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata);
+function saveImageQuestionnaire({
+ softwareProductId,
+ componentId,
+ version,
+ imageId,
+ qdata
+}) {
+ return RestAPIUtil.put(
+ `${baseUrl(
+ softwareProductId,
+ version,
+ componentId
+ )}/${imageId}/questionnaire`,
+ qdata
+ );
}
const SoftwareProductComponentImagesActionHelper = {
- fetchImagesList(dispatch, {softwareProductId, componentId, version}) {
- dispatch({
- type: actionTypes.IMAGES_LIST_UPDATE,
- response: []
- });
-
- return fetchImagesList({softwareProductId, componentId, version}).then((response) => {
- dispatch({
- type: actionTypes.IMAGES_LIST_UPDATE,
- response: response.results,
- componentId : componentId
- });
- });
- },
-
- deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) {
- return destroyImage({softwareProductId, componentId, version, imageId}).then(() => {
- return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
- });
- },
-
- loadImageData({softwareProductId, componentId, imageId, version}) {
- return fetchImage({softwareProductId, componentId, imageId, version});
- },
-
- openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) {
- return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => {
- SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, {
- softwareProductId,
- componentId,
- imageId: image.id,
- version
- }).then(() => {
- SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, {
- softwareProductId,
- componentId,
- version,
- isReadOnlyMode,
- image,
- data
- });
- });
- });
- },
-
- openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) {
-
- let {id} = image;
- let title = id ? i18n('Edit Image') : i18n('Create New Image');
- let className = id ? 'image-modal-edit' : 'image-modal-new';
-
- dispatch({
- type: actionTypes.ImageEditor.OPEN,
- image: {...data, id}
- });
-
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
- title: title,
- modalClassName: className,
- modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode}
- }
- });
-
- },
-
- closeImageEditor(dispatch) {
-
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
-
- dispatch({
- type: actionTypes.ImageEditor.CLOSE
- });
-
- },
-
- loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) {
- return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => {
- ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: {
- qdata: response.data ? JSON.parse(response.data) : {},
- qschema: JSON.parse(response.schema)
- }});
- });
- },
-
- saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) {
- SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
- if (data !== null && data.id) {
- // editor in edit mode
- return Promise.all([
- saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}),
- saveImage({softwareProductId, version, componentId, image: data}).then(() => {
- return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
- })
- ]);
- } else {
- // editor in create mode
- createImage({softwareProductId, componentId, version, data}).then(() => {
- return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version});
- });
- }
- }
+ fetchImagesList(dispatch, { softwareProductId, componentId, version }) {
+ dispatch({
+ type: actionTypes.IMAGES_LIST_UPDATE,
+ response: []
+ });
+
+ return fetchImagesList({
+ softwareProductId,
+ componentId,
+ version
+ }).then(response => {
+ dispatch({
+ type: actionTypes.IMAGES_LIST_UPDATE,
+ response: response.results,
+ componentId: componentId
+ });
+ });
+ },
+
+ deleteImage(
+ dispatch,
+ { softwareProductId, componentId, version, imageId }
+ ) {
+ return destroyImage({
+ softwareProductId,
+ componentId,
+ version,
+ imageId
+ }).then(() => {
+ return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+ dispatch,
+ { softwareProductId, componentId, version }
+ );
+ });
+ },
+
+ loadImageData({ softwareProductId, componentId, imageId, version }) {
+ return fetchImage({ softwareProductId, componentId, imageId, version });
+ },
+
+ openEditImageEditor(
+ dispatch,
+ { image, softwareProductId, componentId, version, isReadOnlyMode }
+ ) {
+ return SoftwareProductComponentImagesActionHelper.loadImageData({
+ softwareProductId,
+ componentId,
+ imageId: image.id,
+ version
+ }).then(({ data }) => {
+ SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ componentId,
+ imageId: image.id,
+ version
+ }
+ ).then(() => {
+ SoftwareProductComponentImagesActionHelper.openImageEditor(
+ dispatch,
+ {
+ softwareProductId,
+ componentId,
+ version,
+ isReadOnlyMode,
+ image,
+ data
+ }
+ );
+ });
+ });
+ },
+
+ openImageEditor(
+ dispatch,
+ {
+ image = {},
+ data = {},
+ softwareProductId,
+ componentId,
+ version,
+ isReadOnlyMode
+ }
+ ) {
+ let { id } = image;
+ let title = id ? i18n('Edit Image') : i18n('Create New Image');
+ let className = id ? 'image-modal-edit' : 'image-modal-new';
+
+ dispatch({
+ type: actionTypes.ImageEditor.OPEN,
+ image: { ...data, id }
+ });
+
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName:
+ modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
+ title: title,
+ modalClassName: className,
+ modalComponentProps: {
+ softwareProductId,
+ componentId,
+ version,
+ isReadOnlyMode
+ }
+ }
+ });
+ },
+
+ closeImageEditor(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+
+ dispatch({
+ type: actionTypes.ImageEditor.CLOSE
+ });
+ },
+
+ loadImageQuestionnaire(
+ dispatch,
+ { softwareProductId, componentId, imageId, version }
+ ) {
+ return fetchImageQuestionnaire({
+ softwareProductId,
+ componentId,
+ imageId,
+ version
+ }).then(response => {
+ ValidationHelper.qDataLoaded(dispatch, {
+ qName: IMAGE_QUESTIONNAIRE,
+ response: {
+ qdata: response.data ? JSON.parse(response.data) : {},
+ qschema: JSON.parse(response.schema)
+ }
+ });
+ });
+ },
+
+ saveImageDataAndQuestionnaire(
+ dispatch,
+ { softwareProductId, componentId, version, data, qdata }
+ ) {
+ SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch);
+ if (data !== null && data.id) {
+ // editor in edit mode
+ return Promise.all([
+ saveImageQuestionnaire({
+ softwareProductId,
+ version,
+ componentId,
+ imageId: data.id,
+ qdata
+ }),
+ saveImage({
+ softwareProductId,
+ version,
+ componentId,
+ image: data
+ }).then(() => {
+ return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+ dispatch,
+ { softwareProductId, componentId, version }
+ );
+ })
+ ]);
+ } else {
+ // editor in create mode
+ createImage({ softwareProductId, componentId, version, data }).then(
+ () => {
+ return SoftwareProductComponentImagesActionHelper.fetchImagesList(
+ dispatch,
+ { softwareProductId, componentId, version }
+ );
+ }
+ );
+ }
+ }
};
export default SoftwareProductComponentImagesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
index 6b6c9a30e5..300b2898e1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js
@@ -16,12 +16,12 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- IMAGES_LIST_UPDATE: null,
+ IMAGES_LIST_UPDATE: null,
- ImageEditor: {
- CLOSE: null,
- OPEN: null
- }
+ ImageEditor: {
+ CLOSE: null,
+ OPEN: null
+ }
});
export const IMAGE_QUESTIONNAIRE = 'image';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index c5f23e7681..0243a38f1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -13,56 +13,93 @@
* 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js';
import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js';
export const mapStateToProps = ({
- softwareProduct,
- currentScreen: {props: {isReadOnlyMode}}
+ softwareProduct,
+ currentScreen: { props: { isReadOnlyMode } }
}) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = {},
+ isValidityData = true
+ },
+ softwareProductComponents
+ } = softwareProduct;
- let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
-
- let {images: {imageEditor = {}}} = softwareProductComponents;
- let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor;
- let {version, onboardingMethod} = currentSoftwareProduct;
- let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo);
-
- return {
- version,
- currentSoftwareProduct,
- isValidityData,
- data,
- qdata,
- dataMap,
- isFormValid,
- formReady,
- genericFieldInfo,
- qgenericFieldInfo,
- isReadOnlyMode,
- isManual: isManual
- };
+ let { images: { imageEditor = {} } } = softwareProductComponents;
+ let {
+ data,
+ qdata,
+ genericFieldInfo,
+ qgenericFieldInfo,
+ dataMap,
+ formReady
+ } = imageEditor;
+ let { version, onboardingMethod } = currentSoftwareProduct;
+ let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
+ let isFormValid =
+ ValidationHelper.checkFormValid(genericFieldInfo) &&
+ ValidationHelper.checkFormValid(qgenericFieldInfo);
+ return {
+ version,
+ currentSoftwareProduct,
+ isValidityData,
+ data,
+ qdata,
+ dataMap,
+ isFormValid,
+ formReady,
+ genericFieldInfo,
+ qgenericFieldInfo,
+ isReadOnlyMode,
+ isManual: isManual
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
- onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
- onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
- onValidateForm: customValidations => {
- ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
- ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
- },
- onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
- qName: IMAGE_QUESTIONNAIRE, customValidations}),
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, componentId, version }
+) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: forms.IMAGE_EDIT_FORM
+ }),
+ onSubmit: ({ data, qdata }) =>
+ SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(
+ dispatch,
+ { softwareProductId, componentId, version, data, qdata }
+ ),
+ onCancel: () =>
+ SoftwareProductComponentsImageActionHelper.closeImageEditor(
+ dispatch
+ ),
+ onValidateForm: customValidations => {
+ ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+ ValidationHelper.qValidateForm(
+ dispatch,
+ IMAGE_QUESTIONNAIRE,
+ customValidations
+ );
+ },
+ onQDataChanged: (deltaData, customValidations) =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: IMAGE_QUESTIONNAIRE,
+ customValidations
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductComponentsImageEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 7c357429e5..3846d45772 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -13,30 +13,29 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.ImageEditor.CLOSE:
- return {};
- case actionTypes.ImageEditor.OPEN:
- return {
- ...state,
- data: {
- ...action.image
- },
- genericFieldInfo: {
- 'fileName' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- },
- formName: forms.IMAGE_EDIT_FORM
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.ImageEditor.CLOSE:
+ return {};
+ case actionTypes.ImageEditor.OPEN:
+ return {
+ ...state,
+ data: {
+ ...action.image
+ },
+ genericFieldInfo: {
+ fileName: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ },
+ formName: forms.IMAGE_EDIT_FORM
+ };
+ default:
+ return state;
+ }
};
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index a5ef152e01..3670ab910d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -21,53 +21,81 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import FileDetails from './imagesEditorComponents/FileDetails.jsx';
import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
-import {imageCustomValidations} from './ImageValidations.js';
+import { imageCustomValidations } from './ImageValidations.js';
class SoftwareProductComponentsImageEditorView extends React.Component {
- static propTypes = {
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
+ static propTypes = {
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- render() {
- let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props;
- let {id, fileName} = data;
- let editingMode = Boolean(id);
- return (
- <div>
- {genericFieldInfo && <Form
- ref={(form) => { this.form = form; }}
- hasButtons={true}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- isValid={isFormValid}
- formReady={formReady}
- submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
- onValidateForm={() => onValidateForm(imageCustomValidations) }
- className='vsp-components-image-editor'>
- <div className='editor-data'>
- <FileDetails
- editingMode={editingMode}
- genericFieldInfo={genericFieldInfo}
- qgenericFieldInfo={qgenericFieldInfo}
- fileName={fileName}
- onDataChanged={onDataChanged}
- isManual={isManual}
- dataMap={dataMap}
- onQDataChanged={onQDataChanged}/>
- {editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
- </div>
- </Form>}
- </div>
- );
- }
- submit() {
- let {data, qdata, onSubmit, version} = this.props;
- onSubmit({data, qdata, version});
- }
+ render() {
+ let {
+ onCancel,
+ onValidateForm,
+ isReadOnlyMode,
+ isFormValid,
+ formReady,
+ data = {},
+ genericFieldInfo,
+ qgenericFieldInfo,
+ dataMap,
+ onDataChanged,
+ isManual,
+ onQDataChanged
+ } = this.props;
+ let { id, fileName } = data;
+ let editingMode = Boolean(id);
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref={form => {
+ this.form = form;
+ }}
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ isValid={isFormValid}
+ formReady={formReady}
+ submitButtonText={
+ editingMode ? i18n('Save') : i18n('Create')
+ }
+ onValidateForm={() =>
+ onValidateForm(imageCustomValidations)
+ }
+ className="vsp-components-image-editor">
+ <div className="editor-data">
+ <FileDetails
+ editingMode={editingMode}
+ genericFieldInfo={genericFieldInfo}
+ qgenericFieldInfo={qgenericFieldInfo}
+ fileName={fileName}
+ onDataChanged={onDataChanged}
+ isManual={isManual}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ {editingMode && (
+ <ImageDetails
+ dataMap={dataMap}
+ qgenericFieldInfo={qgenericFieldInfo}
+ onQDataChanged={onQDataChanged}
+ />
+ )}
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
+ submit() {
+ let { data, qdata, onSubmit, version } = this.props;
+ onSubmit({ data, qdata, version });
+ }
}
export default SoftwareProductComponentsImageEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
index d071647058..f3c39c3048 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js
@@ -13,73 +13,122 @@
* 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx';
import ImageHelper from './SoftwareProductComponentsImageActionHelper.js';
import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js';
import SoftwareProductComponentsActionHelper from '../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 as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = {},
+ isValidityData = true
+ },
+ softwareProductComponents
+ } = softwareProduct;
+ let {
+ images: { imagesList = [] },
+ componentEditor: {
+ data: componentData,
+ qdata,
+ dataMap,
+ qgenericFieldInfo
+ }
+ } = softwareProductComponents;
+ let { onboardingMethod } = currentSoftwareProduct;
+ let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
- let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
- let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
- let {onboardingMethod} = currentSoftwareProduct;
- let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
-
- return {
- componentData,
- qdata,
- dataMap,
- qgenericFieldInfo,
- isValidityData,
- imagesList,
- isManual : isManual
- };
+ return {
+ componentData,
+ qdata,
+ dataMap,
+ qgenericFieldInfo,
+ isValidityData,
+ imagesList,
+ isManual: isManual
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
- return {
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
- qName: COMPONENTS_QUESTIONNAIRE}),
- onAddImage: (isReadOnlyMode) => {
- SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch,
- {isReadOnlyMode, softwareProductId,
- componentId, version}
- );},
- onDeleteImage: (image) => {
- let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName;
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}),
- onConfirmed: () => ImageHelper.deleteImage(dispatch, {
- softwareProductId,
- componentId,
- version,
- imageId: image.id
- })
- }
- });
- },
- onEditImageClick: (image, isReadOnlyMode) => {
- SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, {
- image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'}
- );
- },
- onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
- {softwareProductId,
- vspComponentId: componentId,
- version,
- qdata});
- }
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, componentId, version }
+) => {
+ return {
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: COMPONENTS_QUESTIONNAIRE
+ }),
+ onAddImage: isReadOnlyMode => {
+ SoftwareProductComponentsImagesActionHelper.openImageEditor(
+ dispatch,
+ {
+ isReadOnlyMode,
+ softwareProductId,
+ componentId,
+ version
+ }
+ );
+ },
+ onDeleteImage: image => {
+ let shortenedFileName =
+ image.fileName.length > 40
+ ? image.fileName.substr(0, 40) + '...'
+ : image.fileName;
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n(
+ 'Are you sure you want to delete "{shortenedFileName}"?',
+ {
+ shortenedFileName: shortenedFileName
+ }
+ ),
+ onConfirmed: () =>
+ ImageHelper.deleteImage(dispatch, {
+ softwareProductId,
+ componentId,
+ version,
+ imageId: image.id
+ })
+ }
+ });
+ },
+ onEditImageClick: (image, isReadOnlyMode) => {
+ SoftwareProductComponentsImagesActionHelper.openEditImageEditor(
+ dispatch,
+ {
+ image,
+ isReadOnlyMode,
+ softwareProductId,
+ componentId,
+ version,
+ modalClassName: 'image-modal-edit'
+ }
+ );
+ },
+ onSubmit: qdata => {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ vspComponentId: componentId,
+ version,
+ qdata
+ }
+ );
+ }
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsImageListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
index 5dd2fb623b..a7c1bfafbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js
@@ -13,14 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentsImageConstants.js';
+import { actionTypes } from './SoftwareProductComponentsImageConstants.js';
export default (state = [], action) => {
- switch (action.type) {
-
- case actionTypes.IMAGES_LIST_UPDATE:
- return [...action.response];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.IMAGES_LIST_UPDATE:
+ return [...action.response];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
index 004cbebe5d..cb67856caa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx
@@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
class SoftwareProductComponentsImageListView extends React.Component {
- state = {
- localFilter: ''
- };
+ state = {
+ localFilter: ''
+ };
- render() {
- let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props;
- return(
- <div className='vsp-components-image'>
- <div className='image-data'>
- <div>
- { qgenericFieldInfo && <Form
- formReady={null}
- isValid={true}
- onSubmit={() => this.save()}
- isReadOnlyMode={isReadOnlyMode}
- hasButtons={false}>
-
- <h3 className='section-title'>{i18n('Image')}</h3>
- <div className='rows-section'>
- <div className='row-flex-components'>
- <div className='single-col'>
- <Input
- data-test-id='providedBy'
- label={i18n('Image provided by')}
- type='select'
- isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
- errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
- value={dataMap['general/image/providedBy']}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({'general/image/providedBy' : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- { qgenericFieldInfo['general/image/providedBy'].enum.map(proto =>
- <option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
- </Input>
- </div>
- <div className='empty-two-col' />
- </div>
- </div>
-
- </Form> }
- </div>
- </div>
- {this.renderImagesList()}
+ render() {
+ let {
+ dataMap,
+ onQDataChanged,
+ isReadOnlyMode,
+ qgenericFieldInfo
+ } = this.props;
+ return (
+ <div className="vsp-components-image">
+ <div className="image-data">
+ <div>
+ {qgenericFieldInfo && (
+ <Form
+ formReady={null}
+ isValid={true}
+ onSubmit={() => this.save()}
+ isReadOnlyMode={isReadOnlyMode}
+ hasButtons={false}>
+ <h3 className="section-title">
+ {i18n('Image')}
+ </h3>
+ <div className="rows-section">
+ <div className="row-flex-components">
+ <div className="single-col">
+ <Input
+ data-test-id="providedBy"
+ label={i18n(
+ 'Image provided by'
+ )}
+ type="select"
+ isValid={
+ qgenericFieldInfo[
+ 'general/image/providedBy'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'general/image/providedBy'
+ ].errorText
+ }
+ value={
+ dataMap[
+ 'general/image/providedBy'
+ ]
+ }
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[
+ selectedIndex
+ ].value;
+ onQDataChanged({
+ 'general/image/providedBy': val
+ });
+ }}>
+ <option
+ key="placeholder"
+ value="">
+ {i18n('Select...')}
+ </option>
+ {qgenericFieldInfo[
+ 'general/image/providedBy'
+ ].enum.map(proto => (
+ <option
+ value={proto.enum}
+ key={proto.enum}>
+ {proto.title}
+ </option>
+ ))}
+ </Input>
+ </div>
+ <div className="empty-two-col" />
+ </div>
+ </div>
+ </Form>
+ )}
+ </div>
+ </div>
+ {this.renderImagesList()}
</div>
- );
- };
-
- renderImagesList() {
- const {localFilter} = this.state;
- let {isReadOnlyMode, onAddImage, isManual} = this.props;
-
- return (
- <ListEditorView
- title={i18n('Images')}
- filterValue={localFilter}
- placeholder={i18n('Filter Images by Name')}
- isReadOnlyMode={isReadOnlyMode}
- onFilter={value => this.setState({localFilter: value})}
- onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
- plusButtonTitle={i18n('Add Image')}
- twoColumns>
- {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))}
- </ListEditorView>
- );
- };
+ );
+ }
+ renderImagesList() {
+ const { localFilter } = this.state;
+ let { isReadOnlyMode, onAddImage, isManual } = this.props;
- renderImagesListItem(image, isReadOnlyMode) {
- let {id, fileName} = image;
- let {onEditImageClick, isManual, onDeleteImage} = this.props;
- return (
- <ListEditorItemView
- key={id}
- isReadOnlyMode={isReadOnlyMode}
- onSelect={() => onEditImageClick(image, isReadOnlyMode)}
- onDelete={isManual ? () => onDeleteImage(image) : null}>
+ return (
+ <ListEditorView
+ title={i18n('Images')}
+ filterValue={localFilter}
+ placeholder={i18n('Filter Images by Name')}
+ isReadOnlyMode={isReadOnlyMode}
+ onFilter={value => this.setState({ localFilter: value })}
+ onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null}
+ plusButtonTitle={i18n('Add Image')}
+ twoColumns>
+ {this.filterList().map(image =>
+ this.renderImagesListItem(image, isReadOnlyMode)
+ )}
+ </ListEditorView>
+ );
+ }
- <ListEditorItemViewField>
- <div className='image-filename-cell'><span className='image-filename'>{fileName}</span></div>
- </ListEditorItemViewField>
- </ListEditorItemView>
- );
- }
+ renderImagesListItem(image, isReadOnlyMode) {
+ let { id, fileName } = image;
+ let { onEditImageClick, isManual, onDeleteImage } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ isReadOnlyMode={isReadOnlyMode}
+ onSelect={() => onEditImageClick(image, isReadOnlyMode)}
+ onDelete={isManual ? () => onDeleteImage(image) : null}>
+ <ListEditorItemViewField>
+ <div className="image-filename-cell">
+ <span className="image-filename">{fileName}</span>
+ </div>
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ );
+ }
- filterList() {
- let {imagesList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return imagesList.filter(({fileName = ''}) => {
- return escape(fileName).match(filter);
- });
- }
- else {
- return imagesList;
- }
- }
+ filterList() {
+ let { imagesList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return imagesList.filter(({ fileName = '' }) => {
+ return escape(fileName).match(filter);
+ });
+ } else {
+ return imagesList;
+ }
+ }
- save() {
- let {onSubmit, qdata} = this.props;
- return onSubmit(qdata);
- }
+ save() {
+ let { onSubmit, qdata } = this.props;
+ return onSubmit(qdata);
+ }
}
export default SoftwareProductComponentsImageListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index 64367c00f2..ec173cd988 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -18,32 +18,64 @@ 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';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
import Format from './Format.jsx';
import Version from './Version.jsx';
-const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => {
- let fileNameCols = (editingMode) ? 3 : 4;
- return(
- <GridSection hasLastColSset>
- <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
- <Input
- disabled={!isManual}
- onChange={fileName => onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)}
- label={i18n('Image Name')}
- data-test-id='image-filename'
- value={fileName}
- isValid={genericFieldInfo.fileName.isValid}
- errorText={genericFieldInfo.fileName.errorText}
- isRequired={true}
- type='text'
- className='image-filename'/>
- </GridItem>
- {!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
- {editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
- {editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
- </GridSection>
- );
+const FileDetails = ({
+ editingMode,
+ fileName,
+ onDataChanged,
+ isManual,
+ dataMap,
+ onQDataChanged,
+ genericFieldInfo,
+ qgenericFieldInfo
+}) => {
+ let fileNameCols = editingMode ? 3 : 4;
+ return (
+ <GridSection hasLastColSset>
+ <GridItem colSpan={fileNameCols} lastColInRow={!editingMode}>
+ <Input
+ disabled={!isManual}
+ onChange={fileName =>
+ onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM)
+ }
+ label={i18n('Image Name')}
+ data-test-id="image-filename"
+ value={fileName}
+ isValid={genericFieldInfo.fileName.isValid}
+ errorText={genericFieldInfo.fileName.errorText}
+ isRequired={true}
+ type="text"
+ className="image-filename"
+ />
+ </GridItem>
+ {!editingMode && (
+ <div className="note-text">
+ {i18n(
+ 'After image creation you must go to Edit Image and add File Version'
+ )}
+ </div>
+ )}
+ {editingMode && (
+ <Version
+ isManual={isManual}
+ dataMap={dataMap}
+ qgenericFieldInfo={qgenericFieldInfo}
+ onQDataChanged={onQDataChanged}
+ />
+ )}
+ {editingMode && (
+ <Format
+ isManual={isManual}
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ )}
+ </GridSection>
+ );
};
export default FileDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
index 1f71c6b277..0ee8fb76d0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx
@@ -18,30 +18,34 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-
-const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
- return(
- <GridItem colSpan={2}>
- <Input
- disabled={!isManual}
- data-test-id='image-format'
- type='select'
- label={i18n('Format')}
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- isValid={qgenericFieldInfo['format'].isValid}
- errorText={qgenericFieldInfo['format'].errorText}
- value={dataMap['format']}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({'format' : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- {qgenericFieldInfo['format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
- </Input>
- </GridItem>
- );
+const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+ return (
+ <GridItem colSpan={2}>
+ <Input
+ disabled={!isManual}
+ data-test-id="image-format"
+ type="select"
+ label={i18n('Format')}
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ isValid={qgenericFieldInfo['format'].isValid}
+ errorText={qgenericFieldInfo['format'].errorText}
+ value={dataMap['format']}
+ onChange={e => {
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onQDataChanged({ format: val });
+ }}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {qgenericFieldInfo['format'].enum.map(hv => (
+ <option value={hv.enum} key={hv.enum}>
+ {hv.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ );
};
export default Format;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
index 24e54bbbcb..ccf94bc860 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx
@@ -19,21 +19,22 @@ 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 ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => {
- return(
- <GridSection title={i18n('Image Details')}>
- <GridItem colSpan={2}>
- <Input
- data-test-id='image-md5'
- className='image-md5'
- type='text'
- label={i18n('md5')}
- onChange={(md5) => onQDataChanged({'md5' : md5})}
- isValid={qgenericFieldInfo['md5'].isValid}
- errorText={qgenericFieldInfo['md5'].errorText}
- value={dataMap['md5']}/>
- </GridItem>
- </GridSection>
- );
+const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => {
+ return (
+ <GridSection title={i18n('Image Details')}>
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="image-md5"
+ className="image-md5"
+ type="text"
+ label={i18n('md5')}
+ onChange={md5 => onQDataChanged({ md5: md5 })}
+ isValid={qgenericFieldInfo['md5'].isValid}
+ errorText={qgenericFieldInfo['md5'].errorText}
+ value={dataMap['md5']}
+ />
+ </GridItem>
+ </GridSection>
+ );
};
export default ImageDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index bd55c5ba91..60454c52e7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,25 +17,29 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {imageCustomValidations} from '../ImageValidations.js';
+import { imageCustomValidations } from '../ImageValidations.js';
-
-const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
- return(
- <GridItem colSpan={1} lastColInRow>
- <Input
- disabled={!isManual}
- data-test-id='image-version'
- type='text'
- className='image-version'
- label={i18n('Version')}
- isRequired={true}
- onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
- isValid={qgenericFieldInfo['version'].isValid}
- errorText={qgenericFieldInfo['version'].errorText}
- value={dataMap['version']}/>
- </GridItem>
- );
+const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => {
+ return (
+ <GridItem colSpan={1} lastColInRow>
+ <Input
+ disabled={!isManual}
+ data-test-id="image-version"
+ type="text"
+ className="image-version"
+ label={i18n('Version')}
+ isRequired={true}
+ onChange={version =>
+ onQDataChanged(
+ { version: version },
+ { version: imageCustomValidations['version'] }
+ )
+ }
+ isValid={qgenericFieldInfo['version'].isValid}
+ errorText={qgenericFieldInfo['version'].errorText}
+ value={dataMap['version']}
+ />
+ </GridItem>
+ );
};
export default Version;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
index 350e80c0f8..da8b73fbe0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js
@@ -13,29 +13,50 @@
* 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 SoftwareProductComponentLoadBalancingView from './SoftwareProductComponentLoadBalancingRefView.jsx';
import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-export const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
-
- let {componentEditor: {qdata, qgenericFieldInfo: genericFieldInfo, dataMap}} = softwareProductComponents;
-
- return {
- qdata,
- genericFieldInfo,
- dataMap
- };
+export const mapStateToProps = ({
+ softwareProduct: { softwareProductComponents }
+}) => {
+ let {
+ componentEditor: { qdata, qgenericFieldInfo: genericFieldInfo, dataMap }
+ } = softwareProductComponents;
+ return {
+ qdata,
+ genericFieldInfo,
+ dataMap
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
- return {
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
- onSubmit: ({qdata}) =>{ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});}
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, version, componentId }
+) => {
+ return {
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: COMPONENTS_QUESTIONNAIRE
+ }),
+ onSubmit: ({ qdata }) => {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ qdata
+ }
+ );
+ }
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentLoadBalancingView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentLoadBalancingView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 1cbb9afc5d..4c90fc0be2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -19,7 +19,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
+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';
@@ -27,145 +27,244 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
const prefix = 'highAvailabilityAndLoadBalancing/';
const pointers = [
- {
- key: 'failureLoadDistribution',
- description: 'How is load distributed across live vms in the event of a vm/host failure? please describe'
- },
- {
- key: 'nkModelImplementation',
- description: 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
- },
- {
- key: 'architectureChoice',
- description: 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
- added: 'Will the arrangement be 1-1 or N-M? Please describe.'
- },
- {key: 'slaRequirements', description: 'Specify application SLA requirements on Cloud platform.'},
- {
- key: 'horizontalScaling',
- description: 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
- },
- {
- key: 'loadDistributionMechanism',
- description: 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
- added: 'Please describe.'
- }
+ {
+ key: 'failureLoadDistribution',
+ description:
+ 'How is load distributed across live vms in the event of a vm/host failure? please describe'
+ },
+ {
+ key: 'nkModelImplementation',
+ description:
+ 'Does each VM implement the N+K model for redundancy and failure protection? Please describe.'
+ },
+ {
+ key: 'architectureChoice',
+ description:
+ 'What architecture is being implemented: ACTIVE-ACTIVE and/or ACTIVE-PASSIVE. ',
+ added: 'Will the arrangement be 1-1 or N-M? Please describe.'
+ },
+ {
+ key: 'slaRequirements',
+ description: 'Specify application SLA requirements on Cloud platform.'
+ },
+ {
+ key: 'horizontalScaling',
+ description:
+ 'Is horizontal scaling the preferred solution for HA and resiliency? Please describe.'
+ },
+ {
+ key: 'loadDistributionMechanism',
+ description:
+ 'Can load be distributed across VMs? If so, are special mechanisms needed to re-balance data across VMs?',
+ added: 'Please describe.'
+ }
];
//TODO check for buttons
-const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
- <GridItem colSpan={3} key={item.key} >
- <div className={expanded ? 'title' : 'title add-padding'}
- data-test-id={`btn-${item.key}`}
- onClick={() => toggle(item.key)}>
- <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'}/>
- <span className='title-text'>{i18n(item.description)}</span>
- {item.added && <div className='new-line'>{i18n(item.added)}</div>}
- </div>
- <div className={expanded ? 'collapse in' : 'collapse'}>
- <div>
- <div>
- <Input
- data-test-id={`input-${item.key}`}
- type='textarea'
- isValid={genericFieldInfo[`${prefix}${item.key}`].isValid}
- errorText={genericFieldInfo[`${prefix}${item.key}`].errorText}
- value={dataMap[`${prefix}${item.key}`]}
- onChange={(val) => onQDataChanged({[`${prefix}${item.key}`] : val})} />
- </div>
- </div>
- </div>
- </GridItem>
+const TextAreaItem = ({
+ item,
+ toggle,
+ expanded,
+ genericFieldInfo,
+ dataMap,
+ onQDataChanged
+}) => (
+ <GridItem colSpan={3} key={item.key}>
+ <div
+ className={expanded ? 'title' : 'title add-padding'}
+ data-test-id={`btn-${item.key}`}
+ onClick={() => toggle(item.key)}>
+ <SVGIcon name={expanded ? 'chevronUp' : 'chevronDown'} />
+ <span className="title-text">{i18n(item.description)}</span>
+ {item.added && <div className="new-line">{i18n(item.added)}</div>}
+ </div>
+ <div className={expanded ? 'collapse in' : 'collapse'}>
+ <div>
+ <div>
+ <Input
+ data-test-id={`input-${item.key}`}
+ type="textarea"
+ isValid={
+ genericFieldInfo[`${prefix}${item.key}`].isValid
+ }
+ errorText={
+ genericFieldInfo[`${prefix}${item.key}`].errorText
+ }
+ value={dataMap[`${prefix}${item.key}`]}
+ onChange={val =>
+ onQDataChanged({ [`${prefix}${item.key}`]: val })
+ }
+ />
+ </div>
+ </div>
+ </div>
+ </GridItem>
);
class SoftwareProductComponentLoadBalancingView extends React.Component {
- static propTypes = {
- componentId: PropTypes.string.isRequired,
- softwareProductId: PropTypes.string.isRequired,
- qdata: PropTypes.object,
- qschema: PropTypes.object,
- currentSoftwareProduct: PropTypes.object
- };
+ static propTypes = {
+ componentId: PropTypes.string.isRequired,
+ softwareProductId: PropTypes.string.isRequired,
+ qdata: PropTypes.object,
+ qschema: PropTypes.object,
+ currentSoftwareProduct: PropTypes.object
+ };
- state = {
- expanded: {}
- };
+ state = {
+ expanded: {}
+ };
- render() {
- let {dataMap, genericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
- return (
- <div className='vsp-components-load-balancing'>
- <div className='halb-data'>
- { genericFieldInfo && <Form
- formReady={null}
- isValid={true}
- onSubmit={() => this.save()}
- isReadOnlyMode={isReadOnlyMode}
- hasButtons={false}>
- <GridSection title={i18n('High Availability & Load Balancing')}>
- <GridItem colSpan={1}>
- <Input
- data-test-id='input-is-component-mandatory'
- label={i18n('Is Component Mandatory')}
- type='select'
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- isValid={genericFieldInfo[`${prefix}isComponentMandatory`].isValid}
- errorText={genericFieldInfo[`${prefix}isComponentMandatory`].errorText}
- value={dataMap[`${prefix}isComponentMandatory`]}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({[`${prefix}isComponentMandatory`] : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => <option value={isMan.enum} key={isMan.enum}>{isMan.title}</option>) }
- </Input>
- </GridItem>
- <GridItem colSpan={3}/>
- <GridItem colSpan={1}>
- <Input
- data-test-id='input-high-availability-mode'
- label={i18n('High Availability Mode')}
- type='select'
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- isValid={genericFieldInfo[`${prefix}highAvailabilityMode`].isValid}
- errorText={genericFieldInfo[`${prefix}highAvailabilityMode`].errorText}
- value={dataMap[`${prefix}highAvailabilityMode`]}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({[`${prefix}highAvailabilityMode`] : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => <option value={hmode.enum} key={hmode.enum}>{hmode.title}</option>)}
- </Input>
- </GridItem>
- <GridItem colSpan={3}/>
- </GridSection>
- <GridSection>
- {pointers.map(pointer => <TextAreaItem onQDataChanged={onQDataChanged}
- genericFieldInfo={genericFieldInfo} dataMap={dataMap} item={pointer} key={pointer.key + 'pKey'}
- expanded={this.state.expanded[pointer.key]} toggle={(name)=>{this.toggle(name);}} />)}
- </GridSection>
- </Form> }
- </div>
- </div>
- );
- }
+ render() {
+ let {
+ dataMap,
+ genericFieldInfo,
+ onQDataChanged,
+ isReadOnlyMode
+ } = this.props;
+ return (
+ <div className="vsp-components-load-balancing">
+ <div className="halb-data">
+ {genericFieldInfo && (
+ <Form
+ formReady={null}
+ isValid={true}
+ onSubmit={() => this.save()}
+ isReadOnlyMode={isReadOnlyMode}
+ hasButtons={false}>
+ <GridSection
+ title={i18n(
+ 'High Availability & Load Balancing'
+ )}>
+ <GridItem colSpan={1}>
+ <Input
+ data-test-id="input-is-component-mandatory"
+ label={i18n('Is Component Mandatory')}
+ type="select"
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ isValid={
+ genericFieldInfo[
+ `${prefix}isComponentMandatory`
+ ].isValid
+ }
+ errorText={
+ genericFieldInfo[
+ `${prefix}isComponentMandatory`
+ ].errorText
+ }
+ value={
+ dataMap[
+ `${prefix}isComponentMandatory`
+ ]
+ }
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[selectedIndex]
+ .value;
+ onQDataChanged({
+ [`${prefix}isComponentMandatory`]: val
+ });
+ }}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {genericFieldInfo[
+ `${prefix}isComponentMandatory`
+ ].enum.map(isMan => (
+ <option
+ value={isMan.enum}
+ key={isMan.enum}>
+ {isMan.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ <GridItem colSpan={3} />
+ <GridItem colSpan={1}>
+ <Input
+ data-test-id="input-high-availability-mode"
+ label={i18n('High Availability Mode')}
+ type="select"
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ isValid={
+ genericFieldInfo[
+ `${prefix}highAvailabilityMode`
+ ].isValid
+ }
+ errorText={
+ genericFieldInfo[
+ `${prefix}highAvailabilityMode`
+ ].errorText
+ }
+ value={
+ dataMap[
+ `${prefix}highAvailabilityMode`
+ ]
+ }
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[selectedIndex]
+ .value;
+ onQDataChanged({
+ [`${prefix}highAvailabilityMode`]: val
+ });
+ }}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {genericFieldInfo[
+ `${prefix}highAvailabilityMode`
+ ].enum.map(hmode => (
+ <option
+ value={hmode.enum}
+ key={hmode.enum}>
+ {hmode.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ <GridItem colSpan={3} />
+ </GridSection>
+ <GridSection>
+ {pointers.map(pointer => (
+ <TextAreaItem
+ onQDataChanged={onQDataChanged}
+ genericFieldInfo={genericFieldInfo}
+ dataMap={dataMap}
+ item={pointer}
+ key={pointer.key + 'pKey'}
+ expanded={
+ this.state.expanded[pointer.key]
+ }
+ toggle={name => {
+ this.toggle(name);
+ }}
+ />
+ ))}
+ </GridSection>
+ </Form>
+ )}
+ </div>
+ </div>
+ );
+ }
- toggle(name) {
- let st = this.state.expanded[name] ? true : false;
- let newState = {...this.state};
- newState.expanded[name] = !st;
- this.setState(newState);
- }
+ toggle(name) {
+ let st = this.state.expanded[name] ? true : false;
+ let newState = { ...this.state };
+ newState.expanded[name] = !st;
+ this.setState(newState);
+ }
- save() {
- let {onSubmit, qdata} = this.props;
- return onSubmit({qdata});
- }
+ save() {
+ let { onSubmit, qdata } = this.props;
+ return onSubmit({ qdata });
+ }
}
export default SoftwareProductComponentLoadBalancingView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
index 8871aabbb5..0b0b9ae2d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js
@@ -13,51 +13,54 @@
* 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 SoftwareProductComponentsMonitoringView from './SoftwareProductComponentsMonitoringView.jsx';
import SoftwareProductComponentsMonitoringAction from './SoftwareProductComponentsMonitoringActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-
-
-export const mapStateToProps = ({softwareProduct}) => {
-
- let {softwareProductComponents: {monitoring}} = softwareProduct;
- return {
- filenames: monitoring
- };
-
+export const mapStateToProps = ({ softwareProduct }) => {
+ let { softwareProductComponents: { monitoring } } = softwareProduct;
+ return {
+ filenames: monitoring
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
- return {
- onDropMibFileToUpload: (formData, type) =>
- SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
- softwareProductId,
- version,
- componentId,
- formData,
- type
- }),
-
- onDeleteFile: type => SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
- softwareProductId,
- version,
- componentId,
- type
- }),
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, version, componentId }
+) => {
+ return {
+ onDropMibFileToUpload: (formData, type) =>
+ SoftwareProductComponentsMonitoringAction.uploadFile(dispatch, {
+ softwareProductId,
+ version,
+ componentId,
+ formData,
+ type
+ }),
- onFileUploadError: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Upload Failed'),
- msg: i18n('Expected "zip" file. Please check the provided file type.')
- }
- })
- };
+ onDeleteFile: type =>
+ SoftwareProductComponentsMonitoringAction.deleteFile(dispatch, {
+ softwareProductId,
+ version,
+ componentId,
+ type
+ }),
+ onFileUploadError: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Upload Failed'),
+ msg: i18n(
+ 'Expected "zip" file. Please check the provided file type.'
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsMonitoringView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsMonitoringView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
index 3db708bc92..c60bc5f1be 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js
@@ -16,61 +16,90 @@
import i18n from 'nfvo-utils/i18n/i18n.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentsMonitoringConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './SoftwareProductComponentsMonitoringConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
function baseUrl(vspId, version, componentId) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/components/${componentId}/uploads`;
}
-let onInvalidFileSizeUpload = (dispatch) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Upload Failed'),
- msg: i18n('no zip file was uploaded or zip file doesn\'t exist')
- }
-});
+let onInvalidFileSizeUpload = dispatch =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Upload Failed'),
+ msg: i18n("no zip file was uploaded or zip file doesn't exist")
+ }
+ });
-let uploadFile = (dispatch, {softwareProductId, version, componentId, formData, type}) => {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`, formData).then(()=> dispatch({
- type: actionTypes.MONITOR_UPLOADED, data: {filename: formData.get('upload').name, type : type}
- }));
+let uploadFile = (
+ dispatch,
+ { softwareProductId, version, componentId, formData, type }
+) => {
+ return RestAPIUtil.post(
+ `${baseUrl(softwareProductId, version, componentId)}/types/${type}`,
+ formData
+ ).then(() =>
+ dispatch({
+ type: actionTypes.MONITOR_UPLOADED,
+ data: { filename: formData.get('upload').name, type: type }
+ })
+ );
};
-let deleteFile = (dispatch, {softwareProductId, version, componentId, type}) => {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/types/${type}`).then(()=> dispatch({
- type: actionTypes.MONITOR_DELETED,
- data : { type: type}
- }));
+let deleteFile = (
+ dispatch,
+ { softwareProductId, version, componentId, type }
+) => {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version, componentId)}/types/${type}`
+ ).then(() =>
+ dispatch({
+ type: actionTypes.MONITOR_DELETED,
+ data: { type: type }
+ })
+ );
};
-
const SoftwareProductComponentsMonitoringAction = {
+ fetchExistingFiles(dispatch, { softwareProductId, version, componentId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}`
+ ).then(response =>
+ dispatch({
+ type: actionTypes.MONITOR_FILES_DATA_CHANGE,
+ data: response
+ })
+ );
+ },
- fetchExistingFiles(dispatch, {softwareProductId, version, componentId}){
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`).then(response =>
- dispatch({
- type: actionTypes.MONITOR_FILES_DATA_CHANGE,
- data: response
- })
- );
- },
-
- uploadFile(dispatch, {softwareProductId, version, componentId, formData, type}){
- if (formData.get('upload').size) {
- return uploadFile(dispatch, {softwareProductId, version, componentId, formData, type});
- }
- else {
- onInvalidFileSizeUpload(dispatch);
- }
- },
-
- deleteFile(dispatch, {softwareProductId, version, componentId, type}){
- return deleteFile(dispatch, {softwareProductId, version, componentId, type});
- }
+ uploadFile(
+ dispatch,
+ { softwareProductId, version, componentId, formData, type }
+ ) {
+ if (formData.get('upload').size) {
+ return uploadFile(dispatch, {
+ softwareProductId,
+ version,
+ componentId,
+ formData,
+ type
+ });
+ } else {
+ onInvalidFileSizeUpload(dispatch);
+ }
+ },
+ deleteFile(dispatch, { softwareProductId, version, componentId, type }) {
+ return deleteFile(dispatch, {
+ softwareProductId,
+ version,
+ componentId,
+ type
+ });
+ }
};
export default SoftwareProductComponentsMonitoringAction;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
index bf2cbd2a3f..10049d6b57 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringConstants.js
@@ -16,29 +16,26 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-
export const actionTypes = keyMirror({
- MONITOR_FILES_DATA_CHANGE: null,
- MONITOR_UPLOADED: null,
- MONITOR_DELETED: null
+ MONITOR_FILES_DATA_CHANGE: null,
+ MONITOR_UPLOADED: null,
+ MONITOR_DELETED: null
});
export const fileTypes = {
- SNMP_TRAP: 'SNMP_TRAP',
- SNMP_POLL: 'SNMP_POLL',
- VES_EVENT: 'VES_EVENTS'
+ SNMP_TRAP: 'SNMP_TRAP',
+ SNMP_POLL: 'SNMP_POLL',
+ VES_EVENT: 'VES_EVENTS'
};
export const type2Name = {
- SNMP_TRAP: 'snmpTrap',
- SNMP_POLL: 'snmpPoll',
- VES_EVENTS: 'vesEvent'
+ SNMP_TRAP: 'snmpTrap',
+ SNMP_POLL: 'snmpPoll',
+ VES_EVENTS: 'vesEvent'
};
-
export const type2Title = {
- SNMP_TRAP : i18n('SNMP Trap'),
- SNMP_POLL : i18n('SNMP Poll'),
- VES_EVENTS: i18n('VES')
+ SNMP_TRAP: i18n('SNMP Trap'),
+ SNMP_POLL: i18n('SNMP Poll'),
+ VES_EVENTS: i18n('VES')
};
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
index f5cfe6f06d..61ad4ec2d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringReducer.js
@@ -13,23 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
+import {
+ actionTypes,
+ type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.MONITOR_FILES_DATA_CHANGE:
- return action.data;
- case actionTypes.MONITOR_UPLOADED:
- return {
- ...state,
- [type2Name[action.data.type]]: action.data.filename
- };
- case actionTypes.MONITOR_DELETED:
- return {
- ...state,
- [type2Name[action.data.type]]: undefined
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.MONITOR_FILES_DATA_CHANGE:
+ return action.data;
+ case actionTypes.MONITOR_UPLOADED:
+ return {
+ ...state,
+ [type2Name[action.data.type]]: action.data.filename
+ };
+ case actionTypes.MONITOR_DELETED:
+ return {
+ ...state,
+ [type2Name[action.data.type]]: undefined
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 95d1e4e283..771bca161a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -13,123 +13,133 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import Button from 'sdc-ui/lib/react/Button.js';
import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
-import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
-
-
+import {
+ fileTypes,
+ type2Title,
+ type2Name
+} from './SoftwareProductComponentsMonitoringConstants.js';
class SoftwareProductComponentsMonitoringView extends Component {
-
- static propTypes = {
- isReadOnlyMode: PropTypes.bool,
- filenames: PropTypes.object,
- softwareProductId: PropTypes.string,
-
- onDropMibFileToUpload: PropTypes.func,
- onDeleteSnmpFile: PropTypes.func
- };
-
- state = {
- dragging: false
- };
-
-
-
-
- render() {
- return (
- <div className='vsp-component-monitoring'>
- {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
- {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
- {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
- </div>
- );
- }
-
- renderDropzoneWithType(type) {
- let {isReadOnlyMode, filenames} = this.props;
- let fileByType = type2Name[type];
- let fileName = (filenames) ? filenames[fileByType] : undefined;
- let refAndName = `fileInput${type.toString()}`;
- let typeDisplayName = type2Title[type];
- return (
- <Dropzone
- className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
- onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
- onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
- onDragLeave={() => this.setState({dragging:false})}
- multiple={false}
- disableClick={true}
- ref={refAndName}
- name={refAndName}
- accept='.zip'>
- <div className='draggable-wrapper'>
- <div className='section-title'>{typeDisplayName}</div>
- {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
- </div>
- </Dropzone>
- );
- }
-
- renderUploadButton(refAndName) {
- let {isReadOnlyMode} = this.props;
- return (
- <DraggableUploadFileBox
- dataTestId={`monitoring-upload-${refAndName}`}
- className='software-product-landing-view-top-block-col-upl'
- isReadOnlyMode={isReadOnlyMode}
- onClick={() => this.refs[refAndName].open()}/>
- );
- }
-
- renderUploadedFileName(filename, type, isReadOnlyMode) {
- return (
- <div className='monitoring-file'>
- <Button
- color='white'
- disabled={true}
- className='filename'>
- {filename}
- </Button>
-
- <Button
- color='gray'
- data-test-id={`monitoring-delete-${type}`}
- disabled={isReadOnlyMode}
- onClick={()=>this.props.onDeleteFile(type)}
- iconName='close'
- className='delete'/>
- </div>
- );
- }
-
-
- handleOnDragEnter(isReadOnlyMode) {
- if (!isReadOnlyMode) {
- this.setState({dragging: true});
- }
- }
-
- handleImport(files, rejectedFiles, {isReadOnlyMode, type, refAndName}) {
- if (isReadOnlyMode) {
- return;
- }
- if (files.length > 0) {
- this.setState({dragging: false});
- let file = files[0];
- let formData = new FormData();
- formData.append('upload', file);
- this.refs[refAndName].value = '';
- this.props.onDropMibFileToUpload(formData, type);
- } else if (rejectedFiles.length > 0) {
- this.setState({dragging: false});
- this.props.onFileUploadError();
- }
- }
+ static propTypes = {
+ isReadOnlyMode: PropTypes.bool,
+ filenames: PropTypes.object,
+ softwareProductId: PropTypes.string,
+
+ onDropMibFileToUpload: PropTypes.func,
+ onDeleteSnmpFile: PropTypes.func
+ };
+
+ state = {
+ dragging: false
+ };
+
+ render() {
+ return (
+ <div className="vsp-component-monitoring">
+ {this.renderDropzoneWithType(fileTypes.VES_EVENT)}
+ {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)}
+ {this.renderDropzoneWithType(fileTypes.SNMP_POLL)}
+ </div>
+ );
+ }
+
+ renderDropzoneWithType(type) {
+ let { isReadOnlyMode, filenames } = this.props;
+ let fileByType = type2Name[type];
+ let fileName = filenames ? filenames[fileByType] : undefined;
+ let refAndName = `fileInput${type.toString()}`;
+ let typeDisplayName = type2Title[type];
+ return (
+ <Dropzone
+ className={`dropzone ${
+ this.state.dragging ? 'active-dragging' : ''
+ }`}
+ onDrop={(acceptedFiles, rejectedFiles) =>
+ this.handleImport(acceptedFiles, rejectedFiles, {
+ isReadOnlyMode,
+ type,
+ refAndName
+ })
+ }
+ onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
+ onDragLeave={() => this.setState({ dragging: false })}
+ multiple={false}
+ disableClick={true}
+ ref={refAndName}
+ name={refAndName}
+ accept=".zip">
+ <div className="draggable-wrapper">
+ <div className="section-title">{typeDisplayName}</div>
+ {fileName
+ ? this.renderUploadedFileName(
+ fileName,
+ type,
+ isReadOnlyMode
+ )
+ : this.renderUploadButton(refAndName)}
+ </div>
+ </Dropzone>
+ );
+ }
+
+ renderUploadButton(refAndName) {
+ let { isReadOnlyMode } = this.props;
+ return (
+ <DraggableUploadFileBox
+ dataTestId={`monitoring-upload-${refAndName}`}
+ className="software-product-landing-view-top-block-col-upl"
+ isReadOnlyMode={isReadOnlyMode}
+ onClick={() => this.refs[refAndName].open()}
+ />
+ );
+ }
+
+ renderUploadedFileName(filename, type, isReadOnlyMode) {
+ return (
+ <div className="monitoring-file">
+ <Button color="white" disabled={true} className="filename">
+ {filename}
+ </Button>
+
+ <Button
+ color="gray"
+ data-test-id={`monitoring-delete-${type}`}
+ disabled={isReadOnlyMode}
+ onClick={() => this.props.onDeleteFile(type)}
+ iconName="close"
+ className="delete"
+ />
+ </div>
+ );
+ }
+
+ handleOnDragEnter(isReadOnlyMode) {
+ if (!isReadOnlyMode) {
+ this.setState({ dragging: true });
+ }
+ }
+
+ handleImport(files, rejectedFiles, { isReadOnlyMode, type, refAndName }) {
+ if (isReadOnlyMode) {
+ return;
+ }
+ if (files.length > 0) {
+ this.setState({ dragging: false });
+ let file = files[0];
+ let formData = new FormData();
+ formData.append('upload', file);
+ this.refs[refAndName].value = '';
+ this.props.onDropMibFileToUpload(formData, type);
+ } else if (rejectedFiles.length > 0) {
+ this.setState({ dragging: false });
+ this.props.onFileUploadError();
+ }
+ }
}
export default SoftwareProductComponentsMonitoringView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
index d4aaf7cc7e..e705618a65 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreation.js
@@ -13,39 +13,55 @@
* 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 NICCreationActionHelper from './NICCreationActionHelper.js';
import NICCreationView from './NICCreationView.jsx';
import SoftwareProductComponentsNetworkActionHelper from '../SoftwareProductComponentsNetworkActionHelper.js';
-import {networkTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+ networkTypes,
+ NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents} = softwareProduct;
- let {network: {nicCreation = {}}} = softwareProductComponents;
- let {data, genericFieldInfo, formReady} = nicCreation;
- data = {...data, networkType: networkTypes.EXTERNAL};
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductComponents
+ } = softwareProduct;
+ let { network: { nicCreation = {} } } = softwareProductComponents;
+ let { data, genericFieldInfo, formReady } = nicCreation;
+ data = { ...data, networkType: networkTypes.EXTERNAL };
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- return {
- currentSoftwareProduct,
- data,
- genericFieldInfo,
- isFormValid,
- formReady
- };
+ return {
+ currentSoftwareProduct,
+ data,
+ genericFieldInfo,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: NIC_CREATION_FORM_NAME}),
- onCancel: () => NICCreationActionHelper.close(dispatch),
- onSubmit: ({nic, componentId}) => {
- SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {nic, softwareProductId, componentId, version});
- NICCreationActionHelper.close(dispatch);
- },
- onValidateForm: () => ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: NIC_CREATION_FORM_NAME
+ }),
+ onCancel: () => NICCreationActionHelper.close(dispatch),
+ onSubmit: ({ nic, componentId }) => {
+ SoftwareProductComponentsNetworkActionHelper.createNIC(dispatch, {
+ nic,
+ softwareProductId,
+ componentId,
+ version
+ });
+ NICCreationActionHelper.close(dispatch);
+ },
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, NIC_CREATION_FORM_NAME)
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(NICCreationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
index a40b32d51a..4f200ce33f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
@@ -13,35 +13,37 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from '../SoftwareProductComponentsNetworkConstants';
+import { actionTypes } from '../SoftwareProductComponentsNetworkConstants';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
export default {
+ open(
+ dispatch,
+ { softwareProductId, componentId, modalClassName, version }
+ ) {
+ dispatch({
+ type: actionTypes.NICCreation.OPEN
+ });
- open(dispatch, {softwareProductId, componentId, modalClassName, version}) {
- dispatch({
- type: actionTypes.NICCreation.OPEN
- });
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.NIC_CREATION,
+ title: i18n('Create NEW NIC'),
+ modalClassName,
+ modalComponentProps: { softwareProductId, componentId, version }
+ }
+ });
+ },
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.NIC_CREATION,
- title: i18n('Create NEW NIC'),
- modalClassName,
- modalComponentProps: {softwareProductId, componentId, version}
- }
- });
- },
-
- close(dispatch){
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- dispatch({
- type: actionTypes.NICCreation.CLEAR_DATA
- });
- }
+ close(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ dispatch({
+ type: actionTypes.NICCreation.CLEAR_DATA
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
index c7e2495b3d..8309c40451 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationReducer.js
@@ -13,37 +13,40 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, NIC_CREATION_FORM_NAME} from '../SoftwareProductComponentsNetworkConstants.js';
+import {
+ actionTypes,
+ NIC_CREATION_FORM_NAME
+} from '../SoftwareProductComponentsNetworkConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.NICCreation.OPEN:
- return {
- ...state,
- data: {},
- formName: NIC_CREATION_FORM_NAME,
- formReady: null,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data : true}]
- },
- 'networkDescription' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 50}]
- }
- }
- };
- case actionTypes.NICCreation.CLEAR_DATA:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.NICCreation.OPEN:
+ return {
+ ...state,
+ data: {},
+ formName: NIC_CREATION_FORM_NAME,
+ formReady: null,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ networkDescription: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 50 }]
+ }
+ }
+ };
+ case actionTypes.NICCreation.CLEAR_DATA:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
index 258876844a..88525c051d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
@@ -22,103 +22,136 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
const NICPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- networkId: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ networkId: PropTypes.string
});
class NICCreationView extends React.Component {
+ static propTypes = {
+ data: NICPropType,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- static propTypes = {
- data: NICPropType,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ genericFieldInfo,
+ isFormValid,
+ onValidateForm,
+ formReady
+ } = this.props;
+ let { name, description, networkDescription } = data;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref={form => (this.form = form)}
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ submitButtonText={
+ data.id ? i18n('Save') : i18n('Create')
+ }
+ onReset={() => this.props.onCancel()}
+ labledButtons={true}
+ isValid={isFormValid}
+ onValidateForm={() => onValidateForm()}
+ formReady={formReady}>
+ <GridSection hasLastColSet>
+ <GridItem colSpan={4} lastColInRow>
+ <Input
+ value={name}
+ label={i18n('Name')}
+ data-test-id="nic-name"
+ onChange={name => onDataChanged({ name })}
+ isRequired={true}
+ type="text"
+ isValid={genericFieldInfo['name'].isValid}
+ errorText={
+ genericFieldInfo['name'].errorText
+ }
+ className="field-section"
+ />
+ <Input
+ value={description}
+ label={i18n('Description')}
+ data-test-id="nic-description"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ isValid={
+ genericFieldInfo['description'].isValid
+ }
+ errorText={
+ genericFieldInfo['description']
+ .errorText
+ }
+ type="textarea"
+ className="field-section"
+ />
+ </GridItem>
+ </GridSection>
+ <GridSection title={i18n('Network')} hasLastColSet>
+ <GridItem colSpan={2}>
+ <div className="form-group">
+ <label className="control-label">
+ {i18n('Network Type')}
+ </label>
+ <div className="network-type-radio">
+ <Input
+ label={i18n('Internal')}
+ disabled
+ checked={false}
+ data-test-id="nic-internal"
+ className="network-radio disabled"
+ type="radio"
+ />
+ <Input
+ label={i18n('External')}
+ disabled
+ checked={true}
+ data-test-id="nic-external"
+ className="network-radio disabled"
+ type="radio"
+ />
+ </div>
+ </div>
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ value={networkDescription}
+ label={i18n('Network Description')}
+ data-test-id="nic-network-description"
+ onChange={networkDescription =>
+ onDataChanged({ networkDescription })
+ }
+ isValid={
+ genericFieldInfo['networkDescription']
+ .isValid
+ }
+ errorText={
+ genericFieldInfo['networkDescription']
+ .errorText
+ }
+ type="text"
+ className="field-section"
+ />
+ </GridItem>
+ </GridSection>
+ </Form>
+ )}
+ </div>
+ );
+ }
- render() {
- let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props;
- let {name, description, networkDescription} = data;
- return (
- <div>
- {genericFieldInfo && <Form
- ref={(form) => this.form = form}
- hasButtons={true}
- onSubmit={ () => this.submit() }
- submitButtonText={data.id ? i18n('Save') : i18n('Create')}
- onReset={ () => this.props.onCancel() }
- labledButtons={true}
- isValid={isFormValid}
- onValidateForm={() => onValidateForm()}
- formReady={formReady} >
- <GridSection hasLastColSet>
- <GridItem colSpan={4} lastColInRow>
- <Input
- value={name}
- label={i18n('Name')}
- data-test-id='nic-name'
- onChange={name => onDataChanged({name})}
- isRequired={true}
- type='text'
- isValid={genericFieldInfo['name'].isValid}
- errorText={genericFieldInfo['name'].errorText}
- className='field-section'/>
- <Input
- value={description}
- label={i18n('Description')}
- data-test-id='nic-description'
- onChange={description => onDataChanged({description})}
- isValid={genericFieldInfo['description'].isValid}
- errorText={genericFieldInfo['description'].errorText}
- type='textarea'
- className='field-section'/>
- </GridItem>
- </GridSection>
- <GridSection title={i18n('Network')} hasLastColSet>
- <GridItem colSpan={2}>
- <div className='form-group'>
- <label className='control-label'>{i18n('Network Type')}</label>
- <div className='network-type-radio'>
- <Input
- label={i18n('Internal')}
- disabled
- checked={false}
- data-test-id='nic-internal'
- className='network-radio disabled'
- type='radio'/>
- <Input
- label={i18n('External')}
- disabled
- checked={true}
- data-test-id='nic-external'
- className='network-radio disabled'
- type='radio'/>
- </div>
- </div>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- value={networkDescription}
- label={i18n('Network Description')}
- data-test-id='nic-network-description'
- onChange={networkDescription => onDataChanged({networkDescription})}
- isValid={genericFieldInfo['networkDescription'].isValid}
- errorText={genericFieldInfo['networkDescription'].errorText}
- type='text'
- className='field-section'/>
- </GridItem>
- </GridSection>
- </Form>}
- </div>
- );
- }
-
-
- submit() {
- const {data: nic, componentId} = this.props;
- this.props.onSubmit({nic, componentId});
- }
+ submit() {
+ const { data: nic, componentId } = this.props;
+ this.props.onSubmit({ nic, componentId });
+ }
}
export default NICCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
index 93bd0bd67e..d7205b46ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
@@ -13,56 +13,93 @@
* 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 SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
import SoftwareProductComponentsNICEditorView from './SoftwareProductComponentsNICEditorView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
-export const mapStateToProps = ({softwareProduct, currentScreen}) => {
-
- let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
- let {network: {nicEditor = {}}} = softwareProductComponents;
- let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = nicEditor;
- let {props: {isReadOnlyMode}} = currentScreen;
- let {onboardingMethod} = currentSoftwareProduct;
- let protocols = [];
- if(qdata && qdata.protocols && qdata.protocols.protocols && qdata.protocols.protocols.length){
- protocols = qdata.protocols.protocols;
- }
- let {version} = currentSoftwareProduct;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo);
-
- return {
- currentSoftwareProduct,
- isValidityData,
- version,
- data,
- qdata,
- dataMap,
- isFormValid,
- formReady,
- genericFieldInfo,
- qgenericFieldInfo,
- isReadOnlyMode,
- protocols,
- isManual: onboardingMethod === onboardingMethodTypes.MANUAL
- };
+export const mapStateToProps = ({ softwareProduct, currentScreen }) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = {},
+ isValidityData = true
+ },
+ softwareProductComponents
+ } = softwareProduct;
+ let { network: { nicEditor = {} } } = softwareProductComponents;
+ let {
+ data,
+ qdata,
+ genericFieldInfo,
+ qgenericFieldInfo,
+ dataMap,
+ formReady
+ } = nicEditor;
+ let { props: { isReadOnlyMode } } = currentScreen;
+ let { onboardingMethod } = currentSoftwareProduct;
+ let protocols = [];
+ if (
+ qdata &&
+ qdata.protocols &&
+ qdata.protocols.protocols &&
+ qdata.protocols.protocols.length
+ ) {
+ protocols = qdata.protocols.protocols;
+ }
+ let { version } = currentSoftwareProduct;
+ let isFormValid =
+ ValidationHelper.checkFormValid(genericFieldInfo) &&
+ ValidationHelper.checkFormValid(qgenericFieldInfo);
+ return {
+ currentSoftwareProduct,
+ isValidityData,
+ version,
+ data,
+ qdata,
+ dataMap,
+ isFormValid,
+ formReady,
+ genericFieldInfo,
+ qgenericFieldInfo,
+ isReadOnlyMode,
+ protocols,
+ isManual: onboardingMethod === onboardingMethodTypes.MANUAL
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData,
- formName: forms.NIC_EDIT_FORM}),
- onSubmit: ({data, qdata}) => SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}),
- onCancel: () => SoftwareProductComponentsNetworkActionHelper.closeNICEditor(dispatch),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
- qName: NIC_QUESTIONNAIRE}),
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, componentId, version }
+) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: forms.NIC_EDIT_FORM
+ }),
+ onSubmit: ({ data, qdata }) =>
+ SoftwareProductComponentsNetworkActionHelper.saveNICDataAndQuestionnaire(
+ dispatch,
+ { softwareProductId, version, componentId, data, qdata }
+ ),
+ onCancel: () =>
+ SoftwareProductComponentsNetworkActionHelper.closeNICEditor(
+ dispatch
+ ),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, forms.NIC_EDIT_FORM),
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: NIC_QUESTIONNAIRE
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsNICEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductComponentsNICEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
index dd37135d77..2da9b4b76b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorReducer.js
@@ -13,37 +13,37 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.NICEditor.FILL_DATA:
- return {
- ...state,
- data: action.nic,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data : true}]
- },
- 'networkDescription' : {
- isValid: true,
- errorText: '',
- validations: []
- }
- },
- formName: forms.NIC_EDIT_FORM
- };
- case actionTypes.NICEditor.CLEAR_DATA:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.NICEditor.FILL_DATA:
+ return {
+ ...state,
+ data: action.nic,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ networkDescription: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ },
+ formName: forms.NIC_EDIT_FORM
+ };
+ case actionTypes.NICEditor.CLEAR_DATA:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
index fbb3d53033..df2efbe39e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
@@ -26,48 +26,113 @@ import Protocols from './nicEditorComponents/Protocols.jsx';
import NameAndPurpose from './nicEditorComponents/NameAndPurpose.jsx';
class SoftwareProductComponentsNetworkEditorView extends React.Component {
+ render() {
+ let {
+ onCancel,
+ onValidateForm,
+ isReadOnlyMode,
+ isFormValid,
+ formReady,
+ data = {},
+ qgenericFieldInfo,
+ dataMap,
+ onDataChanged,
+ protocols,
+ onQDataChanged,
+ isManual,
+ genericFieldInfo
+ } = this.props;
+ let {
+ name,
+ description,
+ networkName,
+ networkType,
+ networkDescription
+ } = data;
+ let netWorkValues = [
+ {
+ enum: networkName,
+ title: networkName
+ }
+ ];
+ return (
+ <div>
+ {qgenericFieldInfo && (
+ <Form
+ ref={form => {
+ this.form = form;
+ }}
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ isValid={isFormValid}
+ formReady={formReady}
+ onValidateForm={() => onValidateForm()}
+ className="vsp-components-network-editor">
+ <div className="editor-data">
+ <NameAndPurpose
+ isManual={isManual}
+ name={name}
+ description={description}
+ onDataChanged={onDataChanged}
+ isReadOnlyMode={isReadOnlyMode}
+ genericFieldInfo={genericFieldInfo}
+ />
+ <Protocols
+ protocols={protocols}
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <IpConfig
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <Network
+ networkDescription={networkDescription}
+ onDataChanged={onDataChanged}
+ networkValues={netWorkValues}
+ isReadOnlyMode={isReadOnlyMode}
+ networkType={networkType}
+ />
+ <Sizing
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <InFlowTraffic
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <OutFlowTraffic
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <FlowLength
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ <Acceptable
+ qgenericFieldInfo={qgenericFieldInfo}
+ dataMap={dataMap}
+ onQDataChanged={onQDataChanged}
+ />
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
- render() {
- let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, qgenericFieldInfo,
- dataMap, onDataChanged, protocols, onQDataChanged, isManual, genericFieldInfo} = this.props;
- let {name, description, networkName, networkType, networkDescription} = data;
- let netWorkValues = [{
- enum: networkName,
- title: networkName
- }];
- return (
- <div>
- {qgenericFieldInfo && <Form
- ref={(form) => { this.form = form; }}
- hasButtons={true}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- isValid={isFormValid}
- formReady={formReady}
- onValidateForm={() => onValidateForm() }
- className='vsp-components-network-editor'>
- <div className='editor-data'>
- <NameAndPurpose isManual={isManual} name={name} description={description} onDataChanged={onDataChanged} isReadOnlyMode={isReadOnlyMode} genericFieldInfo={genericFieldInfo} />
- <Protocols protocols={protocols} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <IpConfig dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <Network networkDescription={networkDescription} onDataChanged={onDataChanged} networkValues={netWorkValues} isReadOnlyMode={isReadOnlyMode} networkType={networkType} />
- <Sizing qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <InFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <OutFlowTraffic qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <FlowLength qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- <Acceptable qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged} />
- </div>
- </Form> }
- </div>
- );
- }
-
- submit() {
- let {data, qdata, onSubmit} = this.props;
- onSubmit({data, qdata});
- }
+ submit() {
+ let { data, qdata, onSubmit } = this.props;
+ onSubmit({ data, qdata });
+ }
}
export default SoftwareProductComponentsNetworkEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
index 5cfc88bdc9..a2e65142a2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICListReducer.js
@@ -13,16 +13,22 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.NIC_LIST_UPDATE:
- return [...action.response];
- case actionTypes.NIC_LIST_EDIT:
- const indexForEdit = state.findIndex(nic => nic.id === action.nic.id);
- return [...state.slice(0, indexForEdit), action.nic, ...state.slice(indexForEdit + 1)];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.NIC_LIST_UPDATE:
+ return [...action.response];
+ case actionTypes.NIC_LIST_EDIT:
+ const indexForEdit = state.findIndex(
+ nic => nic.id === action.nic.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.nic,
+ ...state.slice(indexForEdit + 1)
+ ];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
index 1ffbc5919f..58c816134b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
@@ -17,127 +17,223 @@ 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 './SoftwareProductComponentsNetworkConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper as modalPagesMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper as modalPagesMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
function baseUrl(softwareProductId, version, componentId) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/nics`;
}
-function createNIC({nic, vspId, componentId, version}) {
- return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
- name: nic.name,
- description: nic.description,
- networkDescription: nic.networkDescription,
- networkType: nic.networkType
- });
+function createNIC({ nic, vspId, componentId, version }) {
+ return RestAPIUtil.post(baseUrl(vspId, version, componentId), {
+ name: nic.name,
+ description: nic.description,
+ networkDescription: nic.networkDescription,
+ networkType: nic.networkType
+ });
}
-function fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`);
+function fetchNICQuestionnaire({
+ softwareProductId,
+ version,
+ componentId,
+ nicId
+}) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(
+ softwareProductId,
+ version,
+ componentId
+ )}/${nicId}/questionnaire`
+ );
}
-function fetchNIC({softwareProductId, version, componentId, nicId}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function fetchNIC({ softwareProductId, version, componentId, nicId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+ );
}
-function fetchNICsList({softwareProductId, version, componentId}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchNICsList({ softwareProductId, version, componentId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}`
+ );
}
-function deleteNIC({softwareProductId, componentId, nicId, version}) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${nicId}`);
+function deleteNIC({ softwareProductId, componentId, nicId, version }) {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version, componentId)}/${nicId}`
+ );
}
-function saveNIC({softwareProductId, version, componentId, nic: {id, name, description, networkId, networkType, networkDescription}}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{
- name,
- description,
- networkId,
- networkDescription,
- networkType
- });
+function saveNIC({
+ softwareProductId,
+ version,
+ componentId,
+ nic: { id, name, description, networkId, networkType, networkDescription }
+}) {
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version, componentId)}/${id}`,
+ {
+ name,
+ description,
+ networkId,
+ networkDescription,
+ networkType
+ }
+ );
}
-function saveNICQuestionnaire({softwareProductId, version, componentId, nicId, qdata}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${nicId}/questionnaire`, qdata);
+function saveNICQuestionnaire({
+ softwareProductId,
+ version,
+ componentId,
+ nicId,
+ qdata
+}) {
+ return RestAPIUtil.put(
+ `${baseUrl(
+ softwareProductId,
+ version,
+ componentId
+ )}/${nicId}/questionnaire`,
+ qdata
+ );
}
const SoftwareProductComponentNetworkActionHelper = {
-
- fetchNICsList(dispatch, {softwareProductId, version, componentId}) {
- return fetchNICsList({softwareProductId, version, componentId}).then((response) => {
- dispatch({
- type: actionTypes.NIC_LIST_UPDATE,
- response: response.results
- });
- });
- },
-
- openNICEditor(dispatch, {nic = {}, data = {}, softwareProductId, componentId, isReadOnlyMode, modalClassName, version}) {
- dispatch({
- type: actionTypes.NICEditor.FILL_DATA,
- nic: {...data, id: nic.id}
- });
- dispatch({
- type: GlobalModalActions.GLOBAL_MODAL_SHOW,
- data: {
- modalClassName,
- modalComponentProps: {softwareProductId, componentId, isReadOnlyMode, version},
- modalComponentName: modalPagesMapper.NIC_EDITOR,
- title: i18n('Edit NIC')
- }
- });
- },
-
- closeNICEditor(dispatch) {
- dispatch({
- type: GlobalModalActions.GLOBAL_MODAL_CLOSE
- });
- dispatch({
- type: actionTypes.NICEditor.CLEAR_DATA
- });
- },
-
- createNIC(dispatch, {nic, softwareProductId, componentId, version}){
- return createNIC({nic, vspId: softwareProductId, componentId, version}).then(() => {
- return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
- });
- },
- loadNICData({softwareProductId, version, componentId, nicId}) {
- return fetchNIC({softwareProductId, version, componentId, nicId});
- },
-
- deleteNIC(dispatch, {softwareProductId, componentId, nicId, version}) {
- return deleteNIC({softwareProductId, componentId, nicId, version}).then(() => {
- return SoftwareProductComponentNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
- });
- },
- loadNICQuestionnaire(dispatch, {softwareProductId, version, componentId, nicId}) {
- return fetchNICQuestionnaire({softwareProductId, version, componentId, nicId}).then((response) => {
- ValidationHelper.qDataLoaded(dispatch, {qName: NIC_QUESTIONNAIRE ,response: {
- qdata: response.data ? JSON.parse(response.data) : {},
- qschema: JSON.parse(response.schema)
- }});
- });
- },
-
- saveNICDataAndQuestionnaire(dispatch, {softwareProductId, version, componentId, data, qdata}) {
- SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
- return Promise.all([
- saveNICQuestionnaire({softwareProductId, version, componentId, nicId: data.id, qdata}),
- saveNIC({softwareProductId, version, componentId, nic: data}).then(() => {
- dispatch({
- type: actionTypes.NIC_LIST_EDIT,
- nic: data
- });
- })
- ]);
- }
+ fetchNICsList(dispatch, { softwareProductId, version, componentId }) {
+ return fetchNICsList({ softwareProductId, version, componentId }).then(
+ response => {
+ dispatch({
+ type: actionTypes.NIC_LIST_UPDATE,
+ response: response.results
+ });
+ }
+ );
+ },
+
+ openNICEditor(
+ dispatch,
+ {
+ nic = {},
+ data = {},
+ softwareProductId,
+ componentId,
+ isReadOnlyMode,
+ modalClassName,
+ version
+ }
+ ) {
+ dispatch({
+ type: actionTypes.NICEditor.FILL_DATA,
+ nic: { ...data, id: nic.id }
+ });
+ dispatch({
+ type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+ data: {
+ modalClassName,
+ modalComponentProps: {
+ softwareProductId,
+ componentId,
+ isReadOnlyMode,
+ version
+ },
+ modalComponentName: modalPagesMapper.NIC_EDITOR,
+ title: i18n('Edit NIC')
+ }
+ });
+ },
+
+ closeNICEditor(dispatch) {
+ dispatch({
+ type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+ });
+ dispatch({
+ type: actionTypes.NICEditor.CLEAR_DATA
+ });
+ },
+
+ createNIC(dispatch, { nic, softwareProductId, componentId, version }) {
+ return createNIC({
+ nic,
+ vspId: softwareProductId,
+ componentId,
+ version
+ }).then(() => {
+ return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+ dispatch,
+ { softwareProductId, componentId, version }
+ );
+ });
+ },
+ loadNICData({ softwareProductId, version, componentId, nicId }) {
+ return fetchNIC({ softwareProductId, version, componentId, nicId });
+ },
+
+ deleteNIC(dispatch, { softwareProductId, componentId, nicId, version }) {
+ return deleteNIC({
+ softwareProductId,
+ componentId,
+ nicId,
+ version
+ }).then(() => {
+ return SoftwareProductComponentNetworkActionHelper.fetchNICsList(
+ dispatch,
+ { softwareProductId, componentId, version }
+ );
+ });
+ },
+ loadNICQuestionnaire(
+ dispatch,
+ { softwareProductId, version, componentId, nicId }
+ ) {
+ return fetchNICQuestionnaire({
+ softwareProductId,
+ version,
+ componentId,
+ nicId
+ }).then(response => {
+ ValidationHelper.qDataLoaded(dispatch, {
+ qName: NIC_QUESTIONNAIRE,
+ response: {
+ qdata: response.data ? JSON.parse(response.data) : {},
+ qschema: JSON.parse(response.schema)
+ }
+ });
+ });
+ },
+
+ saveNICDataAndQuestionnaire(
+ dispatch,
+ { softwareProductId, version, componentId, data, qdata }
+ ) {
+ SoftwareProductComponentNetworkActionHelper.closeNICEditor(dispatch);
+ return Promise.all([
+ saveNICQuestionnaire({
+ softwareProductId,
+ version,
+ componentId,
+ nicId: data.id,
+ qdata
+ }),
+ saveNIC({
+ softwareProductId,
+ version,
+ componentId,
+ nic: data
+ }).then(() => {
+ dispatch({
+ type: actionTypes.NIC_LIST_EDIT,
+ nic: data
+ });
+ })
+ ]);
+ }
};
export default SoftwareProductComponentNetworkActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
index 8ef8fe8c18..4e361bb1a9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js
@@ -16,23 +16,23 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- NIC_LIST_EDIT: null,
- NIC_LIST_UPDATE: null,
+ NIC_LIST_EDIT: null,
+ NIC_LIST_UPDATE: null,
- NICEditor: {
- FILL_DATA: null,
- CLEAR_DATA: null,
- },
- NICCreation: {
- OPEN: null,
- CLEAR_DATA: null,
- DATA_CHANGED: null
- },
+ NICEditor: {
+ FILL_DATA: null,
+ CLEAR_DATA: null
+ },
+ NICCreation: {
+ OPEN: null,
+ CLEAR_DATA: null,
+ DATA_CHANGED: null
+ }
});
export const networkTypes = {
- EXTERNAL: 'External',
- INTERNAL: 'Internal'
+ EXTERNAL: 'External',
+ INTERNAL: 'Internal'
};
export const NIC_QUESTIONNAIRE = 'nic';
export const NIC_CREATION_FORM_NAME = 'nicCreation';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
index bb256d5d41..ac708524cf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
@@ -13,79 +13,132 @@
* 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 i18n from 'nfvo-utils/i18n/i18n.js';
import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
import SoftwareProductComponentsNetworkListView from './SoftwareProductComponentsNetworkListView.jsx';
import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.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 {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
import NICCreationActionHelper from './NICCreation/NICCreationActionHelper.js';
-import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js';
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = {},
+ isValidityData = true
+ },
+ softwareProductComponents
+ } = softwareProduct;
+ let {
+ network: { nicList = [] },
+ componentEditor: {
+ data: componentData,
+ qdata,
+ dataMap,
+ qgenericFieldInfo
+ }
+ } = softwareProductComponents;
+ let { version, onboardingMethod } = currentSoftwareProduct;
+ let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
-export const mapStateToProps = ({softwareProduct}) => {
-
- let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct;
- let {network: {nicList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents;
- let {version, onboardingMethod} = currentSoftwareProduct;
- let isManual = onboardingMethod === onboardingMethodTypes.MANUAL;
-
- return {
- version,
- componentData,
- qdata,
- dataMap,
- qgenericFieldInfo,
- isValidityData,
- nicList,
- isManual
- };
-
+ return {
+ version,
+ componentData,
+ qdata,
+ dataMap,
+ qgenericFieldInfo,
+ isValidityData,
+ nicList,
+ isManual
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => {
- return {
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
- qName: COMPONENTS_QUESTIONNAIRE}),
- onAddNic: () => NICCreationActionHelper.open(dispatch, {softwareProductId, componentId, modalClassName: 'network-nic-modal-create', version}),
- onDeleteNic: (nic) => dispatch({
- type: GlobalModalActions.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete "{name}"?', {name: nic.name}),
- onConfirmed: () => SoftwareProductComponentsNetworkActionHelper.deleteNIC(dispatch, {softwareProductId,
- componentId, nicId: nic.id, version})
- }
- }),
- onEditNicClick: (nic, isReadOnlyMode) => {
- Promise.all([
- SoftwareProductComponentsNetworkActionHelper.loadNICData({
- softwareProductId,
- version,
- componentId,
- nicId: nic.id
- }),
- SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(dispatch, {
- softwareProductId,
- version,
- componentId,
- nicId: nic.id
- })
- ]).then(
- ([{data}]) => SoftwareProductComponentsNetworkActionHelper.openNICEditor(dispatch, {nic, data,
- isReadOnlyMode, softwareProductId, componentId, modalClassName: 'network-nic-modal-edit', version})
- );
- },
- onSubmit: ({qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch,
- {softwareProductId, version,
- vspComponentId: componentId,
- qdata});
- }
-
-
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, componentId, version }
+) => {
+ return {
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: COMPONENTS_QUESTIONNAIRE
+ }),
+ onAddNic: () =>
+ NICCreationActionHelper.open(dispatch, {
+ softwareProductId,
+ componentId,
+ modalClassName: 'network-nic-modal-create',
+ version
+ }),
+ onDeleteNic: nic =>
+ dispatch({
+ type: GlobalModalActions.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete "{name}"?', {
+ name: nic.name
+ }),
+ onConfirmed: () =>
+ SoftwareProductComponentsNetworkActionHelper.deleteNIC(
+ dispatch,
+ {
+ softwareProductId,
+ componentId,
+ nicId: nic.id,
+ version
+ }
+ )
+ }
+ }),
+ onEditNicClick: (nic, isReadOnlyMode) => {
+ Promise.all([
+ SoftwareProductComponentsNetworkActionHelper.loadNICData({
+ softwareProductId,
+ version,
+ componentId,
+ nicId: nic.id
+ }),
+ SoftwareProductComponentsNetworkActionHelper.loadNICQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ componentId,
+ nicId: nic.id
+ }
+ )
+ ]).then(([{ data }]) =>
+ SoftwareProductComponentsNetworkActionHelper.openNICEditor(
+ dispatch,
+ {
+ nic,
+ data,
+ isReadOnlyMode,
+ softwareProductId,
+ componentId,
+ modalClassName: 'network-nic-modal-edit',
+ version
+ }
+ )
+ );
+ },
+ onSubmit: ({ qdata }) => {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ qdata
+ }
+ );
+ }
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsNetworkListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsNetworkListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
index 4d460c722d..c631fb24c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx
@@ -20,138 +20,203 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-import Input from'nfvo-components/input/validation/Input.jsx';
-
+import Input from 'nfvo-components/input/validation/Input.jsx';
class SoftwareProductComponentsNetworkView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
-
- render() {
- let {dataMap, qgenericFieldInfo, onQDataChanged, isReadOnlyMode} = this.props;
-
- return(
- <div className='vsp-components-network'>
- <div className='network-data'>
- <div>
-{ qgenericFieldInfo && <Form
- formReady={null}
- isValid={true}
- onSubmit={() => this.save()}
- isReadOnlyMode={isReadOnlyMode}
- hasButtons={false}>
- <h3 className='section-title'>{i18n('Network Capacity')}</h3>
- <div className='rows-section'>
- <div className='row-flex-components'>
- <div className='single-col'>
- <Input
- data-test-id='protocolWithHighestTrafficProfileAcrossAllNICs'
- label={i18n('Protocol with Highest Traffic Profile across all NICs')}
- type='select'
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- isValid={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].isValid}
- errorText={qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].errorText}
- value={dataMap['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs']}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- { qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto =>
- <option value={proto.enum} key={proto.enum}>{proto.title}</option>) }
- </Input>
- </div>
- <div className='single-col add-line-break'>
- <Input
- data-test-id='networkTransactionsPerSecond'
- label={i18n('Network Transactions per Second')}
- type='number'
- onChange={(ntps) => onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})}
- isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid}
- errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText}
- value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} />
- </div>
- <div className='empty-two-col' />
- </div>
- </div>
-
- </Form> }
- </div>
- {this.renderNicList()}
- </div>
-
- </div>
- );
- }
-
- renderNicList() {
- const {localFilter} = this.state;
- let {isReadOnlyMode, onAddNic, isManual} = this.props;
- return (
- <ListEditorView
- title={i18n('Interfaces')}
- filterValue={localFilter}
- placeholder={i18n('Filter NICs by Name')}
- isReadOnlyMode={isReadOnlyMode}
- onFilter={value => this.setState({localFilter: value})}
- onAdd={isManual ? onAddNic : null}
- plusButtonTitle={i18n('Add NIC')}
- twoColumns>
- {this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))}
- </ListEditorView>
- );
- }
+ render() {
+ let {
+ dataMap,
+ qgenericFieldInfo,
+ onQDataChanged,
+ isReadOnlyMode
+ } = this.props;
- renderNicListItem(nic, isReadOnlyMode) {
- let {id, name, description, networkName = ''} = nic;
- let {onEditNicClick, version, isManual, onDeleteNic} = this.props;
- return (
- <ListEditorItemView
- key={id}
- isReadOnlyMode={isReadOnlyMode}
- onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
- onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+ return (
+ <div className="vsp-components-network">
+ <div className="network-data">
+ <div>
+ {qgenericFieldInfo && (
+ <Form
+ formReady={null}
+ isValid={true}
+ onSubmit={() => this.save()}
+ isReadOnlyMode={isReadOnlyMode}
+ hasButtons={false}>
+ <h3 className="section-title">
+ {i18n('Network Capacity')}
+ </h3>
+ <div className="rows-section">
+ <div className="row-flex-components">
+ <div className="single-col">
+ <Input
+ data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs"
+ label={i18n(
+ 'Protocol with Highest Traffic Profile across all NICs'
+ )}
+ type="select"
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ isValid={
+ qgenericFieldInfo[
+ 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+ ].errorText
+ }
+ value={
+ dataMap[
+ 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+ ]
+ }
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[
+ selectedIndex
+ ].value;
+ onQDataChanged({
+ 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val
+ });
+ }}>
+ <option
+ key="placeholder"
+ value="">
+ {i18n('Select...')}
+ </option>
+ {qgenericFieldInfo[
+ 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
+ ].enum.map(proto => (
+ <option
+ value={proto.enum}
+ key={proto.enum}>
+ {proto.title}
+ </option>
+ ))}
+ </Input>
+ </div>
+ <div className="single-col add-line-break">
+ <Input
+ data-test-id="networkTransactionsPerSecond"
+ label={i18n(
+ 'Network Transactions per Second'
+ )}
+ type="number"
+ onChange={ntps =>
+ onQDataChanged({
+ 'network/networkCapacity/networkTransactionsPerSecond': ntps
+ })
+ }
+ isValid={
+ qgenericFieldInfo[
+ 'network/networkCapacity/networkTransactionsPerSecond'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'network/networkCapacity/networkTransactionsPerSecond'
+ ].errorText
+ }
+ value={
+ dataMap[
+ 'network/networkCapacity/networkTransactionsPerSecond'
+ ]
+ }
+ />
+ </div>
+ <div className="empty-two-col" />
+ </div>
+ </div>
+ </Form>
+ )}
+ </div>
+ {this.renderNicList()}
+ </div>
+ </div>
+ );
+ }
- <ListEditorItemViewField>
- <div className='name'>{name}</div>
- </ListEditorItemViewField>
- <ListEditorItemViewField>
- <div className={isManual ? 'details-col' : 'details'}>
- <div className={isManual ? 'manual-title' : 'title'}>{i18n('Purpose of NIC')}</div>
- {description && <div className={isManual ? 'description' : ''}>{description}</div>}
- </div>
- {!isManual && <div className='details'>
- <div className='title'>{i18n('Network')}</div>
- <div className='artifact-name'>{networkName}</div>
- </div>}
- </ListEditorItemViewField>
+ renderNicList() {
+ const { localFilter } = this.state;
+ let { isReadOnlyMode, onAddNic, isManual } = this.props;
+ return (
+ <ListEditorView
+ title={i18n('Interfaces')}
+ filterValue={localFilter}
+ placeholder={i18n('Filter NICs by Name')}
+ isReadOnlyMode={isReadOnlyMode}
+ onFilter={value => this.setState({ localFilter: value })}
+ onAdd={isManual ? onAddNic : null}
+ plusButtonTitle={i18n('Add NIC')}
+ twoColumns>
+ {this.filterList().map(nic =>
+ this.renderNicListItem(nic, isReadOnlyMode)
+ )}
+ </ListEditorView>
+ );
+ }
- </ListEditorItemView>
- );
- }
+ renderNicListItem(nic, isReadOnlyMode) {
+ let { id, name, description, networkName = '' } = nic;
+ let { onEditNicClick, version, isManual, onDeleteNic } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ isReadOnlyMode={isReadOnlyMode}
+ onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
+ onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
+ <ListEditorItemViewField>
+ <div className="name">{name}</div>
+ </ListEditorItemViewField>
+ <ListEditorItemViewField>
+ <div className={isManual ? 'details-col' : 'details'}>
+ <div className={isManual ? 'manual-title' : 'title'}>
+ {i18n('Purpose of NIC')}
+ </div>
+ {description && (
+ <div className={isManual ? 'description' : ''}>
+ {description}
+ </div>
+ )}
+ </div>
+ {!isManual && (
+ <div className="details">
+ <div className="title">{i18n('Network')}</div>
+ <div className="artifact-name">{networkName}</div>
+ </div>
+ )}
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ );
+ }
- filterList() {
- let {nicList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return nicList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return nicList;
- }
- }
+ filterList() {
+ let { nicList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return nicList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return nicList;
+ }
+ }
- save() {
- let {onSubmit, qdata, version} = this.props;
- return onSubmit({qdata, version});
- }
+ save() {
+ let { onSubmit, qdata, version } = this.props;
+ return onSubmit({ qdata, version });
+ }
}
export default SoftwareProductComponentsNetworkView;
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
index b2133ad5d8..52c5cdde3d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -15,121 +15,184 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
function baseUrl(softwareProductId, version, componentId) {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${version.id}/components/${componentId}/processes`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${
+ version.id
+ }/components/${componentId}/processes`;
}
-function fetchProcessesList({softwareProductId, version, componentId}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`);
+function fetchProcessesList({ softwareProductId, version, componentId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version, componentId)}`
+ );
}
-function deleteProcess({softwareProductId, version, componentId, processId}) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${processId}`);
+function deleteProcess({ softwareProductId, version, componentId, processId }) {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version, componentId)}/${processId}`
+ );
}
-function putProcess({softwareProductId, version, componentId, process}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${process.id}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+function putProcess({ softwareProductId, version, componentId, process }) {
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version, componentId)}/${process.id}`,
+ {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ }
+ );
}
-function postProcess({softwareProductId, version, componentId, process}) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+function postProcess({ softwareProductId, version, componentId, process }) {
+ return RestAPIUtil.post(
+ `${baseUrl(softwareProductId, version, componentId)}`,
+ {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ }
+ );
}
-function uploadFileToProcess({softwareProductId, version, processId, componentId, formData}) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version, componentId)}/${processId}/upload`, formData);
+function uploadFileToProcess({
+ softwareProductId,
+ version,
+ processId,
+ componentId,
+ formData
+}) {
+ return RestAPIUtil.post(
+ `${baseUrl(
+ softwareProductId,
+ version,
+ componentId
+ )}/${processId}/upload`,
+ formData
+ );
}
-
-
const SoftwareProductComponentProcessesActionHelper = {
- fetchProcessesList(dispatch, {softwareProductId, version, componentId}) {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
- processesList: []
- });
-
- return fetchProcessesList({softwareProductId, version, componentId}).then(response => {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
- processesList: response.results
- });
- });
- },
-
- deleteProcess(dispatch, {process, softwareProductId, version, componentId}) {
- return deleteProcess({softwareProductId, version, processId:process.id, componentId}).then(() => {
- dispatch({
- type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
- processId: process.id
- });
- });
-
- },
-
- saveProcess(dispatch, {softwareProductId, version, componentId, previousProcess, process}) {
- if (previousProcess) {
- return putProcess({softwareProductId, version, componentId, process}).then(() => {
- if (process.formData && process.formData.name !== previousProcess.artifactName){
- uploadFileToProcess({softwareProductId, version, processId: process.id, formData: process.formData, componentId});
- }
- dispatch({
- type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
- process
- });
- });
- }
- else {
- return postProcess({softwareProductId, version, componentId, process}).then(response => {
- if (process.formData) {
- uploadFileToProcess({softwareProductId, version, processId: response.value, formData: process.formData, componentId});
- }
- dispatch({
- type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
- process: {
- ...process,
- id: response.value
- }
- });
- });
- }
- },
-
- hideDeleteConfirm(dispatch) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
- processToDelete: false
- });
- },
-
- openDeleteProcessesConfirm(dispatch, {process} ) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
- processToDelete: process
- });
- },
-
- openEditor(dispatch, process = {}) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
- process
- });
- },
- closeEditor(dispatch) {
- dispatch({
- type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
- });
- }
+ fetchProcessesList(dispatch, { softwareProductId, version, componentId }) {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+ processesList: []
+ });
+
+ return fetchProcessesList({
+ softwareProductId,
+ version,
+ componentId
+ }).then(response => {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+ processesList: response.results
+ });
+ });
+ },
+
+ deleteProcess(
+ dispatch,
+ { process, softwareProductId, version, componentId }
+ ) {
+ return deleteProcess({
+ softwareProductId,
+ version,
+ processId: process.id,
+ componentId
+ }).then(() => {
+ dispatch({
+ type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+ processId: process.id
+ });
+ });
+ },
+
+ saveProcess(
+ dispatch,
+ { softwareProductId, version, componentId, previousProcess, process }
+ ) {
+ if (previousProcess) {
+ return putProcess({
+ softwareProductId,
+ version,
+ componentId,
+ process
+ }).then(() => {
+ if (
+ process.formData &&
+ process.formData.name !== previousProcess.artifactName
+ ) {
+ uploadFileToProcess({
+ softwareProductId,
+ version,
+ processId: process.id,
+ formData: process.formData,
+ componentId
+ });
+ }
+ dispatch({
+ type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+ process
+ });
+ });
+ } else {
+ return postProcess({
+ softwareProductId,
+ version,
+ componentId,
+ process
+ }).then(response => {
+ if (process.formData) {
+ uploadFileToProcess({
+ softwareProductId,
+ version,
+ processId: response.value,
+ formData: process.formData,
+ componentId
+ });
+ }
+ dispatch({
+ type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+ process: {
+ ...process,
+ id: response.value
+ }
+ });
+ });
+ }
+ },
+
+ hideDeleteConfirm(dispatch) {
+ dispatch({
+ type:
+ actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+ processToDelete: false
+ });
+ },
+
+ openDeleteProcessesConfirm(dispatch, { process }) {
+ dispatch({
+ type:
+ actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+ processToDelete: process
+ });
+ },
+
+ openEditor(dispatch, process = {}) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
+ process
+ });
+ },
+ closeEditor(dispatch) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
+ });
+ }
};
export default SoftwareProductComponentProcessesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
index d15432b3fb..e3ce4f8007 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
@@ -16,21 +16,22 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
- EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
- DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
- SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
- SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
- FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
- SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
+ ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+ EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+ DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+ SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
+ SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
+ FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
+ SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null
});
export const optionsInputValues = {
- PROCESS_TYPE: [
- {title: 'Select...', enum: ''},
- {title: 'Lifecycle Operations', enum: 'Lifecycle_Operations'},
- {title: 'Other', enum: 'Other'}
- ]
+ PROCESS_TYPE: [
+ { title: 'Select...', enum: '' },
+ { title: 'Lifecycle Operations', enum: 'Lifecycle_Operations' },
+ { title: 'Other', enum: 'Other' }
+ ]
};
-export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM = 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
+export const SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM =
+ 'SOFTWAREPRODUCTPROCESSCOMPONENTSEDITORFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
index 9502e24b1a..9d2bf34b78 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
@@ -13,44 +13,68 @@
* 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper';
import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx';
-import {SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import { SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM } from './SoftwareProductComponentProcessesConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
- let {processesList = [], processesEditor = {}} = componentProcesses;
- let {data, genericFieldInfo, formReady} = processesEditor;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductComponents: { componentProcesses = {} }
+ } = softwareProduct;
+ let { processesList = [], processesEditor = {} } = componentProcesses;
+ let { data, genericFieldInfo, formReady } = processesEditor;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let previousData;
- const processId = data ? data.id : null;
- if(processId) {
- previousData = processesList.find(process => process.id === processId);
- }
+ let previousData;
+ const processId = data ? data.id : null;
+ if (processId) {
+ previousData = processesList.find(process => process.id === processId);
+ }
- return {
- data,
- genericFieldInfo,
- previousData,
- isFormValid,
- formReady
- };
+ return {
+ data,
+ genericFieldInfo,
+ previousData,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
-
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM}),
- onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
- onSubmit: ({previousProcess, process}) => {
- SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
- SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, componentId, process});
- },
- onValidateForm: () => ValidationHelper.validateForm(dispatch, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM)
- };
+const mapActionsToProps = (
+ dispatch,
+ { softwareProductId, version, componentId }
+) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+ }),
+ onCancel: () =>
+ SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
+ onSubmit: ({ previousProcess, process }) => {
+ SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
+ SoftwareProductComponentProcessesActionHelper.saveProcess(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ previousProcess,
+ componentId,
+ process
+ }
+ );
+ },
+ onValidateForm: () =>
+ ValidationHelper.validateForm(
+ dispatch,
+ SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+ )
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductComponentProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
index 9afaa6d5fd..fd211734df 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
@@ -13,42 +13,48 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM} from './SoftwareProductComponentProcessesConstants.js';
+import {
+ actionTypes,
+ SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM
+} from './SoftwareProductComponentProcessesConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
- return {
- ...state,
- formReady: null,
- formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
- genericFieldInfo: {
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'artifactName' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'type' : {
- isValid: true,
- errorText: '',
- validations: []
- }
- },
- data: action.process
- };
- case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_FORM,
+ genericFieldInfo: {
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ artifactName: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ type: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ },
+ data: action.process
+ };
+ case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 9841ecbae7..132ebe86fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -14,17 +14,18 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
+import { optionsInputValues as ComponentProcessesOptionsInputValues } from './SoftwareProductComponentProcessesConstants.js';
import SoftwareProductProcessesEditorForm from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx';
-
class SoftwareProductProcessesEditorView extends React.Component {
-
- render() {
- return (
- <SoftwareProductProcessesEditorForm optionsInputValues={ComponentProcessesOptionsInputValues} {...this.props}/>
- );
- }
+ render() {
+ return (
+ <SoftwareProductProcessesEditorForm
+ optionsInputValues={ComponentProcessesOptionsInputValues}
+ {...this.props}
+ />
+ );
+ }
}
export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
index 2a7152ef8b..cb6d25a6ac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
@@ -13,45 +13,64 @@
* 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
-export const mapStateToProps = ({softwareProduct}) => {
-
- let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
- let{processesList = [], processesEditor = {}} = componentProcesses;
- let {data} = processesEditor;
-
- return {
- currentSoftwareProduct,
- isValidityData,
- processesList,
- isDisplayModal: Boolean(data),
- isModalInEditMode: Boolean(data && data.id)
- };
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = {},
+ isValidityData = true
+ },
+ softwareProductComponents: { componentProcesses = {} }
+ } = softwareProduct;
+ let { processesList = [], processesEditor = {} } = componentProcesses;
+ let { data } = processesEditor;
+ return {
+ currentSoftwareProduct,
+ isValidityData,
+ processesList,
+ isDisplayModal: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {componentId, softwareProductId, version}) => {
-
- return {
- onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
- onEditProcess: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
- onDeleteProcess: (process) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=> SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch,
- {process, softwareProductId, version, componentId})
- }
- })
- };
+const mapActionsToProps = (
+ dispatch,
+ { componentId, softwareProductId, version }
+) => {
+ return {
+ onAddProcess: () =>
+ SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
+ onEditProcess: process =>
+ SoftwareProductComponentProcessesActionHelper.openEditor(
+ dispatch,
+ process
+ ),
+ onDeleteProcess: process =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete "{name}"?', {
+ name: process.name
+ }),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ SoftwareProductComponentProcessesActionHelper.deleteProcess(
+ dispatch,
+ { process, softwareProductId, version, componentId }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsProcessesListView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductComponentsProcessesListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
index 98e24a9c21..d406f02c19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
@@ -13,20 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+import { actionTypes } from './SoftwareProductComponentProcessesConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
- return [...action.processesList];
- case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
- const indexForEdit = state.findIndex(process => process.id === action.process.id);
- return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
- case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
- return [...state, action.process];
- case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
- return state.filter(process => process.id !== action.processId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
+ return [...action.processesList];
+ case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+ const indexForEdit = state.findIndex(
+ process => process.id === action.process.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.process,
+ ...state.slice(indexForEdit + 1)
+ ];
+ case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+ return [...state, action.process];
+ case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+ return state.filter(process => process.id !== action.processId);
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
index 27c4b9f429..8fa2bffb27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -21,55 +21,73 @@ import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesE
import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx';
class SoftwareProductProcessesView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
+ static propTypes = {
+ onAddProcess: PropTypes.func,
+ onEditProcess: PropTypes.func,
+ onDeleteProcess: PropTypes.func,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ onStorageSelect: PropTypes.func,
+ componentId: PropTypes.string,
+ softwareProductId: PropTypes.string,
+ currentSoftwareProduct: PropTypes.object
+ };
- static propTypes = {
- onAddProcess: PropTypes.func,
- onEditProcess: PropTypes.func,
- onDeleteProcess: PropTypes.func,
- isDisplayModal: PropTypes.bool,
- isModalInEditMode: PropTypes.bool,
- onStorageSelect: PropTypes.func,
- componentId: PropTypes.string,
- softwareProductId: PropTypes.string,
- currentSoftwareProduct: PropTypes.object
- };
-
- render() {
- return (
- <div className='vsp-processes-page'>
- <div className='software-product-view'>
- <div className='software-product-landing-view-right-side vsp-components-processes-page flex-column'>
- {this.renderEditor()}
- <SoftwareProductProcessListView addButtonTitle={i18n('Add Component Process Details')} {...this.props}/>
- </div>
- </div>
- </div>
- );
- }
-
- renderEditor() {
- let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
- return (
- <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal'>
- <Modal.Header>
- <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
- </Modal.Header>
- <Modal.Body className='edit-process-modal'>
- <SoftwareProductProcessesEditor
- componentId={componentId}
- softwareProductId={softwareProductId}
- version={version}
- isReadOnlyMode={isReadOnlyMode}/>
- </Modal.Body>
- </Modal>
-
- );
- }
+ render() {
+ return (
+ <div className="vsp-processes-page">
+ <div className="software-product-view">
+ <div className="software-product-landing-view-right-side vsp-components-processes-page flex-column">
+ {this.renderEditor()}
+ <SoftwareProductProcessListView
+ addButtonTitle={i18n(
+ 'Add Component Process Details'
+ )}
+ {...this.props}
+ />
+ </div>
+ </div>
+ </div>
+ );
+ }
+ renderEditor() {
+ let {
+ softwareProductId,
+ version,
+ componentId,
+ isReadOnlyMode,
+ isDisplayModal,
+ isModalInEditMode
+ } = this.props;
+ return (
+ <Modal
+ show={isDisplayModal}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal">
+ <Modal.Header>
+ <Modal.Title>
+ {isModalInEditMode
+ ? i18n('Edit Process Details')
+ : i18n('Create New Process Details')}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body className="edit-process-modal">
+ <SoftwareProductProcessesEditor
+ componentId={componentId}
+ softwareProductId={softwareProductId}
+ version={version}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ </Modal.Body>
+ </Modal>
+ );
+ }
}
export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
index ca27a76a18..8da9b99a33 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorage.js
@@ -13,32 +13,57 @@
* 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import SoftwareProductComponentsActionHelper from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsActionHelper.js';
import SoftwareProductComponentStorageView from './SoftwareProductComponentStorageView.jsx';
-import {COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+import { COMPONENTS_QUESTIONNAIRE } from '../SoftwareProductComponentsConstants.js';
-const mapStateToProps = ({softwareProduct: {softwareProductComponents}}) => {
- let {componentEditor: {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap}} = softwareProductComponents;
+const mapStateToProps = ({
+ softwareProduct: { softwareProductComponents }
+}) => {
+ let {
+ componentEditor: {
+ qdata,
+ qgenericFieldInfo: qGenericFieldInfo,
+ dataMap
+ }
+ } = softwareProductComponents;
- return {
- qdata,
- qGenericFieldInfo,
- dataMap
- };
+ return {
+ qdata,
+ qGenericFieldInfo,
+ dataMap
+ };
};
-const mapActionToProps = (dispatch, {softwareProductId, version, componentId}) => {
- return {
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
- onSubmit: ({qdata}) => {
- return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata});
- }
- };
+const mapActionToProps = (
+ dispatch,
+ { softwareProductId, version, componentId }
+) => {
+ return {
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: COMPONENTS_QUESTIONNAIRE
+ }),
+ onSubmit: ({ qdata }) => {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ qdata
+ }
+ );
+ }
+ };
};
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true}) (SoftwareProductComponentStorageView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+ withRef: true
+})(SoftwareProductComponentStorageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
index 8538dab6bc..ac7e4a8053 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/storage/SoftwareProductComponentStorageView.jsx
@@ -22,171 +22,311 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
import classnames from 'classnames';
-const BackupSection = ({isReadOnlyMode,dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Backup')}>
- <GridItem>
- <div className='vertical-flex'>
- <label key='label' className={classnames('control-label',{'disabled': isReadOnlyMode})}>{i18n('Backup Type')}</label>
- <div className='radio-options-content-row'>
- {qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => (
- <Input
- data-test-id='backupType'
- type='radio'
- key={onSite.enum}
- name={'compute/guestOS/bitSize'}
- className='radio-field'
- value={onSite.enum}
- label={onSite.title}
- onChange={(site) => onQDataChanged({'storage/backup/backupType' : site})}
- isValid={qgenericFieldInfo['storage/backup/backupType'].isValid}
- errorText={qgenericFieldInfo['storage/backup/backupType'].errorText}
- checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) }
- </div>
- </div>
- </GridItem>
- <GridItem>
- <Input
- className='section-field'
- data-test-id='backupSolution'
- onChange={(backupSolution) => onQDataChanged({'storage/backup/backupSolution' : backupSolution})}
- label={i18n('Backup Solution')}
- type='text'
- isValid={qgenericFieldInfo['storage/backup/backupSolution'].isValid}
- errorText={qgenericFieldInfo['storage/backup/backupSolution'].errorText}
- value={dataMap['storage/backup/backupSolution']}/>
- </GridItem>
- <GridItem>
- <Input
- className='section-field'
- data-test-id='backupStorageSize'
- onChange={(backupStorageSize) => onQDataChanged({'storage/backup/backupStorageSize' : backupStorageSize})}
- label={i18n('Backup Storage Size (GB)')}
- type='number'
- isValid={qgenericFieldInfo['storage/backup/backupStorageSize'].isValid}
- errorText={qgenericFieldInfo['storage/backup/backupStorageSize'].errorText}
- value={dataMap['storage/backup/backupStorageSize']}/>
- </GridItem>
- <GridItem>
- <Input
- data-test-id='backupNIC'
- label={i18n('Backup NIC')}
- type='select'
- className='input-options-select section-field'
- groupClassName='bootstrap-input-options'
- isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
- errorText={qgenericFieldInfo['storage/backup/backupNIC'].errorText}
- value={dataMap['storage/backup/backupNIC']}
- onChange={(e) => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onQDataChanged({'storage/backup/backupNIC' : val});}
- }>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
- </Input>
- </GridItem>
- </GridSection>
+const BackupSection = ({
+ isReadOnlyMode,
+ dataMap,
+ onQDataChanged,
+ qgenericFieldInfo
+}) => (
+ <GridSection title={i18n('Backup')}>
+ <GridItem>
+ <div className="vertical-flex">
+ <label
+ key="label"
+ className={classnames('control-label', {
+ disabled: isReadOnlyMode
+ })}>
+ {i18n('Backup Type')}
+ </label>
+ <div className="radio-options-content-row">
+ {qgenericFieldInfo['storage/backup/backupType'].enum.map(
+ onSite => (
+ <Input
+ data-test-id="backupType"
+ type="radio"
+ key={onSite.enum}
+ name={'compute/guestOS/bitSize'}
+ className="radio-field"
+ value={onSite.enum}
+ label={onSite.title}
+ onChange={site =>
+ onQDataChanged({
+ 'storage/backup/backupType': site
+ })
+ }
+ isValid={
+ qgenericFieldInfo[
+ 'storage/backup/backupType'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'storage/backup/backupType'
+ ].errorText
+ }
+ checked={
+ dataMap['storage/backup/backupType'] ===
+ onSite.enum
+ }
+ />
+ )
+ )}
+ </div>
+ </div>
+ </GridItem>
+ <GridItem>
+ <Input
+ className="section-field"
+ data-test-id="backupSolution"
+ onChange={backupSolution =>
+ onQDataChanged({
+ 'storage/backup/backupSolution': backupSolution
+ })
+ }
+ label={i18n('Backup Solution')}
+ type="text"
+ isValid={
+ qgenericFieldInfo['storage/backup/backupSolution'].isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/backup/backupSolution'].errorText
+ }
+ value={dataMap['storage/backup/backupSolution']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ className="section-field"
+ data-test-id="backupStorageSize"
+ onChange={backupStorageSize =>
+ onQDataChanged({
+ 'storage/backup/backupStorageSize': backupStorageSize
+ })
+ }
+ label={i18n('Backup Storage Size (GB)')}
+ type="number"
+ isValid={
+ qgenericFieldInfo['storage/backup/backupStorageSize']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/backup/backupStorageSize']
+ .errorText
+ }
+ value={dataMap['storage/backup/backupStorageSize']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="backupNIC"
+ label={i18n('Backup NIC')}
+ type="select"
+ className="input-options-select section-field"
+ groupClassName="bootstrap-input-options"
+ isValid={qgenericFieldInfo['storage/backup/backupNIC'].isValid}
+ errorText={
+ qgenericFieldInfo['storage/backup/backupNIC'].errorText
+ }
+ value={dataMap['storage/backup/backupNIC']}
+ onChange={e => {
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onQDataChanged({ 'storage/backup/backupNIC': val });
+ }}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => (
+ <option value={hv.enum} key={hv.enum}>
+ {hv.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ </GridSection>
);
-const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Snapshot Backup')}>
- <GridItem>
- <Input
- className='section-field'
- data-test-id='snapshotFrequency'
- onChange={(snapshotFrequency) => onQDataChanged({'storage/snapshotBackup/snapshotFrequency' : snapshotFrequency})}
- label={i18n('Backup Storage Size (GB)')}
- type='number'
- isValid={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].isValid}
- errorText={qgenericFieldInfo['storage/snapshotBackup/snapshotFrequency'].errorText}
- value={dataMap['storage/snapshotBackup/snapshotFrequency']}/>
- </GridItem>
- </GridSection>
+const SnapshotBackupSection = ({
+ dataMap,
+ onQDataChanged,
+ qgenericFieldInfo
+}) => (
+ <GridSection title={i18n('Snapshot Backup')}>
+ <GridItem>
+ <Input
+ className="section-field"
+ data-test-id="snapshotFrequency"
+ onChange={snapshotFrequency =>
+ onQDataChanged({
+ 'storage/snapshotBackup/snapshotFrequency': snapshotFrequency
+ })
+ }
+ label={i18n('Backup Storage Size (GB)')}
+ type="number"
+ isValid={
+ qgenericFieldInfo[
+ 'storage/snapshotBackup/snapshotFrequency'
+ ].isValid
+ }
+ errorText={
+ qgenericFieldInfo[
+ 'storage/snapshotBackup/snapshotFrequency'
+ ].errorText
+ }
+ value={dataMap['storage/snapshotBackup/snapshotFrequency']}
+ />
+ </GridItem>
+ </GridSection>
);
-const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
- <GridSection title={i18n('Log Backup')}>
- <GridItem>
- <Input
- className='section-field'
- data-test-id='sizeOfLogFiles'
- onChange={(sizeOfLogFiles) => onQDataChanged({'storage/logBackup/sizeOfLogFiles' : sizeOfLogFiles})}
- label={i18n('Backup Storage Size (GB)')}
- type='number'
- isValid={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].isValid}
- errorText={qgenericFieldInfo['storage/logBackup/sizeOfLogFiles'].errorText}
- value={dataMap['storage/logBackup/sizeOfLogFiles']}/>
- </GridItem>
- <GridItem>
- <Input
- className='section-field'
- label={i18n('Log Retention Period (days)')}
- data-test-id='logRetentionPeriod'
- onChange={(logRetentionPeriod) => onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})}
- type='number'
- isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid}
- errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText}
- value={dataMap['storage/logBackup/logRetentionPeriod']}/>
- </GridItem>
- <GridItem>
- <Input
- className='section-field'
- label={i18n('Log Backup Frequency (days)')}
- data-test-id='logBackupFrequency'
- onChange={(logBackupFrequency) => onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})}
- type='number'
- isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid}
- errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText}
- value={dataMap['storage/logBackup/logBackupFrequency']}/>
- </GridItem>
- <GridItem>
- <Input
- className='section-field'
- label={i18n('Log File Location')}
- data-test-id='logFileLocation'
- onChange={(logFileLocation) => onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})}
- type='text'
- isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid}
- errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText}
- value={dataMap['storage/logBackup/logFileLocation']}/>
- </GridItem>
- </GridSection>
+const LogBackupSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => (
+ <GridSection title={i18n('Log Backup')}>
+ <GridItem>
+ <Input
+ className="section-field"
+ data-test-id="sizeOfLogFiles"
+ onChange={sizeOfLogFiles =>
+ onQDataChanged({
+ 'storage/logBackup/sizeOfLogFiles': sizeOfLogFiles
+ })
+ }
+ label={i18n('Backup Storage Size (GB)')}
+ type="number"
+ isValid={
+ qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/logBackup/sizeOfLogFiles']
+ .errorText
+ }
+ value={dataMap['storage/logBackup/sizeOfLogFiles']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ className="section-field"
+ label={i18n('Log Retention Period (days)')}
+ data-test-id="logRetentionPeriod"
+ onChange={logRetentionPeriod =>
+ onQDataChanged({
+ 'storage/logBackup/logRetentionPeriod': logRetentionPeriod
+ })
+ }
+ type="number"
+ isValid={
+ qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/logBackup/logRetentionPeriod']
+ .errorText
+ }
+ value={dataMap['storage/logBackup/logRetentionPeriod']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ className="section-field"
+ label={i18n('Log Backup Frequency (days)')}
+ data-test-id="logBackupFrequency"
+ onChange={logBackupFrequency =>
+ onQDataChanged({
+ 'storage/logBackup/logBackupFrequency': logBackupFrequency
+ })
+ }
+ type="number"
+ isValid={
+ qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/logBackup/logBackupFrequency']
+ .errorText
+ }
+ value={dataMap['storage/logBackup/logBackupFrequency']}
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ className="section-field"
+ label={i18n('Log File Location')}
+ data-test-id="logFileLocation"
+ onChange={logFileLocation =>
+ onQDataChanged({
+ 'storage/logBackup/logFileLocation': logFileLocation
+ })
+ }
+ type="text"
+ isValid={
+ qgenericFieldInfo['storage/logBackup/logFileLocation']
+ .isValid
+ }
+ errorText={
+ qgenericFieldInfo['storage/logBackup/logFileLocation']
+ .errorText
+ }
+ value={dataMap['storage/logBackup/logFileLocation']}
+ />
+ </GridItem>
+ </GridSection>
);
class SoftwareProductComponentStorageView extends React.Component {
+ static propTypes = {
+ componentId: PropTypes.string,
+ onQDataChanged: PropTypes.func,
+ onSubmit: PropTypes.func,
+ isReadOnlyMode: PropTypes.bool
+ };
- static propTypes = {
- componentId: PropTypes.string,
- onQDataChanged: PropTypes.func,
- onSubmit: PropTypes.func,
- isReadOnlyMode: PropTypes.bool
- };
+ render() {
+ let {
+ onQDataChanged,
+ dataMap,
+ qGenericFieldInfo,
+ isReadOnlyMode,
+ onSubmit,
+ qdata
+ } = this.props;
- render() {
- let {onQDataChanged, dataMap, qGenericFieldInfo, isReadOnlyMode, onSubmit, qdata} = this.props;
+ return (
+ <div className="vsp-component-questionnaire-view">
+ {qGenericFieldInfo && (
+ <Form
+ ref={form => (this.form = form)}
+ isValid={true}
+ formReady={null}
+ onSubmit={() => onSubmit({ qdata })}
+ className="component-questionnaire-validation-form"
+ isReadOnlyMode={isReadOnlyMode}
+ hasButtons={false}>
+ <BackupSection
+ isReadOnlyMode={isReadOnlyMode}
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <SnapshotBackupSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ <LogBackupSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ qgenericFieldInfo={qGenericFieldInfo}
+ />
+ </Form>
+ )}
+ </div>
+ );
+ }
- return(
- <div className='vsp-component-questionnaire-view'>
- {qGenericFieldInfo && <Form
- ref={form => this.form = form }
- isValid={true}
- formReady={null}
- onSubmit={() => onSubmit({qdata})}
- className='component-questionnaire-validation-form'
- isReadOnlyMode={isReadOnlyMode}
- hasButtons={false}>
- <BackupSection isReadOnlyMode={isReadOnlyMode} onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <SnapshotBackupSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- <LogBackupSection onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
- </Form> }
- </div>
- );
- }
-
- save(){
- const {qdata, onSubmit} = this.props;
- return onSubmit({qdata});
- }
+ save() {
+ const { qdata, onSubmit } = this.props;
+ return onSubmit({ qdata });
+ }
}
export default SoftwareProductComponentStorageView;