summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-03-20 14:45:40 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-03-20 13:52:31 +0000
commit7fdf733a64670fceefc3ded35cfa581e1c458179 (patch)
treeb3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src
parentc7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff)
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src')
-rw-r--r--openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx228
-rw-r--r--openecomp-ui/src/nfvo-components/accordion/Accordion.jsx63
-rw-r--r--openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx151
-rw-r--r--openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx165
-rw-r--r--openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx35
-rw-r--r--openecomp-ui/src/nfvo-components/grid/GridItem.jsx21
-rw-r--r--openecomp-ui/src/nfvo-components/grid/GridSection.jsx35
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx177
-rw-r--r--openecomp-ui/src/nfvo-components/input/SelectInput.jsx68
-rw-r--r--openecomp-ui/src/nfvo-components/input/ToggleInput.jsx93
-rw-r--r--openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx348
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx272
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx404
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx545
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx255
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx116
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx81
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx108
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx6
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx148
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js77
-rw-r--r--openecomp-ui/src/nfvo-components/loader/Loader.jsx61
-rw-r--r--openecomp-ui/src/nfvo-components/loader/LoaderConstants.js8
-rw-r--r--openecomp-ui/src/nfvo-components/loader/LoaderReducer.js85
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModal.js280
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js26
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js58
-rw-r--r--openecomp-ui/src/nfvo-components/modal/Modal.jsx102
-rw-r--r--openecomp-ui/src/nfvo-components/overlay/Overlay.jsx32
-rw-r--r--openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx219
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx323
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js10
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx227
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx87
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx106
-rw-r--r--openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx33
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx75
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx36
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx77
-rw-r--r--openecomp-ui/src/nfvo-components/tree/Tree.jsx406
-rw-r--r--openecomp-ui/src/nfvo-components/tree/Tree.stories.js242
-rw-r--r--openecomp-ui/src/nfvo-utils/DirectedGraph.js44
-rw-r--r--openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js103
-rw-r--r--openecomp-ui/src/nfvo-utils/KeyMirror.js43
-rw-r--r--openecomp-ui/src/nfvo-utils/RestAPIUtil.js231
-rw-r--r--openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js69
-rw-r--r--openecomp-ui/src/nfvo-utils/UUID.js60
-rw-r--r--openecomp-ui/src/nfvo-utils/Validator.js288
-rw-r--r--openecomp-ui/src/nfvo-utils/WebSocketUtil.js65
-rw-r--r--openecomp-ui/src/nfvo-utils/getValue.js54
-rw-r--r--openecomp-ui/src/nfvo-utils/i18n/i18n.js132
-rw-r--r--openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js64
-rw-r--r--openecomp-ui/src/nfvo-utils/json/JSONPointer.js79
-rw-r--r--openecomp-ui/src/nfvo-utils/json/JSONSchema.js489
-rw-r--r--openecomp-ui/src/nfvo-utils/sortByStringProperty.js4
-rw-r--r--openecomp-ui/src/sdc-app/AppStore.js23
-rw-r--r--openecomp-ui/src/sdc-app/Application.jsx53
-rw-r--r--openecomp-ui/src/sdc-app/ModulesOptions.jsx292
-rw-r--r--openecomp-ui/src/sdc-app/Reducers.js16
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js30
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js13
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js5
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js10
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx255
-rw-r--r--openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx52
-rw-r--r--openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js148
-rw-r--r--openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js553
-rw-r--r--openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js135
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditor.js45
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js881
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js375
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js96
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx568
-rw-r--r--openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js66
-rw-r--r--openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js288
-rw-r--r--openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js8
-rw-r--r--openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js206
-rw-r--r--openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js6
-rw-r--r--openecomp-ui/src/sdc-app/config/Configuration.js66
-rw-r--r--openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js32
-rw-r--r--openecomp-ui/src/sdc-app/features/FeaturesConstants.js8
-rw-r--r--openecomp-ui/src/sdc-app/features/FeaturesReducer.js18
-rw-r--r--openecomp-ui/src/sdc-app/features/featureToggle.js47
-rw-r--r--openecomp-ui/src/sdc-app/features/restToggle.js12
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsActions.js321
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsConstants.js32
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js77
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx101
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListEditor.js66
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx261
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListReducer.js162
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx97
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js4
-rw-r--r--openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx58
-rw-r--r--openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx54
-rw-r--r--openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js77
-rw-r--r--openecomp-ui/src/sdc-app/heatValidation.app.jsx8
-rw-r--r--openecomp-ui/src/sdc-app/heatvalidation/Attachments.js59
-rw-r--r--openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js28
-rw-r--r--openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx19
-rw-r--r--openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js290
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js342
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/Onboarding.js4
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js842
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js153
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx1250
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js273
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js30
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx361
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js329
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js392
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js27
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js20
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js117
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js42
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js98
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js81
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js61
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx164
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js410
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js162
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js100
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js172
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx730
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js92
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js83
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx244
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js38
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js124
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx483
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js90
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx313
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js270
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js32
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js133
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js36
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js228
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js61
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js127
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js117
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx404
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js82
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx230
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js21
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js387
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js117
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js100
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js165
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx772
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js92
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js77
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx326
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js39
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js39
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx517
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js68
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js89
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js119
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx222
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js46
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js349
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js24
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx194
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx30
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx202
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js38
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx55
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx108
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx89
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx65
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx46
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx26
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx34
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx80
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx50
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx50
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js227
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js196
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx137
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js55
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx78
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx75
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx88
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js184
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js219
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js12
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js26
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx150
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx205
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js8
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js131
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js38
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js19
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx274
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx24
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx68
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js40
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx134
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx158
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx58
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js170
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js9
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js61
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx221
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js35
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js128
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js2
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js16
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx160
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js947
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js1174
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js30
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js49
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js26
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js176
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js206
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx312
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js81
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js92
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js32
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js239
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx713
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js74
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js37
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js55
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js371
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx542
-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
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js126
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js98
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js114
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx468
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js51
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js130
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js12
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js68
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js108
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx292
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js85
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js232
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js12
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx136
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js144
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js57
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx351
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js190
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js93
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx122
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx993
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js204
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx396
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js13
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js29
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js2
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx125
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx140
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js71
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js218
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js73
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx341
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js78
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx16
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js34
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx88
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js113
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx202
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx283
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js230
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js31
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js53
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js4
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js41
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js134
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx201
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js156
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js10
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js44
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx141
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx251
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js58
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js109
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js10
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js59
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx215
-rw-r--r--openecomp-ui/src/sdc-app/sdc.app.jsx19
376 files changed, 31985 insertions, 21524 deletions
diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
index c15cd1d0e8..56382d6325 100644
--- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -13,11 +13,11 @@
* or implied. 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 ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
/**
* parsing and showing the following Java Response object
*
@@ -42,121 +42,151 @@ import {Collapse} from 'react-bootstrap';
}
*/
class SubmitErrorResponse extends Component {
+ render() {
+ let {
+ validationResponse: {
+ vspErrors,
+ licensingDataErrors,
+ questionnaireValidationResult,
+ uploadDataErrors
+ }
+ } = this.props;
+ return (
+ <div className="submit-error-response-view">
+ {vspErrors && this.renderVspErrors(vspErrors)}
+ {licensingDataErrors &&
+ this.renderVspErrors(licensingDataErrors)}
+ {questionnaireValidationResult &&
+ this.renderComponentsErrors(questionnaireValidationResult)}
+ {uploadDataErrors &&
+ this.renderUploadDataErrors(uploadDataErrors)}
+ </div>
+ );
+ }
+ renderVspErrors(errors) {
+ return (
+ <ErrorBlock errorType={i18n('VSP Errors')}>
+ <div>
+ {errors.length &&
+ errors.map((error, i) => {
+ return (
+ <ErrorMessage key={i} error={error.message} />
+ );
+ })}
+ </div>
+ </ErrorBlock>
+ );
+ }
- render() {
- let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props;
- return (
- <div className='submit-error-response-view'>
- {vspErrors && this.renderVspErrors(vspErrors)}
- {licensingDataErrors && this.renderVspErrors(licensingDataErrors)}
- {questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)}
- {uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)}
- </div>
- );
- }
-
- renderVspErrors(errors) {
- return (
- <ErrorBlock errorType={i18n('VSP Errors')}>
- <div>
- {errors.length && errors.map((error, i) => {return (<ErrorMessage key={i} error={error.message}/>);})}
- </div>
- </ErrorBlock>
- );
- }
-
-
- renderComponentsErrors(errors) {
- return (
- <ErrorBlock errorType={i18n('Components Errors')}>
- <div>
- {errors.validationData.length && errors.validationData.map((item, i) =>{ return (<ComponentError key={i} item={item}/>);})}
- </div>
- </ErrorBlock>
- );
- }
+ renderComponentsErrors(errors) {
+ return (
+ <ErrorBlock errorType={i18n('Components Errors')}>
+ <div>
+ {errors.validationData.length &&
+ errors.validationData.map((item, i) => {
+ return <ComponentError key={i} item={item} />;
+ })}
+ </div>
+ </ErrorBlock>
+ );
+ }
- renderUploadDataErrors(uploadDataErrors) {
- return (
- <ErrorBlock errorType={i18n('Upload Data Errors')}>
- <div>
- <UploadErrorList items={uploadDataErrors}/>
- </div>
- </ErrorBlock>
- );
- }
+ renderUploadDataErrors(uploadDataErrors) {
+ return (
+ <ErrorBlock errorType={i18n('Upload Data Errors')}>
+ <div>
+ <UploadErrorList items={uploadDataErrors} />
+ </div>
+ </ErrorBlock>
+ );
+ }
}
-
-const ComponentError = ({item}) => {
- return (
- <div>
- <div className='component-name-header'>{item.entityName}</div>
- {item.errors.map((error, i) => {return(<ErrorMessage key={i} error={error}/>);})}
- </div>
- );
+const ComponentError = ({ item }) => {
+ return (
+ <div>
+ <div className="component-name-header">{item.entityName}</div>
+ {item.errors.map((error, i) => {
+ return <ErrorMessage key={i} error={error} />;
+ })}
+ </div>
+ );
};
function* entries(obj) {
- for (let key of Object.keys(obj)) {
- yield {header: key, list: obj[key]};
- }
+ for (let key of Object.keys(obj)) {
+ yield { header: key, list: obj[key] };
+ }
}
-const UploadErrorList = ({items}) => {
- let generator = entries(items);
-
- let errors = [];
- for (let item of generator) {errors.push(
- <div key={item.header}>
- <div className='component-name-header'>{item.header}</div>
- {item.list.map((error, i) => <ErrorMessage key={i} warning={error.level === 'WARNING'} error={error.message}/> )}
- </div>
- );}
+const UploadErrorList = ({ items }) => {
+ let generator = entries(items);
+
+ let errors = [];
+ for (let item of generator) {
+ errors.push(
+ <div key={item.header}>
+ <div className="component-name-header">{item.header}</div>
+ {item.list.map((error, i) => (
+ <ErrorMessage
+ key={i}
+ warning={error.level === 'WARNING'}
+ error={error.message}
+ />
+ ))}
+ </div>
+ );
+ }
- return (
- <div>
- {errors}
- </div>
- );
+ return <div>{errors}</div>;
};
class ErrorBlock extends React.Component {
- state = {
- collapsed: false
- };
-
- render() {
- let {errorType, children} = this.props;
- return (
- <div className='error-block'>
- <ErrorHeader collapsed={this.state.collapsed} onClick={()=>{this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/>
- <Collapse in={this.state.collapsed}>
- {children}
- </Collapse>
- </div>
- );
- }
+ state = {
+ collapsed: false
+ };
+
+ render() {
+ let { errorType, children } = this.props;
+ return (
+ <div className="error-block">
+ <ErrorHeader
+ collapsed={this.state.collapsed}
+ onClick={() => {
+ this.setState({ collapsed: !this.state.collapsed });
+ }}
+ errorType={errorType}
+ />
+ <Collapse in={this.state.collapsed}>{children}</Collapse>
+ </div>
+ );
+ }
}
-const ErrorHeader = ({errorType, collapsed, onClick}) => {
- return(
- <div onClick={onClick} className='error-block-header'>
- <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/>
- </div>
- );
+const ErrorHeader = ({ errorType, collapsed, onClick }) => {
+ return (
+ <div onClick={onClick} className="error-block-header">
+ <SVGIcon
+ iconClassName={collapsed ? '' : 'collapse-right'}
+ name="chevronDown"
+ label={errorType}
+ labelPosition="right"
+ />
+ </div>
+ );
};
-const ErrorMessage = ({error, warning}) => {
- return (
- <ListGroupItem className='error-code-list-item'>
- <SVGIcon
- name={warning ? 'exclamationTriangleLine' : 'error'}
- color={warning ? 'warning' : 'negative'} />
- <span className='icon-label'>{error}</span>
- </ListGroupItem>
- );
+const ErrorMessage = ({ error, warning }) => {
+ return (
+ <ListGroupItem className="error-code-list-item">
+ <SVGIcon
+ name={warning ? 'exclamationTriangleLine' : 'error'}
+ color={warning ? 'warning' : 'negative'}
+ />
+ <span className="icon-label">{error}</span>
+ </ListGroupItem>
+ );
};
export default SubmitErrorResponse;
diff --git a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
index ac19072307..72f8de0d23 100644
--- a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
+++ b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
@@ -4,9 +4,9 @@
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,35 +18,38 @@ import React from 'react';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import PropTypes from 'prop-types';
-
class Accordion extends React.Component {
+ static propTypes = {
+ title: PropTypes.string,
+ children: PropTypes.node
+ };
- static propTypes = {
- title: PropTypes.string,
- children: PropTypes.node
- }
-
- constructor(props) {
- super(props);
- this.state = {
- open: false
- };
- }
- render() {
- const {children, title} = this.props;
- const {open} = this.state;
- return (
- <div className='accordion'>
- <div onClick={()=>this.setState({open: !open})} className='accordion-header'>
- <SVGIcon name='chevronUp' iconClassName={open ? 'down' : ''}/>
- <div className='title'>{title}</div>
- </div>
- <div className={`accordion-body ${open ? 'open' : ''}`}>
- {children}
- </div>
- </div>
- );
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ open: false
+ };
+ }
+ render() {
+ const { children, title } = this.props;
+ const { open } = this.state;
+ return (
+ <div className="accordion">
+ <div
+ onClick={() => this.setState({ open: !open })}
+ className="accordion-header">
+ <SVGIcon
+ name="chevronUp"
+ iconClassName={open ? 'down' : ''}
+ />
+ <div className="title">{title}</div>
+ </div>
+ <div className={`accordion-body ${open ? 'open' : ''}`}>
+ {children}
+ </div>
+ </div>
+ );
+ }
}
-export default Accordion; \ No newline at end of file
+export default Accordion;
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
index 25e7e7e02d..b4bc8be9ec 100644
--- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -5,72 +5,105 @@ import moment from 'moment';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class CustomInput extends React.Component {
+ static propTypes = {
+ placeHolderText: PropTypes.string,
+ onChange: PropTypes.func,
+ onClick: PropTypes.func,
+ value: PropTypes.string
+ };
- static propTypes = {
- placeHolderText: PropTypes.string,
- onChange: PropTypes.func,
- onClick: PropTypes.func,
- value: PropTypes.string
- };
-
- render() {
- const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
- const text = date ? date : placeholderText;
- const textStyle = date ? '' : 'placeholder';
- return (
- <div onClick={onClick} ref={inputRef} className='datepicker-custom-input'>
- <div className={`datepicker-text ${textStyle}`}>{text}</div>
- {date && <SVGIcon onClick={e => {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>}
- <SVGIcon name='calendar'/>
- </div>
- );
- }
-};
+ render() {
+ const {
+ placeholderText,
+ onClick,
+ onClear,
+ inputRef,
+ value: date
+ } = this.props;
+ const text = date ? date : placeholderText;
+ const textStyle = date ? '' : 'placeholder';
+ return (
+ <div
+ onClick={onClick}
+ ref={inputRef}
+ className="datepicker-custom-input">
+ <div className={`datepicker-text ${textStyle}`}>{text}</div>
+ {date && (
+ <SVGIcon
+ onClick={e => {
+ e.stopPropagation();
+ onClear();
+ }}
+ name="close"
+ className="clear-input"
+ />
+ )}
+ <SVGIcon name="calendar" />
+ </div>
+ );
+ }
+}
const parseDate = (date, format) => {
- return typeof date === 'number' ? moment.unix(date) : moment(date, format);
+ return typeof date === 'number' ? moment.unix(date) : moment(date, format);
};
class Datepicker extends React.Component {
- static propTypes = {
- date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- format: PropTypes.string,
- onChange: PropTypes.func,
- selectsStart: PropTypes.bool,
- selectsEnd: PropTypes.bool,
- startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- disabled: PropTypes.bool,
- label: PropTypes.string,
- isRequired: PropTypes.bool
- }
- render() {
- let {date, format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false,
- disabled = false, inputRef} = this.props;
- const placeholderText = 'Enter a date';
- const props = {
- format,
- onChange,
- disabled,
- selected: date ? parseDate(date, format) : date,
- selectsStart,
- selectsEnd,
- placeholderText,
- startDate: startDate ? parseDate(startDate, format) : startDate,
- endDate: endDate ? parseDate(endDate, format) : endDate
- };
+ static propTypes = {
+ date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ format: PropTypes.string,
+ onChange: PropTypes.func,
+ selectsStart: PropTypes.bool,
+ selectsEnd: PropTypes.bool,
+ startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ disabled: PropTypes.bool,
+ label: PropTypes.string,
+ isRequired: PropTypes.bool
+ };
+ render() {
+ let {
+ date,
+ format,
+ onChange,
+ selectsStart = false,
+ startDate = null,
+ endDate = null,
+ selectsEnd = false,
+ disabled = false,
+ inputRef
+ } = this.props;
+ const placeholderText = 'Enter a date';
+ const props = {
+ format,
+ onChange,
+ disabled,
+ selected: date ? parseDate(date, format) : date,
+ selectsStart,
+ selectsEnd,
+ placeholderText,
+ startDate: startDate ? parseDate(startDate, format) : startDate,
+ endDate: endDate ? parseDate(endDate, format) : endDate
+ };
- return (
- <div className='customized-date-picker'>
- <DatePicker
- calendarClassName='customized-date-picker-calendar'
- customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
- minDate={selectsEnd && props.startDate}
- maxDate={selectsStart && props.endDate}
- {...props}/>
- </div>
- );
- }
+ return (
+ <div className="customized-date-picker">
+ <DatePicker
+ calendarClassName="customized-date-picker-calendar"
+ customInput={
+ <CustomInput
+ inputRef={inputRef}
+ onClear={() => onChange(undefined)}
+ placeholderText={placeholderText}
+ />
+ }
+ minDate={selectsEnd && props.startDate}
+ maxDate={selectsStart && props.endDate}
+ {...props}
+ />
+ </div>
+ );
+ }
}
export default Datepicker;
diff --git a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
index 3c9ceed0d8..9fcd7042bc 100644
--- a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
+++ b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
@@ -20,79 +20,106 @@ import VersionController from 'nfvo-components/panel/versionController/VersionCo
import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx';
export default class TabulatedEditor extends React.Component {
+ render() {
+ const {
+ navigationBarProps,
+ onToggle,
+ onVersionSwitching,
+ onMoreVersionsClick,
+ onCreate,
+ onSave,
+ onClose,
+ onVersionControllerAction,
+ onNavigate,
+ children,
+ meta,
+ onManagePermissions,
+ onOpenCommentCommitModal,
+ onOpenPermissions,
+ onOpenRevisionsModal
+ } = this.props;
+ let { versionControllerProps } = this.props;
+ const { className = '' } = React.Children.only(children).props;
+ const child = this.prepareChild();
- render() {
- const {navigationBarProps, onToggle, onVersionSwitching, onMoreVersionsClick, onCreate, onSave, onClose,
- onVersionControllerAction, onNavigate, children, meta, onManagePermissions, onOpenCommentCommitModal, onOpenPermissions, onOpenRevisionsModal} = this.props;
- let {versionControllerProps} = this.props;
- const {className = ''} = React.Children.only(children).props;
- const child = this.prepareChild();
+ if (onClose) {
+ versionControllerProps = {
+ ...versionControllerProps,
+ onClose: () => onClose(versionControllerProps)
+ };
+ }
+ return (
+ <div className="software-product-view">
+ <div className="software-product-navigation-side-bar">
+ <NavigationSideBar
+ {...navigationBarProps}
+ onSelect={onNavigate}
+ onToggle={onToggle}
+ />
+ </div>
+ <div className="software-product-landing-view-right-side flex-column">
+ <VersionController
+ {...versionControllerProps}
+ onVersionSwitching={version =>
+ onVersionSwitching(version, meta)
+ }
+ onMoreVersionsClick={onMoreVersionsClick}
+ onManagePermissions={onManagePermissions}
+ onOpenCommentCommitModal={onOpenCommentCommitModal}
+ onOpenPermissions={onOpenPermissions}
+ onOpenRevisionsModal={onOpenRevisionsModal}
+ callVCAction={(action, version, comment) =>
+ onVersionControllerAction(
+ action,
+ version,
+ comment,
+ meta
+ )
+ }
+ onCreate={onCreate && this.handleCreate}
+ onSave={onSave && this.handleSave}
+ />
+ <div className={classnames('content-area', `${className}`)}>
+ {child}
+ </div>
+ </div>
+ </div>
+ );
+ }
- if(onClose) {
- versionControllerProps = {
- ...versionControllerProps,
- onClose: () => onClose(versionControllerProps)
- };
- }
- return (
- <div className='software-product-view'>
- <div className='software-product-navigation-side-bar'>
- <NavigationSideBar {...navigationBarProps} onSelect={onNavigate} onToggle={onToggle}/>
- </div>
- <div className='software-product-landing-view-right-side flex-column'>
- <VersionController
- {...versionControllerProps}
- onVersionSwitching={version => onVersionSwitching(version, meta)}
- onMoreVersionsClick={onMoreVersionsClick}
- onManagePermissions={onManagePermissions}
- onOpenCommentCommitModal={onOpenCommentCommitModal}
- onOpenPermissions={onOpenPermissions}
- onOpenRevisionsModal={onOpenRevisionsModal}
- callVCAction={(action, version, comment) => onVersionControllerAction(action, version, comment, meta)}
- onCreate={onCreate && this.handleCreate}
- onSave={onSave && this.handleSave}/>
- <div className={classnames('content-area', `${className}`)}>
- {
- child
- }
- </div>
- </div>
- </div>
- );
- }
+ prepareChild() {
+ const { onSave, onCreate, children } = this.props;
- prepareChild() {
- const {onSave, onCreate, children} = this.props;
+ const additionalChildProps = { ref: 'editor' };
+ if (onSave) {
+ additionalChildProps.onSave = onSave;
+ }
+ if (onCreate) {
+ additionalChildProps.onCreate = onCreate;
+ }
- const additionalChildProps = {ref: 'editor'};
- if (onSave) {
- additionalChildProps.onSave = onSave;
- }
- if (onCreate) {
- additionalChildProps.onCreate = onCreate;
- }
+ const child = React.cloneElement(
+ React.Children.only(children),
+ additionalChildProps
+ );
+ return child;
+ }
- const child = React.cloneElement(React.Children.only(children), additionalChildProps);
- return child;
- }
+ handleSave = () => {
+ const childInstance = this.refs.editor.getWrappedInstance();
+ if (childInstance.save) {
+ return childInstance.save();
+ } else {
+ return this.props.onSave();
+ }
+ };
-
-
- handleSave = () => {
- const childInstance = this.refs.editor.getWrappedInstance();
- if (childInstance.save) {
- return childInstance.save();
- } else {
- return this.props.onSave();
- }
- };
-
- handleCreate = () => {
- const childInstance = this.refs.editor.getWrappedInstance();
- if (childInstance.create) {
- childInstance.create();
- } else {
- this.props.onCreate();
- }
- }
+ handleCreate = () => {
+ const childInstance = this.refs.editor.getWrappedInstance();
+ if (childInstance.create) {
+ childInstance.create();
+ } else {
+ this.props.onCreate();
+ }
+ };
}
diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
index 5b4e0a8bee..0d47d859d9 100644
--- a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
+++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
@@ -26,20 +26,33 @@
* or
* https://github.com/JedWatson/react-select
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Button from 'sdc-ui/lib/react/Button.js';
class DraggableUploadFileBox extends Component {
- render() {
- let {className, onClick, dataTestId, isReadOnlyMode} = this.props;
- return (
- <div className={`file-upload-box ${className} ${isReadOnlyMode ? 'disabled' : ''}`}>
- <div className={`drag-text ${isReadOnlyMode ? 'disabled' : ''}`}>{i18n('Drag & drop for upload')}</div>
- <div className='or-text'>{i18n('or')}</div>
- <Button type='button' data-test-id={dataTestId} btnType='outline' onClick={onClick} disabled={isReadOnlyMode}>{i18n('Select File')}</Button>
- </div>
- );
- }
+ render() {
+ let { className, onClick, dataTestId, isReadOnlyMode } = this.props;
+ return (
+ <div
+ className={`file-upload-box ${className} ${
+ isReadOnlyMode ? 'disabled' : ''
+ }`}>
+ <div
+ className={`drag-text ${isReadOnlyMode ? 'disabled' : ''}`}>
+ {i18n('Drag & drop for upload')}
+ </div>
+ <div className="or-text">{i18n('or')}</div>
+ <Button
+ type="button"
+ data-test-id={dataTestId}
+ btnType="outline"
+ onClick={onClick}
+ disabled={isReadOnlyMode}>
+ {i18n('Select File')}
+ </Button>
+ </div>
+ );
+ }
}
export default DraggableUploadFileBox;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
index c62e042bf4..9723cde2c0 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx
@@ -15,12 +15,21 @@
*/
import React from 'react';
-const GridItem = ({colSpan = 1, children, lastColInRow = false, stretch = false, className = ''}) => (
- <div className={`grid-col-${colSpan} ${lastColInRow ? 'last-col-in-row' : ''} ${className}`}>
- <div className={`grid-item${stretch ? '-stretch' : ''}`}>
- {children}
- </div>
- </div>
+const GridItem = ({
+ colSpan = 1,
+ children,
+ lastColInRow = false,
+ stretch = false,
+ className = ''
+}) => (
+ <div
+ className={`grid-col-${colSpan} ${
+ lastColInRow ? 'last-col-in-row' : ''
+ } ${className}`}>
+ <div className={`grid-item${stretch ? '-stretch' : ''}`}>
+ {children}
+ </div>
+ </div>
);
export default GridItem;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
index 8f4a024fdb..f2e3588d9e 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
@@ -17,21 +17,32 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-const GridSection = ({title, children, className = '', titleClassName, hasLastColSet = false}) => {
- return (
- <div className={classnames('grid-section', className, {'has-last-col-set': hasLastColSet})}>
- {title && <div className={`section-title ${titleClassName || ''}`}>{title}</div>}
- <div className='grid-items'>
- {children}
- </div>
- </div>
- );
+const GridSection = ({
+ title,
+ children,
+ className = '',
+ titleClassName,
+ hasLastColSet = false
+}) => {
+ return (
+ <div
+ className={classnames('grid-section', className, {
+ 'has-last-col-set': hasLastColSet
+ })}>
+ {title && (
+ <div className={`section-title ${titleClassName || ''}`}>
+ {title}
+ </div>
+ )}
+ <div className="grid-items">{children}</div>
+ </div>
+ );
};
GridSection.propTypes = {
- title: PropTypes.string,
- titleClassName: PropTypes.string,
- hasLastColSet: PropTypes.bool
+ title: PropTypes.string,
+ titleClassName: PropTypes.string,
+ hasLastColSet: PropTypes.bool
};
export default GridSection;
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index 82fbe1deed..3973ae8c5d 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -19,99 +19,118 @@ import ReactDOM from 'react-dom';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
-const ExpandableInputClosed = ({iconType, onClick}) => (
- <SVGIcon className='expandable-input-wrapper closed' data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
+const ExpandableInputClosed = ({ iconType, onClick }) => (
+ <SVGIcon
+ className="expandable-input-wrapper closed"
+ data-test-id="expandable-input-closed"
+ name={iconType}
+ onClick={onClick}
+ />
);
class ExpandableInputOpened extends React.Component {
- componentDidMount(){
- this.rawDomNode = ReactDOM.findDOMNode(this.searchInputNode.inputWrapper);
- this.rawDomNode.focus();
- }
+ componentDidMount() {
+ this.rawDomNode = ReactDOM.findDOMNode(
+ this.searchInputNode.inputWrapper
+ );
+ this.rawDomNode.focus();
+ }
- componentWillReceiveProps(newProps){
- if (!newProps.value){
- if (!(document.activeElement === this.rawDomNode)){
- this.props.handleBlur();
- }
- }
- }
+ componentWillReceiveProps(newProps) {
+ if (!newProps.value) {
+ if (!(document.activeElement === this.rawDomNode)) {
+ this.props.handleBlur();
+ }
+ }
+ }
- handleClose(){
- this.props.onChange('');
- this.rawDomNode.focus();
- }
+ handleClose() {
+ this.props.onChange('');
+ this.rawDomNode.focus();
+ }
- handleKeyDown(e){
- if (e.key === 'Escape'){
- e.preventDefault();
- if (this.props.value) {
- this.handleClose();
- } else {
- this.rawDomNode.blur();
- }
- };
- }
+ handleKeyDown(e) {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ if (this.props.value) {
+ this.handleClose();
+ } else {
+ this.rawDomNode.blur();
+ }
+ }
+ }
- render() {
- let {iconType, value, onChange, handleBlur} = this.props;
- return (
- <div className='expandable-input-wrapper opened' key='expandable'>
- <Input
- type='text'
- data-test-id='expandable-input-opened'
- value={value}
- ref={(input) => this.searchInputNode = input}
- className='expandable-active'
- groupClassName='expandable-input-control'
- onChange={e => onChange(e)}
- onKeyDown={e => this.handleKeyDown(e)}
- onBlur={handleBlur}/>
- {value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
- {!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
- </div>
- );
- }
+ render() {
+ let { iconType, value, onChange, handleBlur } = this.props;
+ return (
+ <div className="expandable-input-wrapper opened" key="expandable">
+ <Input
+ type="text"
+ data-test-id="expandable-input-opened"
+ value={value}
+ ref={input => (this.searchInputNode = input)}
+ className="expandable-active"
+ groupClassName="expandable-input-control"
+ onChange={e => onChange(e)}
+ onKeyDown={e => this.handleKeyDown(e)}
+ onBlur={handleBlur}
+ />
+ {value && (
+ <SVGIcon
+ data-test-id="expandable-input-close-btn"
+ onClick={() => this.handleClose()}
+ name="close"
+ />
+ )}
+ {!value && <SVGIcon name={iconType} onClick={handleBlur} />}
+ </div>
+ );
+ }
}
class ExpandableInput extends React.Component {
+ static propTypes = {
+ iconType: PropTypes.string,
+ onChange: PropTypes.func,
+ value: PropTypes.string
+ };
- static propTypes = {
- iconType: PropTypes.string,
- onChange: PropTypes.func,
- value: PropTypes.string
- };
+ state = { showInput: false };
- state = {showInput: false};
+ closeInput() {
+ if (!this.props.value) {
+ this.setState({ showInput: false });
+ }
+ }
- closeInput(){
- if (!this.props.value) {
- this.setState({showInput: false});
- }
- }
+ getValue() {
+ return this.props.value;
+ }
- getValue(){
- return this.props.value;
- }
-
- render(){
- let {iconType, value, onChange = false} = this.props;
- return (
- <div className='expandable-input-top'>
- {this.state.showInput &&
- <ExpandableInputOpened
- key='open'
- iconType={iconType}
- onChange={onChange}
- value={value}
- handleKeyDown={(e) => this.handleKeyDown(e)}
- handleBlur={() => this.closeInput()}/>
- }
- {!this.state.showInput && <ExpandableInputClosed key='closed' iconType={iconType} onClick={() => this.setState({showInput: true})} />}
- </div>
- );
- }
+ render() {
+ let { iconType, value, onChange = false } = this.props;
+ return (
+ <div className="expandable-input-top">
+ {this.state.showInput && (
+ <ExpandableInputOpened
+ key="open"
+ iconType={iconType}
+ onChange={onChange}
+ value={value}
+ handleKeyDown={e => this.handleKeyDown(e)}
+ handleBlur={() => this.closeInput()}
+ />
+ )}
+ {!this.state.showInput && (
+ <ExpandableInputClosed
+ key="closed"
+ iconType={iconType}
+ onClick={() => this.setState({ showInput: true })}
+ />
+ )}
+ </div>
+ );
+ }
}
-
export default ExpandableInput;
diff --git a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
index 03c727379e..b0e0d87d7c 100644
--- a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
@@ -26,43 +26,51 @@
* or
* https://github.com/JedWatson/react-select
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import Select from 'react-select';
class SelectInput extends Component {
+ inputValue = [];
- inputValue = [];
+ render() {
+ let { label, value, ...other } = this.props;
+ const dataTestId = this.props['data-test-id']
+ ? { 'data-test-id': this.props['data-test-id'] }
+ : {};
+ return (
+ <div
+ {...dataTestId}
+ className="validation-input-wrapper dropdown-multi-select">
+ <div className="form-group">
+ {label && <label className="control-label">{label}</label>}
+ <Select
+ ref="_myInput"
+ onChange={value => this.onSelectChanged(value)}
+ {...other}
+ value={value}
+ />
+ </div>
+ </div>
+ );
+ }
- render() {
- let {label, value, ...other} = this.props;
- const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
- return (
- <div {...dataTestId} className='validation-input-wrapper dropdown-multi-select'>
- <div className='form-group'>
- {label && <label className='control-label'>{label}</label>}
- <Select ref='_myInput' onChange={value => this.onSelectChanged(value)} {...other} value={value} />
- </div>
- </div>
- );
- }
+ getValue() {
+ return this.inputValue && this.inputValue.length ? this.inputValue : '';
+ }
- getValue() {
- return this.inputValue && this.inputValue.length ? this.inputValue : '';
- }
+ onSelectChanged(value) {
+ this.props.onMultiSelectChanged(value);
+ }
- onSelectChanged(value) {
- this.props.onMultiSelectChanged(value);
- }
-
- componentDidMount() {
- let {value} = this.props;
- this.inputValue = value ? value : [];
- }
- componentDidUpdate() {
- if (this.inputValue !== this.props.value) {
- this.inputValue = this.props.value;
- }
- }
+ componentDidMount() {
+ let { value } = this.props;
+ this.inputValue = value ? value : [];
+ }
+ componentDidUpdate() {
+ if (this.inputValue !== this.props.value) {
+ this.inputValue = this.props.value;
+ }
+ }
}
export default SelectInput;
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
index 31a8a66d86..947570fa29 100644
--- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -16,55 +16,60 @@
import React from 'react';
import PropTypes from 'prop-types';
-export default
-class ToggleInput extends React.Component {
+export default class ToggleInput extends React.Component {
+ static propTypes = {
+ label: PropTypes.node,
+ value: PropTypes.bool,
+ onChange: PropTypes.func,
+ disabled: PropTypes.bool
+ };
- static propTypes = {
- label: PropTypes.node,
- value: PropTypes.bool,
- onChange: PropTypes.func,
- disabled: PropTypes.bool
- }
+ static defaultProps = {
+ value: false,
+ label: ''
+ };
- static defaultProps = {
- value: false,
- label: ''
- }
+ state = {
+ value: this.props.value
+ };
- state = {
- value: this.props.value
- }
+ status() {
+ return this.state.value ? 'on' : 'off';
+ }
- status() {
- return this.state.value ? 'on' : 'off';
- }
+ render() {
+ let { label, disabled } = this.props;
+ let checked = this.status() === 'on';
+ //TODO check onclick
+ return (
+ <div
+ className="toggle-input-wrapper form-group"
+ onClick={!disabled && this.click}>
+ <div className="toggle-input-label">{label}</div>
+ <div className="toggle-switch">
+ <input
+ className="toggle toggle-round-flat"
+ type="checkbox"
+ checked={checked}
+ readOnly
+ />
+ <label />
+ </div>
+ </div>
+ );
+ }
- render() {
- let {label, disabled} = this.props;
- let checked = this.status() === 'on';
- //TODO check onclick
- return (
- <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
- <div className='toggle-input-label'>{label}</div>
- <div className='toggle-switch'>
- <input className='toggle toggle-round-flat' type='checkbox' checked={checked} readOnly/>
- <label></label>
- </div>
- </div>
- );
- }
+ click = () => {
+ let value = !this.state.value;
+ this.setState({ value });
- click = () => {
- let value = !this.state.value;
- this.setState({value});
+ let onChange = this.props.onChange;
+ if (onChange) {
+ onChange(value);
+ }
+ };
- let onChange = this.props.onChange;
- if (onChange) {
- onChange(value);
- }
- }
-
- getValue() {
- return this.state.value;
- }
+ getValue() {
+ return this.state.value;
+ }
}
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index a689c50778..7ab4c8242c 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -19,136 +19,224 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
class DualListboxView extends React.Component {
-
- static propTypes = {
-
- availableList: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired
- })),
- filterTitle: PropTypes.shape({
- left: PropTypes.string,
- right: PropTypes.string
- }),
- selectedValuesList: PropTypes.arrayOf(PropTypes.string),
-
- onChange: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- selectedValuesList: [],
- availableList: [],
- filterTitle: {
- left: '',
- right: ''
- }
- };
-
- state = {
- availableListFilter: '',
- selectedValuesListFilter: '',
- selectedValues: []
- };
-
- render() {
- let {availableList, selectedValuesList, filterTitle, isReadOnlyMode} = this.props;
- let {availableListFilter, selectedValuesListFilter} = this.state;
-
- let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id));
- let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id));
- selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id));
- return (
- <div className='dual-list-box'>
- {this.renderListbox(filterTitle.left, unselectedList, {
- value: availableListFilter,
- ref: 'availableListFilter',
- disabled: isReadOnlyMode,
- onChange: (value) => this.setState({availableListFilter: value})
- }, {ref: 'availableValues', disabled: isReadOnlyMode, testId: 'available',})}
- {this.renderOperationsBar(isReadOnlyMode)}
- {this.renderListbox(filterTitle.right, selectedList, {
- value: selectedValuesListFilter,
- ref: 'selectedValuesListFilter',
- disabled: isReadOnlyMode,
- onChange: (value) => this.setState({selectedValuesListFilter: value})
- }, {ref: 'selectedValues', disabled: isReadOnlyMode, testId: 'selected'})}
- </div>
- );
- }
-
- renderListbox(filterTitle, list, filterProps, props) {
- let regExFilter = new RegExp(escape(filterProps.value), 'i');
- let matchedItems = list.filter(item => item.name.match(regExFilter));
- let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
- return (
- <div className='dual-search-multi-select-section'>
- <p>{filterTitle}</p>
- <div className='dual-text-box-search search-wrapper'>
- <Input data-test-id={`${props.testId}-search-input`}
- name='search-input-control' type='text'
- groupClassName='search-input-control'
- {...filterProps}/>
- <SVGIcon name='search' className='search-icon'/>
- </div>
- <Input
- multiple
- onChange={(event) => this.onSelectItems(event.target.selectedOptions)}
- groupClassName='dual-list-box-multi-select'
- type='select'
- name='dual-list-box-multi-select'
- data-test-id={`${props.testId}-select-input`}
- disabled={props.disabled}
- ref={props.ref}>
- {matchedItems.map(item => this.renderOption(item.id, item.name))}
- {matchedItems.length && unMatchedItems.length && <option style={{pointerEvents: 'none'}}>--------------------</option>}
- {unMatchedItems.map(item => this.renderOption(item.id, item.name))}
- </Input>
- </div>
- );
- }
-
- onSelectItems(selectedOptions) {
- let selectedValues = Object.keys(selectedOptions).map((k) => selectedOptions[k].value);
- this.setState({selectedValues});
- }
-
- renderOption(value, name) {
- return (<option className='dual-list-box-multi-select-text' key={value} value={value}>{name}</option>);
- }
-
- renderOperationsBar(isReadOnlyMode) {
- return (
- <div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
- {this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
- {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
- {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
- {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
- </div>
- );
- }
-
- renderOperationBarButton(onClick, iconName){
- return (<div className='dual-list-option' data-test-id={`operation-icon-${iconName}`} onClick={onClick}><SVGIcon name={iconName}/></div>);
- }
-
- addToSelectedList() {
- this.props.onChange(this.props.selectedValuesList.concat(this.state.selectedValues));
- this.setState({selectedValues: []});
- }
-
- removeFromSelectedList() {
- const selectedValues = this.state.selectedValues;
- this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value)));
- this.setState({selectedValues: []});
- }
-
- addAllToSelectedList() {
- this.props.onChange(this.props.availableList.map(item => item.id));
- }
-
- removeAllFromSelectedList() {
- this.props.onChange([]);
- }
+ static propTypes = {
+ availableList: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+ })
+ ),
+ filterTitle: PropTypes.shape({
+ left: PropTypes.string,
+ right: PropTypes.string
+ }),
+ selectedValuesList: PropTypes.arrayOf(PropTypes.string),
+
+ onChange: PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ selectedValuesList: [],
+ availableList: [],
+ filterTitle: {
+ left: '',
+ right: ''
+ }
+ };
+
+ state = {
+ availableListFilter: '',
+ selectedValuesListFilter: '',
+ selectedValues: []
+ };
+
+ render() {
+ let {
+ availableList,
+ selectedValuesList,
+ filterTitle,
+ isReadOnlyMode
+ } = this.props;
+ let { availableListFilter, selectedValuesListFilter } = this.state;
+
+ let unselectedList = availableList.filter(
+ availableItem =>
+ !selectedValuesList.find(value => value === availableItem.id)
+ );
+ let selectedList = availableList.filter(availableItem =>
+ selectedValuesList.find(value => value === availableItem.id)
+ );
+ selectedList = selectedList.sort(
+ (a, b) =>
+ selectedValuesList.indexOf(a.id) -
+ selectedValuesList.indexOf(b.id)
+ );
+ return (
+ <div className="dual-list-box">
+ {this.renderListbox(
+ filterTitle.left,
+ unselectedList,
+ {
+ value: availableListFilter,
+ ref: 'availableListFilter',
+ disabled: isReadOnlyMode,
+ onChange: value =>
+ this.setState({ availableListFilter: value })
+ },
+ {
+ ref: 'availableValues',
+ disabled: isReadOnlyMode,
+ testId: 'available'
+ }
+ )}
+ {this.renderOperationsBar(isReadOnlyMode)}
+ {this.renderListbox(
+ filterTitle.right,
+ selectedList,
+ {
+ value: selectedValuesListFilter,
+ ref: 'selectedValuesListFilter',
+ disabled: isReadOnlyMode,
+ onChange: value =>
+ this.setState({ selectedValuesListFilter: value })
+ },
+ {
+ ref: 'selectedValues',
+ disabled: isReadOnlyMode,
+ testId: 'selected'
+ }
+ )}
+ </div>
+ );
+ }
+
+ renderListbox(filterTitle, list, filterProps, props) {
+ let regExFilter = new RegExp(escape(filterProps.value), 'i');
+ let matchedItems = list.filter(item => item.name.match(regExFilter));
+ let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
+ return (
+ <div className="dual-search-multi-select-section">
+ <p>{filterTitle}</p>
+ <div className="dual-text-box-search search-wrapper">
+ <Input
+ data-test-id={`${props.testId}-search-input`}
+ name="search-input-control"
+ type="text"
+ groupClassName="search-input-control"
+ {...filterProps}
+ />
+ <SVGIcon name="search" className="search-icon" />
+ </div>
+ <Input
+ multiple
+ onChange={event =>
+ this.onSelectItems(event.target.selectedOptions)
+ }
+ groupClassName="dual-list-box-multi-select"
+ type="select"
+ name="dual-list-box-multi-select"
+ data-test-id={`${props.testId}-select-input`}
+ disabled={props.disabled}
+ ref={props.ref}>
+ {matchedItems.map(item =>
+ this.renderOption(item.id, item.name)
+ )}
+ {matchedItems.length &&
+ unMatchedItems.length && (
+ <option style={{ pointerEvents: 'none' }}>
+ --------------------
+ </option>
+ )}
+ {unMatchedItems.map(item =>
+ this.renderOption(item.id, item.name)
+ )}
+ </Input>
+ </div>
+ );
+ }
+
+ onSelectItems(selectedOptions) {
+ let selectedValues = Object.keys(selectedOptions).map(
+ k => selectedOptions[k].value
+ );
+ this.setState({ selectedValues });
+ }
+
+ renderOption(value, name) {
+ return (
+ <option
+ className="dual-list-box-multi-select-text"
+ key={value}
+ value={value}>
+ {name}
+ </option>
+ );
+ }
+
+ renderOperationsBar(isReadOnlyMode) {
+ return (
+ <div
+ className={`dual-list-options-bar${
+ isReadOnlyMode ? ' disabled' : ''
+ }`}>
+ {this.renderOperationBarButton(
+ () => this.addToSelectedList(),
+ 'angleRight'
+ )}
+ {this.renderOperationBarButton(
+ () => this.removeFromSelectedList(),
+ 'angleLeft'
+ )}
+ {this.renderOperationBarButton(
+ () => this.addAllToSelectedList(),
+ 'angleDoubleRight'
+ )}
+ {this.renderOperationBarButton(
+ () => this.removeAllFromSelectedList(),
+ 'angleDoubleLeft'
+ )}
+ </div>
+ );
+ }
+
+ renderOperationBarButton(onClick, iconName) {
+ return (
+ <div
+ className="dual-list-option"
+ data-test-id={`operation-icon-${iconName}`}
+ onClick={onClick}>
+ <SVGIcon name={iconName} />
+ </div>
+ );
+ }
+
+ addToSelectedList() {
+ this.props.onChange(
+ this.props.selectedValuesList.concat(this.state.selectedValues)
+ );
+ this.setState({ selectedValues: [] });
+ }
+
+ removeFromSelectedList() {
+ const selectedValues = this.state.selectedValues;
+ this.props.onChange(
+ this.props.selectedValuesList.filter(
+ value =>
+ !selectedValues.find(
+ selectedValue => selectedValue === value
+ )
+ )
+ );
+ this.setState({ selectedValues: [] });
+ }
+
+ addAllToSelectedList() {
+ this.props.onChange(this.props.availableList.map(item => item.id));
+ }
+
+ removeAllFromSelectedList() {
+ this.props.onChange([]);
+ }
}
export default DualListboxView;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 6df0bf9009..62fc29a55c 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -19,130 +19,160 @@ import PropTypes from 'prop-types';
import ValidationButtons from './ValidationButtons.jsx';
class Form extends React.Component {
-
- static defaultProps = {
- hasButtons : true,
- onSubmit : null,
- onReset : null,
- labledButtons: true,
- onValidChange : null,
- isValid: true,
- submitButtonText: null,
- cancelButtonText: null
- };
-
- static propTypes = {
- isValid : PropTypes.bool,
- formReady : PropTypes.bool,
- isReadOnlyMode : PropTypes.bool,
- hasButtons : PropTypes.bool,
- onSubmit : PropTypes.func,
- onReset : PropTypes.func,
- labledButtons: PropTypes.bool,
- submitButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string,
- onValidChange : PropTypes.func,
- onValidityChanged: PropTypes.func,
- onValidateForm: PropTypes.func
- };
-
- constructor(props) {
- super(props);
- }
-
-
- render() {
- // eslint-disable-next-line no-unused-vars
- let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
- cancelButtonText, children, ...formProps} = this.props;
- return (
- <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
- <div className='validation-form-content'>
- <fieldset disabled={isReadOnlyMode}>
- {children}
- </fieldset>
- </div>
- {hasButtons &&
- <ValidationButtons
- labledButtons={labledButtons}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- ref={(buttons) => this.buttons = buttons}
- isReadOnlyMode={isReadOnlyMode}/>}
- </form>
- );
- }
-
- handleFormValidation(event) {
- event.preventDefault();
- if (this.props.onValidateForm && !this.props.formReady){
- return this.props.onValidateForm();
- } else {
- return this.handleFormSubmit(event);
- }
- }
- handleFormSubmit(event) {
- if (event) {
- event.preventDefault();
- }
- if(this.props.onSubmit) {
- return this.props.onSubmit(event);
- }
- }
-
- componentDidMount() {
- if (this.props.hasButtons) {
- this.buttons.setState({isValid: this.props.isValid});
- }
- }
-
-
-
- componentDidUpdate(prevProps) {
- // only handling this programatically if the validation of the form is done outside of the view
- // (example with a form that is dependent on the state of other forms)
- if (prevProps.isValid !== this.props.isValid) {
- if (this.props.hasButtons) {
- this.buttons.setState({isValid: this.props.isValid});
- }
- // callback in case form is part of bigger picture in view
- if (this.props.onValidChange) {
- this.props.onValidChange(this.props.isValid);
- }
-
- // TODO - maybe this has to be part of componentWillUpdate
- if(this.props.onValidityChanged) {
- this.props.onValidityChanged(this.props.isValid);
- }
- }
- if (this.props.formReady) { // if form validation succeeded -> continue with submit
- this.handleFormSubmit();
- }
- }
-
+ static defaultProps = {
+ hasButtons: true,
+ onSubmit: null,
+ onReset: null,
+ labledButtons: true,
+ onValidChange: null,
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
+ };
+
+ static propTypes = {
+ isValid: PropTypes.bool,
+ formReady: PropTypes.bool,
+ isReadOnlyMode: PropTypes.bool,
+ hasButtons: PropTypes.bool,
+ onSubmit: PropTypes.func,
+ onReset: PropTypes.func,
+ labledButtons: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string,
+ onValidChange: PropTypes.func,
+ onValidityChanged: PropTypes.func,
+ onValidateForm: PropTypes.func
+ };
+
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ isValid,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ submitButtonText,
+ cancelButtonText,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ return (
+ <form
+ {...formProps}
+ ref={form => (this.form = form)}
+ onSubmit={event => this.handleFormValidation(event)}>
+ <div className="validation-form-content">
+ <fieldset disabled={isReadOnlyMode}>{children}</fieldset>
+ </div>
+ {hasButtons && (
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => (this.buttons = buttons)}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </form>
+ );
+ }
+
+ handleFormValidation(event) {
+ event.preventDefault();
+ if (this.props.onValidateForm && !this.props.formReady) {
+ return this.props.onValidateForm();
+ } else {
+ return this.handleFormSubmit(event);
+ }
+ }
+ handleFormSubmit(event) {
+ if (event) {
+ event.preventDefault();
+ }
+ if (this.props.onSubmit) {
+ return this.props.onSubmit(event);
+ }
+ }
+
+ componentDidMount() {
+ if (this.props.hasButtons) {
+ this.buttons.setState({ isValid: this.props.isValid });
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ // only handling this programatically if the validation of the form is done outside of the view
+ // (example with a form that is dependent on the state of other forms)
+ if (prevProps.isValid !== this.props.isValid) {
+ if (this.props.hasButtons) {
+ this.buttons.setState({ isValid: this.props.isValid });
+ }
+ // callback in case form is part of bigger picture in view
+ if (this.props.onValidChange) {
+ this.props.onValidChange(this.props.isValid);
+ }
+
+ // TODO - maybe this has to be part of componentWillUpdate
+ if (this.props.onValidityChanged) {
+ this.props.onValidityChanged(this.props.isValid);
+ }
+ }
+ if (this.props.formReady) {
+ // if form validation succeeded -> continue with submit
+ this.handleFormSubmit();
+ }
+ }
}
export class TabsForm extends Form {
- render() {
- // eslint-disable-next-line no-unused-vars
- let {submitButtonText, cancelButtonText, isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children,
- ...formProps} = this.props;
- return (
- <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
- <div className='validation-form-content'>
- {children}
- </div>
- {hasButtons &&
- <ValidationButtons
- labledButtons={labledButtons}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- ref={buttons => this.buttons = buttons}
- isReadOnlyMode={isReadOnlyMode}/>
- }
- </form>
- );
- }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ submitButtonText,
+ cancelButtonText,
+ isValid,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ return (
+ <form
+ {...formProps}
+ ref={form => (this.form = form)}
+ onSubmit={event => this.handleFormValidation(event)}>
+ <div className="validation-form-content">{children}</div>
+ {hasButtons && (
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => (this.buttons = buttons)}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </form>
+ );
+ }
}
export default Form;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 33cea933b5..a5d6f4fd7a 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -25,191 +25,249 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
class Input extends React.Component {
+ state = {
+ value: this.props.value,
+ checked: this.props.checked,
+ selectedValues: []
+ };
- state = {
- value: this.props.value,
- checked: this.props.checked,
- selectedValues: []
- };
+ render() {
+ /* eslint-disable no-unused-vars */
+ const {
+ label,
+ isReadOnlyMode,
+ value,
+ onBlur,
+ onKeyDown,
+ type,
+ disabled,
+ checked,
+ name
+ } = this.props;
+ const {
+ groupClassName,
+ isValid = true,
+ errorText,
+ isRequired,
+ overlayPos,
+ ...inputProps
+ } = this.props;
+ const {
+ dateFormat,
+ startDate,
+ endDate,
+ selectsStart,
+ selectsEnd
+ } = this.props; // Date Props
+ /* eslint-enable no-unused-vars */
+ let wrapperClassName =
+ type !== 'radio'
+ ? 'validation-input-wrapper'
+ : 'validation-radio-wrapper';
+ if (disabled) {
+ wrapperClassName += ' disabled';
+ }
+ return (
+ <div className={wrapperClassName}>
+ <FormGroup
+ className={classNames('form-group', [groupClassName], {
+ required: isRequired,
+ 'has-error': !isValid
+ })}>
+ {label &&
+ (type !== 'checkbox' && type !== 'radio') && (
+ <label className="control-label">{label}</label>
+ )}
+ {type === 'text' && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value || ''}
+ inputRef={input => (this.input = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'number' && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value !== undefined ? value : ''}
+ inputRef={input => (this.input = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
- render() {
- const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
- // eslint-disable-next-line no-unused-vars
- const {groupClassName, isValid = true, errorText, isRequired, overlayPos, ...inputProps} = this.props;
- const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
- let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
- if (disabled) {
- wrapperClassName += ' disabled';
- }
- return(
- <div className={wrapperClassName}>
- <FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
- {(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
- {type === 'text' &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={value || ''}
- inputRef={(input) => this.input = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
- {type === 'number' &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={(value !== undefined) ? value : ''}
- inputRef={(input) => this.input = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
+ {type === 'textarea' && (
+ <FormControl
+ className="form-control input-options-other"
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value || ''}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ componentClass={type}
+ onChange={e => this.onChange(e)}
+ inputRef={input => (this.input = input)}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
- {type === 'textarea' &&
- <FormControl
- className='form-control input-options-other'
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value || ''}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- componentClass={type}
- onChange={(e) => this.onChange(e)}
- inputRef={(input) => this.input = input}
- data-test-id={this.props['data-test-id']}/>}
+ {type === 'checkbox' && (
+ <Checkbox
+ className={classNames({
+ required: isRequired,
+ 'has-error': !isValid
+ })}
+ onChange={e => this.onChangeCheckBox(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ checked={checked}
+ data-test-id={this.props['data-test-id']}>
+ {label}
+ </Checkbox>
+ )}
- {type === 'checkbox' &&
- <Checkbox
- className={classNames({'required' : isRequired , 'has-error' : !isValid})}
- onChange={(e)=>this.onChangeCheckBox(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- checked={checked}
- data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
+ {type === 'radio' && (
+ <Radio
+ name={name}
+ checked={checked}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value}
+ onChange={isChecked =>
+ this.onChangeRadio(isChecked)
+ }
+ inputRef={input => (this.input = input)}
+ label={label}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'select' && (
+ <FormControl
+ onClick={e => this.optionSelect(e)}
+ className="custom-select"
+ componentClass={type}
+ inputRef={input => (this.input = input)}
+ name={name}
+ {...inputProps}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'date' && (
+ <Datepicker
+ date={value}
+ format={dateFormat}
+ startDate={startDate}
+ endDate={endDate}
+ inputRef={input => (this.input = input)}
+ onChange={this.props.onChange}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ data-test-id={this.props['data-test-id']}
+ selectsStart={selectsStart}
+ selectsEnd={selectsEnd}
+ />
+ )}
+ </FormGroup>
+ {this.renderErrorOverlay()}
+ </div>
+ );
+ }
- {type === 'radio' &&
- <Radio name={name}
- checked={checked}
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value}
- onChange={(isChecked)=>this.onChangeRadio(isChecked)}
- inputRef={(input) => this.input = input}
- label={label}
- data-test-id={this.props['data-test-id']} />}
- {type === 'select' &&
- <FormControl onClick={ (e) => this.optionSelect(e) }
- className='custom-select'
- componentClass={type}
- inputRef={(input) => this.input = input}
- name={name} {...inputProps}
- data-test-id={this.props['data-test-id']}/>}
- {type === 'date' &&
- <Datepicker
- date={value}
- format={dateFormat}
- startDate={startDate}
- endDate={endDate}
- inputRef={(input) => this.input = input}
- onChange={this.props.onChange}
- disabled={isReadOnlyMode || Boolean(disabled)}
- data-test-id={this.props['data-test-id']}
- selectsStart={selectsStart}
- selectsEnd={selectsEnd} />}
- </FormGroup>
- { this.renderErrorOverlay() }
- </div>
- );
- }
+ getValue() {
+ return this.props.type !== 'select'
+ ? this.state.value
+ : this.state.selectedValues;
+ }
- getValue() {
- return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
- }
+ getChecked() {
+ return this.state.checked;
+ }
- getChecked() {
- return this.state.checked;
- }
+ optionSelect(e) {
+ let selectedValues = [];
+ if (e.target.value) {
+ selectedValues.push(e.target.value);
+ }
+ this.setState({
+ selectedValues
+ });
+ }
- optionSelect(e) {
- let selectedValues = [];
- if (e.target.value) {
- selectedValues.push(e.target.value);
- }
- this.setState({
- selectedValues
- });
- }
+ onChange(e) {
+ const { onChange, type } = this.props;
+ let value = e.target.value;
+ if (type === 'number') {
+ if (value === '') {
+ value = undefined;
+ } else {
+ value = Number(value);
+ }
+ }
+ this.setState({
+ value
+ });
+ onChange(value);
+ }
- onChange(e) {
- const {onChange, type} = this.props;
- let value = e.target.value;
- if (type === 'number') {
- if (value === '') {
- value = undefined;
- } else {
- value = Number(value);
- }
- }
- this.setState({
- value
- });
- onChange(value);
- }
+ onChangeCheckBox(e) {
+ let { onChange } = this.props;
+ let checked = e.target.checked;
+ this.setState({
+ checked
+ });
+ onChange(checked);
+ }
- onChangeCheckBox(e) {
- let {onChange} = this.props;
- let checked = e.target.checked;
- this.setState({
- checked
- });
- onChange(checked);
- }
+ onChangeRadio(isChecked) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: isChecked
+ });
+ onChange(this.state.value);
+ }
- onChangeRadio(isChecked) {
- let {onChange} = this.props;
- this.setState({
- checked: isChecked
- });
- onChange(this.state.value);
- }
+ focus() {
+ ReactDOM.findDOMNode(this.input).focus();
+ }
- focus() {
- ReactDOM.findDOMNode(this.input).focus();
- }
+ renderErrorOverlay() {
+ let position = 'right';
+ const { errorText = '', isValid = true, type, overlayPos } = this.props;
- renderErrorOverlay() {
- let position = 'right';
- const {errorText = '', isValid = true, type, overlayPos} = this.props;
-
- if (overlayPos) {
- position = overlayPos;
- }
- else if (type === 'text'
- || type === 'email'
- || type === 'number'
- || type === 'radio'
- || type === 'password'
- || type === 'date') {
- position = 'bottom';
- }
-
- return (
- <Overlay
- show={!isValid}
- placement={position}
- target={() => {
- let target = ReactDOM.findDOMNode(this.input);
- return target.offsetParent ? target : undefined;
- }}
- container={this}>
- <Tooltip
- id={`error-${errorText.replace(' ', '-')}`}
- className='validation-error-message'>
- {errorText}
- </Tooltip>
- </Overlay>
- );
- }
+ if (overlayPos) {
+ position = overlayPos;
+ } else if (
+ type === 'text' ||
+ type === 'email' ||
+ type === 'number' ||
+ type === 'radio' ||
+ type === 'password' ||
+ type === 'date'
+ ) {
+ position = 'bottom';
+ }
+ return (
+ <Overlay
+ show={!isValid}
+ placement={position}
+ target={() => {
+ let target = ReactDOM.findDOMNode(this.input);
+ return target.offsetParent ? target : undefined;
+ }}
+ container={this}>
+ <Tooltip
+ id={`error-${errorText.replace(' ', '-')}`}
+ className="validation-error-message">
+ {errorText}
+ </Tooltip>
+ </Overlay>
+ );
+ }
}
-export default Input;
+export default Input;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 11b07ba9da..019b6a5c70 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -22,260 +22,341 @@ import Select from 'nfvo-components/input/SelectInput.jsx';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-export const other = {OTHER: 'Other'};
+export const other = { OTHER: 'Other' };
class InputOptions extends React.Component {
+ static propTypes = {
+ values: PropTypes.arrayOf(
+ PropTypes.shape({
+ enum: PropTypes.string,
+ title: PropTypes.string
+ })
+ ),
+ isEnabledOther: PropTypes.bool,
+ label: PropTypes.string,
+ selectedValue: PropTypes.string,
+ multiSelectedEnum: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.array
+ ]),
+ selectedEnum: PropTypes.string,
+ otherValue: PropTypes.string,
+ overlayPos: PropTypes.string,
+ onEnumChange: PropTypes.func,
+ onOtherChange: PropTypes.func,
+ onBlur: PropTypes.func,
+ isRequired: PropTypes.bool,
+ isMultiSelect: PropTypes.bool,
+ isValid: PropTypes.bool,
+ disabled: PropTypes.bool
+ };
- static propTypes = {
- values: PropTypes.arrayOf(PropTypes.shape({
- enum: PropTypes.string,
- title: PropTypes.string
- })),
- isEnabledOther: PropTypes.bool,
- label: PropTypes.string,
- selectedValue: PropTypes.string,
- multiSelectedEnum: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.array
- ]),
- selectedEnum: PropTypes.string,
- otherValue: PropTypes.string,
- overlayPos: PropTypes.string,
- onEnumChange: PropTypes.func,
- onOtherChange: PropTypes.func,
- onBlur: PropTypes.func,
- isRequired: PropTypes.bool,
- isMultiSelect: PropTypes.bool,
- isValid: PropTypes.bool,
- disabled: PropTypes.bool
- };
+ state = {
+ otherInputDisabled: !this.props.otherValue
+ };
- state = {
- otherInputDisabled: !this.props.otherValue
- };
+ oldProps = {
+ selectedEnum: '',
+ otherValue: '',
+ multiSelectedEnum: []
+ };
- oldProps = {
- selectedEnum: '',
- otherValue: '',
- multiSelectedEnum: []
- };
+ render() {
+ let {
+ label,
+ isRequired,
+ values,
+ otherValue,
+ onOtherChange,
+ isMultiSelect,
+ onBlur,
+ multiSelectedEnum,
+ selectedEnum,
+ isValid,
+ children,
+ isReadOnlyMode
+ } = this.props;
+ const dataTestId = this.props['data-test-id']
+ ? { 'data-test-id': this.props['data-test-id'] }
+ : {};
+ let currentMultiSelectedEnum = [];
+ let currentSelectedEnum = '';
+ let otherInputDisabled =
+ (isMultiSelect &&
+ (multiSelectedEnum === undefined ||
+ multiSelectedEnum.length === 0 ||
+ multiSelectedEnum[0] !== other.OTHER)) ||
+ (!isMultiSelect &&
+ (selectedEnum === undefined || selectedEnum !== other.OTHER));
+ if (isMultiSelect) {
+ currentMultiSelectedEnum = multiSelectedEnum;
+ if (!otherInputDisabled) {
+ currentSelectedEnum = multiSelectedEnum
+ ? multiSelectedEnum.toString()
+ : undefined;
+ }
+ } else if (selectedEnum) {
+ currentSelectedEnum = selectedEnum;
+ }
+ if (!onBlur) {
+ onBlur = () => {};
+ }
- render() {
- let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, isValid, children, isReadOnlyMode} = this.props;
- const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {};
- let currentMultiSelectedEnum = [];
- let currentSelectedEnum = '';
- let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER))
- || (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER));
- if (isMultiSelect) {
- currentMultiSelectedEnum = multiSelectedEnum;
- if(!otherInputDisabled) {
- currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
- }
- }
- else if(selectedEnum){
- currentSelectedEnum = selectedEnum;
- }
- if (!onBlur) {
- onBlur = () => {};
- }
+ return (
+ <div className="validation-input-wrapper">
+ <div
+ className={classNames('form-group', {
+ required: isRequired,
+ 'has-error': !isValid
+ })}>
+ {label && <label className="control-label">{label}</label>}
+ {isMultiSelect && otherInputDisabled ? (
+ <Select
+ {...dataTestId}
+ ref={input => (this.input = input)}
+ value={currentMultiSelectedEnum}
+ className="options-input"
+ clearable={false}
+ required={isRequired}
+ disabled={
+ isReadOnlyMode || Boolean(this.props.disabled)
+ }
+ onBlur={() => onBlur()}
+ onMultiSelectChanged={value =>
+ this.multiSelectEnumChanged(value)
+ }
+ options={this.renderMultiSelectOptions(values)}
+ multi
+ />
+ ) : (
+ <div
+ className={classNames('input-options', {
+ 'has-error': !isValid
+ })}>
+ <select
+ {...dataTestId}
+ ref={input => (this.input = input)}
+ label={label}
+ className="form-control input-options-select"
+ value={currentSelectedEnum}
+ style={{
+ width: otherInputDisabled ? '100%' : '100px'
+ }}
+ onBlur={() => onBlur()}
+ disabled={
+ isReadOnlyMode ||
+ Boolean(this.props.disabled)
+ }
+ onChange={value => this.enumChanged(value)}
+ type="select">
+ {children ||
+ (values &&
+ values.length &&
+ values.map((val, index) =>
+ this.renderOptions(val, index)
+ ))}
+ {onOtherChange && (
+ <option key="other" value={other.OTHER}>
+ {i18n(other.OTHER)}
+ </option>
+ )}
+ </select>
- return(
- <div className='validation-input-wrapper' >
- <div className={classNames('form-group', {'required' : isRequired, 'has-error' : !isValid})} >
- {label && <label className='control-label'>{label}</label>}
- {isMultiSelect && otherInputDisabled ?
- <Select
- {...dataTestId}
- ref={(input) => this.input = input}
- value={currentMultiSelectedEnum}
- className='options-input'
- clearable={false}
- required={isRequired}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onBlur={() => onBlur()}
- onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
- options={this.renderMultiSelectOptions(values)}
- multi/> :
- <div className={classNames('input-options',{'has-error' : !isValid})} >
- <select
- {...dataTestId}
- ref={(input) => this.input = input}
- label={label}
- className='form-control input-options-select'
- value={currentSelectedEnum}
- style={{'width' : otherInputDisabled ? '100%' : '100px'}}
- onBlur={() => onBlur()}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onChange={ value => this.enumChanged(value)}
- type='select'>
- {children || (values && values.length && values.map((val, index) => this.renderOptions(val, index)))}
- {onOtherChange && <option key='other' value={other.OTHER}>{i18n(other.OTHER)}</option>}
- </select>
+ {!otherInputDisabled && (
+ <div className="input-options-separator" />
+ )}
+ <input
+ className="form-control input-options-other"
+ placeholder={i18n('other')}
+ ref={otherValue =>
+ (this.otherValue = otherValue)
+ }
+ style={{
+ display: otherInputDisabled
+ ? 'none'
+ : 'block'
+ }}
+ disabled={
+ isReadOnlyMode ||
+ Boolean(this.props.disabled)
+ }
+ value={otherValue || ''}
+ onBlur={() => onBlur()}
+ onChange={() => this.changedOtherInput()}
+ />
+ </div>
+ )}
+ </div>
+ {this.renderErrorOverlay()}
+ </div>
+ );
+ }
- {!otherInputDisabled && <div className='input-options-separator'/>}
- <input
- className='form-control input-options-other'
- placeholder={i18n('other')}
- ref={(otherValue) => this.otherValue = otherValue}
- style={{'display' : otherInputDisabled ? 'none' : 'block'}}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- value={otherValue || ''}
- onBlur={() => onBlur()}
- onChange={() => this.changedOtherInput()}/>
- </div>
- }
- </div>
- { this.renderErrorOverlay() }
- </div>
- );
- }
+ renderOptions(val, index) {
+ return (
+ <option key={index} value={val.enum}>
+ {val.title}
+ </option>
+ );
+ }
- renderOptions(val, index){
- return (
- <option key={index} value={val.enum}>{val.title}</option>
- );
- }
+ renderMultiSelectOptions(values) {
+ let { onOtherChange } = this.props;
+ let optionsList = [];
+ if (onOtherChange) {
+ optionsList = values
+ .map(option => {
+ return {
+ label: option.title,
+ value: option.enum
+ };
+ })
+ .concat([
+ {
+ label: i18n(other.OTHER),
+ value: i18n(other.OTHER)
+ }
+ ]);
+ } else {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum
+ };
+ });
+ }
+ if (optionsList.length > 0 && optionsList[0].value === '') {
+ optionsList.shift();
+ }
+ return optionsList;
+ }
+ renderErrorOverlay() {
+ let position = 'right';
+ const { errorText = '', isValid = true, type, overlayPos } = this.props;
- renderMultiSelectOptions(values) {
- let {onOtherChange} = this.props;
- let optionsList = [];
- if (onOtherChange) {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- }).concat([{
- label: i18n(other.OTHER),
- value: i18n(other.OTHER),
- }]);
- }
- else {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- });
- }
- if (optionsList.length > 0 && optionsList[0].value === '') {
- optionsList.shift();
- }
- return optionsList;
- }
+ if (overlayPos) {
+ position = overlayPos;
+ } else if (
+ type === 'text' ||
+ type === 'email' ||
+ type === 'number' ||
+ type === 'password'
+ ) {
+ position = 'bottom';
+ }
- renderErrorOverlay() {
- let position = 'right';
- const {errorText = '', isValid = true, type, overlayPos} = this.props;
+ return (
+ <Overlay
+ show={!isValid}
+ placement={position}
+ target={() => {
+ let { otherInputDisabled } = this.state;
+ let target = otherInputDisabled
+ ? ReactDOM.findDOMNode(this.input)
+ : ReactDOM.findDOMNode(this.otherValue);
+ return target.offsetParent ? target : undefined;
+ }}
+ container={this}>
+ <Tooltip
+ id={`error-${errorText.replace(' ', '-')}`}
+ className="validation-error-message">
+ {errorText}
+ </Tooltip>
+ </Overlay>
+ );
+ }
- if (overlayPos) {
- position = overlayPos;
- }
- else if (type === 'text'
- || type === 'email'
- || type === 'number'
- || type === 'password') {
- position = 'bottom';
- }
+ getValue() {
+ let res = '';
+ let { isMultiSelect } = this.props;
+ let { otherInputDisabled } = this.state;
- return (
- <Overlay
- show={!isValid}
- placement={position}
- target={() => {
- let {otherInputDisabled} = this.state;
- let target = otherInputDisabled ? ReactDOM.findDOMNode(this.input) : ReactDOM.findDOMNode(this.otherValue);
- return target.offsetParent ? target : undefined;
- }}
- container={this}>
- <Tooltip
- id={`error-${errorText.replace(' ', '-')}`}
- className='validation-error-message'>
- {errorText}
- </Tooltip>
- </Overlay>
- );
- }
+ if (otherInputDisabled) {
+ res = isMultiSelect ? this.input.getValue() : this.input.value;
+ } else {
+ res = this.otherValue.value;
+ }
+ return res;
+ }
- getValue() {
- let res = '';
- let {isMultiSelect} = this.props;
- let {otherInputDisabled} = this.state;
+ enumChanged() {
+ let enumValue = this.input.value;
+ let {
+ onEnumChange,
+ onOtherChange,
+ isMultiSelect,
+ onChange
+ } = this.props;
+ this.setState({
+ otherInputDisabled:
+ !Boolean(onOtherChange) || enumValue !== other.OTHER
+ });
- if (otherInputDisabled) {
- res = isMultiSelect ? this.input.getValue() : this.input.value;
- } else {
- res = this.otherValue.value;
- }
- return res;
- }
+ let value = isMultiSelect ? [enumValue] : enumValue;
+ if (onEnumChange) {
+ onEnumChange(value);
+ }
+ if (onChange) {
+ onChange(value);
+ }
+ }
- enumChanged() {
- let enumValue = this.input.value;
- let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props;
- this.setState({
- otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER
- });
+ multiSelectEnumChanged(enumValue) {
+ let { onEnumChange, onOtherChange } = this.props;
+ let selectedValues = enumValue.map(enumVal => {
+ return enumVal.value;
+ });
- let value = isMultiSelect ? [enumValue] : enumValue;
- if (onEnumChange) {
- onEnumChange(value);
- }
- if (onChange) {
- onChange(value);
- }
- }
+ if (this.state.otherInputDisabled === false) {
+ selectedValues.shift();
+ } else if (selectedValues.includes(i18n(other.OTHER))) {
+ selectedValues = [i18n(other.OTHER)];
+ }
- multiSelectEnumChanged(enumValue) {
- let {onEnumChange, onOtherChange} = this.props;
- let selectedValues = enumValue.map(enumVal => {
- return enumVal.value;
- });
+ this.setState({
+ otherInputDisabled:
+ !Boolean(onOtherChange) ||
+ !selectedValues.includes(i18n(other.OTHER))
+ });
+ onEnumChange(selectedValues);
+ }
- if (this.state.otherInputDisabled === false) {
- selectedValues.shift();
- }
- else if (selectedValues.includes(i18n(other.OTHER))) {
- selectedValues = [i18n(other.OTHER)];
- }
+ changedOtherInput() {
+ let { onOtherChange } = this.props;
+ onOtherChange(this.otherValue.value);
+ }
- this.setState({
- otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER))
- });
- onEnumChange(selectedValues);
- }
-
- changedOtherInput() {
- let {onOtherChange} = this.props;
- onOtherChange(this.otherValue.value);
- }
-
- componentDidUpdate() {
- let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
- if (this.oldProps.otherValue !== otherValue
- || this.oldProps.selectedEnum !== selectedEnum
- || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
- this.oldProps = {
- otherValue,
- selectedEnum,
- multiSelectedEnum
- };
- onInputChange();
- }
- }
-
- static getTitleByName(values, name) {
- for (let key of Object.keys(values)) {
- let option = values[key].find(option => option.enum === name);
- if (option) {
- return option.title;
- }
- }
- return name;
- }
+ componentDidUpdate() {
+ let {
+ otherValue,
+ selectedEnum,
+ onInputChange,
+ multiSelectedEnum
+ } = this.props;
+ if (
+ this.oldProps.otherValue !== otherValue ||
+ this.oldProps.selectedEnum !== selectedEnum ||
+ this.oldProps.multiSelectedEnum !== multiSelectedEnum
+ ) {
+ this.oldProps = {
+ otherValue,
+ selectedEnum,
+ multiSelectedEnum
+ };
+ onInputChange();
+ }
+ }
+ static getTitleByName(values, name) {
+ for (let key of Object.keys(values)) {
+ let option = values[key].find(option => option.enum === name);
+ if (option) {
+ return option.title;
+ }
+ }
+ return name;
+ }
}
export default InputOptions;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index e440fcda69..3e0bb32ca9 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -22,114 +22,149 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
class InputWrapper extends React.Component {
-
- state = {
- value: this.props.value,
- checked: this.props.checked,
- selectedValues: []
- }
-
- render() {
- const {label, hasError, validations = {}, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
- const {groupClassName, ...inputProps} = this.props;
- return(
- <FormGroup className={classNames('form-group', [groupClassName], {'required' : validations.required , 'has-error' : hasError})} >
- {(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
- {(type === 'text' || type === 'number') &&
- <FormControl
- bsClass={'form-control input-options-other'}
- onChange={(e) => this.onChange(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- value={value || ''}
- ref={(input) => this.inputWrapper = input}
- type={type}
- data-test-id={this.props['data-test-id']}/>}
-
- {type === 'textarea' &&
- <FormControl
- className='form-control input-options-other'
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value || ''}
- onBlur={onBlur}
- onKeyDown={onKeyDown}
- componentClass={type}
- onChange={(e) => this.onChange(e)}
- data-test-id={this.props['data-test-id']}/>}
-
- {type === 'checkbox' &&
- <Checkbox
- className={classNames({'required' : validations.required , 'has-error' : hasError})}
- onChange={(e)=>this.onChangeCheckBox(e)}
- disabled={isReadOnlyMode || Boolean(disabled)}
- checked={value}
- data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
-
- {type === 'radio' &&
- <Radio name={name}
- checked={checked}
- disabled={isReadOnlyMode || Boolean(disabled)}
- value={value}
- ref={(input) => this.inputWrapper = input}
- onChange={(isChecked)=>this.onChangeRadio(isChecked)} label={label}
- data-test-id={this.props['data-test-id']} />}
- {type === 'select' &&
- <FormControl onClick={ (e) => this.optionSelect(e) }
- componentClass={type}
- name={name} {...inputProps}
- data-test-id={this.props['data-test-id']}/>}
-
- </FormGroup>
-
- );
- }
-
- getValue() {
- return this.props.type !== 'select' ? this.state.value : this.state.selectedValues;
- }
-
- getChecked() {
- return this.state.checked;
- }
-
- optionSelect(e) {
- let selectedValues = [];
- if (e.target.value) {
- selectedValues.push(e.target.value);
- }
- this.setState({
- selectedValues
- });
- }
-
- onChange(e) {
- let {onChange} = this.props;
- this.setState({
- value: e.target.value
- });
- onChange(e.target.value);
- }
-
- onChangeCheckBox(e) {
- let {onChange} = this.props;
- this.setState({
- checked: e.target.checked
- });
- onChange(e.target.checked);
- }
-
- onChangeRadio(isChecked) {
- let {onChange} = this.props;
- this.setState({
- checked: isChecked
- });
- onChange(this.state.value);
- }
-
- focus() {
- ReactDOM.findDOMNode(this.inputWrapper).focus();
- }
-
+ state = {
+ value: this.props.value,
+ checked: this.props.checked,
+ selectedValues: []
+ };
+
+ render() {
+ const {
+ label,
+ hasError,
+ validations = {},
+ isReadOnlyMode,
+ value,
+ onBlur,
+ onKeyDown,
+ type,
+ disabled,
+ checked,
+ name
+ } = this.props;
+ const { groupClassName, ...inputProps } = this.props;
+ return (
+ <FormGroup
+ className={classNames('form-group', [groupClassName], {
+ required: validations.required,
+ 'has-error': hasError
+ })}>
+ {label &&
+ (type !== 'checkbox' && type !== 'radio') && (
+ <label className="control-label">{label}</label>
+ )}
+ {(type === 'text' || type === 'number') && (
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={e => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={value || ''}
+ ref={input => (this.inputWrapper = input)}
+ type={type}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+
+ {type === 'textarea' && (
+ <FormControl
+ className="form-control input-options-other"
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value || ''}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ componentClass={type}
+ onChange={e => this.onChange(e)}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+
+ {type === 'checkbox' && (
+ <Checkbox
+ className={classNames({
+ required: validations.required,
+ 'has-error': hasError
+ })}
+ onChange={e => this.onChangeCheckBox(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ checked={value}
+ data-test-id={this.props['data-test-id']}>
+ {label}
+ </Checkbox>
+ )}
+
+ {type === 'radio' && (
+ <Radio
+ name={name}
+ checked={checked}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ value={value}
+ ref={input => (this.inputWrapper = input)}
+ onChange={isChecked => this.onChangeRadio(isChecked)}
+ label={label}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ {type === 'select' && (
+ <FormControl
+ onClick={e => this.optionSelect(e)}
+ componentClass={type}
+ name={name}
+ {...inputProps}
+ data-test-id={this.props['data-test-id']}
+ />
+ )}
+ </FormGroup>
+ );
+ }
+
+ getValue() {
+ return this.props.type !== 'select'
+ ? this.state.value
+ : this.state.selectedValues;
+ }
+
+ getChecked() {
+ return this.state.checked;
+ }
+
+ optionSelect(e) {
+ let selectedValues = [];
+ if (e.target.value) {
+ selectedValues.push(e.target.value);
+ }
+ this.setState({
+ selectedValues
+ });
+ }
+
+ onChange(e) {
+ let { onChange } = this.props;
+ this.setState({
+ value: e.target.value
+ });
+ onChange(e.target.value);
+ }
+
+ onChangeCheckBox(e) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: e.target.checked
+ });
+ onChange(e.target.checked);
+ }
+
+ onChangeRadio(isChecked) {
+ let { onChange } = this.props;
+ this.setState({
+ checked: isChecked
+ });
+ onChange(this.state.value);
+ }
+
+ focus() {
+ ReactDOM.findDOMNode(this.inputWrapper).focus();
+ }
}
-export default InputWrapper;
+export default InputWrapper;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
index 0982c133e6..429985a902 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
@@ -16,64 +16,76 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
-import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js';
+import { default as SDCTabs } from 'sdc-ui/lib/react/Tabs.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-export default
-class Tabs extends React.Component {
+export default class Tabs extends React.Component {
+ static propTypes = {
+ children: PropTypes.node
+ };
- static propTypes = {
- children: PropTypes.node
- };
+ cloneTab(element) {
+ const { invalidTabs } = this.props;
+ return React.cloneElement(element, {
+ key: element.props.tabId,
+ className:
+ invalidTabs.indexOf(element.props.tabId) > -1
+ ? 'invalid-tab'
+ : 'valid-tab'
+ });
+ }
- cloneTab(element) {
- const {invalidTabs} = this.props;
- return React.cloneElement(
- element,
- {
- key: element.props.tabId,
- className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab'
- }
- );
- }
+ showTabsError() {
+ const { invalidTabs } = this.props;
+ const showError =
+ (invalidTabs.length === 1 &&
+ invalidTabs[0] !== this.props.activeTab) ||
+ invalidTabs.length > 1;
+ return showError;
+ }
- showTabsError() {
- const {invalidTabs} = this.props;
- const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1));
- return showError;
- }
-
- render() {
- // eslint-disable-next-line no-unused-vars
- let {invalidTabs, ...tabProps} = this.props;
- return (
- <div>
- <SDCTabs {...tabProps} ref='tabsList' id='tabsList' >
- {this.props.children.map(element => this.cloneTab(element))}
- </SDCTabs>
- <Overlay
- animation={false}
- show={this.showTabsError()}
- placement='bottom'
- target={() => {
- let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
- return target && target.offsetParent ? target : undefined;
- }
- }
- container={() => {
- let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)');
- return target && target.offsetParent ? target.offsetParent : this;
- }}>
- <Tooltip
- id='error-some-tabs-contain-errors'
- className='validation-error-message'>
- {i18n('One or more tabs are invalid')}
- </Tooltip>
- </Overlay>
- </div>
- );
- }
+ render() {
+ // eslint-disable-next-line no-unused-vars
+ let { invalidTabs, ...tabProps } = this.props;
+ return (
+ <div>
+ <SDCTabs {...tabProps} ref="tabsList" id="tabsList">
+ {this.props.children.map(element => this.cloneTab(element))}
+ </SDCTabs>
+ <Overlay
+ animation={false}
+ show={this.showTabsError()}
+ placement="bottom"
+ target={() => {
+ let target = ReactDOM.findDOMNode(
+ this.refs.tabsList
+ ).querySelector(
+ 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+ );
+ return target && target.offsetParent
+ ? target
+ : undefined;
+ }}
+ container={() => {
+ let target = ReactDOM.findDOMNode(
+ this.refs.tabsList
+ ).querySelector(
+ 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'
+ );
+ return target && target.offsetParent
+ ? target.offsetParent
+ : this;
+ }}>
+ <Tooltip
+ id="error-some-tabs-contain-errors"
+ className="validation-error-message">
+ {i18n('One or more tabs are invalid')}
+ </Tooltip>
+ </Overlay>
+ </div>
+ );
+ }
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index 151d3fe859..e460f68a98 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -27,32 +27,63 @@ import Button from 'sdc-ui/lib/react/Button.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class ValidationButtons extends React.Component {
+ static propTypes = {
+ labledButtons: PropTypes.bool.isRequired,
+ isReadOnlyMode: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
+ };
- static propTypes = {
- labledButtons: PropTypes.bool.isRequired,
- isReadOnlyMode: PropTypes.bool,
- submitButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
- };
+ state = {
+ isValid: this.props.formValid
+ };
- state = {
- isValid: this.props.formValid
- };
-
- render() {
- let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
- let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
- return (
- <div className='validation-buttons'>
- {!this.props.isReadOnlyMode ?
- <div>
- <Button type='submit' data-test-id='form-submit-button' disabled={!this.state.isValid}>{submitBtn}</Button>
- <Button btnType='outline' type='reset' data-test-id='form-close-button'>{closeBtn}</Button>
- </div>
- : <Button btnType='outline' type='reset' data-test-id='form-close-button'>{i18n('Close')}</Button>
- }
- </div>
- );
- }
+ render() {
+ let submitBtn = this.props.labledButtons ? (
+ this.props.submitButtonText ? (
+ this.props.submitButtonText
+ ) : (
+ i18n('Save')
+ )
+ ) : (
+ <SVGIcon className="check" name="check" />
+ );
+ let closeBtn = this.props.labledButtons ? (
+ this.props.cancelButtonText ? (
+ this.props.cancelButtonText
+ ) : (
+ i18n('Cancel')
+ )
+ ) : (
+ <SVGIcon className="close" name="close" />
+ );
+ return (
+ <div className="validation-buttons">
+ {!this.props.isReadOnlyMode ? (
+ <div>
+ <Button
+ type="submit"
+ data-test-id="form-submit-button"
+ disabled={!this.state.isValid}>
+ {submitBtn}
+ </Button>
+ <Button
+ btnType="outline"
+ type="reset"
+ data-test-id="form-close-button">
+ {closeBtn}
+ </Button>
+ </div>
+ ) : (
+ <Button
+ btnType="outline"
+ type="reset"
+ data-test-id="form-close-button">
+ {i18n('Close')}
+ </Button>
+ )}
+ </div>
+ );
+ }
}
export default ValidationButtons;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
index 60c559a3d1..359af9d3b8 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -19,50 +19,78 @@ import classnames from 'classnames';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import store from 'sdc-app/AppStore.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
class ListEditorItem extends React.Component {
- static propTypes = {
- onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
- onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
- onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
- children: PropTypes.node,
- isReadOnlyMode: PropTypes.bool
- };
+ static propTypes = {
+ onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+ onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+ onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+ children: PropTypes.node,
+ isReadOnlyMode: PropTypes.bool
+ };
- render() {
- let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
- let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode;
- return (
- <div className={classnames('list-editor-item-view', {'selectable': Boolean(onSelect)})} data-test-id='list-editor-item'>
- <div className='list-editor-item-view-content' onClick={onSelect}>
- {children}
- </div>
- {(onEdit || onDelete) && <div className='list-editor-item-view-controller'>
- {onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
- {onDelete && isAbilityToDelete && <SVGIcon name='trashO' data-test-id='delete-list-item' onClick={() => this.onClickedItem(onDelete)}/>}
- </div>}
- </div>
- );
- }
+ render() {
+ let {
+ onDelete,
+ onSelect,
+ onEdit,
+ children,
+ isReadOnlyMode
+ } = this.props;
+ let isAbilityToDelete =
+ isReadOnlyMode === undefined ? true : !isReadOnlyMode;
+ return (
+ <div
+ className={classnames('list-editor-item-view', {
+ selectable: Boolean(onSelect)
+ })}
+ data-test-id="list-editor-item">
+ <div
+ className="list-editor-item-view-content"
+ onClick={onSelect}>
+ {children}
+ </div>
+ {(onEdit || onDelete) && (
+ <div className="list-editor-item-view-controller">
+ {onEdit && (
+ <SVGIcon
+ name="sliders"
+ onClick={() => this.onClickedItem(onEdit)}
+ />
+ )}
+ {onDelete &&
+ isAbilityToDelete && (
+ <SVGIcon
+ name="trashO"
+ data-test-id="delete-list-item"
+ onClick={() => this.onClickedItem(onDelete)}
+ />
+ )}
+ </div>
+ )}
+ </div>
+ );
+ }
- onClickedItem(callBackFunc) {
- if(typeof callBackFunc === 'function') {
- let {isCheckedOut} = this.props;
- if (isCheckedOut === false) {
- store.dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Error'),
- msg: i18n('This item is checkedin/submitted, Click Check Out to continue')
- }
- });
- }
- else {
- callBackFunc();
- }
- }
- }
+ onClickedItem(callBackFunc) {
+ if (typeof callBackFunc === 'function') {
+ let { isCheckedOut } = this.props;
+ if (isCheckedOut === false) {
+ store.dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Error'),
+ msg: i18n(
+ 'This item is checkedin/submitted, Click Check Out to continue'
+ )
+ }
+ });
+ } else {
+ callBackFunc();
+ }
+ }
+ }
}
export default ListEditorItem;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
index 839f9a504a..509ea176a5 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
@@ -15,10 +15,8 @@
*/
import React from 'react';
-export const ListEditorItemViewField = ({children}) => (
- <div className='list-editor-item-view-field'>
- {children}
- </div>
+export const ListEditorItemViewField = ({ children }) => (
+ <div className="list-editor-item-view-field">{children}</div>
);
export default ListEditorItemViewField;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
index 16823b7dc5..f71372ce1a 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.js';
import classnames from 'classnames';
import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
-const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => {
- return (
- <div className='list-editor-view-header'>
- {title && <div className='list-editor-view-title'>{title}</div>}
- <div>
- { onAdd &&
- <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button>
- }
- </div>
- </div>
- );
+const ListEditorHeader = ({
+ onAdd,
+ isReadOnlyMode,
+ title,
+ plusButtonTitle
+}) => {
+ return (
+ <div className="list-editor-view-header">
+ {title && <div className="list-editor-view-title">{title}</div>}
+ <div>
+ {onAdd && (
+ <Button
+ data-test-id="add-button"
+ iconName="plusThin"
+ btnType="link"
+ onClick={onAdd}
+ disabled={isReadOnlyMode === true}>
+ {plusButtonTitle}
+ </Button>
+ )}
+ </div>
+ </div>
+ );
};
-const ListEditorScroller = ({children, twoColumns}) => {
- return (
- <div className='list-editor-view-list-scroller'>
- <div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}>
- {children}
- </div>
- </div>
- );
+const ListEditorScroller = ({ children, twoColumns }) => {
+ return (
+ <div className="list-editor-view-list-scroller">
+ <div
+ className={classnames('list-editor-view-list', {
+ 'two-columns': twoColumns
+ })}>
+ {children}
+ </div>
+ </div>
+ );
};
-const FilterWrapper = ({onFilter, filterValue}) => {
- return (
- <div className='expandble-search-wrapper'>
- <ExpandableInput
- onChange={onFilter}
- iconType='search'
- value={filterValue}/>
- </div>
- );
+const FilterWrapper = ({ onFilter, filterValue }) => {
+ return (
+ <div className="expandble-search-wrapper">
+ <ExpandableInput
+ onChange={onFilter}
+ iconType="search"
+ value={filterValue}
+ />
+ </div>
+ );
};
class ListEditorView extends React.Component {
+ static defaultProps = {
+ className: '',
+ twoColumns: false
+ };
- static defaultProps = {
- className: '',
- twoColumns: false
- };
-
- static propTypes = {
- title: PropTypes.string,
- plusButtonTitle: PropTypes.string,
- children: PropTypes.node,
- filterValue: PropTypes.string,
- onFilter: PropTypes.func,
- className: PropTypes.string,
- isReadOnlyMode: PropTypes.bool,
- placeholder: PropTypes.string,
- twoColumns: PropTypes.bool
- };
-
- render() {
- let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props;
- return (
- <div className={classnames('list-editor-view', className)}>
- <ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/>
- {onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>}
- <ListEditorScroller children={children} twoColumns={twoColumns}/>
- </div>
- );
- }
+ static propTypes = {
+ title: PropTypes.string,
+ plusButtonTitle: PropTypes.string,
+ children: PropTypes.node,
+ filterValue: PropTypes.string,
+ onFilter: PropTypes.func,
+ className: PropTypes.string,
+ isReadOnlyMode: PropTypes.bool,
+ placeholder: PropTypes.string,
+ twoColumns: PropTypes.bool
+ };
+ render() {
+ let {
+ title,
+ plusButtonTitle,
+ onAdd,
+ children,
+ onFilter,
+ className,
+ isReadOnlyMode,
+ twoColumns,
+ filterValue
+ } = this.props;
+ return (
+ <div className={classnames('list-editor-view', className)}>
+ <ListEditorHeader
+ onAdd={onAdd}
+ isReadOnlyMode={isReadOnlyMode}
+ plusButtonTitle={plusButtonTitle}
+ title={title}
+ />
+ {onFilter &&
+ (children.length || filterValue) && (
+ <FilterWrapper
+ onFilter={onFilter}
+ filterValue={filterValue}
+ />
+ )}
+ <ListEditorScroller
+ children={children}
+ twoColumns={twoColumns}
+ />
+ </div>
+ );
+ }
}
export default ListEditorView;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
index 81125c84ba..67258c956d 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
+++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
@@ -1,27 +1,25 @@
import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
+import { storiesOf, action } from '@kadira/storybook';
import ListEditorView from './ListEditorView.jsx';
import ListEditorItemView from './ListEditorItemView.jsx';
import ListEditorItemField from './ListEditorItemViewField.jsx';
-import {text, number} from '@kadira/storybook-addon-knobs';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { text, number } from '@kadira/storybook-addon-knobs';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
-function makeChildren({onEdit = false, onDelete = false} = {}) {
- return (
- [...Array(number('Items', 2)).keys()].map(index => (
- <ListEditorItemView
- key={index}
- onEdit={onEdit ? onEdit : undefined}
- onDelete={onDelete ? onDelete : undefined}>
- <ListEditorItemField>
- <div>{text('field 1', 'Lorum Ipsum')}</div>
- </ListEditorItemField>
- <ListEditorItemField>
- <div>{text('field 2', 'Lorum Ipsum')}</div>
- </ListEditorItemField>
- </ListEditorItemView>)
- )
- );
+function makeChildren({ onEdit = false, onDelete = false } = {}) {
+ return [...Array(number('Items', 2)).keys()].map(index => (
+ <ListEditorItemView
+ key={index}
+ onEdit={onEdit ? onEdit : undefined}
+ onDelete={onDelete ? onDelete : undefined}>
+ <ListEditorItemField>
+ <div>{text('field 1', 'Lorum Ipsum')}</div>
+ </ListEditorItemField>
+ <ListEditorItemField>
+ <div>{text('field 2', 'Lorum Ipsum')}</div>
+ </ListEditorItemField>
+ </ListEditorItemView>
+ ));
}
const stories = storiesOf('ListEditor', module);
@@ -29,32 +27,49 @@ stories.addDecorator(withKnobs);
stories
.add('regular', () => (
- <ListEditorView title='List Editor'>
- {makeChildren()}
- </ListEditorView>
+ <ListEditorView title="List Editor">{makeChildren()}</ListEditorView>
))
.add('two columns', () => (
- <ListEditorView title='List Editor' twoColumns>
+ <ListEditorView title="List Editor" twoColumns>
{makeChildren()}
</ListEditorView>
))
.add('with add', () => (
- <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
- {makeChildren()}
+ <ListEditorView
+ title="List Editor"
+ onAdd={action('onAdd')}
+ plusButtonTitle="Add"
+ twoColumns>
+ {makeChildren()}
</ListEditorView>
))
.add('with delete', () => (
- <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
- {makeChildren({onDelete: action('onDelete')})}
+ <ListEditorView
+ title="List Editor"
+ onAdd={action('onAdd')}
+ plusButtonTitle="Add"
+ twoColumns>
+ {makeChildren({ onDelete: action('onDelete') })}
</ListEditorView>
))
.add('with edit', () => (
- <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
- {makeChildren({onEdit: action('onEdit')})}
+ <ListEditorView
+ title="List Editor"
+ onAdd={action('onAdd')}
+ plusButtonTitle="Add"
+ twoColumns>
+ {makeChildren({ onEdit: action('onEdit') })}
</ListEditorView>
))
.add('with edit and delete', () => (
- <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
- {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})}
+ <ListEditorView
+ title="List Editor"
+ onAdd={action('onAdd')}
+ plusButtonTitle="Add"
+ twoColumns>
+ {makeChildren({
+ onDelete: action('onDelete'),
+ onEdit: action('onEdit')
+ })}
</ListEditorView>
));
diff --git a/openecomp-ui/src/nfvo-components/loader/Loader.jsx b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
index 9ebe52dcfc..076351bf7a 100644
--- a/openecomp-ui/src/nfvo-components/loader/Loader.jsx
+++ b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
@@ -16,40 +16,39 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-const mapStateToProps = ({loader}) => {
- return {
- isLoading: loader.isLoading
- };
+const mapStateToProps = ({ loader }) => {
+ return {
+ isLoading: loader.isLoading
+ };
};
class Loader extends React.Component {
-
- static propTypes = {
- isLoading: PropTypes.bool.isRequired
- };
-
- static defaultProps = {
- isLoading: false
- };
-
- shouldComponentUpdate(nextProps) {
- return (nextProps.isLoading !== this.props.isLoading);
- }
-
- render() {
- let {isLoading} = this.props;
- return (
- <div className='onboarding-loader'>
- {
- isLoading && <div className='onboarding-loader-backdrop'>
- <div className='tlv-loader large'></div>
- </div>
- }
- </div>
- );
- }
+ static propTypes = {
+ isLoading: PropTypes.bool.isRequired
+ };
+
+ static defaultProps = {
+ isLoading: false
+ };
+
+ shouldComponentUpdate(nextProps) {
+ return nextProps.isLoading !== this.props.isLoading;
+ }
+
+ render() {
+ let { isLoading } = this.props;
+ return (
+ <div className="onboarding-loader">
+ {isLoading && (
+ <div className="onboarding-loader-backdrop">
+ <div className="tlv-loader large" />
+ </div>
+ )}
+ </div>
+ );
+ }
}
-export default connect(mapStateToProps) (Loader);
+export default connect(mapStateToProps)(Loader);
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
index 2b531b08fa..e367a74352 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
@@ -16,9 +16,9 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- SHOW: null,
- HIDE: null,
+ SHOW: null,
+ HIDE: null,
- SEND_REQUEST: null,
- RECEIVE_RESPONSE: null
+ SEND_REQUEST: null,
+ RECEIVE_RESPONSE: null
});
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
index 3afdad0573..1d0f6790e1 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
@@ -13,43 +13,54 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {actionTypes} from './LoaderConstants.js';
+import { actionTypes } from './LoaderConstants.js';
-export default (state = {fetchingRequests : 0, currentlyFetching : [], isLoading : false}, action) => {
- let fetchingRequests = state.fetchingRequests;
- let newArray;
- switch (action.type) {
- case actionTypes.SEND_REQUEST:
- fetchingRequests++;
- newArray = state.currentlyFetching.slice();
- newArray.splice(0, 0, action.url);
- if (DEBUG) {
- console.log('Loader SEND REQUEST url: ' + action.url);
- console.log('Loader SEND REQUEST number of fetching requests: ' + fetchingRequests);
- }
- return {
- fetchingRequests: fetchingRequests,
- currentlyFetching : newArray,
- isLoading: true
- };
- case actionTypes.RECEIVE_RESPONSE:
- fetchingRequests--;
+export default (
+ state = { fetchingRequests: 0, currentlyFetching: [], isLoading: false },
+ action
+) => {
+ let fetchingRequests = state.fetchingRequests;
+ let newArray;
+ switch (action.type) {
+ case actionTypes.SEND_REQUEST:
+ fetchingRequests++;
+ newArray = state.currentlyFetching.slice();
+ newArray.splice(0, 0, action.url);
+ if (DEBUG) {
+ console.log('Loader SEND REQUEST url: ' + action.url);
+ console.log(
+ 'Loader SEND REQUEST number of fetching requests: ' +
+ fetchingRequests
+ );
+ }
+ return {
+ fetchingRequests: fetchingRequests,
+ currentlyFetching: newArray,
+ isLoading: true
+ };
+ case actionTypes.RECEIVE_RESPONSE:
+ fetchingRequests--;
- newArray = state.currentlyFetching.filter((item) => {return item !== action.url;});
- if (DEBUG) {
- console.log('Loader RECEIVE_RESPONSE url: ' + action.url);
- console.log('Loader RECEIVE_RESPONSE: number of fetching requests: ' + fetchingRequests);
- }
- return {
- currentlyFetching : newArray,
- fetchingRequests: fetchingRequests,
- isLoading: (fetchingRequests !== 0)
- };
- case actionTypes.SHOW:
- return {isLoading: true};
- case actionTypes.HIDE:
- return {isLoading: false};
- default:
- return state;
- }
+ newArray = state.currentlyFetching.filter(item => {
+ return item !== action.url;
+ });
+ if (DEBUG) {
+ console.log('Loader RECEIVE_RESPONSE url: ' + action.url);
+ console.log(
+ 'Loader RECEIVE_RESPONSE: number of fetching requests: ' +
+ fetchingRequests
+ );
+ }
+ return {
+ currentlyFetching: newArray,
+ fetchingRequests: fetchingRequests,
+ isLoading: fetchingRequests !== 0
+ };
+ case actionTypes.SHOW:
+ return { isLoading: true };
+ case actionTypes.HIDE:
+ return { isLoading: false };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 75b7983ac3..3f19bd76a3 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -16,145 +16,195 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import Modal from 'nfvo-components/modal/Modal.jsx';
import Button from 'sdc-ui/lib/react/Button.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes, typeEnum} from './GlobalModalConstants.js';
-
+import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes, typeEnum } from './GlobalModalConstants.js';
const typeClass = {
- 'default': 'primary',
- error: 'negative',
- warning: 'warning',
- success: 'positive'
+ default: 'primary',
+ error: 'negative',
+ warning: 'warning',
+ success: 'positive'
};
const type2HeaderColor = {
- 'default': 'primary',
- error: 'danger',
- warning: 'warning',
- success: 'success'
+ default: 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
};
-
-const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => {
- let myPropsForNoConfirmed = {};
- if (onConfirmed) {
- myPropsForNoConfirmed.btnType = 'outline';
- }
- return (
- <Modal.Footer>
- <div className='sdc-modal-footer'>
- {onConfirmed && <Button data-test-id='sdc-modal-confirm-button' color={typeClass[type]} onClick={() => {
- onConfirmed();
- onClose();
- }}>{confirmationButtonText}</Button>}
- <Button {...myPropsForNoConfirmed} data-test-id='sdc-modal-cancel-button' btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
- onDeclined();
- onClose();} : () => onClose()}>
- {cancelButtonText}
- </Button>
- </div>
- </Modal.Footer>
- );
+const ModalFooter = ({
+ type,
+ onConfirmed,
+ onDeclined,
+ onClose,
+ confirmationButtonText,
+ cancelButtonText
+}) => {
+ let myPropsForNoConfirmed = {};
+ if (onConfirmed) {
+ myPropsForNoConfirmed.btnType = 'outline';
+ }
+ return (
+ <Modal.Footer>
+ <div className="sdc-modal-footer">
+ {onConfirmed && (
+ <Button
+ data-test-id="sdc-modal-confirm-button"
+ color={typeClass[type]}
+ onClick={() => {
+ onConfirmed();
+ onClose();
+ }}>
+ {confirmationButtonText}
+ </Button>
+ )}
+ <Button
+ {...myPropsForNoConfirmed}
+ data-test-id="sdc-modal-cancel-button"
+ btnType="outline"
+ color={typeClass[type]}
+ onClick={
+ onDeclined
+ ? () => {
+ onDeclined();
+ onClose();
+ }
+ : () => onClose()
+ }>
+ {cancelButtonText}
+ </Button>
+ </div>
+ </Modal.Footer>
+ );
};
ModalFooter.defaultProps = {
- type: 'default',
- confirmationButtonText: i18n('OK'),
- cancelButtonText: i18n('Cancel')
+ type: 'default',
+ confirmationButtonText: i18n('OK'),
+ cancelButtonText: i18n('Cancel')
};
ModalFooter.PropTypes = {
- type: PropTypes.string,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
+ type: PropTypes.string,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
};
-export const mapStateToProps = ({modal}) => {
- const show = !!modal;
- return {
- show,
- ...modal
- };
+export const mapStateToProps = ({ modal }) => {
+ const show = !!modal;
+ return {
+ show,
+ ...modal
+ };
};
-export const mapActionToProps = (dispatch) => {
- return {
- onClose: () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE})
- };
+export const mapActionToProps = dispatch => {
+ return {
+ onClose: () => dispatch({ type: actionTypes.GLOBAL_MODAL_CLOSE })
+ };
};
-
-export class GlobalModalView extends React.Component {
-
- static propTypes = {
- show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
- title: PropTypes.string,
- modalComponentProps: PropTypes.object,
- modalComponentName: PropTypes.string,
- onConfirmed: PropTypes.func,
- onDeclined: PropTypes.func,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
- };
-
- static defaultProps = {
- show: false,
- type: 'default',
- title: ''
- };
-
- render() {
- let {title, type, show, modalComponentName, modalComponentProps,
- modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
- const ComponentToRender = modalContentComponents[modalComponentName];
- return (
- <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}>
- <Modal.Header>
- <Modal.Title>{title}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {ComponentToRender ?
- <ComponentToRender {...modalComponentProps}/> :
- msg && typeof msg === 'string' ?
- <div> {msg.split('\n').map((txt, i) => <span key={i}> {txt} <br/> </span>)} </div> :
- msg
- }
- </Modal.Body>
- {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
- <ModalFooter
- type={type}
- onConfirmed={onConfirmed}
- onDeclined={onDeclined}
- onClose={onClose}
- confirmationButtonText={confirmationButtonText}
- cancelButtonText={cancelButtonText}/>}
- </Modal>
- );
- }
-
- componentDidUpdate() {
- if (this.props.timeout) {
- setTimeout(this.props.onClose, this.props.timeout);
- }
- }
-};
+export class GlobalModalView extends React.Component {
+ static propTypes = {
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ title: PropTypes.string,
+ modalComponentProps: PropTypes.object,
+ modalComponentName: PropTypes.string,
+ onConfirmed: PropTypes.func,
+ onDeclined: PropTypes.func,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
+ };
+
+ static defaultProps = {
+ show: false,
+ type: 'default',
+ title: ''
+ };
+
+ render() {
+ let {
+ title,
+ type,
+ show,
+ modalComponentName,
+ modalComponentProps,
+ modalClassName,
+ msg,
+ onConfirmed,
+ onDeclined,
+ confirmationButtonText,
+ cancelButtonText,
+ onClose
+ } = this.props;
+ const ComponentToRender = modalContentComponents[modalComponentName];
+ return (
+ <Modal
+ show={show}
+ bsSize={modalComponentProps && modalComponentProps.size}
+ className={`onborading-modal ${modalClassName || ''} ${
+ type2HeaderColor[type]
+ }`}>
+ <Modal.Header>
+ <Modal.Title>{title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {ComponentToRender ? (
+ <ComponentToRender {...modalComponentProps} />
+ ) : msg && typeof msg === 'string' ? (
+ <div>
+ {' '}
+ {msg.split('\n').map((txt, i) => (
+ <span key={i}>
+ {' '}
+ {txt} <br />{' '}
+ </span>
+ ))}{' '}
+ </div>
+ ) : (
+ msg
+ )}
+ </Modal.Body>
+ {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
+ <ModalFooter
+ type={type}
+ onConfirmed={onConfirmed}
+ onDeclined={onDeclined}
+ onClose={onClose}
+ confirmationButtonText={confirmationButtonText}
+ cancelButtonText={cancelButtonText}
+ />
+ )}
+ </Modal>
+ );
+ }
+
+ componentDidUpdate() {
+ if (this.props.timeout) {
+ setTimeout(this.props.onClose, this.props.timeout);
+ }
+ }
+}
GlobalModalView.propTypes = {
- show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
- title: PropTypes.string,
- modalComponentProps: PropTypes.object,
- modalComponentName: PropTypes.string,
- onConfirmed: PropTypes.func,
- onDeclined: PropTypes.func,
- confirmationButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ title: PropTypes.string,
+ modalComponentProps: PropTypes.object,
+ modalComponentName: PropTypes.string,
+ onConfirmed: PropTypes.func,
+ onDeclined: PropTypes.func,
+ confirmationButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string
};
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+ withRef: true
+})(GlobalModalView);
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 3e5545371a..e9c1853c97 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -16,23 +16,21 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- GLOBAL_MODAL_SHOW: null,
- GLOBAL_MODAL_CLOSE: null,
- GLOBAL_MODAL_ERROR: null,
- GLOBAL_MODAL_WARNING: null,
- GLOBAL_MODAL_SUCCESS: null,
-
+ GLOBAL_MODAL_SHOW: null,
+ GLOBAL_MODAL_CLOSE: null,
+ GLOBAL_MODAL_ERROR: null,
+ GLOBAL_MODAL_WARNING: null,
+ GLOBAL_MODAL_SUCCESS: null
});
-
export const typeEnum = {
- DEFAULT: 'default',
- ERROR: 'error',
- WARNING: 'warning',
- SUCCESS: 'success'
+ DEFAULT: 'default',
+ ERROR: 'error',
+ WARNING: 'warning',
+ SUCCESS: 'success'
};
-export const modalSizes = {
- LARGE: 'large',
- SMALL: 'small'
+export const modalSizes = {
+ LARGE: 'large',
+ SMALL: 'small'
};
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
index 28674ea569..b2273fa7a7 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
@@ -14,37 +14,37 @@
* permissions and limitations under the License.
*/
-import {actionTypes, typeEnum} from './GlobalModalConstants.js';
+import { actionTypes, typeEnum } from './GlobalModalConstants.js';
export default (state = null, action) => {
- switch (action.type) {
- case actionTypes.GLOBAL_MODAL_SHOW:
- return {
- ...action.data
- };
- case actionTypes.GLOBAL_MODAL_ERROR:
- return {
- type: typeEnum.ERROR,
- modalClassName: 'notification-modal',
- ...action.data
- };
- case actionTypes.GLOBAL_MODAL_WARNING:
- return {
- type: typeEnum.WARNING,
- modalClassName: 'notification-modal',
- ...action.data
- };
+ switch (action.type) {
+ case actionTypes.GLOBAL_MODAL_SHOW:
+ return {
+ ...action.data
+ };
+ case actionTypes.GLOBAL_MODAL_ERROR:
+ return {
+ type: typeEnum.ERROR,
+ modalClassName: 'notification-modal',
+ ...action.data
+ };
+ case actionTypes.GLOBAL_MODAL_WARNING:
+ return {
+ type: typeEnum.WARNING,
+ modalClassName: 'notification-modal',
+ ...action.data
+ };
- case actionTypes.GLOBAL_MODAL_SUCCESS:
- return {
- type: typeEnum.SUCCESS,
- modalClassName: 'notification-modal',
- ...action.data
- };
+ case actionTypes.GLOBAL_MODAL_SUCCESS:
+ return {
+ type: typeEnum.SUCCESS,
+ modalClassName: 'notification-modal',
+ ...action.data
+ };
- case actionTypes.GLOBAL_MODAL_CLOSE:
- return null;
- default:
- return state;
- }
+ case actionTypes.GLOBAL_MODAL_CLOSE:
+ return null;
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
index b0f704dba9..cfd757501f 100644
--- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx
+++ b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
@@ -20,65 +20,63 @@ import BootstrapModal from 'react-bootstrap/lib/Modal.js';
let nextModalId = 0;
export default class Modal extends React.Component {
+ static Header = BootstrapModal.Header;
- static Header = BootstrapModal.Header;
+ static Title = BootstrapModal.Title;
- static Title = BootstrapModal.Title;
+ static Footer = BootstrapModal.Footer;
- static Footer = BootstrapModal.Footer;
+ static Body = class ModalBody extends React.Component {
+ render() {
+ let { children, ...props } = this.props;
+ return (
+ <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
+ );
+ }
- static Body = class ModalBody extends React.Component {
+ componentDidMount() {
+ let element = ReactDOM.findDOMNode(this);
+ element.addEventListener('click', event => {
+ if (event.target.tagName === 'A') {
+ event.preventDefault();
+ }
+ });
+ ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+ element.addEventListener(eventType, event =>
+ event.stopPropagation()
+ )
+ );
+ }
+ };
- render() {
- let {children, ...props} = this.props;
- return (
- <BootstrapModal.Body {...props}>
- {children}
- </BootstrapModal.Body>
- );
- }
+ componentWillMount() {
+ this.modalId = `dox-ui-modal-${nextModalId++}`;
+ }
- componentDidMount() {
- let element = ReactDOM.findDOMNode(this);
- element.addEventListener('click', event => {
- if (event.target.tagName === 'A') {
- event.preventDefault();
- }
- });
- ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
- element.addEventListener(eventType, event => event.stopPropagation())
- );
- }
- };
+ componentDidMount() {
+ this.ensureRootClass();
+ }
- componentWillMount() {
- this.modalId = `dox-ui-modal-${nextModalId++}`;
- }
+ componentDidUpdate() {
+ this.ensureRootClass();
+ }
- componentDidMount() {
- this.ensureRootClass();
- }
+ ensureRootClass() {
+ let element = document.getElementById(this.modalId);
+ while (element && !element.hasAttribute('data-reactroot')) {
+ element = element.parentElement;
+ }
+ if (element && !element.classList.contains('dox-ui')) {
+ element.classList.add('dox-ui');
+ }
+ }
- componentDidUpdate() {
- this.ensureRootClass();
- }
-
- ensureRootClass() {
- let element = document.getElementById(this.modalId);
- while(element && !element.hasAttribute('data-reactroot')) {
- element = element.parentElement;
- }
- if (element && !element.classList.contains('dox-ui')) {
- element.classList.add('dox-ui');
- }
- }
-
- render() {
- let {children, ...props} = this.props;
- return (
- <BootstrapModal {...props} id={this.modalId}>
- {children}
- </BootstrapModal>
- );
- }
+ render() {
+ let { children, ...props } = this.props;
+ return (
+ <BootstrapModal {...props} id={this.modalId}>
+ {children}
+ </BootstrapModal>
+ );
+ }
}
diff --git a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
index 054c1e2852..7ed898e593 100644
--- a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
+++ b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx
@@ -18,23 +18,21 @@ import React from 'react';
import enhanceWithClickOutside from 'react-click-outside';
class Overlay extends React.Component {
+ handleClickOutside() {
+ if (this.props.onClose) {
+ this.props.onClose();
+ }
+ }
- handleClickOutside() {
- if (this.props.onClose) {
- this.props.onClose();
- }
- }
-
- render() {
- return (
- <div className='onboarding-overlay'>
- <div className='arrow-up'></div>
- <div className='arrow-border'/>
- {this.props.children}
- </div>
- );
- }
-
-};
+ render() {
+ return (
+ <div className="onboarding-overlay">
+ <div className="arrow-up" />
+ <div className="arrow-border" />
+ {this.props.children}
+ </div>
+ );
+ }
+}
export default enhanceWithClickOutside(Overlay);
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 2eda7e69bf..61121df335 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -19,116 +19,159 @@ import classnames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';
class NavigationSideBar extends React.Component {
- static PropTypes = {
- activeItemId: PropTypes.string.isRequired,
- onSelect: PropTypes.func,
- onToggle: PropTypes.func,
- groups: PropTypes.array,
- disabled: PropTypes.bool
- };
+ static PropTypes = {
+ activeItemId: PropTypes.string.isRequired,
+ onSelect: PropTypes.func,
+ onToggle: PropTypes.func,
+ groups: PropTypes.array,
+ disabled: PropTypes.bool
+ };
- constructor(props) {
- super(props);
- this.state = {
- activeItemId: null
- };
- this.handleItemClicked = this.handleItemClicked.bind(this);
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeItemId: null
+ };
+ this.handleItemClicked = this.handleItemClicked.bind(this);
+ }
- render() {
- let {groups, activeItemId, disabled = false} = this.props;
+ render() {
+ let { groups, activeItemId, disabled = false } = this.props;
- return (
- <div className={`navigation-side-content ${disabled ? 'disabled' : ''}`}>
- {groups.map(group => (
- <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
- ))}
- </div>
- );
- }
+ return (
+ <div
+ className={`navigation-side-content ${
+ disabled ? 'disabled' : ''
+ }`}>
+ {groups.map(group => (
+ <NavigationMenu
+ menu={group}
+ activeItemId={activeItemId}
+ onNavigationItemClick={this.handleItemClicked}
+ key={'menu_' + group.id}
+ />
+ ))}
+ </div>
+ );
+ }
- handleItemClicked(event, item) {
- event.stopPropagation();
- if(this.props.onToggle) {
- this.props.onToggle(this.props.groups, item.id);
- }
- if(item.onSelect) {
- item.onSelect();
- }
- if(this.props.onSelect) {
- this.props.onSelect(item);
- }
- }
+ handleItemClicked(event, item) {
+ event.stopPropagation();
+ if (this.props.onToggle) {
+ this.props.onToggle(this.props.groups, item.id);
+ }
+ if (item.onSelect) {
+ item.onSelect();
+ }
+ if (this.props.onSelect) {
+ this.props.onSelect(item);
+ }
+ }
}
class NavigationMenu extends React.Component {
- static PropTypes = {
- activeItemId: PropTypes.string.isRequired,
- onNavigationItemClick: PropTypes.func,
- menu: PropTypes.array
- };
+ static PropTypes = {
+ activeItemId: PropTypes.string.isRequired,
+ onNavigationItemClick: PropTypes.func,
+ menu: PropTypes.array
+ };
- render() {
- const {menu, activeItemId, onNavigationItemClick} = this.props;
- return (
- <div className='navigation-group' key={menu.id}>
- <NavigationMenuHeader title={menu.name} />
- <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
- </div>);
- }
+ render() {
+ const { menu, activeItemId, onNavigationItemClick } = this.props;
+ return (
+ <div className="navigation-group" key={menu.id}>
+ <NavigationMenuHeader title={menu.name} />
+ <NavigationMenuItems
+ items={menu.items}
+ activeItemId={activeItemId}
+ onNavigationItemClick={onNavigationItemClick}
+ />
+ </div>
+ );
+ }
}
function NavigationMenuHeader(props) {
- return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
+ return (
+ <div className="group-name" data-test-id="navbar-group-name">
+ {props.title}
+ </div>
+ );
}
function getItemDataTestId(itemId) {
- return itemId.split('|')[0];
+ return itemId.split('|')[0];
}
function NavigationMenuItems(props) {
- const {items, activeItemId, onNavigationItemClick} = props;
- return (
- <div className='navigation-group-items'>
- {
- items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
- }
- </div>
- );
+ const { items, activeItemId, onNavigationItemClick } = props;
+ return (
+ <div className="navigation-group-items">
+ {items &&
+ items.map(item => (
+ <NavigationMenuItem
+ key={'menuItem_' + item.id}
+ item={item}
+ activeItemId={activeItemId}
+ onNavigationItemClick={onNavigationItemClick}
+ />
+ ))}
+ </div>
+ );
}
function NavigationMenuItem(props) {
- const {onNavigationItemClick, item, activeItemId} = props;
- const isGroup = item.items && item.items.length > 0;
- return (
- <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
- <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
- {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
- <div>
- {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) }
- </div>
- </Collapse>
- }
- </div>
- );
+ const { onNavigationItemClick, item, activeItemId } = props;
+ const isGroup = item.items && item.items.length > 0;
+ return (
+ <div
+ className={classnames('navigation-group-item', {
+ 'selected-item': item.id === activeItemId
+ })}
+ key={'item_' + item.id}>
+ <NavigationLink
+ item={item}
+ activeItemId={activeItemId}
+ onClick={onNavigationItemClick}
+ />
+ {isGroup && (
+ <Collapse
+ in={item.expanded}
+ data-test-id={
+ 'navigation-group-' + getItemDataTestId(item.id)
+ }>
+ <div>
+ {item.items.map(subItem => (
+ <NavigationMenuItem
+ key={'menuItem_' + subItem.id}
+ item={subItem}
+ onNavigationItemClick={onNavigationItemClick}
+ activeItemId={activeItemId}
+ />
+ ))}
+ </div>
+ </Collapse>
+ )}
+ </div>
+ );
}
function NavigationLink(props) {
- const {item, activeItemId, onClick} = props;
- // todo should this be button
- return (
- <div
- key={'navAction_' + item.id}
- className={classnames('navigation-group-item-name', {
- 'selected': item.id === activeItemId,
- 'disabled': item.disabled,
- 'bold-name': item.expanded,
- 'hidden': item.hidden
- })}
- onClick={(event) => onClick(event, item)}
- data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
- {item.name}
- </div>
- );
+ const { item, activeItemId, onClick } = props;
+ // todo should this be button
+ return (
+ <div
+ key={'navAction_' + item.id}
+ className={classnames('navigation-group-item-name', {
+ selected: item.id === activeItemId,
+ disabled: item.disabled,
+ 'bold-name': item.expanded,
+ hidden: item.hidden
+ })}
+ onClick={event => onClick(event, item)}
+ data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
+ {item.name}
+ </div>
+ );
}
export default NavigationSideBar;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 57fa86f561..c9c5789622 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -17,125 +17,224 @@ import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionsEnum} from './VersionControllerConstants.js';
+import { actionsEnum } from './VersionControllerConstants.js';
import ActionButtons from './components/ActionButtons.jsx';
import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
-
class VersionController extends React.Component {
-
- static propTypes = {
- version: PropTypes.object,
- viewableVersions: PropTypes.array,
- onVersionSwitching: PropTypes.func,
- callVCAction: PropTypes.func,
- onSave: PropTypes.func,
- onClose: PropTypes.func,
- isFormDataValid: PropTypes.bool,
- onOpenCommentCommitModal: PropTypes.func,
- isReadOnlyMode: PropTypes.bool
- };
-
- state = {
- showPermissions: false,
- showRevisions: false
- };
-
- render() {
- let {version = {}, viewableVersions = [], onVersionSwitching, onMoreVersionsClick, callVCAction, onSave, isReadOnlyMode, itemPermission,
- isFormDataValid, onClose, onManagePermissions, permissions = {}, userInfo, usersList, itemName,
- onOpenCommentCommitModal, onOpenRevisionsModal, isManual, candidateInProcess, isArchived} = this.props;
- return (
- <div className='version-controller-bar'>
- <div className={`vc-container ${candidateInProcess ? 'disabled' : ''}`}>
- <div className='version-status-container'>
- <VersionSelector
- viewableVersions={viewableVersions}
- version={version}
- onVersionSwitching={onVersionSwitching}
- onMoreVersionsClick={() => onMoreVersionsClick({itemName, users: usersList})}/>
- {isArchived && <div className='depricated-item-status'>{i18n('Archived')}</div>}
- </div>
- <div className='save-submit-cancel-container'>
- <ActionButtons onSubmit={callVCAction ? () => this.submit(callVCAction, version) : undefined}
- onRevert={callVCAction ? () => this.revert(callVCAction, version) : undefined}
- onOpenRevisionsModal={onOpenRevisionsModal}
- onSave={onSave ? () => onSave() : undefined}
- permissions={permissions}
- userInfo={userInfo}
- onManagePermissions={onManagePermissions}
- showPermissions={this.state.showPermissions}
- onClosePermissions={()=>this.setState({showPermissions: false})}
- onClickPermissions={() => this.onClickPermissions()}
- onSync={callVCAction ? () => this.sync(callVCAction, version) : undefined}
- onOpenCommentCommitModal={onOpenCommentCommitModal}
- onCommit={callVCAction ? (comment) => this.commit(callVCAction, version, comment) : undefined}
- isFormDataValid={isFormDataValid}
- itemPermissions={itemPermission}
- isArchived={isArchived}
- isReadOnlyMode={isReadOnlyMode || candidateInProcess}
- isManual={isManual} />
- <div className='vc-separator'></div>
- <NotificationsView />
- {onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>}
- </div>
- </div>
- </div>
- );
- }
-
- onClickPermissions() {
- let {onOpenPermissions, usersList} = this.props;
- let {showPermissions} = this.state;
- let promise = showPermissions ? Promise.resolve() : onOpenPermissions({users: usersList});
- promise.then(() => this.setState({showPermissions: !showPermissions}));
- }
-
-
- submit(callVCAction, version) {
- const action = actionsEnum.SUBMIT;
- callVCAction(action, version);
- }
-
- revert(callVCAction, version) {
- const action = actionsEnum.REVERT;
- callVCAction(action, version);
- }
-
- sync(callVCAction, version) {
- const action = actionsEnum.SYNC;
- callVCAction(action, version);
- }
-
- commit(callVCAction, version, comment) {
- const action = actionsEnum.COMMIT;
- callVCAction(action, version, comment);
- }
-
- permissions() {
-
- }
+ static propTypes = {
+ version: PropTypes.object,
+ viewableVersions: PropTypes.array,
+ onVersionSwitching: PropTypes.func,
+ callVCAction: PropTypes.func,
+ onSave: PropTypes.func,
+ onClose: PropTypes.func,
+ isFormDataValid: PropTypes.bool,
+ onOpenCommentCommitModal: PropTypes.func,
+ isReadOnlyMode: PropTypes.bool
+ };
+
+ state = {
+ showPermissions: false,
+ showRevisions: false
+ };
+
+ render() {
+ let {
+ version = {},
+ viewableVersions = [],
+ onVersionSwitching,
+ onMoreVersionsClick,
+ callVCAction,
+ onSave,
+ isReadOnlyMode,
+ itemPermission,
+ isFormDataValid,
+ onClose,
+ onManagePermissions,
+ permissions = {},
+ userInfo,
+ usersList,
+ itemName,
+ onOpenCommentCommitModal,
+ onOpenRevisionsModal,
+ isManual,
+ candidateInProcess,
+ isArchived
+ } = this.props;
+ return (
+ <div className="version-controller-bar">
+ <div
+ className={`vc-container ${
+ candidateInProcess ? 'disabled' : ''
+ }`}>
+ <div className="version-status-container">
+ <VersionSelector
+ viewableVersions={viewableVersions}
+ version={version}
+ onVersionSwitching={onVersionSwitching}
+ onMoreVersionsClick={() =>
+ onMoreVersionsClick({
+ itemName,
+ users: usersList
+ })
+ }
+ />
+ {isArchived && (
+ <div className="depricated-item-status">
+ {i18n('Archived')}
+ </div>
+ )}
+ </div>
+ <div className="save-submit-cancel-container">
+ <ActionButtons
+ onSubmit={
+ callVCAction
+ ? () => this.submit(callVCAction, version)
+ : undefined
+ }
+ onRevert={
+ callVCAction
+ ? () => this.revert(callVCAction, version)
+ : undefined
+ }
+ onOpenRevisionsModal={onOpenRevisionsModal}
+ onSave={onSave ? () => onSave() : undefined}
+ permissions={permissions}
+ userInfo={userInfo}
+ onManagePermissions={onManagePermissions}
+ showPermissions={this.state.showPermissions}
+ onClosePermissions={() =>
+ this.setState({ showPermissions: false })
+ }
+ onClickPermissions={() => this.onClickPermissions()}
+ onSync={
+ callVCAction
+ ? () => this.sync(callVCAction, version)
+ : undefined
+ }
+ onOpenCommentCommitModal={onOpenCommentCommitModal}
+ onCommit={
+ callVCAction
+ ? comment =>
+ this.commit(
+ callVCAction,
+ version,
+ comment
+ )
+ : undefined
+ }
+ isFormDataValid={isFormDataValid}
+ itemPermissions={itemPermission}
+ isArchived={isArchived}
+ isReadOnlyMode={
+ isReadOnlyMode || candidateInProcess
+ }
+ isManual={isManual}
+ />
+ <div className="vc-separator" />
+ <NotificationsView />
+ {onClose && (
+ <div
+ className="vc-nav-item-close"
+ onClick={() => onClose()}
+ data-test-id="vc-cancel-btn">
+ {' '}
+ X
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ onClickPermissions() {
+ let { onOpenPermissions, usersList } = this.props;
+ let { showPermissions } = this.state;
+ let promise = showPermissions
+ ? Promise.resolve()
+ : onOpenPermissions({ users: usersList });
+ promise.then(() =>
+ this.setState({ showPermissions: !showPermissions })
+ );
+ }
+
+ submit(callVCAction, version) {
+ const action = actionsEnum.SUBMIT;
+ callVCAction(action, version);
+ }
+
+ revert(callVCAction, version) {
+ const action = actionsEnum.REVERT;
+ callVCAction(action, version);
+ }
+
+ sync(callVCAction, version) {
+ const action = actionsEnum.SYNC;
+ callVCAction(action, version);
+ }
+
+ commit(callVCAction, version, comment) {
+ const action = actionsEnum.COMMIT;
+ callVCAction(action, version, comment);
+ }
+
+ permissions() {}
}
function VersionSelector(props) {
- let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props;
- const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;});
- return (<div className='version-section-wrapper'>
- <select className='version-selector'
- onChange={ev => onVersionSwitching && onVersionSwitching(viewableVersions.find(version => version.id === ev.target.value))}
- value={version.id}
- data-test-id='vc-versions-select-box'>
- {viewableVersions && viewableVersions.map(viewVersion => {
- return (
- <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.name} ${viewVersion.status}`}</option>
- );
- })
- }
- {!includedVersions.length &&
- <option key={version.id} value={version.id} data-test-id='vc-selected-version-option'>{`V ${version.name} ${version.status}`}</option>}
- </select>
- <span onClick={onMoreVersionsClick} className='version-selector-more-versions' data-test-id='vc-versions-page-link'>{i18n('Versions Page')}</span>
- </div>);
+ let {
+ version = {},
+ onMoreVersionsClick,
+ viewableVersions = [],
+ onVersionSwitching
+ } = props;
+ const includedVersions = viewableVersions.filter(ver => {
+ return ver.id === version.id;
+ });
+ return (
+ <div className="version-section-wrapper">
+ <select
+ className="version-selector"
+ onChange={ev =>
+ onVersionSwitching &&
+ onVersionSwitching(
+ viewableVersions.find(
+ version => version.id === ev.target.value
+ )
+ )
+ }
+ value={version.id}
+ data-test-id="vc-versions-select-box">
+ {viewableVersions &&
+ viewableVersions.map(viewVersion => {
+ return (
+ <option
+ key={viewVersion.id}
+ value={viewVersion.id}
+ data-test-id="vc-version-option">{`V ${
+ viewVersion.name
+ } ${viewVersion.status}`}</option>
+ );
+ })}
+ {!includedVersions.length && (
+ <option
+ key={version.id}
+ value={version.id}
+ data-test-id="vc-selected-version-option">{`V ${
+ version.name
+ } ${version.status}`}</option>
+ )}
+ </select>
+ <span
+ onClick={onMoreVersionsClick}
+ className="version-selector-more-versions"
+ data-test-id="vc-versions-page-link">
+ {i18n('Versions Page')}
+ </span>
+ </div>
+ );
}
export default VersionController;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
index ddb428a1e9..54f10c1acf 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
@@ -16,9 +16,9 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionsEnum = keyMirror({
- REVERT: 'Revert',
- SYNC: 'Sync',
- SUBMIT: 'Submit',
- COMMIT: 'Commit',
- CREATE_PACKAGE: 'Create_Package'
+ REVERT: 'Revert',
+ SYNC: 'Sync',
+ SUBMIT: 'Submit',
+ COMMIT: 'Commit',
+ CREATE_PACKAGE: 'Create_Package'
});
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
index b5750817ba..4dfa117803 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx
@@ -13,7 +13,7 @@
* or implied. 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 enhanceWithClickOutside from 'react-click-outside';
import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -22,88 +22,171 @@ import Overlay from 'nfvo-components/overlay/Overlay.jsx';
import Permissions from './Permissions.jsx';
class ClickOutsideWrapper extends Component {
- handleClickOutside() {
- this.props.onClose();
- }
- render() {
- return <div>{this.props.children}</div>;
- }
+ handleClickOutside() {
+ this.props.onClose();
+ }
+ render() {
+ return <div>{this.props.children}</div>;
+ }
}
-const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper);
+const EnhancedClickOutsideWrapper = enhanceWithClickOutside(
+ ClickOutsideWrapper
+);
-const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => {
- let onClickAction = disabled ? ()=>{} : onClick;
- return (
- <div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}>
- <div className='action-buttons-svg'>
- <SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label'
- data-test-id={dataTestId} name={name} disabled={disabled}/>
- </div>
- </div>
- );
+const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => {
+ let onClickAction = disabled ? () => {} : onClick;
+ return (
+ <div
+ className={`action-button-wrapper ${
+ disabled ? 'disabled' : 'clickable'
+ }`}
+ onClick={onClickAction}>
+ <div className="action-buttons-svg">
+ <SVGIcon
+ label={tooltipText}
+ labelPosition="bottom"
+ labelClassName="action-button-label"
+ data-test-id={dataTestId}
+ name={name}
+ disabled={disabled}
+ />
+ </div>
+ </div>
+ );
};
-const Separator = () => (<div className='vc-separator'></div>);
+const Separator = () => <div className="vc-separator" />;
-const SubmitButton = ({onClick, disabled}) => (
- <div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
- <SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} />
- {i18n('Submit')}
- </div>
+const SubmitButton = ({ onClick, disabled }) => (
+ <div
+ onClick={() => onClick()}
+ data-test-id="vc-submit-btn"
+ className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
+ <SVGIcon name="check" iconClassName="vc-v-submit" disabled={disabled} />
+ {i18n('Submit')}
+ </div>
);
-
-const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit, isArchived,
- onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual,
- itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => (
- <div className='action-buttons'>
- <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
- <VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions}
- name='version-controller-permissions' tooltipText={i18n('Permissons')} />
- {showPermissions &&
- <Overlay>
- <Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/>
- </Overlay>
- }
- </EnhancedClickOutsideWrapper>
- {isCollaborator && !isArchived && <div className='collaborator-action-buttons'>
- <Separator />
- {onSave && <div className='vc-save-section'>
- <VCButton dataTestId='vc-save-btn' onClick={() => onSave()}
- name='version-controller-save' tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} />
- <Separator />
- </div>
- }
- <VCButton dataTestId='vc-sync-btn' onClick={onSync}
- name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} />
- <VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})}
- name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} />
- {onRevert &&
- <VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal}
- name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} />
- }
- {onSubmit &&
- <div className='vc-submit-section'>
- <Separator />
- <SubmitButton onClick={onSubmit}
- disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} />
- </div>
- }
- </div>}
- </div>
+const ActionButtons = ({
+ isReadOnlyMode,
+ onSubmit,
+ onRevert,
+ onSave,
+ isFormDataValid,
+ onClickPermissions,
+ onSync,
+ onCommit,
+ isArchived,
+ onOpenCommentCommitModal,
+ showPermissions,
+ onClosePermissions,
+ permissions,
+ onManagePermissions,
+ userInfo,
+ onOpenRevisionsModal,
+ isManual,
+ itemPermissions: {
+ isCertified,
+ isCollaborator,
+ isDirty,
+ isOutOfSync,
+ isUpToDate
+ }
+}) => (
+ <div className="action-buttons">
+ <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
+ <VCButton
+ disabled={isManual}
+ dataTestId="vc-permission-btn"
+ onClick={onClickPermissions}
+ name="version-controller-permissions"
+ tooltipText={i18n('Permissons')}
+ />
+ {showPermissions && (
+ <Overlay>
+ <Permissions
+ userInfo={userInfo}
+ onManagePermissions={onManagePermissions}
+ permissions={permissions}
+ onClosePermissions={onClosePermissions}
+ />
+ </Overlay>
+ )}
+ </EnhancedClickOutsideWrapper>
+ {isCollaborator &&
+ !isArchived && (
+ <div className="collaborator-action-buttons">
+ <Separator />
+ {onSave && (
+ <div className="vc-save-section">
+ <VCButton
+ dataTestId="vc-save-btn"
+ onClick={() => onSave()}
+ name="version-controller-save"
+ tooltipText={i18n('Save')}
+ disabled={isReadOnlyMode || !isFormDataValid}
+ />
+ <Separator />
+ </div>
+ )}
+ <VCButton
+ dataTestId="vc-sync-btn"
+ onClick={onSync}
+ name="version-controller-sync"
+ tooltipText={i18n('Sync')}
+ disabled={!isCollaborator || isUpToDate || isCertified}
+ />
+ <VCButton
+ dataTestId="vc-commit-btn"
+ onClick={() =>
+ onOpenCommentCommitModal({
+ onCommit,
+ title: i18n('Commit')
+ })
+ }
+ name="version-controller-commit"
+ tooltipText={i18n('Share')}
+ disabled={isReadOnlyMode || !isDirty || isOutOfSync}
+ />
+ {onRevert && (
+ <VCButton
+ dataTestId="vc-revert-btn"
+ onClick={onOpenRevisionsModal}
+ name="version-controller-revert"
+ tooltipText={i18n('Revert')}
+ disabled={isReadOnlyMode || isOutOfSync}
+ />
+ )}
+ {onSubmit && (
+ <div className="vc-submit-section">
+ <Separator />
+ <SubmitButton
+ onClick={onSubmit}
+ disabled={
+ isReadOnlyMode ||
+ isOutOfSync ||
+ !isUpToDate ||
+ isCertified
+ }
+ />
+ </div>
+ )}
+ </div>
+ )}
+ </div>
);
ActionButtons.propTypes = {
- version: PropTypes.object,
- onSubmit: PropTypes.func,
- onRevert: PropTypes.func,
- onSave: PropTypes.func,
- isLatestVersion: PropTypes.bool,
- isCheckedIn: PropTypes.bool,
- isCheckedOut: PropTypes.bool,
- isFormDataValid: PropTypes.bool,
- isReadOnlyMode: PropTypes.bool
+ version: PropTypes.object,
+ onSubmit: PropTypes.func,
+ onRevert: PropTypes.func,
+ onSave: PropTypes.func,
+ isLatestVersion: PropTypes.bool,
+ isCheckedIn: PropTypes.bool,
+ isCheckedOut: PropTypes.bool,
+ isFormDataValid: PropTypes.bool,
+ isReadOnlyMode: PropTypes.bool
};
export default ActionButtons;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
index 600eaeefaa..ae0913f3a9 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
@@ -15,59 +15,66 @@
*/
import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
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 {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const CommitModalType = keyMirror({
- COMMIT: null,
- COMMIT_SUBMIT: null
-
+ COMMIT: null,
+ COMMIT_SUBMIT: null
});
-export const mapActionToProps = (dispatch) => {
- return {
- onClose: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- })
- };
+export const mapActionToProps = dispatch => {
+ return {
+ onClose: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ })
+ };
};
class CommitCommentModal extends React.Component {
+ state = {
+ comment: ''
+ };
- state = {
- comment: ''
- };
-
- render() {
- const {onCommit, onClose, type} = this.props;
- const [commitButtonText, descriptionText] = type === CommitModalType.COMMIT ?
- [i18n('Commit'), i18n('You are about to commit your version')] :
- [i18n('Commit & Submit'), i18n('You must commit your changes before the submit')];
+ render() {
+ const { onCommit, onClose, type } = this.props;
+ const [commitButtonText, descriptionText] =
+ type === CommitModalType.COMMIT
+ ? [i18n('Commit'), i18n('You are about to commit your version')]
+ : [
+ i18n('Commit & Submit'),
+ i18n('You must commit your changes before the submit')
+ ];
- return (
- <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => {onCommit(this.state.comment); onClose();} }
- onReset={onClose}
- submitButtonText={commitButtonText}
- labledButtons={true}
- isValid={true}
- className='comment-commit-form'>
- <div className='commit-modal-text'>{descriptionText}</div>
- <Input
- data-test-id='commit-comment-text'
- onChange={comment => this.setState({comment: comment})}
- label={i18n('Enter Commit Comment:')}
- value={this.state.comment}
- type='textarea'/>
- </Form>
- );
- }
+ return (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => {
+ onCommit(this.state.comment);
+ onClose();
+ }}
+ onReset={onClose}
+ submitButtonText={commitButtonText}
+ labledButtons={true}
+ isValid={true}
+ className="comment-commit-form">
+ <div className="commit-modal-text">{descriptionText}</div>
+ <Input
+ data-test-id="commit-comment-text"
+ onChange={comment => this.setState({ comment: comment })}
+ label={i18n('Enter Commit Comment:')}
+ value={this.state.comment}
+ type="textarea"
+ />
+ </Form>
+ );
+ }
}
export default connect(null, mapActionToProps)(CommitCommentModal);
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
index 952bd4fb58..6e0ae8187b 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx
@@ -18,48 +18,76 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-const Contributor = ({name, role, id, userInfo}) => {
+const Contributor = ({ name, role, id, userInfo }) => {
+ const selected = id === userInfo.userId ? 'selected' : '';
- const selected = id === userInfo.userId ? 'selected' : '';
-
- return(
- <div className='contributor'>
- <div className='contributor-content'>
- <div className={`contributor-icon-circle ${selected}`}>
- <div className={`contributer-icon ${selected}`}>
- <SVGIcon name='user'/>
- </div>
- </div>
- <div className='contributer-info'>
- <div className='contributer-name'>{name}</div>
- <div className='contributer-role'><p>{role}</p></div>
- </div>
- </div>
- </div>
- );
+ return (
+ <div className="contributor">
+ <div className="contributor-content">
+ <div className={`contributor-icon-circle ${selected}`}>
+ <div className={`contributer-icon ${selected}`}>
+ <SVGIcon name="user" />
+ </div>
+ </div>
+ <div className="contributer-info">
+ <div className="contributer-name">{name}</div>
+ <div className="contributer-role">
+ <p>{role}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
};
-const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => {
-
- return (
- <div className='permissions-overlay'>
- <div className='permissions-overlay-header'>
- <h4 className='permissions-overlay-header-title'>{i18n('PERMISSIONS')}</h4>
- </div>
- <div className='permissions-overlay-content'>
- <Contributor userInfo={userInfo} id={owner.userId} key={owner.fullName} name={owner.fullName} role={owner.role}/>
- {contributors.map(item => item.userId !== owner.userId && <Contributor userInfo={userInfo} id={item.userId} key={item.fullName} name={item.fullName} role={item.role}/>)}
- </div>
- <div className='permissions-overlay-footer'>
- {
- owner.userId === userInfo.userId &&
- <div onClick={() => { onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'>
- {i18n('Manage Permissions')}
- </div>
- }
- </div>
- </div>
- );
+const Permissions = ({
+ permissions: { owner, contributors },
+ onManagePermissions,
+ userInfo,
+ onClosePermissions
+}) => {
+ return (
+ <div className="permissions-overlay">
+ <div className="permissions-overlay-header">
+ <h4 className="permissions-overlay-header-title">
+ {i18n('PERMISSIONS')}
+ </h4>
+ </div>
+ <div className="permissions-overlay-content">
+ <Contributor
+ userInfo={userInfo}
+ id={owner.userId}
+ key={owner.fullName}
+ name={owner.fullName}
+ role={owner.role}
+ />
+ {contributors.map(
+ item =>
+ item.userId !== owner.userId && (
+ <Contributor
+ userInfo={userInfo}
+ id={item.userId}
+ key={item.fullName}
+ name={item.fullName}
+ role={item.role}
+ />
+ )
+ )}
+ </div>
+ <div className="permissions-overlay-footer">
+ {owner.userId === userInfo.userId && (
+ <div
+ onClick={() => {
+ onClosePermissions();
+ onManagePermissions();
+ }}
+ className="manage-permissions-btn">
+ {i18n('Manage Permissions')}
+ </div>
+ )}
+ </div>
+ </div>
+ );
};
export default Permissions;
diff --git a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
index ca5cb3d765..cb10bb565e 100644
--- a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
+++ b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
@@ -17,22 +17,25 @@ import React from 'react';
import PropTypes from 'prop-types';
class ProgressBar extends React.Component {
- static propTypes = {
- label: PropTypes.string,
- now: PropTypes.string.isRequired
- }
- render() {
- let {label, now} = this.props;
+ static propTypes = {
+ label: PropTypes.string,
+ now: PropTypes.string.isRequired
+ };
+ render() {
+ let { label, now } = this.props;
- return(
- <div className='progress-bar-view'>
- <div className='progress-bar-outside'>
- <div style={{width: now + '%'}} className='progress-bar-inside'></div>
- </div>
- <div className='progress-bar-view-label'>{label}</div>
- </div>
- );
- }
+ return (
+ <div className="progress-bar-view">
+ <div className="progress-bar-outside">
+ <div
+ style={{ width: now + '%' }}
+ className="progress-bar-inside"
+ />
+ </div>
+ <div className="progress-bar-view-label">{label}</div>
+ </div>
+ );
+ }
}
export default ProgressBar;
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
index 3f8dbba53a..ee8a9dca45 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -5,26 +5,57 @@ import Button from 'sdc-ui/lib/react/Button.js';
import uuid from 'uuid-js';
export default class SelectActionTable extends React.Component {
-
- render() {
- let {columns, onAdd, isReadOnlyMode, children, onAddItem, numOfIcons} = this.props;
- return (
- <div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}>
- <div className='select-action-table-controllers'>
- {onAdd && onAddItem &&
- <Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>}
- <SVGIcon name='trashO' className='dummy-icon' />
- </div>
- <div className='select-action-table'>
- <div className='select-action-table-headers'>
- {columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)}
- {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)}
- </div>
- <div className='select-action-table-body'>
- {children}
- </div>
- </div>
- </div>
- );
- }
+ render() {
+ let {
+ columns,
+ onAdd,
+ isReadOnlyMode,
+ children,
+ onAddItem,
+ numOfIcons
+ } = this.props;
+ return (
+ <div
+ className={`select-action-table-view ${
+ isReadOnlyMode ? 'disabled' : ''
+ }`}>
+ <div className="select-action-table-controllers">
+ {onAdd &&
+ onAddItem && (
+ <Button
+ btnType="link"
+ disabled={isReadOnlyMode === true}
+ color="primary"
+ iconName="plus"
+ data-test-id="select-action-table-add"
+ onClick={onAdd}>
+ {onAddItem}
+ </Button>
+ )}
+ <SVGIcon name="trashO" className="dummy-icon" />
+ </div>
+ <div className="select-action-table">
+ <div className="select-action-table-headers">
+ {columns.map(column => (
+ <div
+ key={uuid.create()}
+ className="select-action-table-header">
+ {i18n(column)}
+ </div>
+ ))}
+ {Array(numOfIcons)
+ .fill()
+ .map((e, i) => (
+ <SVGIcon
+ name="trash-o"
+ key={i}
+ className="dummy-icon"
+ />
+ ))}
+ </div>
+ <div className="select-action-table-body">{children}</div>
+ </div>
+ </div>
+ );
+ }
}
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
index 2664c8e944..20e4f2413c 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
@@ -1,20 +1,28 @@
import React from 'react';
import SelectInput from 'nfvo-components/input/SelectInput.jsx';
-const SelectActionTableCell = ({options, selected, disabled, onChange, clearable = true, placeholder}) => {
- return (
- <div className='select-action-table-cell'>
- <SelectInput
- placeholder={placeholder}
- type='select'
- value={selected}
- data-test-id='select-action-table-dropdown'
- disabled={disabled}
- onChange={option => onChange(option ? option.value : null)}
- clearable={clearable}
- options={options} />
- </div>
- );
+const SelectActionTableCell = ({
+ options,
+ selected,
+ disabled,
+ onChange,
+ clearable = true,
+ placeholder
+}) => {
+ return (
+ <div className="select-action-table-cell">
+ <SelectInput
+ placeholder={placeholder}
+ type="select"
+ value={selected}
+ data-test-id="select-action-table-dropdown"
+ disabled={disabled}
+ onChange={option => onChange(option ? option.value : null)}
+ clearable={clearable}
+ options={options}
+ />
+ </div>
+ );
};
export default SelectActionTableCell;
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
index 260d39d31c..1c2c1529f2 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -3,38 +3,65 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-function tooltip (msg) {
- return (
- <Tooltip className='select-action-table-error-tooltip' id='error-tooltip'>{msg}</Tooltip>
- );
-};
+function tooltip(msg) {
+ return (
+ <Tooltip
+ className="select-action-table-error-tooltip"
+ id="error-tooltip">
+ {msg}
+ </Tooltip>
+ );
+}
-const IconWithOverlay = ({overlayMsg}) => (
- <OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
- <SVGIcon name='errorCircle' color='negative'/>
- </OverlayTrigger>
+const IconWithOverlay = ({ overlayMsg }) => (
+ <OverlayTrigger placement="bottom" overlay={tooltip(overlayMsg)}>
+ <SVGIcon name="errorCircle" color="negative" />
+ </OverlayTrigger>
);
-function renderErrorOrCheck({hasError, overlayMsg}) {
- if (hasError === undefined) {
- return <SVGIcon name='angleRight' className='dummy-icon' />;
- }
+function renderErrorOrCheck({ hasError, overlayMsg }) {
+ if (hasError === undefined) {
+ return <SVGIcon name="angleRight" className="dummy-icon" />;
+ }
- if (hasError) {
- return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon color='negative' name='errorCircle'/>;
- }
+ if (hasError) {
+ return overlayMsg ? (
+ <IconWithOverlay overlayMsg={overlayMsg} />
+ ) : (
+ <SVGIcon color="negative" name="errorCircle" />
+ );
+ }
- return <SVGIcon name='checkCircle' color='positive'/>;
+ return <SVGIcon name="checkCircle" color="positive" />;
}
-const SelectActionTableRow = ({children, actionIcon, onAction, showAction, hasError, hasErrorIndication, overlayMsg}) => (
- <div className='select-action-table-row-wrapper'>
- <div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
- {children}
- </div>
- {onAction && <SVGIcon color='secondary' name={actionIcon} data-test-id={`select-action-table-${actionIcon}`} onClick={onAction} iconClassName={(showAction) ? '' : 'hideDelete'}/>}
- {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
- </div>
+const SelectActionTableRow = ({
+ children,
+ actionIcon,
+ onAction,
+ showAction,
+ hasError,
+ hasErrorIndication,
+ overlayMsg
+}) => (
+ <div className="select-action-table-row-wrapper">
+ <div
+ className={`select-action-table-row ${
+ hasError ? 'has-error' : ''
+ }`}>
+ {children}
+ </div>
+ {onAction && (
+ <SVGIcon
+ color="secondary"
+ name={actionIcon}
+ data-test-id={`select-action-table-${actionIcon}`}
+ onClick={onAction}
+ iconClassName={showAction ? '' : 'hideDelete'}
+ />
+ )}
+ {hasErrorIndication && renderErrorOrCheck({ hasError, overlayMsg })}
+ </div>
);
export default SelectActionTableRow;
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.jsx b/openecomp-ui/src/nfvo-components/tree/Tree.jsx
index 682f3b6d50..39434fcdf1 100644
--- a/openecomp-ui/src/nfvo-components/tree/Tree.jsx
+++ b/openecomp-ui/src/nfvo-components/tree/Tree.jsx
@@ -1,16 +1,28 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import {select} from 'd3-selection';
-import {tree, stratify} from 'd3-hierarchy';
-
+import { select } from 'd3-selection';
+import { tree, stratify } from 'd3-hierarchy';
function diagonal(d) {
-
- const offset = 50;
- return 'M' + d.y + ',' + d.x
- + 'C' + (d.parent.y + offset) + ',' + d.x
- + ' ' + (d.parent.y + offset) + ',' + d.parent.x
- + ' ' + d.parent.y + ',' + d.parent.x;
+ const offset = 50;
+ return (
+ 'M' +
+ d.y +
+ ',' +
+ d.x +
+ 'C' +
+ (d.parent.y + offset) +
+ ',' +
+ d.x +
+ ' ' +
+ (d.parent.y + offset) +
+ ',' +
+ d.parent.x +
+ ' ' +
+ d.parent.y +
+ ',' +
+ d.parent.x
+ );
}
const nodeRadius = 8;
@@ -18,164 +30,226 @@ const verticalSpaceBetweenNodes = 70;
const NARROW_HORIZONTAL_SPACES = 47;
const WIDE_HORIZONTAL_SPACES = 65;
-const stratifyFn = stratify().id(d => d.id).parentId(d => d.parent);
+const stratifyFn = stratify()
+ .id(d => d.id)
+ .parentId(d => d.parent);
class Tree extends Component {
-
- // state = {
- // startingCoordinates: null,
- // isDown: false
- // }
-
- static propTypes = {
- name: PropTypes.string,
- width: PropTypes.number,
- allowScaleWidth: PropTypes.bool,
- nodes: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- parent: PropTypes.string
- })),
- selectedNodeId: PropTypes.string,
- onNodeClick: PropTypes.func,
- onRenderedBeyondWidth: PropTypes.func
- };
-
- static defaultProps = {
- width: 500,
- allowScaleWidth : true,
- name: 'default-name'
- };
-
- render() {
- let {width, name, scrollable = false} = this.props;
- return (
- <div
- className={`tree-view ${name}-container ${scrollable ? 'scrollable' : ''}`}>
- <svg width={width} className={name}></svg>
- </div>
- );
- }
-
- componentDidMount() {
- this.renderTree();
- }
-
- // handleMouseMove(e) {
- // if (!this.state.isDown) {
- // return;
- // }
- // const container = select(`.tree-view.${this.props.name}-container`);
- // let coordinates = this.getCoordinates(e);
- // container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x);
- // container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y);
- // }
-
- // handleMouseDown(e) {
- // let startingCoordinates = this.getCoordinates(e);
- // this.setState({
- // startingCoordinates,
- // isDown: true
- // });
- // }
-
- // handleMouseUp() {
- // this.setState({
- // startingCorrdinates: null,
- // isDown: false
- // });
- // }
-
- // getCoordinates(e) {
- // var bounds = e.target.getBoundingClientRect();
- // var x = e.clientX - bounds.left;
- // var y = e.clientY - bounds.top;
- // return {x, y};
- // }
-
- componentDidUpdate(prevProps) {
- if (this.props.nodes.length !== prevProps.nodes.length ||
- this.props.selectedNodeId !== prevProps.selectedNodeId) {
- console.log('update');
- this.renderTree();
- }
- }
-
- renderTree() {
- let {width, nodes, name, allowScaleWidth, selectedNodeId, onRenderedBeyondWidth, toWiden} = this.props;
- if (nodes.length > 0) {
-
- let horizontalSpaceBetweenLeaves = toWiden ? WIDE_HORIZONTAL_SPACES : NARROW_HORIZONTAL_SPACES;
- const treeFn = tree().nodeSize([horizontalSpaceBetweenLeaves, verticalSpaceBetweenNodes]);//.size([width - 50, height - 50])
- let root = stratifyFn(nodes).sort((a, b) => a.data.name.localeCompare(b.data.name));
- let svgHeight = verticalSpaceBetweenNodes * root.height + nodeRadius * 6;
-
- treeFn(root);
-
- let nodesXValue = root.descendants().map(node => node.x);
- let maxX = Math.max(...nodesXValue);
- let minX = Math.min(...nodesXValue);
-
- let svgTempWidth = (maxX - minX) / 30 * (horizontalSpaceBetweenLeaves);
- let svgWidth = svgTempWidth < width ? (width - 5) : svgTempWidth;
- const svgEL = select(`svg.${name}`);
- const container = select(`.tree-view.${name}-container`);
- svgEL.html('');
- svgEL.attr('height', svgHeight);
- let canvasWidth = width;
- if (svgTempWidth > width) {
- if (allowScaleWidth) {
- canvasWidth = svgTempWidth;
- }
- // we seems to have a margin of 25px that we can still see with text
- if (((svgTempWidth - 25) > width) && onRenderedBeyondWidth !== undefined) {
- onRenderedBeyondWidth();
- }
- };
- svgEL.attr('width', canvasWidth);
- let rootGroup = svgEL.append('g').attr('transform', `translate(${svgWidth / 2 + nodeRadius},${nodeRadius * 4}) rotate(90)`);
-
- // handle link
- rootGroup.selectAll('.link')
- .data(root.descendants().slice(1))
- .enter().append('path')
- .attr('class', 'link')
- .attr('d', diagonal);
-
- let node = rootGroup.selectAll('.node')
- .data(root.descendants())
- .enter().append('g')
- .attr('class', node => `node ${node.children ? ' has-children' : ' leaf'} ${node.id === selectedNodeId ? 'selectedNode' : ''} ${this.props.onNodeClick ? 'clickable' : ''}`)
- .attr('transform', node => 'translate(' + node.y + ',' + node.x + ')')
- .on('click', node => this.onNodeClick(node));
-
- node.append('circle').attr('r', nodeRadius).attr('class', 'outer-circle');
- node.append('circle').attr('r', nodeRadius - 3).attr('class', 'inner-circle');
-
- node.append('text')
- .attr('y', nodeRadius / 4 + 1)
- .attr('x', - nodeRadius * 1.8)
- .text(node => node.data.name)
- .attr('transform', 'rotate(-90)');
-
- let selectedNode = selectedNodeId ? root.descendants().find(node => node.id === selectedNodeId) : null;
- if (selectedNode) {
-
- container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100) - (selectedNode.x / 30 * horizontalSpaceBetweenLeaves));
- container.property('scrollTop', (selectedNode.y / 100 * verticalSpaceBetweenNodes));
-
- } else {
- container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100));
- }
- }
- }
-
- onNodeClick(node) {
- if (this.props.onNodeClick) {
- this.props.onNodeClick(node.data);
- }
- }
-
+ // state = {
+ // startingCoordinates: null,
+ // isDown: false
+ // }
+
+ static propTypes = {
+ name: PropTypes.string,
+ width: PropTypes.number,
+ allowScaleWidth: PropTypes.bool,
+ nodes: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ parent: PropTypes.string
+ })
+ ),
+ selectedNodeId: PropTypes.string,
+ onNodeClick: PropTypes.func,
+ onRenderedBeyondWidth: PropTypes.func
+ };
+
+ static defaultProps = {
+ width: 500,
+ allowScaleWidth: true,
+ name: 'default-name'
+ };
+
+ render() {
+ let { width, name, scrollable = false } = this.props;
+ return (
+ <div
+ className={`tree-view ${name}-container ${
+ scrollable ? 'scrollable' : ''
+ }`}>
+ <svg width={width} className={name} />
+ </div>
+ );
+ }
+
+ componentDidMount() {
+ this.renderTree();
+ }
+
+ // handleMouseMove(e) {
+ // if (!this.state.isDown) {
+ // return;
+ // }
+ // const container = select(`.tree-view.${this.props.name}-container`);
+ // let coordinates = this.getCoordinates(e);
+ // container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x);
+ // container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y);
+ // }
+
+ // handleMouseDown(e) {
+ // let startingCoordinates = this.getCoordinates(e);
+ // this.setState({
+ // startingCoordinates,
+ // isDown: true
+ // });
+ // }
+
+ // handleMouseUp() {
+ // this.setState({
+ // startingCorrdinates: null,
+ // isDown: false
+ // });
+ // }
+
+ // getCoordinates(e) {
+ // var bounds = e.target.getBoundingClientRect();
+ // var x = e.clientX - bounds.left;
+ // var y = e.clientY - bounds.top;
+ // return {x, y};
+ // }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.nodes.length !== prevProps.nodes.length ||
+ this.props.selectedNodeId !== prevProps.selectedNodeId
+ ) {
+ console.log('update');
+ this.renderTree();
+ }
+ }
+
+ renderTree() {
+ let {
+ width,
+ nodes,
+ name,
+ allowScaleWidth,
+ selectedNodeId,
+ onRenderedBeyondWidth,
+ toWiden
+ } = this.props;
+ if (nodes.length > 0) {
+ let horizontalSpaceBetweenLeaves = toWiden
+ ? WIDE_HORIZONTAL_SPACES
+ : NARROW_HORIZONTAL_SPACES;
+ const treeFn = tree().nodeSize([
+ horizontalSpaceBetweenLeaves,
+ verticalSpaceBetweenNodes
+ ]); //.size([width - 50, height - 50])
+ let root = stratifyFn(nodes).sort((a, b) =>
+ a.data.name.localeCompare(b.data.name)
+ );
+ let svgHeight =
+ verticalSpaceBetweenNodes * root.height + nodeRadius * 6;
+
+ treeFn(root);
+
+ let nodesXValue = root.descendants().map(node => node.x);
+ let maxX = Math.max(...nodesXValue);
+ let minX = Math.min(...nodesXValue);
+
+ let svgTempWidth =
+ (maxX - minX) / 30 * horizontalSpaceBetweenLeaves;
+ let svgWidth = svgTempWidth < width ? width - 5 : svgTempWidth;
+ const svgEL = select(`svg.${name}`);
+ const container = select(`.tree-view.${name}-container`);
+ svgEL.html('');
+ svgEL.attr('height', svgHeight);
+ let canvasWidth = width;
+ if (svgTempWidth > width) {
+ if (allowScaleWidth) {
+ canvasWidth = svgTempWidth;
+ }
+ // we seems to have a margin of 25px that we can still see with text
+ if (
+ svgTempWidth - 25 > width &&
+ onRenderedBeyondWidth !== undefined
+ ) {
+ onRenderedBeyondWidth();
+ }
+ }
+ svgEL.attr('width', canvasWidth);
+ let rootGroup = svgEL
+ .append('g')
+ .attr(
+ 'transform',
+ `translate(${svgWidth / 2 + nodeRadius},${nodeRadius *
+ 4}) rotate(90)`
+ );
+
+ // handle link
+ rootGroup
+ .selectAll('.link')
+ .data(root.descendants().slice(1))
+ .enter()
+ .append('path')
+ .attr('class', 'link')
+ .attr('d', diagonal);
+
+ let node = rootGroup
+ .selectAll('.node')
+ .data(root.descendants())
+ .enter()
+ .append('g')
+ .attr(
+ 'class',
+ node =>
+ `node ${node.children ? ' has-children' : ' leaf'} ${
+ node.id === selectedNodeId ? 'selectedNode' : ''
+ } ${this.props.onNodeClick ? 'clickable' : ''}`
+ )
+ .attr(
+ 'transform',
+ node => 'translate(' + node.y + ',' + node.x + ')'
+ )
+ .on('click', node => this.onNodeClick(node));
+
+ node
+ .append('circle')
+ .attr('r', nodeRadius)
+ .attr('class', 'outer-circle');
+ node
+ .append('circle')
+ .attr('r', nodeRadius - 3)
+ .attr('class', 'inner-circle');
+
+ node
+ .append('text')
+ .attr('y', nodeRadius / 4 + 1)
+ .attr('x', -nodeRadius * 1.8)
+ .text(node => node.data.name)
+ .attr('transform', 'rotate(-90)');
+
+ let selectedNode = selectedNodeId
+ ? root.descendants().find(node => node.id === selectedNodeId)
+ : null;
+ if (selectedNode) {
+ container.property(
+ 'scrollLeft',
+ svgWidth / 4 +
+ (svgWidth / 4 - 100) -
+ selectedNode.x / 30 * horizontalSpaceBetweenLeaves
+ );
+ container.property(
+ 'scrollTop',
+ selectedNode.y / 100 * verticalSpaceBetweenNodes
+ );
+ } else {
+ container.property(
+ 'scrollLeft',
+ svgWidth / 4 + (svgWidth / 4 - 100)
+ );
+ }
+ }
+ }
+
+ onNodeClick(node) {
+ if (this.props.onNodeClick) {
+ this.props.onNodeClick(node.data);
+ }
+ }
}
export default Tree;
diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
index b29920b3ec..aca1a13402 100644
--- a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
+++ b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js
@@ -1,119 +1,141 @@
import React from 'react';
-import {storiesOf} from '@kadira/storybook';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
import Tree from './Tree.jsx';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
const stories = storiesOf('Version Tree', module);
stories.addDecorator(withKnobs);
const response = {
- listCount: 6,
- results: [
- {
- 'id': '123',
- 'name': '1.0',
- 'description': 'string',
- 'baseId': '',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '1234',
- 'name': '1.1',
- 'description': 'string',
- 'baseId': '123',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345',
- 'name': '2.0',
- 'description': 'string',
- 'baseId': '123',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '123456',
- 'name': '3.0',
- 'description': 'string',
- 'baseId': '12345',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '1234567',
- 'name': '1.2',
- 'description': 'string',
- 'baseId': '1234',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345678',
- 'name': '2.1',
- 'description': 'string',
- 'baseId': '12345',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '123456789',
- 'name': '4.0',
- 'description': 'string',
- 'baseId': '123456',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- },
- {
- 'id': '12345678910',
- 'name': '3.1',
- 'description': 'string',
- 'baseId': '123456',
- 'status': 'Draft',
- 'creationTime': '2017-06-08T08:55:37.831Z',
- 'modificationTime': '2017-06-08T08:55:37.831Z'
- }
- ]
+ listCount: 6,
+ results: [
+ {
+ id: '123',
+ name: '1.0',
+ description: 'string',
+ baseId: '',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '1234',
+ name: '1.1',
+ description: 'string',
+ baseId: '123',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345',
+ name: '2.0',
+ description: 'string',
+ baseId: '123',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '123456',
+ name: '3.0',
+ description: 'string',
+ baseId: '12345',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '1234567',
+ name: '1.2',
+ description: 'string',
+ baseId: '1234',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345678',
+ name: '2.1',
+ description: 'string',
+ baseId: '12345',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '123456789',
+ name: '4.0',
+ description: 'string',
+ baseId: '123456',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ },
+ {
+ id: '12345678910',
+ name: '3.1',
+ description: 'string',
+ baseId: '123456',
+ status: 'Draft',
+ creationTime: '2017-06-08T08:55:37.831Z',
+ modificationTime: '2017-06-08T08:55:37.831Z'
+ }
+ ]
};
-const divStyle = { width: '200px', borderStyle: 'solid', borderColor: 'black', border: '1px solid black'};
-const tree = response.results.map(item => ({id: item.id, name: item.name, parent: item.baseId}));
-const nodeClickHandler = function (node) {
- window.alert(node.name);
+const divStyle = {
+ width: '200px',
+ borderStyle: 'solid',
+ borderColor: 'black',
+ border: '1px solid black'
};
-stories.add('Classic Version Tree', () => (
- <div>
- <Tree nodes={tree} onNodeClick={nodeClickHandler} selectedNodeId={'1234'}/>
- </div>
-)).add('Single Version Tree', () => (
- <div>
- <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler}/>
- </div>
-)).add('Single Path Version Tree', () => (
- <div>
- <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler}/>
- </div>
-)).add('Empty Tree', () => (
- <div>
- <Tree nodes={[]}/>
- </div>
-)).add('Add Tree in Version Page Frame', () => (
- <div style={divStyle}>
- Tree wider than frame<br/><br/><br/>
- <Tree
- name={'versions-tree'}
- width={200}
- nodes={tree}
- onRenderedBeyondWidth={() => {console.log('rendered beyond width')}}
- allowScaleWidth={false}
- onNodeClick={nodeClickHandler}/>
- </div>
-));
+const tree = response.results.map(item => ({
+ id: item.id,
+ name: item.name,
+ parent: item.baseId
+}));
+const nodeClickHandler = function(node) {
+ window.alert(node.name);
+};
+stories
+ .add('Classic Version Tree', () => (
+ <div>
+ <Tree
+ nodes={tree}
+ onNodeClick={nodeClickHandler}
+ selectedNodeId={'1234'}
+ />
+ </div>
+ ))
+ .add('Single Version Tree', () => (
+ <div>
+ <Tree nodes={[tree[0]]} onNodeClick={nodeClickHandler} />
+ </div>
+ ))
+ .add('Single Path Version Tree', () => (
+ <div>
+ <Tree nodes={[tree[0], tree[1]]} onNodeClick={nodeClickHandler} />
+ </div>
+ ))
+ .add('Empty Tree', () => (
+ <div>
+ <Tree nodes={[]} />
+ </div>
+ ))
+ .add('Add Tree in Version Page Frame', () => (
+ <div style={divStyle}>
+ Tree wider than frame<br />
+ <br />
+ <br />
+ <Tree
+ name={'versions-tree'}
+ width={200}
+ nodes={tree}
+ onRenderedBeyondWidth={() => {
+ console.log('rendered beyond width');
+ }}
+ allowScaleWidth={false}
+ onNodeClick={nodeClickHandler}
+ />
+ </div>
+ ));
diff --git a/openecomp-ui/src/nfvo-utils/DirectedGraph.js b/openecomp-ui/src/nfvo-utils/DirectedGraph.js
index 197625a013..bdaf08b995 100644
--- a/openecomp-ui/src/nfvo-utils/DirectedGraph.js
+++ b/openecomp-ui/src/nfvo-utils/DirectedGraph.js
@@ -15,31 +15,31 @@
*/
export default class Graph {
- constructor() {
- this.nodes = {};
- }
+ constructor() {
+ this.nodes = {};
+ }
- addNode(node) {
- this.nodes[node] = [];
- }
+ addNode(node) {
+ this.nodes[node] = [];
+ }
- hasNode(node) {
- return this.nodes.hasOwnProperty(node);
- }
+ hasNode(node) {
+ return this.nodes.hasOwnProperty(node);
+ }
- addEdge(firstNode, secondNode, payload) {
- if (!this.hasNode(firstNode)) {
- this.addNode(firstNode);
- }
+ addEdge(firstNode, secondNode, payload) {
+ if (!this.hasNode(firstNode)) {
+ this.addNode(firstNode);
+ }
- if (!this.hasNode(secondNode)) {
- this.addNode(secondNode);
- }
+ if (!this.hasNode(secondNode)) {
+ this.addNode(secondNode);
+ }
- this.nodes[firstNode].push({...payload, target: secondNode});
- }
+ this.nodes[firstNode].push({ ...payload, target: secondNode });
+ }
- getEdges(node) {
- return this.nodes[node];
- }
-} \ No newline at end of file
+ getEdges(node) {
+ return this.nodes[node];
+ }
+}
diff --git a/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js b/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
index 13dfb1f0ab..5c55855027 100644
--- a/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
+++ b/openecomp-ui/src/nfvo-utils/ErrorResponseHandler.js
@@ -15,62 +15,71 @@
*/
import store from 'sdc-app/AppStore.js';
import React from 'react';
-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';
import SubmitErrorResponse from 'nfvo-components/SubmitErrorResponse.jsx';
function showVariablesInMessage(variables, msg) {
- let regex;
- variables.forEach((value, index) => {
- value = value.replace(';', ',');
- regex = new RegExp('\'\%' + (index + 1) + '\'');
- msg = msg.replace(regex, value);
- });
- return msg;
+ let regex;
+ variables.forEach((value, index) => {
+ value = value.replace(';', ',');
+ regex = new RegExp("'%" + (index + 1) + "'");
+ msg = msg.replace(regex, value);
+ });
+ return msg;
}
function parseCatalogExceptionObject(responseJSON) {
- let title, msg;
- if (responseJSON.requestError && responseJSON.requestError.policyException) {
- title = 'Error: ' + responseJSON.requestError.policyException.messageId;
- msg = responseJSON.requestError.policyException.text;
- }
- else if (responseJSON.requestError && responseJSON.requestError.serviceException) {
- title = 'Error: ' + responseJSON.requestError.serviceException.messageId;
- msg = responseJSON.requestError.serviceException.text;
- let {variables} = responseJSON.requestError.serviceException;
- if (variables) {
- msg = showVariablesInMessage(variables, msg);
- }
- }
- else if (responseJSON.uploadDataErrors) {
- title = i18n('Error: Upload Data Error');
- msg = (<SubmitErrorResponse validationResponse={{uploadDataErrors: responseJSON.uploadDataErrors}} />);
- }
- else {
- title = responseJSON.status;
- msg = responseJSON.message;
- }
- return {title, msg};
+ let title, msg;
+ if (
+ responseJSON.requestError &&
+ responseJSON.requestError.policyException
+ ) {
+ title = 'Error: ' + responseJSON.requestError.policyException.messageId;
+ msg = responseJSON.requestError.policyException.text;
+ } else if (
+ responseJSON.requestError &&
+ responseJSON.requestError.serviceException
+ ) {
+ title =
+ 'Error: ' + responseJSON.requestError.serviceException.messageId;
+ msg = responseJSON.requestError.serviceException.text;
+ let { variables } = responseJSON.requestError.serviceException;
+ if (variables) {
+ msg = showVariablesInMessage(variables, msg);
+ }
+ } else if (responseJSON.uploadDataErrors) {
+ title = i18n('Error: Upload Data Error');
+ msg = (
+ <SubmitErrorResponse
+ validationResponse={{
+ uploadDataErrors: responseJSON.uploadDataErrors
+ }}
+ />
+ );
+ } else {
+ title = responseJSON.status;
+ msg = responseJSON.message;
+ }
+ return { title, msg };
}
-var errorResponseHandler = (error) => {
- let errorData;
- if (error.data) {
- errorData = parseCatalogExceptionObject(error.data);
- }
- else {
- errorData = {
- title: error.statusText,
- msg: error.responseText ? error.responseText : i18n('GENERIC_ERROR'),
- };
- }
- store.dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- ...errorData
- }
- });
+var errorResponseHandler = error => {
+ let errorData;
+ if (error.data) {
+ errorData = parseCatalogExceptionObject(error.data);
+ } else {
+ errorData = {
+ title: error.statusText,
+ msg: error.responseText ? error.responseText : i18n('GENERIC_ERROR')
+ };
+ }
+ store.dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ ...errorData
+ }
+ });
};
export default errorResponseHandler;
diff --git a/openecomp-ui/src/nfvo-utils/KeyMirror.js b/openecomp-ui/src/nfvo-utils/KeyMirror.js
index 220fe07430..dc351af57c 100644
--- a/openecomp-ui/src/nfvo-utils/KeyMirror.js
+++ b/openecomp-ui/src/nfvo-utils/KeyMirror.js
@@ -13,27 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-var keyMirror = function (obj) {
- var ret = {};
- var key;
- var val;
- if (!(obj instanceof Object && !Array.isArray(obj))) {
- throw new Error('keyMirror(...): Argument must be an object.');
- }
- for (key in obj) {
- if (obj.hasOwnProperty(key)) {
- val = obj[key];
- if (val instanceof Object) {
- ret[key] = keyMirror(obj[key]);
- } else if(val !== null && val !== undefined){
- ret[key] = val;
- }
- else {
- ret[key] = Symbol(key);
- }
- }
- }
- return Object.freeze(ret);
+var keyMirror = function(obj) {
+ var ret = {};
+ var key;
+ var val;
+ if (!(obj instanceof Object && !Array.isArray(obj))) {
+ throw new Error('keyMirror(...): Argument must be an object.');
+ }
+ for (key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ val = obj[key];
+ if (val instanceof Object) {
+ ret[key] = keyMirror(obj[key]);
+ } else if (val !== null && val !== undefined) {
+ ret[key] = val;
+ } else {
+ ret[key] = Symbol(key);
+ }
+ }
+ }
+ return Object.freeze(ret);
};
-export default keyMirror; \ No newline at end of file
+export default keyMirror;
diff --git a/openecomp-ui/src/nfvo-utils/RestAPIUtil.js b/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
index 5b07986390..1a5817de66 100644
--- a/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
+++ b/openecomp-ui/src/nfvo-utils/RestAPIUtil.js
@@ -18,7 +18,7 @@ import md5 from 'md5';
import axios from 'axios';
import store from 'sdc-app/AppStore.js';
-import {actionTypes as LoaderConstants} from 'nfvo-components/loader/LoaderConstants.js';
+import { actionTypes as LoaderConstants } from 'nfvo-components/loader/LoaderConstants.js';
import Configuration from 'sdc-app/config/Configuration.js';
import errorResponseHandler from './ErrorResponseHandler.js';
@@ -39,124 +39,133 @@ const STORAGE_AUTH_KEY = 'sdc-auth-token';
const REQUEST_ID_HEADER = 'X-ECOMP-RequestID';
const CONTENT_MD5_HEADER = 'Content-MD5';
-
function applySecurity(options, data) {
- let headers = options.headers || (options.headers = {});
-
- let authToken = localStorage.getItem(STORAGE_AUTH_KEY);
- if (authToken) {
- headers[AUTHORIZATION_HEADER] = authToken;
- }
-
- let catalogApiHeaders = Configuration.get('CatalogApiHeaders'),
- catalogUidHeader = catalogApiHeaders && catalogApiHeaders.userId;
- if (catalogUidHeader) {
- headers[catalogUidHeader.name] = catalogUidHeader.value;
- }
-
- headers[REQUEST_ID_HEADER] = uuid.create().toString();
- if (options.md5) {
- let headers = options.headers;
- headers[CONTENT_MD5_HEADER] = window.btoa(md5(JSON.stringify(data)).toLowerCase());
- }
+ let headers = options.headers || (options.headers = {});
+
+ let authToken = localStorage.getItem(STORAGE_AUTH_KEY);
+ if (authToken) {
+ headers[AUTHORIZATION_HEADER] = authToken;
+ }
+
+ let catalogApiHeaders = Configuration.get('CatalogApiHeaders'),
+ catalogUidHeader = catalogApiHeaders && catalogApiHeaders.userId;
+ if (catalogUidHeader) {
+ headers[catalogUidHeader.name] = catalogUidHeader.value;
+ }
+
+ headers[REQUEST_ID_HEADER] = uuid.create().toString();
+ if (options.md5) {
+ let headers = options.headers;
+ headers[CONTENT_MD5_HEADER] = window.btoa(
+ md5(JSON.stringify(data)).toLowerCase()
+ );
+ }
}
-
function handleSuccess(responseHeaders, requestHeaders) {
- let authToken = responseHeaders[AUTHORIZATION_HEADER];
- let prevToken = requestHeaders && requestHeaders[AUTHORIZATION_HEADER];
- if (authToken && authToken !== prevToken) {
- if (authToken === 'null') {
- localStorage.removeItem(STORAGE_AUTH_KEY);
- } else {
- localStorage.setItem(STORAGE_AUTH_KEY, authToken);
- }
- }
+ let authToken = responseHeaders[AUTHORIZATION_HEADER];
+ let prevToken = requestHeaders && requestHeaders[AUTHORIZATION_HEADER];
+ if (authToken && authToken !== prevToken) {
+ if (authToken === 'null') {
+ localStorage.removeItem(STORAGE_AUTH_KEY);
+ } else {
+ localStorage.setItem(STORAGE_AUTH_KEY, authToken);
+ }
+ }
}
-class RestAPIUtil {
- handleRequest(url, type, options = {}, data){
- if (DEBUG) {
- console.log('axios --> Making REST call (' + type + '): ' + url);
- }
-
- applySecurity(options, data);
-
- // TODO see ig necessary or in transformrequest funtion
- if (type === POST || type === PUT) {
- if (data instanceof FormData) {
- options.headers.contentType = MULTIPART_FORM_DATA;
- }
- else {
- options.headers.contentType = APPLICATION_JSON;
-// config.data = JSON.stringify(data);
- }
-
- } else {
- data = null;
- }
-
- let config = {
- method: type,
- url: url,
- headers : options.headers,
- data : data
- };
-
- store.dispatch({type: LoaderConstants.SEND_REQUEST, url: url});
- if (options.dataType === BINARY) {
- config.responseType = 'arraybuffer';
- return axios(config).
- then(result => {
- store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : result.config.url});
- return ({
- blob : new Blob([result.data] ),
- headers : result.headers
- });
- }).catch(error => {
- store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : error.config.url});
- errorResponseHandler(error.response); });
- } else {
- return axios(config).
- then(result => {
- store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : result.config.url});
- handleSuccess(result.headers, result.config.headers);
- return result.data;
- }).catch(error => {
- store.dispatch({type: LoaderConstants.RECEIVE_RESPONSE, url : error.config.url});
- errorResponseHandler(error.response);
- return Promise.reject({responseJSON: error.response.data});
- });
- }
-
- }
-
- fetch(url, options) {
- return this.handleRequest(url, GET, options);
- }
-
- get(url, options) {
- return this.fetch(url, options);
- }
-
- post(url, data, options) {
- return this.handleRequest(url, POST, options, data);
- }
-
- put(url, data, options) {
- return this.handleRequest(url, PUT, options, data);
- }
-
- destroy(url, options) {
- return this.handleRequest(url, DELETE, options);
- }
-
-
-
+class RestAPIUtil {
+ handleRequest(url, type, options = {}, data) {
+ if (DEBUG) {
+ console.log('axios --> Making REST call (' + type + '): ' + url);
+ }
+
+ applySecurity(options, data);
+
+ // TODO see ig necessary or in transformrequest funtion
+ if (type === POST || type === PUT) {
+ if (data instanceof FormData) {
+ options.headers.contentType = MULTIPART_FORM_DATA;
+ } else {
+ options.headers.contentType = APPLICATION_JSON;
+ // config.data = JSON.stringify(data);
+ }
+ } else {
+ data = null;
+ }
+
+ let config = {
+ method: type,
+ url: url,
+ headers: options.headers,
+ data: data
+ };
+
+ store.dispatch({ type: LoaderConstants.SEND_REQUEST, url: url });
+ if (options.dataType === BINARY) {
+ config.responseType = 'arraybuffer';
+ return axios(config)
+ .then(result => {
+ store.dispatch({
+ type: LoaderConstants.RECEIVE_RESPONSE,
+ url: result.config.url
+ });
+ return {
+ blob: new Blob([result.data]),
+ headers: result.headers
+ };
+ })
+ .catch(error => {
+ store.dispatch({
+ type: LoaderConstants.RECEIVE_RESPONSE,
+ url: error.config.url
+ });
+ errorResponseHandler(error.response);
+ });
+ } else {
+ return axios(config)
+ .then(result => {
+ store.dispatch({
+ type: LoaderConstants.RECEIVE_RESPONSE,
+ url: result.config.url
+ });
+ handleSuccess(result.headers, result.config.headers);
+ return result.data;
+ })
+ .catch(error => {
+ store.dispatch({
+ type: LoaderConstants.RECEIVE_RESPONSE,
+ url: error.config.url
+ });
+ errorResponseHandler(error.response);
+ return Promise.reject({
+ responseJSON: error.response.data
+ });
+ });
+ }
+ }
+
+ fetch(url, options) {
+ return this.handleRequest(url, GET, options);
+ }
+
+ get(url, options) {
+ return this.fetch(url, options);
+ }
+
+ post(url, data, options) {
+ return this.handleRequest(url, POST, options, data);
+ }
+
+ put(url, data, options) {
+ return this.handleRequest(url, PUT, options, data);
+ }
+
+ destroy(url, options) {
+ return this.handleRequest(url, DELETE, options);
+ }
}
const instance = new RestAPIUtil();
-
-
export default instance;
diff --git a/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js b/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
index bddd49c700..990701c6f0 100644
--- a/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
+++ b/openecomp-ui/src/nfvo-utils/ShowFileSaveDialog.js
@@ -15,35 +15,48 @@
*/
function getTimestampString() {
- let date = new Date();
- let z = n => n < 10 ? '0' + n : n;
- return `${date.getFullYear()}-${z(date.getMonth())}-${z(date.getDate())}_${z(date.getHours())}-${z(date.getMinutes())}`;
+ let date = new Date();
+ let z = n => (n < 10 ? '0' + n : n);
+ return `${date.getFullYear()}-${z(date.getMonth())}-${z(
+ date.getDate()
+ )}_${z(date.getHours())}-${z(date.getMinutes())}`;
}
+export default function showFileSaveDialog({
+ blob,
+ headers,
+ defaultFilename,
+ addTimestamp
+}) {
+ let filename;
+ let contentDisposition = headers['content-disposition']
+ ? headers['content-disposition']
+ : '';
+ let match = contentDisposition
+ ? contentDisposition.match(/filename=(.*?)(;|$)/)
+ : false;
+ if (match) {
+ filename = match[1];
+ } else {
+ filename = defaultFilename;
+ }
-export default function showFileSaveDialog({blob, headers, defaultFilename, addTimestamp}) {
- let filename;
- let contentDisposition = headers['content-disposition'] ? headers['content-disposition'] : '';
- let match = contentDisposition ? contentDisposition.match(/filename=(.*?)(;|$)/) : false;
- if (match) {
- filename = match[1];
- } else {
- filename = defaultFilename;
- }
+ if (addTimestamp) {
+ filename = filename.replace(
+ /(^.*?)\.([^.]+$)/,
+ `$1_${getTimestampString()}.$2`
+ );
+ }
- if (addTimestamp) {
- filename = filename.replace(/(^.*?)\.([^.]+$)/, `$1_${getTimestampString()}.$2`);
- }
-
- let link = document.createElement('a');
- let url = URL.createObjectURL(blob);
- link.href = url;
- link.download = filename;
- link.style.display = 'none';
- document.body.appendChild(link);
- link.click();
- setTimeout(function(){
- document.body.removeChild(link);
- URL.revokeObjectURL(url);
- }, 0);
-};
+ let link = document.createElement('a');
+ let url = URL.createObjectURL(blob);
+ link.href = url;
+ link.download = filename;
+ link.style.display = 'none';
+ document.body.appendChild(link);
+ link.click();
+ setTimeout(function() {
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ }, 0);
+}
diff --git a/openecomp-ui/src/nfvo-utils/UUID.js b/openecomp-ui/src/nfvo-utils/UUID.js
index e1d4c54b1f..37de994201 100644
--- a/openecomp-ui/src/nfvo-utils/UUID.js
+++ b/openecomp-ui/src/nfvo-utils/UUID.js
@@ -15,39 +15,39 @@
*/
import UUID from 'uuid-js';
-let toCustomUUID = (uuid) => {
- return 'U' + uuid.replace(/-/g, '');
+let toCustomUUID = uuid => {
+ return 'U' + uuid.replace(/-/g, '');
};
let getUUID = function(num, isSync) {
- if (isSync) {
- let uuid;
- if (!num) {
- uuid = toCustomUUID(UUID.create().toString());
- } else {
- uuid = [];
- for (var i = 0; i < num; i++) {
- uuid[i] = toCustomUUID(UUID.create().toString());
- }
- }
- if (num === 1) {
- return uuid[0];
- } else {
- return uuid;
- }
- }
- return new Promise(resolve => {
- let uuid;
- if (!num) {
- uuid = toCustomUUID(UUID.create().toString());
- } else {
- uuid = [];
- for (var i = 0; i < num; i++) {
- uuid[i] = toCustomUUID(UUID.create().toString());
- }
- }
- setTimeout(() => resolve(uuid), 100);
- });
+ if (isSync) {
+ let uuid;
+ if (!num) {
+ uuid = toCustomUUID(UUID.create().toString());
+ } else {
+ uuid = [];
+ for (var i = 0; i < num; i++) {
+ uuid[i] = toCustomUUID(UUID.create().toString());
+ }
+ }
+ if (num === 1) {
+ return uuid[0];
+ } else {
+ return uuid;
+ }
+ }
+ return new Promise(resolve => {
+ let uuid;
+ if (!num) {
+ uuid = toCustomUUID(UUID.create().toString());
+ } else {
+ uuid = [];
+ for (var i = 0; i < num; i++) {
+ uuid[i] = toCustomUUID(UUID.create().toString());
+ }
+ }
+ setTimeout(() => resolve(uuid), 100);
+ });
};
export default getUUID;
diff --git a/openecomp-ui/src/nfvo-utils/Validator.js b/openecomp-ui/src/nfvo-utils/Validator.js
index 0cb1943d66..324198ef2e 100644
--- a/openecomp-ui/src/nfvo-utils/Validator.js
+++ b/openecomp-ui/src/nfvo-utils/Validator.js
@@ -18,119 +18,189 @@ import * as ValidatorJS from 'validator';
import i18n from 'nfvo-utils/i18n/i18n.js';
class Validator {
- static get globalValidationFunctions() {
- return {
- required: value => {
- return typeof value === 'string' ? value.replace(/\s+/g, '') !== '' : value !== '';
- },
- requiredChooseOption: value => value !== '',
- maxLength: (value, length) => ValidatorJS.isLength(value, {max: length}),
- minLength: (value, length) => ValidatorJS.isLength(value, {min: length}),
- pattern: (value, pattern) => ValidatorJS.matches(value, pattern),
- numeric: value => {
- if (value === '') {
- // to allow empty value which is not zero
- return true;
- }
- return ValidatorJS.isNumeric(value);
- },
- maximum: (value, maxValue) => {return (value === undefined) ? true : (value <= maxValue);},
- minimum: (value, minValue) => {return (value === undefined) ? true : (value >= minValue);},
- maximumExclusive: (value, maxValue) => {return (value === undefined) ? true : (value < maxValue);},
- minimumExclusive: (value, minValue) => {return (value === undefined) ? true : (value > minValue);},
- alphanumeric: value => ValidatorJS.isAlphanumeric(value),
- alphanumericWithSpaces: value => ValidatorJS.isAlphanumeric(value.replace(/ /g, '')),
- validateName: value => ValidatorJS.isAlphanumeric(value.replace(/\s|\.|\_|\-/g, ''), 'en-US'),
- validateVendorName: value => ValidatorJS.isAlphanumeric(value.replace(/[\x7F-\xFF]|\s/g, ''), 'en-US'),
- freeEnglishText: value => ValidatorJS.isAlphanumeric(value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''), 'en-US'),
- email: value => ValidatorJS.isEmail(value),
- ip: value => ValidatorJS.isIP(value),
- url: value => ValidatorJS.isURL(value),
- alphanumericWithUnderscores: value => ValidatorJS.isAlphanumeric(value.replace(/_/g, '')),
- requiredChoiceWithOther: (value, otherValue) => {
- let chosen = value.choice;
- // if we have an empty multiple select we have a problem since it's required
- let validationFunc = this.globalValidationFunctions['required'];
- if (value.choices) {
- if (value.choices.length === 0) {
- return false;
- } else {
- // continuing validation with the first chosen value in case we have the 'Other' field
- chosen = value.choices[0];
- }
- }
- if (chosen !== otherValue) {
- return validationFunc(chosen, true);
- } else { // when 'Other' was chosen, validate other value
- return validationFunc(value.other, true);
- }
- }
- };
- }
+ static get globalValidationFunctions() {
+ return {
+ required: value => {
+ return typeof value === 'string'
+ ? value.replace(/\s+/g, '') !== ''
+ : value !== '';
+ },
+ requiredChooseOption: value => value !== '',
+ maxLength: (value, length) =>
+ ValidatorJS.isLength(value, { max: length }),
+ minLength: (value, length) =>
+ ValidatorJS.isLength(value, { min: length }),
+ pattern: (value, pattern) => ValidatorJS.matches(value, pattern),
+ numeric: value => {
+ if (value === '') {
+ // to allow empty value which is not zero
+ return true;
+ }
+ return ValidatorJS.isNumeric(value);
+ },
+ maximum: (value, maxValue) => {
+ return value === undefined ? true : value <= maxValue;
+ },
+ minimum: (value, minValue) => {
+ return value === undefined ? true : value >= minValue;
+ },
+ maximumExclusive: (value, maxValue) => {
+ return value === undefined ? true : value < maxValue;
+ },
+ minimumExclusive: (value, minValue) => {
+ return value === undefined ? true : value > minValue;
+ },
+ alphanumeric: value => ValidatorJS.isAlphanumeric(value),
+ alphanumericWithSpaces: value =>
+ ValidatorJS.isAlphanumeric(value.replace(/ /g, '')),
+ validateName: value =>
+ ValidatorJS.isAlphanumeric(
+ value.replace(/\s|\.|\_|\-/g, ''),
+ 'en-US'
+ ),
+ validateVendorName: value =>
+ ValidatorJS.isAlphanumeric(
+ value.replace(/[\x7F-\xFF]|\s/g, ''),
+ 'en-US'
+ ),
+ freeEnglishText: value =>
+ ValidatorJS.isAlphanumeric(
+ value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''),
+ 'en-US'
+ ),
+ email: value => ValidatorJS.isEmail(value),
+ ip: value => ValidatorJS.isIP(value),
+ url: value => ValidatorJS.isURL(value),
+ alphanumericWithUnderscores: value =>
+ ValidatorJS.isAlphanumeric(value.replace(/_/g, '')),
+ requiredChoiceWithOther: (value, otherValue) => {
+ let chosen = value.choice;
+ // if we have an empty multiple select we have a problem since it's required
+ let validationFunc = this.globalValidationFunctions['required'];
+ if (value.choices) {
+ if (value.choices.length === 0) {
+ return false;
+ } else {
+ // continuing validation with the first chosen value in case we have the 'Other' field
+ chosen = value.choices[0];
+ }
+ }
+ if (chosen !== otherValue) {
+ return validationFunc(chosen, true);
+ } else {
+ // when 'Other' was chosen, validate other value
+ return validationFunc(value.other, true);
+ }
+ }
+ };
+ }
- static get globalValidationMessagingFunctions() {
- return {
- required: () => i18n('Field is required'),
- requiredChooseOption: () => i18n('Field should have one of these options'),
- requiredChoiceWithOther: () => i18n('Field is required'),
- maxLength: (value, maxLength) => i18n('Field value has exceeded it\'s limit, {maxLength}. current length: {length}', {
- length: value.length,
- maxLength
- }),
- minLength: (value, minLength) => i18n('Field value should contain at least {minLength} characters.', {minLength: minLength}),
- pattern: (value, pattern) => i18n('Field value should match the pattern: {pattern}.', {pattern: pattern}),
- numeric: () => i18n('Field value should contain numbers only.'),
- maximum: (value, maxValue) => i18n('Field value should be less or equal to: {maxValue}.', {maxValue: maxValue}),
- minimum: (value, minValue) => i18n('Field value should be at least: {minValue}.', {minValue: minValue.toString()}),
- maximumExclusive: (value, maxValue) => i18n('Field value should be less than: {maxValue}.', {maxValue: maxValue}),
- minimumExclusive: (value, minValue) => i18n('Field value should be more than: {minValue}.', {minValue: minValue.toString()}),
- alphanumeric: () => i18n('Field value should contain letters or digits only.'),
- alphanumericWithSpaces: () => i18n('Field value should contain letters, digits or spaces only.'),
- validateName: ()=> i18n('Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'),
- validateVendorName: ()=> i18n('Field value should contain English letters digits and spaces only.'),
- freeEnglishText: ()=> i18n('Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'),
- email: () => i18n('Field value should be a valid email address.'),
- ip: () => i18n('Field value should be a valid ip address.'),
- url: () => i18n('Field value should be a valid url address.'),
- general: () => i18n('Field value is invalid.'),
- alphanumericWithUnderscores: () => i18n('Field value should contain letters, digits or _ only.')
- };
- }
+ static get globalValidationMessagingFunctions() {
+ return {
+ required: () => i18n('Field is required'),
+ requiredChooseOption: () =>
+ i18n('Field should have one of these options'),
+ requiredChoiceWithOther: () => i18n('Field is required'),
+ maxLength: (value, maxLength) =>
+ i18n(
+ "Field value has exceeded it's limit, {maxLength}. current length: {length}",
+ {
+ length: value.length,
+ maxLength
+ }
+ ),
+ minLength: (value, minLength) =>
+ i18n(
+ 'Field value should contain at least {minLength} characters.',
+ {
+ minLength: minLength
+ }
+ ),
+ pattern: (value, pattern) =>
+ i18n('Field value should match the pattern: {pattern}.', {
+ pattern: pattern
+ }),
+ numeric: () => i18n('Field value should contain numbers only.'),
+ maximum: (value, maxValue) =>
+ i18n('Field value should be less or equal to: {maxValue}.', {
+ maxValue: maxValue
+ }),
+ minimum: (value, minValue) =>
+ i18n('Field value should be at least: {minValue}.', {
+ minValue: minValue.toString()
+ }),
+ maximumExclusive: (value, maxValue) =>
+ i18n('Field value should be less than: {maxValue}.', {
+ maxValue: maxValue
+ }),
+ minimumExclusive: (value, minValue) =>
+ i18n('Field value should be more than: {minValue}.', {
+ minValue: minValue.toString()
+ }),
+ alphanumeric: () =>
+ i18n('Field value should contain letters or digits only.'),
+ alphanumericWithSpaces: () =>
+ i18n(
+ 'Field value should contain letters, digits or spaces only.'
+ ),
+ validateName: () =>
+ i18n(
+ 'Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'
+ ),
+ validateVendorName: () =>
+ i18n(
+ 'Field value should contain English letters digits and spaces only.'
+ ),
+ freeEnglishText: () =>
+ i18n(
+ 'Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'
+ ),
+ email: () => i18n('Field value should be a valid email address.'),
+ ip: () => i18n('Field value should be a valid ip address.'),
+ url: () => i18n('Field value should be a valid url address.'),
+ general: () => i18n('Field value is invalid.'),
+ alphanumericWithUnderscores: () =>
+ i18n('Field value should contain letters, digits or _ only.')
+ };
+ }
- static validateItem(value, data, type) {
- let validationFunc = this.globalValidationFunctions[type];
- const isValid = validationFunc(value, data);
- let errorText = '';
- if (!isValid) {
- errorText = this.globalValidationMessagingFunctions[type](value, data);
- }
- return {
- isValid,
- errorText
- };
- }
+ static validateItem(value, data, type) {
+ let validationFunc = this.globalValidationFunctions[type];
+ const isValid = validationFunc(value, data);
+ let errorText = '';
+ if (!isValid) {
+ errorText = this.globalValidationMessagingFunctions[type](
+ value,
+ data
+ );
+ }
+ return {
+ isValid,
+ errorText
+ };
+ }
- static validate(fieldName, value, validations, state, customValidations) {
- let result = { isValid: true, errorText: '' };
- for (let validation of validations) {
- result = this.validateItem(value, validation.data, validation.type);
- if (!result.isValid) {
- return result;
- }
- }
- if (customValidations) {
- let validationFunc = customValidations[fieldName];
- if (validationFunc) {
- result = validationFunc(value, state);
- }
- }
- return result;
- }
+ static validate(fieldName, value, validations, state, customValidations) {
+ let result = { isValid: true, errorText: '' };
+ for (let validation of validations) {
+ result = this.validateItem(value, validation.data, validation.type);
+ if (!result.isValid) {
+ return result;
+ }
+ }
+ if (customValidations) {
+ let validationFunc = customValidations[fieldName];
+ if (validationFunc) {
+ result = validationFunc(value, state);
+ }
+ }
+ return result;
+ }
- static isItemNameAlreadyExistsInList({itemId, itemName, list}) {
- itemName = itemName.toLowerCase();
- return list[itemName] && list[itemName] !== itemId;
- }
+ static isItemNameAlreadyExistsInList({ itemId, itemName, list }) {
+ itemName = itemName.toLowerCase();
+ return list[itemName] && list[itemName] !== itemId;
+ }
}
export default Validator;
diff --git a/openecomp-ui/src/nfvo-utils/WebSocketUtil.js b/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
index c9dd10f1af..69f44d4da5 100644
--- a/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
+++ b/openecomp-ui/src/nfvo-utils/WebSocketUtil.js
@@ -16,41 +16,50 @@
import store from 'sdc-app/AppStore.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from 'sdc-app/onboarding/userNotifications/UserNotificationsConstants.js';
+import { actionTypes } from 'sdc-app/onboarding/userNotifications/UserNotificationsConstants.js';
-
-export const websocketUrl = 'ws://' + window.location.hostname + ':' + Configuration.get('websocketPort')
- + '/' + Configuration.get('websocketPath');
+export const websocketUrl =
+ 'ws://' +
+ window.location.hostname +
+ ':' +
+ Configuration.get('websocketPort') +
+ '/' +
+ Configuration.get('websocketPath');
/***
* Websocket is treated like a singleton. only need one for the application.
*/
var websocket;
-
export default {
+ open(url, { lastScanned }) {
+ if (
+ websocket === undefined ||
+ websocket.readyState === websocket.CLOSED
+ ) {
+ websocket = new WebSocket(
+ `${url}?LAST_DELIVERED_EVENT_ID=${lastScanned}`
+ );
+ websocket.onmessage = event =>
+ store.dispatch({
+ type: actionTypes.NOTIFICATION,
+ data: JSON.parse(event.data)
+ });
+ websocket.onclose = event => {
+ if (event.code && event.code === 1001) {
+ // - Idle Timeout
+ const { lastScanned } = store.getState().notifications;
+ console.log('Reconnecting to Websocket');
+ this.open(websocketUrl, { lastScanned });
+ }
+ };
+ websocket.onerror = event => console.log(event);
+ }
+ },
- open(url, {lastScanned}) {
- if (websocket === undefined || websocket.readyState === websocket.CLOSED) {
- websocket = new WebSocket(`${url}?LAST_DELIVERED_EVENT_ID=${lastScanned}`);
- websocket.onmessage = event => store.dispatch({
- type: actionTypes.NOTIFICATION,
- data: JSON.parse(event.data)
- });
- websocket.onclose = event => {
- if(event.code && event.code === 1001) { // - Idle Timeout
- const {lastScanned} = store.getState().notifications;
- console.log('Reconnecting to Websocket');
- this.open(websocketUrl, {lastScanned});
- }
- };
- websocket.onerror = event => console.log(event);
- }
- },
-
- close() {
- if (websocket !== undefined) {
- websocket.close();
- }
- }
+ close() {
+ if (websocket !== undefined) {
+ websocket.close();
+ }
+ }
};
diff --git a/openecomp-ui/src/nfvo-utils/getValue.js b/openecomp-ui/src/nfvo-utils/getValue.js
index 5ab0c76d73..0cac3cd726 100644
--- a/openecomp-ui/src/nfvo-utils/getValue.js
+++ b/openecomp-ui/src/nfvo-utils/getValue.js
@@ -13,38 +13,50 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
function getValueFromObject(element) {
- return element.choices && element.choices.length > 0 && element.choices[0] !== '' && element.choices[0] !== optionInputOther.OTHER ||
- element.other && element.choices[0] === optionInputOther.OTHER ?
- element : undefined;
+ return (element.choices &&
+ element.choices.length > 0 &&
+ element.choices[0] !== '' &&
+ element.choices[0] !== optionInputOther.OTHER) ||
+ (element.other && element.choices[0] === optionInputOther.OTHER)
+ ? element
+ : undefined;
}
function getValueFromVariable(variable) {
- return variable ? variable : undefined;
+ return variable ? variable : undefined;
}
function getArrayData(variable) {
- return variable.length ? variable : undefined;
+ return variable.length ? variable : undefined;
}
- let getValue = element => {
- return typeof element === 'object' ?
- element instanceof Array ? getArrayData(element) : getValueFromObject(element) :
- getValueFromVariable(element);
- };
+let getValue = element => {
+ return typeof element === 'object'
+ ? element instanceof Array
+ ? getArrayData(element)
+ : getValueFromObject(element)
+ : getValueFromVariable(element);
+};
export function getStrValue(choiceObject) {
- if (!choiceObject) {
- return undefined;
- }
- if (choiceObject.choice && choiceObject.choice !== '' && choiceObject.choice !== optionInputOther.OTHER) {
- return choiceObject.choice;
- }
- else if (choiceObject.other && choiceObject.choice === optionInputOther.OTHER) {
- return choiceObject.other;
- }
+ if (!choiceObject) {
+ return undefined;
+ }
+ if (
+ choiceObject.choice &&
+ choiceObject.choice !== '' &&
+ choiceObject.choice !== optionInputOther.OTHER
+ ) {
+ return choiceObject.choice;
+ } else if (
+ choiceObject.other &&
+ choiceObject.choice === optionInputOther.OTHER
+ ) {
+ return choiceObject.other;
+ }
}
- export default getValue;
+export default getValue;
diff --git a/openecomp-ui/src/nfvo-utils/i18n/i18n.js b/openecomp-ui/src/nfvo-utils/i18n/i18n.js
index ef97b8bab4..43a183def4 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/i18n.js
+++ b/openecomp-ui/src/nfvo-utils/i18n/i18n.js
@@ -22,88 +22,94 @@ import i18nJson from 'i18nJson';
Intl libs are using out dated transpailer from ecmascript6.
* TODO: As soon as they fix it, remove this assignments!!!
* */
-var Intl = window.Intl || IntlObj.default,
- IntlMessageFormat = IntlMessageFormatObj.default,
- IntlRelativeFormat = IntlRelativeFormatObj.default,
- createFormatCache = createFormatCacheObj.default;
+var Intl = window.Intl || IntlObj.default,
+ IntlMessageFormat = IntlMessageFormatObj.default,
+ IntlRelativeFormat = IntlRelativeFormatObj.default,
+ createFormatCache = createFormatCacheObj.default;
/*extract locale*/
var _locale = window.localStorage && localStorage.getItem('user_locale');
-if(!_locale) {
- if(window.navigator) {
- _locale = navigator.language || navigator.userLanguage;
+if (!_locale) {
+ if (window.navigator) {
+ _locale = navigator.language || navigator.userLanguage;
- //For now removing the dashes from the language.
- let indexOfDash = _locale.indexOf('-');
- if(-1 !== indexOfDash) {
- _locale = _locale.substr(0, indexOfDash);
- }
- }
- if(!_locale) {
- _locale = 'en';
- }
+ //For now removing the dashes from the language.
+ let indexOfDash = _locale.indexOf('-');
+ if (-1 !== indexOfDash) {
+ _locale = _locale.substr(0, indexOfDash);
+ }
+ }
+ if (!_locale) {
+ _locale = 'en';
+ }
}
var _localeUpper = _locale.toUpperCase();
var i18n = {
+ _locale: _locale,
+ _localeUpper: _localeUpper,
+ _i18nData: i18nJson || {},
- _locale: _locale,
- _localeUpper: _localeUpper,
- _i18nData: i18nJson || {},
+ number(num) {
+ return createFormatCache(Intl.NumberFormat)(this._locale).format(num);
+ },
- number(num) {
- return createFormatCache(Intl.NumberFormat)(this._locale).format(num);
- },
+ date(date, options, relativeDates) {
+ if (undefined === relativeDates || relativeDates) {
+ return this.dateRelative(date, options);
+ } else {
+ return this.dateNormal(date, options);
+ }
+ },
- date(date, options, relativeDates) {
- if (undefined === relativeDates || relativeDates) {
- return this.dateRelative(date, options);
- } else {
- return this.dateNormal(date, options);
- }
- },
-
- dateNormal(date, options) {
- return createFormatCache(Intl.DateTimeFormat)(this._locale, options).format(date);
- },
-
- dateRelative(date, options) {
- return createFormatCache(IntlRelativeFormat)(this._locale, options).format(date);
- },
- message(messageId, options) {
- let messageTxt = null;
- if (i18nJson && i18nJson[messageId]) {
- messageTxt = i18nJson[messageId];
- } else {
- messageTxt = String(messageId);
- }
- return createFormatCache(IntlMessageFormat)(messageTxt, this._locale).format(options);
-
- },
- getLocale() {
- return this._locale;
- },
- getLocaleUpper() {
- return this._localeUpper;
- },
- setLocale(locale) {
- localStorage.setItem('user_locale', locale);
- window.location.reload();
- }
+ dateNormal(date, options) {
+ return createFormatCache(Intl.DateTimeFormat)(
+ this._locale,
+ options
+ ).format(date);
+ },
+ dateRelative(date, options) {
+ return createFormatCache(IntlRelativeFormat)(
+ this._locale,
+ options
+ ).format(date);
+ },
+ message(messageId, options) {
+ let messageTxt = null;
+ if (i18nJson && i18nJson[messageId]) {
+ messageTxt = i18nJson[messageId];
+ } else {
+ messageTxt = String(messageId);
+ }
+ return createFormatCache(IntlMessageFormat)(
+ messageTxt,
+ this._locale
+ ).format(options);
+ },
+ getLocale() {
+ return this._locale;
+ },
+ getLocaleUpper() {
+ return this._localeUpper;
+ },
+ setLocale(locale) {
+ localStorage.setItem('user_locale', locale);
+ window.location.reload();
+ }
};
function i18nWrapper() {
- return i18nWrapper.message.apply(i18nWrapper, arguments);
+ return i18nWrapper.message.apply(i18nWrapper, arguments);
}
/*replace with some kind of extend method*/
var prop, propKey;
for (propKey in i18n) {
- prop = i18n[propKey];
- if (typeof prop === 'function') {
- prop = prop.bind(i18nWrapper);
- }
- i18nWrapper[propKey] = prop;
+ prop = i18n[propKey];
+ if (typeof prop === 'function') {
+ prop = prop.bind(i18nWrapper);
+ }
+ i18nWrapper[propKey] = prop;
}
export default i18nWrapper;
diff --git a/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js b/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
index 816915b1c9..79f95057a0 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
+++ b/openecomp-ui/src/nfvo-utils/i18n/i18n.stories.js
@@ -1,35 +1,51 @@
import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {text, number} from '@kadira/storybook-addon-knobs';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
import i18n from 'nfvo-utils/i18n/i18n.js';
import i18nJson from 'nfvo-utils/i18n/en.json';
const stories = storiesOf('i18n', module);
stories.addDecorator(withKnobs);
-
i18nJson['added'] = 'this is my test';
i18nJson['added with {param}'] = 'this is my test with {param}';
-stories
- .add('i18n tests', () => {
- let keys = [
- 'I do not exist',
- 'Delete',
- 'OrchestrationTemplateCandidate/File Structure'
- ];
- let translations = [];
- let i=0;
- translations.push(<div id={i++}>KEY: VALUE</div>)
- keys.forEach((key) => {
- translations.push((<div id={i++}>{key} : {i18n(key)} </div>));
- });
- var param = 'param';
- translations.push((<div id={i++}>added : {i18n('added')} </div>));
- translations.push((<div id={i++}><font color="red"><b>WRONG</b></font> - added with ${param} in translation : {i18n(`added with ${param}`)} </div>));
- translations.push((<div id={i++}><font color="green"><b>RIGHT</b></font> - added with ${param} and options object {JSON.stringify({param:param})}: {i18n('added with {param}', {param: param})} </div>));
+stories.add('i18n tests', () => {
+ let keys = [
+ 'I do not exist',
+ 'Delete',
+ 'OrchestrationTemplateCandidate/File Structure'
+ ];
+ let translations = [];
+ let i = 0;
+ translations.push(<div id={i++}>KEY: VALUE</div>);
+ keys.forEach(key => {
+ translations.push(
+ <div id={i++}>
+ {key} : {i18n(key)}{' '}
+ </div>
+ );
+ });
+ var param = 'param';
+ translations.push(<div id={i++}>added : {i18n('added')} </div>);
+ translations.push(
+ <div id={i++}>
+ <font color="red">
+ <b>WRONG</b>
+ </font>{' '}
+ - added with ${param} in translation : {i18n(`added with ${param}`)}{' '}
+ </div>
+ );
+ translations.push(
+ <div id={i++}>
+ <font color="green">
+ <b>RIGHT</b>
+ </font>{' '}
+ - added with ${param} and options object{' '}
+ {JSON.stringify({ param: param })}:{' '}
+ {i18n('added with {param}', { param: param })}{' '}
+ </div>
+ );
- return (<div>{translations}</div>);
- })
-;
+ return <div>{translations}</div>;
+});
diff --git a/openecomp-ui/src/nfvo-utils/json/JSONPointer.js b/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
index f4c0d4ed59..66c67dd234 100644
--- a/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
+++ b/openecomp-ui/src/nfvo-utils/json/JSONPointer.js
@@ -14,44 +14,47 @@
* permissions and limitations under the License.
*/
const JSONPointer = {
-
- extractParentPointer(pointer) {
- return pointer.replace(/\/[^\/]+$/, '');
- },
-
- extractLastPart(pointer) {
- const [,lastPart] = pointer.match(/\/([^\/]+)$/) || [];
- return lastPart;
- },
-
- extractParts(pointer = '') {
- return pointer.split('/').slice(1)
- .map(part => part.replace(/~1/g, '/'))
- .map(part => part.replace(/~0/g, '~'));
- },
-
- getValue(object, pointer) {
- let parts = JSONPointer.extractParts(pointer);
- return parts.reduce((object, part) => object && object[part], object);
- },
-
- setValue(object, pointer, value) {
- let clone = obj => Array.isArray(obj) ? [...obj] : {...obj};
-
- let parts = JSONPointer.extractParts(pointer),
- newObject = clone(object),
- subObject = object,
- subNewObject = newObject;
-
- for(let i = 0, n = parts.length - 1; i < n; ++i) {
- let nextSubObject = subObject && subObject[parts[i]];
- subNewObject = subNewObject[parts[i]] = nextSubObject ? clone(nextSubObject) : {};
- subObject = nextSubObject;
- }
- subNewObject[parts[parts.length - 1]] = value;
-
- return newObject;
- }
+ extractParentPointer(pointer) {
+ return pointer.replace(/\/[^\/]+$/, '');
+ },
+
+ extractLastPart(pointer) {
+ const [, lastPart] = pointer.match(/\/([^\/]+)$/) || [];
+ return lastPart;
+ },
+
+ extractParts(pointer = '') {
+ return pointer
+ .split('/')
+ .slice(1)
+ .map(part => part.replace(/~1/g, '/'))
+ .map(part => part.replace(/~0/g, '~'));
+ },
+
+ getValue(object, pointer) {
+ let parts = JSONPointer.extractParts(pointer);
+ return parts.reduce((object, part) => object && object[part], object);
+ },
+
+ setValue(object, pointer, value) {
+ let clone = obj => (Array.isArray(obj) ? [...obj] : { ...obj });
+
+ let parts = JSONPointer.extractParts(pointer),
+ newObject = clone(object),
+ subObject = object,
+ subNewObject = newObject;
+
+ for (let i = 0, n = parts.length - 1; i < n; ++i) {
+ let nextSubObject = subObject && subObject[parts[i]];
+ subNewObject = subNewObject[parts[i]] = nextSubObject
+ ? clone(nextSubObject)
+ : {};
+ subObject = nextSubObject;
+ }
+ subNewObject[parts[parts.length - 1]] = value;
+
+ return newObject;
+ }
};
export default JSONPointer;
diff --git a/openecomp-ui/src/nfvo-utils/json/JSONSchema.js b/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
index 3b3a9bf7b4..53d288f3ae 100644
--- a/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
+++ b/openecomp-ui/src/nfvo-utils/json/JSONSchema.js
@@ -18,235 +18,264 @@ import cloneDeep from 'lodash/cloneDeep.js';
import JSONPointer from './JSONPointer.js';
export default class JSONSchema {
-
- setSchema(schema) {
- this._schema = schema;
- this._fragmentsCache = new Map();
- // this._ajv = new Ajv({
- // useDefaults: true,
- // coerceTypes: true
- // });
- // this._validate = this._ajv.compile(schema);
- }
-
- processData(data) {
- data = cloneDeep(data);
- // this._validate(data);
- return data;
- }
-
- // array of names of validation functions
- setSupportedValidationFunctions(supportedValidationFunctions) {
- this._supportedValidationFunctions = supportedValidationFunctions;
- }
-
- /* FYI - I was going to support "required" but then found out that server never sends it in its schema (it was a business decision. so leaving the code commented for now */
- flattenSchema(supportedValidationFunctions) {
- if (supportedValidationFunctions) { this.setSupportedValidationFunctions(supportedValidationFunctions); }
- let genericFieldInfo = {};
- if (this._schema && this._schema.properties) {
- this.travelProperties(this._schema.properties, genericFieldInfo/*, this._schema.required*/);
- }
- return {genericFieldInfo};
- }
-
- extractGenericFieldInfo(item) {
- let validationsArr = [];
- let additionalInfo = { isValid: true, errorText: ''};
- for (let value in item) {
- if (this._supportedValidationFunctions.includes(value)) {
- let validationItem = this.extractValidations(item, value);
- validationsArr[validationsArr.length] = validationItem;
- } else {
- let enumResult = this.extractEnum(item, value);
- if (enumResult !== null) {
- additionalInfo.enum = enumResult;
- }
- else {
- additionalInfo[value] = item[value];
- }
- /*if (required.includes (property)) {
+ setSchema(schema) {
+ this._schema = schema;
+ this._fragmentsCache = new Map();
+ // this._ajv = new Ajv({
+ // useDefaults: true,
+ // coerceTypes: true
+ // });
+ // this._validate = this._ajv.compile(schema);
+ }
+
+ processData(data) {
+ data = cloneDeep(data);
+ // this._validate(data);
+ return data;
+ }
+
+ // array of names of validation functions
+ setSupportedValidationFunctions(supportedValidationFunctions) {
+ this._supportedValidationFunctions = supportedValidationFunctions;
+ }
+
+ /* FYI - I was going to support "required" but then found out that server never sends it in its schema (it was a business decision. so leaving the code commented for now */
+ flattenSchema(supportedValidationFunctions) {
+ if (supportedValidationFunctions) {
+ this.setSupportedValidationFunctions(supportedValidationFunctions);
+ }
+ let genericFieldInfo = {};
+ if (this._schema && this._schema.properties) {
+ this.travelProperties(
+ this._schema.properties,
+ genericFieldInfo /*, this._schema.required*/
+ );
+ }
+ return { genericFieldInfo };
+ }
+
+ extractGenericFieldInfo(item) {
+ let validationsArr = [];
+ let additionalInfo = { isValid: true, errorText: '' };
+ for (let value in item) {
+ if (this._supportedValidationFunctions.includes(value)) {
+ let validationItem = this.extractValidations(item, value);
+ validationsArr[validationsArr.length] = validationItem;
+ } else {
+ let enumResult = this.extractEnum(item, value);
+ if (enumResult !== null) {
+ additionalInfo.enum = enumResult;
+ } else {
+ additionalInfo[value] = item[value];
+ }
+ /*if (required.includes (property)) {
additionalInfo[value].isRequired = true ;
}*/
- }
- }
-
- additionalInfo.validations = validationsArr;
- return additionalInfo;
- }
-
- extractValidations(item, value) {
- let validationItem;
- let data = item[value];
- if (value === 'maximum') {
- if (item.exclusiveMaximum) {
- value = 'maximumExclusive';
- }
- }
- if (value === 'minimum') {
- if (item.exclusiveMinimum) {
- value = 'minimumExclusive';
- }
- }
- validationItem = {type: value, data: data};
- return validationItem;
- }
-
- extractEnum(item, value) {
- let enumResult = null;
- if (value === 'type' && item[value] === 'array') {
- let items = item.items;
- if (items && items.enum && items.enum.length > 0) {
- let values = items.enum
- .filter(value => value)
- .map(value => ({enum: value, title: value}));
- enumResult = values;
- }
- }
- else if (value === 'enum') {
- let items = item[value];
- if (items && items.length > 0) {
- let values = items
- .filter(value => value)
- .map(value => ({enum: value, title: value}));
- enumResult = values;
- }
- }
- return enumResult;
- }
-
- travelProperties(properties, genericFieldDefs, /*required = [],*/ pointer = ''){
- let newPointer = pointer;
- for (let property in properties) {
- newPointer = newPointer ? newPointer + '/' + property : property;
- if (properties[property].properties) {
- this.travelProperties(properties[property].properties, genericFieldDefs /*, properties[property].required*/, newPointer);
- }
- else if (properties[property].$ref){
- let fragment = this._getSchemaFragmentByRef(properties[property].$ref);
- if (fragment.properties) {
- this.travelProperties(fragment.properties, genericFieldDefs /*, properties[property].required*/, newPointer);
- } else {
- genericFieldDefs[newPointer] = this.extractGenericFieldInfo(fragment.properties);
- }
- }
- else {
- genericFieldDefs[newPointer] = this.extractGenericFieldInfo(properties[property]);
- }
- newPointer = pointer;
- }
- }
-
- getTitle(pointer) {
- return this._getSchemaFragment(pointer).title;
- }
-
- exists(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return !!fragment;
- }
-
- getDefault(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.default;
- }
-
- getEnum(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && (fragment.type === 'array' ? fragment.items.enum : fragment.enum);
- }
-
- isRequired(pointer) {
- const parentPointer = JSONPointer.extractParentPointer(pointer);
- const lastPart = JSONPointer.extractLastPart(pointer);
- let parentFragment = this._getSchemaFragment(parentPointer);
- return parentFragment && parentFragment.required && parentFragment.required.includes(lastPart);
- }
-
- isNumber(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.type === 'number';
- }
-
- getMaxValue(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.exclusiveMaximum ? fragment.maximum - 1 : fragment.maximum;
- }
-
- getMinValue(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.exclusiveMinimum ? fragment.minimum : fragment.minimum;
- }
-
- isString(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.type === 'string';
- }
-
- getPattern(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.pattern;
- }
-
- getMaxLength(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.maxLength;
- }
-
- getMinLength(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.minLength;
- }
-
- isArray(pointer) {
- const fragment = this._getSchemaFragment(pointer);
- return fragment && fragment.type === 'array';
- }
-
- _getSchemaFragment(pointer) {
- if (this._fragmentsCache.has(pointer)) {
- return this._fragmentsCache.get(pointer);
- }
-
- let parts = JSONPointer.extractParts(pointer);
-
- let fragment = parts.reduce((fragment, part) => {
- if (fragment === undefined) {
- return undefined;
- }
-
- if (fragment.$ref) {
- fragment = this._getSchemaFragmentByRef(fragment.$ref);
- }
-
- switch (fragment.type) {
- case 'object':
- return fragment.properties && fragment.properties[part];
-
- case 'array':
- return fragment.enum && fragment.enum[part];
-
- default:
- // throw new Error(`Incorrect/unsupported JSONPointer "${pointer}" from "${part}"`);
- return undefined;
- }
- }, this._schema);
-
- while(fragment && fragment.$ref) {
- fragment = this._getSchemaFragmentByRef(fragment.$ref);
- }
-
- this._fragmentsCache.set(pointer, fragment);
- return fragment;
- }
-
- _getSchemaFragmentByRef($ref) {
- let pointer = $ref.substr(1);
- return JSONPointer.getValue(this._schema, pointer);
- // let fragmentAjv = new Ajv();
- // fragmentAjv.addSchema(this._schema);
- // let compiledFragment = fragmentAjv.compile({$ref});
- // let fragment = compiledFragment.refVal[compiledFragment.refs[$ref]];
- // return fragment;
- }
-};
+ }
+ }
+
+ additionalInfo.validations = validationsArr;
+ return additionalInfo;
+ }
+
+ extractValidations(item, value) {
+ let validationItem;
+ let data = item[value];
+ if (value === 'maximum') {
+ if (item.exclusiveMaximum) {
+ value = 'maximumExclusive';
+ }
+ }
+ if (value === 'minimum') {
+ if (item.exclusiveMinimum) {
+ value = 'minimumExclusive';
+ }
+ }
+ validationItem = { type: value, data: data };
+ return validationItem;
+ }
+
+ extractEnum(item, value) {
+ let enumResult = null;
+ if (value === 'type' && item[value] === 'array') {
+ let items = item.items;
+ if (items && items.enum && items.enum.length > 0) {
+ let values = items.enum
+ .filter(value => value)
+ .map(value => ({ enum: value, title: value }));
+ enumResult = values;
+ }
+ } else if (value === 'enum') {
+ let items = item[value];
+ if (items && items.length > 0) {
+ let values = items
+ .filter(value => value)
+ .map(value => ({ enum: value, title: value }));
+ enumResult = values;
+ }
+ }
+ return enumResult;
+ }
+
+ travelProperties(
+ properties,
+ genericFieldDefs,
+ /*required = [],*/ pointer = ''
+ ) {
+ let newPointer = pointer;
+ for (let property in properties) {
+ newPointer = newPointer ? newPointer + '/' + property : property;
+ if (properties[property].properties) {
+ this.travelProperties(
+ properties[property].properties,
+ genericFieldDefs /*, properties[property].required*/,
+ newPointer
+ );
+ } else if (properties[property].$ref) {
+ let fragment = this._getSchemaFragmentByRef(
+ properties[property].$ref
+ );
+ if (fragment.properties) {
+ this.travelProperties(
+ fragment.properties,
+ genericFieldDefs /*, properties[property].required*/,
+ newPointer
+ );
+ } else {
+ genericFieldDefs[newPointer] = this.extractGenericFieldInfo(
+ fragment.properties
+ );
+ }
+ } else {
+ genericFieldDefs[newPointer] = this.extractGenericFieldInfo(
+ properties[property]
+ );
+ }
+ newPointer = pointer;
+ }
+ }
+
+ getTitle(pointer) {
+ return this._getSchemaFragment(pointer).title;
+ }
+
+ exists(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return !!fragment;
+ }
+
+ getDefault(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.default;
+ }
+
+ getEnum(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return (
+ fragment &&
+ (fragment.type === 'array' ? fragment.items.enum : fragment.enum)
+ );
+ }
+
+ isRequired(pointer) {
+ const parentPointer = JSONPointer.extractParentPointer(pointer);
+ const lastPart = JSONPointer.extractLastPart(pointer);
+ let parentFragment = this._getSchemaFragment(parentPointer);
+ return (
+ parentFragment &&
+ parentFragment.required &&
+ parentFragment.required.includes(lastPart)
+ );
+ }
+
+ isNumber(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.type === 'number';
+ }
+
+ getMaxValue(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.exclusiveMaximum
+ ? fragment.maximum - 1
+ : fragment.maximum;
+ }
+
+ getMinValue(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.exclusiveMinimum
+ ? fragment.minimum
+ : fragment.minimum;
+ }
+
+ isString(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.type === 'string';
+ }
+
+ getPattern(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.pattern;
+ }
+
+ getMaxLength(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.maxLength;
+ }
+
+ getMinLength(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.minLength;
+ }
+
+ isArray(pointer) {
+ const fragment = this._getSchemaFragment(pointer);
+ return fragment && fragment.type === 'array';
+ }
+
+ _getSchemaFragment(pointer) {
+ if (this._fragmentsCache.has(pointer)) {
+ return this._fragmentsCache.get(pointer);
+ }
+
+ let parts = JSONPointer.extractParts(pointer);
+
+ let fragment = parts.reduce((fragment, part) => {
+ if (fragment === undefined) {
+ return undefined;
+ }
+
+ if (fragment.$ref) {
+ fragment = this._getSchemaFragmentByRef(fragment.$ref);
+ }
+
+ switch (fragment.type) {
+ case 'object':
+ return fragment.properties && fragment.properties[part];
+
+ case 'array':
+ return fragment.enum && fragment.enum[part];
+
+ default:
+ // throw new Error(`Incorrect/unsupported JSONPointer "${pointer}" from "${part}"`);
+ return undefined;
+ }
+ }, this._schema);
+
+ while (fragment && fragment.$ref) {
+ fragment = this._getSchemaFragmentByRef(fragment.$ref);
+ }
+
+ this._fragmentsCache.set(pointer, fragment);
+ return fragment;
+ }
+
+ _getSchemaFragmentByRef($ref) {
+ let pointer = $ref.substr(1);
+ return JSONPointer.getValue(this._schema, pointer);
+ // let fragmentAjv = new Ajv();
+ // fragmentAjv.addSchema(this._schema);
+ // let compiledFragment = fragmentAjv.compile({$ref});
+ // let fragment = compiledFragment.refVal[compiledFragment.refs[$ref]];
+ // return fragment;
+ }
+}
diff --git a/openecomp-ui/src/nfvo-utils/sortByStringProperty.js b/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
index b415dd7e07..89e9f4034c 100644
--- a/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
+++ b/openecomp-ui/src/nfvo-utils/sortByStringProperty.js
@@ -14,5 +14,7 @@
* permissions and limitations under the License.
*/
export default function sortByStringProperty(array, property) {
- return [...array].sort((a, b) => a[property].toLowerCase().localeCompare(b[property].toLowerCase()));
+ return [...array].sort((a, b) =>
+ a[property].toLowerCase().localeCompare(b[property].toLowerCase())
+ );
}
diff --git a/openecomp-ui/src/sdc-app/AppStore.js b/openecomp-ui/src/sdc-app/AppStore.js
index bafef7dcd6..bca750a930 100644
--- a/openecomp-ui/src/sdc-app/AppStore.js
+++ b/openecomp-ui/src/sdc-app/AppStore.js
@@ -14,24 +14,27 @@
* limitations under the License.
*/
-import {createStore, applyMiddleware, compose} from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
import Reducers from './Reducers.js';
const thunk = store => next => action =>
- typeof action === 'function' ?
- action(store.dispatch, store.getState) :
- next(action);
-
+ typeof action === 'function'
+ ? action(store.dispatch, store.getState)
+ : next(action);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-export const storeCreator = (initialState) => createStore(Reducers, initialState, composeEnhancers(applyMiddleware(thunk)));
-
+export const storeCreator = initialState =>
+ createStore(
+ Reducers,
+ initialState,
+ composeEnhancers(applyMiddleware(thunk))
+ );
const store = storeCreator();
if (module.hot) {
- module.hot.accept('./Reducers.js', () =>
- store.replaceReducer(require('./Reducers.js').default)
- );
+ module.hot.accept('./Reducers.js', () =>
+ store.replaceReducer(require('./Reducers.js').default)
+ );
}
export default store;
diff --git a/openecomp-ui/src/sdc-app/Application.jsx b/openecomp-ui/src/sdc-app/Application.jsx
index aa81eb384c..abebb6d89a 100644
--- a/openecomp-ui/src/sdc-app/Application.jsx
+++ b/openecomp-ui/src/sdc-app/Application.jsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import {Provider} from 'react-redux';
+import { Provider } from 'react-redux';
import GlobalModal from 'nfvo-components/modal/GlobalModal.js';
import Loader from 'nfvo-components/loader/Loader.jsx';
import WebSocketUtil from 'nfvo-utils/WebSocketUtil.js';
@@ -24,31 +24,32 @@ import store from './AppStore.js';
import FeaturesActionHelper from 'sdc-app/features/FeaturesActionHelper.js';
class Application extends React.Component {
- static propTypes = {
- openSocket: PropTypes.bool
- };
- componentDidMount() {
- const {openSocket = true} = this.props;
- if(openSocket) {
- UserNotificationsActionHelper.notificationsFirstHandling(store.dispatch);
- }
- FeaturesActionHelper.getFeaturesList(store.dispatch);
- }
- componentWillUnmount() {
- WebSocketUtil.close();
- }
- render() {
- return (
- <Provider store={store}>
- <div>
- <GlobalModal/>
- {this.props.children}
- <Loader />
- </div>
- </Provider>
- );
- }
+ static propTypes = {
+ openSocket: PropTypes.bool
+ };
+ componentDidMount() {
+ const { openSocket = true } = this.props;
+ if (openSocket) {
+ UserNotificationsActionHelper.notificationsFirstHandling(
+ store.dispatch
+ );
+ }
+ FeaturesActionHelper.getFeaturesList(store.dispatch);
+ }
+ componentWillUnmount() {
+ WebSocketUtil.close();
+ }
+ render() {
+ return (
+ <Provider store={store}>
+ <div>
+ <GlobalModal />
+ {this.props.children}
+ <Loader />
+ </div>
+ </Provider>
+ );
+ }
}
export default Application;
-
diff --git a/openecomp-ui/src/sdc-app/ModulesOptions.jsx b/openecomp-ui/src/sdc-app/ModulesOptions.jsx
index 28fab80da9..63296b57c9 100644
--- a/openecomp-ui/src/sdc-app/ModulesOptions.jsx
+++ b/openecomp-ui/src/sdc-app/ModulesOptions.jsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
import LicenseModelActionHelper from './onboarding/licenseModel/LicenseModelActionHelper.js';
@@ -27,140 +27,198 @@ import LicenseKeyGroupsListEditor from './onboarding/licenseModel/licenseKeyGrou
import LicenseKeyGroupsActionHelper from './onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
import EntitlementPoolsListEditor from './onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
import EntitlementPoolsActionHelper from './onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
-import SoftwareProductLandingPage from './onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js';
-import SoftwareProductDetails from './onboarding/softwareProduct/details/SoftwareProductDetails.js';
+import SoftwareProductLandingPage from './onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js';
+import SoftwareProductDetails from './onboarding/softwareProduct/details/SoftwareProductDetails.js';
import Onboard from './onboarding/onboard/Onboard.js';
import SoftwareProductActionHelper from './onboarding/softwareProduct/SoftwareProductActionHelper.js';
import FlowsListEditor from './flows/FlowsListEditor.js';
import FlowsActions from './flows/FlowsActions.js';
-
-const mapStateToProps = ({licenseModelList}) => {
- return {licenseModelList};
+const mapStateToProps = ({ licenseModelList }) => {
+ return { licenseModelList };
};
-
const mapActionsToProps = dispatch => {
- return {
- onBootstrapped: () => LicenseModelActionHelper.fetchLicenseModels(dispatch),
- onLicenseAgreementListEditor: licenseModelId => LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId}),
- onFeatureGroupsListEditor: licenseModelId => FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId}),
- onLicenseKeyGroupsListEditor: licenseModelId =>LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId}),
- onEntitlementPoolsListEditor: licenseModelId => EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId}),
- onOnboardingCatalog: () => SoftwareProductActionHelper.fetchSoftwareProductList(dispatch),
- onSoftwareProductDetails: () => SoftwareProductActionHelper.fetchSoftwareProductCategories(dispatch),
- onFlowsListEditor: () => FlowsActions.fetchFlows(dispatch)
- };
+ return {
+ onBootstrapped: () =>
+ LicenseModelActionHelper.fetchLicenseModels(dispatch),
+ onLicenseAgreementListEditor: licenseModelId =>
+ LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+ licenseModelId
+ }),
+ onFeatureGroupsListEditor: licenseModelId =>
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId
+ }),
+ onLicenseKeyGroupsListEditor: licenseModelId =>
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+ licenseModelId
+ }),
+ onEntitlementPoolsListEditor: licenseModelId =>
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+ licenseModelId
+ }),
+ onOnboardingCatalog: () =>
+ SoftwareProductActionHelper.fetchSoftwareProductList(dispatch),
+ onSoftwareProductDetails: () =>
+ SoftwareProductActionHelper.fetchSoftwareProductCategories(
+ dispatch
+ ),
+ onFlowsListEditor: () => FlowsActions.fetchFlows(dispatch)
+ };
};
class ModuleOptions extends React.Component {
+ static propTypes = {
+ onBootstrapped: PropTypes.func.isRequired,
+ onLicenseAgreementListEditor: PropTypes.func.isRequired,
+ onFeatureGroupsListEditor: PropTypes.func.isRequired,
+ onLicenseKeyGroupsListEditor: PropTypes.func.isRequired,
+ onEntitlementPoolsListEditor: PropTypes.func.isRequired,
+ onOnboardingCatalog: PropTypes.func.isRequired,
+ onSoftwareProductDetails: PropTypes.func.isRequired
+ };
- static propTypes = {
- onBootstrapped: PropTypes.func.isRequired,
- onLicenseAgreementListEditor: PropTypes.func.isRequired,
- onFeatureGroupsListEditor: PropTypes.func.isRequired,
- onLicenseKeyGroupsListEditor: PropTypes.func.isRequired,
- onEntitlementPoolsListEditor: PropTypes.func.isRequired,
- onOnboardingCatalog: PropTypes.func.isRequired,
- onSoftwareProductDetails: PropTypes.func.isRequired,
- };
-
- state = {
- currentModule: localStorage.getItem('default-module'),
- licenseModelId: localStorage.getItem('default-license-model-id')
- };
+ state = {
+ currentModule: localStorage.getItem('default-module'),
+ licenseModelId: localStorage.getItem('default-license-model-id')
+ };
- componentDidMount() {
- this.props.onBootstrapped();
- }
+ componentDidMount() {
+ this.props.onBootstrapped();
+ }
- render() {
- let {currentModule, licenseModelId} = this.state;
- let {licenseModelList} = this.props;
- return (
- <div style={{marginTop:20}}>
- <Input
- name='licenseModel'
- value={licenseModelId}
- ref='licenseModelId'
- type='select'
- onChange={this.handleLicenseModelIdChange}
- className='inner-pagination select-input'>
- <option value='' key={null}>Select License Model</option>
- {
- licenseModelList.map(({id, vendorName}) => <option value={id} key={id}>{`${vendorName} License Model`}</option>)
- }
- </Input>
- <Input
- name='currentView'
- value={currentModule}
- ref='selectedModule'
- type='select'
- onChange={this.handleModuleSelection}
- className='inner-pagination select-input'>
- <option value=''>Select Module</option>
- <option value='EntitlementPoolsListEditor'>Entitlement Pools</option>
- <option value='LicenseAgreementListEditor'>License Agreements</option>
- <option value='FutureGroupListEditor'>Feature Groups</option>
- <option value='LicenseKeyGroupsListEditor'>License Key Groups</option>
- <option value='SoftwareProductLanding'>Software Product Landing</option>
- <option value='SoftwareProductDetails'>Software Product Details</option>
- <option value='OnboardingCatalog'>Onboarding Catalog</option>
- <option value='Flows'>Flows</option>
- </Input>
- <div className='sub-module-view' style={{paddingTop: 10, margin: 4, borderTop: '1px solid silver'}}>
- {this.renderModule(currentModule)}
- </div>
- </div>
- );
- }
+ render() {
+ let { currentModule, licenseModelId } = this.state;
+ let { licenseModelList } = this.props;
+ return (
+ <div style={{ marginTop: 20 }}>
+ <Input
+ name="licenseModel"
+ value={licenseModelId}
+ ref="licenseModelId"
+ type="select"
+ onChange={this.handleLicenseModelIdChange}
+ className="inner-pagination select-input">
+ <option value="" key={null}>
+ Select License Model
+ </option>
+ {licenseModelList.map(({ id, vendorName }) => (
+ <option
+ value={id}
+ key={id}>{`${vendorName} License Model`}</option>
+ ))}
+ </Input>
+ <Input
+ name="currentView"
+ value={currentModule}
+ ref="selectedModule"
+ type="select"
+ onChange={this.handleModuleSelection}
+ className="inner-pagination select-input">
+ <option value="">Select Module</option>
+ <option value="EntitlementPoolsListEditor">
+ Entitlement Pools
+ </option>
+ <option value="LicenseAgreementListEditor">
+ License Agreements
+ </option>
+ <option value="FutureGroupListEditor">
+ Feature Groups
+ </option>
+ <option value="LicenseKeyGroupsListEditor">
+ License Key Groups
+ </option>
+ <option value="SoftwareProductLanding">
+ Software Product Landing
+ </option>
+ <option value="SoftwareProductDetails">
+ Software Product Details
+ </option>
+ <option value="OnboardingCatalog">
+ Onboarding Catalog
+ </option>
+ <option value="Flows">Flows</option>
+ </Input>
+ <div
+ className="sub-module-view"
+ style={{
+ paddingTop: 10,
+ margin: 4,
+ borderTop: '1px solid silver'
+ }}>
+ {this.renderModule(currentModule)}
+ </div>
+ </div>
+ );
+ }
- renderModule(currentModule) {
- const {licenseModelId} = this.state;
- if (!licenseModelId) {
- return;
- }
+ renderModule(currentModule) {
+ const { licenseModelId } = this.state;
+ if (!licenseModelId) {
+ return;
+ }
- switch (currentModule) {
- case 'LicenseAgreementListEditor':
- this.props.onLicenseAgreementListEditor(licenseModelId);
- return <LicenseAgreementListEditor licenseModelId={licenseModelId}/>;
- case 'FutureGroupListEditor':
- this.props.onFeatureGroupsListEditor(licenseModelId);
- return <FeatureGroupListEditor licenseModelId={licenseModelId}/>;
- case 'EntitlementPoolsListEditor':
- this.props.onEntitlementPoolsListEditor(licenseModelId);
- return <EntitlementPoolsListEditor licenseModelId={licenseModelId}/>;
- case 'LicenseKeyGroupsListEditor':
- this.props.onLicenseKeyGroupsListEditor(licenseModelId);
- return <LicenseKeyGroupsListEditor licenseModelId={licenseModelId}/>;
- case 'SoftwareProductLanding':
- return <SoftwareProductLandingPage licenseModelId={licenseModelId}/>;
- case 'SoftwareProductDetails':
- this.props.onSoftwareProductDetails(licenseModelId);
- return <SoftwareProductDetails licenseModelId={licenseModelId}/>;
- case 'OnboardingCatalog':
- this.props.onOnboardingCatalog();
- return <Onboard/>;
- case 'Flows':
- this.props.onFlowsListEditor();
- return <FlowsListEditor/>;
- default:
- return;
- }
- }
+ switch (currentModule) {
+ case 'LicenseAgreementListEditor':
+ this.props.onLicenseAgreementListEditor(licenseModelId);
+ return (
+ <LicenseAgreementListEditor
+ licenseModelId={licenseModelId}
+ />
+ );
+ case 'FutureGroupListEditor':
+ this.props.onFeatureGroupsListEditor(licenseModelId);
+ return (
+ <FeatureGroupListEditor licenseModelId={licenseModelId} />
+ );
+ case 'EntitlementPoolsListEditor':
+ this.props.onEntitlementPoolsListEditor(licenseModelId);
+ return (
+ <EntitlementPoolsListEditor
+ licenseModelId={licenseModelId}
+ />
+ );
+ case 'LicenseKeyGroupsListEditor':
+ this.props.onLicenseKeyGroupsListEditor(licenseModelId);
+ return (
+ <LicenseKeyGroupsListEditor
+ licenseModelId={licenseModelId}
+ />
+ );
+ case 'SoftwareProductLanding':
+ return (
+ <SoftwareProductLandingPage
+ licenseModelId={licenseModelId}
+ />
+ );
+ case 'SoftwareProductDetails':
+ this.props.onSoftwareProductDetails(licenseModelId);
+ return (
+ <SoftwareProductDetails licenseModelId={licenseModelId} />
+ );
+ case 'OnboardingCatalog':
+ this.props.onOnboardingCatalog();
+ return <Onboard />;
+ case 'Flows':
+ this.props.onFlowsListEditor();
+ return <FlowsListEditor />;
+ default:
+ return;
+ }
+ }
- handleModuleSelection = () => {
- let selectedModule = this.refs.selectedModule.getValue();
- localStorage.setItem('default-module', selectedModule);
- this.setState({currentModule: selectedModule});
- }
+ handleModuleSelection = () => {
+ let selectedModule = this.refs.selectedModule.getValue();
+ localStorage.setItem('default-module', selectedModule);
+ this.setState({ currentModule: selectedModule });
+ };
- handleLicenseModelIdChange = () => {
- let licenseModelId = this.refs.licenseModelId.getValue();
- localStorage.setItem('default-license-model-id', licenseModelId);
- this.setState({licenseModelId});
- }
+ handleLicenseModelIdChange = () => {
+ let licenseModelId = this.refs.licenseModelId.getValue();
+ localStorage.setItem('default-license-model-id', licenseModelId);
+ this.setState({ licenseModelId });
+ };
}
export default connect(mapStateToProps, mapActionsToProps)(ModuleOptions);
diff --git a/openecomp-ui/src/sdc-app/Reducers.js b/openecomp-ui/src/sdc-app/Reducers.js
index a0a8ebafa1..9f424235cb 100644
--- a/openecomp-ui/src/sdc-app/Reducers.js
+++ b/openecomp-ui/src/sdc-app/Reducers.js
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
import onBoardingReducersMap from './onboarding/OnboardingReducersMap.js';
import flowsReducersMap from './flows/FlowsReducersMap.js';
import loaderReducer from 'nfvo-components/loader/LoaderReducer.js';
@@ -22,12 +22,12 @@ import globalModalReducer from 'nfvo-components/modal/GlobalModalReducer.js';
import notificationsReducer from 'sdc-app/onboarding/userNotifications/NotificationsReducer.js';
export default combineReducers({
- // on-boarding reducers
- ...onBoardingReducersMap,
+ // on-boarding reducers
+ ...onBoardingReducersMap,
- // flows reducers
- ...flowsReducersMap,
- modal: globalModalReducer,
- loader: loaderReducer,
- notifications: notificationsReducer
+ // flows reducers
+ ...flowsReducersMap,
+ modal: globalModalReducer,
+ loader: loaderReducer,
+ notifications: notificationsReducer
});
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
index a1ad437f5b..2978cacda4 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLog.js
@@ -13,16 +13,28 @@
* 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 ActivityLogView from './ActivityLogView.jsx';
-export const mapStateToProps = ({users: {usersList}, licenseModel: {activityLog}}) => {
-
- let activities = activityLog;
- return {
- activities: activities.map(activity => ({...activity, user: {id: activity.user, name: usersList.find(userObject => userObject.userId === activity.user).fullName}})),
- usersList
- };
+export const mapStateToProps = ({
+ users: { usersList },
+ licenseModel: { activityLog }
+}) => {
+ let activities = activityLog;
+ return {
+ activities: activities.map(activity => ({
+ ...activity,
+ user: {
+ id: activity.user,
+ name: usersList.find(
+ userObject => userObject.userId === activity.user
+ ).fullName
+ }
+ })),
+ usersList
+ };
};
-export default connect(mapStateToProps, undefined, null, {withRef: true})(ActivityLogView);
+export default connect(mapStateToProps, undefined, null, { withRef: true })(
+ ActivityLogView
+);
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
index 729d8fb5f3..6856b08c8b 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogActionHelper.js
@@ -17,8 +17,13 @@ import ActivityLogConstants from './ActivityLogConstants.js';
import ItemHelper from 'sdc-app/common/helpers/ItemsHelper.js';
export default {
-
- fetchActivityLog(dispatch, {itemId, versionId}){
- return ItemHelper.fetchActivityLog({itemId, versionId}).then(response => dispatch({type: ActivityLogConstants.ACTIVITY_LOG_UPDATED, response}));
- }
+ fetchActivityLog(dispatch, { itemId, versionId }) {
+ return ItemHelper.fetchActivityLog({ itemId, versionId }).then(
+ response =>
+ dispatch({
+ type: ActivityLogConstants.ACTIVITY_LOG_UPDATED,
+ response
+ })
+ );
+ }
};
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
index 69faf7cbb6..2da3c7799e 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogConstants.js
@@ -16,8 +16,5 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export default keyMirror({
-
- ACTIVITY_LOG_UPDATED: null
-
+ ACTIVITY_LOG_UPDATED: null
});
-
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
index fc3dfa1515..418a9b9e3d 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogReducer.js
@@ -16,10 +16,10 @@
import ActivityLogConstants from './ActivityLogConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case ActivityLogConstants.ACTIVITY_LOG_UPDATED:
- return [...action.response.results];
- }
+ switch (action.type) {
+ case ActivityLogConstants.ACTIVITY_LOG_UPDATED:
+ return [...action.response.results];
+ }
- return state;
+ return state;
};
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx
index 5b8c29b719..d65e667163 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx
+++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx
@@ -13,7 +13,7 @@
* or implied. 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 OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
@@ -21,108 +21,177 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import LogDetails from './LogixUtil.jsx';
-function ActivityLogSortableCellHeader({isHeader, data, isDes, onSort}) {
- //TODO check icon sdc-ui
- if (isHeader) {
- return (
- <span className='date-header' onClick={onSort}>
- <span>{data}</span>
- <span className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}></span>
- </span>
- );
- }
- return (
- <span className='date-cell'>
- <span>{i18n.dateNormal(data, {
- year: 'numeric', month: 'numeric', day: 'numeric'
- })}</span>
- <span>{i18n.dateNormal(data, {
- hour: 'numeric', minute: 'numeric',
- hour12: true
- })}</span>
- </span>
- );
+function ActivityLogSortableCellHeader({ isHeader, data, isDes, onSort }) {
+ //TODO check icon sdc-ui
+ if (isHeader) {
+ return (
+ <span className="date-header" onClick={onSort}>
+ <span>{data}</span>
+ <span
+ className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}
+ />
+ </span>
+ );
+ }
+ return (
+ <span className="date-cell">
+ <span>
+ {i18n.dateNormal(data, {
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric'
+ })}
+ </span>
+ <span>
+ {i18n.dateNormal(data, {
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: true
+ })}
+ </span>
+ </span>
+ );
}
-function ActivityLogStatus({status, isHeader}) {
- if (isHeader) {
- return <span>{status}</span>;
- }
- let {message, success} = status;
- return (
- <span>
- <span className={`status-icon ${success}`}>{`${success ? i18n('Success') : i18n('Failure')}`}</span>
- {success && <SVGIcon name='checkCircle' color='positive'/>}
- {!success && <OverlayTrigger placement='bottom' overlay={<Tooltip className='activity-log-message-tooltip' id={'activity-log-message-tooltip'}>
- <div className='message-block'>{message}</div>
- </Tooltip>}>
- <span className='message-further-info-icon'>{'?'}</span>
- </OverlayTrigger>}
- </span>
- );
+function ActivityLogStatus({ status, isHeader }) {
+ if (isHeader) {
+ return <span>{status}</span>;
+ }
+ let { message, success } = status;
+ return (
+ <span>
+ <span className={`status-icon ${success}`}>{`${
+ success ? i18n('Success') : i18n('Failure')
+ }`}</span>
+ {success && <SVGIcon name="checkCircle" color="positive" />}
+ {!success && (
+ <OverlayTrigger
+ placement="bottom"
+ overlay={
+ <Tooltip
+ className="activity-log-message-tooltip"
+ id={'activity-log-message-tooltip'}>
+ <div className="message-block">{message}</div>
+ </Tooltip>
+ }>
+ <span className="message-further-info-icon">{'?'}</span>
+ </OverlayTrigger>
+ )}
+ </span>
+ );
}
-export function ActivityListItem({activity, isHeader, isDes, onSort}) {
- let {type, timestamp, comment, user, status} = activity;
- return (
- <li className={`activity-list-item ${isHeader ? 'header' : ''}`} data-test-id='activity-list-item'>
- <div className='table-cell activity-date' data-test-id='activity-date'><ActivityLogSortableCellHeader isHeader={isHeader} data={timestamp} isDes={isDes} onSort={onSort}/></div>
- <div className='table-cell activity-action' data-test-id='activity-action'>{i18n(type)}</div>
- <div className='table-cell activity-comment' title={isHeader ? '' : comment} data-test-id='activity-comment'><span>{i18n(comment)}</span></div>
- <div className='table-cell activity-username' data-test-id='activity-username'>{isHeader ? i18n(activity.user) : `${i18n(user.name)} (${user.id})`}</div>
- <div className='table-cell activity-status' data-test-id='activity-status'><ActivityLogStatus isHeader={isHeader} status={status}/></div>
- </li>
- );
+export function ActivityListItem({ activity, isHeader, isDes, onSort }) {
+ let { type, timestamp, comment, user, status } = activity;
+ return (
+ <li
+ className={`activity-list-item ${isHeader ? 'header' : ''}`}
+ data-test-id="activity-list-item">
+ <div
+ className="table-cell activity-date"
+ data-test-id="activity-date">
+ <ActivityLogSortableCellHeader
+ isHeader={isHeader}
+ data={timestamp}
+ isDes={isDes}
+ onSort={onSort}
+ />
+ </div>
+ <div
+ className="table-cell activity-action"
+ data-test-id="activity-action">
+ {i18n(type)}
+ </div>
+ <div
+ className="table-cell activity-comment"
+ title={isHeader ? '' : comment}
+ data-test-id="activity-comment">
+ <span>{i18n(comment)}</span>
+ </div>
+ <div
+ className="table-cell activity-username"
+ data-test-id="activity-username">
+ {isHeader
+ ? i18n(activity.user)
+ : `${i18n(user.name)} (${user.id})`}
+ </div>
+ <div
+ className="table-cell activity-status"
+ data-test-id="activity-status">
+ <ActivityLogStatus isHeader={isHeader} status={status} />
+ </div>
+ </li>
+ );
}
class ActivityLogView extends Component {
+ state = {
+ localFilter: '',
+ sortDescending: true
+ };
- state = {
- localFilter: '',
- sortDescending: true
- };
+ render() {
+ return (
+ <div className="activity-log-view">
+ <LogDetails display={this.state.localFilter} />
+ <ListEditorView
+ title={i18n('Activity Log')}
+ filterValue={this.state.localFilter}
+ onFilter={filter => this.setState({ localFilter: filter })}>
+ <ActivityListItem
+ activity={{
+ timestamp: 'Date',
+ type: 'Action',
+ comment: 'Comment',
+ user: 'Username',
+ status: 'Status'
+ }}
+ isDes={this.state.sortDescending}
+ onSort={() =>
+ this.setState({
+ sortDescending: !this.state.sortDescending
+ })
+ }
+ isHeader
+ />
+ {this.sortActivities(
+ this.filterActivities(),
+ this.state.sortDescending
+ ).map(activity => (
+ <ActivityListItem
+ key={activity.id}
+ activity={activity}
+ />
+ ))}
+ </ListEditorView>
+ </div>
+ );
+ }
- render() {
- return (
- <div className='activity-log-view'>
- <LogDetails display={this.state.localFilter}/>
- <ListEditorView
- title={i18n('Activity Log')}
- filterValue={this.state.localFilter}
- onFilter={filter => this.setState({localFilter: filter})}>
- <ActivityListItem
- activity={{timestamp: 'Date', type: 'Action', comment: 'Comment', user: 'Username', status: 'Status'}}
- isDes={this.state.sortDescending}
- onSort={() => this.setState({sortDescending: !this.state.sortDescending})}
- isHeader/>
- {this.sortActivities(this.filterActivities(), this.state.sortDescending).map(activity => <ActivityListItem key={activity.id} activity={activity}/>)}
- </ListEditorView>
- </div>
- );
- }
-
- filterActivities() {
- let {activities} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return activities.filter(({user = {id: '', name: ''}, comment = '', type = ''}) =>
- escape(user.id).match(filter) || escape(user.name).match(filter) || escape(comment).match(filter) || escape(type).match(filter));
- }
- else {
- return activities;
- }
- }
-
- sortActivities(activities) {
- if (this.state.sortDescending) {
- return activities.sort((a, b) => a.timestamp - b.timestamp);
- }
- else {
- return activities.reverse();
- }
- }
+ filterActivities() {
+ let { activities } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return activities.filter(
+ ({ user = { id: '', name: '' }, comment = '', type = '' }) =>
+ escape(user.id).match(filter) ||
+ escape(user.name).match(filter) ||
+ escape(comment).match(filter) ||
+ escape(type).match(filter)
+ );
+ } else {
+ return activities;
+ }
+ }
+ sortActivities(activities) {
+ if (this.state.sortDescending) {
+ return activities.sort((a, b) => a.timestamp - b.timestamp);
+ } else {
+ return activities.reverse();
+ }
+ }
}
export default ActivityLogView;
diff --git a/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx b/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
index bd40e113e9..0dbf518768 100644
--- a/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
+++ b/openecomp-ui/src/sdc-app/common/activity-log/LogixUtil.jsx
@@ -1,28 +1,36 @@
-import React, {Component} from 'react';
-// eslint-disable-next-line max-len
-const style = 'LnJhYmJpdHt3aWR0aDo1ZW07aGVpZ2h0OjNlbTtiYWNrZ3JvdW5kOiM5OTk7Ym9yZGVyLXJhZGl1czo3MCUgOTAlIDYwJSA1MCU7cG9zaXRpb246cmVsYXRpdmU7LW1vei10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy1tcy10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoLTJlbSwwKTt0cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApO2FuaW1hdGlvbjpob3AgMXMgaW5maW5pdGUgbGluZWFyO3otaW5kZXg6MX0ucmFiYml0OmFmdGVyLC5yYWJiaXQ6YmVmb3Jle2NvbnRlbnQ6IiI7cG9zaXRpb246YWJzb2x1dGU7YmFja2dyb3VuZDojZjFmMWYxfS5uby1mbGV4Ym94IC5yYWJiaXR7bWFyZ2luOjEwZW0gYXV0byAwfS5yYWJiaXQ6YmVmb3Jle3dpZHRoOjFlbTtoZWlnaHQ6MWVtO2JvcmRlci1yYWRpdXM6MTAwJTt0b3A6LjVlbTtsZWZ0Oi0uM2VtO2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDFlbSAwICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uNGVtICNmMWYxZjE7YW5pbWF0aW9uOmtpY2sgMXMgaW5maW5pdGUgbGluZWFyfS5yYWJiaXQ6YWZ0ZXJ7d2lkdGg6Ljc1ZW07aGVpZ2h0OjJlbTtib3JkZXItcmFkaXVzOjUwJSAxMDAlIDAgMDstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpO3RyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTtyaWdodDoxZW07dG9wOi0xZW07Ym9yZGVyLXRvcDoxcHggc29saWQgI2Y3ZjVmNDtib3JkZXItbGVmdDoxcHggc29saWQgI2Y3ZjVmNDtib3gtc2hhZG93Oi0uNWVtIDAgMCAtLjFlbSAjZjFmMWYxfUBrZXlmcmFtZXMgaG9wezIwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pOy1tcy10cmFuc2Zvcm06cm90YXRlKC0xMGRlZykgdHJhbnNsYXRlKDFlbSwtMmVtKTstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pO3RyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pfTQwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LW1zLXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDEwZGVnKSB0cmFuc2xhdGUoM2VtLC00ZW0pO3RyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSl9NjAlLDc1JXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApO3RyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKX19QGtleWZyYW1lcyBraWNrezIwJSw1MCV7Ym94LXNoYWRvdzo0ZW0gLjRlbSAwIC0uMzVlbSAjM2YzMzM0LC41ZW0gMS41ZW0gMCAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjllbSAwIC0uNGVtICNmMWYxZjF9NDAle2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDJlbSAwICNmMWYxZjEsNGVtIDEuNzVlbSAwIC0uM2VtICNmMWYxZjEsNC4yZW0gMS43NWVtIDAgLS4yZW0gI2YxZjFmMSw0LjRlbSAxLjllbSAwIC0uMmVtICNmMWYxZjF9fQ==';
+import React, { Component } from 'react'; /* eslint-disable max-len */
+const style =
+ 'LnJhYmJpdHt3aWR0aDo1ZW07aGVpZ2h0OjNlbTtiYWNrZ3JvdW5kOiM5OTk7Ym9yZGVyLXJhZGl1czo3MCUgOTAlIDYwJSA1MCU7cG9zaXRpb246cmVsYXRpdmU7LW1vei10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy1tcy10cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoLTJlbSwwKTt0cmFuc2Zvcm06cm90YXRlKDApIHRyYW5zbGF0ZSgtMmVtLDApO2FuaW1hdGlvbjpob3AgMXMgaW5maW5pdGUgbGluZWFyO3otaW5kZXg6MX0ucmFiYml0OmFmdGVyLC5yYWJiaXQ6YmVmb3Jle2NvbnRlbnQ6IiI7cG9zaXRpb246YWJzb2x1dGU7YmFja2dyb3VuZDojZjFmMWYxfS5uby1mbGV4Ym94IC5yYWJiaXR7bWFyZ2luOjEwZW0gYXV0byAwfS5yYWJiaXQ6YmVmb3Jle3dpZHRoOjFlbTtoZWlnaHQ6MWVtO2JvcmRlci1yYWRpdXM6MTAwJTt0b3A6LjVlbTtsZWZ0Oi0uM2VtO2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDFlbSAwICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uM2VtICNmMWYxZjEsNGVtIDFlbSAwIC0uNGVtICNmMWYxZjE7YW5pbWF0aW9uOmtpY2sgMXMgaW5maW5pdGUgbGluZWFyfS5yYWJiaXQ6YWZ0ZXJ7d2lkdGg6Ljc1ZW07aGVpZ2h0OjJlbTtib3JkZXItcmFkaXVzOjUwJSAxMDAlIDAgMDstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgtMzBkZWcpO3RyYW5zZm9ybTpyb3RhdGUoLTMwZGVnKTtyaWdodDoxZW07dG9wOi0xZW07Ym9yZGVyLXRvcDoxcHggc29saWQgI2Y3ZjVmNDtib3JkZXItbGVmdDoxcHggc29saWQgI2Y3ZjVmNDtib3gtc2hhZG93Oi0uNWVtIDAgMCAtLjFlbSAjZjFmMWYxfUBrZXlmcmFtZXMgaG9wezIwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pOy1tcy10cmFuc2Zvcm06cm90YXRlKC0xMGRlZykgdHJhbnNsYXRlKDFlbSwtMmVtKTstd2Via2l0LXRyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pO3RyYW5zZm9ybTpyb3RhdGUoLTEwZGVnKSB0cmFuc2xhdGUoMWVtLC0yZW0pfTQwJXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LW1zLXRyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSk7LXdlYmtpdC10cmFuc2Zvcm06cm90YXRlKDEwZGVnKSB0cmFuc2xhdGUoM2VtLC00ZW0pO3RyYW5zZm9ybTpyb3RhdGUoMTBkZWcpIHRyYW5zbGF0ZSgzZW0sLTRlbSl9NjAlLDc1JXstbW96LXRyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKTstbXMtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApOy13ZWJraXQtdHJhbnNmb3JtOnJvdGF0ZSgwKSB0cmFuc2xhdGUoNGVtLDApO3RyYW5zZm9ybTpyb3RhdGUoMCkgdHJhbnNsYXRlKDRlbSwwKX19QGtleWZyYW1lcyBraWNrezIwJSw1MCV7Ym94LXNoYWRvdzo0ZW0gLjRlbSAwIC0uMzVlbSAjM2YzMzM0LC41ZW0gMS41ZW0gMCAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjc1ZW0gMCAtLjNlbSAjZjFmMWYxLDRlbSAxLjllbSAwIC0uNGVtICNmMWYxZjF9NDAle2JveC1zaGFkb3c6NGVtIC40ZW0gMCAtLjM1ZW0gIzNmMzMzNCwuNWVtIDJlbSAwICNmMWYxZjEsNGVtIDEuNzVlbSAwIC0uM2VtICNmMWYxZjEsNC4yZW0gMS43NWVtIDAgLS4yZW0gI2YxZjFmMSw0LjRlbSAxLjllbSAwIC0uMmVtICNmMWYxZjF9fQ==';
+/* eslint-enable max-len */
class LogixUtil extends Component {
+ state = {
+ whatToDisplay: false
+ };
- state = {
- whatToDisplay: false
- };
-
- componentWillReceiveProps(nextProps) {
- this.setState({whatToDisplay: window.btoa(nextProps.display) === 'YnJpdG5leSBiaXRjaCE='});
- }
-
- render() {
- if (this.state.whatToDisplay) {
- setTimeout(() => this.setState({whatToDisplay: false}), 5000);
- }
- return (
- <div style={{display: this.state.whatToDisplay ? 'block' : 'none', position: 'fixed',top: '50%', left: '45%'}}>
- <style>{window.atob(style)}</style>
- <div className='rabbit'></div>
- </div>
- );
- }
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ whatToDisplay:
+ window.btoa(nextProps.display) === 'YnJpdG5leSBiaXRjaCE='
+ });
+ }
+ render() {
+ if (this.state.whatToDisplay) {
+ setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+ }
+ return (
+ <div
+ style={{
+ display: this.state.whatToDisplay ? 'block' : 'none',
+ position: 'fixed',
+ top: '50%',
+ left: '45%'
+ }}>
+ <style>{window.atob(style)}</style>
+ <div className="rabbit" />
+ </div>
+ );
+ }
}
export default LogixUtil;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
index 05affe981f..99ecae9887 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ItemsHelper.js
@@ -15,92 +15,110 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {permissionTypes} from 'sdc-app/onboarding/permissions/PermissionsConstants.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as onboardingActionTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { permissionTypes } from 'sdc-app/onboarding/permissions/PermissionsConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as onboardingActionTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import restToggle from 'sdc-app/features/restToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
export const archiveActions = {
- ARCHIVE: 'ARCHIVE',
- RESTORE: 'RESTORE'
+ ARCHIVE: 'ARCHIVE',
+ RESTORE: 'RESTORE'
};
export const itemStatus = {
- ARCHIVED: 'ARCHIVED',
- DRAFT: 'Draft',
- CERTIFIED: 'Certified'
+ ARCHIVED: 'ARCHIVED',
+ DRAFT: 'Draft',
+ CERTIFIED: 'Certified'
};
-
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/items`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/items`;
}
const ItemsHelper = {
- performVCAction({itemId, version, action, comment}) {
- const {id: versionId} = version;
- const data = {
- action,
- ...action === VersionControllerActionsEnum.COMMIT && {commitRequest: {message: comment}}
- };
- return RestAPIUtil.put(`${baseUrl()}/${itemId}/versions/${versionId}/actions`, data);
- },
+ performVCAction({ itemId, version, action, comment }) {
+ const { id: versionId } = version;
+ const data = {
+ action,
+ ...(action === VersionControllerActionsEnum.COMMIT && {
+ commitRequest: { message: comment }
+ })
+ };
+ return RestAPIUtil.put(
+ `${baseUrl()}/${itemId}/versions/${versionId}/actions`,
+ data
+ );
+ },
- fetchVersions({itemId}) {
- return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions`);
- },
+ fetchVersions({ itemId }) {
+ return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions`);
+ },
- fetchVersion({itemId, versionId}) {
- return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions/${versionId}`);
- },
+ fetchVersion({ itemId, versionId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl()}/${itemId}/versions/${versionId}`
+ );
+ },
- fetchActivityLog({itemId, versionId}) {
- return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/versions/${versionId}/activity-logs`);
- },
+ fetchActivityLog({ itemId, versionId }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl()}/${itemId}/versions/${versionId}/activity-logs`
+ );
+ },
- fetchUsers({itemId}) {
- return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/permissions`);
- },
+ fetchUsers({ itemId }) {
+ return RestAPIUtil.fetch(`${baseUrl()}/${itemId}/permissions`);
+ },
- updateContributors({itemId, removedUsersIds, addedUsersIds}) {
- return RestAPIUtil.put(`${baseUrl()}/${itemId}/permissions/${permissionTypes.CONTRIBUTOR}`, {removedUsersIds, addedUsersIds});
- },
+ updateContributors({ itemId, removedUsersIds, addedUsersIds }) {
+ return RestAPIUtil.put(
+ `${baseUrl()}/${itemId}/permissions/${permissionTypes.CONTRIBUTOR}`,
+ { removedUsersIds, addedUsersIds }
+ );
+ },
- changeOwner({itemId, ownerId}) {
- return RestAPIUtil.put(`${baseUrl()}/${itemId}/permissions/${permissionTypes.OWNER}`, {removedUsersIds: [], addedUsersIds: [ownerId]});
- },
+ changeOwner({ itemId, ownerId }) {
+ return RestAPIUtil.put(
+ `${baseUrl()}/${itemId}/permissions/${permissionTypes.OWNER}`,
+ { removedUsersIds: [], addedUsersIds: [ownerId] }
+ );
+ },
- async checkItemStatus(dispatch, {itemId, versionId}) {
- const response = await ItemsHelper.fetchVersion({itemId, versionId});
- let state = response && response.state || {};
- const {baseId, description, id, name, status} = response;
- const item = await ItemsHelper.fetchItem(itemId);
- dispatch({
- type: onboardingActionTypes.UPDATE_ITEM_STATUS,
- itemState: state,
- itemStatus: response.status,
- archivedStatus: item.status,
- updatedVersion: {baseId, description, id, name, status}
- });
+ async checkItemStatus(dispatch, { itemId, versionId }) {
+ const response = await ItemsHelper.fetchVersion({ itemId, versionId });
+ let state = (response && response.state) || {};
+ const { baseId, description, id, name, status } = response;
+ const item = await ItemsHelper.fetchItem(itemId);
+ dispatch({
+ type: onboardingActionTypes.UPDATE_ITEM_STATUS,
+ itemState: state,
+ itemStatus: response.status,
+ archivedStatus: item.status,
+ updatedVersion: { baseId, description, id, name, status }
+ });
- return Promise.resolve({...response, archivedStatus: item.status});
- },
+ return Promise.resolve({ ...response, archivedStatus: item.status });
+ },
- fetchItem(itemId) {
- return restToggle({restFunction: () => RestAPIUtil.fetch(`${baseUrl()}/${itemId}`), featureName: featureToggleNames.ARCHIVE_ITEM, mockResult: {}});
- },
+ fetchItem(itemId) {
+ return restToggle({
+ restFunction: () => RestAPIUtil.fetch(`${baseUrl()}/${itemId}`),
+ featureName: featureToggleNames.ARCHIVE_ITEM,
+ mockResult: {}
+ });
+ },
- archiveItem(itemId) {
- return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
- action: archiveActions.ARCHIVE
- });
- },
- restoreItem(itemId) {
- return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
- action: archiveActions.RESTORE
- });
- }
+ archiveItem(itemId) {
+ return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
+ action: archiveActions.ARCHIVE
+ });
+ },
+ restoreItem(itemId) {
+ return RestAPIUtil.put(`${baseUrl()}/${itemId}/actions`, {
+ action: archiveActions.RESTORE
+ });
+ }
};
export default ItemsHelper;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
index 7c05f8456b..6f69cd0e51 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ScreensHelper.js
@@ -1,225 +1,356 @@
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-import {actionTypes as SoftwareProductActionTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes as SoftwareProductActionTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
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';
const ScreensHelper = {
- async loadScreen(dispatch, {screen, screenType, props}) {
- if(screen === enums.SCREEN.ONBOARDING_CATALOG) {
- OnboardingActionHelper.navigateToOnboardingCatalog(dispatch);
- return;
- }
-
- screenType = !screenType ? this.getScreenType(screen) : screenType;
+ async loadScreen(dispatch, { screen, screenType, props }) {
+ if (screen === enums.SCREEN.ONBOARDING_CATALOG) {
+ OnboardingActionHelper.navigateToOnboardingCatalog(dispatch);
+ return;
+ }
- if(screenType === screenTypes.LICENSE_MODEL) {
- const {licenseModelId, version, licenseModel, usersList} = props;
- const item = await ItemsHelper.fetchItem(licenseModelId);
- let itemStatusPromise = version && screen ?
- ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}) :
- Promise.resolve();
- itemStatusPromise.then((updatedVersion) => {
- if (updatedVersion && updatedVersion.status !== version.status) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Commit error'),
- msg: i18n('Item version was certified by Owner'),
- cancelButtonText: i18n('Cancel')
- }
- });
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
- }
- let newVersion = updatedVersion ? updatedVersion : version;
- const screenProps = {licenseModelId, version: newVersion, status: item.status};
- switch (screen) {
- case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
- OnboardingActionHelper.navigateToLicenseModelOverview(dispatch, screenProps);
- break;
- case enums.SCREEN.LICENSE_AGREEMENTS:
- OnboardingActionHelper.navigateToLicenseAgreements(dispatch, screenProps);
- break;
- case enums.SCREEN.FEATURE_GROUPS:
- OnboardingActionHelper.navigateToFeatureGroups(dispatch, screenProps);
- break;
- case enums.SCREEN.ENTITLEMENT_POOLS:
- OnboardingActionHelper.navigateToEntitlementPools(dispatch, screenProps);
- break;
- case enums.SCREEN.LICENSE_KEY_GROUPS:
- OnboardingActionHelper.navigateToLicenseKeyGroups(dispatch, screenProps);
- break;
- case enums.SCREEN.ACTIVITY_LOG:
- OnboardingActionHelper.navigateToLicenseModelActivityLog(dispatch, screenProps);
- break;
- case enums.SCREEN.VERSIONS_PAGE:
- default:
- OnboardingActionHelper.navigateToVersionsPage(dispatch, {
- itemId: licenseModelId,
- itemType: itemTypes.LICENSE_MODEL,
- itemName: licenseModel.name,
- users: usersList
- });
- break;
- }
- });
- }
+ screenType = !screenType ? this.getScreenType(screen) : screenType;
- else if(screenType === screenTypes.SOFTWARE_PRODUCT) {
- const {softwareProductId, componentId, version, softwareProduct, usersList} = props;
- const item = await ItemsHelper.fetchItem(softwareProductId);
- let itemStatusPromise = version && screen ?
- ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}) :
- Promise.resolve();
- itemStatusPromise.then((updatedVersion) => {
- if (updatedVersion && updatedVersion.status !== version.status) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Commit error'),
- msg: i18n('Item version already Certified'),
- cancelButtonText: i18n('Cancel')
- }
- });
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
- }
+ if (screenType === screenTypes.LICENSE_MODEL) {
+ const { licenseModelId, version, licenseModel, usersList } = props;
+ const item = await ItemsHelper.fetchItem(licenseModelId);
+ let itemStatusPromise =
+ version && screen
+ ? ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ })
+ : Promise.resolve();
+ itemStatusPromise.then(updatedVersion => {
+ if (
+ updatedVersion &&
+ updatedVersion.status !== version.status
+ ) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Commit error'),
+ msg: i18n('Item version was certified by Owner'),
+ cancelButtonText: i18n('Cancel')
+ }
+ });
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: licenseModelId
+ });
+ }
+ let newVersion = updatedVersion ? updatedVersion : version;
+ const screenProps = {
+ licenseModelId,
+ version: newVersion,
+ status: item.status
+ };
+ switch (screen) {
+ case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+ OnboardingActionHelper.navigateToLicenseModelOverview(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.LICENSE_AGREEMENTS:
+ OnboardingActionHelper.navigateToLicenseAgreements(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.FEATURE_GROUPS:
+ OnboardingActionHelper.navigateToFeatureGroups(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.ENTITLEMENT_POOLS:
+ OnboardingActionHelper.navigateToEntitlementPools(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.LICENSE_KEY_GROUPS:
+ OnboardingActionHelper.navigateToLicenseKeyGroups(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.ACTIVITY_LOG:
+ OnboardingActionHelper.navigateToLicenseModelActivityLog(
+ dispatch,
+ screenProps
+ );
+ break;
+ case enums.SCREEN.VERSIONS_PAGE:
+ default:
+ OnboardingActionHelper.navigateToVersionsPage(
+ dispatch,
+ {
+ itemId: licenseModelId,
+ itemType: itemTypes.LICENSE_MODEL,
+ itemName: licenseModel.name,
+ users: usersList
+ }
+ );
+ break;
+ }
+ });
+ } else if (screenType === screenTypes.SOFTWARE_PRODUCT) {
+ const {
+ softwareProductId,
+ componentId,
+ version,
+ softwareProduct,
+ usersList
+ } = props;
+ const item = await ItemsHelper.fetchItem(softwareProductId);
+ let itemStatusPromise =
+ version && screen
+ ? ItemsHelper.checkItemStatus(dispatch, {
+ itemId: softwareProductId,
+ versionId: version.id
+ })
+ : Promise.resolve();
+ itemStatusPromise.then(updatedVersion => {
+ if (
+ updatedVersion &&
+ updatedVersion.status !== version.status
+ ) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Commit error'),
+ msg: i18n('Item version already Certified'),
+ cancelButtonText: i18n('Cancel')
+ }
+ });
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.SOFTWARE_PRODUCT,
+ itemId: softwareProductId
+ });
+ }
- let newVersion = updatedVersion ? updatedVersion : version;
-
- const props = {
- softwareProductId,
- componentId,
- version: newVersion,
- status: item.status
- };
- if (screen === screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL) {
- OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, props);
- }
-
- switch (screen) {
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- OnboardingActionHelper.navigateToComponentCompute(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- OnboardingActionHelper.navigateToComponentLoadBalancing(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- OnboardingActionHelper.navigateToComponentNetwork(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- OnboardingActionHelper.navigateToComponentStorage(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- OnboardingActionHelper.navigateToComponentImages(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
- OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
- OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- OnboardingActionHelper.navigateToSoftwareProductProcesses(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- OnboardingActionHelper.navigateToSoftwareProductDeployment(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- OnboardingActionHelper.navigateToSoftwareProductNetworks(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- OnboardingActionHelper.navigateToSoftwareProductDependencies(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- OnboardingActionHelper.navigateToSoftwareProductActivityLog(dispatch, props);
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, props);
- dispatch({
- type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
- mapOfExpandedIds: {
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true
- }
- });
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE:
- default:
- OnboardingActionHelper.navigateToVersionsPage(dispatch, {
- itemId: softwareProductId,
- itemType: itemTypes.SOFTWARE_PRODUCT,
- itemName: softwareProduct.name,
- users: usersList,
- additionalProps: {
- licenseModelId: softwareProduct.vendorId,
- licensingVersion: softwareProduct.licensingVersion
- }
- });
- break;
- }
- });
- }
- },
+ let newVersion = updatedVersion ? updatedVersion : version;
- getScreenType(screen) {
- switch (screen) {
- case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
- case enums.SCREEN.LICENSE_AGREEMENTS:
- case enums.SCREEN.FEATURE_GROUPS:
- case enums.SCREEN.ENTITLEMENT_POOLS:
- case enums.SCREEN.LICENSE_KEY_GROUPS:
- case enums.SCREEN.ACTIVITY_LOG:
- return screenTypes.LICENSE_MODEL;
- case screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- return screenTypes.SOFTWARE_PRODUCT;
- }
- },
+ const props = {
+ softwareProductId,
+ componentId,
+ version: newVersion,
+ status: item.status
+ };
+ if (
+ screen ===
+ screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL
+ ) {
+ OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+ dispatch,
+ props
+ );
+ }
- loadLandingScreen(dispatch, {previousScreenName, screenType, props: {licenseModelId, softwareProductId, version}}) {
- let selectedScreenType = screenType ? screenType : this.getScreenType(previousScreenName);
- let screen = selectedScreenType === screenTypes.SOFTWARE_PRODUCT ?
- enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE :
- enums.SCREEN.LICENSE_MODEL_OVERVIEW;
- let props = {licenseModelId, softwareProductId, version};
- return this.loadScreen(dispatch, {screen, screenType: selectedScreenType, props});
- }
+ switch (screen) {
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+ OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ OnboardingActionHelper.navigateToComponentCompute(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ OnboardingActionHelper.navigateToComponentLoadBalancing(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ OnboardingActionHelper.navigateToComponentNetwork(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ OnboardingActionHelper.navigateToComponentStorage(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ OnboardingActionHelper.navigateToComponentImages(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+ OnboardingActionHelper.navigateToSoftwareProductLandingPage(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+ OnboardingActionHelper.navigateToSoftwareProductDetails(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
+ OnboardingActionHelper.navigateToSoftwareProductAttachmentsSetupTab(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
+ OnboardingActionHelper.navigateToSoftwareProductAttachmentsValidationTab(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+ OnboardingActionHelper.navigateToSoftwareProductProcesses(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+ OnboardingActionHelper.navigateToSoftwareProductDeployment(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+ OnboardingActionHelper.navigateToSoftwareProductNetworks(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+ OnboardingActionHelper.navigateToSoftwareProductDependencies(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ OnboardingActionHelper.navigateToSoftwareProductActivityLog(
+ dispatch,
+ props
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+ OnboardingActionHelper.navigateToSoftwareProductComponents(
+ dispatch,
+ props
+ );
+ dispatch({
+ type:
+ SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
+ mapOfExpandedIds: {
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true
+ }
+ });
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE:
+ default:
+ OnboardingActionHelper.navigateToVersionsPage(
+ dispatch,
+ {
+ itemId: softwareProductId,
+ itemType: itemTypes.SOFTWARE_PRODUCT,
+ itemName: softwareProduct.name,
+ users: usersList,
+ additionalProps: {
+ licenseModelId: softwareProduct.vendorId,
+ licensingVersion:
+ softwareProduct.licensingVersion
+ }
+ }
+ );
+ break;
+ }
+ });
+ }
+ },
+
+ getScreenType(screen) {
+ switch (screen) {
+ case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+ case enums.SCREEN.LICENSE_AGREEMENTS:
+ case enums.SCREEN.FEATURE_GROUPS:
+ case enums.SCREEN.ENTITLEMENT_POOLS:
+ case enums.SCREEN.LICENSE_KEY_GROUPS:
+ case enums.SCREEN.ACTIVITY_LOG:
+ return screenTypes.LICENSE_MODEL;
+ case screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+ case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+ return screenTypes.SOFTWARE_PRODUCT;
+ }
+ },
+
+ loadLandingScreen(
+ dispatch,
+ {
+ previousScreenName,
+ screenType,
+ props: { licenseModelId, softwareProductId, version }
+ }
+ ) {
+ let selectedScreenType = screenType
+ ? screenType
+ : this.getScreenType(previousScreenName);
+ let screen =
+ selectedScreenType === screenTypes.SOFTWARE_PRODUCT
+ ? enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE
+ : enums.SCREEN.LICENSE_MODEL_OVERVIEW;
+ let props = { licenseModelId, softwareProductId, version };
+ return this.loadScreen(dispatch, {
+ screen,
+ screenType: selectedScreenType,
+ props
+ });
+ }
};
export default ScreensHelper;
diff --git a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
index cfa675278f..aa578c6692 100644
--- a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
+++ b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js
@@ -13,80 +13,85 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
-import {actionTypes as qcommonActionTypes} from 'sdc-app/common/reducers/JSONSchemaReducerConstants.js';
+import { actionTypes as commonActionTypes } from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
+import { actionTypes as qcommonActionTypes } from 'sdc-app/common/reducers/JSONSchemaReducerConstants.js';
class ValidationHelper {
+ static dataChanged(
+ dispatch,
+ { deltaData, formName, customValidations = {} }
+ ) {
+ dispatch({
+ type: commonActionTypes.DATA_CHANGED,
+ deltaData,
+ formName,
+ customValidations
+ });
+ }
- static dataChanged(dispatch, {deltaData, formName, customValidations = {}}){
- dispatch({
- type: commonActionTypes.DATA_CHANGED,
- deltaData,
- formName,
- customValidations
- });
- }
+ static validateForm(dispatch, formName) {
+ dispatch({
+ type: commonActionTypes.VALIDATE_FORM,
+ formName
+ });
+ }
- static validateForm(dispatch, formName){
- dispatch({
- type: commonActionTypes.VALIDATE_FORM,
- formName
- });
- }
+ static validateData(dispatch, { formName, data }) {
+ dispatch({
+ type: commonActionTypes.VALIDATE_DATA,
+ formName,
+ data
+ });
+ }
- static validateData(dispatch, {formName, data}) {
- dispatch({
- type: commonActionTypes.VALIDATE_DATA,
- formName,
- data
- });
- }
+ static qValidateData(dispatch, { data, qName, customValidations = {} }) {
+ dispatch({
+ type: qcommonActionTypes.VALIDATE_DATA,
+ data,
+ qName,
+ customValidations
+ });
+ }
- static qValidateData(dispatch, {data, qName, customValidations = {}}) {
- dispatch({
- type: qcommonActionTypes.VALIDATE_DATA,
- data,
- qName,
- customValidations
- });
- }
+ static qValidateForm(dispatch, qName, customValidations) {
+ dispatch({
+ type: qcommonActionTypes.VALIDATE_FORM,
+ qName,
+ customValidations
+ });
+ }
- static qValidateForm(dispatch, qName, customValidations){
- dispatch({
- type: qcommonActionTypes.VALIDATE_FORM,
- qName,
- customValidations
- });
- }
+ static qDataChanged(
+ dispatch,
+ { deltaData, qName, customValidations = {} }
+ ) {
+ dispatch({
+ type: qcommonActionTypes.DATA_CHANGED,
+ deltaData,
+ qName,
+ customValidations
+ });
+ }
- static qDataChanged(dispatch, {deltaData, qName, customValidations = {}}){
- dispatch({
- type: qcommonActionTypes.DATA_CHANGED,
- deltaData,
- qName,
- customValidations
- });
- }
+ static qDataLoaded(dispatch, { qName, response: { qdata, qschema } }) {
+ dispatch({
+ type: qcommonActionTypes.DATA_LOADED,
+ payload: {
+ qdata,
+ qschema
+ },
+ qName
+ });
+ }
- static qDataLoaded(dispatch, {qName, response: {qdata, qschema}}) {
- dispatch({
- type: qcommonActionTypes.DATA_LOADED,
- payload: {
- qdata,
- qschema
- },
- qName
- });
- }
-
- static checkFormValid(genericFieldInfo) {
- for (let field in genericFieldInfo) {
- if (!genericFieldInfo[field].isValid) {
- return false;
- }
- }
- return true;
- }
+ static checkFormValid(genericFieldInfo) {
+ for (let field in genericFieldInfo) {
+ if (!genericFieldInfo[field].isValid) {
+ return false;
+ }
+ }
+ return true;
+ }
}
export default ValidationHelper;
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
index baf00cf0cf..81f7174623 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditor.js
@@ -13,25 +13,42 @@
* 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 MergeEditorView from './MergeEditorView.jsx';
import MergeEditorActionHelper from './MergeEditorActionHelper.js';
-export const mapStateToProps = ({mergeEditor, currentScreen}) => {
- let {props} = currentScreen;
- let item = {
- id: props.softwareProductId || props.licenseModelId,
- version: props.version
- };
- return {...mergeEditor, item, currentScreen};
+export const mapStateToProps = ({ mergeEditor, currentScreen }) => {
+ let { props } = currentScreen;
+ let item = {
+ id: props.softwareProductId || props.licenseModelId,
+ version: props.version
+ };
+ return { ...mergeEditor, item, currentScreen };
};
-export const mapActionsToProps = (dispatch) => {
- return {
- fetchConflict: ({cid, itemId, version}) => MergeEditorActionHelper.fetchConflict(dispatch, {itemId, version, cid}),
- onResolveConflict: ({conflictId, resolution, itemId, version, currentScreen}) =>
- MergeEditorActionHelper.resolveConflict(dispatch, {itemId, version, conflictId, resolution, currentScreen})
- };
+export const mapActionsToProps = dispatch => {
+ return {
+ fetchConflict: ({ cid, itemId, version }) =>
+ MergeEditorActionHelper.fetchConflict(dispatch, {
+ itemId,
+ version,
+ cid
+ }),
+ onResolveConflict: ({
+ conflictId,
+ resolution,
+ itemId,
+ version,
+ currentScreen
+ }) =>
+ MergeEditorActionHelper.resolveConflict(dispatch, {
+ itemId,
+ version,
+ conflictId,
+ resolution,
+ currentScreen
+ })
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(MergeEditorView);
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
index 92ec60b999..c54b9feb93 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
@@ -13,431 +13,532 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, rules, dataRules, SyncStates} from './MergeEditorConstants.js';
+import {
+ actionTypes,
+ rules,
+ dataRules,
+ SyncStates
+} from './MergeEditorConstants.js';
import cloneDeep from 'lodash/cloneDeep.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
import ItemsHelper from '../../common/helpers/ItemsHelper.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';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {optionsInputValues as epOptionsValues} from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js';
-import {optionsInputValues as laOptionsValues} from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
-import {optionsInputValues as processOptionValues} from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js';
-import {selectValues as limitSelectValues} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { optionsInputValues as epOptionsValues } from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js';
+import { optionsInputValues as laOptionsValues } from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
+import { optionsInputValues as processOptionValues } from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js';
+import { selectValues as limitSelectValues } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
import LicenseAgreementActionHelper from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js';
import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
function softwareProductCategoriesUrl() {
- const restCatalogPrefix = Configuration.get('restCatalogPrefix');
- return `${restCatalogPrefix}/v1/categories/resources/`;
+ const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+ return `${restCatalogPrefix}/v1/categories/resources/`;
}
function versionUrl(itemId, versionId) {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}`;
}
function baseUrl(itemId, version, conflictId) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- let baseUrl = `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}/conflicts`;
- return conflictId ? `${baseUrl}/${conflictId}` : baseUrl;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ let baseUrl = `${restPrefix}/v1.0/items/${itemId}/versions/${versionId}/conflicts`;
+ return conflictId ? `${baseUrl}/${conflictId}` : baseUrl;
}
-function fetchConflicts({itemId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(itemId, version)}`);
+function fetchConflicts({ itemId, version }) {
+ return RestAPIUtil.fetch(`${baseUrl(itemId, version)}`);
}
-function fetchConflictById({itemId, version, cid}) {
- return RestAPIUtil.fetch(`${baseUrl(itemId, version, cid)}`);
+function fetchConflictById({ itemId, version, cid }) {
+ return RestAPIUtil.fetch(`${baseUrl(itemId, version, cid)}`);
}
-function resolveConflict({itemId, version, conflictId, resolution}) {
- return RestAPIUtil.put(`${baseUrl(itemId, version, conflictId)}`, {resolution});
+function resolveConflict({ itemId, version, conflictId, resolution }) {
+ return RestAPIUtil.put(`${baseUrl(itemId, version, conflictId)}`, {
+ resolution
+ });
}
function fetchCategories() {
- return RestAPIUtil.fetch(softwareProductCategoriesUrl());
+ return RestAPIUtil.fetch(softwareProductCategoriesUrl());
}
-function fetchVersion({vendorId, licensingVersion}) {
- return RestAPIUtil.fetch(versionUrl(vendorId, licensingVersion));
+function fetchVersion({ vendorId, licensingVersion }) {
+ return RestAPIUtil.fetch(versionUrl(vendorId, licensingVersion));
}
-function createCategoryStr(data, {categories}) {
-
- let {category, subCategory} = data;
- let foundCat = categories.find(element => element.uniqueId === category);
- if (!foundCat) { return ''; }
-
- let catName = foundCat.name;
- let foundSub = foundCat.subcategories.find(element => element.uniqueId === subCategory);
- if (!foundSub) { return `${catName}`; }
-
- let subcatName = foundSub.name;
- return `${catName} - ${subcatName}`;
-
+function createCategoryStr(data, { categories }) {
+ let { category, subCategory } = data;
+ let foundCat = categories.find(element => element.uniqueId === category);
+ if (!foundCat) {
+ return '';
+ }
+
+ let catName = foundCat.name;
+ let foundSub = foundCat.subcategories.find(
+ element => element.uniqueId === subCategory
+ );
+ if (!foundSub) {
+ return `${catName}`;
+ }
+
+ let subcatName = foundSub.name;
+ return `${catName} - ${subcatName}`;
}
-function getEnumValues({enums, list}) {
-
- if (!list) { return ''; }
- return list.map(item => enums.find(el => el.enum === item).title);
-
+function getEnumValues({ enums, list }) {
+ if (!list) {
+ return '';
+ }
+ return list.map(item => enums.find(el => el.enum === item).title);
}
const MergeEditorActionHelper = {
-
- analyzeSyncResult(dispatch, {itemId, version}) {
- return ItemsHelper.checkItemStatus(dispatch, {itemId, versionId: version.id}).then((response) => {
- let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
- if (inMerge) {
- MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(() =>
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.MERGE_EDITOR,
- modalClassName: 'merge-editor-modal',
- title: `${i18n('Merge Required')} - ${version.description}`,
- onDeclined: () => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- },
- modalComponentProps: {
- size: 'lg',
- type: 'default'
- }
- }
- })
- );
- }
- return Promise.resolve({updatedVersion: response, inMerge, isDirty: response.state.dirty});
- });
- },
-
- fetchConflicts(dispatch, {itemId, version}) {
- return fetchConflicts({itemId, version}).then(
- (data) => {
- dispatch({
- type: actionTypes.LOAD_CONFLICTS,
- data
- });
- return data;
- }
- );
- },
-
- fetchConflict(dispatch, {itemId, version, cid}) {
- fetchConflictById({itemId, version, cid}).then(
- (data) => {
- let newData = {};
- newData = MergeEditorActionHelper.processConflict(dispatch, {conflict: data, itemId, cid, version});
- dispatch({
- type: actionTypes.LOAD_CONFLICT,
- data: newData
- });
- }
- );
- },
-
- resolveConflict(dispatch, {itemId, version, conflictId, resolution, currentScreen}) {
- resolveConflict({itemId, version, conflictId, resolution}).then(() => {
- MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(conflicts => {
- if(conflicts.conflictInfoList && conflicts.conflictInfoList.length === 0) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: currentScreen.screen, props: currentScreen.props});
- ItemsHelper.checkItemStatus(dispatch, {itemId, versionId: version.id});
- }
- });
- });
- },
-
- createConflictObject(data, {cid, conflict, dispatch, itemId, version, isYours}) {
-
- let newData = {};
-
- for (let key in data) {
-
- if (data.hasOwnProperty(key)) {
- let value = data[key];
- let fieldRule = dataRules[conflict.type] && dataRules[conflict.type][key] || dataRules.general[key];
-
- if (fieldRule) {
- switch (fieldRule.rule) {
-
- case rules.SKIP:
- break;
-
- case rules.BOOLEAN:
- let {trueValue, falseValue} = fieldRule;
- newData[key] = value === trueValue ? true : value === falseValue ? false : undefined;
- break;
-
- case rules.PARSE:
- let {moveFields, subFields} = fieldRule;
- if (moveFields) {
- let fields = subFields || Object.keys(value);
- fields.forEach(field => {
- newData[field] = MergeEditorActionHelper.createConflictObject(
- value[field], {cid, conflict, dispatch, itemId, version, isYours}
- );
- });
- } else {
- newData[key] = MergeEditorActionHelper.createConflictObject(
- value, {cid, conflict, dispatch, itemId, version, isYours}
- );
- }
- break;
-
- case rules.FUNCTION:
- let {args, functionName} = fieldRule;
- newData[key] = MergeEditorActionHelper[functionName](data, {
- cid, conflict, dispatch, version, fieldName: key, isYours, itemId, args
- });
- break;
-
- default:
- newData[key] = value;
- break;
- }
-
- } else {
- newData[key] = value;
-
- }
- }
- }
-
- return newData;
-
- },
-
- getNamesFromIDs(data, {version, cid, dispatch, itemId, fieldName, isYours, args}) {
-
- let idList = data[fieldName] || [];
- let {fetchFunction, fetchField} = args;
-
- let promises = idList.map(id =>
- new Promise(resolve =>
- MergeEditorActionHelper[fetchFunction](
- dispatch, {licenseModelId: itemId, [fetchField]: id, version}
- ).then(item => resolve(item.name))
- )
- );
-
- Promise.all(promises).then(fetchedItems => {
- let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
- dispatch({
- type: actionTypes.DATA_PROCESSED,
- data: {
- cid,
- [yoursOrTheirs]: { name: fieldName, value: fetchedItems }
- }
- });
- });
-
- return idList;
-
- },
-
- getFeatureGroups(data, {version, cid, dispatch, itemId, fieldName, isYours}) {
-
- let featureGroups = data[fieldName] || [];
- if (!(featureGroups instanceof Array)) {
- featureGroups = [featureGroups];
- }
-
- let promises = featureGroups.map(featureGroupId =>
- new Promise(resolve =>
- FeatureGroupsActionHelper.fetchFeatureGroup(
- dispatch, {licenseModelId: itemId, featureGroupId, version}
- ).then(featureGroup => resolve(featureGroup.name))
- .catch(reason => console.log(`getFeatureGroups Promise rejected ('${reason}')`))
- )
- );
-
- Promise.all(promises).then(fetchedGroups => {
- let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
- dispatch({
- type: actionTypes.DATA_PROCESSED,
- data: {
- cid,
- [yoursOrTheirs]: { name: fieldName, value: fetchedGroups }
- }
- });
- });
-
- return featureGroups;
-
- },
-
- getLicenseAgreements(data, {version, cid, dispatch, itemId, fieldName, isYours}) {
-
- let licenseAgreements = data[fieldName] || [];
- if (!(licenseAgreements instanceof Array)) {
- licenseAgreements = [licenseAgreements];
- }
-
- let promises = licenseAgreements.map(licenseAgreementId =>
- new Promise(resolve =>
- LicenseAgreementActionHelper.fetchLicenseAgreement(
- dispatch, {licenseModelId: itemId, licenseAgreementId, version}
- ).then(licenseAgreement => resolve(licenseAgreement.name))
- .catch(reason => console.log(`getLicenseAgreements Promise rejected ('${reason}')`))
- )
- );
-
- Promise.all(promises).then(fetchedAgreements => {
- let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
- dispatch({
- type: actionTypes.DATA_PROCESSED,
- data: {
- cid,
- [yoursOrTheirs]: { name: fieldName, value: fetchedAgreements }
- }
- });
- });
-
- return licenseAgreements;
-
- },
-
- processConflict(dispatch, {conflict, cid, version, itemId,}) {
-
- let {id, type, yours, theirs} = conflict;
-
- let newYours = MergeEditorActionHelper.createConflictObject(
- cloneDeep(yours), {cid, conflict, dispatch, itemId, version, isYours: true}
- );
- let newTheirs = MergeEditorActionHelper.createConflictObject(
- cloneDeep(theirs), {cid, conflict, dispatch, itemId, version, isYours: false}
- );
-
- return {
- id,
- type,
- yours: newYours,
- theirs: newTheirs
- };
-
- },
-
- reduceList(data, {fieldName, args}) {
-
- let {subField} = args;
- return data[fieldName].map(el => el[subField]);
-
- },
-
- getEnumList({fieldName}) {
-
- const enumLists = {
- 'licenseTerm': laOptionsValues.LICENSE_MODEL_TYPE,
- 'operationalScope': epOptionsValues.OPERATIONAL_SCOPE,
- 'processType': processOptionValues.PROCESS_TYPE,
- 'limitType': [
- {title: 'Service Provider', enum: 'ServiceProvider'},
- {title: 'Vendor', enum: 'Vendor'}
- ],
- 'limitUnit': limitSelectValues.UNIT
- };
-
- return enumLists[fieldName];
-
- },
-
- getEnumValue(data, {fieldName, args = {}}) {
-
- let value = data[fieldName];
- let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
- let enumValue = enumValues.find(el => el.enum === value);
-
- return enumValue && enumValue.title || value;
-
- },
-
- processChoice(data, {fieldName, args = {}}) {
-
- let value = data[fieldName];
- let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
- let newValue = value.other || enumValues && enumValues.find(el => el.enum === value.choice).title || value.choice;
-
- return newValue;
-
- },
-
- processChoices(data, {fieldName, args = {}}) {
-
- let value = data[fieldName];
- let enumValues = MergeEditorActionHelper.getEnumList({fieldName: args.listName || fieldName});
- let newValue = value.other || getEnumValues({enums: enumValues, list: value.choices}) || value.choices;
-
- return newValue;
-
- },
-
- convertArrayToObject(data, {fieldName}) {
- let value = data[fieldName];
- let newValue = {};
- value.forEach((el, index) => {
- newValue[index] = el;
- });
- return newValue;
- },
-
- fetchCategory(data, {cid, isYours, fieldName, dispatch}) {
-
- fetchCategories().then((categories) => {
- let value = createCategoryStr(data, {categories});
- let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-
- dispatch({
- type: actionTypes.DATA_PROCESSED,
- data: {
- cid,
- [yoursOrTheirs]: { name: fieldName, value }
- }
- });
-
- });
- },
-
- fetchLMVersion(data, {cid, dispatch, isYours}) {
-
- let {licensingVersion, vendorId} = data;
- let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
-
- if (licensingVersion) {
- fetchVersion({licensingVersion, vendorId}).then(response => {
- dispatch({
- type: actionTypes.DATA_PROCESSED,
- data: {
- cid,
- [yoursOrTheirs]: {
- name: 'licensingVersion',
- value: response.name
- }
- }
- });
- });
- }
-
- },
-
- parseDate(data, {fieldName}) {
-
- let date = data[fieldName];
- return date && moment(date, DATE_FORMAT).format(DATE_FORMAT);
-
- }
-
+ analyzeSyncResult(dispatch, { itemId, version }) {
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId,
+ versionId: version.id
+ }).then(response => {
+ let inMerge =
+ response &&
+ response.state &&
+ response.state.synchronizationState === SyncStates.MERGE;
+ if (inMerge) {
+ MergeEditorActionHelper.fetchConflicts(dispatch, {
+ itemId,
+ version
+ }).then(() =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.MERGE_EDITOR,
+ modalClassName: 'merge-editor-modal',
+ title: `${i18n('Merge Required')} - ${
+ version.description
+ }`,
+ onDeclined: () => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ },
+ modalComponentProps: {
+ size: 'lg',
+ type: 'default'
+ }
+ }
+ })
+ );
+ }
+ return Promise.resolve({
+ updatedVersion: response,
+ inMerge,
+ isDirty: response.state.dirty
+ });
+ });
+ },
+
+ fetchConflicts(dispatch, { itemId, version }) {
+ return fetchConflicts({ itemId, version }).then(data => {
+ dispatch({
+ type: actionTypes.LOAD_CONFLICTS,
+ data
+ });
+ return data;
+ });
+ },
+
+ fetchConflict(dispatch, { itemId, version, cid }) {
+ fetchConflictById({ itemId, version, cid }).then(data => {
+ let newData = {};
+ newData = MergeEditorActionHelper.processConflict(dispatch, {
+ conflict: data,
+ itemId,
+ cid,
+ version
+ });
+ dispatch({
+ type: actionTypes.LOAD_CONFLICT,
+ data: newData
+ });
+ });
+ },
+
+ resolveConflict(
+ dispatch,
+ { itemId, version, conflictId, resolution, currentScreen }
+ ) {
+ resolveConflict({ itemId, version, conflictId, resolution }).then(
+ () => {
+ MergeEditorActionHelper.fetchConflicts(dispatch, {
+ itemId,
+ version
+ }).then(conflicts => {
+ if (
+ conflicts.conflictInfoList &&
+ conflicts.conflictInfoList.length === 0
+ ) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ ScreensHelper.loadLandingScreen(dispatch, {
+ previousScreenName: currentScreen.screen,
+ props: currentScreen.props
+ });
+ ItemsHelper.checkItemStatus(dispatch, {
+ itemId,
+ versionId: version.id
+ });
+ }
+ });
+ }
+ );
+ },
+
+ createConflictObject(
+ data,
+ { cid, conflict, dispatch, itemId, version, isYours }
+ ) {
+ let newData = {};
+
+ for (let key in data) {
+ if (data.hasOwnProperty(key)) {
+ let value = data[key];
+ let fieldRule =
+ (dataRules[conflict.type] &&
+ dataRules[conflict.type][key]) ||
+ dataRules.general[key];
+
+ if (fieldRule) {
+ switch (fieldRule.rule) {
+ case rules.SKIP:
+ break;
+
+ case rules.BOOLEAN:
+ let { trueValue, falseValue } = fieldRule;
+ newData[key] =
+ value === trueValue
+ ? true
+ : value === falseValue ? false : undefined;
+ break;
+
+ case rules.PARSE:
+ let { moveFields, subFields } = fieldRule;
+ if (moveFields) {
+ let fields = subFields || Object.keys(value);
+ fields.forEach(field => {
+ newData[
+ field
+ ] = MergeEditorActionHelper.createConflictObject(
+ value[field],
+ {
+ cid,
+ conflict,
+ dispatch,
+ itemId,
+ version,
+ isYours
+ }
+ );
+ });
+ } else {
+ newData[
+ key
+ ] = MergeEditorActionHelper.createConflictObject(
+ value,
+ {
+ cid,
+ conflict,
+ dispatch,
+ itemId,
+ version,
+ isYours
+ }
+ );
+ }
+ break;
+
+ case rules.FUNCTION:
+ let { args, functionName } = fieldRule;
+ newData[key] = MergeEditorActionHelper[
+ functionName
+ ](data, {
+ cid,
+ conflict,
+ dispatch,
+ version,
+ fieldName: key,
+ isYours,
+ itemId,
+ args
+ });
+ break;
+
+ default:
+ newData[key] = value;
+ break;
+ }
+ } else {
+ newData[key] = value;
+ }
+ }
+ }
+
+ return newData;
+ },
+
+ getNamesFromIDs(
+ data,
+ { version, cid, dispatch, itemId, fieldName, isYours, args }
+ ) {
+ let idList = data[fieldName] || [];
+ let { fetchFunction, fetchField } = args;
+
+ let promises = idList.map(
+ id =>
+ new Promise(resolve =>
+ MergeEditorActionHelper[fetchFunction](dispatch, {
+ licenseModelId: itemId,
+ [fetchField]: id,
+ version
+ }).then(item => resolve(item.name))
+ )
+ );
+
+ Promise.all(promises).then(fetchedItems => {
+ let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+ dispatch({
+ type: actionTypes.DATA_PROCESSED,
+ data: {
+ cid,
+ [yoursOrTheirs]: { name: fieldName, value: fetchedItems }
+ }
+ });
+ });
+
+ return idList;
+ },
+
+ getFeatureGroups(
+ data,
+ { version, cid, dispatch, itemId, fieldName, isYours }
+ ) {
+ let featureGroups = data[fieldName] || [];
+ if (!(featureGroups instanceof Array)) {
+ featureGroups = [featureGroups];
+ }
+
+ let promises = featureGroups.map(
+ featureGroupId =>
+ new Promise(resolve =>
+ FeatureGroupsActionHelper.fetchFeatureGroup(dispatch, {
+ licenseModelId: itemId,
+ featureGroupId,
+ version
+ })
+ .then(featureGroup => resolve(featureGroup.name))
+ .catch(reason =>
+ console.log(
+ `getFeatureGroups Promise rejected ('${reason}')`
+ )
+ )
+ )
+ );
+
+ Promise.all(promises).then(fetchedGroups => {
+ let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+ dispatch({
+ type: actionTypes.DATA_PROCESSED,
+ data: {
+ cid,
+ [yoursOrTheirs]: { name: fieldName, value: fetchedGroups }
+ }
+ });
+ });
+
+ return featureGroups;
+ },
+
+ getLicenseAgreements(
+ data,
+ { version, cid, dispatch, itemId, fieldName, isYours }
+ ) {
+ let licenseAgreements = data[fieldName] || [];
+ if (!(licenseAgreements instanceof Array)) {
+ licenseAgreements = [licenseAgreements];
+ }
+
+ let promises = licenseAgreements.map(
+ licenseAgreementId =>
+ new Promise(resolve =>
+ LicenseAgreementActionHelper.fetchLicenseAgreement(
+ dispatch,
+ {
+ licenseModelId: itemId,
+ licenseAgreementId,
+ version
+ }
+ )
+ .then(licenseAgreement =>
+ resolve(licenseAgreement.name)
+ )
+ .catch(reason =>
+ console.log(
+ `getLicenseAgreements Promise rejected ('${reason}')`
+ )
+ )
+ )
+ );
+
+ Promise.all(promises).then(fetchedAgreements => {
+ let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+ dispatch({
+ type: actionTypes.DATA_PROCESSED,
+ data: {
+ cid,
+ [yoursOrTheirs]: {
+ name: fieldName,
+ value: fetchedAgreements
+ }
+ }
+ });
+ });
+
+ return licenseAgreements;
+ },
+
+ processConflict(dispatch, { conflict, cid, version, itemId }) {
+ let { id, type, yours, theirs } = conflict;
+
+ let newYours = MergeEditorActionHelper.createConflictObject(
+ cloneDeep(yours),
+ { cid, conflict, dispatch, itemId, version, isYours: true }
+ );
+ let newTheirs = MergeEditorActionHelper.createConflictObject(
+ cloneDeep(theirs),
+ { cid, conflict, dispatch, itemId, version, isYours: false }
+ );
+
+ return {
+ id,
+ type,
+ yours: newYours,
+ theirs: newTheirs
+ };
+ },
+
+ reduceList(data, { fieldName, args }) {
+ let { subField } = args;
+ return data[fieldName].map(el => el[subField]);
+ },
+
+ getEnumList({ fieldName }) {
+ const enumLists = {
+ licenseTerm: laOptionsValues.LICENSE_MODEL_TYPE,
+ operationalScope: epOptionsValues.OPERATIONAL_SCOPE,
+ processType: processOptionValues.PROCESS_TYPE,
+ limitType: [
+ { title: 'Service Provider', enum: 'ServiceProvider' },
+ { title: 'Vendor', enum: 'Vendor' }
+ ],
+ limitUnit: limitSelectValues.UNIT
+ };
+
+ return enumLists[fieldName];
+ },
+
+ getEnumValue(data, { fieldName, args = {} }) {
+ let value = data[fieldName];
+ let enumValues = MergeEditorActionHelper.getEnumList({
+ fieldName: args.listName || fieldName
+ });
+ let enumValue = enumValues.find(el => el.enum === value);
+
+ return (enumValue && enumValue.title) || value;
+ },
+
+ processChoice(data, { fieldName, args = {} }) {
+ let value = data[fieldName];
+ let enumValues = MergeEditorActionHelper.getEnumList({
+ fieldName: args.listName || fieldName
+ });
+ let newValue =
+ value.other ||
+ (enumValues &&
+ enumValues.find(el => el.enum === value.choice).title) ||
+ value.choice;
+
+ return newValue;
+ },
+
+ processChoices(data, { fieldName, args = {} }) {
+ let value = data[fieldName];
+ let enumValues = MergeEditorActionHelper.getEnumList({
+ fieldName: args.listName || fieldName
+ });
+ let newValue =
+ value.other ||
+ getEnumValues({ enums: enumValues, list: value.choices }) ||
+ value.choices;
+
+ return newValue;
+ },
+
+ convertArrayToObject(data, { fieldName }) {
+ let value = data[fieldName];
+ let newValue = {};
+ value.forEach((el, index) => {
+ newValue[index] = el;
+ });
+ return newValue;
+ },
+
+ fetchCategory(data, { cid, isYours, fieldName, dispatch }) {
+ fetchCategories().then(categories => {
+ let value = createCategoryStr(data, { categories });
+ let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+
+ dispatch({
+ type: actionTypes.DATA_PROCESSED,
+ data: {
+ cid,
+ [yoursOrTheirs]: { name: fieldName, value }
+ }
+ });
+ });
+ },
+
+ fetchLMVersion(data, { cid, dispatch, isYours }) {
+ let { licensingVersion, vendorId } = data;
+ let yoursOrTheirs = isYours ? 'yoursField' : 'theirsField';
+
+ if (licensingVersion) {
+ fetchVersion({ licensingVersion, vendorId }).then(response => {
+ dispatch({
+ type: actionTypes.DATA_PROCESSED,
+ data: {
+ cid,
+ [yoursOrTheirs]: {
+ name: 'licensingVersion',
+ value: response.name
+ }
+ }
+ });
+ });
+ }
+ },
+
+ parseDate(data, { fieldName }) {
+ let date = data[fieldName];
+ return date && moment(date, DATE_FORMAT).format(DATE_FORMAT);
+ }
};
export default MergeEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
index f7f6d4195e..b82d08683f 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorConstants.js
@@ -17,208 +17,205 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- LOAD_CONFLICTS: null,
- ADD_ACTIONS: null,
- LOAD_CONFLICT: null,
- DATA_PROCESSED: null
+ LOAD_CONFLICTS: null,
+ ADD_ACTIONS: null,
+ LOAD_CONFLICT: null,
+ DATA_PROCESSED: null
});
export const rules = {
- SKIP: 'skip',
- PARSE: 'parse',
- FUNCTION: 'function',
- BOOLEAN: 'boolean'
+ SKIP: 'skip',
+ PARSE: 'parse',
+ FUNCTION: 'function',
+ BOOLEAN: 'boolean'
};
export const SyncStates = {
- MERGE : 'Merging',
- OUT_OF_SYNC: 'OutOfSync',
- UP_TO_DATE: 'UpToDate'
+ MERGE: 'Merging',
+ OUT_OF_SYNC: 'OutOfSync',
+ UP_TO_DATE: 'UpToDate'
};
export const ResolutionTypes = {
- YOURS: 'YOURS',
- THEIRS: 'THEIRS'
+ YOURS: 'YOURS',
+ THEIRS: 'THEIRS'
};
export const fileTypes = {
- LKG : 'LicenseKeyGroup',
- VLM : 'VendorLicenseModel',
- EP : 'EntitlementPool',
- FG : 'FeatureGroup',
- LA : 'LicenseAgreement',
- VSP : 'VendorSoftwareProduct',
- LIMIT : 'Limit',
- VSP_Q : 'VSPQuestionnaire',
- COMPONENT : 'Component',
- COMPONENT_Q : 'ComponentQuestionnaire',
- COMPONENT_DEP : 'ComponentDependencies',
- COMPUTE_Q : 'ComputeQuestionnaire',
- COMPUTE : 'Compute',
- COMPUTE_FLAVOR: 'ComputeFlavor',
- NIC : 'Nic',
- NIC_Q : 'NicQuestionnaire',
- IMAGE : 'Image',
- IMAGE_Q : 'ImageQuestionnaire',
- PROCESS : 'Process',
- DEPLOYMENT_FLAVOR : 'DeploymentFlavor',
- VENDOR : 'Vendor',
- NETWORK : 'Network',
- ORCHESTRATION_TEMPLATE_CANDIDATE : 'OrchestrationTemplateCandidate'
+ LKG: 'LicenseKeyGroup',
+ VLM: 'VendorLicenseModel',
+ EP: 'EntitlementPool',
+ FG: 'FeatureGroup',
+ LA: 'LicenseAgreement',
+ VSP: 'VendorSoftwareProduct',
+ LIMIT: 'Limit',
+ VSP_Q: 'VSPQuestionnaire',
+ COMPONENT: 'Component',
+ COMPONENT_Q: 'ComponentQuestionnaire',
+ COMPONENT_DEP: 'ComponentDependencies',
+ COMPUTE_Q: 'ComputeQuestionnaire',
+ COMPUTE: 'Compute',
+ COMPUTE_FLAVOR: 'ComputeFlavor',
+ NIC: 'Nic',
+ NIC_Q: 'NicQuestionnaire',
+ IMAGE: 'Image',
+ IMAGE_Q: 'ImageQuestionnaire',
+ PROCESS: 'Process',
+ DEPLOYMENT_FLAVOR: 'DeploymentFlavor',
+ VENDOR: 'Vendor',
+ NETWORK: 'Network',
+ ORCHESTRATION_TEMPLATE_CANDIDATE: 'OrchestrationTemplateCandidate'
};
export const dataRules = {
- general: {
- id: {
- rule: rules.SKIP
- },
- questionareData: {
- rule: rules.PARSE,
- moveFields: true
- },
- startDate: {
- rule: rules.FUNCTION,
- functionName: 'parseDate'
- },
- expiryDate: {
- rule: rules.FUNCTION,
- functionName: 'parseDate'
- },
- featureGroups: {
- rule: rules.FUNCTION,
- functionName: 'reduceList',
- args: {subField: 'name'}
- },
- licenseKeyGroups: {
- rule: rules.FUNCTION,
- functionName: 'reduceList',
- args: {subField: 'name'}
- },
- entitlementPools: {
- rule: rules.FUNCTION,
- functionName: 'reduceList',
- args: {subField: 'name'}
- },
- },
- [fileTypes.COMPONENT] : {
- },
- [fileTypes.COMPUTE_FLAVOR] : {
- associatedToDeploymentFlavor: {
- rule: rules.BOOLEAN,
- trueValue: 'true'
- }
- },
- [fileTypes.COMPUTE_Q] : {
- },
- [fileTypes.COMPONENT_Q] : {
- isComponentMandatory: {
- rule: rules.BOOLEAN,
- trueValue: 'YES',
- falseValue: 'NO'
- }
- },
- [fileTypes.EP] : {
- referencingFeatureGroups: {
- rule: rules.SKIP,
- functionName: 'getFeatureGroups'
- },
- operationalScope: {
- rule: rules.FUNCTION,
- functionName: 'processChoices'
- },
- },
- [fileTypes.FG] : {
- referencingLicenseAgreements: {
- rule: rules.SKIP,
- functionName: 'getLicenseAgreements'
- }
- },
- [fileTypes.LA] : {
- licenseTerm : {
- rule: rules.FUNCTION,
- functionName: 'processChoice'
- }
- },
- [fileTypes.LIMIT] : {
- type: {
- rule: rules.FUNCTION,
- functionName: 'getEnumValue',
- args: {listName: 'limitType'}
- },
- unit: {
- rule: rules.FUNCTION,
- functionName: 'getEnumValue',
- args: {listName: 'limitUnit'}
- }
- },
- [fileTypes.LKG] : {
- operationalScope: {
- rule: rules.FUNCTION,
- functionName: 'processChoices'
- },
- referencingFeatureGroups: {
- rule: rules.SKIP,
- functionName: 'getFeatureGroups'
- },
- },
- [fileTypes.NIC] : {
- networkId: {
- rule: rules.SKIP
- }
- },
- [fileTypes.NIC_Q] : {
- },
- [fileTypes.PROCESS] : {
- type: {
- rule: rules.FUNCTION,
- functionName: 'getEnumValue',
- args: {listName: 'processType'}
- }
- },
- [fileTypes.VLM] : {
- iconRef: {
- rule: rules.SKIP
- }
- },
- [fileTypes.VSP] : {
- vendorId: {
- rule: rules.SKIP
- },
- onboardingMethod: {
- rule: rules.SKIP
- },
- validationData: {
- rule: rules.SKIP
- },
- isOldVersion: {
- rule: rules.SKIP
- },
- licensingVersion: {
- rule: rules.FUNCTION,
- functionName: 'fetchLMVersion'
- },
- category: {
- rule: rules.FUNCTION,
- functionName: 'fetchCategory'
- },
- subCategory: {
- rule: rules.SKIP
- },
- },
- [fileTypes.VSP_Q] : {
- affinityData: {
- rule: rules.SKIP
- },
- storageReplicationAcrossRegion: {
- rule: rules.BOOLEAN,
- trueValue: 'true',
- falseValue: 'false'
- }
- },
- [fileTypes.ORCHESTRATION_TEMPLATE_CANDIDATE] : {
- modules: {
- rule: rules.FUNCTION,
- functionName: 'convertArrayToObject'
- },
- },
+ general: {
+ id: {
+ rule: rules.SKIP
+ },
+ questionareData: {
+ rule: rules.PARSE,
+ moveFields: true
+ },
+ startDate: {
+ rule: rules.FUNCTION,
+ functionName: 'parseDate'
+ },
+ expiryDate: {
+ rule: rules.FUNCTION,
+ functionName: 'parseDate'
+ },
+ featureGroups: {
+ rule: rules.FUNCTION,
+ functionName: 'reduceList',
+ args: { subField: 'name' }
+ },
+ licenseKeyGroups: {
+ rule: rules.FUNCTION,
+ functionName: 'reduceList',
+ args: { subField: 'name' }
+ },
+ entitlementPools: {
+ rule: rules.FUNCTION,
+ functionName: 'reduceList',
+ args: { subField: 'name' }
+ }
+ },
+ [fileTypes.COMPONENT]: {},
+ [fileTypes.COMPUTE_FLAVOR]: {
+ associatedToDeploymentFlavor: {
+ rule: rules.BOOLEAN,
+ trueValue: 'true'
+ }
+ },
+ [fileTypes.COMPUTE_Q]: {},
+ [fileTypes.COMPONENT_Q]: {
+ isComponentMandatory: {
+ rule: rules.BOOLEAN,
+ trueValue: 'YES',
+ falseValue: 'NO'
+ }
+ },
+ [fileTypes.EP]: {
+ referencingFeatureGroups: {
+ rule: rules.SKIP,
+ functionName: 'getFeatureGroups'
+ },
+ operationalScope: {
+ rule: rules.FUNCTION,
+ functionName: 'processChoices'
+ }
+ },
+ [fileTypes.FG]: {
+ referencingLicenseAgreements: {
+ rule: rules.SKIP,
+ functionName: 'getLicenseAgreements'
+ }
+ },
+ [fileTypes.LA]: {
+ licenseTerm: {
+ rule: rules.FUNCTION,
+ functionName: 'processChoice'
+ }
+ },
+ [fileTypes.LIMIT]: {
+ type: {
+ rule: rules.FUNCTION,
+ functionName: 'getEnumValue',
+ args: { listName: 'limitType' }
+ },
+ unit: {
+ rule: rules.FUNCTION,
+ functionName: 'getEnumValue',
+ args: { listName: 'limitUnit' }
+ }
+ },
+ [fileTypes.LKG]: {
+ operationalScope: {
+ rule: rules.FUNCTION,
+ functionName: 'processChoices'
+ },
+ referencingFeatureGroups: {
+ rule: rules.SKIP,
+ functionName: 'getFeatureGroups'
+ }
+ },
+ [fileTypes.NIC]: {
+ networkId: {
+ rule: rules.SKIP
+ }
+ },
+ [fileTypes.NIC_Q]: {},
+ [fileTypes.PROCESS]: {
+ type: {
+ rule: rules.FUNCTION,
+ functionName: 'getEnumValue',
+ args: { listName: 'processType' }
+ }
+ },
+ [fileTypes.VLM]: {
+ iconRef: {
+ rule: rules.SKIP
+ }
+ },
+ [fileTypes.VSP]: {
+ vendorId: {
+ rule: rules.SKIP
+ },
+ onboardingMethod: {
+ rule: rules.SKIP
+ },
+ validationData: {
+ rule: rules.SKIP
+ },
+ isOldVersion: {
+ rule: rules.SKIP
+ },
+ licensingVersion: {
+ rule: rules.FUNCTION,
+ functionName: 'fetchLMVersion'
+ },
+ category: {
+ rule: rules.FUNCTION,
+ functionName: 'fetchCategory'
+ },
+ subCategory: {
+ rule: rules.SKIP
+ }
+ },
+ [fileTypes.VSP_Q]: {
+ affinityData: {
+ rule: rules.SKIP
+ },
+ storageReplicationAcrossRegion: {
+ rule: rules.BOOLEAN,
+ trueValue: 'true',
+ falseValue: 'false'
+ }
+ },
+ [fileTypes.ORCHESTRATION_TEMPLATE_CANDIDATE]: {
+ modules: {
+ rule: rules.FUNCTION,
+ functionName: 'convertArrayToObject'
+ }
+ }
};
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
index 6985fcfaca..1630849b64 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorReducer.js
@@ -13,54 +13,54 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './MergeEditorConstants.js';
+import { actionTypes } from './MergeEditorConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.LOAD_CONFLICT: {
- let cdata = {...action.data};
- // let data = state.conflicts ? {...state.conflicts.data} : {} ;
- // data[cdata.id] = cdata;
- let conflicts = state.conflicts ? {...state.conflicts} : {};
- conflicts[cdata.id] = cdata;
- return {
- ...state,
- conflicts
- };
- }
- case actionTypes.DATA_PROCESSED: {
- let conflicts = {...state.conflicts};
- let {data} = action;
- if (data && data.cid) {
- let yours = {...conflicts[data.cid].yours};
- let theirs = {...conflicts[data.cid].theirs};
- let {yoursField, theirsField} = data;
- if (yoursField) {
- yours[yoursField.name] = yoursField.value;
- conflicts[data.cid].yours = yours;
- }
- if (theirsField) {
- theirs[theirsField.name] = theirsField.value;
- conflicts[data.cid].theirs = theirs;
- }
- }
- return {
- ...state,
- conflicts: {
- ...conflicts
- }
- };
- }
- case actionTypes.LOAD_CONFLICTS:
- let conflictFiles = [];
- if (action.data) {
- conflictFiles = [...action.data.conflictInfoList];
- }
- return {
- inMerge: conflictFiles.length > 0,
- conflictFiles
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.LOAD_CONFLICT: {
+ let cdata = { ...action.data };
+ // let data = state.conflicts ? {...state.conflicts.data} : {} ;
+ // data[cdata.id] = cdata;
+ let conflicts = state.conflicts ? { ...state.conflicts } : {};
+ conflicts[cdata.id] = cdata;
+ return {
+ ...state,
+ conflicts
+ };
+ }
+ case actionTypes.DATA_PROCESSED: {
+ let conflicts = { ...state.conflicts };
+ let { data } = action;
+ if (data && data.cid) {
+ let yours = { ...conflicts[data.cid].yours };
+ let theirs = { ...conflicts[data.cid].theirs };
+ let { yoursField, theirsField } = data;
+ if (yoursField) {
+ yours[yoursField.name] = yoursField.value;
+ conflicts[data.cid].yours = yours;
+ }
+ if (theirsField) {
+ theirs[theirsField.name] = theirsField.value;
+ conflicts[data.cid].theirs = theirs;
+ }
+ }
+ return {
+ ...state,
+ conflicts: {
+ ...conflicts
+ }
+ };
+ }
+ case actionTypes.LOAD_CONFLICTS:
+ let conflictFiles = [];
+ if (action.data) {
+ conflictFiles = [...action.data.conflictInfoList];
+ }
+ return {
+ inMerge: conflictFiles.length > 0,
+ conflictFiles
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
index 34d86419e7..a7e36a39fc 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
@@ -24,233 +24,389 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Radio from 'sdc-ui/lib/react/Radio.js';
import equal from 'deep-equal';
-import {ResolutionTypes} from './MergeEditorConstants.js';
+import { ResolutionTypes } from './MergeEditorConstants.js';
-class ConflictCategory extends React.Component {
- state = {
- resolution: ResolutionTypes.YOURS
- };
+class ConflictCategory extends React.Component {
+ state = {
+ resolution: ResolutionTypes.YOURS
+ };
- getTitle(conflictType, conflictName) {
- if (typeof conflictName === 'undefined' || conflictType === conflictName) {
- return i18n(conflictType);
- } else {
- return `${i18n(conflictType)}: ${conflictName}`;
- }
- }
+ getTitle(conflictType, conflictName) {
+ if (
+ typeof conflictName === 'undefined' ||
+ conflictType === conflictName
+ ) {
+ return i18n(conflictType);
+ } else {
+ return `${i18n(conflictType)}: ${conflictName}`;
+ }
+ }
- render() {
- let {collapseExpand, conflict: {id: conflictId, type, name}, isCollapsed, item: {id: itemId, version}, onResolveConflict} = this.props;
- let {resolution} = this.state;
- const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
+ render() {
+ let {
+ collapseExpand,
+ conflict: { id: conflictId, type, name },
+ isCollapsed,
+ item: { id: itemId, version },
+ onResolveConflict
+ } = this.props;
+ let { resolution } = this.state;
+ const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
- return (
- <div key={'conflictCategory_' + conflictId} >
- <GridSection className='conflict-section'>
- <GridItem >
- <div className='collapsible-section' onClick={collapseExpand}>
- <SVGIcon name={isCollapsed ? 'chevronDown' : 'chevronUp'} iconClassName={iconClass} />
- <div className='conflict-title'>{this.getTitle(type, name)}</div>
- </div>
- </GridItem>
- <GridItem className='yours'>
- <Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.YOURS} value='yours'
- onChange={() => this.setState({resolution: ResolutionTypes.YOURS})} data-test-id={'radio_' + conflictId + '_yours'} />
- </GridItem>
- <GridItem className='theirs'>
- <Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.THEIRS} value='theirs'
- onChange={() => this.setState({resolution: ResolutionTypes.THEIRS})} data-test-id={'radio_' + conflictId + '_theirs'} /></GridItem>
- <GridItem className='resolve'>
- <Button className='conflict-resolve-btn' btnType='outline' color='gray'
- onClick={() => onResolveConflict({conflictId, resolution, itemId, version})}>
- {i18n('Resolve')}
- </Button>
- </GridItem>
- </GridSection>
- <div>
- {isCollapsed && this.props.children}
- </div>
- </div>
- );
- }
-
-};
-
-class TextCompare extends React.Component {
- render() {
- // let rand = Math.random() * (3000 - 1) + 1;
- let {yours, theirs, field, type, isObjName, conflictsOnly} = this.props;
- let typeYours = typeof yours;
- let typeTheirs = typeof theirs;
+ return (
+ <div key={'conflictCategory_' + conflictId}>
+ <GridSection className="conflict-section">
+ <GridItem>
+ <div
+ className="collapsible-section"
+ onClick={collapseExpand}>
+ <SVGIcon
+ name={isCollapsed ? 'chevronDown' : 'chevronUp'}
+ iconClassName={iconClass}
+ />
+ <div className="conflict-title">
+ {this.getTitle(type, name)}
+ </div>
+ </div>
+ </GridItem>
+ <GridItem className="yours">
+ <Radio
+ name={'radio_' + conflictId}
+ checked={resolution === ResolutionTypes.YOURS}
+ value="yours"
+ onChange={() =>
+ this.setState({
+ resolution: ResolutionTypes.YOURS
+ })
+ }
+ data-test-id={'radio_' + conflictId + '_yours'}
+ />
+ </GridItem>
+ <GridItem className="theirs">
+ <Radio
+ name={'radio_' + conflictId}
+ checked={resolution === ResolutionTypes.THEIRS}
+ value="theirs"
+ onChange={() =>
+ this.setState({
+ resolution: ResolutionTypes.THEIRS
+ })
+ }
+ data-test-id={'radio_' + conflictId + '_theirs'}
+ />
+ </GridItem>
+ <GridItem className="resolve">
+ <Button
+ className="conflict-resolve-btn"
+ btnType="outline"
+ color="gray"
+ onClick={() =>
+ onResolveConflict({
+ conflictId,
+ resolution,
+ itemId,
+ version
+ })
+ }>
+ {i18n('Resolve')}
+ </Button>
+ </GridItem>
+ </GridSection>
+ <div>{isCollapsed && this.props.children}</div>
+ </div>
+ );
+ }
+}
- let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g,'/index');
- let level = type.split('/').length;
+class TextCompare extends React.Component {
+ render() {
+ // let rand = Math.random() * (3000 - 1) + 1;
+ let {
+ yours,
+ theirs,
+ field,
+ type,
+ isObjName,
+ conflictsOnly
+ } = this.props;
+ let typeYours = typeof yours;
+ let typeTheirs = typeof theirs;
- if (typeYours === 'boolean' || typeTheirs === 'boolean') {
- yours = yours ? i18n('Yes') : i18n('No');
- theirs = theirs ? i18n('Yes') : i18n('No');
- }
+ let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g, '/index');
+ let level = type.split('/').length;
+ if (typeYours === 'boolean' || typeTheirs === 'boolean') {
+ yours = yours ? i18n('Yes') : i18n('No');
+ theirs = theirs ? i18n('Yes') : i18n('No');
+ }
- /*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
+ /*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
return (<div className='merge-editor-text-field field-error'>{field} cannot be parsed for display</div>);
}*/
- let isDiff = yours !== theirs;
- if (!isObjName &&
- ((!isDiff && conflictsOnly) ||
- (yours === '' && theirs === '') ||
- (typeYours === 'undefined' && typeTheirs === 'undefined')
- )
- ) {
- return null;
- }
+ let isDiff = yours !== theirs;
+ if (
+ !isObjName &&
+ ((!isDiff && conflictsOnly) ||
+ (yours === '' && theirs === '') ||
+ (typeYours === 'undefined' && typeTheirs === 'undefined'))
+ ) {
+ return null;
+ }
- return (
- <GridSection className={isDiff ? 'merge-editor-text-field diff' : 'merge-editor-text-field'}>
- <GridItem className='field-col grid-col-title' stretch>
- <div className={`field ${isDiff ? 'diff' : ''} field-name level-${level} ${isObjName ? 'field-object-name' : ''}`}>
- {i18n(parsedType)}
- </div>
- </GridItem>
- <GridItem className='field-col grid-col-yours' stretch>
- <div className={`field field-yours ${!yours ? 'empty-field' : ''}`} >{yours || (isObjName ? '' : '━━')}</div>
- </GridItem>
- <GridItem className='field-col grid-col-theirs' stretch>
- <div className={`field field-theirs ${!theirs ? 'empty-field' : ''}`}>{theirs || (isObjName ? '' : '━━')}</div>
- </GridItem>
- <GridItem stretch/>
- </GridSection>
- );
- }
-};
+ return (
+ <GridSection
+ className={
+ isDiff
+ ? 'merge-editor-text-field diff'
+ : 'merge-editor-text-field'
+ }>
+ <GridItem className="field-col grid-col-title" stretch>
+ <div
+ className={`field ${
+ isDiff ? 'diff' : ''
+ } field-name level-${level} ${
+ isObjName ? 'field-object-name' : ''
+ }`}>
+ {i18n(parsedType)}
+ </div>
+ </GridItem>
+ <GridItem className="field-col grid-col-yours" stretch>
+ <div
+ className={`field field-yours ${
+ !yours ? 'empty-field' : ''
+ }`}>
+ {yours || (isObjName ? '' : '━━')}
+ </div>
+ </GridItem>
+ <GridItem className="field-col grid-col-theirs" stretch>
+ <div
+ className={`field field-theirs ${
+ !theirs ? 'empty-field' : ''
+ }`}>
+ {theirs || (isObjName ? '' : '━━')}
+ </div>
+ </GridItem>
+ <GridItem stretch />
+ </GridSection>
+ );
+ }
+}
class MergeEditorView extends React.Component {
- state = {
- collapsingSections: {},
- conflictsOnly: false
- };
+ state = {
+ collapsingSections: {},
+ conflictsOnly: false
+ };
- render() {
- let {conflicts, item, conflictFiles, onResolveConflict, currentScreen, resolution} = this.props;
+ render() {
+ let {
+ conflicts,
+ item,
+ conflictFiles,
+ onResolveConflict,
+ currentScreen,
+ resolution
+ } = this.props;
- return (
- <div className='merge-editor'>
- {conflictFiles && this.renderConflictTableTitles()}
- <div className='merge-editor-body'>
- {conflictFiles && conflictFiles.sort((a, b) => a.type > b.type).map(file => (
- <ConflictCategory key={'conflict_' + file.id} conflict={file} item={item} isCollapsed={this.state.collapsingSections[file.id]}
- collapseExpand={()=>{this.updateCollapseState(file.id);}}
- onResolveConflict={cDetails => onResolveConflict({...cDetails, currentScreen})}>
- {(conflicts && conflicts[file.id]) &&
- this.getUnion(conflicts[file.id].yours, conflicts[file.id].theirs).map(field => {
- return this.renderField(field, file, conflicts[file.id].yours[field], conflicts[file.id].theirs[field], resolution);
- })}
- </ConflictCategory>))}
- </div>
- </div>);
- }
+ return (
+ <div className="merge-editor">
+ {conflictFiles && this.renderConflictTableTitles()}
+ <div className="merge-editor-body">
+ {conflictFiles &&
+ conflictFiles
+ .sort((a, b) => a.type > b.type)
+ .map(file => (
+ <ConflictCategory
+ key={'conflict_' + file.id}
+ conflict={file}
+ item={item}
+ isCollapsed={
+ this.state.collapsingSections[file.id]
+ }
+ collapseExpand={() => {
+ this.updateCollapseState(file.id);
+ }}
+ onResolveConflict={cDetails =>
+ onResolveConflict({
+ ...cDetails,
+ currentScreen
+ })
+ }>
+ {conflicts &&
+ conflicts[file.id] &&
+ this.getUnion(
+ conflicts[file.id].yours,
+ conflicts[file.id].theirs
+ ).map(field => {
+ return this.renderField(
+ field,
+ file,
+ conflicts[file.id].yours[field],
+ conflicts[file.id].theirs[
+ field
+ ],
+ resolution
+ );
+ })}
+ </ConflictCategory>
+ ))}
+ </div>
+ </div>
+ );
+ }
- renderConflictTableTitles()
- {
- return (<GridSection className='conflict-titles-section'>
- <GridItem>
- {i18n('Page')}
- </GridItem>
- <GridItem className='yours'>
- {i18n('Local (Me)')}
- </GridItem>
- <GridItem className='theirs'>
- {i18n('Last Committed')}
- </GridItem>
- <GridItem className='resolve'>
- <Input
- label={i18n('Show Conflicts Only')}
- type='checkbox'
- value={this.state.conflictsOnly}
- onChange={e => this.setState({conflictsOnly: e}) } />
- </GridItem>
- </GridSection>);
- }
- // <Checkbox
- // label={i18n('Show Conflicts Only')}
- // value={this.state.conflictsOnly}
- // checked={this.state.conflictsOnly}
- // onChange={checked => this.setState({conflictsOnly: checked})} />
+ renderConflictTableTitles() {
+ return (
+ <GridSection className="conflict-titles-section">
+ <GridItem>{i18n('Page')}</GridItem>
+ <GridItem className="yours">{i18n('Local (Me)')}</GridItem>
+ <GridItem className="theirs">{i18n('Last Committed')}</GridItem>
+ <GridItem className="resolve">
+ <Input
+ label={i18n('Show Conflicts Only')}
+ type="checkbox"
+ value={this.state.conflictsOnly}
+ onChange={e => this.setState({ conflictsOnly: e })}
+ />
+ </GridItem>
+ </GridSection>
+ );
+ }
+ // <Checkbox
+ // label={i18n('Show Conflicts Only')}
+ // value={this.state.conflictsOnly}
+ // checked={this.state.conflictsOnly}
+ // onChange={checked => this.setState({conflictsOnly: checked})} />
- renderObjects(yours, theirs, fileType, field, id, resolution) {
- if (equal(yours, theirs)) {
- return;
- }
- let {conflictsOnly} = this.state;
- return (
- <div key={`obj_${fileType}/${field}_${id}`}>
- <TextCompare field={field} type={fileType} conflictsOnly={conflictsOnly} yours='' theirs='' isObjName resolution={resolution} />
- <div className='field-objects'>
- <div>
- {this.getUnion(yours, theirs).map(key =>
- this.renderField(
- key,
- {type: `${fileType}/${field}`, id},
- yours && yours[key],
- theirs && theirs[key]
- )
- )}
- </div>
- </div>
- </div>
- );
- }
+ renderObjects(yours, theirs, fileType, field, id, resolution) {
+ if (equal(yours, theirs)) {
+ return;
+ }
+ let { conflictsOnly } = this.state;
+ return (
+ <div key={`obj_${fileType}/${field}_${id}`}>
+ <TextCompare
+ field={field}
+ type={fileType}
+ conflictsOnly={conflictsOnly}
+ yours=""
+ theirs=""
+ isObjName
+ resolution={resolution}
+ />
+ <div className="field-objects">
+ <div>
+ {this.getUnion(yours, theirs).map(key =>
+ this.renderField(
+ key,
+ { type: `${fileType}/${field}`, id },
+ yours && yours[key],
+ theirs && theirs[key]
+ )
+ )}
+ </div>
+ </div>
+ </div>
+ );
+ }
- renderList(yours = [], theirs = [], type, field, id, resolution) {
- let theirsList = theirs.join(', ');
- let yoursList = yours.join(', ');
- let {conflictsOnly} = this.state;
- return (<TextCompare key={'text_' + id + '_' + field}
- field={field} type={type} yours={yoursList} theirs={theirsList} conflictsOnly={conflictsOnly} resolution={resolution} />);
- }
+ renderList(yours = [], theirs = [], type, field, id, resolution) {
+ let theirsList = theirs.join(', ');
+ let yoursList = yours.join(', ');
+ let { conflictsOnly } = this.state;
+ return (
+ <TextCompare
+ key={'text_' + id + '_' + field}
+ field={field}
+ type={type}
+ yours={yoursList}
+ theirs={theirsList}
+ conflictsOnly={conflictsOnly}
+ resolution={resolution}
+ />
+ );
+ }
- renderField(field, file, yours, theirs, resolution) {
- if (yours) {
- if (Array.isArray(yours)) {
- return this.renderList(yours, theirs, file.type, field, file.id, resolution);
- }
- else if (typeof yours === 'object') {
- return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
- }
- } else if (theirs) {
- if (Array.isArray(theirs)) {
- return this.renderList(yours, theirs, file.type, field, file.id, resolution);
- }
- else if (typeof theirs === 'object') {
- return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
- }
- }
- let {conflictsOnly} = this.state;
- return (<TextCompare key={'text_' + file.id + '_' + field} resolution={resolution}
- field={field} type={file.type} yours={yours} theirs={theirs} conflictsOnly={conflictsOnly} />);
- }
+ renderField(field, file, yours, theirs, resolution) {
+ if (yours) {
+ if (Array.isArray(yours)) {
+ return this.renderList(
+ yours,
+ theirs,
+ file.type,
+ field,
+ file.id,
+ resolution
+ );
+ } else if (typeof yours === 'object') {
+ return this.renderObjects(
+ yours,
+ theirs,
+ file.type,
+ field,
+ file.id,
+ resolution
+ );
+ }
+ } else if (theirs) {
+ if (Array.isArray(theirs)) {
+ return this.renderList(
+ yours,
+ theirs,
+ file.type,
+ field,
+ file.id,
+ resolution
+ );
+ } else if (typeof theirs === 'object') {
+ return this.renderObjects(
+ yours,
+ theirs,
+ file.type,
+ field,
+ file.id,
+ resolution
+ );
+ }
+ }
+ let { conflictsOnly } = this.state;
+ return (
+ <TextCompare
+ key={'text_' + file.id + '_' + field}
+ resolution={resolution}
+ field={field}
+ type={file.type}
+ yours={yours}
+ theirs={theirs}
+ conflictsOnly={conflictsOnly}
+ />
+ );
+ }
- getUnion(yours = {},theirs = {}) {
- let yoursKeys = Object.keys(yours);
- let theirsKeys = Object.keys(theirs);
- let myUn = union(yoursKeys, theirsKeys);
- return myUn;//.sort((a, b) => a > b);
- }
+ getUnion(yours = {}, theirs = {}) {
+ let yoursKeys = Object.keys(yours);
+ let theirsKeys = Object.keys(theirs);
+ let myUn = union(yoursKeys, theirsKeys);
+ return myUn; //.sort((a, b) => a > b);
+ }
- updateCollapseState(conflictId) {
- const {fetchConflict, item: {id: itemId, version}, /*conflicts*/} = this.props;
- let isCollapsed = this.state.collapsingSections[conflictId];
- // if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
- if (!isCollapsed) {
- fetchConflict({cid: conflictId, itemId, version});
- }
- this.setState({
- collapsingSections: {
- ...this.state.collapsingSections,
- [conflictId]: !isCollapsed
- }
- });
- }
+ updateCollapseState(conflictId) {
+ const {
+ fetchConflict,
+ item: { id: itemId, version } /*conflicts*/
+ } = this.props;
+ let isCollapsed = this.state.collapsingSections[conflictId];
+ // if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
+ if (!isCollapsed) {
+ fetchConflict({ cid: conflictId, itemId, version });
+ }
+ this.setState({
+ collapsingSections: {
+ ...this.state.collapsingSections,
+ [conflictId]: !isCollapsed
+ }
+ });
+ }
}
export default MergeEditorView;
diff --git a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
index b17536f446..5b28c5d7fa 100644
--- a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
+++ b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
@@ -32,40 +32,40 @@ import Revisions from 'sdc-app/onboarding/revisions/Revisions.js';
import VendorSelector from 'sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx';
export const modalContentMapper = {
- SOFTWARE_PRODUCT_CREATION: 'SOFTWARE_PRODUCT_CREATION',
- LICENSE_MODEL_CREATION: 'LICENSE_MODEL_CREATION',
- SUMBIT_ERROR_RESPONSE: 'SUMBIT_ERROR_RESPONSE',
- COMPONENT_COMPUTE_FLAVOR_EDITOR: 'COMPONENT_COMPUTE_FLAVOR_EDITOR',
- NIC_EDITOR: 'NIC_EDITOR',
- NIC_CREATION: 'NIC_CREATION',
- COMPONENT_CREATION: 'COMPONENT_CREATION',
- SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR : 'SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR',
- DEPLOYMENT_FLAVOR_EDITOR: 'DEPLOYMENT_FLAVOR_EDITOR',
- MANAGE_PERMISSIONS: 'MANAGE_PERMISSIONS',
- VERSION_CREATION: 'VERSION_CREATION',
- COMMIT_COMMENT: 'COMMIT_COMMENT',
- VERSION_TREE: 'VERSION_TREE',
- MERGE_EDITOR: 'MERGE_EDITOR',
- REVISIONS_LIST: 'REVISIONS_LIST',
- VENDOR_SELECTOR: 'VENDOR_SELECTOR'
-
+ SOFTWARE_PRODUCT_CREATION: 'SOFTWARE_PRODUCT_CREATION',
+ LICENSE_MODEL_CREATION: 'LICENSE_MODEL_CREATION',
+ SUMBIT_ERROR_RESPONSE: 'SUMBIT_ERROR_RESPONSE',
+ COMPONENT_COMPUTE_FLAVOR_EDITOR: 'COMPONENT_COMPUTE_FLAVOR_EDITOR',
+ NIC_EDITOR: 'NIC_EDITOR',
+ NIC_CREATION: 'NIC_CREATION',
+ COMPONENT_CREATION: 'COMPONENT_CREATION',
+ SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR:
+ 'SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR',
+ DEPLOYMENT_FLAVOR_EDITOR: 'DEPLOYMENT_FLAVOR_EDITOR',
+ MANAGE_PERMISSIONS: 'MANAGE_PERMISSIONS',
+ VERSION_CREATION: 'VERSION_CREATION',
+ COMMIT_COMMENT: 'COMMIT_COMMENT',
+ VERSION_TREE: 'VERSION_TREE',
+ MERGE_EDITOR: 'MERGE_EDITOR',
+ REVISIONS_LIST: 'REVISIONS_LIST',
+ VENDOR_SELECTOR: 'VENDOR_SELECTOR'
};
export const modalContentComponents = {
- SUMBIT_ERROR_RESPONSE: SubmitErrorResponse,
- SOFTWARE_PRODUCT_CREATION: SoftwareProductCreation,
- VERSION_CREATION: VersionPageCreation,
- LICENSE_MODEL_CREATION: LicenseModelCreation,
- COMPONENT_COMPUTE_FLAVOR_EDITOR: ComputeFlavorEditor,
- NIC_EDITOR: SoftwareProductComponentsNICEditor,
- NIC_CREATION: NICCreation,
- COMPONENT_CREATION: ComponentCreation,
- SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR : SoftwareProductComponentImageEditor,
- DEPLOYMENT_FLAVOR_EDITOR: SoftwareProductDeploymentEditor,
- MANAGE_PERMISSIONS: PermissionsManager,
- COMMIT_COMMENT: CommitCommentModal,
- VERSION_TREE: Tree,
- MERGE_EDITOR: MergeEditor,
- REVISIONS_LIST: Revisions,
- VENDOR_SELECTOR: VendorSelector
+ SUMBIT_ERROR_RESPONSE: SubmitErrorResponse,
+ SOFTWARE_PRODUCT_CREATION: SoftwareProductCreation,
+ VERSION_CREATION: VersionPageCreation,
+ LICENSE_MODEL_CREATION: LicenseModelCreation,
+ COMPONENT_COMPUTE_FLAVOR_EDITOR: ComputeFlavorEditor,
+ NIC_EDITOR: SoftwareProductComponentsNICEditor,
+ NIC_CREATION: NICCreation,
+ COMPONENT_CREATION: ComponentCreation,
+ SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR: SoftwareProductComponentImageEditor,
+ DEPLOYMENT_FLAVOR_EDITOR: SoftwareProductDeploymentEditor,
+ MANAGE_PERMISSIONS: PermissionsManager,
+ COMMIT_COMMENT: CommitCommentModal,
+ VERSION_TREE: Tree,
+ MERGE_EDITOR: MergeEditor,
+ REVISIONS_LIST: Revisions,
+ VENDOR_SELECTOR: VendorSelector
};
diff --git a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
index 916f724b40..6ac6d753d4 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js
@@ -13,133 +13,185 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './JSONSchemaReducerConstants.js';
+import { actionTypes } from './JSONSchemaReducerConstants.js';
import Validator from 'nfvo-utils/Validator.js';
import JSONSchema from 'nfvo-utils/json/JSONSchema.js';
import JSONPointer from 'nfvo-utils/json/JSONPointer.js';
import forOwn from 'lodash/forOwn.js';
import isArray from 'lodash/isArray.js';
-
function flattenData(data, result, pointer = '') {
- let newPointer = pointer;
- if (typeof data === 'object' && !isArray(data)) {
- for (let i in data) {
- newPointer = newPointer ? newPointer + '/' + i : i;
- flattenData(data[i], result, newPointer);
- newPointer = pointer;
- }
- } else {
- result[newPointer] = data;
- }
+ let newPointer = pointer;
+ if (typeof data === 'object' && !isArray(data)) {
+ for (let i in data) {
+ newPointer = newPointer ? newPointer + '/' + i : i;
+ flattenData(data[i], result, newPointer);
+ newPointer = pointer;
+ }
+ } else {
+ result[newPointer] = data;
+ }
}
-function updateSchemaDataAndValidateReducer (state = {}, action, questionnaireName) {
- let genericFieldInfoClone;
- switch (action.type) {
- case actionTypes.DATA_LOADED:
- if (questionnaireName !== action.qName) {return {...state};}
- const schema = action.payload.qschema;
- let schemaLoader = new JSONSchema();
- schemaLoader.setSchema(schema);
- schemaLoader.setSupportedValidationFunctions(Object.keys(Validator.globalValidationFunctions));
- let {genericFieldInfo} = schemaLoader.flattenSchema();
-
- let data = action.payload.qdata;
- let dataMap = {};
- flattenData(data, dataMap);
-
- return {
- ...state,
- qdata: action.payload.qdata, // the original hierarchical data. to be used for submit and save
- qgenericFieldInfo : genericFieldInfo, // information about the fields that the view will require and reducer will need, such as validations, enum to use, etc.
- dataMap // flattened schema data for ease of use
- };
-
- case actionTypes.DATA_CHANGED:
- let changedData = action.deltaData;
- if (questionnaireName !== action.qName) {return {...state};}
-
- genericFieldInfoClone = {...state.qgenericFieldInfo};
- let qDataClone = {...state.qdata};
- let dataMapClone = {...state.dataMap};
-
- forOwn(changedData,(value, key) => {
- if (state.qgenericFieldInfo[key]) {
- let result = Validator.validate(key, value, state.qgenericFieldInfo[key].validations, state, action.customValidations);
- genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
- qDataClone = JSONPointer.setValue(state.qdata, '/' + key, value);
- dataMapClone[key] = value;
- }
- });
-
- return {
- ...state,
- qdata: qDataClone,
- dataMap: dataMapClone,
- qgenericFieldInfo: genericFieldInfoClone
- };
-
- case actionTypes.VALIDATE_DATA:
- let specificFields = action.data;
- if (questionnaireName !== action.qName) {return {...state};}
- genericFieldInfoClone = {...state.qgenericFieldInfo};
- forOwn(specificFields,(value, key) => {
- let result = Validator.validate(key, value, state.qgenericFieldInfo[key].validations, state, action.customValidations);
- genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
- });
- return {
- ...state,
- formReady: null,
- qgenericFieldInfo: genericFieldInfoClone
- };
-
- case actionTypes.VALIDATE_FORM:
- if (questionnaireName !== action.qName) {return {...state};}
- genericFieldInfoClone = {...state.qgenericFieldInfo};
- let formReady = true;
- forOwn(state.qgenericFieldInfo,(value, key) => {
- let val = state.dataMap[key] ? state.dataMap[key] : '';
- let result = Validator.validate(key, val, state.qgenericFieldInfo[key].validations, state, action.customValidations);
- genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText};
- if (!result.isValid) {
- formReady = false;
- }
- });
- return {
- ...state,
- formReady,
- qgenericFieldInfo: genericFieldInfoClone
- };
-
- default:
- return state;
- }
-};
+function updateSchemaDataAndValidateReducer(
+ state = {},
+ action,
+ questionnaireName
+) {
+ let genericFieldInfoClone;
+ switch (action.type) {
+ case actionTypes.DATA_LOADED:
+ if (questionnaireName !== action.qName) {
+ return { ...state };
+ }
+ const schema = action.payload.qschema;
+ let schemaLoader = new JSONSchema();
+ schemaLoader.setSchema(schema);
+ schemaLoader.setSupportedValidationFunctions(
+ Object.keys(Validator.globalValidationFunctions)
+ );
+ let { genericFieldInfo } = schemaLoader.flattenSchema();
+
+ let data = action.payload.qdata;
+ let dataMap = {};
+ flattenData(data, dataMap);
+
+ return {
+ ...state,
+ qdata: action.payload.qdata, // the original hierarchical data. to be used for submit and save
+ qgenericFieldInfo: genericFieldInfo, // information about the fields that the view will require and reducer will need, such as validations, enum to use, etc.
+ dataMap // flattened schema data for ease of use
+ };
+
+ case actionTypes.DATA_CHANGED:
+ let changedData = action.deltaData;
+ if (questionnaireName !== action.qName) {
+ return { ...state };
+ }
+
+ genericFieldInfoClone = { ...state.qgenericFieldInfo };
+ let qDataClone = { ...state.qdata };
+ let dataMapClone = { ...state.dataMap };
+
+ forOwn(changedData, (value, key) => {
+ if (state.qgenericFieldInfo[key]) {
+ let result = Validator.validate(
+ key,
+ value,
+ state.qgenericFieldInfo[key].validations,
+ state,
+ action.customValidations
+ );
+ genericFieldInfoClone[key] = {
+ ...genericFieldInfoClone[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ qDataClone = JSONPointer.setValue(
+ state.qdata,
+ '/' + key,
+ value
+ );
+ dataMapClone[key] = value;
+ }
+ });
+
+ return {
+ ...state,
+ qdata: qDataClone,
+ dataMap: dataMapClone,
+ qgenericFieldInfo: genericFieldInfoClone
+ };
+
+ case actionTypes.VALIDATE_DATA:
+ let specificFields = action.data;
+ if (questionnaireName !== action.qName) {
+ return { ...state };
+ }
+ genericFieldInfoClone = { ...state.qgenericFieldInfo };
+ forOwn(specificFields, (value, key) => {
+ let result = Validator.validate(
+ key,
+ value,
+ state.qgenericFieldInfo[key].validations,
+ state,
+ action.customValidations
+ );
+ genericFieldInfoClone[key] = {
+ ...genericFieldInfoClone[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ });
+ return {
+ ...state,
+ formReady: null,
+ qgenericFieldInfo: genericFieldInfoClone
+ };
+
+ case actionTypes.VALIDATE_FORM:
+ if (questionnaireName !== action.qName) {
+ return { ...state };
+ }
+ genericFieldInfoClone = { ...state.qgenericFieldInfo };
+ let formReady = true;
+ forOwn(state.qgenericFieldInfo, (value, key) => {
+ let val = state.dataMap[key] ? state.dataMap[key] : '';
+ let result = Validator.validate(
+ key,
+ val,
+ state.qgenericFieldInfo[key].validations,
+ state,
+ action.customValidations
+ );
+ genericFieldInfoClone[key] = {
+ ...genericFieldInfoClone[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ if (!result.isValid) {
+ formReady = false;
+ }
+ });
+ return {
+ ...state,
+ formReady,
+ qgenericFieldInfo: genericFieldInfoClone
+ };
+
+ default:
+ return state;
+ }
+}
export function createJSONSchemaReducer(questionnaireName) {
- return (state = {}, action) => {
- return updateSchemaDataAndValidateReducer(state, action, questionnaireName);
- };
-};
-
-export function createComposedJSONSchemaReducer(questionnaireName, additionalActionsReducer) {
- return (state = {}, action) => {
- if(action.type === actionTypes.VALIDATE_DATA ||
- action.type === actionTypes.VALIDATE_FORM ||
- action.type === actionTypes.DATA_CHANGED ||
- action.type === actionTypes.DATA_LOADED
- ) {
- return updateSchemaDataAndValidateReducer(state, action, questionnaireName);
- } else {
- return additionalActionsReducer(state, action);
- }
- };
-};
-
-
-
-
-
-
+ return (state = {}, action) => {
+ return updateSchemaDataAndValidateReducer(
+ state,
+ action,
+ questionnaireName
+ );
+ };
+}
+export function createComposedJSONSchemaReducer(
+ questionnaireName,
+ additionalActionsReducer
+) {
+ return (state = {}, action) => {
+ if (
+ action.type === actionTypes.VALIDATE_DATA ||
+ action.type === actionTypes.VALIDATE_FORM ||
+ action.type === actionTypes.DATA_CHANGED ||
+ action.type === actionTypes.DATA_LOADED
+ ) {
+ return updateSchemaDataAndValidateReducer(
+ state,
+ action,
+ questionnaireName
+ );
+ } else {
+ return additionalActionsReducer(state, action);
+ }
+ };
+}
diff --git a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
index 6007b878dd..439613d949 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducerConstants.js
@@ -16,8 +16,8 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- DATA_LOADED: null,
- DATA_CHANGED: null,
- VALIDATE_FORM: null,
- VALIDATE_DATA: null
+ DATA_LOADED: null,
+ DATA_CHANGED: null,
+ VALIDATE_FORM: null,
+ VALIDATE_DATA: null
});
diff --git a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
index 49f1e3d415..30497704b4 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducer.js
@@ -13,89 +13,135 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './PlainDataReducerConstants.js';
+import { actionTypes } from './PlainDataReducerConstants.js';
import Validator from 'nfvo-utils/Validator.js';
import forOwn from 'lodash/forOwn.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
function updateDataAndValidateReducer(state = {}, action) {
- let genericFieldInfoCopy;
- switch (action.type) {
- case actionTypes.DATA_CHANGED:
- let changed = action.deltaData;
- if (!action.formName || (state.formName !== action.formName)) {return {...state};}
- genericFieldInfoCopy = {...state.genericFieldInfo};
- forOwn(changed,(value, key) => {
- if (state.genericFieldInfo[key]) {
- let result = Validator.validate(key, value, state.genericFieldInfo[key].validations, state, action.customValidations);
- genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
- }
- });
- return {
- ...state,
- formReady: null,
- data: {
- ...state.data,
- ...action.deltaData
- },
- genericFieldInfo: genericFieldInfoCopy
- };
- case actionTypes.VALIDATE_FORM:
- if (!action.formName || (state.formName !== action.formName)) {return {...state};}
- genericFieldInfoCopy = {...state.genericFieldInfo};
- let formReady = true;
- forOwn(state.genericFieldInfo,(value, key) => {
- let val = state.data && state.data[key] ? state.data[key] : '';
- let result = Validator.validate(key, val, state.genericFieldInfo[key].validations, state, {});
- if(val.choice !== undefined) {
- result = Validator.validate(key, val.choice, state.genericFieldInfo[key].validations, state, {});
- }
- if(val.choice !== undefined && val.choice === optionInputOther.OTHER) {
- result = Validator.validate(key, val.other, state.genericFieldInfo[key].validations, state, {});
- }
- genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
- if (!result.isValid) {
- formReady = false;
- }
- });
- return {
- ...state,
- formReady,
- genericFieldInfo: genericFieldInfoCopy
- };
- case actionTypes.VALIDATE_DATA:
- let specificFields = action.data;
- if (!action.formName || (state.formName !== action.formName)) {return {...state};}
- genericFieldInfoCopy = {...state.genericFieldInfo};
- forOwn(specificFields,(value, key) => {
- let result = Validator.validate(key, value, state.genericFieldInfo[key].validations, state, action.customValidations);
- genericFieldInfoCopy[key] = {...genericFieldInfoCopy[key], isValid: result.isValid, errorText: result.errorText};
- });
- return {
- ...state,
- formReady: null,
- genericFieldInfo: genericFieldInfoCopy
- };
- default:
- return state;
- }
-};
+ let genericFieldInfoCopy;
+ switch (action.type) {
+ case actionTypes.DATA_CHANGED:
+ let changed = action.deltaData;
+ if (!action.formName || state.formName !== action.formName) {
+ return { ...state };
+ }
+ genericFieldInfoCopy = { ...state.genericFieldInfo };
+ forOwn(changed, (value, key) => {
+ if (state.genericFieldInfo[key]) {
+ let result = Validator.validate(
+ key,
+ value,
+ state.genericFieldInfo[key].validations,
+ state,
+ action.customValidations
+ );
+ genericFieldInfoCopy[key] = {
+ ...genericFieldInfoCopy[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ }
+ });
+ return {
+ ...state,
+ formReady: null,
+ data: {
+ ...state.data,
+ ...action.deltaData
+ },
+ genericFieldInfo: genericFieldInfoCopy
+ };
+ case actionTypes.VALIDATE_FORM:
+ if (!action.formName || state.formName !== action.formName) {
+ return { ...state };
+ }
+ genericFieldInfoCopy = { ...state.genericFieldInfo };
+ let formReady = true;
+ forOwn(state.genericFieldInfo, (value, key) => {
+ let val = state.data && state.data[key] ? state.data[key] : '';
+ let result = Validator.validate(
+ key,
+ val,
+ state.genericFieldInfo[key].validations,
+ state,
+ {}
+ );
+ if (val.choice !== undefined) {
+ result = Validator.validate(
+ key,
+ val.choice,
+ state.genericFieldInfo[key].validations,
+ state,
+ {}
+ );
+ }
+ if (
+ val.choice !== undefined &&
+ val.choice === optionInputOther.OTHER
+ ) {
+ result = Validator.validate(
+ key,
+ val.other,
+ state.genericFieldInfo[key].validations,
+ state,
+ {}
+ );
+ }
+ genericFieldInfoCopy[key] = {
+ ...genericFieldInfoCopy[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ if (!result.isValid) {
+ formReady = false;
+ }
+ });
+ return {
+ ...state,
+ formReady,
+ genericFieldInfo: genericFieldInfoCopy
+ };
+ case actionTypes.VALIDATE_DATA:
+ let specificFields = action.data;
+ if (!action.formName || state.formName !== action.formName) {
+ return { ...state };
+ }
+ genericFieldInfoCopy = { ...state.genericFieldInfo };
+ forOwn(specificFields, (value, key) => {
+ let result = Validator.validate(
+ key,
+ value,
+ state.genericFieldInfo[key].validations,
+ state,
+ action.customValidations
+ );
+ genericFieldInfoCopy[key] = {
+ ...genericFieldInfoCopy[key],
+ isValid: result.isValid,
+ errorText: result.errorText
+ };
+ });
+ return {
+ ...state,
+ formReady: null,
+ genericFieldInfo: genericFieldInfoCopy
+ };
+ default:
+ return state;
+ }
+}
export function createPlainDataReducer(loadReducer) {
- return (state = {}, action) => {
- if(action.type === actionTypes.VALIDATE_DATA ||
- action.type === actionTypes.VALIDATE_FORM ||
- action.type === actionTypes.DATA_CHANGED
- ) {
- return updateDataAndValidateReducer(state, action);
- } else {
- return loadReducer(state, action);
- }
- };
-};
-
-
-
-
-
-
+ return (state = {}, action) => {
+ if (
+ action.type === actionTypes.VALIDATE_DATA ||
+ action.type === actionTypes.VALIDATE_FORM ||
+ action.type === actionTypes.DATA_CHANGED
+ ) {
+ return updateDataAndValidateReducer(state, action);
+ } else {
+ return loadReducer(state, action);
+ }
+ };
+}
diff --git a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
index 135361dd20..8c38483267 100644
--- a/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
+++ b/openecomp-ui/src/sdc-app/common/reducers/PlainDataReducerConstants.js
@@ -16,7 +16,7 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- DATA_CHANGED: null,
- VALIDATE_FORM: null,
- VALIDATE_DATA: null
+ DATA_CHANGED: null,
+ VALIDATE_FORM: null,
+ VALIDATE_DATA: null
});
diff --git a/openecomp-ui/src/sdc-app/config/Configuration.js b/openecomp-ui/src/sdc-app/config/Configuration.js
index 8444e3fa61..b450d47352 100644
--- a/openecomp-ui/src/sdc-app/config/Configuration.js
+++ b/openecomp-ui/src/sdc-app/config/Configuration.js
@@ -16,47 +16,55 @@
import configData from './config.json';
class Configuration {
+ get(key) {
+ return configData[key];
+ }
- get(key) {
- return configData[key];
- }
+ set(key, value) {
+ var prev = configData[key];
+ configData[key] = value;
+ return prev;
+ }
- set(key, value) {
- var prev = configData[key];
- configData[key] = value;
- return prev;
- }
+ setCatalogApiRoot(CatalogApiRoot) {
+ let restCatalogPrefix = CatalogApiRoot,
+ restPrefix = CatalogApiRoot.replace(
+ /\/feProxy\b[^:]*$/,
+ '/feProxy/onboarding-api'
+ );
- setCatalogApiRoot(CatalogApiRoot) {
- let restCatalogPrefix = CatalogApiRoot,
- restPrefix = CatalogApiRoot.replace(/\/feProxy\b[^:]*$/, '/feProxy/onboarding-api');
+ this.set('restPrefix', restPrefix);
+ this.set('restCatalogPrefix', restCatalogPrefix);
+ }
- this.set('restPrefix', restPrefix);
- this.set('restCatalogPrefix', restCatalogPrefix);
- }
+ setCatalogApiHeaders(CatalogApiHeaders) {
+ this.set('CatalogApiHeaders', CatalogApiHeaders);
- setCatalogApiHeaders(CatalogApiHeaders) {
- this.set('CatalogApiHeaders', CatalogApiHeaders);
-
- let {userId: {value: UserID} = {}} = CatalogApiHeaders;
- this.set('UserID', UserID);
- }
+ let { userId: { value: UserID } = {} } = CatalogApiHeaders;
+ this.set('UserID', UserID);
+ }
}
const configuration = new Configuration();
(function setDefaultRestPrefixes(configuration) {
- configuration.set('restPrefix', configuration.get('defaultRestPrefix'));
- configuration.set('restCatalogPrefix', configuration.get('defaultRestCatalogPrefix'));
- configuration.set('appContextPath', configuration.get('appContextPath'));
+ configuration.set('restPrefix', configuration.get('defaultRestPrefix'));
+ configuration.set(
+ 'restCatalogPrefix',
+ configuration.get('defaultRestCatalogPrefix')
+ );
+ configuration.set('appContextPath', configuration.get('appContextPath'));
})(configuration);
(function setDefaultWebsocketConfig(configuration) {
- let websocketPort = configuration.get('defaultWebsocketPort');
- if (DEBUG) {
- websocketPort = configuration.get('defaultDebugWebsocketPort');
- }
- configuration.set('websocketPort', websocketPort);
- configuration.set('websocketPath', configuration.get('defaultWebsocketPath'));
+ let websocketPort = configuration.get('defaultWebsocketPort');
+ if (DEBUG) {
+ websocketPort = configuration.get('defaultDebugWebsocketPort');
+ }
+ configuration.set('websocketPort', websocketPort);
+ configuration.set(
+ 'websocketPath',
+ configuration.get('defaultWebsocketPath')
+ );
})(configuration);
export default configuration;
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js b/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
index 5bb911d090..5ab5480167 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesActionHelper.js
@@ -15,26 +15,30 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './FeaturesConstants.js';
-
+import { actionTypes } from './FeaturesConstants.js';
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/togglz`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/togglz`;
}
function fetchList() {
- return RestAPIUtil.fetch(baseUrl());
+ return RestAPIUtil.fetch(baseUrl());
}
export default {
- getFeaturesList(dispatch) {
- return fetchList().then(response => {
- dispatch({
- type: actionTypes.FEATURES_LIST_LOADED,
- features: response.features
- });
- }).catch(() => console.error('An exception occured while trying to fetch the toggleZ features.') );
- }
+ getFeaturesList(dispatch) {
+ return fetchList()
+ .then(response => {
+ dispatch({
+ type: actionTypes.FEATURES_LIST_LOADED,
+ features: response.features
+ });
+ })
+ .catch(() =>
+ console.error(
+ 'An exception occured while trying to fetch the toggleZ features.'
+ )
+ );
+ }
};
-
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesConstants.js b/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
index f962d243d5..314e86ad3d 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesConstants.js
@@ -16,10 +16,10 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- FEATURES_LIST_LOADED: null
+ FEATURES_LIST_LOADED: null
});
export const featureToggleNames = {
- ARCHIVE_ITEM: 'ARCHIVE_ITEM',
- FILTER: 'FILTER'
-}; \ No newline at end of file
+ ARCHIVE_ITEM: 'ARCHIVE_ITEM',
+ FILTER: 'FILTER'
+};
diff --git a/openecomp-ui/src/sdc-app/features/FeaturesReducer.js b/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
index d7c8624d54..064afe992d 100644
--- a/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
+++ b/openecomp-ui/src/sdc-app/features/FeaturesReducer.js
@@ -14,13 +14,13 @@
* permissions and limitations under the License.
*/
- import {actionTypes} from './FeaturesConstants.js';
+import { actionTypes } from './FeaturesConstants.js';
- export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FEATURES_LIST_LOADED:
- return [...action.features];
- default:
- return state;
- }
- }; \ No newline at end of file
+export default (state = [], action) => {
+ switch (action.type) {
+ case actionTypes.FEATURES_LIST_LOADED:
+ return [...action.features];
+ default:
+ return state;
+ }
+};
diff --git a/openecomp-ui/src/sdc-app/features/featureToggle.js b/openecomp-ui/src/sdc-app/features/featureToggle.js
index 5e0df1448f..d33c76e523 100644
--- a/openecomp-ui/src/sdc-app/features/featureToggle.js
+++ b/openecomp-ui/src/sdc-app/features/featureToggle.js
@@ -14,47 +14,48 @@
* permissions and limitations under the License.
*/
-
- /**
+/**
* Feature toggling decorator
- * usage:
- *
+ * usage:
+ *
* @featureToggle('FeatureName')
* class Example extends React.Component {
* render() {
* return (<div>test feature</div>);
* }
* }
- *
- * OR
- *
+ *
+ * OR
+ *
* const TestFeature = () => (<div>test feature</div>)
* export default featureToggle('FeatureName')(TestFeature)
- *
+ *
*/
import React from 'react';
import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
+
+export const FeatureComponent = props => {
+ const { features = [], featureName, InnerComponent, ...otherProps } = props;
+ const AComp = InnerComponent.AComp ? InnerComponent.AComp : InnerComponent;
-export const FeatureComponent = (props) => {
- const {features = [], featureName, InnerComponent, ...otherProps} = props;
- const AComp = InnerComponent.AComp ? InnerComponent.AComp : InnerComponent;
-
- return !!features.find(el => el.name === featureName && el.active) ?
- <AComp {...otherProps}/>
- : InnerComponent.BComp ? <InnerComponent.BComp {...otherProps}/> : null;
+ return !!features.find(el => el.name === featureName && el.active) ? (
+ <AComp {...otherProps} />
+ ) : InnerComponent.BComp ? (
+ <InnerComponent.BComp {...otherProps} />
+ ) : null;
};
FeatureComponent.propTypes = {
- features: PropTypes.array,
- featureName: PropTypes.string.isRequired
+ features: PropTypes.array,
+ featureName: PropTypes.string.isRequired
};
-
export default function featureToggle(featureName) {
- return (InnerComponent) => {
- return connect(({features}) => {return {features, featureName, InnerComponent};})(FeatureComponent);
- };
+ return InnerComponent => {
+ return connect(({ features }) => {
+ return { features, featureName, InnerComponent };
+ })(FeatureComponent);
+ };
}
-
diff --git a/openecomp-ui/src/sdc-app/features/restToggle.js b/openecomp-ui/src/sdc-app/features/restToggle.js
index c90521dd7e..505dace4e7 100644
--- a/openecomp-ui/src/sdc-app/features/restToggle.js
+++ b/openecomp-ui/src/sdc-app/features/restToggle.js
@@ -16,9 +16,9 @@
import store from 'sdc-app/AppStore.js';
-
-export default ({featureName, restFunction, mockResult}) => {
- const {features} = store.getState();
- return !!features.find(el => el.name === featureName && el.active) ?
- restFunction() : Promise.resolve(mockResult);
-}; \ No newline at end of file
+export default ({ featureName, restFunction, mockResult }) => {
+ const { features } = store.getState();
+ return !!features.find(el => el.name === featureName && el.active)
+ ? restFunction()
+ : Promise.resolve(mockResult);
+};
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
index 61a419b314..9fb65f37d4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
@@ -15,171 +15,204 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, enums} from './FlowsConstants.js';
+import { actionTypes, enums } from './FlowsConstants.js';
import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js';
-
function baseUrl(serviceId, artifactId = '') {
- const restCatalogPrefix = Configuration.get('restCatalogPrefix');
- return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
+ const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+ return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
}
function encodeDataToBase64(dataAsString) {
- return window.btoa(dataAsString);
+ return window.btoa(dataAsString);
}
function decodeDataToBase64(encodedData) {
- return window.atob(encodedData);
+ return window.atob(encodedData);
}
function encodeContent(flowData) {
- let data = {
- VERSION: {
- major: 1,
- minor: 0
- },
- description: flowData.description,
- sequenceDiagramModel: flowData.sequenceDiagramModel
- };
-
- return encodeDataToBase64(JSON.stringify(data));
+ let data = {
+ VERSION: {
+ major: 1,
+ minor: 0
+ },
+ description: flowData.description,
+ sequenceDiagramModel: flowData.sequenceDiagramModel
+ };
+
+ return encodeDataToBase64(JSON.stringify(data));
}
function decodeContent(base64Contents) {
- let description, sequenceDiagramModel;
- let payload = JSON.parse(decodeDataToBase64(base64Contents));
-
- if (payload.VERSION === undefined) {
- description = payload.description || 'Please, provide description...';
- sequenceDiagramModel = payload.data || payload;
- sequenceDiagramModel = sequenceDiagramModel.model || sequenceDiagramModel;
-
- }
- else if (payload.VERSION.major === 1) {
- description = payload.description;
- sequenceDiagramModel = payload.sequenceDiagramModel;
- }
-
- return {
- description,
- sequenceDiagramModel
- };
+ let description, sequenceDiagramModel;
+ let payload = JSON.parse(decodeDataToBase64(base64Contents));
+
+ if (payload.VERSION === undefined) {
+ description = payload.description || 'Please, provide description...';
+ sequenceDiagramModel = payload.data || payload;
+ sequenceDiagramModel =
+ sequenceDiagramModel.model || sequenceDiagramModel;
+ } else if (payload.VERSION.major === 1) {
+ description = payload.description;
+ sequenceDiagramModel = payload.sequenceDiagramModel;
+ }
+
+ return {
+ description,
+ sequenceDiagramModel
+ };
}
function createOrUpdate(flowData) {
- let createOrUpdateRequest = {
- payloadData: encodeContent(flowData),
- artifactLabel: flowData.artifactLabel || flowData.artifactName,
- artifactName: flowData.artifactName,
- artifactType: flowData.artifactType,
- artifactGroupType: enums.INFORMATIONAL,
- description: flowData.description
- };
-
- return RestAPIUtil.post(
- baseUrl(flowData.serviceID, flowData.uniqueId),
- createOrUpdateRequest,
- {md5: true}
- );
+ let createOrUpdateRequest = {
+ payloadData: encodeContent(flowData),
+ artifactLabel: flowData.artifactLabel || flowData.artifactName,
+ artifactName: flowData.artifactName,
+ artifactType: flowData.artifactType,
+ artifactGroupType: enums.INFORMATIONAL,
+ description: flowData.description
+ };
+
+ return RestAPIUtil.post(
+ baseUrl(flowData.serviceID, flowData.uniqueId),
+ createOrUpdateRequest,
+ { md5: true }
+ );
}
const FlowsActions = Object.freeze({
-
- fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID, readonly}) {
- let results = [];
- if (!Object.keys(artifacts).length) {
- dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
- if (!readonly) {
- FlowsActions.openFlowDetailsEditor(dispatch);
- }
- }
- else {
- Object.keys(artifacts).forEach(artifact => results.push({
- artifactType: diagramType,
- participants,
- serviceID,
- ...artifacts[artifact]
- }));
- dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
- }
- },
-
- fetchArtifact(dispatch, {flow}){
- let {serviceID, uniqueId, participants} = flow;
- return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(response => {
-
- let {artifactName, base64Contents} = response;
- let {sequenceDiagramModel, ...other} = decodeContent(base64Contents);
-
- if (!sequenceDiagramModel) {
- sequenceDiagramModel = SequenceDiagramModelHelper.createModel({
- id: uniqueId,
- name: artifactName,
- lifelines: participants
- });
- }
- else {
- sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(sequenceDiagramModel, {
- name: artifactName,
- lifelines: participants
- });
- }
-
- flow = {
- ...flow,
- ...other,
- uniqueId,
- artifactName,
- sequenceDiagramModel
- };
-
- dispatch({type: actionTypes.ARTIFACT_LOADED, flow});
- FlowsActions.openFlowDiagramEditor(dispatch, {flow});
- });
- },
-
- createOrUpdateFlow(dispatch, {flow}, isNew) {
- if (!isNew && flow.sequenceDiagramModel) {
- flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(flow.sequenceDiagramModel, {
- name: flow.artifactName
- });
- }
- return createOrUpdate(flow).then(response => {
- let {uniqueId, artifactLabel} = response;
- flow = {...flow, uniqueId, artifactLabel};
- if (isNew) {
- flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel({id: uniqueId, name: flow.artifactName});
- }
- dispatch({type: actionTypes.ADD_OR_UPDATE_FLOW, flow});
- });
- },
-
- deleteFlow(dispatch, {flow}) {
- return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(() => dispatch({
- type: actionTypes.DELETE_FLOW,
- flow
- }));
- },
-
- openFlowDetailsEditor(dispatch, flow) {
- dispatch({type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow});
- },
-
- closeFlowDetailsEditor(dispatch) {
- dispatch({type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR});
- },
-
- openFlowDiagramEditor(dispatch, {flow}) {
- dispatch({type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow});
- },
-
- closeFlowDiagramEditor(dispatch) {
- dispatch({type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR});
- },
-
- reset(dispatch) {
- dispatch({type: actionTypes.RESET});
- }
+ fetchFlowArtifacts(
+ dispatch,
+ { artifacts, diagramType, participants, serviceID, readonly }
+ ) {
+ let results = [];
+ if (!Object.keys(artifacts).length) {
+ dispatch({
+ type: actionTypes.FLOW_LIST_LOADED,
+ results,
+ participants,
+ serviceID,
+ diagramType,
+ readonly
+ });
+ if (!readonly) {
+ FlowsActions.openFlowDetailsEditor(dispatch);
+ }
+ } else {
+ Object.keys(artifacts).forEach(artifact =>
+ results.push({
+ artifactType: diagramType,
+ participants,
+ serviceID,
+ ...artifacts[artifact]
+ })
+ );
+ dispatch({
+ type: actionTypes.FLOW_LIST_LOADED,
+ results,
+ participants,
+ serviceID,
+ diagramType,
+ readonly
+ });
+ }
+ },
+
+ fetchArtifact(dispatch, { flow }) {
+ let { serviceID, uniqueId, participants } = flow;
+ return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(
+ response => {
+ let { artifactName, base64Contents } = response;
+ let { sequenceDiagramModel, ...other } = decodeContent(
+ base64Contents
+ );
+
+ if (!sequenceDiagramModel) {
+ sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+ {
+ id: uniqueId,
+ name: artifactName,
+ lifelines: participants
+ }
+ );
+ } else {
+ sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+ sequenceDiagramModel,
+ {
+ name: artifactName,
+ lifelines: participants
+ }
+ );
+ }
+
+ flow = {
+ ...flow,
+ ...other,
+ uniqueId,
+ artifactName,
+ sequenceDiagramModel
+ };
+
+ dispatch({ type: actionTypes.ARTIFACT_LOADED, flow });
+ FlowsActions.openFlowDiagramEditor(dispatch, { flow });
+ }
+ );
+ },
+
+ createOrUpdateFlow(dispatch, { flow }, isNew) {
+ if (!isNew && flow.sequenceDiagramModel) {
+ flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+ flow.sequenceDiagramModel,
+ {
+ name: flow.artifactName
+ }
+ );
+ }
+ return createOrUpdate(flow).then(response => {
+ let { uniqueId, artifactLabel } = response;
+ flow = { ...flow, uniqueId, artifactLabel };
+ if (isNew) {
+ flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+ {
+ id: uniqueId,
+ name: flow.artifactName
+ }
+ );
+ }
+ dispatch({ type: actionTypes.ADD_OR_UPDATE_FLOW, flow });
+ });
+ },
+
+ deleteFlow(dispatch, { flow }) {
+ return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(
+ () =>
+ dispatch({
+ type: actionTypes.DELETE_FLOW,
+ flow
+ })
+ );
+ },
+
+ openFlowDetailsEditor(dispatch, flow) {
+ dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow });
+ },
+
+ closeFlowDetailsEditor(dispatch) {
+ dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR });
+ },
+
+ openFlowDiagramEditor(dispatch, { flow }) {
+ dispatch({ type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow });
+ },
+
+ closeFlowDiagramEditor(dispatch) {
+ dispatch({ type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR });
+ },
+
+ reset(dispatch) {
+ dispatch({ type: actionTypes.RESET });
+ }
});
export default FlowsActions;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
index 2b3d86bae2..4dcd840ff3 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
@@ -16,30 +16,28 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
+ OPEN_FLOW_DETAILS_EDITOR: null,
+ CLOSE_FLOW_DETAILS_EDITOR: null,
- OPEN_FLOW_DETAILS_EDITOR: null,
- CLOSE_FLOW_DETAILS_EDITOR: null,
+ OPEN_FLOW_DIAGRAM_EDITOR: null,
+ CLOSE_FLOW_DIAGRAM_EDITOR: null,
- OPEN_FLOW_DIAGRAM_EDITOR: null,
- CLOSE_FLOW_DIAGRAM_EDITOR: null,
+ FLOW_LIST_LOADED: null,
+ ADD_OR_UPDATE_FLOW: null,
+ ARTIFACT_LOADED: null,
+ DELETE_FLOW: null,
- FLOW_LIST_LOADED: null,
- ADD_OR_UPDATE_FLOW: null,
- ARTIFACT_LOADED: null,
- DELETE_FLOW: null,
-
- CURRENT_FLOW_DATA_CHANGED: null,
-
- RESET: null
+ CURRENT_FLOW_DATA_CHANGED: null,
+ RESET: null
});
export const enums = {
- WORKFLOW: 'WORKFLOW',
- NETWORK: 'NETWORK_CALL_FLOW',
- INFORMATIONAL: 'INFORMATIONAL',
- INSTANTIATION_FLOWS: 'instantiationflows',
- MESSAGE_FLOWS: 'messageflows'
+ WORKFLOW: 'WORKFLOW',
+ NETWORK: 'NETWORK_CALL_FLOW',
+ INFORMATIONAL: 'INFORMATIONAL',
+ INSTANTIATION_FLOWS: 'instantiationflows',
+ MESSAGE_FLOWS: 'messageflows'
};
export const FLOWS_EDITOR_FORM = 'FLOWS_FORM';
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
index f9585f985f..b45a9fc54e 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
@@ -13,44 +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 FlowsEditorModalView from './FlowsEditorModalView.jsx';
import FlowsActions from './FlowsActions.js';
-import {FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { FLOWS_EDITOR_FORM } from './FlowsConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-export const mapStateToProps = ({flows}) => {
+export const mapStateToProps = ({ flows }) => {
+ let {
+ data = { artifactName: '', description: '' },
+ serviceID,
+ diagramType,
+ flowParticipants,
+ genericFieldInfo,
+ formReady
+ } = flows;
+ if (!data.serviceID) {
+ data.serviceID = serviceID;
+ }
+ if (!data.artifactType) {
+ data.artifactType = diagramType;
+ }
+ if (!data.participants) {
+ data.participants = flowParticipants;
+ }
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let {data = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants, genericFieldInfo, formReady} = flows;
- if(!data.serviceID){
- data.serviceID = serviceID;
- }
- if(!data.artifactType){
- data.artifactType = diagramType;
- }
- if(!data.participants){
- data.participants = flowParticipants;
- }
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
- return {
- currentFlow: data,
- genericFieldInfo,
- isFormValid,
- formReady
- };
+ return {
+ currentFlow: data,
+ genericFieldInfo,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {isNewArtifact}) => {
- return {
- onSubmit: flow => {
- FlowsActions.closeFlowDetailsEditor(dispatch);
- FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact);
- },
- onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
- onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: FLOWS_EDITOR_FORM}),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
- };
+const mapActionsToProps = (dispatch, { isNewArtifact }) => {
+ return {
+ onSubmit: flow => {
+ FlowsActions.closeFlowDetailsEditor(dispatch);
+ FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact);
+ },
+ onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: FLOWS_EDITOR_FORM
+ }),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ FlowsEditorModalView
+);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
index 1250a0b58e..8c805cca9c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
@@ -13,52 +13,73 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import Form from 'nfvo-components/input/validation/Form.jsx';
class FlowsEditorModalView extends Component {
+ render() {
+ let {
+ onCancel,
+ onDataChanged,
+ currentFlow,
+ genericFieldInfo,
+ formReady,
+ isFormValid,
+ onValidateForm
+ } = this.props;
+ let { artifactName, description } = currentFlow;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ onSubmit={() => this.onSaveClicked()}
+ onReset={onCancel}
+ formReady={formReady}
+ isValid={isFormValid}
+ onValidateForm={() => onValidateForm()}>
+ <Input
+ type="text"
+ name="name"
+ label={i18n('Name')}
+ isValid={genericFieldInfo['artifactName'].isValid}
+ errorText={
+ genericFieldInfo['artifactName'].errorText
+ }
+ isRequired={true}
+ value={artifactName}
+ onChange={artifactName =>
+ onDataChanged({ artifactName })
+ }
+ />
+ <Input
+ type="textarea"
+ name="description"
+ label={i18n('Description')}
+ isValid={genericFieldInfo['description'].isValid}
+ errorText={
+ genericFieldInfo['description'].errorText
+ }
+ isRequired={true}
+ value={description}
+ overlayPos="bottom"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ />
+ </Form>
+ )}
+ </div>
+ );
+ }
- render() {
- let {onCancel, onDataChanged, currentFlow, genericFieldInfo, formReady, isFormValid, onValidateForm} = this.props;
- let {artifactName, description} = currentFlow;
- return (
- <div>
- {genericFieldInfo && <Form
- onSubmit={() => this.onSaveClicked()}
- onReset={onCancel} formReady={formReady} isValid={isFormValid} onValidateForm={() => onValidateForm()} >
- <Input
- type='text'
- name='name'
- label={i18n('Name')}
- isValid={genericFieldInfo['artifactName'].isValid}
- errorText={genericFieldInfo['artifactName'].errorText}
- isRequired={true}
- value={artifactName}
- onChange={artifactName => onDataChanged({artifactName})}/>
- <Input
- type='textarea'
- name='description'
- label={i18n('Description')}
- isValid={genericFieldInfo['description'].isValid}
- errorText={genericFieldInfo['description'].errorText}
- isRequired={true}
- value={description}
- overlayPos='bottom'
- onChange={description => onDataChanged({description})}/>
- </Form> }
- </div>
- );
- }
-
- onSaveClicked() {
- let {currentFlow, onSubmit} = this.props;
- if (onSubmit) {
- onSubmit(currentFlow);
- }
- }
-
+ onSaveClicked() {
+ let { currentFlow, onSubmit } = this.props;
+ if (onSubmit) {
+ onSubmit(currentFlow);
+ }
+ }
}
export default FlowsEditorModalView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
index 642c578eb7..2718c19aaa 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
@@ -13,40 +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 FlowsActions from './FlowsActions.js';
import FlowsListEditorView from './FlowsListEditorView.jsx';
-export const mapStateToProps = ({flows}) => {
- let {flowList = [], isDisplayModal, isModalInEditMode, shouldShowWorkflowsEditor = true, data = undefined, readonly} = flows;
- let isCheckedOut = !readonly;
- if(data && data.readonly){
- isCheckedOut = !data.readonly;
- }
+export const mapStateToProps = ({ flows }) => {
+ let {
+ flowList = [],
+ isDisplayModal,
+ isModalInEditMode,
+ shouldShowWorkflowsEditor = true,
+ data = undefined,
+ readonly
+ } = flows;
+ let isCheckedOut = !readonly;
+ if (data && data.readonly) {
+ isCheckedOut = !data.readonly;
+ }
- return {
- flowList,
- isDisplayModal,
- isCheckedOut,
- isModalInEditMode,
- shouldShowWorkflowsEditor,
- currentFlow: data,
- readonly
- };
+ return {
+ flowList,
+ isDisplayModal,
+ isCheckedOut,
+ isModalInEditMode,
+ shouldShowWorkflowsEditor,
+ currentFlow: data,
+ readonly
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
- onEditFlowDetailsClick: flow => FlowsActions.openFlowDetailsEditor(dispatch, flow),
- onEditFlowDiagramClick: flow => FlowsActions.fetchArtifact(dispatch, {flow}),
- onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, {flow}),
- onSequenceDiagramSaveClick: flow => {
- FlowsActions.closeFlowDiagramEditor(dispatch);
- FlowsActions.createOrUpdateFlow(dispatch, {flow});
- },
- onSequenceDiagramCloseClick: () => FlowsActions.closeFlowDiagramEditor(dispatch)
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
+ onEditFlowDetailsClick: flow =>
+ FlowsActions.openFlowDetailsEditor(dispatch, flow),
+ onEditFlowDiagramClick: flow =>
+ FlowsActions.fetchArtifact(dispatch, { flow }),
+ onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, { flow }),
+ onSequenceDiagramSaveClick: flow => {
+ FlowsActions.closeFlowDiagramEditor(dispatch);
+ FlowsActions.createOrUpdateFlow(dispatch, { flow });
+ },
+ onSequenceDiagramCloseClick: () =>
+ FlowsActions.closeFlowDiagramEditor(dispatch)
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(FlowsListEditorView);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
index 365b7f1bdf..3b2ff0619c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
@@ -13,7 +13,7 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
import Modal from 'nfvo-components/modal/Modal.jsx';
@@ -25,125 +25,146 @@ import FlowsEditorModal from './FlowsEditorModal.js';
import SequenceDiagram from './SequenceDiagram.jsx';
class FlowsListEditorView extends Component {
-
- static propTypes = {
- flowList: PropTypes.array,
- currentFlow: PropTypes.object,
- isDisplayModal: PropTypes.bool,
- isModalInEditMode: PropTypes.bool,
- isCheckedOut: PropTypes.bool,
- shouldShowWorkflowsEditor: PropTypes.bool,
- readonly: PropTypes.bool,
-
- onAddWorkflowClick: PropTypes.func,
- onEditFlowDetailsClick: PropTypes.func,
- onEditFlowDiagramClick: PropTypes.func,
- onDeleteFlowClick: PropTypes.func,
- onSequenceDiagramSaveClick: PropTypes.func,
- onSequenceDiagramCloseClick: PropTypes.func
- };
-
- state = {
- localFilter: ''
- };
-
- render() {
- let CurrentView = null;
- if (this.props.shouldShowWorkflowsEditor) {
- CurrentView = this.renderWorkflowsEditor();
- }
- else {
- CurrentView = this.renderSequenceDiagramTool();
- }
-
- return CurrentView;
- }
-
- renderWorkflowsEditor() {
- let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props;
- const {localFilter} = this.state;
-
- return (
- <div className='workflows license-agreement-list-editor'>
- <FlowRelatedView display={localFilter}/>
- <ListEditorView
- plusButtonTitle={i18n('Add Workflow')}
- onAdd={onAddWorkflowClick}
- filterValue={localFilter}
- onFilter={filter => this.setState({localFilter: filter})}
- isReadOnlyMode={!isCheckedOut}>
- {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
- </ListEditorView>
-
- {isDisplayModal && this.renderWorkflowEditorModal()}
-
- </div>
- );
- }
-
- renderWorkflowEditorModal() {
- let { isDisplayModal, isModalInEditMode} = this.props;
- return (
- <Modal show={isDisplayModal} animation={true} className='onborading-modal workflows-editor-modal'>
- <Modal.Header>
- <Modal.Title>
- {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
- </Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
- </Modal.Body>
- </Modal>
- );
- }
-
- renderSequenceDiagramTool() {
- let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
- return (
- <SequenceDiagram
- onSave={sequenceDiagramModel => onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})}
- onClose={onSequenceDiagramCloseClick}
- model={currentFlow.sequenceDiagramModel}/>
- );
- }
-
- filterList() {
- let {flowList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return flowList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return flowList;
- }
- }
-
- renderWorkflowListItem(flow, isCheckedOut) {
- let {uniqueId, artifactName, description} = flow;
- let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props;
- return (
- <ListEditorItemView
- key={uniqueId}
- onSelect={() => onEditFlowDetailsClick(flow)}
- onDelete={() => onDeleteFlowClick(flow)}
- onEdit={() => onEditFlowDiagramClick(flow)}
- className='list-editor-item-view'
- isCheckedOut={isCheckedOut}>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='text name'>{artifactName}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
-
+ static propTypes = {
+ flowList: PropTypes.array,
+ currentFlow: PropTypes.object,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ isCheckedOut: PropTypes.bool,
+ shouldShowWorkflowsEditor: PropTypes.bool,
+ readonly: PropTypes.bool,
+
+ onAddWorkflowClick: PropTypes.func,
+ onEditFlowDetailsClick: PropTypes.func,
+ onEditFlowDiagramClick: PropTypes.func,
+ onDeleteFlowClick: PropTypes.func,
+ onSequenceDiagramSaveClick: PropTypes.func,
+ onSequenceDiagramCloseClick: PropTypes.func
+ };
+
+ state = {
+ localFilter: ''
+ };
+
+ render() {
+ let CurrentView = null;
+ if (this.props.shouldShowWorkflowsEditor) {
+ CurrentView = this.renderWorkflowsEditor();
+ } else {
+ CurrentView = this.renderSequenceDiagramTool();
+ }
+
+ return CurrentView;
+ }
+
+ renderWorkflowsEditor() {
+ let { isDisplayModal, onAddWorkflowClick, isCheckedOut } = this.props;
+ const { localFilter } = this.state;
+
+ return (
+ <div className="workflows license-agreement-list-editor">
+ <FlowRelatedView display={localFilter} />
+ <ListEditorView
+ plusButtonTitle={i18n('Add Workflow')}
+ onAdd={onAddWorkflowClick}
+ filterValue={localFilter}
+ onFilter={filter => this.setState({ localFilter: filter })}
+ isReadOnlyMode={!isCheckedOut}>
+ {this.filterList().map(flow =>
+ this.renderWorkflowListItem(flow, isCheckedOut)
+ )}
+ </ListEditorView>
+
+ {isDisplayModal && this.renderWorkflowEditorModal()}
+ </div>
+ );
+ }
+
+ renderWorkflowEditorModal() {
+ let { isDisplayModal, isModalInEditMode } = this.props;
+ return (
+ <Modal
+ show={isDisplayModal}
+ animation={true}
+ className="onborading-modal workflows-editor-modal">
+ <Modal.Header>
+ <Modal.Title>
+ {`${
+ isModalInEditMode
+ ? i18n('Edit Workflow')
+ : i18n('Create New Workflow')
+ }`}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <FlowsEditorModal isNewArtifact={!isModalInEditMode} />
+ </Modal.Body>
+ </Modal>
+ );
+ }
+
+ renderSequenceDiagramTool() {
+ let {
+ onSequenceDiagramSaveClick,
+ onSequenceDiagramCloseClick,
+ currentFlow
+ } = this.props;
+ return (
+ <SequenceDiagram
+ onSave={sequenceDiagramModel =>
+ onSequenceDiagramSaveClick({
+ ...currentFlow,
+ sequenceDiagramModel
+ })
+ }
+ onClose={onSequenceDiagramCloseClick}
+ model={currentFlow.sequenceDiagramModel}
+ />
+ );
+ }
+
+ filterList() {
+ let { flowList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return flowList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return flowList;
+ }
+ }
+
+ renderWorkflowListItem(flow, isCheckedOut) {
+ let { uniqueId, artifactName, description } = flow;
+ let {
+ onEditFlowDetailsClick,
+ onEditFlowDiagramClick,
+ onDeleteFlowClick
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={uniqueId}
+ onSelect={() => onEditFlowDetailsClick(flow)}
+ onDelete={() => onDeleteFlowClick(flow)}
+ onEdit={() => onEditFlowDiagramClick(flow)}
+ className="list-editor-item-view"
+ isCheckedOut={isCheckedOut}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="text name">{artifactName}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
}
export default FlowsListEditorView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
index 14bf595050..0279824ac4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
@@ -13,87 +13,91 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { actionTypes, FLOWS_EDITOR_FORM } from './FlowsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.FLOW_LIST_LOADED:
- return {
- ...state,
- flowList: action.results,
- flowParticipants: action.participants,
- serviceID: action.serviceID,
- diagramType: action.diagramType,
- readonly: action.readonly
- };
- case actionTypes.ADD_OR_UPDATE_FLOW:
- case actionTypes.ARTIFACT_LOADED:
- let flowList = state.flowList || [];
- let index = flowList.findIndex(flow => flow.uniqueId === action.flow.uniqueId);
- if (index === -1) {
- index = flowList.length;
- }
- let flowToBeUpdated = flowList[index];
- flowList = [
- ...flowList.slice(0, index),
- {...flowToBeUpdated, ...action.flow},
- ...flowList.slice(index + 1)
- ];
- return {
- ...state,
- flowList,
- serviceID: action.flow.serviceID,
- diagramType: action.flow.artifactType || state.diagramType
- };
- case actionTypes.DELETE_FLOW:
- return {
- ...state,
- flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId)
- };
- case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
- return {
- ...state,
- formName: FLOWS_EDITOR_FORM,
- formReady: null,
- genericFieldInfo: {
- artifactName : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- description: {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- },
- data: action.flow,
- isDisplayModal: true,
- isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
- };
+ switch (action.type) {
+ case actionTypes.FLOW_LIST_LOADED:
+ return {
+ ...state,
+ flowList: action.results,
+ flowParticipants: action.participants,
+ serviceID: action.serviceID,
+ diagramType: action.diagramType,
+ readonly: action.readonly
+ };
+ case actionTypes.ADD_OR_UPDATE_FLOW:
+ case actionTypes.ARTIFACT_LOADED:
+ let flowList = state.flowList || [];
+ let index = flowList.findIndex(
+ flow => flow.uniqueId === action.flow.uniqueId
+ );
+ if (index === -1) {
+ index = flowList.length;
+ }
+ let flowToBeUpdated = flowList[index];
+ flowList = [
+ ...flowList.slice(0, index),
+ { ...flowToBeUpdated, ...action.flow },
+ ...flowList.slice(index + 1)
+ ];
+ return {
+ ...state,
+ flowList,
+ serviceID: action.flow.serviceID,
+ diagramType: action.flow.artifactType || state.diagramType
+ };
+ case actionTypes.DELETE_FLOW:
+ return {
+ ...state,
+ flowList: state.flowList.filter(
+ flow => flow.uniqueId !== action.flow.uniqueId
+ )
+ };
+ case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
+ return {
+ ...state,
+ formName: FLOWS_EDITOR_FORM,
+ formReady: null,
+ genericFieldInfo: {
+ artifactName: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ },
+ data: action.flow,
+ isDisplayModal: true,
+ isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
+ };
- case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
- return {
- ...state,
- data: undefined,
- isDisplayModal: false,
- isModalInEditMode: false
- };
- case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
- return {
- ...state,
- data: action.flow,
- shouldShowWorkflowsEditor: false
- };
- case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
- return {
- ...state,
- data: undefined,
- shouldShowWorkflowsEditor: true
- };
- case actionTypes.RESET:
- return {};
- }
+ case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
+ return {
+ ...state,
+ data: undefined,
+ isDisplayModal: false,
+ isModalInEditMode: false
+ };
+ case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
+ return {
+ ...state,
+ data: action.flow,
+ shouldShowWorkflowsEditor: false
+ };
+ case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
+ return {
+ ...state,
+ data: undefined,
+ shouldShowWorkflowsEditor: true
+ };
+ case actionTypes.RESET:
+ return {};
+ }
- return state;
+ return state;
};
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
index a2a5554203..7d302444e4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
@@ -22,57 +22,66 @@ import FlowsListEditor from './FlowsListEditor.js';
import FlowsActions from './FlowsActions.js';
class FlowsListEditorPunchOutWrapper extends React.Component {
+ componentDidMount() {
+ let element = ReactDOM.findDOMNode(this);
+ element.addEventListener('click', event => {
+ if (event.target.tagName === 'A') {
+ event.preventDefault();
+ }
+ });
+ ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+ element.addEventListener(eventType, event =>
+ event.stopPropagation()
+ )
+ );
+ }
- componentDidMount() {
- let element = ReactDOM.findDOMNode(this);
- element.addEventListener('click', event => {
- if (event.target.tagName === 'A') {
- event.preventDefault();
- }
- });
- ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
- element.addEventListener(eventType, event => event.stopPropagation())
- );
- }
-
- render() {
- return <FlowsListEditor/>;
- }
+ render() {
+ return <FlowsListEditor />;
+ }
}
export default class DiagramPunchOut {
+ render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+ if (!this.isConfigSet) {
+ Configuration.setCatalogApiRoot(apiRoot);
+ Configuration.setCatalogApiHeaders(apiHeaders);
+ this.isConfigSet = true;
+ }
- render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
-
- if (!this.isConfigSet) {
- Configuration.setCatalogApiRoot(apiRoot);
- Configuration.setCatalogApiHeaders(apiHeaders);
- this.isConfigSet = true;
- }
-
- this.onEvent = onEvent;
- this.handleData(data);
+ this.onEvent = onEvent;
+ this.handleData(data);
- if (!this.rendered) {
- ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
- this.rendered = true;
- }
- }
+ if (!this.rendered) {
+ ReactDOM.render(
+ <Application>
+ <div className="dox-ui">
+ <FlowsListEditorPunchOutWrapper />
+ </div>
+ </Application>,
+ element
+ );
+ this.rendered = true;
+ }
+ }
- unmount(element) {
- let dispatch = action => store.dispatch(action);
- ReactDOM.unmountComponentAtNode(element);
- FlowsActions.reset(dispatch);
- }
+ unmount(element) {
+ let dispatch = action => store.dispatch(action);
+ ReactDOM.unmountComponentAtNode(element);
+ FlowsActions.reset(dispatch);
+ }
- handleData(data) {
- let {serviceID, diagramType} = data;
- let dispatch = action => store.dispatch(action);
+ handleData(data) {
+ let { serviceID, diagramType } = data;
+ let dispatch = action => store.dispatch(action);
- if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) {
- this.prevServiceID = serviceID;
- this.prevDiagramType = diagramType;
- FlowsActions.fetchFlowArtifacts(dispatch, {...data});
- }
- }
+ if (
+ serviceID !== this.prevServiceID ||
+ diagramType !== this.prevDiagramType
+ ) {
+ this.prevServiceID = serviceID;
+ this.prevDiagramType = diagramType;
+ FlowsActions.fetchFlowArtifacts(dispatch, { ...data });
+ }
+ }
}
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
index 54043498f0..c037f3eefd 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
@@ -15,8 +15,8 @@
*/
import flowListReducer from './FlowsListReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
export default {
- flows: createPlainDataReducer(flowListReducer)
+ flows: createPlainDataReducer(flowListReducer)
};
diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
index d0a5bf3251..8a634915ac 100644
--- a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
+++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
@@ -13,27 +13,31 @@
* or implied. 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 md5 from 'md5';
class ImportantLogic extends Component {
+ state = {
+ whatToDisplay: false
+ };
- state = {
- whatToDisplay: false
- };
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ whatToDisplay:
+ md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'
+ });
+ }
- componentWillReceiveProps(nextProps) {
- this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
- }
+ render() {
+ if (this.state.whatToDisplay) {
+ setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+ }
- render() {
- if (this.state.whatToDisplay) {
- setTimeout(() => this.setState({whatToDisplay: false}), 5000);
- }
-
- return (
- <div>
- <style>{'\.easter-wrapper {\
+ return (
+ <div>
+ <style>
+ {
+ '.easter-wrapper {\
position: fixed;\
width: 70px;\
height: 70px;\
@@ -96,16 +100,20 @@ class ImportantLogic extends Component {
@keyframes yo-yo {\
from { transform: rotate(-0deg); top: 0 }\
to { transform: rotate(-360deg); top:120px }\
- }'}</style>
- <div
- className='easter-wrapper'
- style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
- <span className='string'>{}</span>
- <span className='yo-yo'>{}</span>
- </div>
- </div>
- );
- }
+ }'
+ }
+ </style>
+ <div
+ className="easter-wrapper"
+ style={{
+ display: this.state.whatToDisplay ? 'block' : 'none'
+ }}>
+ <span className="string">{}</span>
+ <span className="yo-yo">{}</span>
+ </div>
+ </div>
+ );
+ }
}
export default ImportantLogic;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
index c128083774..ca24964472 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
@@ -13,7 +13,7 @@
* or implied. 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 Button from 'sdc-ui/lib/react/Button.js';
import Sequencer from 'dox-sequence-diagram-ui';
@@ -21,31 +21,37 @@ import Sequencer from 'dox-sequence-diagram-ui';
import i18n from 'nfvo-utils/i18n/i18n.js';
class SequenceDiagram extends Component {
+ static propTypes = {
+ onSave: PropTypes.func.isRequired,
+ onClose: PropTypes.func,
+ model: PropTypes.object.isRequired
+ };
- static propTypes = {
- onSave: PropTypes.func.isRequired,
- onClose: PropTypes.func,
- model: PropTypes.object.isRequired
- };
-
- onSave() {
- this.props.onSave(this.refs.sequencer.getModel());
- }
-
- render() {
- return (
- <div className='sequence-diagram'>
- <div className='sequence-diagram-sequencer'>
- <Sequencer ref='sequencer' options={{useHtmlSelect: true}} model={this.props.model} />
- </div>
- <div className='sequence-diagram-action-buttons'>
- <Button onClick={() => this.onSave()}>{i18n('Save')}</Button>
- <Button onClick={this.props.onClose}>{i18n('Close')}</Button>
- </div>
- </div>
- );
- }
+ onSave() {
+ this.props.onSave(this.refs.sequencer.getModel());
+ }
+ render() {
+ return (
+ <div className="sequence-diagram">
+ <div className="sequence-diagram-sequencer">
+ <Sequencer
+ ref="sequencer"
+ options={{ useHtmlSelect: true }}
+ model={this.props.model}
+ />
+ </div>
+ <div className="sequence-diagram-action-buttons">
+ <Button onClick={() => this.onSave()}>
+ {i18n('Save')}
+ </Button>
+ <Button onClick={this.props.onClose}>
+ {i18n('Close')}
+ </Button>
+ </div>
+ </div>
+ );
+ }
}
export default SequenceDiagram;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
index c83fdc91f0..23723dc91d 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
@@ -16,51 +16,54 @@
import emptyModel from './emptyModel.json';
function mergeLifelines(oldLifelines, newLifelines) {
- let oldLifelinesMap = new Map(oldLifelines.map(lifeline => [lifeline.id, lifeline]));
- let newLifelinesMap = new Map(newLifelines.map(lifeline => [lifeline.id, lifeline]));
+ let oldLifelinesMap = new Map(
+ oldLifelines.map(lifeline => [lifeline.id, lifeline])
+ );
+ let newLifelinesMap = new Map(
+ newLifelines.map(lifeline => [lifeline.id, lifeline])
+ );
- let updatedLifelines = oldLifelines.map(lifeline => {
- let newLifeline = newLifelinesMap.get(lifeline.id);
- return {
- ...lifeline,
- name: newLifeline ? newLifeline.name : lifeline.name
- };
- });
+ let updatedLifelines = oldLifelines.map(lifeline => {
+ let newLifeline = newLifelinesMap.get(lifeline.id);
+ return {
+ ...lifeline,
+ name: newLifeline ? newLifeline.name : lifeline.name
+ };
+ });
- let addedLifelines = newLifelines.filter(lifeline => !oldLifelinesMap.has(lifeline.id));
+ let addedLifelines = newLifelines.filter(
+ lifeline => !oldLifelinesMap.has(lifeline.id)
+ );
- return [
- ...updatedLifelines,
- ...addedLifelines
- ];
+ return [...updatedLifelines, ...addedLifelines];
}
-
const SequenceDiagramModelHelper = Object.freeze({
+ createModel(options) {
+ return SequenceDiagramModelHelper.updateModel(emptyModel, options);
+ },
- createModel(options) {
- return SequenceDiagramModelHelper.updateModel(emptyModel, options);
- },
-
- updateModel(model, options) {
- const diagram = model.diagram;
- const metadata = diagram.metadata || model.metadata;
- const id = options.id || metadata.id;
- const name = options.name || metadata.name;
- const lifelines = options.lifelines ? mergeLifelines(diagram.lifelines, options.lifelines) : diagram.lifelines;
+ updateModel(model, options) {
+ const diagram = model.diagram;
+ const metadata = diagram.metadata || model.metadata;
+ const id = options.id || metadata.id;
+ const name = options.name || metadata.name;
+ const lifelines = options.lifelines
+ ? mergeLifelines(diagram.lifelines, options.lifelines)
+ : diagram.lifelines;
- return {
- diagram: {
- ...diagram,
- metadata: {
- ...metadata,
- id,
- name
- },
- lifelines
- }
- };
- }
+ return {
+ diagram: {
+ ...diagram,
+ metadata: {
+ ...metadata,
+ id,
+ name
+ },
+ lifelines
+ }
+ };
+ }
});
export default SequenceDiagramModelHelper;
diff --git a/openecomp-ui/src/sdc-app/heatValidation.app.jsx b/openecomp-ui/src/sdc-app/heatValidation.app.jsx
index 5abe3091b3..bb9a4bbe9b 100644
--- a/openecomp-ui/src/sdc-app/heatValidation.app.jsx
+++ b/openecomp-ui/src/sdc-app/heatValidation.app.jsx
@@ -23,5 +23,9 @@ import ReactDOM from 'react-dom';
import UploadScreen from './heatvalidation/UploadScreen.jsx';
import Application from './Application.jsx';
-
-ReactDOM.render(<Application openSocket={false}><UploadScreen/></Application>, document.getElementById('heat-validation-app'));
+ReactDOM.render(
+ <Application openSocket={false}>
+ <UploadScreen />
+ </Application>,
+ document.getElementById('heat-validation-app')
+);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js b/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
index d3e30b0df8..4532c0a7d2 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/Attachments.js
@@ -13,32 +13,53 @@
* 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import {mapStateToProps as attachmentsMapStateToProps, mapActionsToProps as attachmentsMapActionsToProps} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js';
+import {
+ mapStateToProps as attachmentsMapStateToProps,
+ mapActionsToProps as attachmentsMapActionsToProps
+} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js';
// import AttachmentsView from './AttachmentsView.jsx';
import AttachmentsView from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx';
import UploadScreenActionHelper from './UploadScreenActionHelper.js';
import HeatSetup from './HeatSetup';
-export const mapStateToProps = (state) => {
- let original = attachmentsMapStateToProps(state);
- return {
- ...original,
- HeatSetupComponent: HeatSetup,
- isReadOnlyMode: false
- };
+export const mapStateToProps = state => {
+ let original = attachmentsMapStateToProps(state);
+ return {
+ ...original,
+ HeatSetupComponent: HeatSetup,
+ isReadOnlyMode: false
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
- let original = attachmentsMapActionsToProps(dispatch, {softwareProductId});
- return {
- ...original,
- onDownload: heatCandidate => UploadScreenActionHelper.downloadHeatFile(dispatch, heatCandidate),
- onUpload: formData => UploadScreenActionHelper.uploadFile(dispatch, formData),
- onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate}),
- onProcessAndValidate: (heatData, heatDataCache) => UploadScreenActionHelper.processAndValidateHeat(dispatch, heatData, heatDataCache)
- };
+const mapActionsToProps = (dispatch, { softwareProductId }) => {
+ let original = attachmentsMapActionsToProps(dispatch, {
+ softwareProductId
+ });
+ return {
+ ...original,
+ onDownload: heatCandidate =>
+ UploadScreenActionHelper.downloadHeatFile(dispatch, heatCandidate),
+ onUpload: formData =>
+ UploadScreenActionHelper.uploadFile(dispatch, formData),
+ onSave: heatCandidate =>
+ SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+ dispatch,
+ {
+ softwareProductId,
+ heatCandidate
+ }
+ ),
+ onProcessAndValidate: (heatData, heatDataCache) =>
+ UploadScreenActionHelper.processAndValidateHeat(
+ dispatch,
+ heatData,
+ heatDataCache
+ )
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(AttachmentsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(AttachmentsView);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js b/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
index 925b0095ba..a94cfd9f81 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/HeatSetup.js
@@ -13,16 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
-import HeatSetupView from '../onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx';
+import { connect } from 'react-redux';
+import HeatSetupView from '../onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx';
import UploadScreenActionHelper from './UploadScreenActionHelper.js';
-import {mapStateToProps, mapActionsToProps} from '../onboarding/softwareProduct/attachments/setup/HeatSetup.js';
+import {
+ mapStateToProps,
+ mapActionsToProps
+} from '../onboarding/softwareProduct/attachments/setup/HeatSetup.js';
-const mapActionsToPropsExt = (dispatch) => {
- return {
- ...mapActionsToProps(dispatch,{}),
- onProcessAndValidate: (heatData, heatDataCache) => UploadScreenActionHelper.processAndValidateHeat(dispatch, heatData, heatDataCache)
- };
+const mapActionsToPropsExt = dispatch => {
+ return {
+ ...mapActionsToProps(dispatch, {}),
+ onProcessAndValidate: (heatData, heatDataCache) =>
+ UploadScreenActionHelper.processAndValidateHeat(
+ dispatch,
+ heatData,
+ heatDataCache
+ )
+ };
};
-export default connect(mapStateToProps, mapActionsToPropsExt, null, {withRef: true})(HeatSetupView);
+export default connect(mapStateToProps, mapActionsToPropsExt, null, {
+ withRef: true
+})(HeatSetupView);
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
index 2d99c0f497..6d3d54b5cb 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
+++ b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreen.jsx
@@ -16,17 +16,14 @@
import React from 'react';
import SoftwareProductAttachmentsView from './Attachments.js';
-
-
class UploadScreen extends React.Component {
-
- render() {
- return(
- <div className='heat-validation-stand-alone'>
- <SoftwareProductAttachmentsView />
- </div>
- );
- }
+ render() {
+ return (
+ <div className="heat-validation-stand-alone">
+ <SoftwareProductAttachmentsView />
+ </div>
+ );
+ }
}
-export default UploadScreen;
+export default UploadScreen;
diff --git a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
index fa2d4695ae..f5d9abd6d2 100644
--- a/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
+++ b/openecomp-ui/src/sdc-app/heatvalidation/UploadScreenActionHelper.js
@@ -18,155 +18,197 @@ import showFileSaveDialog from 'nfvo-utils/ShowFileSaveDialog.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import isEqual from 'lodash/isEqual.js';
import cloneDeep from 'lodash/cloneDeep.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as softwareProductsActionTypes} from '../onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes as HeatSetupActions} from '../onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
-
-
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as softwareProductsActionTypes } from '../onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes as HeatSetupActions } from '../onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
const options = {
- headers: {
- USER_ID: 'validationOnlyVspUser'
- }
+ headers: {
+ USER_ID: 'validationOnlyVspUser'
+ }
};
function fetchVspIdAndVersion() {
-
- let vspId = sessionStorage.getItem('validationAppVspId');
- let versionId = sessionStorage.getItem('validationAppVersionId');
- if (vspId) {
- return Promise.resolve({value: vspId, versionId});
- }else {
- return RestAPIUtil.fetch('/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/validation-vsp', options)
- .then(response => {
- sessionStorage.setItem('validationAppVspId', response.itemId);
- sessionStorage.setItem('validationAppVersionId', response.version.id);
- return Promise.resolve({value: response.itemId, versionId: response.version.id});
- });
- }
-
+ let vspId = sessionStorage.getItem('validationAppVspId');
+ let versionId = sessionStorage.getItem('validationAppVersionId');
+ if (vspId) {
+ return Promise.resolve({ value: vspId, versionId });
+ } else {
+ return RestAPIUtil.fetch(
+ '/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/validation-vsp',
+ options
+ ).then(response => {
+ sessionStorage.setItem('validationAppVspId', response.itemId);
+ sessionStorage.setItem(
+ 'validationAppVersionId',
+ response.version.id
+ );
+ return Promise.resolve({
+ value: response.itemId,
+ versionId: response.version.id
+ });
+ });
+ }
}
-
function uploadFile(formData) {
- return fetchVspIdAndVersion()
- .then(response => {
- return RestAPIUtil.post(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate`, formData, options);
- });
+ return fetchVspIdAndVersion().then(response => {
+ return RestAPIUtil.post(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${response.versionId}/orchestration-template-candidate`,
+ formData,
+ options
+ );
+ });
}
-function loadSoftwareProductHeatCandidate(dispatch){
- return fetchVspIdAndVersion()
- .then(response => {
- return RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/manifest`, options)
- .then(response => dispatch({
- type: HeatSetupActions.MANIFEST_LOADED,
- response
- }));
- });
+function loadSoftwareProductHeatCandidate(dispatch) {
+ return fetchVspIdAndVersion().then(response => {
+ return RestAPIUtil.fetch(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${
+ response.versionId
+ }/orchestration-template-candidate/manifest`,
+ options
+ ).then(response =>
+ dispatch({
+ type: HeatSetupActions.MANIFEST_LOADED,
+ response
+ })
+ );
+ });
}
function updateHeatCandidate(dispatch, heatCandidate) {
- return fetchVspIdAndVersion()
- .then(response => {
- return RestAPIUtil.put(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/manifest`,
- heatCandidate.heatData, options)
- .then(null, error => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Save Failed'),
- modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE,
- modalComponentProps: {
- validationResponse: error.responseJSON
- },
- cancelButtonText: i18n('Ok')
- }
- });
- return Promise.reject(error);
- });
- });
+ return fetchVspIdAndVersion().then(response => {
+ return RestAPIUtil.put(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${
+ response.versionId
+ }/orchestration-template-candidate/manifest`,
+ heatCandidate.heatData,
+ options
+ ).then(null, error => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Save Failed'),
+ modalComponentName:
+ modalContentMapper.SUMBIT_ERROR_RESPONSE,
+ modalComponentProps: {
+ validationResponse: error.responseJSON
+ },
+ cancelButtonText: i18n('Ok')
+ }
+ });
+ return Promise.reject(error);
+ });
+ });
}
function fetchSoftwareProduct() {
- return fetchVspIdAndVersion()
- .then(response => {
- return RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}`, options);
- });
+ return fetchVspIdAndVersion().then(response => {
+ return RestAPIUtil.fetch(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${response.versionId}`,
+ options
+ );
+ });
}
function downloadHeatFile() {
- return fetchVspIdAndVersion()
- .then(response => {
- RestAPIUtil.fetch(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate`, {
- ...options,
- dataType: 'binary'
- })
- .done((response) => showFileSaveDialog({
- blob: response.blob,
- headers: response.headers,
- defaultFilename: 'HEAT_file.zip',
- addTimestamp: true
- }));
- });
+ return fetchVspIdAndVersion().then(response => {
+ RestAPIUtil.fetch(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${response.versionId}/orchestration-template-candidate`,
+ {
+ ...options,
+ dataType: 'binary'
+ }
+ ).done(response =>
+ showFileSaveDialog({
+ blob: response.blob,
+ headers: response.headers,
+ defaultFilename: 'HEAT_file.zip',
+ addTimestamp: true
+ })
+ );
+ });
}
function processAndValidateHeatCandidate(dispatch) {
- return fetchVspIdAndVersion()
- .then(response => {
- return RestAPIUtil.put(`/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${response.value}/versions/${response.versionId}/orchestration-template-candidate/process`, {}, options)
- .then(response => {
- if (response.status === 'Success') {
- fetchSoftwareProduct().then(response => {
- dispatch({
- type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
- response
- });
- });
- }
- });
- });
+ return fetchVspIdAndVersion().then(response => {
+ return RestAPIUtil.put(
+ `/sdc1/feProxy/onboarding-api/v1.0/vendor-software-products/${
+ response.value
+ }/versions/${
+ response.versionId
+ }/orchestration-template-candidate/process`,
+ {},
+ options
+ ).then(response => {
+ if (response.status === 'Success') {
+ fetchSoftwareProduct().then(response => {
+ dispatch({
+ type:
+ softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
+ response
+ });
+ });
+ }
+ });
+ });
}
const UploadScreenActionHelper = {
- uploadFile(dispatch, formData) {
-
- return Promise.resolve()
- .then(() => uploadFile(formData))
- .then(response => {
- dispatch({
- type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
- response
- });
- dispatch({
- type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
- payload:{}
- });
- loadSoftwareProductHeatCandidate(dispatch);
- })
- .catch(error => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('File Upload Failed'),
- msg: error.responseJSON.message,
- cancelButtonText: i18n('Ok')
- }
- });
- });
- },
-
- processAndValidateHeat(dispatch, heatData, heatDataCache){
- return isEqual(heatData, heatDataCache) ? Promise.resolve() :
- updateHeatCandidate(dispatch, heatData)
- .then(() => processAndValidateHeatCandidate(dispatch))
- .then(() => dispatch({type: HeatSetupActions.FILL_HEAT_SETUP_CACHE, payload: cloneDeep(heatData)}));
- },
-
- downloadHeatFile(){
- return downloadHeatFile();
- },
+ uploadFile(dispatch, formData) {
+ return Promise.resolve()
+ .then(() => uploadFile(formData))
+ .then(response => {
+ dispatch({
+ type: softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED,
+ response
+ });
+ dispatch({
+ type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+ payload: {}
+ });
+ loadSoftwareProductHeatCandidate(dispatch);
+ })
+ .catch(error => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('File Upload Failed'),
+ msg: error.responseJSON.message,
+ cancelButtonText: i18n('Ok')
+ }
+ });
+ });
+ },
+
+ processAndValidateHeat(dispatch, heatData, heatDataCache) {
+ return isEqual(heatData, heatDataCache)
+ ? Promise.resolve()
+ : updateHeatCandidate(dispatch, heatData)
+ .then(() => processAndValidateHeatCandidate(dispatch))
+ .then(() =>
+ dispatch({
+ type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+ payload: cloneDeep(heatData)
+ })
+ );
+ },
+
+ downloadHeatFile() {
+ return downloadHeatFile();
+ }
};
export default UploadScreenActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
index 81a29cf046..7b8c87e62c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
+++ b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
@@ -1,221 +1,151 @@
import React from 'react';
-import {storiesOf} from '@kadira/storybook';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-
const stories = storiesOf('GridColumns', module);
stories.addDecorator(withKnobs);
var divStyle = {
- 'border-style': 'solid',
- 'border-size': 1
+ 'border-style': 'solid',
+ 'border-size': 1
};
-const myDiv = (<div style={divStyle}>Text Text Text</div>);
+const myDiv = <div style={divStyle}>Text Text Text</div>;
stories
- .add('Grid Options', () => (
- <div>
- <GridSection title='No last column set on item'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- </GridSection>
-
- <GridSection hasLastColSet={true} title='With last column set on item and gridsection'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
-
- <GridSection title='With last column set on item and NOT on gridsection'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
+ .add('Grid Options', () => (
+ <div>
+ <GridSection title="No last column set on item">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ </GridSection>
- </div>
- ))
- .add('Last Column', () => (
+ <GridSection
+ hasLastColSet={true}
+ title="With last column set on item and gridsection">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
- <div>
- <GridSection hasLastColSet={true} title='Testing different configurations with all settings'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={4} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={3}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={3} lastColInRow={true}>
- {myDiv}
- </GridItem>
- </GridSection>
- </div>
- ))
- .add('No Last Column', () => (
- <div>
- <GridSection title='Testing different configurations'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={4}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={3}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- </GridSection>
- <GridSection>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={3}>
- {myDiv}
- </GridItem>
- </GridSection>
- </div>
- )) .add('Test LKG form', () => (
- <div>
- <GridSection title='Testing VLM LKG configurations'>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={1} lastColInRow={true}>
- {myDiv}
- </GridItem>
- <GridItem colSpan={2}>
- <div style={divStyle}>1</div>
- </GridItem>
- </GridSection>
- </div>
-)); \ No newline at end of file
+ <GridSection title="With last column set on item and NOT on gridsection">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ </div>
+ ))
+ .add('Last Column', () => (
+ <div>
+ <GridSection
+ hasLastColSet={true}
+ title="Testing different configurations with all settings">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={4} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={3}>{myDiv}</GridItem>
+ <GridItem colSpan={1} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={3} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ </GridSection>
+ </div>
+ ))
+ .add('No Last Column', () => (
+ <div>
+ <GridSection title="Testing different configurations">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={4}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={3}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ </GridSection>
+ <GridSection>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={3}>{myDiv}</GridItem>
+ </GridSection>
+ </div>
+ ))
+ .add('Test LKG form', () => (
+ <div>
+ <GridSection title="Testing VLM LKG configurations">
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ <GridItem colSpan={2}>{myDiv}</GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1}>{myDiv}</GridItem>
+ <GridItem colSpan={1} lastColInRow={true}>
+ {myDiv}
+ </GridItem>
+ <GridItem colSpan={2}>
+ <div style={divStyle}>1</div>
+ </GridItem>
+ </GridSection>
+ </div>
+ ));
diff --git a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
index faec816d42..b894e3f031 100644
--- a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
+++ b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
@@ -15,8 +15,8 @@
*/
import OnboardingView from './OnboardingView.jsx';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-const mapStateToProps = ({currentScreen}) => ({currentScreen});
+const mapStateToProps = ({ currentScreen }) => ({ currentScreen });
const Onboarding = connect(mapStateToProps, null)(OnboardingView);
export default Onboarding;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
index d75c234caf..2fccfcbd2a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
@@ -34,289 +34,591 @@ import ComputeFlavorActionHelper from './softwareProduct/components/compute/Comp
import OnboardActionHelper from './onboard/OnboardActionHelper.js';
import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
import SoftwareProductComponentsMonitoringAction from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js';
-import {actionTypes, enums} from './OnboardingConstants.js';
-import {actionTypes as SoftwareProductActionTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes, enums } from './OnboardingConstants.js';
+import {
+ actionTypes as SoftwareProductActionTypes,
+ onboardingOriginTypes
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
import ActivityLogActionHelper from 'sdc-app/common/activity-log/ActivityLogActionHelper.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
import SoftwareProductComponentsImageActionHelper from './softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js';
import licenseModelOverviewActionHelper from 'sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js';
-import {tabsMapping as attachmentsTabsMapping} from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js';
+import { tabsMapping as attachmentsTabsMapping } from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js';
import SoftwareProductAttachmentsActionHelper from 'sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js';
function setCurrentScreen(dispatch, screen, props = {}) {
- dispatch({
- type: actionTypes.SET_CURRENT_SCREEN,
- currentScreen: {
- screen,
- props,
- forceBreadCrumbsUpdate: true
- }
- });
+ dispatch({
+ type: actionTypes.SET_CURRENT_SCREEN,
+ currentScreen: {
+ screen,
+ props,
+ forceBreadCrumbsUpdate: true
+ }
+ });
}
export function updateCurrentScreenProps(dispatch, props = {}) {
- dispatch({
- type: actionTypes.UPDATE_CURRENT_SCREEN_PROPS,
- props
- });
+ dispatch({
+ type: actionTypes.UPDATE_CURRENT_SCREEN_PROPS,
+ props
+ });
}
const OnboardingActionHelper = {
-
- loadItemsLists(dispatch) {
- LicenseModelActionHelper.fetchLicenseModels(dispatch);
- LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
- LicenseModelActionHelper.fetchArchivedLicenseModels(dispatch);
- SoftwareProductActionHelper.fetchSoftwareProductList(dispatch);
- SoftwareProductActionHelper.fetchFinalizedSoftwareProductList(dispatch);
- SoftwareProductActionHelper.fetchArchivedSoftwareProductList(dispatch);
- },
-
- navigateToOnboardingCatalog(dispatch) {
- UsersActionHelper.fetchUsersList(dispatch);
- this.loadItemsLists(dispatch);
- OnboardActionHelper.resetOnboardStore(dispatch);
- setCurrentScreen(dispatch, enums.SCREEN.ONBOARDING_CATALOG);
- },
-
- autoSaveBeforeNavigate(dispatch, {softwareProductId, version, vspComponentId, dataToSave}) {
- if(softwareProductId) {
- if(vspComponentId) {
- return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch, {
- softwareProductId, version, vspComponentId,
- componentData: dataToSave.componentData,
- qdata: dataToSave.qdata
- });
- }
- return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
- softwareProduct: dataToSave.softwareProduct,
- version,
- qdata: dataToSave.qdata
- });
- }
- return Promise.resolve();
- },
-
- navigateToLicenseModelOverview(dispatch, {licenseModelId, version, status}) {
-
- /**
- * TODO change to specific rest
- */
-
- LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version}).then(() => {
- LicenseModelActionHelper.fetchLicenseModelItems(dispatch, {licenseModelId, version}).then(() => {
- setCurrentScreen(dispatch, enums.SCREEN.LICENSE_MODEL_OVERVIEW, {licenseModelId, version, status});
- });
- licenseModelOverviewActionHelper.selectVLMListView(dispatch, {buttonTab: null});
- });
- },
- navigateToLicenseAgreements(dispatch, {licenseModelId, version, status}) {
- LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
- LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version}).then(() => {
- setCurrentScreen(dispatch, enums.SCREEN.LICENSE_AGREEMENTS, {licenseModelId, version, status});
- });
- },
-
- navigateToFeatureGroups(dispatch, {licenseModelId, version, status}) {
- FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
- setCurrentScreen(dispatch, enums.SCREEN.FEATURE_GROUPS, {licenseModelId, version, status});
- },
-
- navigateToEntitlementPools(dispatch, {licenseModelId, version, status}) {
- EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
- setCurrentScreen(dispatch, enums.SCREEN.ENTITLEMENT_POOLS, {licenseModelId, version, status});
- },
-
- navigateToLicenseKeyGroups(dispatch, {licenseModelId, version, status}) {
- LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
- setCurrentScreen(dispatch, enums.SCREEN.LICENSE_KEY_GROUPS, {licenseModelId, version, status});
- },
-
- navigateToLicenseModelActivityLog(dispatch, {licenseModelId, version, status}){
- ActivityLogActionHelper.fetchActivityLog(dispatch, {itemId: licenseModelId, versionId: version.id});
- setCurrentScreen(dispatch, enums.SCREEN.ACTIVITY_LOG, {licenseModelId, version, status});
- },
-
- navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version, status}) {
- SoftwareProductComponentsActionHelper.clearComponentsStore(dispatch);
- SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version}).then(response => {
- let {vendorId: licenseModelId, licensingVersion} = response[0];
- SoftwareProductActionHelper.loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion});
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version: version});
- if(response[0].onboardingOrigin === onboardingOriginTypes.ZIP) {
- SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version: version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, {softwareProductId, licenseModelId, version, status});
- });
- },
-
- navigateToSoftwareProductDetails(dispatch, {softwareProductId, version, status}) {
- SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version}).then(response => {
- let {vendorId: licenseModelId, licensingVersion} = response[0];
- SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {licenseModelId});
- SoftwareProductActionHelper.loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, {softwareProductId, version, status});
- });
- },
-
- navigateToSoftwareProductAttachmentsSetupTab(dispatch, {softwareProductId, version, status}) {
- SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version});
- SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab: attachmentsTabsMapping.SETUP});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {softwareProductId, version, status});
- },
- navigateToSoftwareProductAttachmentsValidationTab(dispatch, {softwareProductId, version, status}) {
- SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {softwareProductId, version}).then(() => {
- SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab: attachmentsTabsMapping.VALIDATION});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {softwareProductId, version, status});
- });
- },
-
- navigateToSoftwareProductProcesses(dispatch, {softwareProductId, version, status}) {
- if (softwareProductId) {
- SoftwareProductProcessesActionHelper.fetchProcessesList(dispatch, {softwareProductId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES, {softwareProductId, version, status});
- },
-
- navigateToSoftwareProductNetworks(dispatch, {softwareProductId, version, status}) {
- if (softwareProductId) {
- SoftwareProductNetworksActionHelper.fetchNetworksList(dispatch, {softwareProductId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS, {softwareProductId, version, status});
- },
-
- navigateToSoftwareProductDependencies(dispatch, {softwareProductId, version, status}) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version}).then(result => {
- if(result.listCount >= 2) {
- SoftwareProductDependenciesActionHelper.fetchDependencies(dispatch, {softwareProductId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES, {softwareProductId, version, status});
- }
- else {
- this.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version, status});
- }
- });
- },
-
- navigateToSoftwareProductComponents(dispatch, {softwareProductId, version, status}) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, {softwareProductId, version, status});
- },
- navigateToSoftwareProductDeployment(dispatch, {softwareProductId, version, status}) {
- SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
- ComputeFlavorActionHelper.fetchComputesListForVSP(dispatch, {softwareProductId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT, {softwareProductId, version, status});
- },
- navigateToSoftwareProductActivityLog(dispatch, {softwareProductId, version, status}){
- ActivityLogActionHelper.fetchActivityLog(dispatch, {itemId: softwareProductId, versionId: version.id});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG, {softwareProductId, version, status});
- },
-
- navigateToSoftwareProductComponentProcesses(dispatch, {softwareProductId, componentId, version, status}) {
- if (componentId && softwareProductId) {
- SoftwareProductComponentProcessesActionHelper.fetchProcessesList(dispatch, {componentId, softwareProductId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES, {softwareProductId, componentId, version, status});
- },
-
- navigateToSoftwareProductComponentMonitoring(dispatch, {softwareProductId, version, componentId, status}){
- if (componentId && softwareProductId && version) {
- SoftwareProductComponentsMonitoringAction.fetchExistingFiles(dispatch, {componentId, softwareProductId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING, {softwareProductId, componentId, version, status});
- },
-
- navigateToComponentStorage(dispatch, {softwareProductId, componentId, version, status}) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE, {softwareProductId, version, componentId, status});
- },
-
- navigateToComponentCompute(dispatch, {softwareProductId, componentId, version, status}) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
- if (componentId && softwareProductId) {
- ComputeFlavorActionHelper.fetchComputesList(dispatch, {softwareProductId, componentId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE, {softwareProductId, version, componentId, status});
- },
-
- navigateToComponentNetwork(dispatch, {softwareProductId, componentId, version, status}) {
- SoftwareProductComponentsNetworkActionHelper.fetchNICsList(dispatch, {softwareProductId, componentId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK, {softwareProductId, version, componentId, status});
- },
-
- navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId, version, status}) {
- if (componentId && softwareProductId) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
- }
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL, {softwareProductId, version, componentId, status});
- },
-
- navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version, status}) {
- this.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId, version, status});
- dispatch({
- type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
- mapOfExpandedIds: {
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + componentId]: true
- }
- });
- },
-
- navigateToComponentLoadBalancing(dispatch, {softwareProductId, componentId, version, status}) {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(dispatch, {softwareProductId, vspComponentId: componentId, version});
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, {softwareProductId, version, componentId, status});
- },
-
- navigateToComponentImages(dispatch, {softwareProductId, componentId, version, status}) {
- SoftwareProductComponentsImageActionHelper.fetchImagesList(dispatch, {
- softwareProductId,
- componentId,
- version
- });
- setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES, {softwareProductId, version, componentId, status});
- },
-
- navigateToVersionsPage(dispatch, {itemType, itemId, itemName, additionalProps, users}) {
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: users});
- VersionsPageActionHelper.selectNone(dispatch);
- VersionsPageActionHelper.fetchVersions(dispatch, {itemType, itemId}).then(() => {
- ItemsHelper.fetchItem(itemId).then(result => {
- setCurrentScreen(dispatch, enums.SCREEN.VERSIONS_PAGE, {status: result.status, itemType, itemId, itemName, additionalProps});
- });
-
- });
-
- },
-
- checkMergeStatus(dispatch, {itemId, versionId, version}) {
- return ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
- let state = response && response.state || {};
- let {synchronizationState} = state;
- // let inMerge = synchronizationState === SyncStates.MERGE;
- MergeEditorActionHelper.fetchConflicts(dispatch, {itemId, version}).then(data => {
- dispatch({
- type: actionTypes.CHECK_MERGE_STATUS,
- synchronizationState,
- conflictInfoList: data.conflictInfoList
- });
- });
- });
- },
-
- forceBreadCrumbsUpdate(dispatch) {
- dispatch({
- type: actionTypes.SET_CURRENT_SCREEN,
- currentScreen: {
- forceBreadCrumbsUpdate: true
- }
- });
- },
-
- updateCurrentScreenVersion(dispatch, version) {
- dispatch({
- type: actionTypes.SET_CURRENT_SCREEN_VERSION,
- version
- });
- }
+ loadItemsLists(dispatch) {
+ LicenseModelActionHelper.fetchLicenseModels(dispatch);
+ LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
+ LicenseModelActionHelper.fetchArchivedLicenseModels(dispatch);
+ SoftwareProductActionHelper.fetchSoftwareProductList(dispatch);
+ SoftwareProductActionHelper.fetchFinalizedSoftwareProductList(dispatch);
+ SoftwareProductActionHelper.fetchArchivedSoftwareProductList(dispatch);
+ },
+
+ navigateToOnboardingCatalog(dispatch) {
+ UsersActionHelper.fetchUsersList(dispatch);
+ this.loadItemsLists(dispatch);
+ OnboardActionHelper.resetOnboardStore(dispatch);
+ setCurrentScreen(dispatch, enums.SCREEN.ONBOARDING_CATALOG);
+ },
+
+ autoSaveBeforeNavigate(
+ dispatch,
+ { softwareProductId, version, vspComponentId, dataToSave }
+ ) {
+ if (softwareProductId) {
+ if (vspComponentId) {
+ return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId,
+ componentData: dataToSave.componentData,
+ qdata: dataToSave.qdata
+ }
+ );
+ }
+ return SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+ softwareProduct: dataToSave.softwareProduct,
+ version,
+ qdata: dataToSave.qdata
+ });
+ }
+ return Promise.resolve();
+ },
+
+ navigateToLicenseModelOverview(
+ dispatch,
+ { licenseModelId, version, status }
+ ) {
+ /**
+ * TODO change to specific rest
+ */
+
+ LicenseModelActionHelper.fetchLicenseModelById(dispatch, {
+ licenseModelId,
+ version
+ }).then(() => {
+ LicenseModelActionHelper.fetchLicenseModelItems(dispatch, {
+ licenseModelId,
+ version
+ }).then(() => {
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+ { licenseModelId, version, status }
+ );
+ });
+ licenseModelOverviewActionHelper.selectVLMListView(dispatch, {
+ buttonTab: null
+ });
+ });
+ },
+ navigateToLicenseAgreements(dispatch, { licenseModelId, version, status }) {
+ LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+ licenseModelId,
+ version
+ });
+ LicenseModelActionHelper.fetchLicenseModelById(dispatch, {
+ licenseModelId,
+ version
+ }).then(() => {
+ setCurrentScreen(dispatch, enums.SCREEN.LICENSE_AGREEMENTS, {
+ licenseModelId,
+ version,
+ status
+ });
+ });
+ },
+
+ navigateToFeatureGroups(dispatch, { licenseModelId, version, status }) {
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId,
+ version
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.FEATURE_GROUPS, {
+ licenseModelId,
+ version,
+ status
+ });
+ },
+
+ navigateToEntitlementPools(dispatch, { licenseModelId, version, status }) {
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+ licenseModelId,
+ version
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.ENTITLEMENT_POOLS, {
+ licenseModelId,
+ version,
+ status
+ });
+ },
+
+ navigateToLicenseKeyGroups(dispatch, { licenseModelId, version, status }) {
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+ licenseModelId,
+ version
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.LICENSE_KEY_GROUPS, {
+ licenseModelId,
+ version,
+ status
+ });
+ },
+
+ navigateToLicenseModelActivityLog(
+ dispatch,
+ { licenseModelId, version, status }
+ ) {
+ ActivityLogActionHelper.fetchActivityLog(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.ACTIVITY_LOG, {
+ licenseModelId,
+ version,
+ status
+ });
+ },
+
+ navigateToSoftwareProductLandingPage(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.clearComponentsStore(dispatch);
+ SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+ softwareProductId,
+ version
+ }).then(response => {
+ let { vendorId: licenseModelId, licensingVersion } = response[0];
+ SoftwareProductActionHelper.loadSoftwareProductDetailsData(
+ dispatch,
+ { licenseModelId, licensingVersion }
+ );
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version: version }
+ );
+ if (response[0].onboardingOrigin === onboardingOriginTypes.ZIP) {
+ SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(
+ dispatch,
+ { softwareProductId, version: version }
+ );
+ }
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ { softwareProductId, licenseModelId, version, status }
+ );
+ });
+ },
+
+ navigateToSoftwareProductDetails(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+ softwareProductId,
+ version
+ }).then(response => {
+ let { vendorId: licenseModelId, licensingVersion } = response[0];
+ SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {
+ licenseModelId
+ });
+ SoftwareProductActionHelper.loadSoftwareProductDetailsData(
+ dispatch,
+ { licenseModelId, licensingVersion }
+ );
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, {
+ softwareProductId,
+ version,
+ status
+ });
+ });
+ },
+
+ navigateToSoftwareProductAttachmentsSetupTab(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductActionHelper.loadSoftwareProductHeatCandidate(dispatch, {
+ softwareProductId,
+ version
+ });
+ SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+ activeTab: attachmentsTabsMapping.SETUP
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+ navigateToSoftwareProductAttachmentsValidationTab(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {
+ softwareProductId,
+ version
+ }).then(() => {
+ SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+ activeTab: attachmentsTabsMapping.VALIDATION
+ });
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
+ { softwareProductId, version, status }
+ );
+ });
+ },
+
+ navigateToSoftwareProductProcesses(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ if (softwareProductId) {
+ SoftwareProductProcessesActionHelper.fetchProcessesList(dispatch, {
+ softwareProductId,
+ version
+ });
+ }
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+
+ navigateToSoftwareProductNetworks(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ if (softwareProductId) {
+ SoftwareProductNetworksActionHelper.fetchNetworksList(dispatch, {
+ softwareProductId,
+ version
+ });
+ }
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+
+ navigateToSoftwareProductDependencies(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version }
+ ).then(result => {
+ if (result.listCount >= 2) {
+ SoftwareProductDependenciesActionHelper.fetchDependencies(
+ dispatch,
+ { softwareProductId, version }
+ );
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
+ { softwareProductId, version, status }
+ );
+ } else {
+ this.navigateToSoftwareProductLandingPage(dispatch, {
+ softwareProductId,
+ version,
+ status
+ });
+ }
+ });
+ },
+
+ navigateToSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version }
+ );
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+ navigateToSoftwareProductDeployment(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+ dispatch,
+ { softwareProductId, version }
+ );
+ ComputeFlavorActionHelper.fetchComputesListForVSP(dispatch, {
+ softwareProductId,
+ version
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+ navigateToSoftwareProductActivityLog(
+ dispatch,
+ { softwareProductId, version, status }
+ ) {
+ ActivityLogActionHelper.fetchActivityLog(dispatch, {
+ itemId: softwareProductId,
+ versionId: version.id
+ });
+ setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG, {
+ softwareProductId,
+ version,
+ status
+ });
+ },
+
+ navigateToSoftwareProductComponentProcesses(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ if (componentId && softwareProductId) {
+ SoftwareProductComponentProcessesActionHelper.fetchProcessesList(
+ dispatch,
+ { componentId, softwareProductId, version }
+ );
+ }
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+ { softwareProductId, componentId, version, status }
+ );
+ },
+
+ navigateToSoftwareProductComponentMonitoring(
+ dispatch,
+ { softwareProductId, version, componentId, status }
+ ) {
+ if (componentId && softwareProductId && version) {
+ SoftwareProductComponentsMonitoringAction.fetchExistingFiles(
+ dispatch,
+ { componentId, softwareProductId, version }
+ );
+ }
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+ { softwareProductId, componentId, version, status }
+ );
+ },
+
+ navigateToComponentStorage(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, vspComponentId: componentId, version }
+ );
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToComponentCompute(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, vspComponentId: componentId, version }
+ );
+ if (componentId && softwareProductId) {
+ ComputeFlavorActionHelper.fetchComputesList(dispatch, {
+ softwareProductId,
+ componentId,
+ version
+ });
+ }
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToComponentNetwork(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ SoftwareProductComponentsNetworkActionHelper.fetchNICsList(dispatch, {
+ softwareProductId,
+ componentId,
+ version
+ });
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToSoftwareProductComponentGeneral(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ if (componentId && softwareProductId) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, vspComponentId: componentId, version }
+ );
+ }
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ this.navigateToSoftwareProductComponentGeneral(dispatch, {
+ softwareProductId,
+ componentId,
+ version,
+ status
+ });
+ dispatch({
+ type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
+ mapOfExpandedIds: {
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: true,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+ '|' +
+ componentId]: true
+ }
+ });
+ },
+
+ navigateToComponentLoadBalancing(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponent(
+ dispatch,
+ { softwareProductId, vspComponentId: componentId, version }
+ );
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToComponentImages(
+ dispatch,
+ { softwareProductId, componentId, version, status }
+ ) {
+ SoftwareProductComponentsImageActionHelper.fetchImagesList(dispatch, {
+ softwareProductId,
+ componentId,
+ version
+ });
+ setCurrentScreen(
+ dispatch,
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+ { softwareProductId, version, componentId, status }
+ );
+ },
+
+ navigateToVersionsPage(
+ dispatch,
+ { itemType, itemId, itemName, additionalProps, users }
+ ) {
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId,
+ allUsers: users
+ });
+ VersionsPageActionHelper.selectNone(dispatch);
+ VersionsPageActionHelper.fetchVersions(dispatch, {
+ itemType,
+ itemId
+ }).then(() => {
+ ItemsHelper.fetchItem(itemId).then(result => {
+ setCurrentScreen(dispatch, enums.SCREEN.VERSIONS_PAGE, {
+ status: result.status,
+ itemType,
+ itemId,
+ itemName,
+ additionalProps
+ });
+ });
+ });
+ },
+
+ checkMergeStatus(dispatch, { itemId, versionId, version }) {
+ return ItemsHelper.fetchVersion({ itemId, versionId }).then(
+ response => {
+ let state = (response && response.state) || {};
+ let { synchronizationState } = state;
+ // let inMerge = synchronizationState === SyncStates.MERGE;
+ MergeEditorActionHelper.fetchConflicts(dispatch, {
+ itemId,
+ version
+ }).then(data => {
+ dispatch({
+ type: actionTypes.CHECK_MERGE_STATUS,
+ synchronizationState,
+ conflictInfoList: data.conflictInfoList
+ });
+ });
+ }
+ );
+ },
+
+ forceBreadCrumbsUpdate(dispatch) {
+ dispatch({
+ type: actionTypes.SET_CURRENT_SCREEN,
+ currentScreen: {
+ forceBreadCrumbsUpdate: true
+ }
+ });
+ },
+
+ updateCurrentScreenVersion(dispatch, version) {
+ dispatch({
+ type: actionTypes.SET_CURRENT_SCREEN_VERSION,
+ version
+ });
+ }
};
export default OnboardingActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
index 699fe9e357..36054397d9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
@@ -18,83 +18,102 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
export const DATE_FORMAT = 'MM/DD/YYYY';
export const actionTypes = keyMirror({
- SET_CURRENT_SCREEN: null,
- SET_CURRENT_LICENSE_MODEL: null,
- SET_CURRENT_SCREEN_VERSION: null,
- UPDATE_CURRENT_SCREEN_PROPS: null,
- UPDATE_ITEM_STATUS: null
+ SET_CURRENT_SCREEN: null,
+ SET_CURRENT_LICENSE_MODEL: null,
+ SET_CURRENT_SCREEN_VERSION: null,
+ UPDATE_CURRENT_SCREEN_PROPS: null,
+ UPDATE_ITEM_STATUS: null
});
export const screenTypes = keyMirror({
- LICENSE_MODEL: null,
- SOFTWARE_PRODUCT: null,
- SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL: null
+ LICENSE_MODEL: null,
+ SOFTWARE_PRODUCT: null,
+ SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL: null
});
const breadcrumbsEnum = {
- LICENSE_MODEL: 'LICENSE_MODEL',
- VERSIONS_PAGE: 'VERSIONS_PAGE',
- LICENSE_MODEL_OVERVIEW: 'LICENSE_MODEL_OVERVIEW',
- LICENSE_AGREEMENTS: 'LICENSE_AGREEMENTS',
- FEATURE_GROUPS: 'FEATURE_GROUPS',
- ENTITLEMENT_POOLS: 'ENTITLEMENT_POOLS',
- LICENSE_KEY_GROUPS: 'LICENSE_KEY_GROUPS',
- ACTIVITY_LOG: 'ACTIVITY_LOG',
+ LICENSE_MODEL: 'LICENSE_MODEL',
+ VERSIONS_PAGE: 'VERSIONS_PAGE',
+ LICENSE_MODEL_OVERVIEW: 'LICENSE_MODEL_OVERVIEW',
+ LICENSE_AGREEMENTS: 'LICENSE_AGREEMENTS',
+ FEATURE_GROUPS: 'FEATURE_GROUPS',
+ ENTITLEMENT_POOLS: 'ENTITLEMENT_POOLS',
+ LICENSE_KEY_GROUPS: 'LICENSE_KEY_GROUPS',
+ ACTIVITY_LOG: 'ACTIVITY_LOG',
- SOFTWARE_PRODUCT: 'SOFTWARE_PRODUCT',
- SOFTWARE_PRODUCT_VERSIONS_PAGE: 'SOFTWARE_PRODUCT_VERSIONS_PAGE',
- SOFTWARE_PRODUCT_LANDING_PAGE: 'SOFTWARE_PRODUCT_LANDING_PAGE',
- SOFTWARE_PRODUCT_DETAILS: 'SOFTWARE_PRODUCT_DETAILS',
- SOFTWARE_PRODUCT_ATTACHMENTS: 'SOFTWARE_PRODUCT_ATTACHMENTS',
- SOFTWARE_PRODUCT_PROCESSES: 'SOFTWARE_PRODUCT_PROCESSES',
- SOFTWARE_PRODUCT_DEPLOYMENT: 'SOFTWARE_PRODUCT_DEPLOYMENT',
- SOFTWARE_PRODUCT_NETWORKS: 'SOFTWARE_PRODUCT_NETWORKS',
- SOFTWARE_PRODUCT_DEPENDENCIES: 'SOFTWARE_PRODUCT_DEPENDENCIES',
- SOFTWARE_PRODUCT_ACTIVITY_LOG: 'SOFTWARE_PRODUCT_ACTIVITY_LOG',
- SOFTWARE_PRODUCT_COMPONENTS: 'SOFTWARE_PRODUCT_COMPONENTS',
- SOFTWARE_PRODUCT_COMPONENT_PROCESSES: 'SOFTWARE_PRODUCT_COMPONENT_PROCESSES',
- SOFTWARE_PRODUCT_COMPONENT_NETWORK: 'SOFTWARE_PRODUCT_COMPONENT_NETWORK',
- SOFTWARE_PRODUCT_COMPONENT_STORAGE: 'SOFTWARE_PRODUCT_COMPONENT_STORAGE',
- SOFTWARE_PRODUCT_COMPONENT_GENERAL: 'SOFTWARE_PRODUCT_COMPONENT_GENERAL',
- SOFTWARE_PRODUCT_COMPONENT_COMPUTE: 'SOFTWARE_PRODUCT_COMPONENT_COMPUTE',
- SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: 'SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING',
- SOFTWARE_PRODUCT_COMPONENT_MONITORING: 'SOFTWARE_PRODUCT_COMPONENT_MONITORING',
- SOFTWARE_PRODUCT_COMPONENT_IMAGES: 'SOFTWARE_PRODUCT_COMPONENT_IMAGES'
+ SOFTWARE_PRODUCT: 'SOFTWARE_PRODUCT',
+ SOFTWARE_PRODUCT_VERSIONS_PAGE: 'SOFTWARE_PRODUCT_VERSIONS_PAGE',
+ SOFTWARE_PRODUCT_LANDING_PAGE: 'SOFTWARE_PRODUCT_LANDING_PAGE',
+ SOFTWARE_PRODUCT_DETAILS: 'SOFTWARE_PRODUCT_DETAILS',
+ SOFTWARE_PRODUCT_ATTACHMENTS: 'SOFTWARE_PRODUCT_ATTACHMENTS',
+ SOFTWARE_PRODUCT_PROCESSES: 'SOFTWARE_PRODUCT_PROCESSES',
+ SOFTWARE_PRODUCT_DEPLOYMENT: 'SOFTWARE_PRODUCT_DEPLOYMENT',
+ SOFTWARE_PRODUCT_NETWORKS: 'SOFTWARE_PRODUCT_NETWORKS',
+ SOFTWARE_PRODUCT_DEPENDENCIES: 'SOFTWARE_PRODUCT_DEPENDENCIES',
+ SOFTWARE_PRODUCT_ACTIVITY_LOG: 'SOFTWARE_PRODUCT_ACTIVITY_LOG',
+ SOFTWARE_PRODUCT_COMPONENTS: 'SOFTWARE_PRODUCT_COMPONENTS',
+ SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ 'SOFTWARE_PRODUCT_COMPONENT_PROCESSES',
+ SOFTWARE_PRODUCT_COMPONENT_NETWORK: 'SOFTWARE_PRODUCT_COMPONENT_NETWORK',
+ SOFTWARE_PRODUCT_COMPONENT_STORAGE: 'SOFTWARE_PRODUCT_COMPONENT_STORAGE',
+ SOFTWARE_PRODUCT_COMPONENT_GENERAL: 'SOFTWARE_PRODUCT_COMPONENT_GENERAL',
+ SOFTWARE_PRODUCT_COMPONENT_COMPUTE: 'SOFTWARE_PRODUCT_COMPONENT_COMPUTE',
+ SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ 'SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING',
+ SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ 'SOFTWARE_PRODUCT_COMPONENT_MONITORING',
+ SOFTWARE_PRODUCT_COMPONENT_IMAGES: 'SOFTWARE_PRODUCT_COMPONENT_IMAGES'
};
export const enums = keyMirror({
+ BREADCRUMS: { ...breadcrumbsEnum },
- BREADCRUMS: {...breadcrumbsEnum},
+ SCREEN: {
+ ONBOARDING_CATALOG: 'ONBOARDING_CATALOG',
+ VERSIONS_PAGE: breadcrumbsEnum.VERSIONS_PAGE,
+ LICENSE_MODEL_OVERVIEW: breadcrumbsEnum.LICENSE_MODEL_OVERVIEW,
+ LICENSE_AGREEMENTS: breadcrumbsEnum.LICENSE_AGREEMENTS,
+ FEATURE_GROUPS: breadcrumbsEnum.FEATURE_GROUPS,
+ ENTITLEMENT_POOLS: breadcrumbsEnum.ENTITLEMENT_POOLS,
+ LICENSE_KEY_GROUPS: breadcrumbsEnum.LICENSE_KEY_GROUPS,
+ ACTIVITY_LOG: breadcrumbsEnum.ACTIVITY_LOG,
- SCREEN: {
- ONBOARDING_CATALOG: 'ONBOARDING_CATALOG',
- VERSIONS_PAGE: breadcrumbsEnum.VERSIONS_PAGE,
- LICENSE_MODEL_OVERVIEW: breadcrumbsEnum.LICENSE_MODEL_OVERVIEW,
- LICENSE_AGREEMENTS: breadcrumbsEnum.LICENSE_AGREEMENTS,
- FEATURE_GROUPS: breadcrumbsEnum.FEATURE_GROUPS,
- ENTITLEMENT_POOLS: breadcrumbsEnum.ENTITLEMENT_POOLS,
- LICENSE_KEY_GROUPS: breadcrumbsEnum.LICENSE_KEY_GROUPS,
- ACTIVITY_LOG: breadcrumbsEnum.ACTIVITY_LOG,
-
- SOFTWARE_PRODUCT_VERSIONS_PAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_VERSIONS_PAGE,
- SOFTWARE_PRODUCT_LANDING_PAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_LANDING_PAGE,
- SOFTWARE_PRODUCT_DETAILS: breadcrumbsEnum.SOFTWARE_PRODUCT_DETAILS,
- SOFTWARE_PRODUCT_ATTACHMENTS: breadcrumbsEnum.SOFTWARE_PRODUCT_ATTACHMENTS,
- SOFTWARE_PRODUCT_ATTACHMENTS_SETUP: 'SOFTWARE_PRODUCT_ATTACHMENTS_SETUP',
- SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION: 'SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION',
- SOFTWARE_PRODUCT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_PROCESSES,
- SOFTWARE_PRODUCT_DEPLOYMENT: breadcrumbsEnum.SOFTWARE_PRODUCT_DEPLOYMENT,
- SOFTWARE_PRODUCT_NETWORKS: breadcrumbsEnum.SOFTWARE_PRODUCT_NETWORKS,
- SOFTWARE_PRODUCT_DEPENDENCIES: breadcrumbsEnum.SOFTWARE_PRODUCT_DEPENDENCIES,
- SOFTWARE_PRODUCT_ACTIVITY_LOG: breadcrumbsEnum.SOFTWARE_PRODUCT_ACTIVITY_LOG,
- SOFTWARE_PRODUCT_COMPONENTS: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENTS,
- SOFTWARE_PRODUCT_COMPONENT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
- SOFTWARE_PRODUCT_COMPONENT_COMPUTE: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
- SOFTWARE_PRODUCT_COMPONENT_STORAGE: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
- SOFTWARE_PRODUCT_COMPONENT_NETWORK: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
- SOFTWARE_PRODUCT_COMPONENT_GENERAL: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
- SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
- SOFTWARE_PRODUCT_COMPONENT_MONITORING: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
- SOFTWARE_PRODUCT_COMPONENT_IMAGES: breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_IMAGES
- }
+ SOFTWARE_PRODUCT_VERSIONS_PAGE:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+ SOFTWARE_PRODUCT_LANDING_PAGE:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_LANDING_PAGE,
+ SOFTWARE_PRODUCT_DETAILS: breadcrumbsEnum.SOFTWARE_PRODUCT_DETAILS,
+ SOFTWARE_PRODUCT_ATTACHMENTS:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_ATTACHMENTS,
+ SOFTWARE_PRODUCT_ATTACHMENTS_SETUP:
+ 'SOFTWARE_PRODUCT_ATTACHMENTS_SETUP',
+ SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION:
+ 'SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION',
+ SOFTWARE_PRODUCT_PROCESSES: breadcrumbsEnum.SOFTWARE_PRODUCT_PROCESSES,
+ SOFTWARE_PRODUCT_DEPLOYMENT:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_DEPLOYMENT,
+ SOFTWARE_PRODUCT_NETWORKS: breadcrumbsEnum.SOFTWARE_PRODUCT_NETWORKS,
+ SOFTWARE_PRODUCT_DEPENDENCIES:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_DEPENDENCIES,
+ SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_ACTIVITY_LOG,
+ SOFTWARE_PRODUCT_COMPONENTS:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENTS,
+ SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+ SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+ SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+ SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+ SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+ SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+ SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+ SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_IMAGES
+ }
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
index e04f9b7309..f462dd790b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
@@ -16,7 +16,7 @@
import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import isEqual from 'lodash/isEqual.js';
@@ -29,460 +29,812 @@ import store from 'sdc-app/AppStore.js';
import Configuration from 'sdc-app/config/Configuration.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import {
+ onboardingMethod as onboardingMethodTypes,
+ onboardingOriginTypes
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { itemTypes } from './versionsPage/VersionsPageConstants.js';
-import {itemTypes} from './versionsPage/VersionsPageConstants.js';
-
-import {AppContainer} from 'react-hot-loader';
+import { AppContainer } from 'react-hot-loader';
import HeatSetupActionHelper from './softwareProduct/attachments/setup/HeatSetupActionHelper.js';
-import {actionTypes, enums, screenTypes} from './OnboardingConstants.js';
+import { actionTypes, enums, screenTypes } from './OnboardingConstants.js';
import OnboardingActionHelper from './OnboardingActionHelper.js';
import Onboarding from './Onboarding.js';
export default class OnboardingPunchOut {
-
- render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
- if (!this.unsubscribeFromStore) {
- this.unsubscribeFromStore = store.subscribe(() => this.handleStoreChange());
- }
-
- if (!this.isConfigSet) {
- Configuration.setCatalogApiRoot(apiRoot);
- Configuration.setCatalogApiHeaders(apiHeaders);
- this.isConfigSet = true;
- }
-
- this.onEvent = (...args) => onEvent(...args);
- this.handleData(data);
-
- if (!this.rendered) {
- render(
- <AppContainer>
- <Application>
- <Onboarding/>
- </Application>
- </AppContainer>,
- element
- );
- if (module.hot) {
- module.hot.accept('sdc-app/onboarding/Onboarding.js', () => {
- const NextOnboarding = require('sdc-app/onboarding/Onboarding.js').default;
- render(
- <AppContainer>
- <Application>
- <NextOnboarding/>
- </Application>
- </AppContainer>,
- element
- );
- });
- }
- this.rendered = true;
- }
- }
-
- unmount(element) {
- ReactDOM.unmountComponentAtNode(element);
- this.rendered = false;
- this.unsubscribeFromStore();
- this.unsubscribeFromStore = null;
- }
-
- handleData(data) {
- let {breadcrumbs: {selectedKeys = []} = {}} = data;
- let dispatch = action => store.dispatch(action);
- let {currentScreen, users: {usersList}, softwareProductList, finalizedSoftwareProductList, licenseModelList, finalizedLicenseModelList,
- softwareProduct: {softwareProductEditor: {data: vspData = {}},
- softwareProductComponents = {}, softwareProductQuestionnaire = {}}, archivedLicenseModelList} = store.getState();
- const wholeSoftwareProductList = [...softwareProductList, ...finalizedSoftwareProductList];
- const wholeLicenseModelList = [...licenseModelList, ...finalizedLicenseModelList, ...archivedLicenseModelList];
-
- let {props: {version, isReadOnlyMode}, screen} = currentScreen;
- let {componentEditor: {data: componentData = {}, qdata: componentQData = {}}} = softwareProductComponents;
- if (this.programmaticBreadcrumbsUpdate) {
- this.prevSelectedKeys = selectedKeys;
- this.programmaticBreadcrumbsUpdate = false;
- return;
- }
- if (!isEqual(selectedKeys, this.prevSelectedKeys)) {
- this.breadcrumbsPrefixSelected = isEqual(selectedKeys, this.prevSelectedKeys && this.prevSelectedKeys.slice(0, selectedKeys.length));
-
- const [, screenType, prevVspId, , prevComponentId] = this.prevSelectedKeys || [];
- let preNavigate = Promise.resolve();
- if(screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT && screen !== 'VERSIONS_PAGE' && !isReadOnlyMode) {
- let dataToSave = prevVspId ? prevComponentId ? {componentData, qdata: componentQData} : {softwareProduct: vspData, qdata: softwareProductQuestionnaire.qdata} : {};
- preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate(dispatch, {
- softwareProductId: prevVspId,
- version,
- vspComponentId: prevComponentId,
- dataToSave
- });
- }
-
- let {currentScreen: {props: {softwareProductId}}, softwareProduct: {softwareProductAttachments: {heatSetup, heatSetupCache}}} = store.getState();
- let heatSetupPopupPromise = currentScreen.screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ?
- HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
- Promise.resolve();
- Promise.all([preNavigate, heatSetupPopupPromise]).then(() => {
- this.prevSelectedKeys = selectedKeys;
- if (selectedKeys.length === 0) {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.ONBOARDING_CATALOG});
-
- } else if (selectedKeys.length === 1 || selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL) {
- let [licenseModelId, , licenseModelScreen] = selectedKeys;
- let licenseModel = wholeLicenseModelList.find(vlm => vlm.id === licenseModelId);
- ScreensHelper.loadScreen(dispatch, {screen: licenseModelScreen, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId, version, licenseModel, usersList}});
-
- } else if (selectedKeys.length <= 4 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT) {
- let [licenseModelId, , softwareProductId, softwareProductScreen] = selectedKeys;
- let softwareProduct = softwareProductId ?
- wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
- wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
- if (!softwareProductId) {
- softwareProductId = softwareProduct.id;
- }
- if (softwareProductScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) {
- softwareProduct = vspData;
- //check current vsp fields to determine which file has uploaded
- if(vspData.onboardingOrigin === onboardingOriginTypes.ZIP || vspData.candidateOnboardingOrigin === onboardingOriginTypes.ZIP) {
- softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
- }
- else if(vspData.onboardingOrigin === onboardingOriginTypes.CSAR) {
- softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
- }
- }
-
- ScreensHelper.loadScreen(dispatch, {screen: softwareProductScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, softwareProduct, version, usersList}});
-
- } else if (selectedKeys.length === 5 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
- let [licenseModelId, , softwareProductId, , componentId] = selectedKeys;
- let softwareProduct = softwareProductId ?
- wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
- wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
- if (!softwareProductId) {
- softwareProductId = softwareProduct.id;
- }
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, softwareProduct, componentId, version, usersList}});
-
- } else if (selectedKeys.length === 6 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
- let [licenseModelId, , softwareProductId, , componentId, componentScreen] = selectedKeys;
- let softwareProduct = softwareProductId ?
- wholeSoftwareProductList.find(({id}) => id === softwareProductId) :
- wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId);
- if (!softwareProductId) {
- softwareProductId = softwareProduct.id;
- }
- ScreensHelper.loadScreen(dispatch, {screen: componentScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, softwareProduct, componentId, version, usersList}});
-
- } else {
- console.error('Unknown breadcrumbs path: ', selectedKeys);
- }
- }).catch(() => {
- store.dispatch({
- type: actionTypes.SET_CURRENT_SCREEN,
- currentScreen: {
- ...currentScreen,
- forceBreadCrumbsUpdate: true
- }
- });
- });
- }
- }
-
- handleStoreChange() {
- let {currentScreen, licenseModelList, finalizedLicenseModelList, softwareProductList, finalizedSoftwareProductList, versionsPage:
- {versionsList: {itemType, itemId}},
- softwareProduct: {softwareProductEditor: {data: currentSoftwareProduct = {onboardingMethod: ''}},
- softwareProductComponents: {componentsList}}, archivedLicenseModelList, archivedSoftwareProductList} = store.getState();
- const wholeSoftwareProductList = lodashUnionBy(softwareProductList, [...finalizedSoftwareProductList, ...archivedSoftwareProductList], 'id');
- const wholeLicenseModelList = lodashUnionBy(licenseModelList, [...finalizedLicenseModelList, ...archivedLicenseModelList], 'id');
- let breadcrumbsData = {itemType, itemId, currentScreen, wholeLicenseModelList, wholeSoftwareProductList, currentSoftwareProduct, componentsList};
-
- if (currentScreen.forceBreadCrumbsUpdate || !isEqual(breadcrumbsData, this.prevBreadcrumbsData) || this.breadcrumbsPrefixSelected) {
- this.prevBreadcrumbsData = breadcrumbsData;
- this.breadcrumbsPrefixSelected = false;
- this.programmaticBreadcrumbsUpdate = true;
- let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData);
- this.onEvent('breadcrumbsupdated', breadcrumbs);
- store.dispatch({
- type: actionTypes.SET_CURRENT_SCREEN,
- currentScreen: {
- ...currentScreen,
- forceBreadCrumbsUpdate: false
- }
- });
- }
- }
-
- buildBreadcrumbs({currentScreen: {screen, props}, itemType, itemId, currentSoftwareProduct,
- wholeLicenseModelList, wholeSoftwareProductList, componentsList}) {
- let {onboardingMethod, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct;
- let screenToBreadcrumb;
- switch (screen) {
- case enums.SCREEN.ONBOARDING_CATALOG:
- return [];
-
- case enums.SCREEN.VERSIONS_PAGE:
- let firstMenuItems = itemType === itemTypes.LICENSE_MODEL ? [
- {
- selectedKey: itemId,
- menuItems: wholeLicenseModelList.map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- }] : [
- {
- selectedKey: props.additionalProps.licenseModelId || currentSoftwareProduct.vendorId,
- menuItems: wholeLicenseModelList.map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- },
- {
- selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
- menuItems: [{
- key: enums.BREADCRUMS.LICENSE_MODEL,
- displayText: i18n('License Model')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
- displayText: i18n('Software Products')
- }]
- },
- {
- selectedKey: itemId,
- menuItems: wholeSoftwareProductList
- .filter(({id, vendorId}) => vendorId === currentSoftwareProduct.vendorId || id === itemId)
- .map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- },
- ];
- return [
- ...firstMenuItems,
- {
- selectedKey: enums.BREADCRUMS.VERSIONS_PAGE,
- menuItems: [{key: enums.BREADCRUMS.VERSIONS_PAGE, displayText: i18n('Versions Page')}]
- }
- ];
-
- case enums.SCREEN.LICENSE_AGREEMENTS:
- case enums.SCREEN.FEATURE_GROUPS:
- case enums.SCREEN.ENTITLEMENT_POOLS:
- case enums.SCREEN.LICENSE_KEY_GROUPS:
- case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
- case enums.SCREEN.ACTIVITY_LOG:
- screenToBreadcrumb = {
- [enums.SCREEN.LICENSE_AGREEMENTS]: enums.BREADCRUMS.LICENSE_AGREEMENTS,
- [enums.SCREEN.FEATURE_GROUPS]: enums.BREADCRUMS.FEATURE_GROUPS,
- [enums.SCREEN.ENTITLEMENT_POOLS]: enums.BREADCRUMS.ENTITLEMENT_POOLS,
- [enums.SCREEN.LICENSE_KEY_GROUPS]: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
- [enums.SCREEN.LICENSE_MODEL_OVERVIEW]: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
- [enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG
- };
- return [
- {
- selectedKey: props.licenseModelId,
- menuItems: wholeLicenseModelList.map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- },
- {
- selectedKey: enums.BREADCRUMS.LICENSE_MODEL,
- menuItems: [{
- key: enums.BREADCRUMS.LICENSE_MODEL,
- displayText: i18n('License Model')
- },
- ...(wholeSoftwareProductList.findIndex(({vendorId}) => vendorId === props.licenseModelId) === -1 ? [] : [{
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
- displayText: i18n('Software Products')
- }])]
- }, {
- selectedKey: screenToBreadcrumb[screen],
- menuItems: [{
- key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
- displayText: i18n('Overview')
- },{
- key: enums.BREADCRUMS.LICENSE_AGREEMENTS,
- displayText: i18n('License Agreements')
- }, {
- key: enums.BREADCRUMS.FEATURE_GROUPS,
- displayText: i18n('Feature Groups')
- }, {
- key: enums.BREADCRUMS.ENTITLEMENT_POOLS,
- displayText: i18n('Entitlement Pools')
- }, {
- key: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
- displayText: i18n('License Key Groups')
- }, {
- key: enums.BREADCRUMS.ACTIVITY_LOG,
- displayText: i18n('Activity Log')
- }]
- }
- ];
-
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- screenToBreadcrumb = {
- [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
- [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
- [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
- [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
- [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
- [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
- [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
- [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG
- };
- let componentScreenToBreadcrumb = {
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
- [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING
- };
- let licenseModelId = currentSoftwareProduct.vendorId;
- let returnedBreadcrumb = [
- {
- selectedKey: licenseModelId,
- menuItems: wholeLicenseModelList.map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- },
- {
- selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
- menuItems: [{
- key: enums.BREADCRUMS.LICENSE_MODEL,
- displayText: i18n('License Model')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
- displayText: i18n('Software Products')
- }]
- },
- {
- selectedKey: props.softwareProductId,
- menuItems: wholeSoftwareProductList
- .filter(({vendorId, id}) => vendorId === licenseModelId || id === props.softwareProductId)
- .map(({id, name}) => ({
- key: id,
- displayText: name
- }))
- },
- ...(/*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [{
- selectedKey: screenToBreadcrumb[screen] || enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
- menuItems: [{
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
- displayText: i18n('Overview')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
- displayText: i18n('General')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
- displayText: i18n('Deployment Flavors')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
- displayText: i18n('Process Details')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
- displayText: i18n('Networks')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
- displayText: i18n('Components Dependencies')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
- displayText: i18n('Attachments')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG,
- displayText: i18n('Activity Log')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
- displayText: i18n('Components')
- }].filter(item => {
- switch (item.key) {
- case enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS:
- let isHeatData = onboardingOrigin !== onboardingOriginTypes.NONE || candidateOnboardingOrigin === onboardingOriginTypes.ZIP;
- return isHeatData;
- case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS:
- return (componentsList.length > 0);
- case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT:
- let isManualMode = onboardingMethod === onboardingMethodTypes.MANUAL;
- return isManualMode;
- case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES:
- return (componentsList.length > 1);
- default:
- return true;
- }
- })
- }])
- ];
- if(props.componentId) {
- returnedBreadcrumb = [
- ...returnedBreadcrumb, {
- selectedKey: props.componentId,
- menuItems: componentsList
- .map(({id, displayName}) => ({
- key: id,
- displayText: displayName
- }))
- },
- ...[{
- selectedKey: componentScreenToBreadcrumb[screen],
- menuItems: [{
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
- displayText: i18n('General')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
- displayText: i18n('Compute')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
- displayText: i18n('High Availability & Load Balancing')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
- displayText: i18n('Networks')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
- displayText: i18n('Storage')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
- displayText: i18n('Images')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
- displayText: i18n('Process Details')
- }, {
- key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
- displayText: i18n('Monitoring')
- }]
- }]
- ];
- }
- return returnedBreadcrumb;
- }
- }
+ render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+ if (!this.unsubscribeFromStore) {
+ this.unsubscribeFromStore = store.subscribe(() =>
+ this.handleStoreChange()
+ );
+ }
+
+ if (!this.isConfigSet) {
+ Configuration.setCatalogApiRoot(apiRoot);
+ Configuration.setCatalogApiHeaders(apiHeaders);
+ this.isConfigSet = true;
+ }
+
+ this.onEvent = (...args) => onEvent(...args);
+ this.handleData(data);
+
+ if (!this.rendered) {
+ render(
+ <AppContainer>
+ <Application>
+ <Onboarding />
+ </Application>
+ </AppContainer>,
+ element
+ );
+ if (module.hot) {
+ module.hot.accept('sdc-app/onboarding/Onboarding.js', () => {
+ const NextOnboarding = require('sdc-app/onboarding/Onboarding.js')
+ .default;
+ render(
+ <AppContainer>
+ <Application>
+ <NextOnboarding />
+ </Application>
+ </AppContainer>,
+ element
+ );
+ });
+ }
+ this.rendered = true;
+ }
+ }
+
+ unmount(element) {
+ ReactDOM.unmountComponentAtNode(element);
+ this.rendered = false;
+ this.unsubscribeFromStore();
+ this.unsubscribeFromStore = null;
+ }
+
+ handleData(data) {
+ let { breadcrumbs: { selectedKeys = [] } = {} } = data;
+ let dispatch = action => store.dispatch(action);
+ let {
+ currentScreen,
+ users: { usersList },
+ softwareProductList,
+ finalizedSoftwareProductList,
+ licenseModelList,
+ finalizedLicenseModelList,
+ softwareProduct: {
+ softwareProductEditor: { data: vspData = {} },
+ softwareProductComponents = {},
+ softwareProductQuestionnaire = {}
+ },
+ archivedLicenseModelList
+ } = store.getState();
+ const wholeSoftwareProductList = [
+ ...softwareProductList,
+ ...finalizedSoftwareProductList
+ ];
+ const wholeLicenseModelList = [
+ ...licenseModelList,
+ ...finalizedLicenseModelList,
+ ...archivedLicenseModelList
+ ];
+
+ let { props: { version, isReadOnlyMode }, screen } = currentScreen;
+ let {
+ componentEditor: {
+ data: componentData = {},
+ qdata: componentQData = {}
+ }
+ } = softwareProductComponents;
+ if (this.programmaticBreadcrumbsUpdate) {
+ this.prevSelectedKeys = selectedKeys;
+ this.programmaticBreadcrumbsUpdate = false;
+ return;
+ }
+ if (!isEqual(selectedKeys, this.prevSelectedKeys)) {
+ this.breadcrumbsPrefixSelected = isEqual(
+ selectedKeys,
+ this.prevSelectedKeys &&
+ this.prevSelectedKeys.slice(0, selectedKeys.length)
+ );
+
+ const [, screenType, prevVspId, , prevComponentId] =
+ this.prevSelectedKeys || [];
+ let preNavigate = Promise.resolve();
+ if (
+ screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+ screen !== 'VERSIONS_PAGE' &&
+ !isReadOnlyMode
+ ) {
+ let dataToSave = prevVspId
+ ? prevComponentId
+ ? { componentData, qdata: componentQData }
+ : {
+ softwareProduct: vspData,
+ qdata: softwareProductQuestionnaire.qdata
+ }
+ : {};
+ preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate(
+ dispatch,
+ {
+ softwareProductId: prevVspId,
+ version,
+ vspComponentId: prevComponentId,
+ dataToSave
+ }
+ );
+ }
+
+ let {
+ currentScreen: { props: { softwareProductId } },
+ softwareProduct: {
+ softwareProductAttachments: { heatSetup, heatSetupCache }
+ }
+ } = store.getState();
+ let heatSetupPopupPromise =
+ currentScreen.screen ===
+ enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+ ? HeatSetupActionHelper.heatSetupLeaveConfirmation(
+ dispatch,
+ { softwareProductId, heatSetup, heatSetupCache }
+ )
+ : Promise.resolve();
+ Promise.all([preNavigate, heatSetupPopupPromise])
+ .then(() => {
+ this.prevSelectedKeys = selectedKeys;
+ if (selectedKeys.length === 0) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.ONBOARDING_CATALOG
+ });
+ } else if (
+ selectedKeys.length === 1 ||
+ selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL
+ ) {
+ let [
+ licenseModelId,
+ ,
+ licenseModelScreen
+ ] = selectedKeys;
+ let licenseModel = wholeLicenseModelList.find(
+ vlm => vlm.id === licenseModelId
+ );
+ ScreensHelper.loadScreen(dispatch, {
+ screen: licenseModelScreen,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: {
+ licenseModelId,
+ version,
+ licenseModel,
+ usersList
+ }
+ });
+ } else if (
+ selectedKeys.length <= 4 &&
+ selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT
+ ) {
+ let [
+ licenseModelId,
+ ,
+ softwareProductId,
+ softwareProductScreen
+ ] = selectedKeys;
+ let softwareProduct = softwareProductId
+ ? wholeSoftwareProductList.find(
+ ({ id }) => id === softwareProductId
+ )
+ : wholeSoftwareProductList.find(
+ ({ vendorId }) => vendorId === licenseModelId
+ );
+ if (!softwareProductId) {
+ softwareProductId = softwareProduct.id;
+ }
+ if (
+ softwareProductScreen ===
+ enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+ ) {
+ softwareProduct = vspData;
+ //check current vsp fields to determine which file has uploaded
+ if (
+ vspData.onboardingOrigin ===
+ onboardingOriginTypes.ZIP ||
+ vspData.candidateOnboardingOrigin ===
+ onboardingOriginTypes.ZIP
+ ) {
+ softwareProductScreen =
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
+ } else if (
+ vspData.onboardingOrigin ===
+ onboardingOriginTypes.CSAR
+ ) {
+ softwareProductScreen =
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
+ }
+ }
+
+ ScreensHelper.loadScreen(dispatch, {
+ screen: softwareProductScreen,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct,
+ version,
+ usersList
+ }
+ });
+ } else if (
+ selectedKeys.length === 5 &&
+ selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+ selectedKeys[3] ===
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS
+ ) {
+ let [
+ licenseModelId,
+ ,
+ softwareProductId,
+ ,
+ componentId
+ ] = selectedKeys;
+ let softwareProduct = softwareProductId
+ ? wholeSoftwareProductList.find(
+ ({ id }) => id === softwareProductId
+ )
+ : wholeSoftwareProductList.find(
+ ({ vendorId }) => vendorId === licenseModelId
+ );
+ if (!softwareProductId) {
+ softwareProductId = softwareProduct.id;
+ }
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct,
+ componentId,
+ version,
+ usersList
+ }
+ });
+ } else if (
+ selectedKeys.length === 6 &&
+ selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT &&
+ selectedKeys[3] ===
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS
+ ) {
+ let [
+ licenseModelId,
+ ,
+ softwareProductId,
+ ,
+ componentId,
+ componentScreen
+ ] = selectedKeys;
+ let softwareProduct = softwareProductId
+ ? wholeSoftwareProductList.find(
+ ({ id }) => id === softwareProductId
+ )
+ : wholeSoftwareProductList.find(
+ ({ vendorId }) => vendorId === licenseModelId
+ );
+ if (!softwareProductId) {
+ softwareProductId = softwareProduct.id;
+ }
+ ScreensHelper.loadScreen(dispatch, {
+ screen: componentScreen,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct,
+ componentId,
+ version,
+ usersList
+ }
+ });
+ } else {
+ console.error(
+ 'Unknown breadcrumbs path: ',
+ selectedKeys
+ );
+ }
+ })
+ .catch(() => {
+ store.dispatch({
+ type: actionTypes.SET_CURRENT_SCREEN,
+ currentScreen: {
+ ...currentScreen,
+ forceBreadCrumbsUpdate: true
+ }
+ });
+ });
+ }
+ }
+
+ handleStoreChange() {
+ let {
+ currentScreen,
+ licenseModelList,
+ finalizedLicenseModelList,
+ softwareProductList,
+ finalizedSoftwareProductList,
+ versionsPage: { versionsList: { itemType, itemId } },
+ softwareProduct: {
+ softwareProductEditor: {
+ data: currentSoftwareProduct = { onboardingMethod: '' }
+ },
+ softwareProductComponents: { componentsList }
+ },
+ archivedLicenseModelList,
+ archivedSoftwareProductList
+ } = store.getState();
+ const wholeSoftwareProductList = lodashUnionBy(
+ softwareProductList,
+ [...finalizedSoftwareProductList, ...archivedSoftwareProductList],
+ 'id'
+ );
+ const wholeLicenseModelList = lodashUnionBy(
+ licenseModelList,
+ [...finalizedLicenseModelList, ...archivedLicenseModelList],
+ 'id'
+ );
+ let breadcrumbsData = {
+ itemType,
+ itemId,
+ currentScreen,
+ wholeLicenseModelList,
+ wholeSoftwareProductList,
+ currentSoftwareProduct,
+ componentsList
+ };
+
+ if (
+ currentScreen.forceBreadCrumbsUpdate ||
+ !isEqual(breadcrumbsData, this.prevBreadcrumbsData) ||
+ this.breadcrumbsPrefixSelected
+ ) {
+ this.prevBreadcrumbsData = breadcrumbsData;
+ this.breadcrumbsPrefixSelected = false;
+ this.programmaticBreadcrumbsUpdate = true;
+ let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData);
+ this.onEvent('breadcrumbsupdated', breadcrumbs);
+ store.dispatch({
+ type: actionTypes.SET_CURRENT_SCREEN,
+ currentScreen: {
+ ...currentScreen,
+ forceBreadCrumbsUpdate: false
+ }
+ });
+ }
+ }
+
+ buildBreadcrumbs({
+ currentScreen: { screen, props },
+ itemType,
+ itemId,
+ currentSoftwareProduct,
+ wholeLicenseModelList,
+ wholeSoftwareProductList,
+ componentsList
+ }) {
+ let {
+ onboardingMethod,
+ onboardingOrigin,
+ candidateOnboardingOrigin
+ } = currentSoftwareProduct;
+ let screenToBreadcrumb;
+ switch (screen) {
+ case enums.SCREEN.ONBOARDING_CATALOG:
+ return [];
+
+ case enums.SCREEN.VERSIONS_PAGE:
+ let firstMenuItems =
+ itemType === itemTypes.LICENSE_MODEL
+ ? [
+ {
+ selectedKey: itemId,
+ menuItems: wholeLicenseModelList.map(
+ ({ id, name }) => ({
+ key: id,
+ displayText: name
+ })
+ )
+ }
+ ]
+ : [
+ {
+ selectedKey:
+ props.additionalProps.licenseModelId ||
+ currentSoftwareProduct.vendorId,
+ menuItems: wholeLicenseModelList.map(
+ ({ id, name }) => ({
+ key: id,
+ displayText: name
+ })
+ )
+ },
+ {
+ selectedKey:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT,
+ menuItems: [
+ {
+ key: enums.BREADCRUMS.LICENSE_MODEL,
+ displayText: i18n('License Model')
+ },
+ {
+ key:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT,
+ displayText: i18n('Software Products')
+ }
+ ]
+ },
+ {
+ selectedKey: itemId,
+ menuItems: wholeSoftwareProductList
+ .filter(
+ ({ id, vendorId }) =>
+ vendorId ===
+ currentSoftwareProduct.vendorId ||
+ id === itemId
+ )
+ .map(({ id, name }) => ({
+ key: id,
+ displayText: name
+ }))
+ }
+ ];
+ return [
+ ...firstMenuItems,
+ {
+ selectedKey: enums.BREADCRUMS.VERSIONS_PAGE,
+ menuItems: [
+ {
+ key: enums.BREADCRUMS.VERSIONS_PAGE,
+ displayText: i18n('Versions Page')
+ }
+ ]
+ }
+ ];
+
+ case enums.SCREEN.LICENSE_AGREEMENTS:
+ case enums.SCREEN.FEATURE_GROUPS:
+ case enums.SCREEN.ENTITLEMENT_POOLS:
+ case enums.SCREEN.LICENSE_KEY_GROUPS:
+ case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+ case enums.SCREEN.ACTIVITY_LOG:
+ screenToBreadcrumb = {
+ [enums.SCREEN.LICENSE_AGREEMENTS]:
+ enums.BREADCRUMS.LICENSE_AGREEMENTS,
+ [enums.SCREEN.FEATURE_GROUPS]:
+ enums.BREADCRUMS.FEATURE_GROUPS,
+ [enums.SCREEN.ENTITLEMENT_POOLS]:
+ enums.BREADCRUMS.ENTITLEMENT_POOLS,
+ [enums.SCREEN.LICENSE_KEY_GROUPS]:
+ enums.BREADCRUMS.LICENSE_KEY_GROUPS,
+ [enums.SCREEN.LICENSE_MODEL_OVERVIEW]:
+ enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
+ [enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG
+ };
+ return [
+ {
+ selectedKey: props.licenseModelId,
+ menuItems: wholeLicenseModelList.map(
+ ({ id, name }) => ({
+ key: id,
+ displayText: name
+ })
+ )
+ },
+ {
+ selectedKey: enums.BREADCRUMS.LICENSE_MODEL,
+ menuItems: [
+ {
+ key: enums.BREADCRUMS.LICENSE_MODEL,
+ displayText: i18n('License Model')
+ },
+ ...(wholeSoftwareProductList.findIndex(
+ ({ vendorId }) =>
+ vendorId === props.licenseModelId
+ ) === -1
+ ? []
+ : [
+ {
+ key:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT,
+ displayText: i18n('Software Products')
+ }
+ ])
+ ]
+ },
+ {
+ selectedKey: screenToBreadcrumb[screen],
+ menuItems: [
+ {
+ key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW,
+ displayText: i18n('Overview')
+ },
+ {
+ key: enums.BREADCRUMS.LICENSE_AGREEMENTS,
+ displayText: i18n('License Agreements')
+ },
+ {
+ key: enums.BREADCRUMS.FEATURE_GROUPS,
+ displayText: i18n('Feature Groups')
+ },
+ {
+ key: enums.BREADCRUMS.ENTITLEMENT_POOLS,
+ displayText: i18n('Entitlement Pools')
+ },
+ {
+ key: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
+ displayText: i18n('License Key Groups')
+ },
+ {
+ key: enums.BREADCRUMS.ACTIVITY_LOG,
+ displayText: i18n('Activity Log')
+ }
+ ]
+ }
+ ];
+
+ case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+ case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ screenToBreadcrumb = {
+ [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE,
+ [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
+ [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
+ [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
+ [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT,
+ [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
+ [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
+ [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG
+ };
+ let componentScreenToBreadcrumb = {
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+ [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]:
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING
+ };
+ let licenseModelId = currentSoftwareProduct.vendorId;
+ let returnedBreadcrumb = [
+ {
+ selectedKey: licenseModelId,
+ menuItems: wholeLicenseModelList.map(
+ ({ id, name }) => ({
+ key: id,
+ displayText: name
+ })
+ )
+ },
+ {
+ selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
+ menuItems: [
+ {
+ key: enums.BREADCRUMS.LICENSE_MODEL,
+ displayText: i18n('License Model')
+ },
+ {
+ key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
+ displayText: i18n('Software Products')
+ }
+ ]
+ },
+ {
+ selectedKey: props.softwareProductId,
+ menuItems: wholeSoftwareProductList
+ .filter(
+ ({ vendorId, id }) =>
+ vendorId === licenseModelId ||
+ id === props.softwareProductId
+ )
+ .map(({ id, name }) => ({
+ key: id,
+ displayText: name
+ }))
+ },
+ .../*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [
+ {
+ selectedKey:
+ screenToBreadcrumb[screen] ||
+ enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
+ menuItems: [
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_LANDING_PAGE,
+ displayText: i18n('Overview')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_DETAILS,
+ displayText: i18n('General')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_DEPLOYMENT,
+ displayText: i18n('Deployment Flavors')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_PROCESSES,
+ displayText: i18n('Process Details')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_NETWORKS,
+ displayText: i18n('Networks')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_DEPENDENCIES,
+ displayText: i18n('Components Dependencies')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_ATTACHMENTS,
+ displayText: i18n('Attachments')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_ACTIVITY_LOG,
+ displayText: i18n('Activity Log')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENTS,
+ displayText: i18n('Components')
+ }
+ ].filter(item => {
+ switch (item.key) {
+ case enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_ATTACHMENTS:
+ let isHeatData =
+ onboardingOrigin !==
+ onboardingOriginTypes.NONE ||
+ candidateOnboardingOrigin ===
+ onboardingOriginTypes.ZIP;
+ return isHeatData;
+ case enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENTS:
+ return componentsList.length > 0;
+ case enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_DEPLOYMENT:
+ let isManualMode =
+ onboardingMethod ===
+ onboardingMethodTypes.MANUAL;
+ return isManualMode;
+ case enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_DEPENDENCIES:
+ return componentsList.length > 1;
+ default:
+ return true;
+ }
+ })
+ }
+ ]
+ ];
+ if (props.componentId) {
+ returnedBreadcrumb = [
+ ...returnedBreadcrumb,
+ {
+ selectedKey: props.componentId,
+ menuItems: componentsList.map(
+ ({ id, displayName }) => ({
+ key: id,
+ displayText: displayName
+ })
+ )
+ },
+ ...[
+ {
+ selectedKey:
+ componentScreenToBreadcrumb[screen],
+ menuItems: [
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_GENERAL,
+ displayText: i18n('General')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
+ displayText: i18n('Compute')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
+ displayText: i18n(
+ 'High Availability & Load Balancing'
+ )
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_NETWORK,
+ displayText: i18n('Networks')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_STORAGE,
+ displayText: i18n('Storage')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_IMAGES,
+ displayText: i18n('Images')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
+ displayText: i18n('Process Details')
+ },
+ {
+ key:
+ enums.BREADCRUMS
+ .SOFTWARE_PRODUCT_COMPONENT_MONITORING,
+ displayText: i18n('Monitoring')
+ }
+ ]
+ }
+ ]
+ ];
+ }
+ return returnedBreadcrumb;
+ }
+ }
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
index 16c0e61491..9abae2d1c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
@@ -13,130 +13,159 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, enums} from './OnboardingConstants.js';
-import {actionTypes as permissionActionTypes} from './permissions/PermissionsConstants.js';
-import {actionTypes as licenseModelCreateActionTypes} from './licenseModel/creation/LicenseModelCreationConstants.js';
-import {actionTypes as softwareProductCreateActionTypes} from './softwareProduct/creation/SoftwareProductCreationConstants.js';
-import {actionTypes as versionCreateActionTypes} from './versionsPage/creation/VersionsPageCreationConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
-
-import {catalogItemStatuses} from './onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionTypes, enums } from './OnboardingConstants.js';
+import { actionTypes as permissionActionTypes } from './permissions/PermissionsConstants.js';
+import { actionTypes as licenseModelCreateActionTypes } from './licenseModel/creation/LicenseModelCreationConstants.js';
+import { actionTypes as softwareProductCreateActionTypes } from './softwareProduct/creation/SoftwareProductCreationConstants.js';
+import { actionTypes as versionCreateActionTypes } from './versionsPage/creation/VersionsPageCreationConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
+
+import { catalogItemStatuses } from './onboard/onboardingCatalog/OnboardingCatalogConstants.js';
import Configuration from 'sdc-app/config/Configuration.js';
-const checkReadOnly = ({isCollaborator = true, inMerge = false, isCertified = false, isArchived = false}) => !isCollaborator || inMerge || isCertified || isArchived;
-
-const currentScreen = (state = {
- forceBreadCrumbsUpdate: false,
- screen: enums.SCREEN.ONBOARDING_CATALOG,
- itemPermission: {},
- props: {}
-}, action) => {
-
- switch (action.type) {
-
- case actionTypes.SET_CURRENT_SCREEN: {
- let itemPermission = {...state.itemPermission};
- let {currentScreen} = action;
- itemPermission.isArchived = currentScreen.props.status === catalogItemStatuses.ARCHIVED;
-
- if (currentScreen.props.version) {
- let {status} = currentScreen.props.version;
- itemPermission.isCertified = itemPermission.isCertified && status === catalogItemStatuses.CERTIFIED;
- }
-
- let isReadOnlyMode = checkReadOnly(itemPermission);
- let props = {...currentScreen.props, isReadOnlyMode};
-
- return {
- ...state,
- ...currentScreen,
- itemPermission,
- props
- };
- }
-
- case actionTypes.UPDATE_CURRENT_SCREEN_PROPS:
- return {
- ...state,
- props: {
- ...state.props,
- ...action.props,
- isReadOnlyMode: checkReadOnly(state.itemPermission)
- }
- };
-
- case actionTypes.SET_CURRENT_SCREEN_VERSION:
- return {
- ...state,
- props: {
- ...state.props,
- version: action.version,
- isReadOnlyMode: checkReadOnly({...state.itemPermission,itemStatus: state.props.status})
- }
- };
-
- case licenseModelCreateActionTypes.LICENSE_MODEL_CREATED:
- case softwareProductCreateActionTypes.SOFTWARE_PRODUCT_CREATED:
- case versionCreateActionTypes.VERSION_CREATED:
- return {
- ...state,
- itemPermission: {
- isCollaborator: true,
- inMerge: false,
- isCertified: false
- },
- props: {
- ...state.props,
- isReadOnlyMode: false
- }
- };
-
- case permissionActionTypes.ITEM_USERS_LOADED: {
- let userId = Configuration.get('UserID');
- let isCollaborator = false;
-
- if (userId === action.owner.userId) {
- isCollaborator = true;
- } else {
- isCollaborator = action.contributors.reduce(
- (foundUser, contributor) => foundUser || contributor.userId === userId, false
- );
- }
-
- let itemPermission = {...state.itemPermission, isCollaborator};
- let isReadOnlyMode = checkReadOnly(itemPermission);
- let props = {...state.props, isReadOnlyMode};
-
- return {
- ...state,
- itemPermission,
- props
- };
- }
-
- case actionTypes.UPDATE_ITEM_STATUS: {
- const {itemState: {synchronizationState, dirty}, itemStatus, updatedVersion, archivedStatus} = action;
- const inMerge = synchronizationState === SyncStates.MERGE;
- const isOutOfSync = synchronizationState === SyncStates.OUT_OF_SYNC;
- const isUpToDate = synchronizationState === SyncStates.UP_TO_DATE;
- const isCertified = itemStatus === catalogItemStatuses.CERTIFIED;
- const isArchived = archivedStatus === catalogItemStatuses.ARCHIVED;
- const itemPermission = {...state.itemPermission, inMerge, isDirty: dirty, isOutOfSync, isUpToDate, isCertified, isArchived};
- const isReadOnlyMode = checkReadOnly(itemPermission);
- const props = {...state.props, isReadOnlyMode, version: {...state.props.version, ...updatedVersion}};
-
- return {
- ...state,
- itemPermission,
- props
- };
- }
-
- default:
- return state;
-
- }
-
+const checkReadOnly = ({
+ isCollaborator = true,
+ inMerge = false,
+ isCertified = false,
+ isArchived = false
+}) => !isCollaborator || inMerge || isCertified || isArchived;
+
+const currentScreen = (
+ state = {
+ forceBreadCrumbsUpdate: false,
+ screen: enums.SCREEN.ONBOARDING_CATALOG,
+ itemPermission: {},
+ props: {}
+ },
+ action
+) => {
+ switch (action.type) {
+ case actionTypes.SET_CURRENT_SCREEN: {
+ let itemPermission = { ...state.itemPermission };
+ let { currentScreen } = action;
+ itemPermission.isArchived =
+ currentScreen.props.status === catalogItemStatuses.ARCHIVED;
+
+ if (currentScreen.props.version) {
+ let { status } = currentScreen.props.version;
+ itemPermission.isCertified =
+ itemPermission.isCertified &&
+ status === catalogItemStatuses.CERTIFIED;
+ }
+
+ let isReadOnlyMode = checkReadOnly(itemPermission);
+ let props = { ...currentScreen.props, isReadOnlyMode };
+
+ return {
+ ...state,
+ ...currentScreen,
+ itemPermission,
+ props
+ };
+ }
+
+ case actionTypes.UPDATE_CURRENT_SCREEN_PROPS:
+ return {
+ ...state,
+ props: {
+ ...state.props,
+ ...action.props,
+ isReadOnlyMode: checkReadOnly(state.itemPermission)
+ }
+ };
+
+ case actionTypes.SET_CURRENT_SCREEN_VERSION:
+ return {
+ ...state,
+ props: {
+ ...state.props,
+ version: action.version,
+ isReadOnlyMode: checkReadOnly({
+ ...state.itemPermission,
+ itemStatus: state.props.status
+ })
+ }
+ };
+
+ case licenseModelCreateActionTypes.LICENSE_MODEL_CREATED:
+ case softwareProductCreateActionTypes.SOFTWARE_PRODUCT_CREATED:
+ case versionCreateActionTypes.VERSION_CREATED:
+ return {
+ ...state,
+ itemPermission: {
+ isCollaborator: true,
+ inMerge: false,
+ isCertified: false
+ },
+ props: {
+ ...state.props,
+ isReadOnlyMode: false
+ }
+ };
+
+ case permissionActionTypes.ITEM_USERS_LOADED: {
+ let userId = Configuration.get('UserID');
+ let isCollaborator = false;
+
+ if (userId === action.owner.userId) {
+ isCollaborator = true;
+ } else {
+ isCollaborator = action.contributors.reduce(
+ (foundUser, contributor) =>
+ foundUser || contributor.userId === userId,
+ false
+ );
+ }
+
+ let itemPermission = { ...state.itemPermission, isCollaborator };
+ let isReadOnlyMode = checkReadOnly(itemPermission);
+ let props = { ...state.props, isReadOnlyMode };
+
+ return {
+ ...state,
+ itemPermission,
+ props
+ };
+ }
+
+ case actionTypes.UPDATE_ITEM_STATUS: {
+ const {
+ itemState: { synchronizationState, dirty },
+ itemStatus,
+ updatedVersion,
+ archivedStatus
+ } = action;
+ const inMerge = synchronizationState === SyncStates.MERGE;
+ const isOutOfSync = synchronizationState === SyncStates.OUT_OF_SYNC;
+ const isUpToDate = synchronizationState === SyncStates.UP_TO_DATE;
+ const isCertified = itemStatus === catalogItemStatuses.CERTIFIED;
+ const isArchived = archivedStatus === catalogItemStatuses.ARCHIVED;
+ const itemPermission = {
+ ...state.itemPermission,
+ inMerge,
+ isDirty: dirty,
+ isOutOfSync,
+ isUpToDate,
+ isCertified,
+ isArchived
+ };
+ const isReadOnlyMode = checkReadOnly(itemPermission);
+ const props = {
+ ...state.props,
+ isReadOnlyMode,
+ version: { ...state.props.version, ...updatedVersion }
+ };
+
+ return {
+ ...state,
+ itemPermission,
+ props
+ };
+ }
+
+ default:
+ return state;
+ }
};
export default currentScreen;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
index 5b678b1d43..3b526a67f6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducersMap.js
@@ -30,19 +30,19 @@ import revisionsReducer from './revisions/RevisionsReducer.js';
import featuresReducer from 'sdc-app/features/FeaturesReducer.js';
export default {
- currentScreen: currentScreenReducer,
- licenseModel: licenseModelReducer,
- licenseModelList: licenseModelListReducer,
- archivedLicenseModelList: archivedLicenseModelListReducer,
- archivedSoftwareProductList: archivedSoftwareProductListReducer,
- finalizedLicenseModelList: finalizedLicenseModelListReducer,
- finalizedSoftwareProductList: finalizedSoftwareProductReducer,
- mergeEditor: mergeEditorReducer,
- onboard: onboardReducer,
- softwareProduct: softwareProductReducer,
- softwareProductList: softwareProductListReducer,
- users: usersReducer,
- versionsPage: versionsPageReducer,
- revisions: revisionsReducer,
- features: featuresReducer
+ currentScreen: currentScreenReducer,
+ licenseModel: licenseModelReducer,
+ licenseModelList: licenseModelListReducer,
+ archivedLicenseModelList: archivedLicenseModelListReducer,
+ archivedSoftwareProductList: archivedSoftwareProductListReducer,
+ finalizedLicenseModelList: finalizedLicenseModelListReducer,
+ finalizedSoftwareProductList: finalizedSoftwareProductReducer,
+ mergeEditor: mergeEditorReducer,
+ onboard: onboardReducer,
+ softwareProduct: softwareProductReducer,
+ softwareProductList: softwareProductListReducer,
+ users: usersReducer,
+ versionsPage: versionsPageReducer,
+ revisions: revisionsReducer,
+ features: featuresReducer
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
index 7877085316..69e514bc6e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
@@ -25,8 +25,8 @@ import FeatureGroupListEditor from './licenseModel/featureGroups/FeatureGroupLis
import LicenseKeyGroupsListEditor from './licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
import EntitlementPoolsListEditor from './licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
import SoftwareProduct from './softwareProduct/SoftwareProduct.js';
-import SoftwareProductLandingPage from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
-import SoftwareProductDetails from './softwareProduct/details/SoftwareProductDetails.js';
+import SoftwareProductLandingPage from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
+import SoftwareProductDetails from './softwareProduct/details/SoftwareProductDetails.js';
import SoftwareProductAttachments from './softwareProduct/attachments/SoftwareProductAttachments.js';
import SoftwareProductProcesses from './softwareProduct/processes/SoftwareProductProcesses.js';
import SoftwareProductDeployment from './softwareProduct/deployment/SoftwareProductDeployment.js';
@@ -48,136 +48,243 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
-import {enums} from './OnboardingConstants.js';
+import { enums } from './OnboardingConstants.js';
export default class OnboardingView extends React.Component {
- static propTypes = {
- currentScreen: PropTypes.shape({
- screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
- props: PropTypes.object.isRequired,
- itemPermission: PropTypes.object
- }).isRequired
- };
+ static propTypes = {
+ currentScreen: PropTypes.shape({
+ screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
+ props: PropTypes.object.isRequired,
+ itemPermission: PropTypes.object
+ }).isRequired
+ };
- componentDidMount() {
- let element = ReactDOM.findDOMNode(this);
- element.addEventListener('click', event => {
- if (event.target.tagName === 'A') {
- event.preventDefault();
- }
- });
- ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
- element.addEventListener(eventType, event => event.stopPropagation())
- );
- }
+ componentDidMount() {
+ let element = ReactDOM.findDOMNode(this);
+ element.addEventListener('click', event => {
+ if (event.target.tagName === 'A') {
+ event.preventDefault();
+ }
+ });
+ ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+ element.addEventListener(eventType, event =>
+ event.stopPropagation()
+ )
+ );
+ }
- render() {
- let {currentScreen} = this.props;
- let {screen, props} = currentScreen;
+ render() {
+ let { currentScreen } = this.props;
+ let { screen, props } = currentScreen;
- return (
- <div className='dox-ui dox-ui-punch-out dox-ui-punch-out-full-page'>
- {(() => {
- switch (screen) {
- case enums.SCREEN.ONBOARDING_CATALOG:
- return <Onboard {...props}/>;
- case enums.SCREEN.VERSIONS_PAGE:
- return <VersionsPage {...props} />;
+ return (
+ <div className="dox-ui dox-ui-punch-out dox-ui-punch-out-full-page">
+ {(() => {
+ switch (screen) {
+ case enums.SCREEN.ONBOARDING_CATALOG:
+ return <Onboard {...props} />;
+ case enums.SCREEN.VERSIONS_PAGE:
+ return <VersionsPage {...props} />;
- case enums.SCREEN.LICENSE_AGREEMENTS:
- case enums.SCREEN.FEATURE_GROUPS:
- case enums.SCREEN.ENTITLEMENT_POOLS:
- case enums.SCREEN.LICENSE_KEY_GROUPS:
- case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
- case enums.SCREEN.ACTIVITY_LOG:
- return (
- <LicenseModel currentScreen={currentScreen}>
- {
- (()=>{
- switch(screen) {
- case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
- return <LicenseModelOverview {...props}/>;
- case enums.SCREEN.LICENSE_AGREEMENTS:
- return <LicenseAgreementListEditor {...props}/>;
- case enums.SCREEN.FEATURE_GROUPS:
- return <FeatureGroupListEditor {...props}/>;
- case enums.SCREEN.ENTITLEMENT_POOLS:
- return <EntitlementPoolsListEditor {...props}/>;
- case enums.SCREEN.LICENSE_KEY_GROUPS:
- return <LicenseKeyGroupsListEditor {...props}/>;
- case enums.SCREEN.ACTIVITY_LOG:
- return <ActivityLog {...props}/>;
- }
- })()
- }
- </LicenseModel>
- );
+ case enums.SCREEN.LICENSE_AGREEMENTS:
+ case enums.SCREEN.FEATURE_GROUPS:
+ case enums.SCREEN.ENTITLEMENT_POOLS:
+ case enums.SCREEN.LICENSE_KEY_GROUPS:
+ case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+ case enums.SCREEN.ACTIVITY_LOG:
+ return (
+ <LicenseModel currentScreen={currentScreen}>
+ {(() => {
+ switch (screen) {
+ case enums.SCREEN
+ .LICENSE_MODEL_OVERVIEW:
+ return (
+ <LicenseModelOverview
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .LICENSE_AGREEMENTS:
+ return (
+ <LicenseAgreementListEditor
+ {...props}
+ />
+ );
+ case enums.SCREEN.FEATURE_GROUPS:
+ return (
+ <FeatureGroupListEditor
+ {...props}
+ />
+ );
+ case enums.SCREEN.ENTITLEMENT_POOLS:
+ return (
+ <EntitlementPoolsListEditor
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .LICENSE_KEY_GROUPS:
+ return (
+ <LicenseKeyGroupsListEditor
+ {...props}
+ />
+ );
+ case enums.SCREEN.ACTIVITY_LOG:
+ return (
+ <ActivityLog {...props} />
+ );
+ }
+ })()}
+ </LicenseModel>
+ );
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- return (
- <SoftwareProduct currentScreen={currentScreen}>
- {
- (()=>{
- switch(screen) {
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- return <SoftwareProductLandingPage {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- return <SoftwareProductDetails {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
- return <SoftwareProductAttachments className='no-padding-content-area' {...props} />;
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- return <SoftwareProductProcesses {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- return <SoftwareProductDeployment {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- return <SoftwareProductNetworks {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- return <SoftwareProductDependencies {...props} />;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- return <SoftwareProductComponentsList {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- return <SoftwareProductComponentProcessesList {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- return <SoftwareProductComponentStorage {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- return <SoftwareProductComponentsNetworkList {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- return <SoftwareProductComponentsGeneral{...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- return <SoftwareProductComponentsCompute {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- return <SoftwareProductComponentLoadBalancing{...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- return <SoftwareProductComponentsImageList{...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- return <SoftwareProductComponentsMonitoring {...props}/>;
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- return <ActivityLog {...props}/>;
- }
- })()
- }
- </SoftwareProduct>
- );
- }
- })()}
- </div>
- );
- }
+ case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+ case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ return (
+ <SoftwareProduct currentScreen={currentScreen}>
+ {(() => {
+ switch (screen) {
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_LANDING_PAGE:
+ return (
+ <SoftwareProductLandingPage
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_DETAILS:
+ return (
+ <SoftwareProductDetails
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS:
+ return (
+ <SoftwareProductAttachments
+ className="no-padding-content-area"
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_PROCESSES:
+ return (
+ <SoftwareProductProcesses
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_DEPLOYMENT:
+ return (
+ <SoftwareProductDeployment
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_NETWORKS:
+ return (
+ <SoftwareProductNetworks
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_DEPENDENCIES:
+ return (
+ <SoftwareProductDependencies
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENTS:
+ return (
+ <SoftwareProductComponentsList
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ return (
+ <SoftwareProductComponentProcessesList
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ return (
+ <SoftwareProductComponentStorage
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ return (
+ <SoftwareProductComponentsNetworkList
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ return (
+ <SoftwareProductComponentsGeneral
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ return (
+ <SoftwareProductComponentsCompute
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ return (
+ <SoftwareProductComponentLoadBalancing
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ return (
+ <SoftwareProductComponentsImageList
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ return (
+ <SoftwareProductComponentsMonitoring
+ {...props}
+ />
+ );
+ case enums.SCREEN
+ .SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ return (
+ <ActivityLog {...props} />
+ );
+ }
+ })()}
+ </SoftwareProduct>
+ );
+ }
+ })()}
+ </div>
+ );
+ }
}
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
index 8e4750e666..d5563f41ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/ArchivedLicenseModelListReducer.js
@@ -13,13 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED:
- return [...action.response.results];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED:
+ return [...action.response.results];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
index cc9d9c536d..b5c2bff4ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/FinalizedLicenseModelListReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED:
- return [...action.response.results];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED:
+ return [...action.response.results];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
index c390ecc9b0..cea369d2ec 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModel.js
@@ -4,173 +4,220 @@
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
- *
+ *
* http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express 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 TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js';
import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js';
import LicenseModelActionHelper from './LicenseModelActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
const buildNavigationBarProps = (licenseModel, screen) => {
- const {id, vendorName, version} = licenseModel;
- const meta = {version};
-
- const groups = [{
- id,
- name: vendorName,
- items: [
- {
- id: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
- name: i18n('Overview'),
- meta
- },
- {
- id: enums.SCREEN.LICENSE_AGREEMENTS,
- name: i18n('License Agreements'),
- meta
- },
- {
- id: enums.SCREEN.FEATURE_GROUPS,
- name: i18n('Feature Groups'),
- meta
- },
- {
- id: enums.SCREEN.ENTITLEMENT_POOLS,
- name: i18n('Entitlement Pools'),
- meta
- },
- {
- id: enums.SCREEN.LICENSE_KEY_GROUPS,
- name: i18n('License Key Groups'),
- meta
- },
- {
- id: enums.SCREEN.ACTIVITY_LOG,
- name: i18n('Activity Log'),
- meta
- }
- ]
- }];
-
- return {
- activeItemId: screen, groups
- };
+ const { id, vendorName, version } = licenseModel;
+ const meta = { version };
+
+ const groups = [
+ {
+ id,
+ name: vendorName,
+ items: [
+ {
+ id: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+ name: i18n('Overview'),
+ meta
+ },
+ {
+ id: enums.SCREEN.LICENSE_AGREEMENTS,
+ name: i18n('License Agreements'),
+ meta
+ },
+ {
+ id: enums.SCREEN.FEATURE_GROUPS,
+ name: i18n('Feature Groups'),
+ meta
+ },
+ {
+ id: enums.SCREEN.ENTITLEMENT_POOLS,
+ name: i18n('Entitlement Pools'),
+ meta
+ },
+ {
+ id: enums.SCREEN.LICENSE_KEY_GROUPS,
+ name: i18n('License Key Groups'),
+ meta
+ },
+ {
+ id: enums.SCREEN.ACTIVITY_LOG,
+ name: i18n('Activity Log'),
+ meta
+ }
+ ]
+ }
+ ];
+
+ return {
+ activeItemId: screen,
+ groups
+ };
};
-
const buildVersionControllerProps = ({
- licenseModelEditor = {data: {}},
- versions,
- currentVersion,
- userInfo,
- usersList,
- permissions,
- isArchived,
- itemPermission,
- isReadOnlyMode
+ licenseModelEditor = { data: {} },
+ versions,
+ currentVersion,
+ userInfo,
+ usersList,
+ permissions,
+ isArchived,
+ itemPermission,
+ isReadOnlyMode
}) => {
- const {isValidityData = true} = licenseModelEditor;
- return {
- version: currentVersion,
- viewableVersions: versions,
- isFormDataValid: isValidityData,
- permissions,
- userInfo,
- usersList,
- isArchived,
- itemName: licenseModelEditor.data.vendorName,
- itemPermission,
- isReadOnlyMode
- };
+ const { isValidityData = true } = licenseModelEditor;
+ return {
+ version: currentVersion,
+ viewableVersions: versions,
+ isFormDataValid: isValidityData,
+ permissions,
+ userInfo,
+ usersList,
+ isArchived,
+ itemName: licenseModelEditor.data.vendorName,
+ itemPermission,
+ isReadOnlyMode
+ };
};
-
-const mapStateToProps = ({
- users: {userInfo, usersList},
- licenseModel: {licenseModelEditor},
- versionsPage: {permissions, versionsList: {versions, itemName}}
-}, {
- currentScreen: {screen, itemPermission, props: {isReadOnlyMode, version: currentVersion}}
-}) => {
- return {
- versionControllerProps: buildVersionControllerProps({
- licenseModelEditor,
- versions,
- currentVersion,
- userInfo,
- permissions,
- usersList,
- isArchived: itemPermission.isArchived,
- itemPermission,
- isReadOnlyMode
- }),
- navigationBarProps: buildNavigationBarProps(licenseModelEditor.data, screen)
- };
+const mapStateToProps = (
+ {
+ users: { userInfo, usersList },
+ licenseModel: { licenseModelEditor },
+ versionsPage: { permissions, versionsList: { versions } }
+ },
+ {
+ currentScreen: {
+ screen,
+ itemPermission,
+ props: { isReadOnlyMode, version: currentVersion }
+ }
+ }
+) => {
+ return {
+ versionControllerProps: buildVersionControllerProps({
+ licenseModelEditor,
+ versions,
+ currentVersion,
+ userInfo,
+ permissions,
+ usersList,
+ isArchived: itemPermission.isArchived,
+ itemPermission,
+ isReadOnlyMode
+ }),
+ navigationBarProps: buildNavigationBarProps(
+ licenseModelEditor.data,
+ screen
+ )
+ };
};
-
-const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {licenseModelId, version}}}) => {
-
- return {
- onVersionControllerAction: (action, version, comment) =>
- LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action, version, comment}).then(updatedVersion => {
- ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: updatedVersion}});
- }),
-
- onOpenCommentCommitModal: ({onCommit, title}) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.COMMIT_COMMENT,
- modalComponentProps: {
- onCommit,
- type: CommitModalType.COMMIT
- },
- title
- }
- }),
-
- onVersionSwitching: version => {
- ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}});
- },
-
- onManagePermissions() {
- PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: licenseModelId, askForRights: false});
- },
-
- onMoreVersionsClick: ({itemName, users}) => {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId, licenseModel: {name: itemName}, usersList: users}});
- },
-
- onOpenPermissions: ({users}) => {
- return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users});
- },
-
- onOpenRevisionsModal: () => {
- return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: licenseModelId, version: version, itemType: screenTypes.LICENSE_MODEL});
- },
-
- onNavigate: ({id}) => {
- ScreensHelper.loadScreen(dispatch, {screen: id, screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version}});
- }
- };
+const mapActionsToProps = (
+ dispatch,
+ { currentScreen: { screen, props: { licenseModelId, version } } }
+) => {
+ return {
+ onVersionControllerAction: (action, version, comment) =>
+ LicenseModelActionHelper.performVCAction(dispatch, {
+ licenseModelId,
+ action,
+ version,
+ comment
+ }).then(updatedVersion => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId, version: updatedVersion }
+ });
+ }),
+
+ onOpenCommentCommitModal: ({ onCommit, title }) =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.COMMIT_COMMENT,
+ modalComponentProps: {
+ onCommit,
+ type: CommitModalType.COMMIT
+ },
+ title
+ }
+ }),
+
+ onVersionSwitching: version => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId, version }
+ });
+ },
+
+ onManagePermissions() {
+ PermissionsActionHelper.openPermissonsManager(dispatch, {
+ itemId: licenseModelId,
+ askForRights: false
+ });
+ },
+
+ onMoreVersionsClick: ({ itemName, users }) => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.VERSIONS_PAGE,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: {
+ licenseModelId,
+ licenseModel: { name: itemName },
+ usersList: users
+ }
+ });
+ },
+
+ onOpenPermissions: ({ users }) => {
+ return PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId: licenseModelId,
+ allUsers: users
+ });
+ },
+
+ onOpenRevisionsModal: () => {
+ return RevisionsActionHelper.openRevisionsView(dispatch, {
+ itemId: licenseModelId,
+ version: version,
+ itemType: screenTypes.LICENSE_MODEL
+ });
+ },
+
+ onNavigate: ({ id }) => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: id,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId, version }
+ });
+ }
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(TabulatedEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
index d1d3a77d92..cfff9f1fcd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
@@ -15,195 +15,279 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './LicenseModelConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionsEnum as vcActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionsEnum as vcActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import LicenseAgreementActionHelper from './licenseAgreement/LicenseAgreementActionHelper.js';
import FeatureGroupsActionHelper from './featureGroups/FeatureGroupsActionHelper.js';
import EntitlementPoolsActionHelper from './entitlementPools/EntitlementPoolsActionHelper.js';
import LicenseKeyGroupsActionHelper from './licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
-import {default as ItemsHelper} from 'sdc-app/common/helpers/ItemsHelper.js';
+import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js';
import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-license-models/`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-license-models/`;
}
function fetchLicenseModels() {
- return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`
+ );
}
function fetchFinalizedLicenseModels() {
- return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`
+ );
}
function fetchArchivedLicenseModels() {
- return RestAPIUtil.fetch(`${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`
+ );
}
function fetchLicenseModelById(licenseModelId, version) {
- const {id: versionId} = version;
- return RestAPIUtil.fetch(`${baseUrl()}${licenseModelId}/versions/${versionId}`);
+ const { id: versionId } = version;
+ return RestAPIUtil.fetch(
+ `${baseUrl()}${licenseModelId}/versions/${versionId}`
+ );
}
function putLicenseModel(licenseModel) {
- let {id, vendorName, description, iconRef, version: {id: versionId}} = licenseModel;
- return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, {
- vendorName,
- description,
- iconRef
- });
+ let {
+ id,
+ vendorName,
+ description,
+ iconRef,
+ version: { id: versionId }
+ } = licenseModel;
+ return RestAPIUtil.put(`${baseUrl()}${id}/versions/${versionId}`, {
+ vendorName,
+ description,
+ iconRef
+ });
}
-function putLicenseModelAction({itemId, action, version}) {
- const {id: versionId} = version;
- return RestAPIUtil.put(`${baseUrl()}${itemId}/versions/${versionId}/actions`, {action: action});
+function putLicenseModelAction({ itemId, action, version }) {
+ const { id: versionId } = version;
+ return RestAPIUtil.put(
+ `${baseUrl()}${itemId}/versions/${versionId}/actions`,
+ { action: action }
+ );
}
const LicenseModelActionHelper = {
+ fetchLicenseModels(dispatch) {
+ return fetchLicenseModels().then(response => {
+ dispatch({
+ type: actionTypes.LICENSE_MODELS_LIST_LOADED,
+ response
+ });
+ });
+ },
- fetchLicenseModels(dispatch) {
- return fetchLicenseModels().then(response => {
- dispatch({
- type: actionTypes.LICENSE_MODELS_LIST_LOADED,
- response
- });
- });
- },
+ fetchFinalizedLicenseModels(dispatch) {
+ return fetchFinalizedLicenseModels().then(response =>
+ dispatch({
+ type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED,
+ response
+ })
+ );
+ },
- fetchFinalizedLicenseModels(dispatch) {
- return fetchFinalizedLicenseModels().then(response => dispatch({
- type: actionTypes.FINALIZED_LICENSE_MODELS_LIST_LOADED,
- response
- }));
+ fetchArchivedLicenseModels(dispatch) {
+ return fetchArchivedLicenseModels().then(response =>
+ dispatch({
+ type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED,
+ response
+ })
+ );
+ },
- },
+ fetchLicenseModelById(dispatch, { licenseModelId, version }) {
+ return fetchLicenseModelById(licenseModelId, version).then(response => {
+ dispatch({
+ type: actionTypes.LICENSE_MODEL_LOADED,
+ response: { ...response, version }
+ });
+ });
+ },
- fetchArchivedLicenseModels(dispatch) {
- return fetchArchivedLicenseModels().then(response => dispatch({
- type: actionTypes.ARCHIVED_LICENSE_MODELS_LIST_LOADED,
- response
- }));
+ fetchLicenseModelItems(dispatch, { licenseModelId, version }) {
+ return Promise.all([
+ LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+ licenseModelId,
+ version
+ }),
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId,
+ version
+ }),
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+ licenseModelId,
+ version
+ }),
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+ licenseModelId,
+ version
+ })
+ ]);
+ },
- },
+ manageSubmitAction(dispatch, { licenseModelId, version, isDirty }) {
+ if (isDirty) {
+ const onCommit = comment => {
+ return this.performVCAction(dispatch, {
+ licenseModelId,
+ action: vcActionsEnum.COMMIT,
+ version,
+ comment
+ }).then(() => {
+ return this.performSubmitAction(dispatch, {
+ licenseModelId,
+ version
+ });
+ });
+ };
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.COMMIT_COMMENT,
+ modalComponentProps: {
+ onCommit,
+ type: CommitModalType.COMMIT_SUBMIT
+ },
+ title: i18n('Commit & Submit')
+ }
+ });
+ return Promise.reject();
+ }
+ return this.performSubmitAction(dispatch, { licenseModelId, version });
+ },
- fetchLicenseModelById(dispatch, {licenseModelId, version}) {
+ performSubmitAction(dispatch, { licenseModelId, version }) {
+ return putLicenseModelAction({
+ itemId: licenseModelId,
+ action: vcActionsEnum.SUBMIT,
+ version
+ }).then(() => {
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ }).then(updatedVersion => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
+ data: {
+ title: i18n('Submit Succeeded'),
+ msg: i18n('This license model successfully submitted'),
+ cancelButtonText: i18n('OK'),
+ timeout: 2000
+ }
+ });
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: licenseModelId
+ });
+ return Promise.resolve(updatedVersion);
+ });
+ });
+ },
- return fetchLicenseModelById(licenseModelId, version).then(response => {
- dispatch({
- type: actionTypes.LICENSE_MODEL_LOADED,
- response: {...response, version}
- });
- });
- },
-
- fetchLicenseModelItems(dispatch, {licenseModelId, version}) {
- return Promise.all([
- LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version}),
- FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version}),
- EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}),
- LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version})
- ]);
- },
-
- manageSubmitAction(dispatch, {licenseModelId, version, isDirty}) {
- if(isDirty) {
- const onCommit = comment => {
- return this.performVCAction(dispatch, {licenseModelId, action: vcActionsEnum.COMMIT, version, comment}).then(() => {
- return this.performSubmitAction(dispatch, {licenseModelId, version});
- });
- };
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.COMMIT_COMMENT,
- modalComponentProps: {
- onCommit,
- type: CommitModalType.COMMIT_SUBMIT
- },
- title: i18n('Commit & Submit')
- }
- });
- return Promise.reject();
- }
- return this.performSubmitAction(dispatch, {licenseModelId, version});
- },
-
- performSubmitAction(dispatch, {licenseModelId, version}) {
- return putLicenseModelAction({itemId: licenseModelId, action: vcActionsEnum.SUBMIT, version}).then(() => {
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id}).then(updatedVersion => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
- data: {
- title: i18n('Submit Succeeded'),
- msg: i18n('This license model successfully submitted'),
- cancelButtonText: i18n('OK'),
- timeout: 2000
- }
- });
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
- return Promise.resolve(updatedVersion);
- });
- });
- },
-
- performVCAction(dispatch, {licenseModelId, action, version, comment}) {
- return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({inMerge, isDirty, updatedVersion}) => {
- if ( (updatedVersion.status === catalogItemStatuses.CERTIFIED || updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED) &&
- (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) {
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
- const msg = updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED ? i18n('Item was Archived') : i18n('Item version already Certified');
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Commit error'),
- msg,
- cancelButtonText: i18n('Cancel')
- }
- });
- return Promise.resolve(updatedVersion);
- }
- if (!inMerge) {
- if(action === vcActionsEnum.SUBMIT) {
- return this.manageSubmitAction(dispatch, {licenseModelId, version, isDirty});
- }
- else {
- return ItemsHelper.performVCAction({itemId: licenseModelId, action, version, comment}).then(() => {
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModelId});
- if (action === vcActionsEnum.SYNC) {
- return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: licenseModelId, version}).then(({updatedVersion}) => {
- return Promise.resolve(updatedVersion);
- });
- } else {
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- }
- });
- }
- }
- });
- },
-
- saveLicenseModel(dispatch, {licenseModel}) {
- return putLicenseModel(licenseModel).then(() => {
- dispatch({
- type: actionTypes.LICENSE_MODEL_LOADED,
- response: licenseModel
- });
- const {id, version: {id: versionId}} = licenseModel;
- return ItemsHelper.checkItemStatus(dispatch, {itemId: id, versionId}).then(updatedVersion => {
- if (updatedVersion.status !== licenseModel.version.status) {
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: licenseModel.id});
- }
- });
- });
- }
+ performVCAction(dispatch, { licenseModelId, action, version, comment }) {
+ return MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+ itemId: licenseModelId,
+ version
+ }).then(({ inMerge, isDirty, updatedVersion }) => {
+ if (
+ (updatedVersion.status === catalogItemStatuses.CERTIFIED ||
+ updatedVersion.archivedStatus ===
+ catalogItemStatuses.ARCHIVED) &&
+ (action === VersionControllerActionsEnum.COMMIT ||
+ action === VersionControllerActionsEnum.SYNC)
+ ) {
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: licenseModelId
+ });
+ const msg =
+ updatedVersion.archivedStatus ===
+ catalogItemStatuses.ARCHIVED
+ ? i18n('Item was Archived')
+ : i18n('Item version already Certified');
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Commit error'),
+ msg,
+ cancelButtonText: i18n('Cancel')
+ }
+ });
+ return Promise.resolve(updatedVersion);
+ }
+ if (!inMerge) {
+ if (action === vcActionsEnum.SUBMIT) {
+ return this.manageSubmitAction(dispatch, {
+ licenseModelId,
+ version,
+ isDirty
+ });
+ } else {
+ return ItemsHelper.performVCAction({
+ itemId: licenseModelId,
+ action,
+ version,
+ comment
+ }).then(() => {
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: licenseModelId
+ });
+ if (action === vcActionsEnum.SYNC) {
+ return MergeEditorActionHelper.analyzeSyncResult(
+ dispatch,
+ { itemId: licenseModelId, version }
+ ).then(({ updatedVersion }) => {
+ return Promise.resolve(updatedVersion);
+ });
+ } else {
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ }
+ });
+ }
+ }
+ });
+ },
+ saveLicenseModel(dispatch, { licenseModel }) {
+ return putLicenseModel(licenseModel).then(() => {
+ dispatch({
+ type: actionTypes.LICENSE_MODEL_LOADED,
+ response: licenseModel
+ });
+ const { id, version: { id: versionId } } = licenseModel;
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: id,
+ versionId
+ }).then(updatedVersion => {
+ if (updatedVersion.status !== licenseModel.version.status) {
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: licenseModel.id
+ });
+ }
+ });
+ });
+ }
};
export default LicenseModelActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
index 08009ee305..d97f682535 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelConstants.js
@@ -17,23 +17,22 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
export const actionTypes = keyMirror({
- LICENSE_MODEL_LOADED: null,
- LICENSE_MODELS_LIST_LOADED: null,
- FINALIZED_LICENSE_MODELS_LIST_LOADED: null,
- ARCHIVED_LICENSE_MODELS_LIST_LOADED: null,
- EDIT_LICENSE_MODEL: null
+ LICENSE_MODEL_LOADED: null,
+ LICENSE_MODELS_LIST_LOADED: null,
+ FINALIZED_LICENSE_MODELS_LIST_LOADED: null,
+ ARCHIVED_LICENSE_MODELS_LIST_LOADED: null,
+ EDIT_LICENSE_MODEL: null
});
-
export const thresholdUnitType = {
- ABSOLUTE: 'Absolute',
- PERCENTAGE: 'Percentage'
+ ABSOLUTE: 'Absolute',
+ PERCENTAGE: 'Percentage'
};
export const optionsInputValues = {
- THRESHOLD_UNITS: [
- {enum: '', title: i18n('please select…')},
- {enum: thresholdUnitType.ABSOLUTE, title: 'Absolute'},
- {enum: thresholdUnitType.PERCENTAGE, title: '%'}
- ]
-}; \ No newline at end of file
+ THRESHOLD_UNITS: [
+ { enum: '', title: i18n('please select…') },
+ { enum: thresholdUnitType.ABSOLUTE, title: 'Absolute' },
+ { enum: thresholdUnitType.PERCENTAGE, title: '%' }
+ ]
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
index add5ac6a98..2d27679283 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelEditorReducer.js
@@ -13,16 +13,16 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.LICENSE_MODEL_LOADED:
- return {
- ...state,
- data: action.response
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.LICENSE_MODEL_LOADED:
+ return {
+ ...state,
+ data: action.response
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
index 36a190a39c..00d669c7d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelListReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './LicenseModelConstants.js';
+import { actionTypes } from './LicenseModelConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.LICENSE_MODELS_LIST_LOADED:
- return [...action.response.results];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.LICENSE_MODELS_LIST_LOADED:
+ return [...action.response.results];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
index f635532348..f102d286f0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelReducer.js
@@ -13,7 +13,7 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
import activityLogReducer from 'sdc-app/common/activity-log/ActivityLogReducer.js';
@@ -32,56 +32,75 @@ import entitlementPoolsEditorReducer from './entitlementPools/EntitlementPoolsEd
import licenseKeyGroupsEditorReducer from './licenseKeyGroups/LicenseKeyGroupsEditorReducer.js';
import licenseKeyGroupsListReducer from './licenseKeyGroups/LicenseKeyGroupsListReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
-import {actionTypes as licenseModelOverviewConstants, VLM_DESCRIPTION_FORM} from './overview/LicenseModelOverviewConstants.js';
-import limitEditorReducer from './limits/LimitEditorReducer.js';
+import {
+ actionTypes as licenseModelOverviewConstants,
+ VLM_DESCRIPTION_FORM
+} from './overview/LicenseModelOverviewConstants.js';
+import limitEditorReducer from './limits/LimitEditorReducer.js';
export default combineReducers({
- licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer),
- licenseModelEditor: licenseModelEditorReducer,
+ licenseModelCreation: createPlainDataReducer(licenseModelCreationReducer),
+ licenseModelEditor: licenseModelEditorReducer,
- licenseAgreement: combineReducers({
- licenseAgreementEditor: createPlainDataReducer(licenseAgreementEditorReducer),
- licenseAgreementList: licenseAgreementListReducer
- }),
- featureGroup: combineReducers({
- featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer),
- featureGroupsList: featureGroupsListReducer
- }),
- entitlementPool: combineReducers({
- entitlementPoolEditor: createPlainDataReducer(entitlementPoolsEditorReducer),
- entitlementPoolsList: entitlementPoolsListReducer
- }),
- licenseKeyGroup: combineReducers({
- licenseKeyGroupsEditor: createPlainDataReducer(licenseKeyGroupsEditorReducer),
- licenseKeyGroupsList: licenseKeyGroupsListReducer
- }),
- licenseModelOverview: combineReducers({
- selectedTab: (state = null, action) => action.type === licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED ? action.buttonTab : state,
- descriptionEditor: createPlainDataReducer(function(state = false, action) {
- if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) {
- return {
- ...state,
- data : {
- description : action.description
- },
- formReady: null,
- formName: VLM_DESCRIPTION_FORM,
- genericFieldInfo: {
- 'description': {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}]
- }
- }
- };
- //return action.description;
- } else {
- return state;
- }
- }
- )}),
- limitEditor: createPlainDataReducer(limitEditorReducer),
- activityLog: activityLogReducer
+ licenseAgreement: combineReducers({
+ licenseAgreementEditor: createPlainDataReducer(
+ licenseAgreementEditorReducer
+ ),
+ licenseAgreementList: licenseAgreementListReducer
+ }),
+ featureGroup: combineReducers({
+ featureGroupEditor: createPlainDataReducer(featureGroupsEditorReducer),
+ featureGroupsList: featureGroupsListReducer
+ }),
+ entitlementPool: combineReducers({
+ entitlementPoolEditor: createPlainDataReducer(
+ entitlementPoolsEditorReducer
+ ),
+ entitlementPoolsList: entitlementPoolsListReducer
+ }),
+ licenseKeyGroup: combineReducers({
+ licenseKeyGroupsEditor: createPlainDataReducer(
+ licenseKeyGroupsEditorReducer
+ ),
+ licenseKeyGroupsList: licenseKeyGroupsListReducer
+ }),
+ licenseModelOverview: combineReducers({
+ selectedTab: (state = null, action) =>
+ action.type ===
+ licenseModelOverviewConstants.LICENSE_MODEL_OVERVIEW_TAB_SELECTED
+ ? action.buttonTab
+ : state,
+ descriptionEditor: createPlainDataReducer(function(
+ state = false,
+ action
+ ) {
+ if (action.type === licenseModelOverviewConstants.LM_DATA_CHANGED) {
+ return {
+ ...state,
+ data: {
+ description: action.description
+ },
+ formReady: null,
+ formName: VLM_DESCRIPTION_FORM,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 1000 }
+ ]
+ }
+ }
+ };
+ //return action.description;
+ } else {
+ return state;
+ }
+ })
+ }),
+ limitEditor: createPlainDataReducer(limitEditorReducer),
+ activityLog: activityLogReducer
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
index 64bae3b6a0..340d345609 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelValidations.js
@@ -14,28 +14,34 @@
* permissions and limitations under the License.
*/
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {thresholdUnitType} from './LicenseModelConstants.js';
+import { thresholdUnitType } from './LicenseModelConstants.js';
import Validator from 'nfvo-utils/Validator.js';
export function validateStartDate(value, state) {
- if (state.data.expiryDate) {
- if (!value) {
- return {isValid: false, errorText: i18n('Start date has to be specified if expiry date is specified')};
- }
- }
- return {isValid: true, errorText: ''};
+ if (state.data.expiryDate) {
+ if (!value) {
+ return {
+ isValid: false,
+ errorText: i18n(
+ 'Start date has to be specified if expiry date is specified'
+ )
+ };
+ }
+ }
+ return { isValid: true, errorText: '' };
}
export function thresholdValueValidation(value, state) {
- let unit = state.data.thresholdUnits;
- if (unit === thresholdUnitType.PERCENTAGE) {
- return Validator.validate('thresholdValue', value, [
- {type: 'numeric', data: true},
- {type: 'maximum', data: 100},
- {type: 'minimum', data: 0}]);
- } else {
- return Validator.validate('thresholdValue', value, [
- {type: 'numeric', data: true},
- ]);
- }
+ let unit = state.data.thresholdUnits;
+ if (unit === thresholdUnitType.PERCENTAGE) {
+ return Validator.validate('thresholdValue', value, [
+ { type: 'numeric', data: true },
+ { type: 'maximum', data: 100 },
+ { type: 'minimum', data: 0 }
+ ]);
+ } else {
+ return Validator.validate('thresholdValue', value, [
+ { type: 'numeric', data: true }
+ ]);
+ }
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
index bcd6e7fe5b..4bbab865fa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreation.js
@@ -13,48 +13,84 @@
* 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 LicenseModelCreationActionHelper from './LicenseModelCreationActionHelper.js';
import LicenseModelCreationView from './LicenseModelCreationView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { itemTypes as versionItemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
-export const mapStateToProps = ({users: {usersList}, licenseModelList, finalizedLicenseModelList, archivedLicenseModelList, licenseModel: {licenseModelCreation}}) => {
- let {genericFieldInfo} = licenseModelCreation;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let VLMNames = {};
+export const mapStateToProps = ({
+ users: { usersList },
+ licenseModelList,
+ finalizedLicenseModelList,
+ archivedLicenseModelList,
+ licenseModel: { licenseModelCreation }
+}) => {
+ let { genericFieldInfo } = licenseModelCreation;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ let VLMNames = {};
- const allVlmList = [...licenseModelList, ...finalizedLicenseModelList,...archivedLicenseModelList];
- allVlmList.map((item) => {
- VLMNames[item.name.toLowerCase()] = item.id;
- });
+ const allVlmList = [
+ ...licenseModelList,
+ ...finalizedLicenseModelList,
+ ...archivedLicenseModelList
+ ];
+ allVlmList.map(item => {
+ VLMNames[item.name.toLowerCase()] = item.id;
+ });
- return {...licenseModelCreation, isFormValid: isFormValid, VLMNames, usersList};
+ return {
+ ...licenseModelCreation,
+ isFormValid: isFormValid,
+ VLMNames,
+ usersList
+ };
};
-export const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onCancel: () => LicenseModelCreationActionHelper.close(dispatch),
- onSubmit: (licenseModel, usersList) => {
- LicenseModelCreationActionHelper.close(dispatch);
- LicenseModelCreationActionHelper.createLicenseModel(dispatch, {licenseModel}).then(response => {
- let {itemId, version} = response;
- LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() =>
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() =>
- VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.LICENSE_MODEL, itemId}).then(() =>
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId: itemId, version}})
- )));
- });
- },
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
+export const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onCancel: () => LicenseModelCreationActionHelper.close(dispatch),
+ onSubmit: (licenseModel, usersList) => {
+ LicenseModelCreationActionHelper.close(dispatch);
+ LicenseModelCreationActionHelper.createLicenseModel(dispatch, {
+ licenseModel
+ }).then(response => {
+ let { itemId, version } = response;
+ LicenseModelActionHelper.fetchLicenseModels(dispatch).then(() =>
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId,
+ allUsers: usersList
+ }).then(() =>
+ VersionsPageActionHelper.fetchVersions(dispatch, {
+ itemType: versionItemTypes.LICENSE_MODEL,
+ itemId
+ }).then(() =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId: itemId, version }
+ })
+ )
+ )
+ );
+ });
+ },
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseModelCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseModelCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
index 87df1386b6..e2b8d55ffe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationActionHelper.js
@@ -15,59 +15,56 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './LicenseModelCreationConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './LicenseModelCreationConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-license-models/`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-license-models/`;
}
function createLicenseModel(licenseModel) {
- return RestAPIUtil.post(baseUrl(), {
- vendorName: licenseModel.vendorName,
- description: licenseModel.description,
- iconRef: 'icon'
- });
+ return RestAPIUtil.post(baseUrl(), {
+ vendorName: licenseModel.vendorName,
+ description: licenseModel.description,
+ iconRef: 'icon'
+ });
}
-
export default {
+ open(dispatch) {
+ dispatch({
+ type: actionTypes.OPEN
+ });
- open(dispatch) {
- dispatch({
- type: actionTypes.OPEN
- });
-
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION,
- title: i18n('New License Model')
- }
- });
- },
-
- close(dispatch){
- dispatch({
- type: actionTypes.CLOSE
- });
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.LICENSE_MODEL_CREATION,
+ title: i18n('New License Model')
+ }
+ });
+ },
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- },
+ close(dispatch) {
+ dispatch({
+ type: actionTypes.CLOSE
+ });
- createLicenseModel(dispatch, {licenseModel}){
- return createLicenseModel(licenseModel).then(result => {
- dispatch({
- type: actionTypes.LICENSE_MODEL_CREATED,
- result
- });
- return result;
- });
- }
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ },
+ createLicenseModel(dispatch, { licenseModel }) {
+ return createLicenseModel(licenseModel).then(result => {
+ dispatch({
+ type: actionTypes.LICENSE_MODEL_CREATED,
+ result
+ });
+ return result;
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
index e9b1c46bef..1cd61a9e4b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationConstants.js
@@ -16,9 +16,9 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- OPEN: null,
- CLOSE: null,
- LICENSE_MODEL_CREATED: null
+ OPEN: null,
+ CLOSE: null,
+ LICENSE_MODEL_CREATED: null
});
export const LICENSE_MODEL_CREATION_FORM_NAME = 'LMCREATIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
index 879d356de2..7137230cc7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationReducer.js
@@ -13,32 +13,41 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js';
+import {
+ actionTypes,
+ LICENSE_MODEL_CREATION_FORM_NAME
+} from './LicenseModelCreationConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.OPEN:
- return {
- ...state,
- formReady: null,
- formName: LICENSE_MODEL_CREATION_FORM_NAME,
- data: {},
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}]
- },
- 'vendorName' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}]
- }
- }
- };
- case actionTypes.CLOSE:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: LICENSE_MODEL_CREATION_FORM_NAME,
+ data: {},
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 1000 }
+ ]
+ },
+ vendorName: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 25 }
+ ]
+ }
+ }
+ };
+ case actionTypes.CLOSE:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
index 948bdc158d..59c4152213 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
@@ -19,84 +19,112 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import Validator from 'nfvo-utils/Validator.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import Form from 'nfvo-components/input/validation/Form.jsx';
-import {LICENSE_MODEL_CREATION_FORM_NAME} from './LicenseModelCreationConstants.js';
+import { LICENSE_MODEL_CREATION_FORM_NAME } from './LicenseModelCreationConstants.js';
const LicenseModelPropType = PropTypes.shape({
- id: PropTypes.string,
- vendorName: PropTypes.string,
- description: PropTypes.string
+ id: PropTypes.string,
+ vendorName: PropTypes.string,
+ description: PropTypes.string
});
class LicenseModelCreationView extends React.Component {
+ static propTypes = {
+ data: LicenseModelPropType,
+ VLMNames: PropTypes.object,
+ usersList: PropTypes.array,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onValidateForm: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- static propTypes = {
- data: LicenseModelPropType,
- VLMNames: PropTypes.object,
- usersList: PropTypes.array,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onValidateForm: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
+ render() {
+ let { data = {}, onDataChanged, genericFieldInfo } = this.props;
+ let { vendorName, description } = data;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ submitButtonText={i18n('Create')}
+ onReset={() => this.props.onCancel()}
+ labledButtons={true}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.validate()}>
+ <Input
+ value={vendorName}
+ label={i18n('Vendor Name')}
+ data-test-id="vendor-name"
+ onChange={vendorName =>
+ onDataChanged(
+ { vendorName },
+ LICENSE_MODEL_CREATION_FORM_NAME,
+ {
+ vendorName: name =>
+ this.validateName(name)
+ }
+ )
+ }
+ isValid={genericFieldInfo.vendorName.isValid}
+ errorText={genericFieldInfo.vendorName.errorText}
+ type="text"
+ isRequired={true}
+ className="field-section"
+ />
+ <Input
+ isRequired={true}
+ value={description}
+ label={i18n('Description')}
+ data-test-id="vendor-description"
+ overlayPos="bottom"
+ onChange={description =>
+ onDataChanged(
+ { description },
+ LICENSE_MODEL_CREATION_FORM_NAME
+ )
+ }
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ type="textarea"
+ className="field-section"
+ />
+ </Form>
+ )}
+ </div>
+ );
+ }
- render() {
- let {data = {}, onDataChanged, genericFieldInfo} = this.props;
- let {vendorName, description} = data;
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => this.submit() }
- submitButtonText={i18n('Create')}
- onReset={ () => this.props.onCancel() }
- labledButtons={true}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.validate() }>
- <Input
- value={vendorName}
- label={i18n('Vendor Name')}
- data-test-id='vendor-name'
- onChange={vendorName => onDataChanged({vendorName}, LICENSE_MODEL_CREATION_FORM_NAME, {vendorName: name => this.validateName(name)})}
- isValid={genericFieldInfo.vendorName.isValid}
- errorText={genericFieldInfo.vendorName.errorText}
- type='text'
- isRequired={true}
- className='field-section'/>
- <Input
- isRequired={true}
- value={description}
- label={i18n('Description')}
- data-test-id='vendor-description'
- overlayPos='bottom'
- onChange={description => onDataChanged({description}, LICENSE_MODEL_CREATION_FORM_NAME)}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- type='textarea'
- className='field-section'/>
- </Form>}
- </div>
- );
- }
+ submit() {
+ const { data: licenseModel, usersList } = this.props;
+ this.props.onSubmit(licenseModel, usersList);
+ }
+ validateName(value) {
+ const { data: { id }, VLMNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: VLMNames
+ });
- submit() {
- const {data:licenseModel, usersList} = this.props;
- this.props.onSubmit(licenseModel, usersList);
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "License model by the name '" +
+ value +
+ "' already exists. License model name must be unique"
+ )
+ };
+ }
- validateName(value) {
- const {data: {id}, VLMNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VLMNames});
-
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('License model by the name \'' + value + '\' already exists. License model name must be unique')};
- }
-
- validate() {
- this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME);
- }
+ validate() {
+ this.props.onValidateForm(LICENSE_MODEL_CREATION_FORM_NAME);
+ }
}
export default LicenseModelCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
index 84bdac804c..181fc11c9d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
@@ -15,197 +15,281 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
-import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
+import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
+import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
function baseUrl(licenseModelId, version) {
- const restPrefix = Configuration.get('restPrefix');
- const {id: versionId} = version;
- return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`;
+ const restPrefix = Configuration.get('restPrefix');
+ const { id: versionId } = version;
+ return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`;
}
function fetchEntitlementPoolsList(licenseModelId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
}
function postEntitlementPool(licenseModelId, entitlementPool, version) {
- return RestAPIUtil.post(baseUrl(licenseModelId, version), {
- name: entitlementPool.name,
- description: entitlementPool.description,
- thresholdValue: entitlementPool.thresholdValue,
- thresholdUnits: getValue(entitlementPool.thresholdUnits),
- increments: entitlementPool.increments,
- operationalScope: getValue(entitlementPool.operationalScope),
- time: entitlementPool.time,
- startDate: entitlementPool.startDate,
- expiryDate: entitlementPool.expiryDate
- });
+ return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+ name: entitlementPool.name,
+ description: entitlementPool.description,
+ thresholdValue: entitlementPool.thresholdValue,
+ thresholdUnits: getValue(entitlementPool.thresholdUnits),
+ increments: entitlementPool.increments,
+ operationalScope: getValue(entitlementPool.operationalScope),
+ time: entitlementPool.time,
+ startDate: entitlementPool.startDate,
+ expiryDate: entitlementPool.expiryDate
+ });
}
-
-function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) {
-
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, {
- name: entitlementPool.name,
- description: entitlementPool.description,
- thresholdValue: entitlementPool.thresholdValue,
- thresholdUnits: getValue(entitlementPool.thresholdUnits),
- increments: entitlementPool.increments,
- operationalScope: getValue(entitlementPool.operationalScope),
- time: entitlementPool.time,
- startDate: entitlementPool.startDate,
- expiryDate: entitlementPool.expiryDate
- });
+function putEntitlementPool(
+ licenseModelId,
+ previousEntitlementPool,
+ entitlementPool,
+ version
+) {
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${entitlementPool.id}`,
+ {
+ name: entitlementPool.name,
+ description: entitlementPool.description,
+ thresholdValue: entitlementPool.thresholdValue,
+ thresholdUnits: getValue(entitlementPool.thresholdUnits),
+ increments: entitlementPool.increments,
+ operationalScope: getValue(entitlementPool.operationalScope),
+ time: entitlementPool.time,
+ startDate: entitlementPool.startDate,
+ expiryDate: entitlementPool.expiryDate
+ }
+ );
}
function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(licenseModelId, version)}/${entitlementPoolId}`
+ );
}
function fetchLimitsList(licenseModelId, entitlementPoolId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`);
+ return RestAPIUtil.fetch(
+ `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`
+ );
}
function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(
+ licenseModelId,
+ version
+ )}/${entitlementPoolId}/limits/${limitId}`
+ );
}
function postLimit(licenseModelId, entitlementPoolId, version, limit) {
- return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, {
- name: limit.name,
- type: limit.type,
- description: limit.description,
- metric: getStrValue(limit.metric),
- value: limit.value,
- unit: getStrValue(limit.unit),
- aggregationFunction: getValue(limit.aggregationFunction),
- time: getValue(limit.time)
- });
+ return RestAPIUtil.post(
+ `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`,
+ {
+ name: limit.name,
+ type: limit.type,
+ description: limit.description,
+ metric: getStrValue(limit.metric),
+ value: limit.value,
+ unit: getStrValue(limit.unit),
+ aggregationFunction: getValue(limit.aggregationFunction),
+ time: getValue(limit.time)
+ }
+ );
}
function putLimit(licenseModelId, entitlementPoolId, version, limit) {
-
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limit.id}`, {
- name: limit.name,
- type: limit.type,
- description: limit.description,
- metric: getStrValue(limit.metric),
- value: limit.value,
- unit: getStrValue(limit.unit),
- aggregationFunction: getValue(limit.aggregationFunction),
- time: getValue(limit.time)
- });
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${
+ limit.id
+ }`,
+ {
+ name: limit.name,
+ type: limit.type,
+ description: limit.description,
+ metric: getStrValue(limit.metric),
+ value: limit.value,
+ unit: getStrValue(limit.unit),
+ aggregationFunction: getValue(limit.aggregationFunction),
+ time: getValue(limit.time)
+ }
+ );
}
export default {
+ fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) {
+ return fetchEntitlementPoolsList(licenseModelId, version).then(
+ response =>
+ dispatch({
+ type:
+ entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED,
+ response
+ })
+ );
+ },
+
+ openEntitlementPoolsEditor(
+ dispatch,
+ { entitlementPool, licenseModelId, version } = {}
+ ) {
+ if (licenseModelId && version) {
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ entitlementPool
+ });
+ }
+ dispatch({
+ type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN,
+ entitlementPool
+ });
+ },
+
+ deleteEntitlementPool(
+ dispatch,
+ { licenseModelId, entitlementPoolId, version }
+ ) {
+ return deleteEntitlementPool(
+ licenseModelId,
+ entitlementPoolId,
+ version
+ ).then(() => {
+ dispatch({
+ type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL,
+ entitlementPoolId
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ },
+
+ entitlementPoolsEditorDataChanged(dispatch, { deltaData }) {
+ dispatch({
+ type:
+ entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED,
+ deltaData
+ });
+ },
+
+ closeEntitlementPoolsEditor(dispatch) {
+ dispatch({
+ type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE
+ });
+ },
+
+ saveEntitlementPool(
+ dispatch,
+ { licenseModelId, previousEntitlementPool, entitlementPool, version }
+ ) {
+ if (previousEntitlementPool) {
+ return putEntitlementPool(
+ licenseModelId,
+ previousEntitlementPool,
+ entitlementPool,
+ version
+ ).then(() => {
+ dispatch({
+ type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL,
+ entitlementPool
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ } else {
+ return postEntitlementPool(
+ licenseModelId,
+ entitlementPool,
+ version
+ ).then(response => {
+ dispatch({
+ type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL,
+ entitlementPool: {
+ ...entitlementPool,
+ referencingFeatureGroups: [],
+ id: response.value
+ }
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ }
+ },
+
+ hideDeleteConfirm(dispatch) {
+ dispatch({
+ type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
+ entitlementPoolToDelete: false
+ });
+ },
+ openDeleteEntitlementPoolConfirm(dispatch, { entitlementPool }) {
+ dispatch({
+ type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
+ entitlementPoolToDelete: entitlementPool
+ });
+ },
+
+ fetchLimits(dispatch, { licenseModelId, version, entitlementPool }) {
+ return fetchLimitsList(
+ licenseModelId,
+ entitlementPool.id,
+ version
+ ).then(response => {
+ dispatch({
+ type:
+ entitlementPoolsActionTypes.entitlementPoolsEditor
+ .LIMITS_LIST_LOADED,
+ response
+ });
+ });
+ },
+
+ submitLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) {
+ const propmise = limit.id
+ ? putLimit(licenseModelId, entitlementPool.id, version, limit)
+ : postLimit(licenseModelId, entitlementPool.id, version, limit);
+ return propmise.then(() => {
+ dispatch({
+ type: limitEditorActions.CLOSE
+ });
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ entitlementPool
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ },
- fetchEntitlementPoolsList(dispatch, {licenseModelId, version}) {
- return fetchEntitlementPoolsList(licenseModelId, version).then(response => dispatch({
- type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_LIST_LOADED,
- response
- }));
- },
-
- openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version} = {}) {
- if (licenseModelId && version) {
- this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
- }
- dispatch({
- type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN,
- entitlementPool
- });
- },
-
- deleteEntitlementPool(dispatch, {licenseModelId, entitlementPoolId, version}) {
- return deleteEntitlementPool(licenseModelId, entitlementPoolId, version).then(() => {
- dispatch({
- type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL,
- entitlementPoolId
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
-
- entitlementPoolsEditorDataChanged(dispatch, {deltaData}) {
- dispatch({
- type: entitlementPoolsActionTypes.entitlementPoolsEditor.DATA_CHANGED,
- deltaData
- });
- },
-
- closeEntitlementPoolsEditor(dispatch) {
- dispatch({
- type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE
- });
- },
-
- saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version}) {
- if (previousEntitlementPool) {
- return putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version).then(() => {
- dispatch({
- type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL,
- entitlementPool
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- else {
- return postEntitlementPool(licenseModelId, entitlementPool, version).then(response => {
- dispatch({
- type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL,
- entitlementPool: {
- ...entitlementPool,
- referencingFeatureGroups: [],
- id: response.value
- }
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- },
-
- hideDeleteConfirm(dispatch) {
- dispatch({
- type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
- entitlementPoolToDelete: false
- });
- },
- openDeleteEntitlementPoolConfirm(dispatch, {entitlementPool}) {
- dispatch({
- type: entitlementPoolsActionTypes.ENTITLEMENT_POOLS_DELETE_CONFIRM,
- entitlementPoolToDelete: entitlementPool
- });
- },
-
-
-
- fetchLimits(dispatch, {licenseModelId, version, entitlementPool}) {
- return fetchLimitsList(licenseModelId, entitlementPool.id, version). then (response => {
- dispatch({
- type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED,
- response
- });
- });
- },
-
- submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
- const propmise = limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit)
- : postLimit(licenseModelId,entitlementPool.id, version, limit);
- return propmise.then(() => {
- dispatch({
- type: limitEditorActions.CLOSE
- });
- this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
-
- deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
- return deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => {
- this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
+ deleteLimit(dispatch, { licenseModelId, version, entitlementPool, limit }) {
+ return deleteLimit(
+ licenseModelId,
+ entitlementPool.id,
+ version,
+ limit.id
+ ).then(() => {
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ entitlementPool
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
index de2a87ceaf..e69ff688ab 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
@@ -15,104 +15,112 @@
*/
import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+ other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
export const actionTypes = keyMirror({
+ ENTITLEMENT_POOLS_LIST_LOADED: null,
+ ADD_ENTITLEMENT_POOL: null,
+ EDIT_ENTITLEMENT_POOL: null,
+ DELETE_ENTITLEMENT_POOL: null,
- ENTITLEMENT_POOLS_LIST_LOADED: null,
- ADD_ENTITLEMENT_POOL: null,
- EDIT_ENTITLEMENT_POOL: null,
- DELETE_ENTITLEMENT_POOL: null,
-
- entitlementPoolsEditor: {
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
- LIMITS_LIST_LOADED: null
- }
-
+ entitlementPoolsEditor: {
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null,
+ LIMITS_LIST_LOADED: null
+ }
});
export const enums = keyMirror({
- SELECTED_FEATURE_GROUP_TAB: {
- GENERAL: 1,
- ENTITLEMENT_POOLS: 2,
- LICENCE_KEY_GROUPS: 3
- },
- SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: {
- ASSOCIATED_ENTITLEMENT_POOLS: 1,
- AVAILABLE_ENTITLEMENT_POOLS: 2
- }
+ SELECTED_FEATURE_GROUP_TAB: {
+ GENERAL: 1,
+ ENTITLEMENT_POOLS: 2,
+ LICENCE_KEY_GROUPS: 3
+ },
+ SELECTED_ENTITLEMENT_POOLS_BUTTONTAB: {
+ ASSOCIATED_ENTITLEMENT_POOLS: 1,
+ AVAILABLE_ENTITLEMENT_POOLS: 2
+ }
});
export const defaultState = {
- ENTITLEMENT_POOLS_EDITOR_DATA: {
- entitlementMetric: {choice: '', other: ''},
- aggregationFunction: {choice: '', other: ''},
- operationalScope: {choices: [], other: ''},
- time: {choice: '', other: ''}
- }
+ ENTITLEMENT_POOLS_EDITOR_DATA: {
+ entitlementMetric: { choice: '', other: '' },
+ aggregationFunction: { choice: '', other: '' },
+ operationalScope: { choices: [], other: '' },
+ time: { choice: '', other: '' }
+ }
};
export const thresholdUnitType = {
- ABSOLUTE: 'Absolute',
- PERCENTAGE: 'Percentage'
+ ABSOLUTE: 'Absolute',
+ PERCENTAGE: 'Percentage'
};
export const optionsInputValues = {
- OPERATIONAL_SCOPE: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Network_Wide', title: 'Network Wide'},
- {enum: 'Availability_Zone', title: 'Availability Zone'},
- {enum: 'Data_Center', title: 'Data Center'},
- {enum: 'Tenant', title: 'Tenant'},
- {enum: 'VM', title: 'VM'},
- {enum: 'CPU', title: 'CPU'},
- {enum: 'Core', title: 'Core'}
- ],
- TIME: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Hour', title: 'Hour'},
- {enum: 'Day', title: 'Day'},
- {enum: 'Month', title: 'Month'}
- ],
- AGGREGATE_FUNCTION: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Peak', title: 'Peak'},
- {enum: 'Average', title: 'Average'}
- ],
- ENTITLEMENT_METRIC: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Software_Instances_Count', title: 'Software Instances'},
- {enum: 'Core', title: 'Core'},
- {enum: 'CPU', title: 'CPU'},
- {enum: 'Trunks', title: 'Trunks'},
- {enum: 'User', title: 'User'},
- {enum: 'Subscribers', title: 'Subscribers'},
- {enum: 'Tenants', title: 'Tenants'},
- {enum: 'Tokens', title: 'Tokens'},
- {enum: 'Seats', title: 'Seats'},
- {enum: 'Units_TB', title: 'Units-TB'},
- {enum: 'Units_GB', title: 'Units-GB'},
- {enum: 'Units_MB', title: 'Units-MB'}
- ]
+ OPERATIONAL_SCOPE: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Network_Wide', title: 'Network Wide' },
+ { enum: 'Availability_Zone', title: 'Availability Zone' },
+ { enum: 'Data_Center', title: 'Data Center' },
+ { enum: 'Tenant', title: 'Tenant' },
+ { enum: 'VM', title: 'VM' },
+ { enum: 'CPU', title: 'CPU' },
+ { enum: 'Core', title: 'Core' }
+ ],
+ TIME: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Hour', title: 'Hour' },
+ { enum: 'Day', title: 'Day' },
+ { enum: 'Month', title: 'Month' }
+ ],
+ AGGREGATE_FUNCTION: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Peak', title: 'Peak' },
+ { enum: 'Average', title: 'Average' }
+ ],
+ ENTITLEMENT_METRIC: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Software_Instances_Count', title: 'Software Instances' },
+ { enum: 'Core', title: 'Core' },
+ { enum: 'CPU', title: 'CPU' },
+ { enum: 'Trunks', title: 'Trunks' },
+ { enum: 'User', title: 'User' },
+ { enum: 'Subscribers', title: 'Subscribers' },
+ { enum: 'Tenants', title: 'Tenants' },
+ { enum: 'Tokens', title: 'Tokens' },
+ { enum: 'Seats', title: 'Seats' },
+ { enum: 'Units_TB', title: 'Units-TB' },
+ { enum: 'Units_GB', title: 'Units-GB' },
+ { enum: 'Units_MB', title: 'Units-MB' }
+ ]
};
-export const extractValue = (item) => {
- if (item === undefined) {return '';} //TODO fix it later
- return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+export const extractValue = item => {
+ if (item === undefined) {
+ return '';
+ } //TODO fix it later
+ return item
+ ? item.choice === optionInputOther.OTHER
+ ? item.other
+ : InputOptions.getTitleByName(optionsInputValues, item.choice)
+ : '';
};
-export const extractUnits = (units) => {
- if (units === undefined) {return '';} //TODO fix it later
- return units === 'Absolute' ? '' : '%';
+export const extractUnits = units => {
+ if (units === undefined) {
+ return '';
+ } //TODO fix it later
+ return units === 'Absolute' ? '' : '%';
};
export const tabIds = {
- GENERAL: 'GENERAL',
- SP_LIMITS: 'SP_LIMITS',
- VENDOR_LIMITS: 'VENDOR_LIMITS',
- ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
+ GENERAL: 'GENERAL',
+ SP_LIMITS: 'SP_LIMITS',
+ VENDOR_LIMITS: 'VENDOR_LIMITS',
+ ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
};
-export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL'; \ No newline at end of file
+export const SP_ENTITLEMENT_POOL_FORM = 'SPENTITLEMENTPOOL';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
index 23c260f793..5fcdad992a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js
@@ -13,54 +13,80 @@
* 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
import EntitlementPoolsEditorView from './EntitlementPoolsEditorView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js';
-const mapStateToProps = ({licenseModel: {entitlementPool}}) => {
+const mapStateToProps = ({ licenseModel: { entitlementPool } }) => {
+ let {
+ data,
+ genericFieldInfo,
+ formReady,
+ limitsList
+ } = entitlementPool.entitlementPoolEditor;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let {data, genericFieldInfo, formReady, limitsList} = entitlementPool.entitlementPoolEditor;
+ let previousData,
+ EPNames = {};
+ const entitlementPoolId = data ? data.id : null;
+ if (entitlementPoolId) {
+ previousData = entitlementPool.entitlementPoolsList.find(
+ entitlementPool => entitlementPool.id === entitlementPoolId
+ );
+ }
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ const list = entitlementPool.entitlementPoolsList;
+ for (let i = 0; i < list.length; i++) {
+ EPNames[list[i].name.toLowerCase()] = list[i].id;
+ }
- let previousData, EPNames = {};
- const entitlementPoolId = data ? data.id : null;
- if(entitlementPoolId) {
- previousData = entitlementPool.entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId);
- }
-
- const list = entitlementPool.entitlementPoolsList;
- for (let i = 0; i < list.length; i++) {
- EPNames[list[i].name.toLowerCase()] = list[i].id;
- }
-
- return {
- data,
- genericFieldInfo,
- previousData,
- isFormValid,
- formReady,
- EPNames,
- limitsList
- };
+ return {
+ data,
+ genericFieldInfo,
+ previousData,
+ isFormValid,
+ formReady,
+ EPNames,
+ limitsList
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onCancel: () => EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch),
- onSubmit: ({previousEntitlementPool, entitlementPool, keepOpen}) => {
- if (!keepOpen) {EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch);}
- EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {licenseModelId, previousEntitlementPool, entitlementPool, version});
- },
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName),
- onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch),
- onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit})
- };
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onCancel: () =>
+ EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(dispatch),
+ onSubmit: ({ previousEntitlementPool, entitlementPool, keepOpen }) => {
+ if (!keepOpen) {
+ EntitlementPoolsActionHelper.closeEntitlementPoolsEditor(
+ dispatch
+ );
+ }
+ EntitlementPoolsActionHelper.saveEntitlementPool(dispatch, {
+ licenseModelId,
+ previousEntitlementPool,
+ entitlementPool,
+ version
+ });
+ },
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName),
+ onCloseLimitEditor: () =>
+ LimitEditorActionHelper.closeLimitsEditor(dispatch),
+ onOpenLimitEditor: limit =>
+ LimitEditorActionHelper.openLimitsEditor(dispatch, { limit })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ EntitlementPoolsEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
index be100f6802..4556b87129 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
@@ -13,87 +13,101 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, defaultState, SP_ENTITLEMENT_POOL_FORM} from './EntitlementPoolsConstants.js';
+import {
+ actionTypes,
+ defaultState,
+ SP_ENTITLEMENT_POOL_FORM
+} from './EntitlementPoolsConstants.js';
import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.entitlementPoolsEditor.OPEN:
- let entitlementPoolData = {...action.entitlementPool};
- let {startDate, expiryDate} = entitlementPoolData;
- if (startDate) {
- entitlementPoolData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT);
- }
- if (expiryDate) {
- entitlementPoolData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT);
- }
- return {
- ...state,
- formReady: null,
- formName: SP_ENTITLEMENT_POOL_FORM,
- genericFieldInfo: {
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'increments' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 120}]
- },
- 'operationalScope' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'thresholdUnits' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'thresholdValue' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'startDate': {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'expiryDate': {
- isValid: true,
- errorText: '',
- validations: []
- }
- },
- data: action.entitlementPool ? entitlementPoolData : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA
- };
- case actionTypes.entitlementPoolsEditor.DATA_CHANGED:
- return {
- ...state,
- data: {
- ...state.data,
- ...action.deltaData
- }
- };
- case actionTypes.entitlementPoolsEditor.CLOSE:
- return {};
-
- case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED:
- return {
- ...state,
- limitsList: action.response.results
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.entitlementPoolsEditor.OPEN:
+ let entitlementPoolData = { ...action.entitlementPool };
+ let { startDate, expiryDate } = entitlementPoolData;
+ if (startDate) {
+ entitlementPoolData.startDate = moment(
+ startDate,
+ DATE_FORMAT
+ ).format(DATE_FORMAT);
+ }
+ if (expiryDate) {
+ entitlementPoolData.expiryDate = moment(
+ expiryDate,
+ DATE_FORMAT
+ ).format(DATE_FORMAT);
+ }
+ return {
+ ...state,
+ formReady: null,
+ formName: SP_ENTITLEMENT_POOL_FORM,
+ genericFieldInfo: {
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ increments: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 120 }]
+ },
+ operationalScope: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ thresholdUnits: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ thresholdValue: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ startDate: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ expiryDate: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ },
+ data: action.entitlementPool
+ ? entitlementPoolData
+ : defaultState.ENTITLEMENT_POOLS_EDITOR_DATA
+ };
+ case actionTypes.entitlementPoolsEditor.DATA_CHANGED:
+ return {
+ ...state,
+ data: {
+ ...state.data,
+ ...action.deltaData
+ }
+ };
+ case actionTypes.entitlementPoolsEditor.CLOSE:
+ return {};
+ case actionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED:
+ return {
+ ...state,
+ limitsList: action.response.results
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
index efae7f3ad2..46eda622b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -25,307 +25,479 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import Button from 'sdc-ui/lib/react/Button.js';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as EntitlementPoolsOptionsInputValues, SP_ENTITLEMENT_POOL_FORM, tabIds} from './EntitlementPoolsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+ optionsInputValues as EntitlementPoolsOptionsInputValues,
+ SP_ENTITLEMENT_POOL_FORM,
+ tabIds
+} from './EntitlementPoolsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+ validateStartDate,
+ thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
import Tabs from 'sdc-ui/lib/react/Tabs.js';
import Tab from 'sdc-ui/lib/react/Tab.js';
import EntitlementPoolsLimits from './EntitlementPoolsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+ limitType,
+ NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
const EntitlementPoolPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- operationalScope: PropTypes.shape({
- choices: PropTypes.array,
- other: PropTypes.string
- }),
- thresholdUnits: PropTypes.string,
- thresholdValue: PropTypes.string,
- increments: PropTypes.string,
- startDate: PropTypes.string,
- expiryDate: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ operationalScope: PropTypes.shape({
+ choices: PropTypes.array,
+ other: PropTypes.string
+ }),
+ thresholdUnits: PropTypes.string,
+ thresholdValue: PropTypes.string,
+ increments: PropTypes.string,
+ startDate: PropTypes.string,
+ expiryDate: PropTypes.string
});
-const EntitlementPoolsFormContent = ({data, genericFieldInfo, onDataChanged, validateName,
- thresholdValueValidation, validateStartDate}) => {
+const EntitlementPoolsFormContent = ({
+ data,
+ genericFieldInfo,
+ onDataChanged,
+ validateName,
+ thresholdValueValidation,
+ validateStartDate
+}) => {
+ let {
+ name,
+ description,
+ operationalScope,
+ thresholdUnits,
+ thresholdValue,
+ increments,
+ startDate,
+ expiryDate
+ } = data;
+ return (
+ <GridSection hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
+ name: validateName
+ })
+ }
+ isValid={genericFieldInfo.name.isValid}
+ isRequired={true}
+ errorText={genericFieldInfo.name.errorText}
+ label={i18n('Name')}
+ value={name}
+ data-test-id="create-ep-name"
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={true}
+ onEnumChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: operationalScope,
+ other: ''
+ }
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ onOtherChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: [optionInputOther.OTHER],
+ other: operationalScope
+ }
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ label={i18n('Operational Scope')}
+ data-test-id="create-ep-operational-scope"
+ type="select"
+ multiSelectedEnum={
+ operationalScope && operationalScope.choices
+ }
+ otherValue={operationalScope && operationalScope.other}
+ values={
+ EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE
+ }
+ isValid={genericFieldInfo.operationalScope.isValid}
+ errorText={genericFieldInfo.operationalScope.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2} stretch>
+ <Input
+ onChange={description =>
+ onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
+ }
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ label={i18n('Description')}
+ value={description}
+ data-test-id="create-ep-description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <div className="threshold-section">
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onDataChanged(
+ { thresholdUnits: val },
+ SP_ENTITLEMENT_POOL_FORM
+ );
+ // TODO make sure that the value is valid too
+ if (thresholdValue && thresholdValue !== '') {
+ onDataChanged(
+ { thresholdValue: thresholdValue },
+ SP_ENTITLEMENT_POOL_FORM,
+ { thresholdValue: thresholdValueValidation }
+ );
+ }
+ }}
+ value={thresholdUnits}
+ label={i18n('Threshold Units')}
+ data-test-id="create-ep-threshold-units"
+ isValid={genericFieldInfo.thresholdUnits.isValid}
+ errorText={genericFieldInfo.thresholdUnits.errorText}
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ type="select">
+ {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+ mtype => (
+ <option key={mtype.enum} value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
- let {name, description, operationalScope, thresholdUnits, thresholdValue,
- increments, startDate, expiryDate} = data;
- return (
- <GridSection hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name}, SP_ENTITLEMENT_POOL_FORM, {name: validateName})}
- isValid={genericFieldInfo.name.isValid}
- isRequired={true}
- errorText={genericFieldInfo.name.errorText}
- label={i18n('Name')}
- value={name}
- data-test-id='create-ep-name'
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={true}
- onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
- SP_ENTITLEMENT_POOL_FORM)}
- onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
- other: operationalScope}}, SP_ENTITLEMENT_POOL_FORM)}
- label={i18n('Operational Scope')}
- data-test-id='create-ep-operational-scope'
- type='select'
- multiSelectedEnum={operationalScope && operationalScope.choices}
- otherValue={operationalScope && operationalScope.other}
- values={EntitlementPoolsOptionsInputValues.OPERATIONAL_SCOPE}
- isValid={genericFieldInfo.operationalScope.isValid}
- errorText={genericFieldInfo.operationalScope.errorText} />
- </GridItem>
- <GridItem colSpan={2} stretch>
- <Input
- onChange={description => onDataChanged({description}, SP_ENTITLEMENT_POOL_FORM)}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- label={i18n('Description')}
- value={description}
- data-test-id='create-ep-description'
- type='textarea'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <div className='threshold-section'>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({thresholdUnits: val}, SP_ENTITLEMENT_POOL_FORM);
- // TODO make sure that the value is valid too
- if(thresholdValue && thresholdValue !== '') {
- onDataChanged({thresholdValue: thresholdValue}, SP_ENTITLEMENT_POOL_FORM,{thresholdValue : thresholdValueValidation});
- }}
-
- }
- value={thresholdUnits}
- label={i18n('Threshold Units')}
- data-test-id='create-ep-threshold-units'
- isValid={genericFieldInfo.thresholdUnits.isValid}
- errorText={genericFieldInfo.thresholdUnits.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
-
- <Input
- className='entitlement-pools-form-row-threshold-value'
- onChange={thresholdValue => onDataChanged({thresholdValue}, SP_ENTITLEMENT_POOL_FORM,
- {thresholdValue : thresholdValueValidation})}
- label={i18n('Threshold Value')}
- isValid={genericFieldInfo.thresholdValue.isValid}
- errorText={genericFieldInfo.thresholdValue.errorText}
- data-test-id='create-ep-threshold-value'
- value={thresholdValue}
- type='text'/>
- </div>
- <Input
- onChange={increments => onDataChanged({increments}, SP_ENTITLEMENT_POOL_FORM)}
- label={i18n('Increments')}
- value={increments}
- data-test-id='create-ep-increments'
- type='text'/>
- <div className='date-section'>
- <Input
- type='date'
- label={i18n('Start Date')}
- value={startDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={startDate => onDataChanged(
- {startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
- SP_ENTITLEMENT_POOL_FORM,
- {startDate: validateStartDate}
- )}
- isValid={genericFieldInfo.startDate.isValid}
- errorText={genericFieldInfo.startDate.errorText}
- selectsStart/>
- <Input
- type='date'
- label={i18n('Expiry Date')}
- value={expiryDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={expiryDate => {
- onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, SP_ENTITLEMENT_POOL_FORM);
- onDataChanged({startDate}, SP_ENTITLEMENT_POOL_FORM, {startDate: validateStartDate});
- }}
- isValid={genericFieldInfo.expiryDate.isValid}
- errorText={genericFieldInfo.expiryDate.errorText}
- selectsEnd/>
- </div>
- </GridItem>
- </GridSection>
- );
+ <Input
+ className="entitlement-pools-form-row-threshold-value"
+ onChange={thresholdValue =>
+ onDataChanged(
+ { thresholdValue },
+ SP_ENTITLEMENT_POOL_FORM,
+ {
+ thresholdValue: thresholdValueValidation
+ }
+ )
+ }
+ label={i18n('Threshold Value')}
+ isValid={genericFieldInfo.thresholdValue.isValid}
+ errorText={genericFieldInfo.thresholdValue.errorText}
+ data-test-id="create-ep-threshold-value"
+ value={thresholdValue}
+ type="text"
+ />
+ </div>
+ <Input
+ onChange={increments =>
+ onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
+ }
+ label={i18n('Increments')}
+ value={increments}
+ data-test-id="create-ep-increments"
+ type="text"
+ />
+ <div className="date-section">
+ <Input
+ type="date"
+ label={i18n('Start Date')}
+ value={startDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={startDate =>
+ onDataChanged(
+ {
+ startDate: startDate
+ ? startDate.format(DATE_FORMAT)
+ : ''
+ },
+ SP_ENTITLEMENT_POOL_FORM,
+ { startDate: validateStartDate }
+ )
+ }
+ isValid={genericFieldInfo.startDate.isValid}
+ errorText={genericFieldInfo.startDate.errorText}
+ selectsStart
+ />
+ <Input
+ type="date"
+ label={i18n('Expiry Date')}
+ value={expiryDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={expiryDate => {
+ onDataChanged(
+ {
+ expiryDate: expiryDate
+ ? expiryDate.format(DATE_FORMAT)
+ : ''
+ },
+ SP_ENTITLEMENT_POOL_FORM
+ );
+ onDataChanged(
+ { startDate },
+ SP_ENTITLEMENT_POOL_FORM,
+ {
+ startDate: validateStartDate
+ }
+ );
+ }}
+ isValid={genericFieldInfo.expiryDate.isValid}
+ errorText={genericFieldInfo.expiryDate.errorText}
+ selectsEnd
+ />
+ </div>
+ </GridItem>
+ </GridSection>
+ );
};
class EntitlementPoolsEditorView extends React.Component {
+ static propTypes = {
+ data: EntitlementPoolPropType,
+ previousData: EntitlementPoolPropType,
+ EPNames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- static propTypes = {
- data: EntitlementPoolPropType,
- previousData: EntitlementPoolPropType,
- EPNames: PropTypes.object,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- data: {}
- };
-
- componentDidUpdate(prevProps) {
- if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
- this.submit();
- }
- }
+ static defaultProps = {
+ data: {}
+ };
- state = {
- selectedTab: tabIds.GENERAL,
- selectedLimit: ''
- };
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.formReady &&
+ this.props.formReady !== prevProps.formReady
+ ) {
+ // if form validation succeeded -> continue with submit
+ this.submit();
+ }
+ }
- render() {
- let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCloseLimitEditor, limitsList = []} = this.props;
- const {selectedTab} = this.state;
- const isTabsDisabled = !data.id || !this.props.isFormValid;
+ state = {
+ selectedTab: tabIds.GENERAL,
+ selectedLimit: ''
+ };
- return (
- <div>
- <Tabs
- type='menu'
- activeTab={selectedTab}
- onTabClick={(tabIndex)=>{
- if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
- this.onAddLimit();
- } else {
- this.setState({selectedTab: tabIndex});
- this.setState({selectedLimit: ''});
- onCloseLimitEditor();
- }
- }}
- invalidTabs={[]}>
- <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
- {
- genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={false}
- labledButtons={false}
- isReadOnlyMode={isReadOnlyMode}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM) }
- className='license-model-form entitlement-pools-form'>
- <EntitlementPoolsFormContent
- data={data}
- genericFieldInfo={genericFieldInfo}
- onDataChanged={onDataChanged}
- validateName={(value) => this.validateName(value)}
- validateStartDate={(value, state) => validateStartDate(value, state)}
- thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
- </Form>
- }
- </Tab>
- <Tab disabled={isTabsDisabled} tabId={tabIds.SP_LIMITS} data-test-id='sp-limits-tab' title={i18n('SP Limits')}>
- {selectedTab === tabIds.SP_LIMITS &&
- <EntitlementPoolsLimits
- isReadOnlyMode={isReadOnlyMode}
- limitType={limitType.SERVICE_PROVIDER}
- limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}/>}
- </Tab>
- <Tab disabled={isTabsDisabled} tabId={tabIds.VENDOR_LIMITS} data-test-id='vendor-limits-tab' title={i18n('Vendor Limits')}>
- {selectedTab === tabIds.VENDOR_LIMITS &&
- <EntitlementPoolsLimits
- isReadOnlyMode={isReadOnlyMode}
- limitType={limitType.VENDOR}
- limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}/>}
- </Tab>
- {
- selectedTab !== tabIds.GENERAL ?
- <Button
- disabled={this.state.selectedLimit || isReadOnlyMode}
- className='add-limit-button'
- tabId={tabIds.ADD_LIMIT_BUTTON}
- btnType='link'
- iconName='plus'>
- {i18n('Add Limit')}
- </Button>
- :
- <div key='empty_ep_tab_key'></div> // Render empty div to not break tabs
- }
- </Tabs>
- <GridSection className='license-model-modal-buttons entitlement-pools-editor-buttons'>
- {!this.state.selectedLimit &&
- <Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
- {i18n('Save')}
- </Button>
- }
- <Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
- {i18n('Cancel')}
- </Button>
- </GridSection>
- </div>
- );
- }
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ isReadOnlyMode,
+ genericFieldInfo,
+ onCloseLimitEditor,
+ limitsList = []
+ } = this.props;
+ const { selectedTab } = this.state;
+ const isTabsDisabled = !data.id || !this.props.isFormValid;
- submit() {
- const {data: entitlementPool, previousData: previousEntitlementPool, formReady} = this.props;
- if (!formReady) {
- this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
- } else {
- this.props.onSubmit({entitlementPool, previousEntitlementPool});
- }
- }
+ return (
+ <div>
+ <Tabs
+ type="menu"
+ activeTab={selectedTab}
+ onTabClick={tabIndex => {
+ if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+ this.onAddLimit();
+ } else {
+ this.setState({ selectedTab: tabIndex });
+ this.setState({ selectedLimit: '' });
+ onCloseLimitEditor();
+ }
+ }}
+ invalidTabs={[]}>
+ <Tab
+ tabId={tabIds.GENERAL}
+ data-test-id="general-tab"
+ title={i18n('General')}>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={false}
+ labledButtons={false}
+ isReadOnlyMode={isReadOnlyMode}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(
+ SP_ENTITLEMENT_POOL_FORM
+ )
+ }
+ className="license-model-form entitlement-pools-form">
+ <EntitlementPoolsFormContent
+ data={data}
+ genericFieldInfo={genericFieldInfo}
+ onDataChanged={onDataChanged}
+ validateName={value =>
+ this.validateName(value)
+ }
+ validateStartDate={(value, state) =>
+ validateStartDate(value, state)
+ }
+ thresholdValueValidation={(value, state) =>
+ thresholdValueValidation(value, state)
+ }
+ />
+ </Form>
+ )}
+ </Tab>
+ <Tab
+ disabled={isTabsDisabled}
+ tabId={tabIds.SP_LIMITS}
+ data-test-id="sp-limits-tab"
+ title={i18n('SP Limits')}>
+ {selectedTab === tabIds.SP_LIMITS && (
+ <EntitlementPoolsLimits
+ isReadOnlyMode={isReadOnlyMode}
+ limitType={limitType.SERVICE_PROVIDER}
+ limitsList={limitsList.filter(
+ item =>
+ item.type === limitType.SERVICE_PROVIDER
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ />
+ )}
+ </Tab>
+ <Tab
+ disabled={isTabsDisabled}
+ tabId={tabIds.VENDOR_LIMITS}
+ data-test-id="vendor-limits-tab"
+ title={i18n('Vendor Limits')}>
+ {selectedTab === tabIds.VENDOR_LIMITS && (
+ <EntitlementPoolsLimits
+ isReadOnlyMode={isReadOnlyMode}
+ limitType={limitType.VENDOR}
+ limitsList={limitsList.filter(
+ item => item.type === limitType.VENDOR
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ />
+ )}
+ </Tab>
+ {selectedTab !== tabIds.GENERAL ? (
+ <Button
+ disabled={
+ this.state.selectedLimit || isReadOnlyMode
+ }
+ className="add-limit-button"
+ tabId={tabIds.ADD_LIMIT_BUTTON}
+ btnType="link"
+ iconName="plus">
+ {i18n('Add Limit')}
+ </Button>
+ ) : (
+ <div key="empty_ep_tab_key" />
+ ) // Render empty div to not break tabs
+ }
+ </Tabs>
+ <GridSection className="license-model-modal-buttons entitlement-pools-editor-buttons">
+ {!this.state.selectedLimit && (
+ <Button
+ btnType="default"
+ disabled={!this.props.isFormValid || isReadOnlyMode}
+ onClick={() => this.submit()}
+ type="reset">
+ {i18n('Save')}
+ </Button>
+ )}
+ <Button
+ btnType={
+ this.state.selectedLimit ? 'default' : 'outline'
+ }
+ onClick={() => this.props.onCancel()}
+ type="reset">
+ {i18n('Cancel')}
+ </Button>
+ </GridSection>
+ </div>
+ );
+ }
- validateName(value) {
- const {data: {id}, EPNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: EPNames});
+ submit() {
+ const {
+ data: entitlementPool,
+ previousData: previousEntitlementPool,
+ formReady
+ } = this.props;
+ if (!formReady) {
+ this.props.onValidateForm(SP_ENTITLEMENT_POOL_FORM);
+ } else {
+ this.props.onSubmit({ entitlementPool, previousEntitlementPool });
+ }
+ }
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Entitlement pool by the name \'' + value + '\' already exists. Entitlement pool name must be unique')};
- }
+ validateName(value) {
+ const { data: { id }, EPNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: EPNames
+ });
- onSelectLimit(limit) {
- if (limit.id === this.state.selectedLimit) {
- this.setState({selectedLimit: ''});
- return;
- }
- this.setState({selectedLimit: limit.id});
- this.props.onOpenLimitEditor(limit);
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Entitlement pool by the name '" +
+ value +
+ "' already exists. Entitlement pool name must be unique"
+ )
+ };
+ }
- onCloseLimitEditor() {
- this.setState({selectedLimit: ''});
- this.props.onCloseLimitEditor();
- }
+ onSelectLimit(limit) {
+ if (limit.id === this.state.selectedLimit) {
+ this.setState({ selectedLimit: '' });
+ return;
+ }
+ this.setState({ selectedLimit: limit.id });
+ this.props.onOpenLimitEditor(limit);
+ }
- onAddLimit() {
- this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
- this.props.onOpenLimitEditor();
- }
+ onCloseLimitEditor() {
+ this.setState({ selectedLimit: '' });
+ this.props.onCloseLimitEditor();
+ }
+ onAddLimit() {
+ this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+ this.props.onOpenLimitEditor();
+ }
}
export default EntitlementPoolsEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
index 8300594098..fd5fe6dd21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsLimits.js
@@ -13,44 +13,74 @@
* 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx';
-import {actionTypes as globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
-const mapStateToProps = ({licenseModel: {entitlementPool: {entitlementPoolEditor: {data}}, limitEditor}, currentScreen}) => {
- let {props: {licenseModelId, version}} = currentScreen;
- return {
- parent: data,
- limitEditor,
- licenseModelId,
- version
- };
+const mapStateToProps = ({
+ licenseModel: {
+ entitlementPool: { entitlementPoolEditor: { data } },
+ limitEditor
+ },
+ currentScreen
+}) => {
+ let { props: { licenseModelId, version } } = currentScreen;
+ return {
+ parent: data,
+ limitEditor,
+ licenseModelId,
+ version
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onSubmit: (limit, entitlementPool, licenseModelId, version) => EntitlementPoolsActionHelper.submitLimit(dispatch,
- {
- limit,
- entitlementPool,
- licenseModelId,
- version}),
- onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({
- type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=> EntitlementPoolsActionHelper.deleteLimit(dispatch, {limit, entitlementPool: parent, licenseModelId, version}).then(() =>
- selectedLimit === limit.id && onCloseLimitEditor()
- )
- }
- })
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onSubmit: (limit, entitlementPool, licenseModelId, version) =>
+ EntitlementPoolsActionHelper.submitLimit(dispatch, {
+ limit,
+ entitlementPool,
+ licenseModelId,
+ version
+ }),
+ onDelete: ({
+ limit,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ }) =>
+ dispatch({
+ type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete {name}?', {
+ name: limit.name
+ }),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ EntitlementPoolsActionHelper.deleteLimit(dispatch, {
+ limit,
+ entitlementPool: parent,
+ licenseModelId,
+ version
+ }).then(
+ () =>
+ selectedLimit === limit.id &&
+ onCloseLimitEditor()
+ )
+ }
+ })
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(Limits);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
index f1dc1f8542..819fb7d824 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
@@ -13,45 +13,60 @@
* 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 EntitlementPoolsActionHelper from './EntitlementPoolsActionHelper.js';
-import EntitlementPoolsListEditorView, {generateConfirmationMsg} from './EntitlementPoolsListEditorView.jsx';
-import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import EntitlementPoolsListEditorView, {
+ generateConfirmationMsg
+} from './EntitlementPoolsListEditorView.jsx';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
-const mapStateToProps = ({licenseModel: {entitlementPool, licenseModelEditor}}) => {
-
- const {entitlementPoolsList} = entitlementPool;
- const {data} = entitlementPool.entitlementPoolEditor;
- const {vendorName} = licenseModelEditor.data;
-
- return {
- vendorName,
- entitlementPoolsList,
- isDisplayModal: Boolean(data),
- isModalInEditMode: Boolean(data && data.id),
- };
+const mapStateToProps = ({
+ licenseModel: { entitlementPool, licenseModelEditor }
+}) => {
+ const { entitlementPoolsList } = entitlementPool;
+ const { data } = entitlementPool.entitlementPoolEditor;
+ const { vendorName } = licenseModelEditor.data;
+ return {
+ vendorName,
+ entitlementPoolsList,
+ isDisplayModal: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onAddEntitlementPoolClick: () => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch),
- onEditEntitlementPoolClick: entitlementPool => EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {entitlementPool, licenseModelId, version}),
- onDeleteEntitlementPool: entitlementPool => dispatch({
- type: globalMoadlActions.GLOBAL_MODAL_WARNING,
- data:{
- msg: generateConfirmationMsg(entitlementPool),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: () => EntitlementPoolsActionHelper.deleteEntitlementPool(dispatch, {
- licenseModelId,
- entitlementPoolId: entitlementPool.id,
- version
- })
- }
- })
- };
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onAddEntitlementPoolClick: () =>
+ EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch),
+ onEditEntitlementPoolClick: entitlementPool =>
+ EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {
+ entitlementPool,
+ licenseModelId,
+ version
+ }),
+ onDeleteEntitlementPool: entitlementPool =>
+ dispatch({
+ type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: generateConfirmationMsg(entitlementPool),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ EntitlementPoolsActionHelper.deleteEntitlementPool(
+ dispatch,
+ {
+ licenseModelId,
+ entitlementPoolId: entitlementPool.id,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(EntitlementPoolsListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ EntitlementPoolsListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
index cc0cda1992..7a07f94bd5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
@@ -22,120 +22,162 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import EntitlementPoolsEditor from './EntitlementPoolsEditor.js';
-import {extractUnits} from './EntitlementPoolsConstants';
+import { extractUnits } from './EntitlementPoolsConstants';
class EntitlementPoolsListEditorView extends React.Component {
- static propTypes = {
- vendorName: PropTypes.string,
- licenseModelId: PropTypes.string.isRequired,
- entitlementPoolsList: PropTypes.array,
- isReadOnlyMode: PropTypes.bool.isRequired,
- isDisplayModal: PropTypes.bool,
- isModalInEditMode: PropTypes.bool,
- onAddEntitlementPoolClick: PropTypes.func,
- onEditEntitlementPoolClick: PropTypes.func,
- onDeleteEntitlementPool: PropTypes.func,
- };
+ static propTypes = {
+ vendorName: PropTypes.string,
+ licenseModelId: PropTypes.string.isRequired,
+ entitlementPoolsList: PropTypes.array,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ onAddEntitlementPoolClick: PropTypes.func,
+ onEditEntitlementPoolClick: PropTypes.func,
+ onDeleteEntitlementPool: PropTypes.func
+ };
- static defaultProps = {
- entitlementPoolsList: []
- };
+ static defaultProps = {
+ entitlementPoolsList: []
+ };
- state = {
- localFilter: ''
- };
+ state = {
+ localFilter: ''
+ };
- render() {
- let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
- let {onAddEntitlementPoolClick} = this.props;
- const {localFilter} = this.state;
+ render() {
+ let {
+ licenseModelId,
+ isReadOnlyMode,
+ isDisplayModal,
+ isModalInEditMode,
+ version
+ } = this.props;
+ let { onAddEntitlementPoolClick } = this.props;
+ const { localFilter } = this.state;
- return (
- <div className='license-model-list-editor entitlement-pools-list-editor'>
- <ListEditorView
- title={i18n('Entitlement Pools')}
- plusButtonTitle={i18n('Add Entitlement Pool')}
- onAdd={onAddEntitlementPoolClick}
- filterValue={localFilter}
- onFilter={value => this.setState({localFilter: value})}
- isReadOnlyMode={isReadOnlyMode}>
- {this.filterList().map(entitlementPool => this.renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode))}
- </ListEditorView>
- <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal entitlement-pools-modal'>
- <Modal.Header>
- <Modal.Title>{`${isModalInEditMode ? i18n('Edit Entitlement Pool') : i18n('Create New Entitlement Pool')}`}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {
- isDisplayModal && (
- <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>
- )
- }
- </Modal.Body>
- </Modal>
- </div>
- );
- }
+ return (
+ <div className="license-model-list-editor entitlement-pools-list-editor">
+ <ListEditorView
+ title={i18n('Entitlement Pools')}
+ plusButtonTitle={i18n('Add Entitlement Pool')}
+ onAdd={onAddEntitlementPoolClick}
+ filterValue={localFilter}
+ onFilter={value => this.setState({ localFilter: value })}
+ isReadOnlyMode={isReadOnlyMode}>
+ {this.filterList().map(entitlementPool =>
+ this.renderEntitlementPoolListItem(
+ entitlementPool,
+ isReadOnlyMode
+ )
+ )}
+ </ListEditorView>
+ <Modal
+ show={isDisplayModal}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal license-model-modal entitlement-pools-modal">
+ <Modal.Header>
+ <Modal.Title>{`${
+ isModalInEditMode
+ ? i18n('Edit Entitlement Pool')
+ : i18n('Create New Entitlement Pool')
+ }`}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {isDisplayModal && (
+ <EntitlementPoolsEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Modal.Body>
+ </Modal>
+ </div>
+ );
+ }
- filterList() {
- let {entitlementPoolsList} = this.props;
- let {localFilter} = this.state;
- if(localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return entitlementPoolsList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return entitlementPoolsList;
- }
- }
+ filterList() {
+ let { entitlementPoolsList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return entitlementPoolsList.filter(
+ ({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ }
+ );
+ } else {
+ return entitlementPoolsList;
+ }
+ }
- renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
- let {id, name, description, thresholdValue, thresholdUnits} = entitlementPool;
- let {onEditEntitlementPoolClick, onDeleteEntitlementPool} = this.props;
- return (
- <ListEditorItemView
- key={id}
- onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
- onDelete={() => onDeleteEntitlementPool(entitlementPool)}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field'>
+ renderEntitlementPoolListItem(entitlementPool, isReadOnlyMode) {
+ let {
+ id,
+ name,
+ description,
+ thresholdValue,
+ thresholdUnits
+ } = entitlementPool;
+ let {
+ onEditEntitlementPoolClick,
+ onDeleteEntitlementPool
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ onSelect={() => onEditEntitlementPoolClick(entitlementPool)}
+ onDelete={() => onDeleteEntitlementPool(entitlementPool)}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div>
+ <div className="textEllipses text name">{name}</div>
+ </div>
+ </div>
- <div className='title'>{i18n('Name')}</div>
- <div ><div className='textEllipses text name'>{name}</div></div>
- </div>
-
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Entitlement')}</div>
- <div className='entitlement-pools-count'>{thresholdValue && `${thresholdValue} ${extractUnits(thresholdUnits)}`}</div>
- </div>
-
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Entitlement')}</div>
+ <div className="entitlement-pools-count">
+ {thresholdValue &&
+ `${thresholdValue} ${extractUnits(thresholdUnits)}`}
+ </div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
}
export default EntitlementPoolsListEditorView;
export function generateConfirmationMsg(entitlementPoolToDelete) {
- let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
- let msg = i18n('Are you sure you want to delete "{poolName}"?', {poolName: poolName});
- let subMsg = entitlementPoolToDelete
- && entitlementPoolToDelete.referencingFeatureGroups
- && entitlementPoolToDelete.referencingFeatureGroups.length > 0 ?
- i18n('This entitlement pool is associated with one or more feature groups') :
- '';
- return (
- <div>
- <p>{msg}</p>
- <p>{subMsg}</p>
- </div>
- );
+ let poolName = entitlementPoolToDelete ? entitlementPoolToDelete.name : '';
+ let msg = i18n('Are you sure you want to delete "{poolName}"?', {
+ poolName: poolName
+ });
+ let subMsg =
+ entitlementPoolToDelete &&
+ entitlementPoolToDelete.referencingFeatureGroups &&
+ entitlementPoolToDelete.referencingFeatureGroups.length > 0
+ ? i18n(
+ 'This entitlement pool is associated with one or more feature groups'
+ )
+ : '';
+ return (
+ <div>
+ <p>{msg}</p>
+ <p>{subMsg}</p>
+ </div>
+ );
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
index fefd823207..3c8621d9d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
@@ -13,19 +13,29 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './EntitlementPoolsConstants';
+import { actionTypes } from './EntitlementPoolsConstants';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED:
- return [...action.response.results];
- case actionTypes.ADD_ENTITLEMENT_POOL:
- return [...state, action.entitlementPool];
- case actionTypes.EDIT_ENTITLEMENT_POOL:
- const indexForEdit = state.findIndex(entitlementPool => entitlementPool.id === action.entitlementPool.id);
- return [...state.slice(0, indexForEdit), action.entitlementPool, ...state.slice(indexForEdit + 1)];
- case actionTypes.DELETE_ENTITLEMENT_POOL:
- return state.filter(entitlementPool => entitlementPool.id !== action.entitlementPoolId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.ENTITLEMENT_POOLS_LIST_LOADED:
+ return [...action.response.results];
+ case actionTypes.ADD_ENTITLEMENT_POOL:
+ return [...state, action.entitlementPool];
+ case actionTypes.EDIT_ENTITLEMENT_POOL:
+ const indexForEdit = state.findIndex(
+ entitlementPool =>
+ entitlementPool.id === action.entitlementPool.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.entitlementPool,
+ ...state.slice(indexForEdit + 1)
+ ];
+ case actionTypes.DELETE_ENTITLEMENT_POOL:
+ return state.filter(
+ entitlementPool =>
+ entitlementPool.id !== action.entitlementPoolId
+ );
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
index 6edb1e1f0c..997a6e09ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor.js
@@ -13,66 +13,92 @@
* 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 FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js';
import FeatureGroupEditorView from './FeatureGroupEditorView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-export const mapStateToProps = ({licenseModel: {featureGroup, entitlementPool, licenseKeyGroup}}) => {
- let {entitlementPoolsList = []} = entitlementPool;
- let {licenseKeyGroupsList = []} = licenseKeyGroup;
- const {featureGroupEditor} = featureGroup;
- let {data, selectedTab, genericFieldInfo, formReady} = featureGroupEditor;
- const featureGroupId = data ? data.id : null;
- const list = featureGroup.featureGroupsList;
+export const mapStateToProps = ({
+ licenseModel: { featureGroup, entitlementPool, licenseKeyGroup }
+}) => {
+ let { entitlementPoolsList = [] } = entitlementPool;
+ let { licenseKeyGroupsList = [] } = licenseKeyGroup;
+ const { featureGroupEditor } = featureGroup;
+ let { data, selectedTab, genericFieldInfo, formReady } = featureGroupEditor;
+ const featureGroupId = data ? data.id : null;
+ const list = featureGroup.featureGroupsList;
- let previousData, FGNames = {}, isFormValid = true, invalidTabs = [];
+ let previousData,
+ FGNames = {},
+ isFormValid = true,
+ invalidTabs = [];
- if (featureGroupId) {
- previousData = list.find(featureGroup => featureGroup.id === featureGroupId);
- }
+ if (featureGroupId) {
+ previousData = list.find(
+ featureGroup => featureGroup.id === featureGroupId
+ );
+ }
- for (let i = 0; i < list.length; i++) {
- FGNames[list[i].name.toLowerCase()] = list[i].id;
- }
+ for (let i = 0; i < list.length; i++) {
+ FGNames[list[i].name.toLowerCase()] = list[i].id;
+ }
- for (let field in genericFieldInfo) {
- if (!genericFieldInfo[field].isValid) {
- isFormValid = false;
- let tabId = genericFieldInfo[field].tabId;
- if (invalidTabs.indexOf(tabId) === -1) {
- invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
- }
- }
- }
+ for (let field in genericFieldInfo) {
+ if (!genericFieldInfo[field].isValid) {
+ isFormValid = false;
+ let tabId = genericFieldInfo[field].tabId;
+ if (invalidTabs.indexOf(tabId) === -1) {
+ invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
+ }
+ }
+ }
- return {
- data,
- previousData,
- selectedTab,
- entitlementPoolsList,
- licenseKeyGroupsList,
- isFormValid,
- formReady,
- genericFieldInfo,
- invalidTabs,
- FGNames
- };
+ return {
+ data,
+ previousData,
+ selectedTab,
+ entitlementPoolsList,
+ licenseKeyGroupsList,
+ isFormValid,
+ formReady,
+ genericFieldInfo,
+ invalidTabs,
+ FGNames
+ };
};
-
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onTabSelect: tab => FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab(dispatch, {tab}),
- onSubmit: (previousFeatureGroup, featureGroup) => {
- FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch);
- FeatureGroupsActionHelper.saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version});
- },
- onCancel: () => FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch),
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onTabSelect: tab =>
+ FeatureGroupsActionHelper.selectEntitlementPoolsEditorTab(
+ dispatch,
+ {
+ tab
+ }
+ ),
+ onSubmit: (previousFeatureGroup, featureGroup) => {
+ FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch);
+ FeatureGroupsActionHelper.saveFeatureGroup(dispatch, {
+ licenseModelId,
+ previousFeatureGroup,
+ featureGroup,
+ version
+ });
+ },
+ onCancel: () =>
+ FeatureGroupsActionHelper.closeFeatureGroupsEditor(dispatch),
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ FeatureGroupEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
index 6d0acaa65d..fc8269332a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -19,211 +19,320 @@ import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
import Tab from 'sdc-ui/lib/react/Tab.js';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Validator from 'nfvo-utils/Validator.js';
-import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
+import {
+ state as FeatureGroupStateConstants,
+ FG_EDITOR_FORM
+} from './FeatureGroupsConstants.js';
const FeatureGroupsPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- partNumber: PropTypes.string,
- manufacturerReferenceNumber: PropTypes.string,
- entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
- licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ partNumber: PropTypes.string,
+ manufacturerReferenceNumber: PropTypes.string,
+ entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
+ licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
});
-const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
- let {name, description, partNumber, manufacturerReferenceNumber} = data;
- return (
- <GridSection hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- groupClassName='field-section'
- onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})}
- label={i18n('Name')}
- data-test-id='create-fg-name'
- value={name}
- name='feature-group-name'
- type='text'
- isRequired={true}
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText} />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- groupClassName='field-section'
- className='description-field'
- onChange={description => onDataChanged({description}, FG_EDITOR_FORM)}
- data-test-id='create-fg-description'
- label={i18n('Description')}
- value={description}
- name='feature-group-description'
- type='textarea'
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText} />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- groupClassName='field-section'
- onChange={partNumber => onDataChanged({partNumber}, FG_EDITOR_FORM)}
- label={i18n('Part Number')}
- data-test-id='create-fg-part-number'
- value={partNumber}
- isRequired={true}
- type='text'
- isValid={genericFieldInfo.partNumber.isValid}
- errorText={genericFieldInfo.partNumber.errorText} />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- groupClassName='field-section'
- onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, FG_EDITOR_FORM)}
- label={i18n('Manufacturer Reference Number')}
- data-test-id='create-fg-reference-number'
- value={manufacturerReferenceNumber}
- isRequired={true}
- type='text'
- isValid={genericFieldInfo.manufacturerReferenceNumber.isValid}
- errorText={genericFieldInfo.manufacturerReferenceNumber.errorText} />
- </GridItem>
- </GridSection>
- );
+const GeneralTab = ({
+ data = {},
+ onDataChanged,
+ genericFieldInfo,
+ validateName
+}) => {
+ let { name, description, partNumber, manufacturerReferenceNumber } = data;
+ return (
+ <GridSection hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ groupClassName="field-section"
+ onChange={name =>
+ onDataChanged({ name }, FG_EDITOR_FORM, {
+ name: validateName
+ })
+ }
+ label={i18n('Name')}
+ data-test-id="create-fg-name"
+ value={name}
+ name="feature-group-name"
+ type="text"
+ isRequired={true}
+ isValid={genericFieldInfo.name.isValid}
+ errorText={genericFieldInfo.name.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ groupClassName="field-section"
+ className="description-field"
+ onChange={description =>
+ onDataChanged({ description }, FG_EDITOR_FORM)
+ }
+ data-test-id="create-fg-description"
+ label={i18n('Description')}
+ value={description}
+ name="feature-group-description"
+ type="textarea"
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ groupClassName="field-section"
+ onChange={partNumber =>
+ onDataChanged({ partNumber }, FG_EDITOR_FORM)
+ }
+ label={i18n('Part Number')}
+ data-test-id="create-fg-part-number"
+ value={partNumber}
+ isRequired={true}
+ type="text"
+ isValid={genericFieldInfo.partNumber.isValid}
+ errorText={genericFieldInfo.partNumber.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ groupClassName="field-section"
+ onChange={manufacturerReferenceNumber =>
+ onDataChanged(
+ { manufacturerReferenceNumber },
+ FG_EDITOR_FORM
+ )
+ }
+ label={i18n('Manufacturer Reference Number')}
+ data-test-id="create-fg-reference-number"
+ value={manufacturerReferenceNumber}
+ isRequired={true}
+ type="text"
+ isValid={
+ genericFieldInfo.manufacturerReferenceNumber.isValid
+ }
+ errorText={
+ genericFieldInfo.manufacturerReferenceNumber.errorText
+ }
+ />
+ </GridItem>
+ </GridSection>
+ );
};
-const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
- const dualBoxFilterTitle = {
- left: i18n('Available Entitlement Pools'),
- right: i18n('Selected Entitlement Pools')
- };
- if (entitlementPoolsList.length > 0) {
- return (
- <DualListboxView
- isReadOnlyMode={isReadOnlyMode}
- filterTitle={dualBoxFilterTitle}
- selectedValuesList={data.entitlementPoolsIds}
- availableList={entitlementPoolsList}
- onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
- );
- } else {
- return (
- <p>{i18n('There are no available entitlement pools')}</p>
- );
- }
+const EntitlementPoolsTab = ({
+ entitlementPoolsList,
+ data,
+ onDataChanged,
+ isReadOnlyMode
+}) => {
+ const dualBoxFilterTitle = {
+ left: i18n('Available Entitlement Pools'),
+ right: i18n('Selected Entitlement Pools')
+ };
+ if (entitlementPoolsList.length > 0) {
+ return (
+ <DualListboxView
+ isReadOnlyMode={isReadOnlyMode}
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={data.entitlementPoolsIds}
+ availableList={entitlementPoolsList}
+ onChange={selectedValuesList =>
+ onDataChanged(
+ { entitlementPoolsIds: selectedValuesList },
+ FG_EDITOR_FORM
+ )
+ }
+ />
+ );
+ } else {
+ return <p>{i18n('There are no available entitlement pools')}</p>;
+ }
};
-const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => {
- const dualBoxFilterTitle = {
- left: i18n('Available License Key Groups'),
- right: i18n('Selected License Key Groups')
- };
- if (licenseKeyGroupsList.length > 0) {
- return (
- <DualListboxView
- isReadOnlyMode={isReadOnlyMode}
- filterTitle={dualBoxFilterTitle}
- selectedValuesList={data.licenseKeyGroupsIds}
- availableList={licenseKeyGroupsList}
- onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
- );
- } else {
- return (
- <p>{i18n('There are no available license key groups')}</p>
- );
- }
+const LKGTab = ({
+ licenseKeyGroupsList,
+ data,
+ onDataChanged,
+ isReadOnlyMode
+}) => {
+ const dualBoxFilterTitle = {
+ left: i18n('Available License Key Groups'),
+ right: i18n('Selected License Key Groups')
+ };
+ if (licenseKeyGroupsList.length > 0) {
+ return (
+ <DualListboxView
+ isReadOnlyMode={isReadOnlyMode}
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={data.licenseKeyGroupsIds}
+ availableList={licenseKeyGroupsList}
+ onChange={selectedValuesList =>
+ onDataChanged(
+ { licenseKeyGroupsIds: selectedValuesList },
+ FG_EDITOR_FORM
+ )
+ }
+ />
+ );
+ } else {
+ return <p>{i18n('There are no available license key groups')}</p>;
+ }
};
class FeatureGroupEditorView extends React.Component {
+ static propTypes = {
+ data: FeatureGroupsPropType,
+ previousData: FeatureGroupsPropType,
+ isReadOnlyMode: PropTypes.bool,
+ FGNames: PropTypes.object,
+ onSubmit: PropTypes.func,
+ onCancel: PropTypes.func,
- static propTypes = {
- data: FeatureGroupsPropType,
- previousData: FeatureGroupsPropType,
- isReadOnlyMode: PropTypes.bool,
- FGNames: PropTypes.object,
-
- onSubmit: PropTypes.func,
- onCancel: PropTypes.func,
-
- selectedTab: PropTypes.number,
- onTabSelect: PropTypes.func,
-
- entitlementPoolsList: DualListboxView.propTypes.availableList,
- licenseKeyGroupsList: DualListboxView.propTypes.availableList
- };
-
-
- static defaultProps = {
- data: {},
- selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
- };
-
- state = {
- localEntitlementPoolsListFilter: '',
- localLicenseKeyGroupsListFilter: ''
- };
-
-
- render() {
- let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
- return (
- <div>
- { genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => this.submit() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) }
- onReset={ () => this.props.onCancel() }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- name='feature-group-validation-form'
- className='license-model-form feature-group-form'>
- <Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' >
- <Tab tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')} >
- <fieldset disabled={isReadOnlyMode}>
- <GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo} validateName={(value)=> this.validateName(value)}/>
- </fieldset>
- </Tab>
- <Tab
- tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
- title={i18n('Entitlement Pools')} >
- <fieldset disabled={isReadOnlyMode}>
- <EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
- </fieldset>
- </Tab>
- <Tab
- tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
- title={i18n('License Key Groups')} >
- <fieldset disabled={isReadOnlyMode}>
- <LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
- </fieldset>
- </Tab>
- </Tabs>
-
- </Form> }
- </div>
- );
- }
-
- submit() {
- const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
- this.props.onSubmit(previousFeatureGroup, featureGroup);
- }
-
- validateName(value) {
- const {data: {id}, FGNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames});
-
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')};
- }
-}
+ selectedTab: PropTypes.number,
+ onTabSelect: PropTypes.func,
+
+ entitlementPoolsList: DualListboxView.propTypes.availableList,
+ licenseKeyGroupsList: DualListboxView.propTypes.availableList
+ };
+
+ static defaultProps = {
+ data: {},
+ selectedTab:
+ FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
+ };
+
+ state = {
+ localEntitlementPoolsListFilter: '',
+ localLicenseKeyGroupsListFilter: ''
+ };
+ render() {
+ let {
+ selectedTab,
+ onTabSelect,
+ isReadOnlyMode,
+ invalidTabs,
+ data,
+ onDataChanged,
+ genericFieldInfo,
+ entitlementPoolsList,
+ licenseKeyGroupsList
+ } = this.props;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(FG_EDITOR_FORM)
+ }
+ onReset={() => this.props.onCancel()}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ name="feature-group-validation-form"
+ className="license-model-form feature-group-form">
+ <Tabs
+ activeTab={onTabSelect ? selectedTab : undefined}
+ onTabClick={onTabSelect}
+ invalidTabs={invalidTabs}
+ id="vlmFGValTabs">
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ }
+ title={i18n('General')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <GeneralTab
+ data={data}
+ onDataChanged={onDataChanged}
+ genericFieldInfo={genericFieldInfo}
+ validateName={value =>
+ this.validateName(value)
+ }
+ />
+ </fieldset>
+ </Tab>
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB
+ .ENTITLEMENT_POOLS
+ }
+ title={i18n('Entitlement Pools')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <EntitlementPoolsTab
+ isReadOnlyMode={isReadOnlyMode}
+ data={data}
+ onDataChanged={onDataChanged}
+ entitlementPoolsList={
+ entitlementPoolsList
+ }
+ />
+ </fieldset>
+ </Tab>
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB
+ .LICENSE_KEY_GROUPS
+ }
+ title={i18n('License Key Groups')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <LKGTab
+ isReadOnlyMode={isReadOnlyMode}
+ data={data}
+ onDataChanged={onDataChanged}
+ licenseKeyGroupsList={
+ licenseKeyGroupsList
+ }
+ />
+ </fieldset>
+ </Tab>
+ </Tabs>
+ </Form>
+ )}
+ </div>
+ );
+ }
+
+ submit() {
+ const {
+ data: featureGroup,
+ previousData: previousFeatureGroup
+ } = this.props;
+ this.props.onSubmit(previousFeatureGroup, featureGroup);
+ }
+
+ validateName(value) {
+ const { data: { id }, FGNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: FGNames
+ });
+
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Feature group by the name '" +
+ value +
+ "' already exists. Feature group name must be unique"
+ )
+ };
+ }
+}
export default FeatureGroupEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
index 26925487db..55e2710231 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
@@ -13,48 +13,62 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
-import FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js';
-import FeatureGroupListEditorView, {generateConfirmationMsg} from './FeatureGroupListEditorView.jsx';
+import { connect } from 'react-redux';
+import FeatureGroupsActionHelper from './FeatureGroupsActionHelper.js';
+import FeatureGroupListEditorView, {
+ generateConfirmationMsg
+} from './FeatureGroupListEditorView.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
-export const mapStateToProps = ({licenseModel: {featureGroup, licenseModelEditor}}) => {
-
- const {featureGroupEditor: {data}, featureGroupsList} = featureGroup;
- const {vendorName, version} = licenseModelEditor.data;
-
- return {
- vendorName,
- version,
- featureGroupsModal: {
- show: Boolean(data),
- editMode: Boolean(data && data.id)
- },
- featureGroupsList
- };
+export const mapStateToProps = ({
+ licenseModel: { featureGroup, licenseModelEditor }
+}) => {
+ const { featureGroupEditor: { data }, featureGroupsList } = featureGroup;
+ const { vendorName, version } = licenseModelEditor.data;
+ return {
+ vendorName,
+ version,
+ featureGroupsModal: {
+ show: Boolean(data),
+ editMode: Boolean(data && data.id)
+ },
+ featureGroupsList
+ };
};
-
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
- return {
- onDeleteFeatureGroupClick: (featureGroup, version) => dispatch({
- type: globalMoadlActions.GLOBAL_MODAL_WARNING,
- data:{
- msg: generateConfirmationMsg(featureGroup),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=>FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, {featureGroupId: featureGroup.id, licenseModelId, version})
- }
- }),
- onAddFeatureGroupClick: (actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version: actualVersion}),
- onEditFeatureGroupClick: (featureGroup, actualVersion) => FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
- featureGroup,
- licenseModelId,
- version: actualVersion
- })
- };
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+ return {
+ onDeleteFeatureGroupClick: (featureGroup, version) =>
+ dispatch({
+ type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: generateConfirmationMsg(featureGroup),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ FeatureGroupsActionHelper.deleteFeatureGroup(dispatch, {
+ featureGroupId: featureGroup.id,
+ licenseModelId,
+ version
+ })
+ }
+ }),
+ onAddFeatureGroupClick: actualVersion =>
+ FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
+ licenseModelId,
+ version: actualVersion
+ }),
+ onEditFeatureGroupClick: (featureGroup, actualVersion) =>
+ FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
+ featureGroup,
+ licenseModelId,
+ version: actualVersion
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(FeatureGroupListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ FeatureGroupListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
index f59e000c21..91f77b3111 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
@@ -24,147 +24,184 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
import FeatureGroupEditor from './FeatureGroupEditor.js';
class FeatureGroupListEditorView extends React.Component {
- static propTypes = {
- vendorName: PropTypes.string,
- licenseModelId: PropTypes.string.isRequired,
- featureGroupsModal: PropTypes.shape({
- show: PropTypes.bool,
- editMode: PropTypes.bool
- }),
- isReadOnlyMode: PropTypes.bool.isRequired,
- onAddFeatureGroupClick: PropTypes.func,
- onEditFeatureGroupClick: PropTypes.func,
- onDeleteFeatureGroupClick: PropTypes.func,
- onCancelFeatureGroupsEditor: PropTypes.func,
- featureGroupsList: PropTypes.array
- };
-
- static defaultProps = {
- featureGroupsList: [],
- featureGroupsModal: {
- show: false,
- editMode: false
- }
- };
-
- state = {
- localFilter: ''
- };
-
- render() {
- let {licenseModelId, featureGroupsModal, isReadOnlyMode, onAddFeatureGroupClick, version} = this.props;
- const {localFilter} = this.state;
- return (
- <div className='license-model-list-editor feature-groups-list-editor'>
- <ListEditorView
- title={i18n('Feature Groups')}
- plusButtonTitle={i18n('Add Feature Group')}
- filterValue={localFilter}
- onFilter={value => this.setState({localFilter: value})}
- onAdd={() => onAddFeatureGroupClick(version)}
- isReadOnlyMode={isReadOnlyMode}>
- {this.filterList().map(listItem => this.renderFeatureGroupListItem(listItem, isReadOnlyMode, version))}
- </ListEditorView>
- {featureGroupsModal.show && <Modal show={featureGroupsModal.show} bsSize='large' animation={true}
- className='onborading-modal license-model-modal feature-group-modal'>
- <Modal.Header>
- <Modal.Title>{`${featureGroupsModal.editMode ? i18n('Edit Feature Group') : i18n('Create New Feature Group')}`}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <FeatureGroupEditor
- version={version}
- licenseModelId={licenseModelId}
- isReadOnlyMode={isReadOnlyMode}/>
- </Modal.Body>
- </Modal>
- }
-
- </div>
- );
- }
-
-
- renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
- let {name, description, manufacturerReferenceNumber, entitlementPoolsIds = [], licenseKeyGroupsIds = []} = listItem;
- return (
- <ListEditorItemView
- key={listItem.id}
- onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
- onSelect={() => this.editFeatureGroupItem(listItem, version)}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='text name'>{name}</div>
- </div>
-
- <div className='list-editor-item-view-field smaller-field'>
- <div className='feature-groups-count-field'>
- <div className='title'>{i18n('EP')}</div>
- <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
- </div>
- </div>
- <div className='list-editor-item-view-field smaller-field'>
- <div className='feature-groups-count-field'>
- <div className='title'>{i18n('LKG')}</div>
- <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
- </div>
- </div>
-
- <div className='list-editor-item-view-field'>
- <div className='feature-groups-count-field'>
- <div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div>
- <div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div>
- </div>
- </div>
-
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
-
-
-
- </ListEditorItemView>
- );
- }
-
- filterList() {
- let {featureGroupsList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return featureGroupsList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return featureGroupsList;
- }
- }
-
- editFeatureGroupItem(featureGroup, version) {
- this.props.onEditFeatureGroupClick(featureGroup, version);
- }
-
- deleteFeatureGroupItem(featureGroup, version) {
- this.props.onDeleteFeatureGroupClick(featureGroup, version);
- }
+ static propTypes = {
+ vendorName: PropTypes.string,
+ licenseModelId: PropTypes.string.isRequired,
+ featureGroupsModal: PropTypes.shape({
+ show: PropTypes.bool,
+ editMode: PropTypes.bool
+ }),
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ onAddFeatureGroupClick: PropTypes.func,
+ onEditFeatureGroupClick: PropTypes.func,
+ onDeleteFeatureGroupClick: PropTypes.func,
+ onCancelFeatureGroupsEditor: PropTypes.func,
+ featureGroupsList: PropTypes.array
+ };
+
+ static defaultProps = {
+ featureGroupsList: [],
+ featureGroupsModal: {
+ show: false,
+ editMode: false
+ }
+ };
+
+ state = {
+ localFilter: ''
+ };
+
+ render() {
+ let {
+ licenseModelId,
+ featureGroupsModal,
+ isReadOnlyMode,
+ onAddFeatureGroupClick,
+ version
+ } = this.props;
+ const { localFilter } = this.state;
+ return (
+ <div className="license-model-list-editor feature-groups-list-editor">
+ <ListEditorView
+ title={i18n('Feature Groups')}
+ plusButtonTitle={i18n('Add Feature Group')}
+ filterValue={localFilter}
+ onFilter={value => this.setState({ localFilter: value })}
+ onAdd={() => onAddFeatureGroupClick(version)}
+ isReadOnlyMode={isReadOnlyMode}>
+ {this.filterList().map(listItem =>
+ this.renderFeatureGroupListItem(
+ listItem,
+ isReadOnlyMode,
+ version
+ )
+ )}
+ </ListEditorView>
+ {featureGroupsModal.show && (
+ <Modal
+ show={featureGroupsModal.show}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal license-model-modal feature-group-modal">
+ <Modal.Header>
+ <Modal.Title>{`${
+ featureGroupsModal.editMode
+ ? i18n('Edit Feature Group')
+ : i18n('Create New Feature Group')
+ }`}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <FeatureGroupEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ </Modal.Body>
+ </Modal>
+ )}
+ </div>
+ );
+ }
+
+ renderFeatureGroupListItem(listItem, isReadOnlyMode, version) {
+ let {
+ name,
+ description,
+ manufacturerReferenceNumber,
+ entitlementPoolsIds = [],
+ licenseKeyGroupsIds = []
+ } = listItem;
+ return (
+ <ListEditorItemView
+ key={listItem.id}
+ onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
+ onSelect={() => this.editFeatureGroupItem(listItem, version)}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="text name">{name}</div>
+ </div>
+
+ <div className="list-editor-item-view-field smaller-field">
+ <div className="feature-groups-count-field">
+ <div className="title">{i18n('EP')}</div>
+ <div className="feature-groups-count-ep">
+ {entitlementPoolsIds.length || 0}
+ </div>
+ </div>
+ </div>
+ <div className="list-editor-item-view-field smaller-field">
+ <div className="feature-groups-count-field">
+ <div className="title">{i18n('LKG')}</div>
+ <div className="feature-groups-count-lk">
+ {licenseKeyGroupsIds.length || 0}
+ </div>
+ </div>
+ </div>
+
+ <div className="list-editor-item-view-field">
+ <div className="feature-groups-count-field">
+ <div className="title title-no-wrap">
+ {i18n('Manufacturer Reference Number')}
+ </div>
+ <div className="feature-groups-mrn-ep">
+ {manufacturerReferenceNumber}
+ </div>
+ </div>
+ </div>
+
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
+
+ filterList() {
+ let { featureGroupsList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return featureGroupsList.filter(
+ ({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ }
+ );
+ } else {
+ return featureGroupsList;
+ }
+ }
+
+ editFeatureGroupItem(featureGroup, version) {
+ this.props.onEditFeatureGroupClick(featureGroup, version);
+ }
+
+ deleteFeatureGroupItem(featureGroup, version) {
+ this.props.onDeleteFeatureGroupClick(featureGroup, version);
+ }
}
export default FeatureGroupListEditorView;
export function generateConfirmationMsg(featureGroupToDelete) {
- let name = featureGroupToDelete ? featureGroupToDelete.name : '';
- let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
- let subMsg = featureGroupToDelete.referencingLicenseAgreements
- && featureGroupToDelete.referencingLicenseAgreements.length > 0 ?
- i18n('This feature group is associated with one ore more license agreements') :
- '';
- return (
- <div>
- <p>{msg}</p>
- <p>{subMsg}</p>
- </div>
- );
+ let name = featureGroupToDelete ? featureGroupToDelete.name : '';
+ let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
+ let subMsg =
+ featureGroupToDelete.referencingLicenseAgreements &&
+ featureGroupToDelete.referencingLicenseAgreements.length > 0
+ ? i18n(
+ 'This feature group is associated with one ore more license agreements'
+ )
+ : '';
+ return (
+ <div>
+ <p>{msg}</p>
+ <p>{subMsg}</p>
+ </div>
+ );
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
index 9e7fe8e0dd..22e21a613a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
@@ -15,132 +15,202 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as featureGroupsActionConstants} from './FeatureGroupsConstants.js';
+import { actionTypes as featureGroupsActionConstants } from './FeatureGroupsConstants.js';
import EntitlementPoolsActionHelper from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
import LicenseKeyGroupsActionHelper from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
function baseUrl(licenseModelId, version) {
- const restPrefix = Configuration.get('restPrefix');
- const {id: versionId} = version;
- return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/feature-groups`;
+ const restPrefix = Configuration.get('restPrefix');
+ const { id: versionId } = version;
+ return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/feature-groups`;
}
function fetchFeatureGroup(licenseModelId, featureGroupId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${featureGroupId}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl(licenseModelId, version)}/${featureGroupId}`
+ );
}
function fetchFeatureGroupsList(licenseModelId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
}
function deleteFeatureGroup(licenseModelId, featureGroupId, version) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${featureGroupId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(licenseModelId, version)}/${featureGroupId}`
+ );
}
function addFeatureGroup(licenseModelId, featureGroup, version) {
- return RestAPIUtil.post(baseUrl(licenseModelId, version), {
- name: featureGroup.name,
- description: featureGroup.description,
- partNumber: featureGroup.partNumber,
- manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
- addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds,
- addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds
- });
+ return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+ name: featureGroup.name,
+ description: featureGroup.description,
+ partNumber: featureGroup.partNumber,
+ manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
+ addedLicenseKeyGroupsIds: featureGroup.licenseKeyGroupsIds,
+ addedEntitlementPoolsIds: featureGroup.entitlementPoolsIds
+ });
}
-function updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version) {
-
- const {licenseKeyGroupsIds = []} = featureGroup;
- const {licenseKeyGroupsIds: prevLicenseKeyGroupsIds = []} = previousFeatureGroup;
- const {entitlementPoolsIds = []} = featureGroup;
- const {entitlementPoolsIds: prevEntitlementPoolsIds = []} = previousFeatureGroup;
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${featureGroup.id}`, {
- name: featureGroup.name,
- description: featureGroup.description,
- partNumber: featureGroup.partNumber,
- manufacturerReferenceNumber: featureGroup.manufacturerReferenceNumber,
- addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter(licenseKeyGroupId => prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1),
- removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter(prevLicenseKeyGroupId => licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1),
- addedEntitlementPoolsIds: entitlementPoolsIds.filter(entitlementPoolId => prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1),
- removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter(prevEntitlementPoolId => entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1)
-
- });
+function updateFeatureGroup(
+ licenseModelId,
+ previousFeatureGroup,
+ featureGroup,
+ version
+) {
+ const { licenseKeyGroupsIds = [] } = featureGroup;
+ const {
+ licenseKeyGroupsIds: prevLicenseKeyGroupsIds = []
+ } = previousFeatureGroup;
+ const { entitlementPoolsIds = [] } = featureGroup;
+ const {
+ entitlementPoolsIds: prevEntitlementPoolsIds = []
+ } = previousFeatureGroup;
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${featureGroup.id}`,
+ {
+ name: featureGroup.name,
+ description: featureGroup.description,
+ partNumber: featureGroup.partNumber,
+ manufacturerReferenceNumber:
+ featureGroup.manufacturerReferenceNumber,
+ addedLicenseKeyGroupsIds: licenseKeyGroupsIds.filter(
+ licenseKeyGroupId =>
+ prevLicenseKeyGroupsIds.indexOf(licenseKeyGroupId) === -1
+ ),
+ removedLicenseKeyGroupsIds: prevLicenseKeyGroupsIds.filter(
+ prevLicenseKeyGroupId =>
+ licenseKeyGroupsIds.indexOf(prevLicenseKeyGroupId) === -1
+ ),
+ addedEntitlementPoolsIds: entitlementPoolsIds.filter(
+ entitlementPoolId =>
+ prevEntitlementPoolsIds.indexOf(entitlementPoolId) === -1
+ ),
+ removedEntitlementPoolsIds: prevEntitlementPoolsIds.filter(
+ prevEntitlementPoolId =>
+ entitlementPoolsIds.indexOf(prevEntitlementPoolId) === -1
+ )
+ }
+ );
}
export default {
- fetchFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) {
- return fetchFeatureGroup(licenseModelId, featureGroupId, version);
- },
+ fetchFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) {
+ return fetchFeatureGroup(licenseModelId, featureGroupId, version);
+ },
- fetchFeatureGroupsList(dispatch, {licenseModelId, version}) {
- return fetchFeatureGroupsList(licenseModelId, version).then(response => dispatch({
- type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
- response
- }));
- },
+ fetchFeatureGroupsList(dispatch, { licenseModelId, version }) {
+ return fetchFeatureGroupsList(licenseModelId, version).then(response =>
+ dispatch({
+ type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
+ response
+ })
+ );
+ },
- deleteFeatureGroup(dispatch, {licenseModelId, featureGroupId, version}) {
- return deleteFeatureGroup(licenseModelId, featureGroupId, version).then(() => {
- dispatch({
- type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS,
- featureGroupId
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
+ deleteFeatureGroup(dispatch, { licenseModelId, featureGroupId, version }) {
+ return deleteFeatureGroup(licenseModelId, featureGroupId, version).then(
+ () => {
+ dispatch({
+ type: featureGroupsActionConstants.DELETE_FEATURE_GROUPS,
+ featureGroupId
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ }
+ );
+ },
- saveFeatureGroup(dispatch, {licenseModelId, previousFeatureGroup, featureGroup, version}) {
- if (previousFeatureGroup) {
- return updateFeatureGroup(licenseModelId, previousFeatureGroup, featureGroup, version).then(() =>{
- dispatch({
- type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS,
- featureGroup
- });
- EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
- LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- else {
- return addFeatureGroup(licenseModelId, featureGroup, version).then(response => {
- dispatch({
- type: featureGroupsActionConstants.ADD_FEATURE_GROUPS,
- featureGroup: {
- ...featureGroup,
- id: response.value,
- referencingLicenseAgreements: []
- }
- });
- EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version});
- LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- },
+ saveFeatureGroup(
+ dispatch,
+ { licenseModelId, previousFeatureGroup, featureGroup, version }
+ ) {
+ if (previousFeatureGroup) {
+ return updateFeatureGroup(
+ licenseModelId,
+ previousFeatureGroup,
+ featureGroup,
+ version
+ ).then(() => {
+ dispatch({
+ type: featureGroupsActionConstants.EDIT_FEATURE_GROUPS,
+ featureGroup
+ });
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(
+ dispatch,
+ { licenseModelId, version }
+ );
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(
+ dispatch,
+ { licenseModelId, version }
+ );
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ } else {
+ return addFeatureGroup(licenseModelId, featureGroup, version).then(
+ response => {
+ dispatch({
+ type: featureGroupsActionConstants.ADD_FEATURE_GROUPS,
+ featureGroup: {
+ ...featureGroup,
+ id: response.value,
+ referencingLicenseAgreements: []
+ }
+ });
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(
+ dispatch,
+ { licenseModelId, version }
+ );
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(
+ dispatch,
+ { licenseModelId, version }
+ );
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ }
+ );
+ }
+ },
- selectEntitlementPoolsEditorTab(dispatch, {tab}) {
- dispatch({
- type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB,
- tab
- });
- },
+ selectEntitlementPoolsEditorTab(dispatch, { tab }) {
+ dispatch({
+ type: featureGroupsActionConstants.featureGroupsEditor.SELECT_TAB,
+ tab
+ });
+ },
- openFeatureGroupsEditor(dispatch, {featureGroup, licenseModelId, version}) {
- return Promise.all([
- EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {licenseModelId, version}),
- LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version})
- ]).then(() => {
- dispatch({
- type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
- featureGroup
- });
- });
- },
+ openFeatureGroupsEditor(
+ dispatch,
+ { featureGroup, licenseModelId, version }
+ ) {
+ return Promise.all([
+ EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+ licenseModelId,
+ version
+ }),
+ LicenseKeyGroupsActionHelper.fetchLicenseKeyGroupsList(dispatch, {
+ licenseModelId,
+ version
+ })
+ ]).then(() => {
+ dispatch({
+ type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
+ featureGroup
+ });
+ });
+ },
- closeFeatureGroupsEditor(dispatch) {
- dispatch({
- type: featureGroupsActionConstants.featureGroupsEditor.CLOSE
- });
- }
+ closeFeatureGroupsEditor(dispatch) {
+ dispatch({
+ type: featureGroupsActionConstants.featureGroupsEditor.CLOSE
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
index 4c5a94f239..feeb5b6c39 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js
@@ -16,27 +16,27 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- FEATURE_GROUPS_LIST_LOADED: null,
- ADD_FEATURE_GROUPS: null,
- EDIT_FEATURE_GROUPS: null,
- DELETE_FEATURE_GROUPS: null,
+ FEATURE_GROUPS_LIST_LOADED: null,
+ ADD_FEATURE_GROUPS: null,
+ EDIT_FEATURE_GROUPS: null,
+ DELETE_FEATURE_GROUPS: null,
- ENTITLEMENT_POOLS_LIST_LOADED: null,
+ ENTITLEMENT_POOLS_LIST_LOADED: null,
- featureGroupsEditor: {
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
- SELECT_TAB: null
- }
+ featureGroupsEditor: {
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null,
+ SELECT_TAB: null
+ }
});
export const FG_EDITOR_FORM = 'FG_EDITOR_FORM';
export const state = keyMirror({
- SELECTED_FEATURE_GROUP_TAB: {
- GENERAL: 1,
- ENTITLEMENT_POOLS: 2,
- LICENSE_KEY_GROUPS: 3
- }
+ SELECTED_FEATURE_GROUP_TAB: {
+ GENERAL: 1,
+ ENTITLEMENT_POOLS: 2,
+ LICENSE_KEY_GROUPS: 3
+ }
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
index 5688fc0f16..aa1081ed20 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
@@ -14,65 +14,82 @@
* permissions and limitations under the License.
*/
-import {actionTypes, FG_EDITOR_FORM, state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js';
-
-
+import {
+ actionTypes,
+ FG_EDITOR_FORM,
+ state as FeatureGroupStateConstants
+} from './FeatureGroupsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.featureGroupsEditor.OPEN:
- return {
- ...state,
- data: action.featureGroup || {},
- formReady: null,
- formName: FG_EDITOR_FORM,
- genericFieldInfo: {
- 'description': {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}],
- tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
- },
- 'partNumber': {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}],
- tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
- },
- 'manufacturerReferenceNumber': {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 100}],
- tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
- },
- 'name': {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}],
- tabId: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
- }
- }
- };
- case actionTypes.featureGroupsEditor.CLOSE:
- return {};
- case actionTypes.featureGroupsEditor.SELECT_TAB:
- return {
- ...state,
- selectedTab: action.tab
- };
-
- case actionTypes.featureGroupsEditor.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB:
- return {
- ...state,
- selectedEntitlementPoolsButtonTab: action.buttonTab
- };
- case actionTypes.featureGroupsEditor.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB:
- return {
- ...state,
- selectedLicenseKeyGroupsButtonTab: action.buttonTab
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.featureGroupsEditor.OPEN:
+ return {
+ ...state,
+ data: action.featureGroup || {},
+ formReady: null,
+ formName: FG_EDITOR_FORM,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }],
+ tabId:
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ },
+ partNumber: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }],
+ tabId:
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ },
+ manufacturerReferenceNumber: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 100 }
+ ],
+ tabId:
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ],
+ tabId:
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ }
+ }
+ };
+ case actionTypes.featureGroupsEditor.CLOSE:
+ return {};
+ case actionTypes.featureGroupsEditor.SELECT_TAB:
+ return {
+ ...state,
+ selectedTab: action.tab
+ };
+ case actionTypes.featureGroupsEditor
+ .SELECTED_ENTITLEMENT_POOLS_BUTTONTAB:
+ return {
+ ...state,
+ selectedEntitlementPoolsButtonTab: action.buttonTab
+ };
+ case actionTypes.featureGroupsEditor
+ .SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB:
+ return {
+ ...state,
+ selectedLicenseKeyGroupsButtonTab: action.buttonTab
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
index 3b5f1c55e4..072bba403d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsListReducer.js
@@ -13,19 +13,27 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './FeatureGroupsConstants.js';
+import { actionTypes } from './FeatureGroupsConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FEATURE_GROUPS_LIST_LOADED:
- return [...action.response.results];
- case actionTypes.ADD_FEATURE_GROUPS:
- return [...state, action.featureGroup];
- case actionTypes.EDIT_FEATURE_GROUPS:
- const indexForEdit = state.findIndex(featureGroup => featureGroup.id === action.featureGroup.id);
- return [...state.slice(0, indexForEdit), action.featureGroup, ...state.slice(indexForEdit + 1)];
- case actionTypes.DELETE_FEATURE_GROUPS:
- return state.filter(featureGroup => featureGroup.id !== action.featureGroupId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FEATURE_GROUPS_LIST_LOADED:
+ return [...action.response.results];
+ case actionTypes.ADD_FEATURE_GROUPS:
+ return [...state, action.featureGroup];
+ case actionTypes.EDIT_FEATURE_GROUPS:
+ const indexForEdit = state.findIndex(
+ featureGroup => featureGroup.id === action.featureGroup.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.featureGroup,
+ ...state.slice(indexForEdit + 1)
+ ];
+ case actionTypes.DELETE_FEATURE_GROUPS:
+ return state.filter(
+ featureGroup => featureGroup.id !== action.featureGroupId
+ );
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
index b1b4ee8fdd..e07777f69e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
@@ -15,109 +15,181 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants.js';
+import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants.js';
import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
function baseUrl(licenseModelId, version) {
- const restPrefix = Configuration.get('restPrefix');
- const {id: versionId} = version;
- return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`;
+ const restPrefix = Configuration.get('restPrefix');
+ const { id: versionId } = version;
+ return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`;
}
function fetchLicenseAgreementList(licenseModelId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
}
function fetchLicenseAgreement(licenseModelId, licenseAgreementId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl(licenseModelId, version)}/${licenseAgreementId}`
+ );
}
function postLicenseAgreement(licenseModelId, licenseAgreement, version) {
- return RestAPIUtil.post(baseUrl(licenseModelId, version), {
- name: licenseAgreement.name,
- description: licenseAgreement.description,
- licenseTerm: licenseAgreement.licenseTerm,
- requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
- addedFeatureGroupsIds: licenseAgreement.featureGroupsIds
- });
+ return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+ name: licenseAgreement.name,
+ description: licenseAgreement.description,
+ licenseTerm: licenseAgreement.licenseTerm,
+ requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
+ addedFeatureGroupsIds: licenseAgreement.featureGroupsIds
+ });
}
-function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version) {
- const {featureGroupsIds = []} = licenseAgreement;
- const {featureGroupsIds: prevFeatureGroupsIds = []} = previousLicenseAgreement;
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`, {
- name: licenseAgreement.name,
- description: licenseAgreement.description,
- licenseTerm: licenseAgreement.licenseTerm,
- requirementsAndConstrains: licenseAgreement.requirementsAndConstrains,
- addedFeatureGroupsIds: featureGroupsIds.filter(featureGroupId => prevFeatureGroupsIds.indexOf(featureGroupId) === -1),
- removedFeatureGroupsIds: prevFeatureGroupsIds.filter(prevFeatureGroupsId => featureGroupsIds.indexOf(prevFeatureGroupsId) === -1)
- });
+function putLicenseAgreement(
+ licenseModelId,
+ previousLicenseAgreement,
+ licenseAgreement,
+ version
+) {
+ const { featureGroupsIds = [] } = licenseAgreement;
+ const {
+ featureGroupsIds: prevFeatureGroupsIds = []
+ } = previousLicenseAgreement;
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`,
+ {
+ name: licenseAgreement.name,
+ description: licenseAgreement.description,
+ licenseTerm: licenseAgreement.licenseTerm,
+ requirementsAndConstrains:
+ licenseAgreement.requirementsAndConstrains,
+ addedFeatureGroupsIds: featureGroupsIds.filter(
+ featureGroupId =>
+ prevFeatureGroupsIds.indexOf(featureGroupId) === -1
+ ),
+ removedFeatureGroupsIds: prevFeatureGroupsIds.filter(
+ prevFeatureGroupsId =>
+ featureGroupsIds.indexOf(prevFeatureGroupsId) === -1
+ )
+ }
+ );
}
function deleteLicenseAgreement(licenseModelId, licenseAgreementId, version) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(licenseModelId, version)}/${licenseAgreementId}`
+ );
}
export default {
+ fetchLicenseAgreementList(dispatch, { licenseModelId, version }) {
+ return fetchLicenseAgreementList(licenseModelId, version).then(
+ response =>
+ dispatch({
+ type:
+ licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
+ response
+ })
+ );
+ },
- fetchLicenseAgreementList(dispatch, {licenseModelId, version}) {
- return fetchLicenseAgreementList(licenseModelId, version).then(response => dispatch({
- type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
- response
- }));
- },
+ fetchLicenseAgreement(
+ dispatch,
+ { licenseModelId, licenseAgreementId, version }
+ ) {
+ return fetchLicenseAgreement(
+ licenseModelId,
+ licenseAgreementId,
+ version
+ );
+ },
- fetchLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) {
- return fetchLicenseAgreement(licenseModelId, licenseAgreementId, version);
- },
+ openLicenseAgreementEditor(
+ dispatch,
+ { licenseModelId, licenseAgreement, version }
+ ) {
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId,
+ version
+ });
+ dispatch({
+ type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
+ licenseAgreement
+ });
+ },
- openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}) {
- FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
- dispatch({
- type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
- licenseAgreement
- });
- },
+ closeLicenseAgreementEditor(dispatch) {
+ dispatch({
+ type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
+ });
+ },
- closeLicenseAgreementEditor(dispatch) {
- dispatch({
- type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
- });
- },
+ saveLicenseAgreement(
+ dispatch,
+ { licenseModelId, previousLicenseAgreement, licenseAgreement, version }
+ ) {
+ if (previousLicenseAgreement) {
+ return putLicenseAgreement(
+ licenseModelId,
+ previousLicenseAgreement,
+ licenseAgreement,
+ version
+ ).then(() => {
+ this.fetchLicenseAgreementList(dispatch, {
+ licenseModelId,
+ version
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ } else {
+ return postLicenseAgreement(
+ licenseModelId,
+ licenseAgreement,
+ version
+ ).then(() => {
+ this.fetchLicenseAgreementList(dispatch, {
+ licenseModelId,
+ version
+ });
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId,
+ version
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ }
+ },
+ deleteLicenseAgreement(
+ dispatch,
+ { licenseModelId, licenseAgreementId, version }
+ ) {
+ return deleteLicenseAgreement(
+ licenseModelId,
+ licenseAgreementId,
+ version
+ ).then(() => {
+ dispatch({
+ type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT,
+ licenseAgreementId
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ },
- saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version}) {
- if (previousLicenseAgreement) {
- return putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version).then(() => {
- this.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- else {
- return postLicenseAgreement(licenseModelId, licenseAgreement, version).then(() => {
- this.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
- FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- },
-
- deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) {
- return deleteLicenseAgreement(licenseModelId, licenseAgreementId, version).then(() => {
- dispatch({
- type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT,
- licenseAgreementId
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
-
- selectLicenseAgreementEditorTab(dispatch, {tab}) {
- dispatch({
- type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB,
- tab
- });
- }
+ selectLicenseAgreementEditorTab(dispatch, { tab }) {
+ dispatch({
+ type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_TAB,
+ tab
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
index 181171d4cd..65a45348ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
@@ -15,49 +15,54 @@
*/
import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+ other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
export const actionTypes = keyMirror({
- LICENSE_AGREEMENT_LIST_LOADED: null,
- DELETE_LICENSE_AGREEMENT: null,
-
- licenseAgreementEditor: {
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
- SELECT_TAB: null
- }
+ LICENSE_AGREEMENT_LIST_LOADED: null,
+ DELETE_LICENSE_AGREEMENT: null,
+ licenseAgreementEditor: {
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null,
+ SELECT_TAB: null
+ }
});
export const LA_EDITOR_FORM = 'LA_EDITOR_FORM';
export const enums = keyMirror({
- SELECTED_LICENSE_AGREEMENT_TAB: {
- GENERAL: 1,
- FEATURE_GROUPS: 2
- }
+ SELECTED_LICENSE_AGREEMENT_TAB: {
+ GENERAL: 1,
+ FEATURE_GROUPS: 2
+ }
});
export const defaultState = {
- LICENSE_AGREEMENT_EDITOR_DATA: {
- licenseTerm: {choice: '', other: ''}
- }
+ LICENSE_AGREEMENT_EDITOR_DATA: {
+ licenseTerm: { choice: '', other: '' }
+ }
};
export const optionsInputValues = {
- LICENSE_MODEL_TYPE: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Fixed_Term', title: 'Fixed Term'},
- {enum: 'Perpetual', title: 'Perpetual'},
- {enum: 'Unlimited', title: 'Unlimited'}
- ]
+ LICENSE_MODEL_TYPE: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Fixed_Term', title: 'Fixed Term' },
+ { enum: 'Perpetual', title: 'Perpetual' },
+ { enum: 'Unlimited', title: 'Unlimited' }
+ ]
};
-export const extractValue = (item) => {
- if (item === undefined) {
- return '';
- } //TODO fix it later
+export const extractValue = item => {
+ if (item === undefined) {
+ return '';
+ } //TODO fix it later
- return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+ return item
+ ? item.choice === optionInputOther.OTHER
+ ? item.other
+ : InputOptions.getTitleByName(optionsInputValues, item.choice)
+ : '';
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
index 7d70da6ea5..735531a175 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
@@ -13,66 +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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
import LicenseAgreementEditorView from './LicenseAgreementEditorView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-export const mapStateToProps = ({licenseModel: {licenseAgreement, featureGroup}}) => {
+export const mapStateToProps = ({
+ licenseModel: { licenseAgreement, featureGroup }
+}) => {
+ let {
+ data,
+ selectedTab,
+ genericFieldInfo,
+ formReady
+ } = licenseAgreement.licenseAgreementEditor;
+ const list = licenseAgreement.licenseAgreementList;
+ const LANames = {};
+ let previousData;
+ const licenseAgreementId = data ? data.id : null;
+ if (licenseAgreementId) {
+ previousData = licenseAgreement.licenseAgreementList.find(
+ licenseAgreement => licenseAgreement.id === licenseAgreementId
+ );
+ }
- let {data, selectedTab, genericFieldInfo, formReady} = licenseAgreement.licenseAgreementEditor;
- const list = licenseAgreement.licenseAgreementList;
- const LANames = {};
+ for (let i = 0; i < list.length; i++) {
+ LANames[list[i].name.toLowerCase()] = list[i].id;
+ }
- let previousData;
- const licenseAgreementId = data ? data.id : null;
- if(licenseAgreementId) {
- previousData = licenseAgreement.licenseAgreementList.find(licenseAgreement => licenseAgreement.id === licenseAgreementId);
- }
+ const { featureGroupsList = [] } = featureGroup;
- for (let i = 0; i < list.length; i++) {
- LANames[list[i].name.toLowerCase()] = list[i].id;
- }
+ let isFormValid = true;
+ let invalidTabs = [];
+ for (let field in genericFieldInfo) {
+ if (!genericFieldInfo[field].isValid) {
+ isFormValid = false;
+ let tabId = genericFieldInfo[field].tabId;
+ if (invalidTabs.indexOf(tabId) === -1) {
+ invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
+ }
+ }
+ }
- const {featureGroupsList = []} = featureGroup;
-
- let isFormValid = true;
- let invalidTabs = [];
- for (let field in genericFieldInfo) {
- if (!genericFieldInfo[field].isValid) {
- isFormValid = false;
- let tabId = genericFieldInfo[field].tabId;
- if (invalidTabs.indexOf(tabId) === -1) {
- invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
- }
- }
- }
-
- return {
- data,
- previousData,
- selectedTab,
- featureGroupsList,
- LANames,
- genericFieldInfo,
- isFormValid,
- formReady,
- invalidTabs
- };
+ return {
+ data,
+ previousData,
+ selectedTab,
+ featureGroupsList,
+ LANames,
+ genericFieldInfo,
+ isFormValid,
+ formReady,
+ invalidTabs
+ };
};
-export const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onTabSelect: tab => LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(dispatch, {tab}),
- onCancel: () => LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch),
- onSubmit: ({previousLicenseAgreement, licenseAgreement}) => {
- LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch);
- LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version});
- },
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
+export const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onTabSelect: tab =>
+ LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(
+ dispatch,
+ {
+ tab
+ }
+ ),
+ onCancel: () =>
+ LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch),
+ onSubmit: ({ previousLicenseAgreement, licenseAgreement }) => {
+ LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch);
+ LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {
+ licenseModelId,
+ previousLicenseAgreement,
+ licenseAgreement,
+ version
+ });
+ },
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseAgreementEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
index 9cff2792ff..0d3fb2a3b6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
@@ -13,53 +13,76 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, defaultState, LA_EDITOR_FORM, enums as LicenseAgreementEnums} from './LicenseAgreementConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+ actionTypes,
+ defaultState,
+ LA_EDITOR_FORM,
+ enums as LicenseAgreementEnums
+} from './LicenseAgreementConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.licenseAgreementEditor.OPEN:
- return {
- ...state,
- formReady: null,
- formName: LA_EDITOR_FORM,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}],
- tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
- },
- 'requirementsAndConstrains' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}],
- tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
- },
- 'licenseTerm' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}],
- tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}],
- tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
- }
- },
- data: action.licenseAgreement ? { ...action.licenseAgreement } : defaultState.LICENSE_AGREEMENT_EDITOR_DATA
- };
- case actionTypes.licenseAgreementEditor.CLOSE:
- return {};
- case actionTypes.licenseAgreementEditor.SELECT_TAB:
- return {
- ...state,
- selectedTab: action.tab
- };
- default:
- return state;
- }
-
+ switch (action.type) {
+ case actionTypes.licenseAgreementEditor.OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: LA_EDITOR_FORM,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }],
+ tabId:
+ LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+ .GENERAL
+ },
+ requirementsAndConstrains: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }],
+ tabId:
+ LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+ .GENERAL
+ },
+ licenseTerm: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ {
+ type: 'requiredChoiceWithOther',
+ data: optionInputOther.OTHER
+ }
+ ],
+ tabId:
+ LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+ .GENERAL
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 25 }
+ ],
+ tabId:
+ LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB
+ .GENERAL
+ }
+ },
+ data: action.licenseAgreement
+ ? { ...action.licenseAgreement }
+ : defaultState.LICENSE_AGREEMENT_EDITOR_DATA
+ };
+ case actionTypes.licenseAgreementEditor.CLOSE:
+ return {};
+ case actionTypes.licenseAgreementEditor.SELECT_TAB:
+ return {
+ ...state,
+ selectedTab: action.tab
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
index a3e73f4f14..cc16dd996d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
@@ -17,7 +17,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
import Tab from 'sdc-ui/lib/react/Tab.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -25,176 +25,278 @@ import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Validator from 'nfvo-utils/Validator.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
-import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js';
+import {
+ enums as LicenseAgreementEnums,
+ optionsInputValues as LicenseAgreementOptionsInputValues,
+ LA_EDITOR_FORM
+} from './LicenseAgreementConstants.js';
const dualBoxFilterTitle = {
- left: i18n('Available Feature Groups'),
- right: i18n('Selected Feature Groups')
+ left: i18n('Available Feature Groups'),
+ right: i18n('Selected Feature Groups')
};
const LicenseAgreementPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- requirementsAndConstrains: PropTypes.string,
- licenseTerm: PropTypes.object,
- featureGroupsIds: PropTypes.arrayOf(PropTypes.string),
- version: PropTypes.object
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ requirementsAndConstrains: PropTypes.string,
+ licenseTerm: PropTypes.object,
+ featureGroupsIds: PropTypes.arrayOf(PropTypes.string),
+ version: PropTypes.object
});
-
-const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName}) => {
- let {name, description, requirementsAndConstrains, licenseTerm} = data;
- return (
- <GridSection hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText}
- onChange={name => onDataChanged({name}, LA_EDITOR_FORM, { name: validateName })}
- label={i18n('Name')}
- value={name}
- data-test-id='create-la-name'
- name='license-agreement-name'
- isRequired={true}
- type='text'/>
- <Input
- isValid={genericFieldInfo.requirementsAndConstrains.isValid}
- errorText={genericFieldInfo.requirementsAndConstrains.errorText}
- onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains}, LA_EDITOR_FORM)}
- label={i18n('Requirements and Constraints')}
- value={requirementsAndConstrains}
- data-test-id='create-la-requirements-constants'
- name='license-agreement-requirements-and-constraints'
- type='textarea'/>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={false}
- onEnumChange={licenseTerm => onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}},
- LA_EDITOR_FORM)}
- onOtherChange={licenseTerm => onDataChanged({licenseTerm:{choice: optionInputOther.OTHER,
- other: licenseTerm}}, LA_EDITOR_FORM)}
- label={i18n('License Term')}
- data-test-id='create-la-license-term'
- isRequired={true}
- type='select'
- selectedEnum={licenseTerm && licenseTerm.choice}
- otherValue={licenseTerm && licenseTerm.other}
- values={LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE}
- isValid={genericFieldInfo.licenseTerm.isValid}
- errorText={genericFieldInfo.licenseTerm.errorText} />
- </GridItem>
- <GridItem colSpan={2} stretch lastColInRow>
- <Input
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- onChange={description => onDataChanged({description}, LA_EDITOR_FORM)}
- label={i18n('Description')}
- value={description}
- overlayPos='bottom'
- data-test-id='create-la-description'
- name='license-agreement-description'
- type='textarea'/>
- </GridItem>
- </GridSection>
- );
+const GeneralTabContent = ({
+ data,
+ genericFieldInfo,
+ onDataChanged,
+ validateName
+}) => {
+ let { name, description, requirementsAndConstrains, licenseTerm } = data;
+ return (
+ <GridSection hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ isValid={genericFieldInfo.name.isValid}
+ errorText={genericFieldInfo.name.errorText}
+ onChange={name =>
+ onDataChanged({ name }, LA_EDITOR_FORM, {
+ name: validateName
+ })
+ }
+ label={i18n('Name')}
+ value={name}
+ data-test-id="create-la-name"
+ name="license-agreement-name"
+ isRequired={true}
+ type="text"
+ />
+ <Input
+ isValid={genericFieldInfo.requirementsAndConstrains.isValid}
+ errorText={
+ genericFieldInfo.requirementsAndConstrains.errorText
+ }
+ onChange={requirementsAndConstrains =>
+ onDataChanged(
+ { requirementsAndConstrains },
+ LA_EDITOR_FORM
+ )
+ }
+ label={i18n('Requirements and Constraints')}
+ value={requirementsAndConstrains}
+ data-test-id="create-la-requirements-constants"
+ name="license-agreement-requirements-and-constraints"
+ type="textarea"
+ />
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={false}
+ onEnumChange={licenseTerm =>
+ onDataChanged(
+ { licenseTerm: { choice: licenseTerm, other: '' } },
+ LA_EDITOR_FORM
+ )
+ }
+ onOtherChange={licenseTerm =>
+ onDataChanged(
+ {
+ licenseTerm: {
+ choice: optionInputOther.OTHER,
+ other: licenseTerm
+ }
+ },
+ LA_EDITOR_FORM
+ )
+ }
+ label={i18n('License Term')}
+ data-test-id="create-la-license-term"
+ isRequired={true}
+ type="select"
+ selectedEnum={licenseTerm && licenseTerm.choice}
+ otherValue={licenseTerm && licenseTerm.other}
+ values={
+ LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE
+ }
+ isValid={genericFieldInfo.licenseTerm.isValid}
+ errorText={genericFieldInfo.licenseTerm.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2} stretch lastColInRow>
+ <Input
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ onChange={description =>
+ onDataChanged({ description }, LA_EDITOR_FORM)
+ }
+ label={i18n('Description')}
+ value={description}
+ overlayPos="bottom"
+ data-test-id="create-la-description"
+ name="license-agreement-description"
+ type="textarea"
+ />
+ </GridItem>
+ </GridSection>
+ );
};
class LicenseAgreementEditorView extends React.Component {
+ static propTypes = {
+ data: LicenseAgreementPropType,
+ previousData: LicenseAgreementPropType,
+ LANames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
- static propTypes = {
- data: LicenseAgreementPropType,
- previousData: LicenseAgreementPropType,
- LANames: PropTypes.object,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired,
-
- selectedTab: PropTypes.number,
- onTabSelect: PropTypes.func,
+ selectedTab: PropTypes.number,
+ onTabSelect: PropTypes.func,
- selectedFeatureGroupsButtonTab: PropTypes.number,
- onFeatureGroupsButtonTabSelect: PropTypes.func,
- featureGroupsList: DualListboxView.propTypes.availableList
- };
+ selectedFeatureGroupsButtonTab: PropTypes.number,
+ onFeatureGroupsButtonTabSelect: PropTypes.func,
+ featureGroupsList: DualListboxView.propTypes.availableList
+ };
- static defaultProps = {
- selectedTab: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
- data: {}
- };
+ static defaultProps = {
+ selectedTab:
+ LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
+ data: {}
+ };
- state = {
- localFeatureGroupsListFilter: ''
- };
+ state = {
+ localFeatureGroupsListFilter: ''
+ };
- render() {
- let {selectedTab, onTabSelect, isReadOnlyMode, featureGroupsList, data, onDataChanged, genericFieldInfo} = this.props;
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => this.submit() }
- onReset={ () => this.props.onCancel() }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(LA_EDITOR_FORM) }
- className='license-model-form license-agreement-form'>
- <Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={this.props.invalidTabs} >
- <Tab
- tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL}
- data-test-id='general-tab'
- title={i18n('General')}>
- <fieldset disabled={isReadOnlyMode}>
- <GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)}
- validateName={(value)=>this.validateName(value)}/>
- </fieldset>
- </Tab>
- <Tab
- tabId={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
- data-test-id='feature-group-tab'
- title={i18n('Feature Groups')}>
- <fieldset disabled={isReadOnlyMode}>
- {featureGroupsList.length > 0 ?
- <DualListboxView
- isReadOnlyMode={isReadOnlyMode}
- filterTitle={dualBoxFilterTitle}
- selectedValuesList={data.featureGroupsIds}
- availableList={featureGroupsList}
- onChange={ selectedValuesList => onDataChanged( { featureGroupsIds: selectedValuesList }, LA_EDITOR_FORM )}/> :
- <p>{i18n('There are no available feature groups')}</p>}
- </fieldset>
- </Tab>
- </Tabs>
- </Form>}
- </div>
- );
- }
+ render() {
+ let {
+ selectedTab,
+ onTabSelect,
+ isReadOnlyMode,
+ featureGroupsList,
+ data,
+ onDataChanged,
+ genericFieldInfo
+ } = this.props;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ onReset={() => this.props.onCancel()}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(LA_EDITOR_FORM)
+ }
+ className="license-model-form license-agreement-form">
+ <Tabs
+ activeTab={onTabSelect ? selectedTab : undefined}
+ onTabClick={onTabSelect}
+ invalidTabs={this.props.invalidTabs}>
+ <Tab
+ tabId={
+ LicenseAgreementEnums
+ .SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+ }
+ data-test-id="general-tab"
+ title={i18n('General')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <GeneralTabContent
+ data={data}
+ genericFieldInfo={genericFieldInfo}
+ onDataChanged={onDataChanged}
+ validateLTChoice={value =>
+ this.validateLTChoice(value)
+ }
+ validateName={value =>
+ this.validateName(value)
+ }
+ />
+ </fieldset>
+ </Tab>
+ <Tab
+ tabId={
+ LicenseAgreementEnums
+ .SELECTED_LICENSE_AGREEMENT_TAB
+ .FEATURE_GROUPS
+ }
+ data-test-id="feature-group-tab"
+ title={i18n('Feature Groups')}>
+ <fieldset disabled={isReadOnlyMode}>
+ {featureGroupsList.length > 0 ? (
+ <DualListboxView
+ isReadOnlyMode={isReadOnlyMode}
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={
+ data.featureGroupsIds
+ }
+ availableList={featureGroupsList}
+ onChange={selectedValuesList =>
+ onDataChanged(
+ {
+ featureGroupsIds: selectedValuesList
+ },
+ LA_EDITOR_FORM
+ )
+ }
+ />
+ ) : (
+ <p>
+ {i18n(
+ 'There are no available feature groups'
+ )}
+ </p>
+ )}
+ </fieldset>
+ </Tab>
+ </Tabs>
+ </Form>
+ )}
+ </div>
+ );
+ }
- submit() {
- const {data: licenseAgreement, previousData: previousLicenseAgreement} = this.props;
- this.props.onSubmit({licenseAgreement, previousLicenseAgreement});
- }
+ submit() {
+ const {
+ data: licenseAgreement,
+ previousData: previousLicenseAgreement
+ } = this.props;
+ this.props.onSubmit({ licenseAgreement, previousLicenseAgreement });
+ }
- validateLTChoice(value) {
- if (!value.choice) {
- return {isValid: false, errorText: i18n('Field is required')};
- }
- return {isValid: true, errorText: ''};
- }
+ validateLTChoice(value) {
+ if (!value.choice) {
+ return { isValid: false, errorText: i18n('Field is required') };
+ }
+ return { isValid: true, errorText: '' };
+ }
- validateName(value) {
- const {data: {id}, LANames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LANames});
+ validateName(value) {
+ const { data: { id }, LANames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: LANames
+ });
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('License Agreement by the name \'' + value + '\' already exists. License agreement name must be unique')};
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "License Agreement by the name '" +
+ value +
+ "' already exists. License agreement name must be unique"
+ )
+ };
+ }
}
export default LicenseAgreementEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
index 72474ecdd3..cba39731b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
@@ -13,42 +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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
import LicenseAgreementListEditorView from './LicenseAgreementListEditorView.jsx';
-import {actionTypes as globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
-const mapStateToProps = ({licenseModel: {licenseAgreement, licenseModelEditor}}) => {
-
- let {licenseAgreementList} = licenseAgreement;
- let {data} = licenseAgreement.licenseAgreementEditor;
- let {vendorName, version} = licenseModelEditor.data;
-
- return {
- vendorName,
- version,
- licenseAgreementList,
- isDisplayModal: Boolean(data),
- isModalInEditMode: Boolean(data && data.id)
- };
+const mapStateToProps = ({
+ licenseModel: { licenseAgreement, licenseModelEditor }
+}) => {
+ let { licenseAgreementList } = licenseAgreement;
+ let { data } = licenseAgreement.licenseAgreementEditor;
+ let { vendorName, version } = licenseModelEditor.data;
+ return {
+ vendorName,
+ version,
+ licenseAgreementList,
+ isDisplayModal: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
- return {
- onAddLicenseAgreementClick: (version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version}),
- onEditLicenseAgreementClick: (licenseAgreement, version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}),
- onDeleteLicenseAgreement: (licenseAgreement, version) => dispatch({
- type: globalMoadlActions.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete "{name}"?', {name: licenseAgreement.name}),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=>LicenseAgreementActionHelper.deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId: licenseAgreement.id, version})
- }
- })
- };
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+ return {
+ onAddLicenseAgreementClick: version =>
+ LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
+ licenseModelId,
+ version
+ }),
+ onEditLicenseAgreementClick: (licenseAgreement, version) =>
+ LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
+ licenseModelId,
+ licenseAgreement,
+ version
+ }),
+ onDeleteLicenseAgreement: (licenseAgreement, version) =>
+ dispatch({
+ type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete "{name}"?', {
+ name: licenseAgreement.name
+ }),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ LicenseAgreementActionHelper.deleteLicenseAgreement(
+ dispatch,
+ {
+ licenseModelId,
+ licenseAgreementId: licenseAgreement.id,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseAgreementListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseAgreementListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
index ad3cdb0b58..acec1e0ddb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
@@ -21,107 +21,151 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import LicenseAgreementEditor from './LicenseAgreementEditor.js';
-import {extractValue} from './LicenseAgreementConstants';
+import { extractValue } from './LicenseAgreementConstants';
class LicenseAgreementListEditorView extends React.Component {
- static propTypes = {
- vendorName: PropTypes.string,
- licenseModelId: PropTypes.string.isRequired,
- licenseAgreementList: PropTypes.array,
- isReadOnlyMode: PropTypes.bool.isRequired,
- isDisplayModal: PropTypes.bool,
- isModalInEditMode: PropTypes.bool,
- onAddLicenseAgreementClick: PropTypes.func,
- onEditLicenseAgreementClick: PropTypes.func,
- onDeleteLicenseAgreement: PropTypes.func,
- };
+ static propTypes = {
+ vendorName: PropTypes.string,
+ licenseModelId: PropTypes.string.isRequired,
+ licenseAgreementList: PropTypes.array,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ onAddLicenseAgreementClick: PropTypes.func,
+ onEditLicenseAgreementClick: PropTypes.func,
+ onDeleteLicenseAgreement: PropTypes.func
+ };
- static defaultProps = {
- licenseAgreementList: []
- };
+ static defaultProps = {
+ licenseAgreementList: []
+ };
- state = {
- localFilter: ''
- };
+ state = {
+ localFilter: ''
+ };
- render() {
- const {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
- const {onAddLicenseAgreementClick} = this.props;
- const {localFilter} = this.state;
+ render() {
+ const {
+ licenseModelId,
+ isReadOnlyMode,
+ isDisplayModal,
+ isModalInEditMode,
+ version
+ } = this.props;
+ const { onAddLicenseAgreementClick } = this.props;
+ const { localFilter } = this.state;
- return (
- <div className='license-model-list-editor license-agreement-list-editor'>
- <ListEditorView
- title={i18n('License Agreements')}
- plusButtonTitle={i18n('Add License Agreement')}
- onAdd={() => onAddLicenseAgreementClick(version)}
- filterValue={localFilter}
- onFilter={value => this.setState({localFilter: value})}
- isReadOnlyMode={isReadOnlyMode}>
- {this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version))}
- </ListEditorView>
- <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-agreement-modal'>
- <Modal.Header>
- <Modal.Title>{`${isModalInEditMode ? i18n('Edit License Agreement') : i18n('Create New License Agreement')}`}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {
- isDisplayModal && (
- <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} />
- )
- }
- </Modal.Body>
- </Modal>
- </div>
- );
- }
+ return (
+ <div className="license-model-list-editor license-agreement-list-editor">
+ <ListEditorView
+ title={i18n('License Agreements')}
+ plusButtonTitle={i18n('Add License Agreement')}
+ onAdd={() => onAddLicenseAgreementClick(version)}
+ filterValue={localFilter}
+ onFilter={value => this.setState({ localFilter: value })}
+ isReadOnlyMode={isReadOnlyMode}>
+ {this.filterList().map(licenseAgreement =>
+ this.renderLicenseAgreementListItem(
+ licenseAgreement,
+ isReadOnlyMode,
+ version
+ )
+ )}
+ </ListEditorView>
+ <Modal
+ show={isDisplayModal}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal license-model-modal license-agreement-modal">
+ <Modal.Header>
+ <Modal.Title>{`${
+ isModalInEditMode
+ ? i18n('Edit License Agreement')
+ : i18n('Create New License Agreement')
+ }`}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {isDisplayModal && (
+ <LicenseAgreementEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Modal.Body>
+ </Modal>
+ </div>
+ );
+ }
- filterList() {
- let {licenseAgreementList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return licenseAgreementList.filter(({name = '', description = '', licenseTerm = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter) || escape(extractValue(licenseTerm)).match(filter);
- });
- }
- else {
- return licenseAgreementList;
- }
- }
+ filterList() {
+ let { licenseAgreementList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return licenseAgreementList.filter(
+ ({ name = '', description = '', licenseTerm = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter) ||
+ escape(extractValue(licenseTerm)).match(filter)
+ );
+ }
+ );
+ } else {
+ return licenseAgreementList;
+ }
+ }
- renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
- let {id, name, description, licenseTerm, featureGroupsIds = []} = licenseAgreement;
- let {onEditLicenseAgreementClick, onDeleteLicenseAgreement} = this.props;
- return (
- <ListEditorItemView
- key={id}
- onSelect={() => onEditLicenseAgreementClick(licenseAgreement, version)}
- onDelete={() => onDeleteLicenseAgreement(licenseAgreement, version)}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='text name'>{name}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='list-editor-item-view-field-tight'>
- <div className='title'>{i18n('Type')}</div>
- <div className='text type'>{extractValue(licenseTerm)}</div>
- </div>
- <div className='list-editor-item-view-field-tight'>
- <div className='title'>{i18n('Feature')}</div>
- <div className='title'>{i18n('Groups')}</div>
- <div className='feature-groups-count'>{featureGroupsIds.length}</div>
- </div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
+ renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
+ let {
+ id,
+ name,
+ description,
+ licenseTerm,
+ featureGroupsIds = []
+ } = licenseAgreement;
+ let {
+ onEditLicenseAgreementClick,
+ onDeleteLicenseAgreement
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ onSelect={() =>
+ onEditLicenseAgreementClick(licenseAgreement, version)
+ }
+ onDelete={() =>
+ onDeleteLicenseAgreement(licenseAgreement, version)
+ }
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="text name">{name}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="list-editor-item-view-field-tight">
+ <div className="title">{i18n('Type')}</div>
+ <div className="text type">
+ {extractValue(licenseTerm)}
+ </div>
+ </div>
+ <div className="list-editor-item-view-field-tight">
+ <div className="title">{i18n('Feature')}</div>
+ <div className="title">{i18n('Groups')}</div>
+ <div className="feature-groups-count">
+ {featureGroupsIds.length}
+ </div>
+ </div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
}
export default LicenseAgreementListEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
index 7d1a5ef8ee..213a63d565 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
@@ -13,15 +13,18 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants';
+import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants';
export default (state = [], action) => {
- switch (action.type) {
- case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED:
- return [...action.response.results];
- case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT:
- return state.filter(licenseAgreement => licenseAgreement.id !== action.licenseAgreementId);
- default:
- return state;
- }
+ switch (action.type) {
+ case licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED:
+ return [...action.response.results];
+ case licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT:
+ return state.filter(
+ licenseAgreement =>
+ licenseAgreement.id !== action.licenseAgreementId
+ );
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index 674c329515..ebbe84abd3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -15,191 +15,268 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js';
-import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
+import { actionTypes as licenseKeyGroupsConstants } from './LicenseKeyGroupsConstants.js';
+import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
+import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
function baseUrl(licenseModelId, version) {
- const restPrefix = Configuration.get('restPrefix');
- const {id: versionId} = version;
- return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
+ const restPrefix = Configuration.get('restPrefix');
+ const { id: versionId } = version;
+ return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-key-groups`;
}
function fetchLicenseKeyGroupsList(licenseModelId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
}
function deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}`
+ );
}
function postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
- return RestAPIUtil.post(baseUrl(licenseModelId, version), {
- name: licenseKeyGroup.name,
- description: licenseKeyGroup.description,
- operationalScope: getValue(licenseKeyGroup.operationalScope),
- type: licenseKeyGroup.type,
- increments: licenseKeyGroup.increments,
- thresholdValue: licenseKeyGroup.thresholdValue,
- thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
- startDate: licenseKeyGroup.startDate,
- expiryDate: licenseKeyGroup.expiryDate
- });
+ return RestAPIUtil.post(baseUrl(licenseModelId, version), {
+ name: licenseKeyGroup.name,
+ description: licenseKeyGroup.description,
+ operationalScope: getValue(licenseKeyGroup.operationalScope),
+ type: licenseKeyGroup.type,
+ increments: licenseKeyGroup.increments,
+ thresholdValue: licenseKeyGroup.thresholdValue,
+ thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+ startDate: licenseKeyGroup.startDate,
+ expiryDate: licenseKeyGroup.expiryDate
+ });
}
function putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`, {
- name: licenseKeyGroup.name,
- description: licenseKeyGroup.description,
- operationalScope: getValue(licenseKeyGroup.operationalScope),
- type: licenseKeyGroup.type,
- increments: licenseKeyGroup.increments,
- thresholdValue: licenseKeyGroup.thresholdValue,
- thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
- startDate: licenseKeyGroup.startDate,
- expiryDate: licenseKeyGroup.expiryDate
- });
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${licenseKeyGroup.id}`,
+ {
+ name: licenseKeyGroup.name,
+ description: licenseKeyGroup.description,
+ operationalScope: getValue(licenseKeyGroup.operationalScope),
+ type: licenseKeyGroup.type,
+ increments: licenseKeyGroup.increments,
+ thresholdValue: licenseKeyGroup.thresholdValue,
+ thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
+ startDate: licenseKeyGroup.startDate,
+ expiryDate: licenseKeyGroup.expiryDate
+ }
+ );
}
function fetchLimitsList(licenseModelId, licenseKeyGroupId, version) {
- return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`);
+ return RestAPIUtil.fetch(
+ `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`
+ );
}
function deleteLimit(licenseModelId, licenseKeyGroupId, version, limitId) {
- return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limitId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(
+ licenseModelId,
+ version
+ )}/${licenseKeyGroupId}/limits/${limitId}`
+ );
}
function postLimit(licenseModelId, licenseKeyGroupId, version, limit) {
- return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`, {
- name: limit.name,
- type: limit.type,
- description: limit.description,
- metric: getStrValue(limit.metric),
- value: limit.value,
- unit: getStrValue(limit.unit),
- aggregationFunction: getValue(limit.aggregationFunction),
- time: getValue(limit.time)
- });
+ return RestAPIUtil.post(
+ `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits`,
+ {
+ name: limit.name,
+ type: limit.type,
+ description: limit.description,
+ metric: getStrValue(limit.metric),
+ value: limit.value,
+ unit: getStrValue(limit.unit),
+ aggregationFunction: getValue(limit.aggregationFunction),
+ time: getValue(limit.time)
+ }
+ );
}
function putLimit(licenseModelId, licenseKeyGroupId, version, limit) {
-
- return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${limit.id}`, {
- name: limit.name,
- type: limit.type,
- description: limit.description,
- metric: getStrValue(limit.metric),
- value: limit.value,
- unit: getStrValue(limit.unit),
- aggregationFunction: getValue(limit.aggregationFunction),
- time: getValue(limit.time)
- });
+ return RestAPIUtil.put(
+ `${baseUrl(licenseModelId, version)}/${licenseKeyGroupId}/limits/${
+ limit.id
+ }`,
+ {
+ name: limit.name,
+ type: limit.type,
+ description: limit.description,
+ metric: getStrValue(limit.metric),
+ value: limit.value,
+ unit: getStrValue(limit.unit),
+ aggregationFunction: getValue(limit.aggregationFunction),
+ time: getValue(limit.time)
+ }
+ );
}
export default {
- fetchLicenseKeyGroupsList(dispatch, {licenseModelId, version}) {
- return fetchLicenseKeyGroupsList(licenseModelId, version).then(response => dispatch({
- type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
- response
- }));
- },
-
- openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version} = {}) {
- if (licenseModelId && version) {
- this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
- }
- dispatch({
- type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
- licenseKeyGroup
- });
- },
-
- closeLicenseKeyGroupEditor(dispatch){
- dispatch({
- type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
- });
- },
-
- saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version}) {
- if (previousLicenseKeyGroup) {
- return putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(() => {
- dispatch({
- type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
- licenseKeyGroup
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
- else {
- return postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version).then(response => {
- dispatch({
- type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
- licenseKeyGroup: {
- ...licenseKeyGroup,
- referencingFeatureGroups: [],
- id: response.value
- }
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
-
-
- },
-
- deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId, version}){
- return deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version).then(()=> {
- dispatch({
- type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
- licenseKeyGroupId
- });
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
-
- hideDeleteConfirm(dispatch) {
- dispatch({
- type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
- licenseKeyGroupToDelete: false
- });
- },
-
- openDeleteLicenseAgreementConfirm(dispatch, {licenseKeyGroup}) {
- dispatch({
- type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
- licenseKeyGroupToDelete: licenseKeyGroup
- });
- },
-
-
- fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}) {
- return fetchLimitsList(licenseModelId, licenseKeyGroup.id, version).then(response => {
- dispatch({
- type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED,
- response
- });
- });
- },
-
- submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
- const promise = limit.id ? putLimit(licenseModelId,licenseKeyGroup.id, version, limit) :
- postLimit(licenseModelId,licenseKeyGroup.id, version, limit);
- return promise.then(() => {
- dispatch({
- type: limitEditorActions.CLOSE
- });
- this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- },
-
- deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
- return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => {
- this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
- return ItemsHelper.checkItemStatus(dispatch, {itemId: licenseModelId, versionId: version.id});
- });
- }
+ fetchLicenseKeyGroupsList(dispatch, { licenseModelId, version }) {
+ return fetchLicenseKeyGroupsList(licenseModelId, version).then(
+ response =>
+ dispatch({
+ type:
+ licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_LIST_LOADED,
+ response
+ })
+ );
+ },
+
+ openLicenseKeyGroupsEditor(
+ dispatch,
+ { licenseKeyGroup, licenseModelId, version } = {}
+ ) {
+ if (licenseModelId && version) {
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ licenseKeyGroup
+ });
+ }
+ dispatch({
+ type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
+ licenseKeyGroup
+ });
+ },
+
+ closeLicenseKeyGroupEditor(dispatch) {
+ dispatch({
+ type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
+ });
+ },
+
+ saveLicenseKeyGroup(
+ dispatch,
+ { licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version }
+ ) {
+ if (previousLicenseKeyGroup) {
+ return putLicenseKeyGroup(
+ licenseModelId,
+ licenseKeyGroup,
+ version
+ ).then(() => {
+ dispatch({
+ type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
+ licenseKeyGroup
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ } else {
+ return postLicenseKeyGroup(
+ licenseModelId,
+ licenseKeyGroup,
+ version
+ ).then(response => {
+ dispatch({
+ type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
+ licenseKeyGroup: {
+ ...licenseKeyGroup,
+ referencingFeatureGroups: [],
+ id: response.value
+ }
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ }
+ },
+
+ deleteLicenseKeyGroup(
+ dispatch,
+ { licenseModelId, licenseKeyGroupId, version }
+ ) {
+ return deleteLicenseKeyGroup(
+ licenseModelId,
+ licenseKeyGroupId,
+ version
+ ).then(() => {
+ dispatch({
+ type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
+ licenseKeyGroupId
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ },
+
+ hideDeleteConfirm(dispatch) {
+ dispatch({
+ type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+ licenseKeyGroupToDelete: false
+ });
+ },
+
+ openDeleteLicenseAgreementConfirm(dispatch, { licenseKeyGroup }) {
+ dispatch({
+ type: licenseKeyGroupsConstants.LICENSE_KEY_GROUPS_DELETE_CONFIRM,
+ licenseKeyGroupToDelete: licenseKeyGroup
+ });
+ },
+
+ fetchLimits(dispatch, { licenseModelId, version, licenseKeyGroup }) {
+ return fetchLimitsList(
+ licenseModelId,
+ licenseKeyGroup.id,
+ version
+ ).then(response => {
+ dispatch({
+ type:
+ licenseKeyGroupsConstants.licenseKeyGroupsEditor
+ .LIMITS_LIST_LOADED,
+ response
+ });
+ });
+ },
+ submitLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+ const promise = limit.id
+ ? putLimit(licenseModelId, licenseKeyGroup.id, version, limit)
+ : postLimit(licenseModelId, licenseKeyGroup.id, version, limit);
+ return promise.then(() => {
+ dispatch({
+ type: limitEditorActions.CLOSE
+ });
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ licenseKeyGroup
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ },
+ deleteLimit(dispatch, { licenseModelId, version, licenseKeyGroup, limit }) {
+ return deleteLimit(
+ licenseModelId,
+ licenseKeyGroup.id,
+ version,
+ limit.id
+ ).then(() => {
+ this.fetchLimits(dispatch, {
+ licenseModelId,
+ version,
+ licenseKeyGroup
+ });
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: licenseModelId,
+ versionId: version.id
+ });
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
index c376cb3fbc..aad0a0b1fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
@@ -15,73 +15,88 @@
*/
import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import InputOptions, {
+ other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
export const actionTypes = keyMirror({
-
- LICENSE_KEY_GROUPS_LIST_LOADED: null,
- DELETE_LICENSE_KEY_GROUP: null,
- EDIT_LICENSE_KEY_GROUP: null,
- ADD_LICENSE_KEY_GROUP: null,
- LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
- licenseKeyGroupsEditor: {
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
- LIMITS_LIST_LOADED: null
- }
+ LICENSE_KEY_GROUPS_LIST_LOADED: null,
+ DELETE_LICENSE_KEY_GROUP: null,
+ EDIT_LICENSE_KEY_GROUP: null,
+ ADD_LICENSE_KEY_GROUP: null,
+ LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
+ licenseKeyGroupsEditor: {
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null,
+ LIMITS_LIST_LOADED: null
+ }
});
export const defaultState = {
- licenseKeyGroupsEditor: {
- type: '',
- operationalScope: {choices: [], other: ''}
- }
+ licenseKeyGroupsEditor: {
+ type: '',
+ operationalScope: { choices: [], other: '' }
+ }
};
export const LKG_FORM_NAME = 'LKGFORM';
export const optionsInputValues = {
- OPERATIONAL_SCOPE: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Network_Wide', title: 'Network Wide'},
- {enum: 'Availability_Zone', title: 'Availability Zone'},
- {enum: 'Data_Center', title: 'Data Center'},
- {enum: 'Tenant', title: 'Tenant'},
- {enum: 'VM', title: 'VM'},
- {enum: 'CPU', title: 'CPU'},
- {enum: 'Core', title: 'Core'}
- ],
- TYPE: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Universal', title: 'Universal'},
- {enum: 'Unique', title: 'Unique'},
- {enum: 'One_Time', title: 'One Time'}
- ]
+ OPERATIONAL_SCOPE: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Network_Wide', title: 'Network Wide' },
+ { enum: 'Availability_Zone', title: 'Availability Zone' },
+ { enum: 'Data_Center', title: 'Data Center' },
+ { enum: 'Tenant', title: 'Tenant' },
+ { enum: 'VM', title: 'VM' },
+ { enum: 'CPU', title: 'CPU' },
+ { enum: 'Core', title: 'Core' }
+ ],
+ TYPE: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Universal', title: 'Universal' },
+ { enum: 'Unique', title: 'Unique' },
+ { enum: 'One_Time', title: 'One Time' }
+ ]
};
-export const extractValue = (item) => {
- if (item === undefined) {return '';} //TODO fix it later
+export const extractValue = item => {
+ if (item === undefined) {
+ return '';
+ } //TODO fix it later
- return item ? item === optionInputOther.OTHER ? item : InputOptions.getTitleByName(optionsInputValues, item) : '';
+ return item
+ ? item === optionInputOther.OTHER
+ ? item
+ : InputOptions.getTitleByName(optionsInputValues, item)
+ : '';
};
-export const getOperationalScopes = (operationalScope) => {
- if(operationalScope.choices.toString() === i18n(optionInputOther.OTHER) && operationalScope.other !== '') {
- return operationalScope.other;
- }
- else {
- let allOpScopes = '';
- for (let opScope of operationalScope.choices) {
- allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
- }
- return allOpScopes;
- }
+export const getOperationalScopes = operationalScope => {
+ if (
+ operationalScope.choices.toString() === i18n(optionInputOther.OTHER) &&
+ operationalScope.other !== ''
+ ) {
+ return operationalScope.other;
+ } else {
+ let allOpScopes = '';
+ for (let opScope of operationalScope.choices) {
+ allOpScopes +=
+ allOpScopes === ''
+ ? InputOptions.getTitleByName(optionsInputValues, opScope)
+ : `, ${InputOptions.getTitleByName(
+ optionsInputValues,
+ opScope
+ )}`;
+ }
+ return allOpScopes;
+ }
};
export const tabIds = {
- GENERAL: 'GENERAL',
- SP_LIMITS: 'SP_LIMITS',
- VENDOR_LIMITS: 'VENDOR_LIMITS',
- ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
+ GENERAL: 'GENERAL',
+ SP_LIMITS: 'SP_LIMITS',
+ VENDOR_LIMITS: 'VENDOR_LIMITS',
+ ADD_LIMIT_BUTTON: 'ADD_LIMIT_BUTTON'
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
index 028fa9d3e4..fa62bba669 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor.js
@@ -13,53 +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 LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
import LicenseKeyGroupsEditorView from './LicenseKeyGroupsEditorView.jsx';
import LimitEditorActionHelper from '../limits/LimitEditorActionHelper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-const mapStateToProps = ({licenseModel: {licenseKeyGroup}}) => {
+const mapStateToProps = ({ licenseModel: { licenseKeyGroup } }) => {
+ let {
+ data,
+ genericFieldInfo,
+ formReady,
+ limitsList
+ } = licenseKeyGroup.licenseKeyGroupsEditor;
+ let previousData,
+ LKGNames = {};
+ const licenseKeyGroupId = data ? data.id : null;
+ if (licenseKeyGroupId) {
+ previousData = licenseKeyGroup.licenseKeyGroupsList.find(
+ licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId
+ );
+ }
- let {data, genericFieldInfo, formReady, limitsList} = licenseKeyGroup.licenseKeyGroupsEditor;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let previousData, LKGNames = {};
- const licenseKeyGroupId = data ? data.id : null;
- if(licenseKeyGroupId) {
- previousData = licenseKeyGroup.licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId);
- }
+ const list = licenseKeyGroup.licenseKeyGroupsList;
+ for (let i = 0; i < list.length; i++) {
+ LKGNames[list[i].name.toLowerCase()] = list[i].id;
+ }
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
- const list = licenseKeyGroup.licenseKeyGroupsList;
- for (let i = 0; i < list.length; i++) {
- LKGNames[list[i].name.toLowerCase()] = list[i].id;
- }
-
- return {
- data,
- previousData,
- genericFieldInfo,
- isFormValid,
- formReady,
- LKGNames,
- limitsList
- };
+ return {
+ data,
+ previousData,
+ genericFieldInfo,
+ isFormValid,
+ formReady,
+ LKGNames,
+ limitsList
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onCancel: () => LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
- onSubmit: ({previousLicenseKeyGroup, licenseKeyGroup, keepOpen}) => {
- if (!keepOpen) {LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch);}
- LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version});
- },
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName),
- onCloseLimitEditor: () => LimitEditorActionHelper.closeLimitsEditor(dispatch),
- onOpenLimitEditor: (limit) => LimitEditorActionHelper.openLimitsEditor(dispatch, {limit})
- };
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onCancel: () =>
+ LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(dispatch),
+ onSubmit: ({ previousLicenseKeyGroup, licenseKeyGroup, keepOpen }) => {
+ if (!keepOpen) {
+ LicenseKeyGroupsActionHelper.closeLicenseKeyGroupEditor(
+ dispatch
+ );
+ }
+ LicenseKeyGroupsActionHelper.saveLicenseKeyGroup(dispatch, {
+ licenseModelId,
+ previousLicenseKeyGroup,
+ licenseKeyGroup,
+ version
+ });
+ },
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName),
+ onCloseLimitEditor: () =>
+ LimitEditorActionHelper.closeLimitsEditor(dispatch),
+ onOpenLimitEditor: limit =>
+ LimitEditorActionHelper.openLimitsEditor(dispatch, { limit })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseKeyGroupsEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
index b1a22f3d9a..e948e9cef8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
@@ -13,82 +13,97 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, defaultState, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js';
+import {
+ actionTypes,
+ defaultState,
+ LKG_FORM_NAME
+} from './LicenseKeyGroupsConstants.js';
import moment from 'moment';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.licenseKeyGroupsEditor.OPEN:
- let licenseKeyGroupData = {...action.licenseKeyGroup};
- let {startDate, expiryDate} = licenseKeyGroupData;
- if (startDate) {
- licenseKeyGroupData.startDate = moment(startDate, DATE_FORMAT).format(DATE_FORMAT);
- }
- if (expiryDate) {
- licenseKeyGroupData.expiryDate = moment(expiryDate, DATE_FORMAT).format(DATE_FORMAT);
- }
- return {
- ...state,
- data: action.licenseKeyGroup ? licenseKeyGroupData : defaultState.licenseKeyGroupsEditor,
- formReady: null,
- formName: LKG_FORM_NAME,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- 'type' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- 'operationalScope' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'thresholdUnits' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'thresholdValue' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'increments' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 120}]
- },
- 'startDate': {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'expiryDate': {
- isValid: true,
- errorText: '',
- validations: []
- }
- }
- };
- case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
- return {
- ...state,
- limitsList: action.response.results
- };
- case actionTypes.licenseKeyGroupsEditor.CLOSE:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.licenseKeyGroupsEditor.OPEN:
+ let licenseKeyGroupData = { ...action.licenseKeyGroup };
+ let { startDate, expiryDate } = licenseKeyGroupData;
+ if (startDate) {
+ licenseKeyGroupData.startDate = moment(
+ startDate,
+ DATE_FORMAT
+ ).format(DATE_FORMAT);
+ }
+ if (expiryDate) {
+ licenseKeyGroupData.expiryDate = moment(
+ expiryDate,
+ DATE_FORMAT
+ ).format(DATE_FORMAT);
+ }
+ return {
+ ...state,
+ data: action.licenseKeyGroup
+ ? licenseKeyGroupData
+ : defaultState.licenseKeyGroupsEditor,
+ formReady: null,
+ formName: LKG_FORM_NAME,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ type: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ operationalScope: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ thresholdUnits: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ thresholdValue: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ increments: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 120 }]
+ },
+ startDate: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ expiryDate: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ }
+ };
+ case actionTypes.licenseKeyGroupsEditor.LIMITS_LIST_LOADED:
+ return {
+ ...state,
+ limitsList: action.response.results
+ };
+ case actionTypes.licenseKeyGroupsEditor.CLOSE:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
index 7cbab61a8a..a820f28dfd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -26,328 +26,498 @@ 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 {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME, tabIds} from './LicenseKeyGroupsConstants.js';
-import {optionsInputValues as LicenseModelOptionsInputValues} from '../LicenseModelConstants.js';
-import {validateStartDate, thresholdValueValidation} from '../LicenseModelValidations.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+ optionsInputValues as licenseKeyGroupOptionsInputValues,
+ LKG_FORM_NAME,
+ tabIds
+} from './LicenseKeyGroupsConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+import {
+ validateStartDate,
+ thresholdValueValidation
+} from '../LicenseModelValidations.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
-import {DATE_FORMAT} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
-import {limitType, NEW_LIMIT_TEMP_ID} from '../limits/LimitEditorConstants.js';
+import {
+ limitType,
+ NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
- const LicenseKeyGroupPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- increments: PropTypes.string,
- operationalScope: PropTypes.shape({
- choices: PropTypes.array,
- other: PropTypes.string
- }),
- type: PropTypes.string,
- thresholdUnits: PropTypes.string,
- thresholdValue: PropTypes.number,
- startDate: PropTypes.string,
- expiryDate: PropTypes.string
+const LicenseKeyGroupPropType = PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ increments: PropTypes.string,
+ operationalScope: PropTypes.shape({
+ choices: PropTypes.array,
+ other: PropTypes.string
+ }),
+ type: PropTypes.string,
+ thresholdUnits: PropTypes.string,
+ thresholdValue: PropTypes.number,
+ startDate: PropTypes.string,
+ expiryDate: PropTypes.string
});
-const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateStartDate, thresholdValueValidation}) => {
- let {name, description, increments, operationalScope, type, thresholdUnits, thresholdValue, startDate, expiryDate} = data;
- return (
- <GridSection hasLostColSet>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
- label={i18n('Name')}
- data-test-id='create-lkg-name'
- value={name}
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText}
- isRequired={true}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={true}
- onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
- LKG_FORM_NAME)}
- onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
- other: operationalScope}}, LKG_FORM_NAME)}
- label={i18n('Operational Scope')}
- data-test-id='create-lkg-operational-scope'
- type='select'
- multiSelectedEnum={operationalScope && operationalScope.choices}
- otherValue={operationalScope && operationalScope.other}
- values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
- isValid={genericFieldInfo.operationalScope.isValid}
- errorText={genericFieldInfo.operationalScope.errorText} />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
- label={i18n('Description')}
- data-test-id='create-lkg-description'
- value={description}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- type='textarea'
- overlayPos='bottom' />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- isRequired={true}
- onChange={e => { const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({type: val}, LKG_FORM_NAME);}}
- value={type}
- label={i18n('Type')}
- data-test-id='create-lkg-type'
- isValid={genericFieldInfo.type.isValid}
- errorText={genericFieldInfo.type.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- overlayPos='bottom'
- type='select' >
- {
- licenseKeyGroupOptionsInputValues.TYPE.map(type =>
- (<option key={type.enum} value={type.enum}>{type.title}</option>))
- }
- </Input>
- </GridItem>
- <GridItem>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({thresholdUnits: val}, LKG_FORM_NAME);
- // TODO make sure that the value is valid too
- onDataChanged({thresholdValue: thresholdValue}, LKG_FORM_NAME,{thresholdValue : thresholdValueValidation});}
-
- }
- value={thresholdUnits}
- label={i18n('Threshold Units')}
- data-test-id='create-ep-threshold-units'
- isValid={genericFieldInfo.thresholdUnits.isValid}
- errorText={genericFieldInfo.thresholdUnits.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- <GridItem>
- <Input
- className='entitlement-pools-form-row-threshold-value'
- onChange={thresholdValue => onDataChanged({thresholdValue}, LKG_FORM_NAME,
- {thresholdValue : thresholdValueValidation})}
- label={i18n('Threshold Value')}
- isValid={genericFieldInfo.thresholdValue.isValid}
- errorText={genericFieldInfo.thresholdValue.errorText}
- data-test-id='create-ep-threshold-value'
- value={thresholdValue}
- type='text'/>
- </GridItem>
- <GridItem>
- <Input
- type='date'
- label={i18n('Start Date')}
- value={startDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={startDate => onDataChanged(
- {startDate: startDate ? startDate.format(DATE_FORMAT) : ''},
- LKG_FORM_NAME,
- {startDate: validateStartDate}
- )}
- isValid={genericFieldInfo.startDate.isValid}
- errorText={genericFieldInfo.startDate.errorText}
- selectsStart/>
- </GridItem>
- <GridItem lastColInRow>
- <Input
- type='date'
- label={i18n('Expiry Date')}
- value={expiryDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={expiryDate => {
- onDataChanged({expiryDate: expiryDate ? expiryDate.format(DATE_FORMAT) : ''}, LKG_FORM_NAME);
- onDataChanged({startDate}, LKG_FORM_NAME, {startDate: validateStartDate});
- }}
- isValid={genericFieldInfo.expiryDate.isValid}
- errorText={genericFieldInfo.expiryDate.errorText}
- selectsEnd/>
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- onChange={increments => onDataChanged({increments}, LKG_FORM_NAME)}
- label={i18n('Increments')}
- value={increments}
- data-test-id='create-ep-increments'
- type='text'/>
- </GridItem>
- </GridSection>
- );
+const LicenseKeyGroupFormContent = ({
+ data,
+ onDataChanged,
+ genericFieldInfo,
+ validateName,
+ validateStartDate,
+ thresholdValueValidation
+}) => {
+ let {
+ name,
+ description,
+ increments,
+ operationalScope,
+ type,
+ thresholdUnits,
+ thresholdValue,
+ startDate,
+ expiryDate
+ } = data;
+ return (
+ <GridSection hasLostColSet>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name }, LKG_FORM_NAME, {
+ name: validateName
+ })
+ }
+ label={i18n('Name')}
+ data-test-id="create-lkg-name"
+ value={name}
+ isValid={genericFieldInfo.name.isValid}
+ errorText={genericFieldInfo.name.errorText}
+ isRequired={true}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={true}
+ onEnumChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: operationalScope,
+ other: ''
+ }
+ },
+ LKG_FORM_NAME
+ )
+ }
+ onOtherChange={operationalScope =>
+ onDataChanged(
+ {
+ operationalScope: {
+ choices: [optionInputOther.OTHER],
+ other: operationalScope
+ }
+ },
+ LKG_FORM_NAME
+ )
+ }
+ label={i18n('Operational Scope')}
+ data-test-id="create-lkg-operational-scope"
+ type="select"
+ multiSelectedEnum={
+ operationalScope && operationalScope.choices
+ }
+ otherValue={operationalScope && operationalScope.other}
+ values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
+ isValid={genericFieldInfo.operationalScope.isValid}
+ errorText={genericFieldInfo.operationalScope.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={description =>
+ onDataChanged({ description }, LKG_FORM_NAME)
+ }
+ label={i18n('Description')}
+ data-test-id="create-lkg-description"
+ value={description}
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ type="textarea"
+ overlayPos="bottom"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ isRequired={true}
+ onChange={e => {
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onDataChanged({ type: val }, LKG_FORM_NAME);
+ }}
+ value={type}
+ label={i18n('Type')}
+ data-test-id="create-lkg-type"
+ isValid={genericFieldInfo.type.isValid}
+ errorText={genericFieldInfo.type.errorText}
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ overlayPos="bottom"
+ type="select">
+ {licenseKeyGroupOptionsInputValues.TYPE.map(type => (
+ <option key={type.enum} value={type.enum}>
+ {type.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ <GridItem>
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex = e.target.selectedIndex;
+ const val = e.target.options[selectedIndex].value;
+ onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME);
+ // TODO make sure that the value is valid too
+ onDataChanged(
+ { thresholdValue: thresholdValue },
+ LKG_FORM_NAME,
+ {
+ thresholdValue: thresholdValueValidation
+ }
+ );
+ }}
+ value={thresholdUnits}
+ label={i18n('Threshold Units')}
+ data-test-id="create-ep-threshold-units"
+ isValid={genericFieldInfo.thresholdUnits.isValid}
+ errorText={genericFieldInfo.thresholdUnits.errorText}
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ type="select">
+ {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
+ mtype => (
+ <option key={mtype.enum} value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ <GridItem>
+ <Input
+ className="entitlement-pools-form-row-threshold-value"
+ onChange={thresholdValue =>
+ onDataChanged({ thresholdValue }, LKG_FORM_NAME, {
+ thresholdValue: thresholdValueValidation
+ })
+ }
+ label={i18n('Threshold Value')}
+ isValid={genericFieldInfo.thresholdValue.isValid}
+ errorText={genericFieldInfo.thresholdValue.errorText}
+ data-test-id="create-ep-threshold-value"
+ value={thresholdValue}
+ type="text"
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ type="date"
+ label={i18n('Start Date')}
+ value={startDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={startDate =>
+ onDataChanged(
+ {
+ startDate: startDate
+ ? startDate.format(DATE_FORMAT)
+ : ''
+ },
+ LKG_FORM_NAME,
+ { startDate: validateStartDate }
+ )
+ }
+ isValid={genericFieldInfo.startDate.isValid}
+ errorText={genericFieldInfo.startDate.errorText}
+ selectsStart
+ />
+ </GridItem>
+ <GridItem lastColInRow>
+ <Input
+ type="date"
+ label={i18n('Expiry Date')}
+ value={expiryDate}
+ dateFormat={DATE_FORMAT}
+ startDate={startDate}
+ endDate={expiryDate}
+ onChange={expiryDate => {
+ onDataChanged(
+ {
+ expiryDate: expiryDate
+ ? expiryDate.format(DATE_FORMAT)
+ : ''
+ },
+ LKG_FORM_NAME
+ );
+ onDataChanged({ startDate }, LKG_FORM_NAME, {
+ startDate: validateStartDate
+ });
+ }}
+ isValid={genericFieldInfo.expiryDate.isValid}
+ errorText={genericFieldInfo.expiryDate.errorText}
+ selectsEnd
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={increments =>
+ onDataChanged({ increments }, LKG_FORM_NAME)
+ }
+ label={i18n('Increments')}
+ value={increments}
+ data-test-id="create-ep-increments"
+ type="text"
+ />
+ </GridItem>
+ </GridSection>
+ );
};
class LicenseKeyGroupsEditorView extends React.Component {
- static propTypes = {
- data: LicenseKeyGroupPropType,
- previousData: LicenseKeyGroupPropType,
- LKGNames: PropTypes.object,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- data: {}
- };
-
- componentDidUpdate(prevProps) {
- if (this.props.formReady && this.props.formReady !== prevProps.formReady) { // if form validation succeeded -> continue with submit
- this.submit();
- }
- }
+ static propTypes = {
+ data: LicenseKeyGroupPropType,
+ previousData: LicenseKeyGroupPropType,
+ LKGNames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- state = {
- localFeatureGroupsListFilter: '',
- selectedTab: tabIds.GENERAL,
- selectedLimit: ''
- };
+ static defaultProps = {
+ data: {}
+ };
- render() {
- let {data = {}, onDataChanged, isReadOnlyMode, onCloseLimitEditor, genericFieldInfo, limitsList = []} = this.props;
- let {selectedTab} = this.state;
- const isTabsDisabled = !data.id || !this.props.isFormValid;
- return (
- <div className='license-keygroup-editor'>
- <Tabs
- type='menu'
- activeTab={selectedTab}
- onTabClick={(tabIndex)=>{
- if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
- this.onAddLimit();
- } else {
- this.setState({selectedTab: tabIndex});
- onCloseLimitEditor();
- this.setState({selectedLimit: ''});
- }
- }}
- invalidTabs={[]}>
- <Tab tabId={tabIds.GENERAL} data-test-id='general-tab' title={i18n('General')}>
- { genericFieldInfo &&
- <Form
- ref='validationForm'
- hasButtons={false}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- className='license-model-form license-key-groups-form'>
- <LicenseKeyGroupFormContent
- data={data}
- onDataChanged={onDataChanged}
- genericFieldInfo={genericFieldInfo}
- validateName={(value)=> this.validateName(value)}
- validateStartDate={(value, state)=> validateStartDate(value, state)}
- thresholdValueValidation={(value, state) => thresholdValueValidation(value, state)}/>
- </Form>}
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.formReady &&
+ this.props.formReady !== prevProps.formReady
+ ) {
+ // if form validation succeeded -> continue with submit
+ this.submit();
+ }
+ }
- </Tab>
- <Tab tabId={tabIds.SP_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('SP Limits')}>
- {selectedTab === tabIds.SP_LIMITS &&
- <LicenseKeyGroupsLimits
- limitType={limitType.SERVICE_PROVIDER}
- limitsList={limitsList.filter(item => item.type === limitType.SERVICE_PROVIDER)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}
- isReadOnlyMode={isReadOnlyMode} />}
- </Tab>
- <Tab tabId={tabIds.VENDOR_LIMITS} disabled={isTabsDisabled} data-test-id='general-tab' title={i18n('Vendor Limits')}>
- {selectedTab === tabIds.VENDOR_LIMITS &&
- <LicenseKeyGroupsLimits
- limitType={limitType.VENDOR}
- limitsList={limitsList.filter(item => item.type === limitType.VENDOR)}
- selectedLimit={this.state.selectedLimit}
- onCloseLimitEditor={() => this.onCloseLimitEditor()}
- onSelectLimit={limit => this.onSelectLimit(limit)}
- isReadOnlyMode={isReadOnlyMode} />}
- </Tab>
- {selectedTab !== tabIds.GENERAL ?
- <Button
- className='add-limit-button'
- tabId={tabIds.ADD_LIMIT_BUTTON}
- btnType='link'
- iconName='plus'
- disabled={this.state.selectedLimit || isReadOnlyMode}>
- {i18n('Add Limit')}
- </Button>
- :
- <div key='empty_lm_tab_key'></div> // Render empty div to not break tabs
- }
- </Tabs>
+ state = {
+ localFeatureGroupsListFilter: '',
+ selectedTab: tabIds.GENERAL,
+ selectedLimit: ''
+ };
- <GridSection className='license-model-modal-buttons license-key-group-editor-buttons'>
- {!this.state.selectedLimit &&
- <Button btnType='default' disabled={!this.props.isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>
- {i18n('Save')}
- </Button>
- }
- <Button btnType={this.state.selectedLimit ? 'default' : 'outline'} onClick={() => this.props.onCancel()} type='reset'>
- {i18n('Cancel')}
- </Button>
- </GridSection>
- </div>
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ isReadOnlyMode,
+ onCloseLimitEditor,
+ genericFieldInfo,
+ limitsList = []
+ } = this.props;
+ let { selectedTab } = this.state;
+ const isTabsDisabled = !data.id || !this.props.isFormValid;
+ return (
+ <div className="license-keygroup-editor">
+ <Tabs
+ type="menu"
+ activeTab={selectedTab}
+ onTabClick={tabIndex => {
+ if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+ this.onAddLimit();
+ } else {
+ this.setState({ selectedTab: tabIndex });
+ onCloseLimitEditor();
+ this.setState({ selectedLimit: '' });
+ }
+ }}
+ invalidTabs={[]}>
+ <Tab
+ tabId={tabIds.GENERAL}
+ data-test-id="general-tab"
+ title={i18n('General')}>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={false}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(LKG_FORM_NAME)
+ }
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ className="license-model-form license-key-groups-form">
+ <LicenseKeyGroupFormContent
+ data={data}
+ onDataChanged={onDataChanged}
+ genericFieldInfo={genericFieldInfo}
+ validateName={value =>
+ this.validateName(value)
+ }
+ validateStartDate={(value, state) =>
+ validateStartDate(value, state)
+ }
+ thresholdValueValidation={(value, state) =>
+ thresholdValueValidation(value, state)
+ }
+ />
+ </Form>
+ )}
+ </Tab>
+ <Tab
+ tabId={tabIds.SP_LIMITS}
+ disabled={isTabsDisabled}
+ data-test-id="general-tab"
+ title={i18n('SP Limits')}>
+ {selectedTab === tabIds.SP_LIMITS && (
+ <LicenseKeyGroupsLimits
+ limitType={limitType.SERVICE_PROVIDER}
+ limitsList={limitsList.filter(
+ item =>
+ item.type === limitType.SERVICE_PROVIDER
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Tab>
+ <Tab
+ tabId={tabIds.VENDOR_LIMITS}
+ disabled={isTabsDisabled}
+ data-test-id="general-tab"
+ title={i18n('Vendor Limits')}>
+ {selectedTab === tabIds.VENDOR_LIMITS && (
+ <LicenseKeyGroupsLimits
+ limitType={limitType.VENDOR}
+ limitsList={limitsList.filter(
+ item => item.type === limitType.VENDOR
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Tab>
+ {selectedTab !== tabIds.GENERAL ? (
+ <Button
+ className="add-limit-button"
+ tabId={tabIds.ADD_LIMIT_BUTTON}
+ btnType="link"
+ iconName="plus"
+ disabled={
+ this.state.selectedLimit || isReadOnlyMode
+ }>
+ {i18n('Add Limit')}
+ </Button>
+ ) : (
+ <div key="empty_lm_tab_key" />
+ ) // Render empty div to not break tabs
+ }
+ </Tabs>
- );
- }
+ <GridSection className="license-model-modal-buttons license-key-group-editor-buttons">
+ {!this.state.selectedLimit && (
+ <Button
+ btnType="default"
+ disabled={!this.props.isFormValid || isReadOnlyMode}
+ onClick={() => this.submit()}
+ type="reset">
+ {i18n('Save')}
+ </Button>
+ )}
+ <Button
+ btnType={
+ this.state.selectedLimit ? 'default' : 'outline'
+ }
+ onClick={() => this.props.onCancel()}
+ type="reset">
+ {i18n('Cancel')}
+ </Button>
+ </GridSection>
+ </div>
+ );
+ }
- submit() {
- const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup, formReady, onValidateForm, onSubmit} = this.props;
- if (!formReady) {
- onValidateForm(LKG_FORM_NAME);
- } else {
- onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
- }
- }
+ submit() {
+ const {
+ data: licenseKeyGroup,
+ previousData: previousLicenseKeyGroup,
+ formReady,
+ onValidateForm,
+ onSubmit
+ } = this.props;
+ if (!formReady) {
+ onValidateForm(LKG_FORM_NAME);
+ } else {
+ onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
+ }
+ }
- validateName(value) {
- const {data: {id}, LKGNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});
+ validateName(value) {
+ const { data: { id }, LKGNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: LKGNames
+ });
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "License key group by the name '" +
+ value +
+ "' already exists. License key group name must be unique"
+ )
+ };
+ }
- onSelectLimit(limit) {
- if (limit.id === this.state.selectedLimit) {
- this.setState({selectedLimit: ''});
- return;
- }
- this.setState({selectedLimit: limit.id});
- this.props.onOpenLimitEditor(limit);
- }
+ onSelectLimit(limit) {
+ if (limit.id === this.state.selectedLimit) {
+ this.setState({ selectedLimit: '' });
+ return;
+ }
+ this.setState({ selectedLimit: limit.id });
+ this.props.onOpenLimitEditor(limit);
+ }
- onCloseLimitEditor() {
- this.setState({selectedLimit: ''});
- this.props.onCloseLimitEditor();
- }
+ onCloseLimitEditor() {
+ this.setState({ selectedLimit: '' });
+ this.props.onCloseLimitEditor();
+ }
- onAddLimit() {
- this.setState({selectedLimit: NEW_LIMIT_TEMP_ID});
- this.props.onOpenLimitEditor();
- }
+ onAddLimit() {
+ this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+ this.props.onOpenLimitEditor();
+ }
}
export default LicenseKeyGroupsEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
index bd8f21a7c5..ad14c6c249 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsLimits.js
@@ -13,45 +13,75 @@
* 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 globalModalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalModalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import Limits from 'sdc-app/onboarding/licenseModel/limits/Limits.jsx';
import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
-const mapStateToProps = ({licenseModel: {licenseKeyGroup: {licenseKeyGroupsEditor: {data}}, limitEditor}, currentScreen}) => {
- let {props: {licenseModelId, version}} = currentScreen;
- return {
- parent: data,
- limitEditor,
- licenseModelId,
- version
- };
+const mapStateToProps = ({
+ licenseModel: {
+ licenseKeyGroup: { licenseKeyGroupsEditor: { data } },
+ limitEditor
+ },
+ currentScreen
+}) => {
+ let { props: { licenseModelId, version } } = currentScreen;
+ return {
+ parent: data,
+ limitEditor,
+ licenseModelId,
+ version
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onSubmit: (limit, licenseKeyGroup, licenseModelId, version) => LicenseKeyGroupsActionHelper.submitLimit(dispatch,
- {
- limit,
- licenseKeyGroup,
- licenseModelId,
- version}),
- onDelete: ({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}) => dispatch({
- type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete {name}?', {name: limit.name}),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=> LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {limit, licenseKeyGroup: parent, licenseModelId, version}).then(() =>
- selectedLimit === limit.id && onCloseLimitEditor()
- )
- }
- })
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onSubmit: (limit, licenseKeyGroup, licenseModelId, version) =>
+ LicenseKeyGroupsActionHelper.submitLimit(dispatch, {
+ limit,
+ licenseKeyGroup,
+ licenseModelId,
+ version
+ }),
+ onDelete: ({
+ limit,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ }) =>
+ dispatch({
+ type: globalModalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete {name}?', {
+ name: limit.name
+ }),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ LicenseKeyGroupsActionHelper.deleteLimit(dispatch, {
+ limit,
+ licenseKeyGroup: parent,
+ licenseModelId,
+ version
+ }).then(
+ () =>
+ selectedLimit === limit.id &&
+ onCloseLimitEditor()
+ )
+ }
+ })
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(Limits);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
index 00c2092b83..6151c5997d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
@@ -13,41 +13,62 @@
* 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 globalMoadlActions} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes as globalMoadlActions } from 'nfvo-components/modal/GlobalModalConstants.js';
import LicenseKeyGroupsActionHelper from './LicenseKeyGroupsActionHelper.js';
-import LicenseKeyGroupsListEditorView, {generateConfirmationMsg} from './LicenseKeyGroupsListEditorView.jsx';
+import LicenseKeyGroupsListEditorView, {
+ generateConfirmationMsg
+} from './LicenseKeyGroupsListEditorView.jsx';
-const mapStateToProps = ({licenseModel: {licenseKeyGroup, licenseModelEditor}}) => {
- let {licenseKeyGroupsList} = licenseKeyGroup;
- let {data} = licenseKeyGroup.licenseKeyGroupsEditor;
- let {vendorName} = licenseModelEditor.data;
+const mapStateToProps = ({
+ licenseModel: { licenseKeyGroup, licenseModelEditor }
+}) => {
+ let { licenseKeyGroupsList } = licenseKeyGroup;
+ let { data } = licenseKeyGroup.licenseKeyGroupsEditor;
+ let { vendorName } = licenseModelEditor.data;
- return {
- vendorName,
- licenseKeyGroupsList,
- isDisplayModal: Boolean(data),
- isModalInEditMode: Boolean(data && data.id)
- };
+ return {
+ vendorName,
+ licenseKeyGroupsList,
+ isDisplayModal: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
- return {
- onAddLicenseKeyGroupClick: () => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
- onEditLicenseKeyGroupClick: licenseKeyGroup => LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {licenseKeyGroup, licenseModelId, version}),
- onDeleteLicenseKeyGroupClick: licenseKeyGroup => dispatch({
- type: globalMoadlActions.GLOBAL_MODAL_WARNING,
- data:{
- msg: generateConfirmationMsg(licenseKeyGroup),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: () => LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(dispatch, {licenseModelId, licenseKeyGroupId:licenseKeyGroup.id, version})
- }
- })
- };
+const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+ return {
+ onAddLicenseKeyGroupClick: () =>
+ LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
+ onEditLicenseKeyGroupClick: licenseKeyGroup =>
+ LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {
+ licenseKeyGroup,
+ licenseModelId,
+ version
+ }),
+ onDeleteLicenseKeyGroupClick: licenseKeyGroup =>
+ dispatch({
+ type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: generateConfirmationMsg(licenseKeyGroup),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ LicenseKeyGroupsActionHelper.deleteLicenseKeyGroup(
+ dispatch,
+ {
+ licenseModelId,
+ licenseKeyGroupId: licenseKeyGroup.id,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseKeyGroupsListEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseKeyGroupsListEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
index 5a98b7f575..4c8c8cee6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
@@ -21,143 +21,205 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from './LicenseKeyGroupsConstants';
+import InputOptions, {
+ other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from './LicenseKeyGroupsConstants';
class LicenseKeyGroupsListEditorView extends React.Component {
- static propTypes = {
- vendorName: PropTypes.string,
- licenseModelId: PropTypes.string.isRequired,
- licenseKeyGroupsList: PropTypes.array,
- isReadOnlyMode: PropTypes.bool.isRequired,
- isDisplayModal: PropTypes.bool,
- isModalInEditMode: PropTypes.bool,
- onAddLicenseKeyGroupClick: PropTypes.func,
- onEditLicenseKeyGroupClick: PropTypes.func,
- onDeleteLicenseKeyGroupClick: PropTypes.func
- };
-
- static defaultProps = {
- licenseKeyGroupsList: []
- };
-
- state = {
- localFilter: ''
- };
-
- render() {
- let {licenseModelId, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
- let {onAddLicenseKeyGroupClick} = this.props;
- const {localFilter} = this.state;
-
- return (
- <div className='license-model-list-editor license-key-groups-list-editor'>
- <ListEditorView
- title={i18n('License Key Groups')}
- plusButtonTitle={i18n('Add License Key Group')}
- onAdd={onAddLicenseKeyGroupClick}
- filterValue={localFilter}
- onFilter={value => this.setState({localFilter: value})}
- isReadOnlyMode={isReadOnlyMode}>
- {this.filterList().map(licenseKeyGroup => (this.renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode)))}
- </ListEditorView>
- <Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-model-modal license-key-groups-modal'>
- <Modal.Header>
- <Modal.Title>{`${isModalInEditMode ? i18n('Edit License Key Group') : i18n('Create New License Key Group')}`}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {
- isDisplayModal && (
- <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>
- )
- }
- </Modal.Body>
- </Modal>
- </div>
- );
- }
-
- filterList() {
- let {licenseKeyGroupsList} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return licenseKeyGroupsList.filter(({name = '', description = '', operationalScope = '', type = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter) || escape(this.extractValue(operationalScope)).match(filter) || escape(type).match(filter);
- });
- }
- else {
- return licenseKeyGroupsList;
- }
- }
-
- renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
- let {id, name, description, operationalScope, type} = licenseKeyGroup;
- let {onEditLicenseKeyGroupClick, onDeleteLicenseKeyGroupClick} = this.props;
- return (
- <ListEditorItemView
- key={id}
- onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
- onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='text name'>{name}</div>
- </div>
-
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Operational Scope')}</div>
- <div className='text operational-scope'>{operationalScope && this.getOperationalScopes(operationalScope)}</div>
-
- <div className='title'>{i18n('Type')}</div>
- <div className='text type'>{InputOptions.getTitleByName(optionsInputValues, type)}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
-
- getOperationalScopes(operationalScope) {
-
- if (operationalScope.choices && operationalScope.choices.toString() === i18n(optionInputOther.OTHER)) {
- return operationalScope.other;
- } else if (operationalScope.choices) {
- let allOpScopes = '';
- for (let opScope of operationalScope.choices) {
- allOpScopes += allOpScopes === '' ? InputOptions.getTitleByName(optionsInputValues, opScope) : `, ${InputOptions.getTitleByName(optionsInputValues, opScope)}`;
- }
- return allOpScopes;
- } else {
- return '';
- }
- }
-
- extractValue(item) {
- if (item === undefined) {
- return '';
- } //TODO fix it sooner rather than later
-
- return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
- }
+ static propTypes = {
+ vendorName: PropTypes.string,
+ licenseModelId: PropTypes.string.isRequired,
+ licenseKeyGroupsList: PropTypes.array,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ onAddLicenseKeyGroupClick: PropTypes.func,
+ onEditLicenseKeyGroupClick: PropTypes.func,
+ onDeleteLicenseKeyGroupClick: PropTypes.func
+ };
+
+ static defaultProps = {
+ licenseKeyGroupsList: []
+ };
+
+ state = {
+ localFilter: ''
+ };
+
+ render() {
+ let {
+ licenseModelId,
+ isReadOnlyMode,
+ isDisplayModal,
+ isModalInEditMode,
+ version
+ } = this.props;
+ let { onAddLicenseKeyGroupClick } = this.props;
+ const { localFilter } = this.state;
+
+ return (
+ <div className="license-model-list-editor license-key-groups-list-editor">
+ <ListEditorView
+ title={i18n('License Key Groups')}
+ plusButtonTitle={i18n('Add License Key Group')}
+ onAdd={onAddLicenseKeyGroupClick}
+ filterValue={localFilter}
+ onFilter={value => this.setState({ localFilter: value })}
+ isReadOnlyMode={isReadOnlyMode}>
+ {this.filterList().map(licenseKeyGroup =>
+ this.renderLicenseKeyGroupListItem(
+ licenseKeyGroup,
+ isReadOnlyMode
+ )
+ )}
+ </ListEditorView>
+ <Modal
+ show={isDisplayModal}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal license-model-modal license-key-groups-modal">
+ <Modal.Header>
+ <Modal.Title>{`${
+ isModalInEditMode
+ ? i18n('Edit License Key Group')
+ : i18n('Create New License Key Group')
+ }`}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {isDisplayModal && (
+ <LicenseKeyGroupsEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Modal.Body>
+ </Modal>
+ </div>
+ );
+ }
+
+ filterList() {
+ let { licenseKeyGroupsList } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return licenseKeyGroupsList.filter(
+ ({
+ name = '',
+ description = '',
+ operationalScope = '',
+ type = ''
+ }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter) ||
+ escape(this.extractValue(operationalScope)).match(
+ filter
+ ) ||
+ escape(type).match(filter)
+ );
+ }
+ );
+ } else {
+ return licenseKeyGroupsList;
+ }
+ }
+
+ renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
+ let { id, name, description, operationalScope, type } = licenseKeyGroup;
+ let {
+ onEditLicenseKeyGroupClick,
+ onDeleteLicenseKeyGroupClick
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
+ onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="text name">{name}</div>
+ </div>
+
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Operational Scope')}</div>
+ <div className="text operational-scope">
+ {operationalScope &&
+ this.getOperationalScopes(operationalScope)}
+ </div>
+
+ <div className="title">{i18n('Type')}</div>
+ <div className="text type">
+ {InputOptions.getTitleByName(optionsInputValues, type)}
+ </div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
+
+ getOperationalScopes(operationalScope) {
+ if (
+ operationalScope.choices &&
+ operationalScope.choices.toString() === i18n(optionInputOther.OTHER)
+ ) {
+ return operationalScope.other;
+ } else if (operationalScope.choices) {
+ let allOpScopes = '';
+ for (let opScope of operationalScope.choices) {
+ allOpScopes +=
+ allOpScopes === ''
+ ? InputOptions.getTitleByName(
+ optionsInputValues,
+ opScope
+ )
+ : `, ${InputOptions.getTitleByName(
+ optionsInputValues,
+ opScope
+ )}`;
+ }
+ return allOpScopes;
+ } else {
+ return '';
+ }
+ }
+
+ extractValue(item) {
+ if (item === undefined) {
+ return '';
+ } //TODO fix it sooner rather than later
+
+ return item
+ ? item.choice === optionInputOther.OTHER
+ ? item.other
+ : InputOptions.getTitleByName(optionsInputValues, item.choice)
+ : '';
+ }
}
export default LicenseKeyGroupsListEditorView;
export function generateConfirmationMsg(licenseKeyGroupToDelete) {
- let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
- let msg = i18n('Are you sure you want to delete "{name}"?', {name: name});
- let subMsg = licenseKeyGroupToDelete.referencingFeatureGroups
- && licenseKeyGroupToDelete.referencingFeatureGroups.length > 0 ?
- i18n('This license key group is associated with one or more feature groups') :
- '';
- return (
- <div>
- <p>{msg}</p>
- <p>{subMsg}</p>
- </div>
- );
+ let name = licenseKeyGroupToDelete ? licenseKeyGroupToDelete.name : '';
+ let msg = i18n('Are you sure you want to delete "{name}"?', { name: name });
+ let subMsg =
+ licenseKeyGroupToDelete.referencingFeatureGroups &&
+ licenseKeyGroupToDelete.referencingFeatureGroups.length > 0
+ ? i18n(
+ 'This license key group is associated with one or more feature groups'
+ )
+ : '';
+ return (
+ <div>
+ <p>{msg}</p>
+ <p>{subMsg}</p>
+ </div>
+ );
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
index 1f0a64e295..1cd1da0d82 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
@@ -13,20 +13,29 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './LicenseKeyGroupsConstants.js';
+import { actionTypes } from './LicenseKeyGroupsConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
- return [...action.response.results];
- case actionTypes.DELETE_LICENSE_KEY_GROUP:
- return state.filter(licenseKeyGroup => licenseKeyGroup.id !== action.licenseKeyGroupId);
- case actionTypes.ADD_LICENSE_KEY_GROUP:
- return [...state, action.licenseKeyGroup];
- case actionTypes.EDIT_LICENSE_KEY_GROUP:
- const indexForEdit = state.findIndex(licenseKeyGroup => licenseKeyGroup.id === action.licenseKeyGroup.id);
- return [...state.slice(0, indexForEdit), action.licenseKeyGroup, ...state.slice(indexForEdit + 1)];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
+ return [...action.response.results];
+ case actionTypes.DELETE_LICENSE_KEY_GROUP:
+ return state.filter(
+ licenseKeyGroup =>
+ licenseKeyGroup.id !== action.licenseKeyGroupId
+ );
+ case actionTypes.ADD_LICENSE_KEY_GROUP:
+ return [...state, action.licenseKeyGroup];
+ case actionTypes.EDIT_LICENSE_KEY_GROUP:
+ const indexForEdit = state.findIndex(
+ licenseKeyGroup =>
+ licenseKeyGroup.id === action.licenseKeyGroup.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.licenseKeyGroup,
+ ...state.slice(indexForEdit + 1)
+ ];
+ default:
+ return state;
+ }
};
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
index d483383472..76ea36db98 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.js
@@ -1,25 +1,30 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import LimitEditor from './LimitEditor.jsx';
-const mapStateToProps = ({licenseModel: {limitEditor}}) => {
+const mapStateToProps = ({ licenseModel: { limitEditor } }) => {
+ let { data, genericFieldInfo, formReady } = limitEditor;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let {data, genericFieldInfo, formReady} = limitEditor;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
- return {
- data,
- genericFieldInfo,
- isFormValid,
- formReady
- };
+ return {
+ data,
+ genericFieldInfo,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LimitEditor); \ No newline at end of file
+export default connect(mapStateToProps, mapActionsToProps)(LimitEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
index 54f057eaa4..0d1d4eaf10 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -5,206 +5,349 @@ 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 {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
+import { LIMITS_FORM_NAME, selectValues } from './LimitEditorConstants.js';
import Button from 'sdc-ui/lib/react/Button.js';
import Validator from 'nfvo-utils/Validator.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
const LimitPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- metric: PropTypes.shape({
- choice: PropTypes.string,
- other: PropTypes.string
- }),
- value: PropTypes.string,
- aggregationFunction: PropTypes.string,
- time: PropTypes.string,
- unit: PropTypes.shape({
- choice: PropTypes.string,
- other: PropTypes.string
- })
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ metric: PropTypes.shape({
+ choice: PropTypes.string,
+ other: PropTypes.string
+ }),
+ value: PropTypes.string,
+ aggregationFunction: PropTypes.string,
+ time: PropTypes.string,
+ unit: PropTypes.shape({
+ choice: PropTypes.string,
+ other: PropTypes.string
+ })
});
class LimitEditor extends React.Component {
- static propTypes = {
- data: LimitPropType,
- limitsNames: PropTypes.object,
- isReadOnlyMode: PropTypes.bool,
- isFormValid: PropTypes.bool,
- formReady: PropTypes.bool,
- genericFieldInfo: PropTypes.object.isRequired,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onValidateForm: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
+ static propTypes = {
+ data: LimitPropType,
+ limitsNames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ isFormValid: PropTypes.bool,
+ formReady: PropTypes.bool,
+ genericFieldInfo: PropTypes.object.isRequired,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onValidateForm: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- componentDidUpdate(prevProps) {
- if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
- this.submit();
- }
- }
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.formReady &&
+ this.props.formReady !== prevProps.formReady
+ ) {
+ this.submit();
+ }
+ }
- render() {
- let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props;
- let {name, description, metric, value, aggregationFunction, time, unit} = data;
- return (
- <div className='limit-editor'>
- {!data.id &&
- <div className='limit-editor-title'>
- {data.name ? data.name : i18n('NEW LIMIT')}
- </div>}
- {
- genericFieldInfo &&
- <Form
- ref='validationForm'
- hasButtons={false}
- isValid={isFormValid}
- formReady={formReady}
- onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
- labledButtons={false}
- isReadOnlyMode={isReadOnlyMode}
- className='limit-editor-form'>
- <GridSection className='limit-editor-form-grid-section' hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})}
- label={i18n('Name')}
- data-test-id='limit-editor-name'
- value={name}
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText}
- isRequired={true}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)}
- label={i18n('Description')}
- data-test-id='limit-editor-description'
- value={description}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- isRequired={false}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2}>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={false}
- isRequired={true}
- onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
- LIMITS_FORM_NAME)}
- onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
- other: metric}}, LIMITS_FORM_NAME)}
- label={i18n('Metric')}
- data-test-id='limit-editor-metric'
- type='select'
- required={true}
- selectedEnum={metric && metric.choice}
- otherValue={metric && metric.other}
- values={selectValues.METRIC}
- isValid={genericFieldInfo.metric.isValid}
- errorText={genericFieldInfo.metric.errorText} />
- </GridItem>
- <GridItem>
- <Input
- onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)}
- label={i18n('Metric value')}
- data-test-id='limit-editor-metric-value'
- value={value}
- isValid={genericFieldInfo.value.isValid}
- errorText={genericFieldInfo.value.errorText}
- isRequired={true}
- type='text'/>
- </GridItem>
- <GridItem lastColInRow>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={false}
- isRequired={false}
- onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
- LIMITS_FORM_NAME)}
- onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
- other: unit}}, LIMITS_FORM_NAME)}
- label={i18n('Units')}
- data-test-id='limit-editor-units'
- type='select'
- required={false}
- selectedEnum={unit && unit.choice}
- otherValue={unit && unit.other}
- values={selectValues.UNIT}
- isValid={genericFieldInfo.unit.isValid}
- errorText={genericFieldInfo.unit.errorText} />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- onChange={e => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
- }
- value={aggregationFunction}
- label={i18n('Aggregation Function')}
- data-test-id='limit-editor-aggregation-function'
- isValid={genericFieldInfo.aggregationFunction.isValid}
- errorText={genericFieldInfo.aggregationFunction.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {selectValues.AGGREGATION_FUNCTION.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- <GridItem>
- <Input
- onChange={e => {
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({time: val}, LIMITS_FORM_NAME);}
- }
- value={time}
- label={i18n('Time')}
- data-test-id='limit-editor-time'
- isValid={genericFieldInfo.time.isValid}
- errorText={genericFieldInfo.time.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {selectValues.TIME.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- </GridSection>
- <GridSection className='limit-editor-buttons'>
- <Button btnType='outline' disabled={!isFormValid || isReadOnlyMode} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
- <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
- </GridSection>
- </Form>
- }
- </div>
- );
- }
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ isReadOnlyMode,
+ genericFieldInfo,
+ onCancel,
+ isFormValid,
+ formReady,
+ onValidateForm
+ } = this.props;
+ let {
+ name,
+ description,
+ metric,
+ value,
+ aggregationFunction,
+ time,
+ unit
+ } = data;
+ return (
+ <div className="limit-editor">
+ {!data.id && (
+ <div className="limit-editor-title">
+ {data.name ? data.name : i18n('NEW LIMIT')}
+ </div>
+ )}
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={false}
+ isValid={isFormValid}
+ formReady={formReady}
+ onValidateForm={() => onValidateForm(LIMITS_FORM_NAME)}
+ labledButtons={false}
+ isReadOnlyMode={isReadOnlyMode}
+ className="limit-editor-form">
+ <GridSection
+ className="limit-editor-form-grid-section"
+ hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged(
+ { name },
+ LIMITS_FORM_NAME,
+ {
+ name: () =>
+ this.validateName(name)
+ }
+ )
+ }
+ label={i18n('Name')}
+ data-test-id="limit-editor-name"
+ value={name}
+ isValid={genericFieldInfo.name.isValid}
+ errorText={genericFieldInfo.name.errorText}
+ isRequired={true}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ onChange={description =>
+ onDataChanged(
+ { description },
+ LIMITS_FORM_NAME
+ )
+ }
+ label={i18n('Description')}
+ data-test-id="limit-editor-description"
+ value={description}
+ isValid={
+ genericFieldInfo.description.isValid
+ }
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ isRequired={false}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={false}
+ isRequired={true}
+ onEnumChange={metric =>
+ onDataChanged(
+ {
+ metric: {
+ choice: metric,
+ other: ''
+ }
+ },
+ LIMITS_FORM_NAME
+ )
+ }
+ onOtherChange={metric =>
+ onDataChanged(
+ {
+ metric: {
+ choice:
+ optionInputOther.OTHER,
+ other: metric
+ }
+ },
+ LIMITS_FORM_NAME
+ )
+ }
+ label={i18n('Metric')}
+ data-test-id="limit-editor-metric"
+ type="select"
+ required={true}
+ selectedEnum={metric && metric.choice}
+ otherValue={metric && metric.other}
+ values={selectValues.METRIC}
+ isValid={genericFieldInfo.metric.isValid}
+ errorText={
+ genericFieldInfo.metric.errorText
+ }
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ onChange={value =>
+ onDataChanged(
+ { value },
+ LIMITS_FORM_NAME
+ )
+ }
+ label={i18n('Metric value')}
+ data-test-id="limit-editor-metric-value"
+ value={value}
+ isValid={genericFieldInfo.value.isValid}
+ errorText={genericFieldInfo.value.errorText}
+ isRequired={true}
+ type="text"
+ />
+ </GridItem>
+ <GridItem lastColInRow>
+ <InputOptions
+ onInputChange={() => {}}
+ isMultiSelect={false}
+ isRequired={false}
+ onEnumChange={unit =>
+ onDataChanged(
+ {
+ unit: {
+ choice: unit,
+ other: ''
+ }
+ },
+ LIMITS_FORM_NAME
+ )
+ }
+ onOtherChange={unit =>
+ onDataChanged(
+ {
+ unit: {
+ choice:
+ optionInputOther.OTHER,
+ other: unit
+ }
+ },
+ LIMITS_FORM_NAME
+ )
+ }
+ label={i18n('Units')}
+ data-test-id="limit-editor-units"
+ type="select"
+ required={false}
+ selectedEnum={unit && unit.choice}
+ otherValue={unit && unit.other}
+ values={selectValues.UNIT}
+ isValid={genericFieldInfo.unit.isValid}
+ errorText={genericFieldInfo.unit.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[selectedIndex]
+ .value;
+ onDataChanged(
+ { aggregationFunction: val },
+ LIMITS_FORM_NAME
+ );
+ }}
+ value={aggregationFunction}
+ label={i18n('Aggregation Function')}
+ data-test-id="limit-editor-aggregation-function"
+ isValid={
+ genericFieldInfo.aggregationFunction
+ .isValid
+ }
+ errorText={
+ genericFieldInfo.aggregationFunction
+ .errorText
+ }
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ type="select">
+ {selectValues.AGGREGATION_FUNCTION.map(
+ mtype => (
+ <option
+ key={mtype.enum}
+ value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ <GridItem>
+ <Input
+ onChange={e => {
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[selectedIndex]
+ .value;
+ onDataChanged(
+ { time: val },
+ LIMITS_FORM_NAME
+ );
+ }}
+ value={time}
+ label={i18n('Time')}
+ data-test-id="limit-editor-time"
+ isValid={genericFieldInfo.time.isValid}
+ errorText={genericFieldInfo.time.errorText}
+ groupClassName="bootstrap-input-options"
+ className="input-options-select"
+ type="select">
+ {selectValues.TIME.map(mtype => (
+ <option
+ key={mtype.enum}
+ value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ ))}
+ </Input>
+ </GridItem>
+ </GridSection>
+ <GridSection className="limit-editor-buttons">
+ <Button
+ btnType="outline"
+ disabled={!isFormValid || isReadOnlyMode}
+ onClick={() => this.submit()}
+ type="reset">
+ {i18n('Save')}
+ </Button>
+ <Button
+ btnType="outline"
+ color="gray"
+ onClick={onCancel}
+ type="reset">
+ {i18n('Cancel')}
+ </Button>
+ </GridSection>
+ </Form>
+ )}
+ </div>
+ );
+ }
- validateName(value) {
- const {data: {id}, limitsNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames});
+ validateName(value) {
+ const { data: { id }, limitsNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: limitsNames
+ });
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Limit by the name '" +
+ value +
+ "' already exists. Limit name must be unique"
+ )
+ };
+ }
-
- submit() {
- if (!this.props.formReady) {
- this.props.onValidateForm(LIMITS_FORM_NAME);
- } else {
- this.props.onSubmit();
- }
- }
+ submit() {
+ if (!this.props.formReady) {
+ this.props.onValidateForm(LIMITS_FORM_NAME);
+ } else {
+ this.props.onSubmit();
+ }
+ }
}
export default LimitEditor;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
index 8ac845a1a7..a275808d01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
@@ -14,41 +14,47 @@
* permissions and limitations under the License.
*/
-import {actionTypes, selectValues} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-
+import { actionTypes, selectValues } from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
const LimitEditorActionHelper = {
- openLimitsEditor(dispatch, {limit}) {
- let modifiedLimit = {...limit};
- if (limit && limit.metric) {
- modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC);
- }
- if (limit && limit.unit) {
- modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT);
- }
- dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit});
- },
+ openLimitsEditor(dispatch, { limit }) {
+ let modifiedLimit = { ...limit };
+ if (limit && limit.metric) {
+ modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(
+ modifiedLimit.metric,
+ selectValues.METRIC
+ );
+ }
+ if (limit && limit.unit) {
+ modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(
+ modifiedLimit.unit,
+ selectValues.UNIT
+ );
+ }
+ dispatch({ type: actionTypes.OPEN, limitItem: modifiedLimit });
+ },
- closeLimitsEditor(dispatch) {
- dispatch({type: actionTypes.CLOSE});
- },
+ closeLimitsEditor(dispatch) {
+ dispatch({ type: actionTypes.CLOSE });
+ },
- createChoiceObject(value, optionsList) {
- let option = optionsList.find(function(item) { return item.enum === value; });
- if (!option) {
- return {
- choice: optionInputOther.OTHER,
- other: value
- };
- }
- else {
- return {
- choice: value,
- other: ''
- };
- }
- }
+ createChoiceObject(value, optionsList) {
+ let option = optionsList.find(function(item) {
+ return item.enum === value;
+ });
+ if (!option) {
+ return {
+ choice: optionInputOther.OTHER,
+ other: value
+ };
+ } else {
+ return {
+ choice: value,
+ other: ''
+ };
+ }
+ }
};
export default LimitEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
index 9829e696c3..a916b9594c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
@@ -3,62 +3,61 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
// import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
export const actionTypes = keyMirror({
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null
});
export const LIMITS_FORM_NAME = 'LIMITSFORM';
export const selectValues = {
- METRIC: [
- {enum: '', title: i18n('please select…')},
- {enum: 'BWTH', title: 'BWTH'},
- {enum: 'Country', title: 'Country'},
- {enum: 'Session', title: 'Session'},
- {enum: 'LoB', title: 'LoB'},
- {enum: 'Site', title: 'Site'},
- {enum: 'Usage', title: 'Usage'}
- ],
- UNIT: [
- {enum: '', title: i18n('please select…')},
- {enum: 'trunk', title: 'Trunks'},
- {enum: 'user', title: 'Users'},
- {enum: 'subscriber', title: 'Subscribers'},
- {enum: 'session', title: 'Sessions'},
- {enum: 'tenant', title: 'Tenants'},
- {enum: 'token', title: 'Tokens'},
- {enum: 'seats', title: 'Seats'},
- {enum: 'TB', title: 'TB'},
- {enum: 'GB', title: 'GB'},
- {enum: 'MB', title: 'MB'}
- ],
- AGGREGATION_FUNCTION: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Peak', title: 'Peak'},
- {enum: 'Average', title: 'Average'}
- ],
- TIME: [
- {enum: '', title: i18n('please select…')},
- {enum: 'Day', title: 'Day'},
- {enum: 'Month', title: 'Month'},
- {enum: 'Hour', title: 'Hour'},
- {enum: 'Minute', title: 'Minute'},
- {enum: 'Second', title: 'Second'},
- {enum: 'Milli-Second', title: 'Milli-Second'}
- ]
-
+ METRIC: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'BWTH', title: 'BWTH' },
+ { enum: 'Country', title: 'Country' },
+ { enum: 'Session', title: 'Session' },
+ { enum: 'LoB', title: 'LoB' },
+ { enum: 'Site', title: 'Site' },
+ { enum: 'Usage', title: 'Usage' }
+ ],
+ UNIT: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'trunk', title: 'Trunks' },
+ { enum: 'user', title: 'Users' },
+ { enum: 'subscriber', title: 'Subscribers' },
+ { enum: 'session', title: 'Sessions' },
+ { enum: 'tenant', title: 'Tenants' },
+ { enum: 'token', title: 'Tokens' },
+ { enum: 'seats', title: 'Seats' },
+ { enum: 'TB', title: 'TB' },
+ { enum: 'GB', title: 'GB' },
+ { enum: 'MB', title: 'MB' }
+ ],
+ AGGREGATION_FUNCTION: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Peak', title: 'Peak' },
+ { enum: 'Average', title: 'Average' }
+ ],
+ TIME: [
+ { enum: '', title: i18n('please select…') },
+ { enum: 'Day', title: 'Day' },
+ { enum: 'Month', title: 'Month' },
+ { enum: 'Hour', title: 'Hour' },
+ { enum: 'Minute', title: 'Minute' },
+ { enum: 'Second', title: 'Second' },
+ { enum: 'Milli-Second', title: 'Milli-Second' }
+ ]
};
export const limitType = {
- SERVICE_PROVIDER: 'ServiceProvider',
- VENDOR: 'Vendor'
+ SERVICE_PROVIDER: 'ServiceProvider',
+ VENDOR: 'Vendor'
};
export const defaultState = {
- LIMITS_EDITOR_DATA: {
- metric: {choice: '', other: ''},
- }
+ LIMITS_EDITOR_DATA: {
+ metric: { choice: '', other: '' }
+ }
};
export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
index 99d94a09cc..a0c3b0b1b1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
@@ -14,58 +14,73 @@
* permissions and limitations under the License.
*/
-import {actionTypes, LIMITS_FORM_NAME, defaultState} from './LimitEditorConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
+import {
+ actionTypes,
+ LIMITS_FORM_NAME,
+ defaultState
+} from './LimitEditorConstants.js';
+import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.OPEN:
- return {
- ...state,
- data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA,
- formReady: null,
- formName: LIMITS_FORM_NAME,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- 'metric' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'requiredChoiceWithOther', data: optionInputOther.OTHER}]
- },
- 'value' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- 'unit' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'aggregationFunction' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'time' : {
- isValid: true,
- errorText: '',
- validations: []
- }
- }
- };
- case actionTypes.CLOSE:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.OPEN:
+ return {
+ ...state,
+ data: action.limitItem
+ ? { ...action.limitItem }
+ : defaultState.LIMITS_EDITOR_DATA,
+ formReady: null,
+ formName: LIMITS_FORM_NAME,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ metric: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ {
+ type: 'requiredChoiceWithOther',
+ data: optionInputOther.OTHER
+ }
+ ]
+ },
+ value: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ unit: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ aggregationFunction: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ time: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ }
+ };
+ case actionTypes.CLOSE:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
index 4841d0335c..2667560935 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
@@ -18,99 +18,157 @@ 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 LimitEditor from './LimitEditor.js';
-import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js';
+import { NEW_LIMIT_TEMP_ID, selectValues } from './LimitEditorConstants.js';
-const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => {
- const {name, description, value, metric, aggregationFunction = '', time = ''} = limit;
- const timeLabel = time ? `per ${time}` : '';
- let metricOption = selectValues.METRIC.find(item => item.enum === metric);
- metricOption = metricOption ? metricOption.title : metric;
+const LimitItem = ({ isReadOnlyMode, limit, onDelete, onSelect }) => {
+ const {
+ name,
+ description,
+ value,
+ metric,
+ aggregationFunction = '',
+ time = ''
+ } = limit;
+ const timeLabel = time ? `per ${time}` : '';
+ let metricOption = selectValues.METRIC.find(item => item.enum === metric);
+ metricOption = metricOption ? metricOption.title : metric;
- return (
- <ListEditorItemView
- onDelete={onDelete}
- onSelect={onSelect}
- isReadOnlyMode={isReadOnlyMode}>
- <div className='list-editor-item-view-field limit-name'>
- <div className='text name'>{name}</div>
- </div>
+ return (
+ <ListEditorItemView
+ onDelete={onDelete}
+ onSelect={onSelect}
+ isReadOnlyMode={isReadOnlyMode}>
+ <div className="list-editor-item-view-field limit-name">
+ <div className="text name">{name}</div>
+ </div>
- <div className='list-editor-item-view-field limit-description'>
- <div className='text description'>{description}</div>
- </div>
+ <div className="list-editor-item-view-field limit-description">
+ <div className="text description">{description}</div>
+ </div>
- <div className='list-editor-item-view-field limit-metric-details'>
- <div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
- </div>
- </ListEditorItemView>
- );
+ <div className="list-editor-item-view-field limit-metric-details">
+ <div className="text description">{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
+ </div>
+ </ListEditorItemView>
+ );
};
class Limits extends React.Component {
+ state = {
+ localFilter: ''
+ };
+ render() {
+ const {
+ isReadOnlyMode = false,
+ limitEditor,
+ limitsList = [],
+ onCloseLimitEditor,
+ selectedLimit
+ } = this.props;
+ let limitsNames = {};
+ for (let i = 0; i < limitsList.length; i++) {
+ limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
+ }
+ return (
+ <div className="license-model-limits-view">
+ <ListEditorView isReadOnlyMode={isReadOnlyMode}>
+ {this.props.selectedLimit === NEW_LIMIT_TEMP_ID &&
+ limitEditor.data && (
+ <LimitEditor
+ limitsNames={limitsNames}
+ onCancel={onCloseLimitEditor}
+ onSubmit={() => this.submit()}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ {limitsList.length === 0 &&
+ !limitEditor.data && (
+ <div className="no-limits-text">
+ {i18n('There are no limits')}
+ </div>
+ )}
+ {limitsList.map(limit => (
+ <div key={limit.id} className="limit-item-wrapper">
+ <LimitItem
+ onDelete={() => this.deleteLimit(limit)}
+ onSelect={
+ selectedLimit
+ ? undefined
+ : () => this.props.onSelectLimit(limit)
+ }
+ clickable={!selectedLimit}
+ isReadOnlyMode={isReadOnlyMode}
+ limit={limit}
+ />
+ {limit.id === selectedLimit &&
+ limitEditor.data && (
+ <LimitEditor
+ limitsNames={limitsNames}
+ onCancel={onCloseLimitEditor}
+ onSubmit={() => this.submit()}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </div>
+ ))}
+ </ListEditorView>
+ </div>
+ );
+ }
- state = {
- localFilter: ''
- };
+ submit() {
+ let {
+ onSubmit,
+ onCloseLimitEditor,
+ parent,
+ limitEditor,
+ licenseModelId,
+ version,
+ limitType
+ } = this.props;
+ onSubmit(
+ { type: limitType, ...limitEditor.data },
+ parent,
+ licenseModelId,
+ version
+ ).then(() => onCloseLimitEditor());
+ }
- render() {
- const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props;
- let limitsNames = {};
- for (let i = 0; i < limitsList.length; i++) {
- limitsNames[limitsList[i].name.toLowerCase()] = limitsList[i].id;
- }
- return (
- <div className='license-model-limits-view'>
- <ListEditorView isReadOnlyMode={isReadOnlyMode}>
- {this.props.selectedLimit === NEW_LIMIT_TEMP_ID && limitEditor.data &&
- <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()} isReadOnlyMode={isReadOnlyMode}/>
- }
- {limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>}
- {limitsList.map(limit =>
- <div key={limit.id} className='limit-item-wrapper'>
- <LimitItem
- onDelete={() => this.deleteLimit(limit)}
- onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)}
- clickable={!selectedLimit}
- isReadOnlyMode={isReadOnlyMode}
- limit={limit}/>
- {limit.id === selectedLimit && limitEditor.data &&
- <LimitEditor
- limitsNames={limitsNames}
- onCancel={onCloseLimitEditor}
- onSubmit={ () => this.submit()}
- isReadOnlyMode={isReadOnlyMode} />
- }
- </div> )}
- </ListEditorView>
+ deleteLimit(limit) {
+ let {
+ onDelete,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ } = this.props;
+ onDelete({
+ limit,
+ parent,
+ licenseModelId,
+ version,
+ onCloseLimitEditor,
+ selectedLimit
+ });
+ }
- </div>
- );
- }
-
- submit() {
- let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;
- onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor());
- }
-
- deleteLimit(limit) {
- let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props;
- onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit});
- }
-
- filterList() {
- let {limitsList = []} = this.props;
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return limitsList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return limitsList;
- }
- }
+ filterList() {
+ let { limitsList = [] } = this.props;
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return limitsList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return limitsList;
+ }
+ }
}
export default Limits;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
index 1b8ecb9d94..679f9975e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitsServer.js
@@ -16,31 +16,29 @@
// items/{itemId}/users
-let list = [
-
-];
+let list = [];
export default {
- fetch() {
- return Promise.resolve({
- listCount: list.length,
- results: list
- });
- },
+ fetch() {
+ return Promise.resolve({
+ listCount: list.length,
+ results: list
+ });
+ },
- put(url, payload) {
- // let {removedUsers, addedUsers} = payload;
- // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
- payload.id = Math.random() * (1000 - 1) + 1;
- list.push(payload);
- return Promise.resolve();
- },
+ put(url, payload) {
+ // let {removedUsers, addedUsers} = payload;
+ // users = users.filter(user => !removedUsers.map(user => user.userId).includes(user.userId)).concat(addedUsers);
+ payload.id = Math.random() * (1000 - 1) + 1;
+ list.push(payload);
+ return Promise.resolve();
+ },
- destroy(url) {
- const parts = url.split('/');
- const id = parts[parts.length - 1];
- let newList = list.filter(item => item.id !== id);
- list = newList;
- return Promise.resolve();
- }
-}; \ No newline at end of file
+ destroy(url) {
+ const parts = url.split('/');
+ const id = parts[parts.length - 1];
+ let newList = list.filter(item => item.id !== id);
+ list = newList;
+ return Promise.resolve();
+ }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
index 54941aaaf0..2b10e426d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverview.js
@@ -13,161 +13,214 @@
* 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 LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
import LicenseModelOverviewView from './LicenseModelOverviewView.jsx';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+ overviewEditorHeaders,
+ selectedButton
+} from './LicenseModelOverviewConstants.js';
import licenseModelOverviewActionHelper from './licenseModelOverviewActionHelper.js';
export const mapStateToProps = ({
- licenseModel: {
- licenseModelEditor,
- entitlementPool,
- licenseAgreement,
- featureGroup,
- licenseKeyGroup,
- licenseModelOverview
- }
+ licenseModel: {
+ licenseModelEditor,
+ entitlementPool,
+ licenseAgreement,
+ featureGroup,
+ licenseKeyGroup,
+ licenseModelOverview
+ }
}) => {
-
- let modalHeader, licensingDataList;
- let isDisplayModal = false;
-
- const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
- let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(item => {return item.id === licenseKeyGroupId;});
- if (curLicenseKeyGroup) {
- accum.push({
- ...curLicenseKeyGroup,
- itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
- });
- }
- return accum;
- };
-
- const reduceEntitlementPools = (accum, entitlementPoolId) => {
- let curEntitlementPool = entitlementPool.entitlementPoolsList.find(item => {return item.id === entitlementPoolId;});
- if (curEntitlementPool) {
- accum.push ({
- ...curEntitlementPool,
- itemType: overviewEditorHeaders.ENTITLEMENT_POOL
- });
- }
- return accum;
- };
-
- const reduceFeatureGroups = (accum, featureGroupId) => {
- let curFeatureGroup = featureGroup.featureGroupsList.find(item => {return item.id === featureGroupId;});
- if (curFeatureGroup) {
- let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = curFeatureGroup;
- accum.push({
- ...curFeatureGroup,
- itemType: overviewEditorHeaders.FEATURE_GROUP,
- children: [
- ...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
- ...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
- ]
- });
- }
- return accum;
- };
-
-
- const checkEP = (accum, elem) => {
- if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
- accum.push({
- ...elem,
- itemType: overviewEditorHeaders.ENTITLEMENT_POOL
- });
- }
- return accum;
- };
-
- const checkLG = (accum, elem) => {
- if (!elem.referencingFeatureGroups || !elem.referencingFeatureGroups.length) {
- accum.push({
- ...elem,
- itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
- });
- }
- return accum;
- };
-
- const checkFG = (accum, elem) => {
- if (!elem.referencingLicenseAgreements || !elem.referencingLicenseAgreements.length) {
- let {entitlementPoolsIds = [], licenseKeyGroupsIds = []} = elem;
- accum.push({
- ...elem,
- itemType: overviewEditorHeaders.FEATURE_GROUP,
-
- children: [
- ...entitlementPoolsIds.length ? entitlementPoolsIds.reduce(reduceEntitlementPools, []) : [],
- ...licenseKeyGroupsIds.length ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, []) : []
- ]
-
- });
- }
- return accum;
- };
-
-
-
- const mapLicenseAgreementData = licenseAgreement => {
- let {featureGroupsIds = []} = licenseAgreement;
- return {
- ...licenseAgreement,
- itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
- children: featureGroupsIds.length ? featureGroupsIds.reduce(reduceFeatureGroups, []) : []
- };
- };
-
- if (entitlementPool.entitlementPoolEditor && entitlementPool.entitlementPoolEditor.data) {
- modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
- isDisplayModal = true;
- }else
- if (licenseAgreement.licenseAgreementEditor && licenseAgreement.licenseAgreementEditor.data) {
- modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
- isDisplayModal = true;
- }else
- if (featureGroup.featureGroupEditor && featureGroup.featureGroupEditor.data) {
- modalHeader = overviewEditorHeaders.FEATURE_GROUP;
- isDisplayModal = true;
- }else
- if (licenseKeyGroup.licenseKeyGroupsEditor && licenseKeyGroup.licenseKeyGroupsEditor.data) {
- modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
- isDisplayModal = true;
- }
-
- let orphanDataList = [
- ...featureGroup.featureGroupsList.reduce(checkFG, []),
- ...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
- ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
- ];
-
- licensingDataList = licenseAgreement.licenseAgreementList && licenseAgreement.licenseAgreementList.length ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData) : [];
- let selectedTab = licenseModelOverview.selectedTab;
- // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
- if (selectedTab === null) {
- selectedTab = (licensingDataList.length) ? selectedButton.VLM_LIST_VIEW : selectedButton.NOT_IN_USE;
- }
-
- return {
- isDisplayModal,
- modalHeader,
- licenseModelId: licenseModelEditor.data.id,
- version: licenseModelEditor.data.version,
- licensingDataList,
- orphanDataList,
- selectedTab
- };
+ let modalHeader, licensingDataList;
+ let isDisplayModal = false;
+
+ const reduceLicenseKeyGroups = (accum, licenseKeyGroupId) => {
+ let curLicenseKeyGroup = licenseKeyGroup.licenseKeyGroupsList.find(
+ item => {
+ return item.id === licenseKeyGroupId;
+ }
+ );
+ if (curLicenseKeyGroup) {
+ accum.push({
+ ...curLicenseKeyGroup,
+ itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+ });
+ }
+ return accum;
+ };
+
+ const reduceEntitlementPools = (accum, entitlementPoolId) => {
+ let curEntitlementPool = entitlementPool.entitlementPoolsList.find(
+ item => {
+ return item.id === entitlementPoolId;
+ }
+ );
+ if (curEntitlementPool) {
+ accum.push({
+ ...curEntitlementPool,
+ itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+ });
+ }
+ return accum;
+ };
+
+ const reduceFeatureGroups = (accum, featureGroupId) => {
+ let curFeatureGroup = featureGroup.featureGroupsList.find(item => {
+ return item.id === featureGroupId;
+ });
+ if (curFeatureGroup) {
+ let {
+ entitlementPoolsIds = [],
+ licenseKeyGroupsIds = []
+ } = curFeatureGroup;
+ accum.push({
+ ...curFeatureGroup,
+ itemType: overviewEditorHeaders.FEATURE_GROUP,
+ children: [
+ ...(entitlementPoolsIds.length
+ ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+ : []),
+ ...(licenseKeyGroupsIds.length
+ ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+ : [])
+ ]
+ });
+ }
+ return accum;
+ };
+
+ const checkEP = (accum, elem) => {
+ if (
+ !elem.referencingFeatureGroups ||
+ !elem.referencingFeatureGroups.length
+ ) {
+ accum.push({
+ ...elem,
+ itemType: overviewEditorHeaders.ENTITLEMENT_POOL
+ });
+ }
+ return accum;
+ };
+
+ const checkLG = (accum, elem) => {
+ if (
+ !elem.referencingFeatureGroups ||
+ !elem.referencingFeatureGroups.length
+ ) {
+ accum.push({
+ ...elem,
+ itemType: overviewEditorHeaders.LICENSE_KEY_GROUP
+ });
+ }
+ return accum;
+ };
+
+ const checkFG = (accum, elem) => {
+ if (
+ !elem.referencingLicenseAgreements ||
+ !elem.referencingLicenseAgreements.length
+ ) {
+ let { entitlementPoolsIds = [], licenseKeyGroupsIds = [] } = elem;
+ accum.push({
+ ...elem,
+ itemType: overviewEditorHeaders.FEATURE_GROUP,
+
+ children: [
+ ...(entitlementPoolsIds.length
+ ? entitlementPoolsIds.reduce(reduceEntitlementPools, [])
+ : []),
+ ...(licenseKeyGroupsIds.length
+ ? licenseKeyGroupsIds.reduce(reduceLicenseKeyGroups, [])
+ : [])
+ ]
+ });
+ }
+ return accum;
+ };
+
+ const mapLicenseAgreementData = licenseAgreement => {
+ let { featureGroupsIds = [] } = licenseAgreement;
+ return {
+ ...licenseAgreement,
+ itemType: overviewEditorHeaders.LICENSE_AGREEMENT,
+ children: featureGroupsIds.length
+ ? featureGroupsIds.reduce(reduceFeatureGroups, [])
+ : []
+ };
+ };
+
+ if (
+ entitlementPool.entitlementPoolEditor &&
+ entitlementPool.entitlementPoolEditor.data
+ ) {
+ modalHeader = overviewEditorHeaders.ENTITLEMENT_POOL;
+ isDisplayModal = true;
+ } else if (
+ licenseAgreement.licenseAgreementEditor &&
+ licenseAgreement.licenseAgreementEditor.data
+ ) {
+ modalHeader = overviewEditorHeaders.LICENSE_AGREEMENT;
+ isDisplayModal = true;
+ } else if (
+ featureGroup.featureGroupEditor &&
+ featureGroup.featureGroupEditor.data
+ ) {
+ modalHeader = overviewEditorHeaders.FEATURE_GROUP;
+ isDisplayModal = true;
+ } else if (
+ licenseKeyGroup.licenseKeyGroupsEditor &&
+ licenseKeyGroup.licenseKeyGroupsEditor.data
+ ) {
+ modalHeader = overviewEditorHeaders.LICENSE_KEY_GROUP;
+ isDisplayModal = true;
+ }
+
+ let orphanDataList = [
+ ...featureGroup.featureGroupsList.reduce(checkFG, []),
+ ...entitlementPool.entitlementPoolsList.reduce(checkEP, []),
+ ...licenseKeyGroup.licenseKeyGroupsList.reduce(checkLG, [])
+ ];
+
+ licensingDataList =
+ licenseAgreement.licenseAgreementList &&
+ licenseAgreement.licenseAgreementList.length
+ ? licenseAgreement.licenseAgreementList.map(mapLicenseAgreementData)
+ : [];
+ let selectedTab = licenseModelOverview.selectedTab;
+ // on first entry, we will decide what tab to open depending on data. if there are no connections, we will open the orphans
+ if (selectedTab === null) {
+ selectedTab = licensingDataList.length
+ ? selectedButton.VLM_LIST_VIEW
+ : selectedButton.NOT_IN_USE;
+ }
+
+ return {
+ isDisplayModal,
+ modalHeader,
+ licenseModelId: licenseModelEditor.data.id,
+ version: licenseModelEditor.data.version,
+ licensingDataList,
+ orphanDataList,
+ selectedTab
+ };
};
-const mapActionsToProps = (dispatch, {licenseModelId}) => {
- return {
- onCallVCAction: action => {
- LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action});
- },
- onTabSelect: (buttonTab) => licenseModelOverviewActionHelper.selectVLMListView(dispatch,{buttonTab})
- };
+const mapActionsToProps = (dispatch, { licenseModelId }) => {
+ return {
+ onCallVCAction: action => {
+ LicenseModelActionHelper.performVCAction(dispatch, {
+ licenseModelId,
+ action
+ });
+ },
+ onTabSelect: buttonTab =>
+ licenseModelOverviewActionHelper.selectVLMListView(dispatch, {
+ buttonTab
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(LicenseModelOverviewView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ LicenseModelOverviewView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
index 56b23384a7..b05da582f4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewConstants.js
@@ -16,27 +16,27 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const overviewItems = keyMirror({
- LICENSE_AGREEMENTS: 'License Agreements',
- FEATURE_GROUPS: 'Feature Groups',
- ENTITLEMENT_POOLS: 'Entitlement Pools',
- LICENSE_KEY_GROUPS: 'License Key Groups'
+ LICENSE_AGREEMENTS: 'License Agreements',
+ FEATURE_GROUPS: 'Feature Groups',
+ ENTITLEMENT_POOLS: 'Entitlement Pools',
+ LICENSE_KEY_GROUPS: 'License Key Groups'
});
export const overviewEditorHeaders = keyMirror({
- LICENSE_AGREEMENT: 'License Agreement',
- FEATURE_GROUP: 'Feature Group',
- ENTITLEMENT_POOL: 'Entitlement Pool',
- LICENSE_KEY_GROUP: 'License Key Group'
+ LICENSE_AGREEMENT: 'License Agreement',
+ FEATURE_GROUP: 'Feature Group',
+ ENTITLEMENT_POOL: 'Entitlement Pool',
+ LICENSE_KEY_GROUP: 'License Key Group'
});
export const actionTypes = keyMirror({
- LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
- LM_DATA_CHANGED: null
+ LICENSE_MODEL_OVERVIEW_TAB_SELECTED: null,
+ LM_DATA_CHANGED: null
});
export const selectedButton = {
- VLM_LIST_VIEW: 'VLM_LIST_VIEW',
- NOT_IN_USE: 'NOT_IN_USE'
+ VLM_LIST_VIEW: 'VLM_LIST_VIEW',
+ NOT_IN_USE: 'NOT_IN_USE'
};
export const VLM_DESCRIPTION_FORM = 'VLMDEWSCRIPTIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
index 39109af9a3..6899360597 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
@@ -23,87 +23,137 @@ import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.j
import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js';
import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js';
import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js';
-import {overviewEditorHeaders, selectedButton} from './LicenseModelOverviewConstants.js';
+import {
+ overviewEditorHeaders,
+ selectedButton
+} from './LicenseModelOverviewConstants.js';
import SummaryView from './SummaryView.jsx';
import VLMListView from './VLMListView.jsx';
import ListButtons from './summary/ListButtons.jsx';
-
-const setModalClassName = (modalHeader) => {
- switch (modalHeader) {
- case overviewEditorHeaders.ENTITLEMENT_POOL:
- return 'entitlement-pools-modal';
- case overviewEditorHeaders.LICENSE_AGREEMENT:
- return 'license-agreement-modal';
- case overviewEditorHeaders.FEATURE_GROUP:
- return 'feature-group-modal';
- case overviewEditorHeaders.LICENSE_KEY_GROUP:
- return 'license-key-groups-modal';
- default:
- return '';
- }
+const setModalClassName = modalHeader => {
+ switch (modalHeader) {
+ case overviewEditorHeaders.ENTITLEMENT_POOL:
+ return 'entitlement-pools-modal';
+ case overviewEditorHeaders.LICENSE_AGREEMENT:
+ return 'license-agreement-modal';
+ case overviewEditorHeaders.FEATURE_GROUP:
+ return 'feature-group-modal';
+ case overviewEditorHeaders.LICENSE_KEY_GROUP:
+ return 'license-key-groups-modal';
+ default:
+ return '';
+ }
};
class LicenseModelOverviewView extends React.Component {
+ static propTypes = {
+ isDisplayModal: PropTypes.bool,
+ isReadOnlyMode: PropTypes.bool,
+ licenseModelId: PropTypes.string,
+ licensingDataList: PropTypes.array,
+ orphanDataList: PropTypes.array,
+ modalHeader: PropTypes.string,
+ selectedTab: PropTypes.string,
+ onTabSelect: PropTypes.func,
+ onCallVCAction: PropTypes.func,
+ onClose: PropTypes.func
+ };
- static propTypes = {
- isDisplayModal: PropTypes.bool,
- isReadOnlyMode: PropTypes.bool,
- licenseModelId: PropTypes.string,
- licensingDataList: PropTypes.array,
- orphanDataList: PropTypes.array,
- modalHeader: PropTypes.string,
- selectedTab: PropTypes.string,
- onTabSelect: PropTypes.func,
- onCallVCAction: PropTypes.func,
- onClose: PropTypes.func
- };
-
- render() {
- let {isDisplayModal, modalHeader, licensingDataList, selectedTab, onTabSelect, orphanDataList, isReadOnlyMode} = this.props;
- let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
- let dataList = selectedInUse ? licensingDataList : orphanDataList;
- return(
- <div className='license-model-overview'>
- <SummaryView isReadOnlyMode={isReadOnlyMode}/>
- <div className={classNames('overview-list-section ', !selectedInUse ? 'overview-list-orphans' : '' )}>
- <div className='vlm-list-tab-panel'>
- <ListButtons onTabSelect={onTabSelect}
- selectedTab={selectedTab}
- hasOrphans={orphanDataList.length > 0}
- hasLicensing={licensingDataList.length > 0}/>
- </div>
- <VLMListView licensingDataList={dataList} showInUse={selectedInUse}/>
- </div>
- {
- isDisplayModal &&
- <Modal show={isDisplayModal} bsSize='large' animation={true} className={classNames('onborading-modal license-model-modal', setModalClassName(modalHeader))}>
- <Modal.Header>
- <Modal.Title>{`${i18n('Create New ')}${i18n(modalHeader)}`}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {this.renderModalBody(modalHeader)}
- </Modal.Body>
- </Modal>
- }
- </div>
- );
- }
+ render() {
+ let {
+ isDisplayModal,
+ modalHeader,
+ licensingDataList,
+ selectedTab,
+ onTabSelect,
+ orphanDataList,
+ isReadOnlyMode
+ } = this.props;
+ let selectedInUse = selectedTab !== selectedButton.NOT_IN_USE;
+ let dataList = selectedInUse ? licensingDataList : orphanDataList;
+ return (
+ <div className="license-model-overview">
+ <SummaryView isReadOnlyMode={isReadOnlyMode} />
+ <div
+ className={classNames(
+ 'overview-list-section ',
+ !selectedInUse ? 'overview-list-orphans' : ''
+ )}>
+ <div className="vlm-list-tab-panel">
+ <ListButtons
+ onTabSelect={onTabSelect}
+ selectedTab={selectedTab}
+ hasOrphans={orphanDataList.length > 0}
+ hasLicensing={licensingDataList.length > 0}
+ />
+ </div>
+ <VLMListView
+ licensingDataList={dataList}
+ showInUse={selectedInUse}
+ />
+ </div>
+ {isDisplayModal && (
+ <Modal
+ show={isDisplayModal}
+ bsSize="large"
+ animation={true}
+ className={classNames(
+ 'onborading-modal license-model-modal',
+ setModalClassName(modalHeader)
+ )}>
+ <Modal.Header>
+ <Modal.Title>{`${i18n('Create New ')}${i18n(
+ modalHeader
+ )}`}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ {this.renderModalBody(modalHeader)}
+ </Modal.Body>
+ </Modal>
+ )}
+ </div>
+ );
+ }
- renderModalBody(modalHeader) {
- let {licenseModelId, version, isReadOnlyMode} = this.props;
- switch (modalHeader) {
- case overviewEditorHeaders.ENTITLEMENT_POOL:
- return <EntitlementPoolsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
- case overviewEditorHeaders.LICENSE_AGREEMENT:
- return <LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
- case overviewEditorHeaders.FEATURE_GROUP:
- return <FeatureGroupEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
- case overviewEditorHeaders.LICENSE_KEY_GROUP:
- return <LicenseKeyGroupsEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode}/>;
- }
- }
+ renderModalBody(modalHeader) {
+ let { licenseModelId, version, isReadOnlyMode } = this.props;
+ switch (modalHeader) {
+ case overviewEditorHeaders.ENTITLEMENT_POOL:
+ return (
+ <EntitlementPoolsEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ );
+ case overviewEditorHeaders.LICENSE_AGREEMENT:
+ return (
+ <LicenseAgreementEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ );
+ case overviewEditorHeaders.FEATURE_GROUP:
+ return (
+ <FeatureGroupEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ );
+ case overviewEditorHeaders.LICENSE_KEY_GROUP:
+ return (
+ <LicenseKeyGroupsEditor
+ version={version}
+ licenseModelId={licenseModelId}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ );
+ }
+ }
}
-export default LicenseModelOverviewView;
+export default LicenseModelOverviewView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
index 4053f14ced..f416b0a07f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/SummaryView.jsx
@@ -13,24 +13,24 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {default as VendorDataView} from './summary/VendorDataView.js';
-import {default as SummaryCountList} from './summary/SummaryCountList.js';
+import { default as VendorDataView } from './summary/VendorDataView.js';
+import { default as SummaryCountList } from './summary/SummaryCountList.js';
class SummaryView extends Component {
- render() {
- const {isReadOnlyMode} = this.props;
- return(
- <div className='overview-top-section'>
- <div className='page-title'>{i18n('overview')}</div>
- <div className='license-model-overview-top'>
- <VendorDataView isReadOnlyMode={isReadOnlyMode}/>
- <SummaryCountList isReadOnlyMode={isReadOnlyMode}/>
- </div>
- </div>
- );
- }
+ render() {
+ const { isReadOnlyMode } = this.props;
+ return (
+ <div className="overview-top-section">
+ <div className="page-title">{i18n('overview')}</div>
+ <div className="license-model-overview-top">
+ <VendorDataView isReadOnlyMode={isReadOnlyMode} />
+ <SummaryCountList isReadOnlyMode={isReadOnlyMode} />
+ </div>
+ </div>
+ );
+ }
}
export default SummaryView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
index 012bd6e158..d91960e6a3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/VLMListView.jsx
@@ -13,114 +13,130 @@
* or implied. 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 {Collapse} from 'react-bootstrap';
+import { Collapse } from 'react-bootstrap';
import LicenseAgreement from './listItems/LicenseAgreement.jsx';
import EntitlementPool from './listItems/EntitlementPool.jsx';
import FeatureGroup from './listItems/FeatureGroup.jsx';
import LicenseKeyGroup from './listItems/LicenseKeyGroup.jsx';
-import {overviewEditorHeaders} from './LicenseModelOverviewConstants.js';
+import { overviewEditorHeaders } from './LicenseModelOverviewConstants.js';
class VLMListView extends Component {
+ static propTypes = {
+ licensingDataList: PropTypes.array,
+ showInUse: PropTypes.bool
+ };
- static propTypes = {
- licensingDataList: PropTypes.array,
- showInUse: PropTypes.bool
- };
+ state = {};
- state = {
+ render() {
+ let { licensingDataList = [] } = this.props;
+ return (
+ <div className="vlm-list-view">
+ <div>
+ <ul className="vlm-list" data-test-id="vlm-list">
+ {licensingDataList.map(item =>
+ this.renderLicensingItem(item)
+ )}
+ </ul>
+ </div>
+ </div>
+ );
+ }
- };
+ renderLicensingItem(item) {
+ switch (item.itemType) {
+ case overviewEditorHeaders.LICENSE_AGREEMENT:
+ return this.renderLicenseAgreementItem(item);
+ case overviewEditorHeaders.FEATURE_GROUP:
+ return this.renderFeatureGroupItem(item);
+ case overviewEditorHeaders.LICENSE_KEY_GROUP:
+ return this.renderLicenseKeyGroupItem(item);
+ case overviewEditorHeaders.ENTITLEMENT_POOL:
+ return this.renderEntitlementPoolItem(item);
+ default:
+ return;
+ }
+ }
- render() {
- let {licensingDataList = []} = this.props;
- return (
- <div className='vlm-list-view'>
- <div>
- <ul className='vlm-list' data-test-id='vlm-list'>
- {licensingDataList.map(item => this.renderLicensingItem(item))}
- </ul>
- </div>
- </div>
- );
- }
+ renderLicenseAgreementItem(licenseAgreement) {
+ return (
+ <li key={licenseAgreement.id}>
+ <LicenseAgreement
+ laData={licenseAgreement}
+ isCollapsed={this.state[licenseAgreement.id]}
+ onClick={event =>
+ this.updateCollapsable(event, licenseAgreement.id)
+ }
+ isOrphan={!this.props.showInUse}
+ />
+ <Collapse in={this.state[licenseAgreement.id]}>
+ <ul>
+ {licenseAgreement.children &&
+ licenseAgreement.children.map(item =>
+ this.renderLicensingItem(item)
+ )}
+ </ul>
+ </Collapse>
+ </li>
+ );
+ }
- renderLicensingItem(item) {
- switch (item.itemType) {
- case overviewEditorHeaders.LICENSE_AGREEMENT :
- return this.renderLicenseAgreementItem(item);
- case overviewEditorHeaders.FEATURE_GROUP :
- return this.renderFeatureGroupItem(item);
- case overviewEditorHeaders.LICENSE_KEY_GROUP :
- return this.renderLicenseKeyGroupItem(item);
- case overviewEditorHeaders.ENTITLEMENT_POOL:
- return this.renderEntitlementPoolItem(item);
- default:
- return;
- }
- }
+ renderFeatureGroupItem(featureGroup) {
+ const { showInUse } = this.props;
+ return (
+ <li key={featureGroup.id}>
+ <FeatureGroup
+ fgData={featureGroup}
+ isCollapsed={this.state[featureGroup.id]}
+ onClick={event =>
+ this.updateCollapsable(event, featureGroup.id)
+ }
+ isOrphan={!this.props.showInUse}
+ />
+ {showInUse && (
+ <Collapse in={this.state[featureGroup.id]}>
+ <ul>
+ {featureGroup.children &&
+ featureGroup.children.map(item =>
+ this.renderLicensingItem(item)
+ )}
+ </ul>
+ </Collapse>
+ )}
+ </li>
+ );
+ }
- renderLicenseAgreementItem(licenseAgreement) {
- return (
- <li key={licenseAgreement.id}>
- <LicenseAgreement
- laData={licenseAgreement}
- isCollapsed={this.state[licenseAgreement.id]}
- onClick={event => this.updateCollapsable(event, licenseAgreement.id) }
- isOrphan={!this.props.showInUse}/>
- <Collapse in={this.state[licenseAgreement.id]}>
- <ul>
- {licenseAgreement.children && licenseAgreement.children.map(item => this.renderLicensingItem(item))}
- </ul>
- </Collapse>
- </li>
- );
- }
+ renderEntitlementPoolItem(entitlementPool) {
+ return (
+ <li key={entitlementPool.id}>
+ <EntitlementPool
+ epData={entitlementPool}
+ isOrphan={!this.props.showInUse}
+ />
+ </li>
+ );
+ }
- renderFeatureGroupItem(featureGroup) {
- const {showInUse} = this.props;
- return (
- <li key={featureGroup.id}>
- <FeatureGroup
- fgData={featureGroup}
- isCollapsed={this.state[featureGroup.id]}
- onClick={event=> this.updateCollapsable(event, featureGroup.id) }
- isOrphan={!this.props.showInUse}/>
- {
- showInUse && <Collapse in={this.state[featureGroup.id]}>
- <ul>
- {featureGroup.children && featureGroup.children.map(item => this.renderLicensingItem(item))}
+ renderLicenseKeyGroupItem(licenseKeyGroup) {
+ return (
+ <li key={licenseKeyGroup.id}>
+ <LicenseKeyGroup
+ lkgData={licenseKeyGroup}
+ isOrphan={!this.props.showInUse}
+ />
+ </li>
+ );
+ }
- </ul>
- </Collapse>
- }
- </li>
- );
- }
-
- renderEntitlementPoolItem(entitlementPool) {
- return (
- <li key={entitlementPool.id}>
- <EntitlementPool epData={entitlementPool} isOrphan={!this.props.showInUse}/>
- </li>
- );
- }
-
- renderLicenseKeyGroupItem(licenseKeyGroup) {
- return (
- <li key={licenseKeyGroup.id}>
- <LicenseKeyGroup lkgData={licenseKeyGroup} isOrphan={!this.props.showInUse}/>
- </li>
- );
- }
-
- updateCollapsable(event, id) {
- event.stopPropagation();
- let obj = {};
- obj[id] = !this.state[id];
- this.setState(obj);
- }
+ updateCollapsable(event, id) {
+ event.stopPropagation();
+ let obj = {};
+ obj[id] = !this.state[id];
+ this.setState(obj);
+ }
}
export default VLMListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
index af9bc22b07..0e9fca7b4a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/licenseModelOverviewActionHelper.js
@@ -13,27 +13,27 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './LicenseModelOverviewConstants.js';
+import { actionTypes } from './LicenseModelOverviewConstants.js';
export default {
- selectVLMListView(dispatch, {buttonTab}) {
- dispatch({
- type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
- buttonTab
- });
- },
+ selectVLMListView(dispatch, { buttonTab }) {
+ dispatch({
+ type: actionTypes.LICENSE_MODEL_OVERVIEW_TAB_SELECTED,
+ buttonTab
+ });
+ },
- editDescriptionOpen(dispatch, {description}) {
- dispatch({
- type: actionTypes.LM_DATA_CHANGED,
- description
- });
- },
+ editDescriptionOpen(dispatch, { description }) {
+ dispatch({
+ type: actionTypes.LM_DATA_CHANGED,
+ description
+ });
+ },
- editDescriptionClose(dispatch) {
- dispatch({
- type: actionTypes.LM_DATA_CHANGED,
- description: undefined
- });
- }
+ editDescriptionClose(dispatch) {
+ dispatch({
+ type: actionTypes.LM_DATA_CHANGED,
+ description: undefined
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
index 34d2ee6db5..60eba401c7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
@@ -13,33 +13,46 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractUnits} from '../../entitlementPools/EntitlementPoolsConstants.js';
+import { extractUnits } from '../../entitlementPools/EntitlementPoolsConstants.js';
import ArrowCol from './listItemsComponents/ArrowCol.jsx';
import ItemInfo from './listItemsComponents/ItemInfo.jsx';
import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+ AdditionalDataCol,
+ AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
class EntitlementPool extends Component {
- render() {
- let {epData: {name, description, thresholdValue, thresholdUnits}, isOrphan} = this.props;
- return (
- <div className={`vlm-list-item vlm-list-item-ep ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-ep'>
- {!isOrphan && <ArrowCol/>}
- <IconCol className='ep-icon' text='EP'/>
- <ItemInfo name={name} description={description}/>
- <AdditionalDataCol>
- {thresholdValue && <AdditionalDataElement
- className='vlm-list-item-entitlement-metric'
- name={i18n('Entitlement')}
- value={`${thresholdValue} ${extractUnits(thresholdUnits)}`}/>
- }
- </AdditionalDataCol>
- </div>
- );
- }
-
+ render() {
+ let {
+ epData: { name, description, thresholdValue, thresholdUnits },
+ isOrphan
+ } = this.props;
+ return (
+ <div
+ className={`vlm-list-item vlm-list-item-ep ${
+ isOrphan ? 'orphan-list-item' : ''
+ }`}
+ data-test-id="vlm-list-item-ep">
+ {!isOrphan && <ArrowCol />}
+ <IconCol className="ep-icon" text="EP" />
+ <ItemInfo name={name} description={description} />
+ <AdditionalDataCol>
+ {thresholdValue && (
+ <AdditionalDataElement
+ className="vlm-list-item-entitlement-metric"
+ name={i18n('Entitlement')}
+ value={`${thresholdValue} ${extractUnits(
+ thresholdUnits
+ )}`}
+ />
+ )}
+ </AdditionalDataCol>
+ </div>
+ );
+ }
}
export default EntitlementPool;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
index 6d97dea358..df1d813408 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
@@ -13,49 +13,83 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
-import {overviewEditorHeaders} from '../LicenseModelOverviewConstants.js';
+import React, { Component } from 'react';
+import { overviewEditorHeaders } from '../LicenseModelOverviewConstants.js';
import ArrowCol from './listItemsComponents/ArrowCol.jsx';
import ItemInfo from './listItemsComponents/ItemInfo.jsx';
import IconCol from './listItemsComponents/IconCol.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+ AdditionalDataCol,
+ AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
class FeatureGroup extends Component {
- render() {
- let {fgData: {name, manufacturerReferenceNumber, description, children = []}, isCollapsed, onClick, isOrphan} = this.props;
- return (
- <div
- onClick={e => onClick(e)}
- className={`vlm-list-item vlm-list-item-fg ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''}`} data-test-id='vlm-list-item-fg'>
- {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
- <IconCol className='fg-icon' text='FG'/>
- <ItemInfo name={name} description={description}>
- <div className='children-count'>
- <span className='count-value'>
- {i18n('Entitlement Pools: ')}
- <span data-test-id='vlm-list-ep-count-value'>
- {`${children.filter(child => child.itemType === overviewEditorHeaders.ENTITLEMENT_POOL).length}`}
- </span>
- </span>
- <span className='fg-pipeline-separator'>|</span>
- <span className='count-value'>
- {i18n('License Key Groups: ')}
- <span data-test-id='vlm-list-lkg-count-value'>
- {`${children.filter(child => child.itemType === overviewEditorHeaders.LICENSE_KEY_GROUP).length}`}
- </span>
- </span>
- </div>
- </ItemInfo>
- <AdditionalDataCol>
- <AdditionalDataElement
- name={i18n('Manufacturer Reference Number')}
- value={manufacturerReferenceNumber}
- className='vlm-list-item-sku'/>
- </AdditionalDataCol>
- </div>
- );
- }
+ render() {
+ let {
+ fgData: {
+ name,
+ manufacturerReferenceNumber,
+ description,
+ children = []
+ },
+ isCollapsed,
+ onClick,
+ isOrphan
+ } = this.props;
+ return (
+ <div
+ onClick={e => onClick(e)}
+ className={`vlm-list-item vlm-list-item-fg ${
+ isOrphan ? 'orphan-list-item' : ''
+ } ${children.length && !isOrphan ? 'clickable' : ''}`}
+ data-test-id="vlm-list-item-fg">
+ {!isOrphan && (
+ <ArrowCol
+ isCollapsed={isCollapsed}
+ length={children.length}
+ />
+ )}
+ <IconCol className="fg-icon" text="FG" />
+ <ItemInfo name={name} description={description}>
+ <div className="children-count">
+ <span className="count-value">
+ {i18n('Entitlement Pools: ')}
+ <span data-test-id="vlm-list-ep-count-value">
+ {`${
+ children.filter(
+ child =>
+ child.itemType ===
+ overviewEditorHeaders.ENTITLEMENT_POOL
+ ).length
+ }`}
+ </span>
+ </span>
+ <span className="fg-pipeline-separator">|</span>
+ <span className="count-value">
+ {i18n('License Key Groups: ')}
+ <span data-test-id="vlm-list-lkg-count-value">
+ {`${
+ children.filter(
+ child =>
+ child.itemType ===
+ overviewEditorHeaders.LICENSE_KEY_GROUP
+ ).length
+ }`}
+ </span>
+ </span>
+ </div>
+ </ItemInfo>
+ <AdditionalDataCol>
+ <AdditionalDataElement
+ name={i18n('Manufacturer Reference Number')}
+ value={manufacturerReferenceNumber}
+ className="vlm-list-item-sku"
+ />
+ </AdditionalDataCol>
+ </div>
+ );
+ }
}
export default FeatureGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
index dfbbe20d69..b409776c27 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseAgreement.jsx
@@ -13,44 +13,73 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import {optionsInputValues} from '../../licenseAgreement/LicenseAgreementConstants.js';
+import InputOptions, {
+ other as optionInputOther
+} from 'nfvo-components/input/validation/InputOptions.jsx';
+import { optionsInputValues } from '../../licenseAgreement/LicenseAgreementConstants.js';
import ArrowCol from './listItemsComponents/ArrowCol.jsx';
import ItemInfo from './listItemsComponents/ItemInfo.jsx';
import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+ AdditionalDataCol,
+ AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
class LicenseAgreement extends Component {
- render() {
- let {laData: {name, description, licenseTerm, children = []}, isCollapsed, onClick, isOrphan} = this.props;
- return (
- <div
- onClick={e => onClick(e)}
- className={`vlm-list-item vlm-list-item-la ${isOrphan ? 'orphan-list-item' : ''} ${children.length && !isOrphan ? 'clickable' : ''} `}
- data-test-id='vlm-list-la-item'>
- {!isOrphan && <ArrowCol isCollapsed={isCollapsed} length={children.length} />}
- <IconCol className='la-icon' text='LA'/>
- <ItemInfo name={name} description={description}>
- <div className='children-count'>
- <span className='count-value'>{i18n('Feature Groups: ')}<span data-test-id='vlm-list-fg-count-value'>{`${children.length}`}</span></span>
- </div>
- </ItemInfo>
- <AdditionalDataCol>
- <AdditionalDataElement
- name={i18n('License Model Type')}
- value={this.extractValue(licenseTerm)}/>
- </AdditionalDataCol>
- </div>
- );
- }
+ render() {
+ let {
+ laData: { name, description, licenseTerm, children = [] },
+ isCollapsed,
+ onClick,
+ isOrphan
+ } = this.props;
+ return (
+ <div
+ onClick={e => onClick(e)}
+ className={`vlm-list-item vlm-list-item-la ${
+ isOrphan ? 'orphan-list-item' : ''
+ } ${children.length && !isOrphan ? 'clickable' : ''} `}
+ data-test-id="vlm-list-la-item">
+ {!isOrphan && (
+ <ArrowCol
+ isCollapsed={isCollapsed}
+ length={children.length}
+ />
+ )}
+ <IconCol className="la-icon" text="LA" />
+ <ItemInfo name={name} description={description}>
+ <div className="children-count">
+ <span className="count-value">
+ {i18n('Feature Groups: ')}
+ <span data-test-id="vlm-list-fg-count-value">{`${
+ children.length
+ }`}</span>
+ </span>
+ </div>
+ </ItemInfo>
+ <AdditionalDataCol>
+ <AdditionalDataElement
+ name={i18n('License Model Type')}
+ value={this.extractValue(licenseTerm)}
+ />
+ </AdditionalDataCol>
+ </div>
+ );
+ }
- extractValue(item) {
- if (item === undefined) {return '';} //TODO fix it later
+ extractValue(item) {
+ if (item === undefined) {
+ return '';
+ } //TODO fix it later
- return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
- }
+ return item
+ ? item.choice === optionInputOther.OTHER
+ ? item.other
+ : InputOptions.getTitleByName(optionsInputValues, item.choice)
+ : '';
+ }
}
export default LicenseAgreement;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
index b1036aae23..555acf8dbe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
@@ -13,36 +13,53 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
-import {extractValue, getOperationalScopes} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
+import {
+ extractValue,
+ getOperationalScopes
+} from '../../licenseKeyGroups/LicenseKeyGroupsConstants.js';
import ArrowCol from './listItemsComponents/ArrowCol.jsx';
import ItemInfo from './listItemsComponents/ItemInfo.jsx';
import IconCol from './listItemsComponents/IconCol.jsx';
-import {AdditionalDataCol, AdditionalDataElement} from './listItemsComponents/AdditionalDataCol.jsx';
+import {
+ AdditionalDataCol,
+ AdditionalDataElement
+} from './listItemsComponents/AdditionalDataCol.jsx';
class LicenseKeyGroup extends Component {
- render() {
- let {lkgData: {name, description, operationalScope, type}, isOrphan} = this.props;
- return (
- <div className={`vlm-list-item vlm-list-item-lkg ${isOrphan ? 'orphan-list-item' : ''}`} data-test-id='vlm-list-item-lkg'>
- {!isOrphan && <ArrowCol/>}
- <IconCol className='lkg-icon' text='LKG'/>
- <ItemInfo name={name} description={description}/>
- <AdditionalDataCol>
- {operationalScope && operationalScope.choices && <AdditionalDataElement
- className='vlm-list-item-operational-scope'
- name={i18n('Operational Scope')}
- value={getOperationalScopes(operationalScope)}/>}
- <AdditionalDataElement
- className='vlm-list-item-group-type'
- name={i18n('Type')}
- value={extractValue(type)}/>
- </AdditionalDataCol>
- </div>
- );
- }
-
+ render() {
+ let {
+ lkgData: { name, description, operationalScope, type },
+ isOrphan
+ } = this.props;
+ return (
+ <div
+ className={`vlm-list-item vlm-list-item-lkg ${
+ isOrphan ? 'orphan-list-item' : ''
+ }`}
+ data-test-id="vlm-list-item-lkg">
+ {!isOrphan && <ArrowCol />}
+ <IconCol className="lkg-icon" text="LKG" />
+ <ItemInfo name={name} description={description} />
+ <AdditionalDataCol>
+ {operationalScope &&
+ operationalScope.choices && (
+ <AdditionalDataElement
+ className="vlm-list-item-operational-scope"
+ name={i18n('Operational Scope')}
+ value={getOperationalScopes(operationalScope)}
+ />
+ )}
+ <AdditionalDataElement
+ className="vlm-list-item-group-type"
+ name={i18n('Type')}
+ value={extractValue(type)}
+ />
+ </AdditionalDataCol>
+ </div>
+ );
+ }
}
export default LicenseKeyGroup;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
index ffc0991354..0f9c783eac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/AdditionalDataCol.jsx
@@ -16,37 +16,35 @@
import React from 'react';
import PropTypes from 'prop-types';
-function AdditionalDataCol({children}) {
- return (
- <div className='list-item-section list-item-additional-data-col'>
- <div className='additional-data-col-border'></div>
- <div className='additional-data'>
- {children}
- </div>
- </div>
- );
+function AdditionalDataCol({ children }) {
+ return (
+ <div className="list-item-section list-item-additional-data-col">
+ <div className="additional-data-col-border" />
+ <div className="additional-data">{children}</div>
+ </div>
+ );
}
AdditionalDataCol.propTypes = {
- children: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.node),
- PropTypes.node
- ])
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node
+ ])
};
-function AdditionalDataElement({className, name, value}) {
- return (
- <div className={className}>
- <span className='additional-data-name'>{name}: </span>
- <span className='additional-data-value'>{value}</span>
- </div>
- );
+function AdditionalDataElement({ className, name, value }) {
+ return (
+ <div className={className}>
+ <span className="additional-data-name">{name}: </span>
+ <span className="additional-data-value">{value}</span>
+ </div>
+ );
}
AdditionalDataElement.propTypes = {
- name: PropTypes.string,
- value: PropTypes.string,
- className: PropTypes.string
+ name: PropTypes.string,
+ value: PropTypes.string,
+ className: PropTypes.string
};
-export {AdditionalDataCol, AdditionalDataElement};
+export { AdditionalDataCol, AdditionalDataElement };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
index 29aec64bdd..de12eae7d5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ArrowCol.jsx
@@ -17,20 +17,24 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-function ArrowCol ({isCollapsed, length}) {
- return (
- <div className='list-item-section list-item-arrow-col'>
- <div className={classNames('arrow-icon', {'chevron': length > 0},
- {'down': (length > 0 && isCollapsed)},
- {'right': (length > 0 && (!isCollapsed))})} >
- </div>
- </div>
- );
+function ArrowCol({ isCollapsed, length }) {
+ return (
+ <div className="list-item-section list-item-arrow-col">
+ <div
+ className={classNames(
+ 'arrow-icon',
+ { chevron: length > 0 },
+ { down: length > 0 && isCollapsed },
+ { right: length > 0 && !isCollapsed }
+ )}
+ />
+ </div>
+ );
}
ArrowCol.propTypes = {
- isCollapsed: PropTypes.bool,
- length: PropTypes.number
+ isCollapsed: PropTypes.bool,
+ length: PropTypes.number
};
export default ArrowCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
index 826248e510..61eeb03496 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/IconCol.jsx
@@ -15,12 +15,14 @@
*/
import React from 'react';
-function IconCol({className, text}) {
- return (
- <div className='list-item-section list-item-icon-col'>
- <div className={`overview-list-icon ${className ? className : ''}`}>{text}</div>
- </div>
- );
+function IconCol({ className, text }) {
+ return (
+ <div className="list-item-section list-item-icon-col">
+ <div className={`overview-list-icon ${className ? className : ''}`}>
+ {text}
+ </div>
+ </div>
+ );
}
export default IconCol;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
index 95ae123974..2d2cc8f754 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/listItemsComponents/ItemInfo.jsx
@@ -16,25 +16,27 @@
import React from 'react';
import PropTypes from 'prop-types';
-function ItemInfo({name, description, children}) {
- return (
- <div className='list-item-section vlm-item-info'>
- <div className='vlm-list-item-title'>
- <div className='item-name' data-test-id='vlm-list-item-name'>{name}</div>
- {children}
- </div>
- <div className='vlm-list-item-description'>{description}</div>
- </div>
- );
+function ItemInfo({ name, description, children }) {
+ return (
+ <div className="list-item-section vlm-item-info">
+ <div className="vlm-list-item-title">
+ <div className="item-name" data-test-id="vlm-list-item-name">
+ {name}
+ </div>
+ {children}
+ </div>
+ <div className="vlm-list-item-description">{description}</div>
+ </div>
+ );
}
ItemInfo.propTypes = {
- name: PropTypes.string,
- description: PropTypes.string,
- children: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.node),
- PropTypes.node
- ])
+ name: PropTypes.string,
+ description: PropTypes.string,
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node
+ ])
};
export default ItemInfo;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
index af759f1206..04a00177d3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
@@ -18,42 +18,54 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
class LicenseModelDescriptionEdit extends React.Component {
- render() {
- //TODO check if buttons
- let {onDataChanged, description, genericFieldInfo} = this.props;
- let {isValid, errorText} = genericFieldInfo.description;
- let saveButtonClassName = isValid ? 'description-save' : 'description-save disabled';
- return(
- <div className='vendor-description-edit'>
+ render() {
+ //TODO check if buttons
+ let { onDataChanged, description, genericFieldInfo } = this.props;
+ let { isValid, errorText } = genericFieldInfo.description;
+ let saveButtonClassName = isValid
+ ? 'description-save'
+ : 'description-save disabled';
+ return (
+ <div className="vendor-description-edit">
+ <Input
+ onChange={description => onDataChanged({ description })}
+ value={description}
+ isValid={isValid}
+ errorText={errorText}
+ className="description-edit-textarea"
+ type="textarea"
+ />
+ <div className="buttons-row">
+ <div className="buttons-wrapper">
+ <div
+ onClick={() => this.submit()}
+ className={saveButtonClassName}
+ data-test-id="vlm-summary-vendor-desc-save-btn">
+ {i18n('Save')}
+ </div>
+ <div
+ onClick={() => this.onClose()}
+ className="description-button"
+ data-test-id="vlm-summary-vendor-desc-cancel-btn">
+ {i18n('Cancel')}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
- <Input
- onChange={description => onDataChanged({description})}
- value={description}
- isValid={isValid}
- errorText={errorText}
- className='description-edit-textarea'
- type='textarea'/>
- <div className='buttons-row'>
- <div className='buttons-wrapper'>
- <div onClick={() => this.submit()} className={saveButtonClassName} data-test-id='vlm-summary-vendor-desc-save-btn'>{i18n('Save')}</div>
- <div onClick={() => this.onClose()} className='description-button' data-test-id='vlm-summary-vendor-desc-cancel-btn'>{i18n('Cancel')}</div>
- </div>
- </div>
- </div>
- );
- }
+ onClose() {
+ this.props.onClose();
+ }
- onClose() {
- this.props.onClose();
- }
-
- submit() {
- let {onSubmit, data, description} = this.props;
- onSubmit({
- ...data,
- description: description.trim()
- });
- }
+ submit() {
+ let { onSubmit, data, description } = this.props;
+ onSubmit({
+ ...data,
+ description: description.trim()
+ });
+ }
}
export default LicenseModelDescriptionEdit;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
index 3fcac3c1d8..d422d5d4b2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -15,37 +15,39 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import {selectedButton} from '../LicenseModelOverviewConstants.js';
+import { selectedButton } from '../LicenseModelOverviewConstants.js';
import Tabs from 'sdc-ui/lib/react/Tabs.js';
import Tab from 'sdc-ui/lib/react/Tab.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-function ListButtons ({onTabSelect, selectedTab, hasOrphans, hasLicensing}) {
- // no data, no tabs
- if (!hasLicensing && !hasOrphans) {
- return null;
- }
- return (
- <Tabs
- onTabClick={(tabId) => onTabSelect(tabId)}
- activeTab={selectedTab}
- className='overview-buttons-section'
- type='header' >
- <Tab
- tabId={selectedButton.VLM_LIST_VIEW}
- title={i18n('Connections List')}
- data-test-id='vlm-overview-vlmlist-tab' />
- <Tab
- tabId={selectedButton.NOT_IN_USE}
- title={i18n('Orphans List')}
- data-test-id='vlm-overview-orphans-tab' />
- </Tabs>
- );
+function ListButtons({ onTabSelect, selectedTab, hasOrphans, hasLicensing }) {
+ // no data, no tabs
+ if (!hasLicensing && !hasOrphans) {
+ return null;
+ }
+ return (
+ <Tabs
+ onTabClick={tabId => onTabSelect(tabId)}
+ activeTab={selectedTab}
+ className="overview-buttons-section"
+ type="header">
+ <Tab
+ tabId={selectedButton.VLM_LIST_VIEW}
+ title={i18n('Connections List')}
+ data-test-id="vlm-overview-vlmlist-tab"
+ />
+ <Tab
+ tabId={selectedButton.NOT_IN_USE}
+ title={i18n('Orphans List')}
+ data-test-id="vlm-overview-orphans-tab"
+ />
+ </Tabs>
+ );
}
ListButtons.propTypes = {
- onTabSelect: PropTypes.func,
- selectedInUse: PropTypes.bool
+ onTabSelect: PropTypes.func,
+ selectedInUse: PropTypes.bool
};
export default ListButtons;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
index 50c547e042..144d9bcc1b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
@@ -16,19 +16,43 @@
import React from 'react';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-function SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) {
- //TODO check for buttons
- return(
- <div className='summary-count-item'>
- <div className='summary-name-and-count' onClick={onNavigate}>
- <span className='item-name' onClick={onNavigate}>{name}</span>
- <span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span>
- </div>
- <SVGIcon name='plusCircle' disabled={isReadOnlyMode} className={isReadOnlyMode ? 'disabled' : ''}
- color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
- </div>
- );
+function SummaryCountItem({
+ name,
+ counter,
+ onAdd,
+ onNavigate,
+ isReadOnlyMode
+}) {
+ //TODO check for buttons
+ return (
+ <div className="summary-count-item">
+ <div className="summary-name-and-count" onClick={onNavigate}>
+ <span className="item-name" onClick={onNavigate}>
+ {name}
+ </span>
+ <span
+ className="item-count"
+ onClick={onNavigate}
+ data-test-id={
+ 'vlm-summary-vendor-counter-' +
+ name.toLowerCase().replace(/\s/g, '-')
+ }>
+ ({counter})
+ </span>
+ </div>
+ <SVGIcon
+ name="plusCircle"
+ disabled={isReadOnlyMode}
+ className={isReadOnlyMode ? 'disabled' : ''}
+ color="secondary"
+ onClick={onAdd}
+ data-test-id={
+ 'vlm-summary-vendor-add-btn-' +
+ name.toLowerCase().replace(/\s/g, '-')
+ }
+ />
+ </div>
+ );
}
export default SummaryCountItem;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
index 15b6649543..711bb7a374 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
@@ -14,123 +14,158 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import EntitlementPoolsActionHelper from '../../entitlementPools/EntitlementPoolsActionHelper.js';
import LicenseAgreementActionHelper from '../../licenseAgreement/LicenseAgreementActionHelper.js';
import LicenseKeyGroupsActionHelper from '../../licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
import FeatureGroupsActionHelper from '../../featureGroups/FeatureGroupsActionHelper.js';
-import {overviewItems} from '../LicenseModelOverviewConstants.js';
+import { overviewItems } from '../LicenseModelOverviewConstants.js';
import SummaryCountItem from './SummaryCountItem.jsx';
export const mapStateToProps = ({
- licenseModel: {
- licenseModelEditor,
- licenseAgreement: {licenseAgreementList},
- featureGroup: {featureGroupsList},
- entitlementPool: {entitlementPoolsList},
- licenseKeyGroup: {licenseKeyGroupsList}
- }
+ licenseModel: {
+ licenseModelEditor,
+ licenseAgreement: { licenseAgreementList },
+ featureGroup: { featureGroupsList },
+ entitlementPool: { entitlementPoolsList },
+ licenseKeyGroup: { licenseKeyGroupsList }
+ }
}) => {
+ let { vendorName, description, id, version } = licenseModelEditor.data;
+ let counts = [
+ {
+ name: overviewItems.LICENSE_AGREEMENTS,
+ count: licenseAgreementList.length
+ },
+ { name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length },
+ {
+ name: overviewItems.ENTITLEMENT_POOLS,
+ count: entitlementPoolsList.length
+ },
+ {
+ name: overviewItems.LICENSE_KEY_GROUPS,
+ count: licenseKeyGroupsList.length
+ }
+ ];
- let {vendorName, description, id, version} = licenseModelEditor.data;
- let counts = [
- {name: overviewItems.LICENSE_AGREEMENTS, count: licenseAgreementList.length},
- {name: overviewItems.FEATURE_GROUPS, count: featureGroupsList.length},
- {name: overviewItems.ENTITLEMENT_POOLS, count: entitlementPoolsList.length},
- {name: overviewItems.LICENSE_KEY_GROUPS, count: licenseKeyGroupsList.length},
- ];
-
- return {
- vendorName,
- licenseModelId: id,
- description,
- counts,
- version
- };
-
+ return {
+ vendorName,
+ licenseModelId: id,
+ description,
+ counts,
+ version
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onEditorOpenClick: (name, licenseModelId, version) => {
- switch (name) {
- case overviewItems.ENTITLEMENT_POOLS:
- EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch);
- break;
- case overviewItems.FEATURE_GROUPS:
- FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {licenseModelId, version});
- break;
- case overviewItems.LICENSE_AGREEMENTS:
- LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version});
- break;
- case overviewItems.LICENSE_KEY_GROUPS:
- LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch);
- break;
- default:
- break;
- }
- },
- onNavigateClick: ({name, licenseModelId, version}) => {
- let screenToNavigate;
- switch (name) {
- case overviewItems.ENTITLEMENT_POOLS:
- screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
- break;
- case overviewItems.FEATURE_GROUPS:
- screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
- break;
- case overviewItems.LICENSE_AGREEMENTS:
- screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
- break;
- case overviewItems.LICENSE_KEY_GROUPS:
- screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
- break;
- default:
- break;
- }
- ScreensHelper.loadScreen(dispatch, {
- screen: screenToNavigate, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId, version}
- });
- }
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onEditorOpenClick: (name, licenseModelId, version) => {
+ switch (name) {
+ case overviewItems.ENTITLEMENT_POOLS:
+ EntitlementPoolsActionHelper.openEntitlementPoolsEditor(
+ dispatch
+ );
+ break;
+ case overviewItems.FEATURE_GROUPS:
+ FeatureGroupsActionHelper.openFeatureGroupsEditor(
+ dispatch,
+ {
+ licenseModelId,
+ version
+ }
+ );
+ break;
+ case overviewItems.LICENSE_AGREEMENTS:
+ LicenseAgreementActionHelper.openLicenseAgreementEditor(
+ dispatch,
+ {
+ licenseModelId,
+ version
+ }
+ );
+ break;
+ case overviewItems.LICENSE_KEY_GROUPS:
+ LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(
+ dispatch
+ );
+ break;
+ default:
+ break;
+ }
+ },
+ onNavigateClick: ({ name, licenseModelId, version }) => {
+ let screenToNavigate;
+ switch (name) {
+ case overviewItems.ENTITLEMENT_POOLS:
+ screenToNavigate = enums.SCREEN.ENTITLEMENT_POOLS;
+ break;
+ case overviewItems.FEATURE_GROUPS:
+ screenToNavigate = enums.SCREEN.FEATURE_GROUPS;
+ break;
+ case overviewItems.LICENSE_AGREEMENTS:
+ screenToNavigate = enums.SCREEN.LICENSE_AGREEMENTS;
+ break;
+ case overviewItems.LICENSE_KEY_GROUPS:
+ screenToNavigate = enums.SCREEN.LICENSE_KEY_GROUPS;
+ break;
+ default:
+ break;
+ }
+ ScreensHelper.loadScreen(dispatch, {
+ screen: screenToNavigate,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId, version }
+ });
+ }
+ };
};
export class SummaryCountList extends React.Component {
+ render() {
+ let { counts } = this.props;
+ return (
+ <div className="summary-count-list">
+ {counts.map(item => this.renderItem(item))}
+ </div>
+ );
+ }
- render() {
- let {counts} = this.props;
- return(
- <div className='summary-count-list'>
- {counts.map(item => this.renderItem(item))}
- </div>
- );
- }
-
- renderItem(item){
- const {name, count} = item;
- const {isReadOnlyMode} = this.props;
- return(
- <SummaryCountItem isReadOnlyMode={isReadOnlyMode} name={name} counter={count} onNavigate={() => this.onNavigate(name)} onAdd={() => this.onAdd(name)} key={name} />
- );
- }
+ renderItem(item) {
+ const { name, count } = item;
+ const { isReadOnlyMode } = this.props;
+ return (
+ <SummaryCountItem
+ isReadOnlyMode={isReadOnlyMode}
+ name={name}
+ counter={count}
+ onNavigate={() => this.onNavigate(name)}
+ onAdd={() => this.onAdd(name)}
+ key={name}
+ />
+ );
+ }
- onAdd(name) {
- let {onEditorOpenClick, licenseModelId, isReadOnlyMode, version} = this.props;
- if (!isReadOnlyMode) {
- onEditorOpenClick(name, licenseModelId, version);
- }
- }
+ onAdd(name) {
+ let {
+ onEditorOpenClick,
+ licenseModelId,
+ isReadOnlyMode,
+ version
+ } = this.props;
+ if (!isReadOnlyMode) {
+ onEditorOpenClick(name, licenseModelId, version);
+ }
+ }
- onNavigate(name) {
- let {onNavigateClick, licenseModelId, version} = this.props;
- onNavigateClick({licenseModelId, name, version});
- }
+ onNavigate(name) {
+ let { onNavigateClick, licenseModelId, version } = this.props;
+ onNavigateClick({ licenseModelId, name, version });
+ }
}
export default connect(mapStateToProps, mapActionsToProps)(SummaryCountList);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 616355de41..62fc2c3cb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -13,8 +13,8 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -23,89 +23,139 @@ import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
import LicenseModelDescriptionEdit from './LicenseModelDescriptionEdit.jsx';
-import {VLM_DESCRIPTION_FORM} from '../LicenseModelOverviewConstants.js';
+import { VLM_DESCRIPTION_FORM } from '../LicenseModelOverviewConstants.js';
export const mapStateToProps = ({
- licenseModel: {
- licenseModelEditor: {data},
- licenseModelOverview: {descriptionEditor: {data: descriptionData = {}, genericFieldInfo}}
- }
+ licenseModel: {
+ licenseModelEditor: { data },
+ licenseModelOverview: {
+ descriptionEditor: { data: descriptionData = {}, genericFieldInfo }
+ }
+ }
}) => {
- let {description} = descriptionData;
- return {
- data,
- description,
- genericFieldInfo
- };
+ let { description } = descriptionData;
+ return {
+ data,
+ description,
+ genericFieldInfo
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VLM_DESCRIPTION_FORM}),
- onCancel: () => licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
- onSubmit: (licenseModel) => {
- licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
- LicenseModelActionHelper.saveLicenseModel(dispatch, {licenseModel});
- },
- onVendorDescriptionEdit: description => licenseModelOverviewActionHelper.editDescriptionOpen(dispatch,{description})
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: VLM_DESCRIPTION_FORM
+ }),
+ onCancel: () =>
+ licenseModelOverviewActionHelper.editDescriptionClose(dispatch),
+ onSubmit: licenseModel => {
+ licenseModelOverviewActionHelper.editDescriptionClose(dispatch);
+ LicenseModelActionHelper.saveLicenseModel(dispatch, {
+ licenseModel
+ });
+ },
+ onVendorDescriptionEdit: description =>
+ licenseModelOverviewActionHelper.editDescriptionOpen(dispatch, {
+ description
+ })
+ };
};
export class VendorDataView extends Component {
- render() {
- let {data: {vendorName}, description, isReadOnlyMode} = this.props;
- return (
- <div className='vendor-data-view'>
- <div className='vendor-title'>vendor</div>
- <div className='vendor-name' data-test-id='vlm-summary-vendor-name'>{vendorName}</div>
- {
- description !== undefined && !isReadOnlyMode ? this.renderDescriptionEdit() : this.renderDescription()
- }
- </div>
- );
- }
+ render() {
+ let { data: { vendorName }, description, isReadOnlyMode } = this.props;
+ return (
+ <div className="vendor-data-view">
+ <div className="vendor-title">vendor</div>
+ <div
+ className="vendor-name"
+ data-test-id="vlm-summary-vendor-name">
+ {vendorName}
+ </div>
+ {description !== undefined && !isReadOnlyMode
+ ? this.renderDescriptionEdit()
+ : this.renderDescription()}
+ </div>
+ );
+ }
- componentWillUnmount() {
- this.props.onCancel();
- }
+ componentWillUnmount() {
+ this.props.onCancel();
+ }
+ renderDescription() {
+ let {
+ data: { description },
+ onVendorDescriptionEdit,
+ isReadOnlyMode
+ } = this.props;
+ return (
+ <div
+ onClick={() => {
+ if (!isReadOnlyMode) {
+ onVendorDescriptionEdit(description);
+ }
+ }}
+ className={
+ !isReadOnlyMode
+ ? 'vendor-description'
+ : 'vendor-description-readonly'
+ }>
+ {this.renderOverlay(
+ <div
+ className="description-data"
+ data-test-id="vlm-summary-vendor-description">
+ {description}
+ {!isReadOnlyMode && <SVGIcon name="pencil" />}
+ </div>
+ )}
+ </div>
+ );
+ }
- renderDescription() {
- let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
- return (
- <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
- {this.renderOverlay(
- <div className='description-data' data-test-id='vlm-summary-vendor-description'>
- {description}
- {!isReadOnlyMode && <SVGIcon name='pencil'/>}
- </div>
- )}
- </div>
- );
- }
-
- renderDescriptionEdit() {
- let {onCancel, onDataChanged, onSubmit, description, genericFieldInfo, data} = this.props;
- return(
- <LicenseModelDescriptionEdit onClose={onCancel} onDataChanged={onDataChanged} onSubmit={onSubmit} data={data} genericFieldInfo={genericFieldInfo} description={description}/>
- );
- }
-
- renderOverlay(children) {
- let {data: {description}, isReadOnlyMode} = this.props;
- if (isReadOnlyMode) {
- return (
- <OverlayTrigger
- placement='bottom'
- overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
- delayShow={400}>
- {children}
- </OverlayTrigger>
- );
- }
- return children;
- }
+ renderDescriptionEdit() {
+ let {
+ onCancel,
+ onDataChanged,
+ onSubmit,
+ description,
+ genericFieldInfo,
+ data
+ } = this.props;
+ return (
+ <LicenseModelDescriptionEdit
+ onClose={onCancel}
+ onDataChanged={onDataChanged}
+ onSubmit={onSubmit}
+ data={data}
+ genericFieldInfo={genericFieldInfo}
+ description={description}
+ />
+ );
+ }
+ renderOverlay(children) {
+ let { data: { description }, isReadOnlyMode } = this.props;
+ if (isReadOnlyMode) {
+ return (
+ <OverlayTrigger
+ placement="bottom"
+ overlay={
+ <Tooltip
+ className="vendor-description-tooltip"
+ id="tooltip-bottom">
+ {description}
+ </Tooltip>
+ }
+ delayShow={400}>
+ {children}
+ </OverlayTrigger>
+ );
+ }
+ return children;
+ }
}
export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 345c91e01b..7f361d2742 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
@@ -16,71 +16,96 @@
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {catalogItemTypes, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell} from 'sdc-ui/lib/react';
-import {TooltipWrapper} from './onboardingCatalog/Tooltip.jsx';
+import {
+ catalogItemTypes,
+ migrationStatusMapper
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+ Tile,
+ TileInfo,
+ TileInfoLine,
+ TileFooter,
+ TileFooterCell
+} from 'sdc-ui/lib/react';
+import { TooltipWrapper } from './onboardingCatalog/Tooltip.jsx';
const ITEM_TYPE_MAP = {
- [catalogItemTypes.LICENSE_MODEL]: {
- headerText: i18n('VLM'),
- contentIconName: 'vlm',
- color: 'purple'
- },
- [catalogItemTypes.SOFTWARE_PRODUCT]: {
- headerText: i18n('VSP'),
- contentIconName: 'vsp',
- color: 'blue'
- }
+ [catalogItemTypes.LICENSE_MODEL]: {
+ headerText: i18n('VLM'),
+ contentIconName: 'vlm',
+ color: 'purple'
+ },
+ [catalogItemTypes.SOFTWARE_PRODUCT]: {
+ headerText: i18n('VSP'),
+ contentIconName: 'vsp',
+ color: 'blue'
+ }
};
-const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => {
+const CatalogItemDetails = ({
+ catalogItemData,
+ catalogItemTypeClass,
+ onSelect,
+ onMigrate
+}) => {
+ let { vendorName, name, owner } = catalogItemData;
+ let { headerText, color, contentIconName } = ITEM_TYPE_MAP[
+ catalogItemTypeClass
+ ];
- let {vendorName, name, owner} = catalogItemData;
- let {headerText, color, contentIconName} = ITEM_TYPE_MAP[catalogItemTypeClass];
-
- let onClick = (e) => {
- e.stopPropagation();
- e.preventDefault();
- if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
- onMigrate({softwareProduct: catalogItemData});
- } else {
- onSelect();
- }
- };
-
- return (
- <Tile
- headerText={headerText}
- headerColor={color}
- iconName={contentIconName}
- iconColor={color}
- onClick={onClick}
- dataTestId={catalogItemTypeClass}>
- <TileInfo data-test-id='catalog-item-content'>
- {vendorName &&
- <TileInfoLine type='supertitle'>
- <TooltipWrapper className='with-overlay' tooltipClassName='tile-super-info' dataTestId='catalog-item-vendor-name'>{vendorName}</TooltipWrapper>
- </TileInfoLine>
- }
- <TileInfoLine type='title'>
- <TooltipWrapper className='with-overlay' tooltipClassName='tile-title-info' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
- </TileInfoLine>
- </TileInfo>
- <TileFooter>
- {owner &&
- <TileFooterCell>Owner - {owner}</TileFooterCell>
- }
- </TileFooter>
- </Tile>
- );
+ let onClick = e => {
+ e.stopPropagation();
+ e.preventDefault();
+ if (
+ catalogItemData.isOldVersion &&
+ catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION
+ ) {
+ onMigrate({ softwareProduct: catalogItemData });
+ } else {
+ onSelect();
+ }
+ };
+ return (
+ <Tile
+ headerText={headerText}
+ headerColor={color}
+ iconName={contentIconName}
+ iconColor={color}
+ onClick={onClick}
+ dataTestId={catalogItemTypeClass}>
+ <TileInfo data-test-id="catalog-item-content">
+ {vendorName && (
+ <TileInfoLine type="supertitle">
+ <TooltipWrapper
+ className="with-overlay"
+ tooltipClassName="tile-super-info"
+ dataTestId="catalog-item-vendor-name">
+ {vendorName}
+ </TooltipWrapper>
+ </TileInfoLine>
+ )}
+ <TileInfoLine type="title">
+ <TooltipWrapper
+ className="with-overlay"
+ tooltipClassName="tile-title-info"
+ dataTestId="catalog-item-name">
+ {name}
+ </TooltipWrapper>
+ </TileInfoLine>
+ </TileInfo>
+ <TileFooter>
+ {owner && <TileFooterCell>Owner - {owner}</TileFooterCell>}
+ </TileFooter>
+ </Tile>
+ );
};
CatalogItemDetails.PropTypes = {
- catalogItemData: PropTypes.obj,
- catalogItemTypeClass: PropTypes.string,
- onSelect: PropTypes.func,
- onMigrate: PropTypes.func
+ catalogItemData: PropTypes.obj,
+ catalogItemTypeClass: PropTypes.string,
+ onSelect: PropTypes.func,
+ onMigrate: PropTypes.func
};
export default CatalogItemDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
index 156adfc5e7..d01b9d0d04 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
@@ -1,33 +1,48 @@
import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {select, withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf, action } from '@kadira/storybook';
+import { select, withKnobs } from '@kadira/storybook-addon-knobs';
import CatalogItemDetails from './CatalogItemDetails.jsx';
-import {catalogItemTypes, catalogItemStatuses} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {FinalizedLicenseModelFactory} from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
+import {
+ catalogItemTypes,
+ catalogItemStatuses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
const stories = storiesOf('CatalogTiles', module);
stories.addDecorator(withKnobs);
const types = [
- catalogItemTypes.LICENSE_MODEL,
- catalogItemTypes.SOFTWARE_PRODUCT
+ catalogItemTypes.LICENSE_MODEL,
+ catalogItemTypes.SOFTWARE_PRODUCT
];
function selectType() {
- return select('Item type' , types, types[0]);
+ return select('Item type', types, types[0]);
}
-let vlm = {...FinalizedLicenseModelFactory.build({name: 'Test-VLM'}), itemStatus: catalogItemStatuses.DRAFT};
-let certifiedVlm = {...vlm, itemStatus: catalogItemStatuses.CERTIFIED};
+let vlm = {
+ ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }),
+ itemStatus: catalogItemStatuses.DRAFT
+};
+let certifiedVlm = { ...vlm, itemStatus: catalogItemStatuses.CERTIFIED };
-stories
- .add('preview', () => (
- <div className='catalog-view'>
- <div className='catalog-list'>
- <div className='catalog-items'>
- <CatalogItemDetails catalogItemData={vlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
- <CatalogItemDetails catalogItemData={certifiedVlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
- </div>
- </div>
- </div>
- ));
+stories.add('preview', () => (
+ <div className="catalog-view">
+ <div className="catalog-list">
+ <div className="catalog-items">
+ <CatalogItemDetails
+ catalogItemData={vlm}
+ catalogItemTypeClass={selectType()}
+ onSelect={action('onSelect')}
+ onMigrate={action('onMigrate')}
+ />
+ <CatalogItemDetails
+ catalogItemData={certifiedVlm}
+ catalogItemTypeClass={selectType()}
+ onSelect={action('onSelect')}
+ onMigrate={action('onMigrate')}
+ />
+ </div>
+ </div>
+ </div>
+));
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
index 10d855c862..b00ceeb48f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
@@ -17,37 +17,61 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-const SoftwareProductListHeader = ({selectedVendor, onBack}) => (
- <div className='vendor-page-header'>
- <SVGIcon name='back' onClick={onBack}/>
- <div className='tab-separator' />
- <div className='vendor-name'>{selectedVendor.name}</div>
- </div>
+const SoftwareProductListHeader = ({ selectedVendor, onBack }) => (
+ <div className="vendor-page-header">
+ <SVGIcon name="back" onClick={onBack} />
+ <div className="tab-separator" />
+ <div className="vendor-name">{selectedVendor.name}</div>
+ </div>
);
-const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
- <div className='catalog-list'>
- {vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
- <div className='catalog-items'>
- { (onAddVLM || onAddVSP) &&
- <div className='create-catalog-item-wrapper'>
- {onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>}
- {onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>}
- </div>
- }
- {children}
- </div>
- </div>
+const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => (
+ <div className="catalog-list">
+ {vendorPageOptions && (
+ <SoftwareProductListHeader
+ onBack={vendorPageOptions.onBack}
+ selectedVendor={vendorPageOptions.selectedVendor}
+ />
+ )}
+ <div className="catalog-items">
+ {(onAddVLM || onAddVSP) && (
+ <div className="create-catalog-item-wrapper">
+ {onAddVLM && (
+ <CreateItemTile
+ onClick={onAddVLM}
+ dataTestId={'catalog-add-new-vlm'}
+ className="vlm-type"
+ title={i18n('CREATE NEW VLM')}
+ />
+ )}
+ {onAddVSP && (
+ <CreateItemTile
+ onClick={() => onAddVSP()}
+ dataTestId={'catalog-add-new-vsp'}
+ className="vsp-type"
+ title={i18n('CREATE NEW VSP')}
+ />
+ )}
+ </div>
+ )}
+ {children}
+ </div>
+ </div>
);
-const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
- //TODO check for buttons
- return (
- <div className={`create-catalog-item tile ${className}`} onClick={onClick} data-test-id={dataTestId}>
- <div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
- <div className='create-item-text'>{title}</div>
- </div>
- );
+const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => {
+ //TODO check for buttons
+ return (
+ <div
+ className={`create-catalog-item tile ${className}`}
+ onClick={onClick}
+ data-test-id={dataTestId}>
+ <div className="create-item-plus-icon">
+ <SVGIcon name="plus" />
+ </div>
+ <div className="create-item-text">{title}</div>
+ </div>
+ );
};
export default CatalogList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
index 1ef9c82822..90496c9be4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
@@ -14,49 +14,52 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import {modalMapper, catalogItemTypes, catalogItemTypeClasses } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+ modalMapper,
+ catalogItemTypes,
+ catalogItemTypeClasses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Modal from 'nfvo-components/modal/Modal.jsx';
import LicenseModelCreation from '../licenseModel/creation/LicenseModelCreation.js';
import SoftwareProductCreation from '../softwareProduct/creation/SoftwareProductCreation.js';
-class CatalogModal extends React.Component{
+class CatalogModal extends React.Component {
+ getModalDetails() {
+ const { modalToShow } = this.props;
+ switch (modalToShow) {
+ case catalogItemTypes.LICENSE_MODEL:
+ return {
+ title: i18n('New License Model'),
+ element: <LicenseModelCreation />
+ };
+ case catalogItemTypes.SOFTWARE_PRODUCT:
+ return {
+ title: i18n('New Software Product'),
+ element: <SoftwareProductCreation />
+ };
+ }
+ }
- getModalDetails(){
- const {modalToShow} = this.props;
- switch (modalToShow) {
- case catalogItemTypes.LICENSE_MODEL:
- return {
- title: i18n('New License Model'),
- element: <LicenseModelCreation/>
- };
- case catalogItemTypes.SOFTWARE_PRODUCT:
- return {
- title: i18n('New Software Product'),
- element: <SoftwareProductCreation/>
- };
- }
- }
+ render() {
+ const { modalToShow } = this.props;
+ const modalDetails = this.getModalDetails(modalToShow);
- render(){
- const {modalToShow} = this.props;
- const modalDetails = this.getModalDetails(modalToShow);
-
- return (
- <Modal
- show={Boolean(modalDetails)}
- className={`${catalogItemTypeClasses[modalMapper[modalToShow]]}-modal`}>
- <Modal.Header>
- <Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- {
- modalDetails && modalDetails.element
- }
- </Modal.Body>
- </Modal>
- );
- }
+ return (
+ <Modal
+ show={Boolean(modalDetails)}
+ className={`${
+ catalogItemTypeClasses[modalMapper[modalToShow]]
+ }-modal`}>
+ <Modal.Header>
+ <Modal.Title>
+ {modalDetails && modalDetails.title}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>{modalDetails && modalDetails.element}</Modal.Body>
+ </Modal>
+ );
+ }
}
export default CatalogModal;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
index ea6cf5e9bc..771c0eb6c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
@@ -15,42 +15,66 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './onboardingCatalog/OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogUtils.js';
import CatalogList from './CatalogList.jsx';
import CatalogItemDetails from './CatalogItemDetails.jsx';
-class DetailsCatalogView extends React.Component{
+class DetailsCatalogView extends React.Component {
+ static propTypes = {
+ VLMList: PropTypes.array,
+ VSPList: PropTypes.array,
+ onSelectVLM: PropTypes.func.isRequired,
+ onSelectVSP: PropTypes.func.isRequired,
+ onAddVLM: PropTypes.func,
+ onAddVSP: PropTypes.func,
+ filter: PropTypes.string.isRequired
+ };
- static propTypes = {
- VLMList: PropTypes.array,
- VSPList: PropTypes.array,
- onSelectVLM: PropTypes.func.isRequired,
- onSelectVSP: PropTypes.func.isRequired,
- onAddVLM: PropTypes.func,
- onAddVSP: PropTypes.func,
- filter: PropTypes.string.isRequired
- };
+ renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) {
+ return filterCatalogItemsByType({ items, filter }).map(item => (
+ <CatalogItemDetails
+ key={item.id}
+ catalogItemData={item}
+ catalogItemTypeClass={type}
+ onMigrate={onMigrate}
+ onSelect={() => onSelect(item, users)}
+ />
+ ));
+ }
- renderCatalogItems({items, type, filter, onSelect, onMigrate, users}){
- return filterCatalogItemsByType({items, filter}).map(item =>
- <CatalogItemDetails
- key={item.id}
- catalogItemData={item}
- catalogItemTypeClass={type}
- onMigrate={onMigrate}
- onSelect={() => onSelect(item, users)} />
- );
- }
-
- render() {
- let {VLMList, VSPList, users, onAddVSP, onAddVLM, onSelectVLM, onSelectVSP, filter = '', onMigrate} = this.props;
- return (
- <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
- {this.renderCatalogItems({items: VLMList, type: catalogItemTypes.LICENSE_MODEL, filter, onSelect: onSelectVLM, onMigrate, users})}
- {this.renderCatalogItems({items: VSPList, type: catalogItemTypes.SOFTWARE_PRODUCT, filter, onSelect: onSelectVSP, onMigrate, users})}
- </CatalogList>
- );
- }
+ render() {
+ let {
+ VLMList,
+ VSPList,
+ users,
+ onAddVSP,
+ onAddVLM,
+ onSelectVLM,
+ onSelectVSP,
+ filter = '',
+ onMigrate
+ } = this.props;
+ return (
+ <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+ {this.renderCatalogItems({
+ items: VLMList,
+ type: catalogItemTypes.LICENSE_MODEL,
+ filter,
+ onSelect: onSelectVLM,
+ onMigrate,
+ users
+ })}
+ {this.renderCatalogItems({
+ items: VSPList,
+ type: catalogItemTypes.SOFTWARE_PRODUCT,
+ filter,
+ onSelect: onSelectVSP,
+ onMigrate,
+ users
+ })}
+ </CatalogList>
+ );
+ }
}
export default DetailsCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
index 9535147a46..a1e0018114 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
@@ -14,109 +14,121 @@
* limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import OnboardView from './OnboardView.jsx';
import OnboardingCatalogActionHelper from './onboardingCatalog/OnboardingCatalogActionHelper.js';
import OnboardActionHelper from './OnboardActionHelper.js';
import LicenseModelCreationActionHelper from '../licenseModel/creation/LicenseModelCreationActionHelper.js';
import SoftwareProductCreationActionHelper from '../softwareProduct/creation/SoftwareProductCreationActionHelper.js';
import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
-import {tabsMapping} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemsType} from './filter/FilterConstants.js';
+import { tabsMapping } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemsType } from './filter/FilterConstants.js';
export const mapStateToProps = ({
- onboard: {
- onboardingCatalog,
- activeTab,
- searchValue,
- filter
- },
- licenseModelList,
- users,
- archivedLicenseModelList,
- archivedSoftwareProductList,
- finalizedLicenseModelList,
- softwareProductList,
- finalizedSoftwareProductList
+ onboard: { onboardingCatalog, activeTab, searchValue, filter },
+ licenseModelList,
+ users,
+ archivedLicenseModelList,
+ archivedSoftwareProductList,
+ finalizedLicenseModelList,
+ softwareProductList,
+ finalizedSoftwareProductList
}) => {
+ const fullSoftwareProducts = softwareProductList
+ .filter(
+ vsp =>
+ !finalizedSoftwareProductList.find(fvsp => fvsp.id === vsp.id)
+ )
+ .concat(finalizedSoftwareProductList);
- const fullSoftwareProducts = softwareProductList.filter(vsp =>
- !finalizedSoftwareProductList
- .find(fvsp => fvsp.id === vsp.id)
- ).concat(finalizedSoftwareProductList);
+ const reduceLicenseModelList = (accum, vlm) => {
+ let currentSoftwareProductList = sortByStringProperty(
+ fullSoftwareProducts.filter(vsp => vsp.vendorId === vlm.id),
+ 'name'
+ );
+ accum.push({ ...vlm, softwareProductList: currentSoftwareProductList });
+ return accum;
+ };
- const reduceLicenseModelList = (accum, vlm) => {
- let currentSoftwareProductList = sortByStringProperty(
- fullSoftwareProducts
- .filter(vsp => vsp.vendorId === vlm.id),
- 'name'
- );
- accum.push({...vlm, softwareProductList: currentSoftwareProductList});
- return accum;
- };
+ licenseModelList = sortByStringProperty(
+ licenseModelList.reduce(reduceLicenseModelList, []),
+ 'name'
+ );
- licenseModelList = sortByStringProperty(
- licenseModelList
- .reduce(reduceLicenseModelList, []),
- 'name'
- );
+ finalizedLicenseModelList = sortByStringProperty(
+ finalizedLicenseModelList.reduce(reduceLicenseModelList, []),
+ 'name'
+ );
- finalizedLicenseModelList = sortByStringProperty(
- finalizedLicenseModelList
- .reduce(reduceLicenseModelList, []),
- 'name'
- );
+ const fullLicenseModelList = licenseModelList
+ .filter(
+ vlm => !finalizedLicenseModelList.find(fvlm => fvlm.id === vlm.id)
+ )
+ .concat(finalizedLicenseModelList);
- const fullLicenseModelList = licenseModelList.filter(vlm =>
- !finalizedLicenseModelList
- .find(fvlm => fvlm.id === vlm.id)
- ).concat(finalizedLicenseModelList);
-
- let {activeTab: catalogActiveTab, vendorCatalog: {vspOverlay, selectedVendor}} = onboardingCatalog;
- if (filter.byVendorView) {
- catalogActiveTab = tabsMapping.BY_VENDOR;
- }
- else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
- catalogActiveTab = tabsMapping.ARCHIVE;
- }
-
- return {
- finalizedLicenseModelList,
- finalizedSoftwareProductList,
- licenseModelList,
- softwareProductList,
- archivedLicenseModelList,
- archivedSoftwareProductList,
- fullLicenseModelList,
- activeTab,
- catalogActiveTab,
- searchValue,
- vspOverlay,
- selectedVendor,
- users: users.usersList
- };
+ let {
+ activeTab: catalogActiveTab,
+ vendorCatalog: { vspOverlay, selectedVendor }
+ } = onboardingCatalog;
+ if (filter.byVendorView) {
+ catalogActiveTab = tabsMapping.BY_VENDOR;
+ } else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
+ catalogActiveTab = tabsMapping.ARCHIVE;
+ }
+ return {
+ finalizedLicenseModelList,
+ finalizedSoftwareProductList,
+ licenseModelList,
+ softwareProductList,
+ archivedLicenseModelList,
+ archivedSoftwareProductList,
+ fullLicenseModelList,
+ activeTab,
+ catalogActiveTab,
+ searchValue,
+ vspOverlay,
+ selectedVendor,
+ users: users.usersList
+ };
};
-const mapActionsToProps = (dispatch) => {
-
- return {
- onSelectLicenseModel({id: licenseModelId, name}, users, tab) {
- OnboardActionHelper.loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab);
- },
- onSelectSoftwareProduct(softwareProduct, users, tab) {
- OnboardActionHelper.loadVSPScreen(dispatch, softwareProduct, users, tab);
- },
- onAddSoftwareProductClick: (vendorId) => SoftwareProductCreationActionHelper.open(dispatch, vendorId),
- onAddLicenseModelClick: () => LicenseModelCreationActionHelper.open(dispatch),
- onVspOverlayChange: (vendor) => OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
- closeVspOverlay: () => OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
- onCatalogTabClick: (tab) => OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
- onTabClick: (tab) => OnboardActionHelper.changeActiveTab(dispatch, tab),
- onSearch: (searchValue) => OnboardActionHelper.changeSearchValue(dispatch, searchValue),
- onVendorSelect: (vendor) => OnboardingCatalogActionHelper.onVendorSelect(dispatch, {vendor}),
- onMigrate: ({softwareProduct}) => OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onSelectLicenseModel({ id: licenseModelId, name }, users, tab) {
+ OnboardActionHelper.loadVLMScreen(
+ dispatch,
+ { id: licenseModelId, name },
+ users,
+ tab
+ );
+ },
+ onSelectSoftwareProduct(softwareProduct, users, tab) {
+ OnboardActionHelper.loadVSPScreen(
+ dispatch,
+ softwareProduct,
+ users,
+ tab
+ );
+ },
+ onAddSoftwareProductClick: vendorId =>
+ SoftwareProductCreationActionHelper.open(dispatch, vendorId),
+ onAddLicenseModelClick: () =>
+ LicenseModelCreationActionHelper.open(dispatch),
+ onVspOverlayChange: vendor =>
+ OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
+ closeVspOverlay: () =>
+ OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
+ onCatalogTabClick: tab =>
+ OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
+ onTabClick: tab => OnboardActionHelper.changeActiveTab(dispatch, tab),
+ onSearch: searchValue =>
+ OnboardActionHelper.changeSearchValue(dispatch, searchValue),
+ onVendorSelect: vendor =>
+ OnboardingCatalogActionHelper.onVendorSelect(dispatch, { vendor }),
+ onMigrate: ({ softwareProduct }) =>
+ OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(OnboardView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
index 892056855f..87ec2d148e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
@@ -13,97 +13,146 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {tabsMapping, actionTypes} from './OnboardConstants.js';
+import { tabsMapping, actionTypes } from './OnboardConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
const OnboardActionHelper = {
- resetOnboardStore(dispatch) {
- dispatch({
- type: actionTypes.RESET_ONBOARD_STORE
- });
- },
- changeActiveTab(dispatch, activeTab) {
- this.clearSearchValue(dispatch);
- dispatch({
- type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
- activeTab
- });
- },
- changeSearchValue(dispatch, searchValue) {
- dispatch({
- type: actionTypes.CHANGE_SEARCH_VALUE,
- searchValue
- });
- },
- clearSearchValue(dispatch) {
- dispatch({
- type: actionTypes.CHANGE_SEARCH_VALUE,
- searchValue: ''
- });
- },
+ resetOnboardStore(dispatch) {
+ dispatch({
+ type: actionTypes.RESET_ONBOARD_STORE
+ });
+ },
+ changeActiveTab(dispatch, activeTab) {
+ this.clearSearchValue(dispatch);
+ dispatch({
+ type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
+ activeTab
+ });
+ },
+ changeSearchValue(dispatch, searchValue) {
+ dispatch({
+ type: actionTypes.CHANGE_SEARCH_VALUE,
+ searchValue
+ });
+ },
+ clearSearchValue(dispatch) {
+ dispatch({
+ type: actionTypes.CHANGE_SEARCH_VALUE,
+ searchValue: ''
+ });
+ },
- loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab) {
- if (tab === tabsMapping.WORKSPACE) {
- VersionsPageActionHelper.fetchVersions(dispatch, {itemId: licenseModelId, itemType: itemTypes.LICENSE_MODEL}).then(({results})=> {
- results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
- if (results.length !== 1) {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId, licenseModel: {name}, usersList: users}
- });
- }
- else {
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users}).then(() =>
- ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: results[0]}})
- );
- }
- });
- }
- if (tab === tabsMapping.CATALOG) {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId, licenseModel: {name}, usersList: users}
- });
- }
- },
- loadVSPScreen(dispatch, softwareProduct, users, tab) {
- let {id: softwareProductId, vendorId: licenseModelId, licensingVersion, name} = softwareProduct;
- if (tab === tabsMapping.WORKSPACE) {
- VersionsPageActionHelper.fetchVersions(dispatch,{itemId: softwareProductId, itemType: itemTypes.SOFTWARE_PRODUCT}).then(({results})=> {
- results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
- if (results.length !== 1) {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {
- softwareProductId,
- softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
- usersList: users
- }
- });
- }
- else {
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users}).then(() =>
- ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.SOFTWARE_PRODUCT, props: {softwareProductId, licenseModelId, version: results[0]}})
- );
- }
- });
- }
- if (tab === tabsMapping.CATALOG) {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {
- softwareProductId,
- softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
- usersList: users
- }
- });
- }
- }
+ loadVLMScreen(dispatch, { id: licenseModelId, name }, users, tab) {
+ if (tab === tabsMapping.WORKSPACE) {
+ VersionsPageActionHelper.fetchVersions(dispatch, {
+ itemId: licenseModelId,
+ itemType: itemTypes.LICENSE_MODEL
+ }).then(({ results }) => {
+ results = results.filter(
+ version => version.status === catalogItemStatuses.DRAFT
+ );
+ if (results.length !== 1) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.VERSIONS_PAGE,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: {
+ licenseModelId,
+ licenseModel: { name },
+ usersList: users
+ }
+ });
+ } else {
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId: licenseModelId,
+ allUsers: users
+ }).then(() =>
+ ScreensHelper.loadLandingScreen(dispatch, {
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId, version: results[0] }
+ })
+ );
+ }
+ });
+ }
+ if (tab === tabsMapping.CATALOG) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.VERSIONS_PAGE,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: {
+ licenseModelId,
+ licenseModel: { name },
+ usersList: users
+ }
+ });
+ }
+ },
+ loadVSPScreen(dispatch, softwareProduct, users, tab) {
+ let {
+ id: softwareProductId,
+ vendorId: licenseModelId,
+ licensingVersion,
+ name
+ } = softwareProduct;
+ if (tab === tabsMapping.WORKSPACE) {
+ VersionsPageActionHelper.fetchVersions(dispatch, {
+ itemId: softwareProductId,
+ itemType: itemTypes.SOFTWARE_PRODUCT
+ }).then(({ results }) => {
+ results = results.filter(
+ version => version.status === catalogItemStatuses.DRAFT
+ );
+ if (results.length !== 1) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct: {
+ name,
+ vendorId: licenseModelId,
+ licensingVersion
+ },
+ usersList: users
+ }
+ });
+ } else {
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId: softwareProductId,
+ allUsers: users
+ }).then(() =>
+ ScreensHelper.loadLandingScreen(dispatch, {
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ licenseModelId,
+ version: results[0]
+ }
+ })
+ );
+ }
+ });
+ }
+ if (tab === tabsMapping.CATALOG) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct: {
+ name,
+ vendorId: licenseModelId,
+ licensingVersion
+ },
+ usersList: users
+ }
+ });
+ }
+ }
};
export default OnboardActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
index 41128bfb11..6fbf265afb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
@@ -16,13 +16,13 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const tabsMapping = {
- 'WORKSPACE': 1,
- 'CATALOG': 2
+ WORKSPACE: 1,
+ CATALOG: 2
};
export const actionTypes = keyMirror({
- CHANGE_ACTIVE_ONBOARD_TAB: null,
- CHANGE_SEARCH_VALUE: null,
- RESET_ONBOARD_STORE: null,
- VSP_MIGRATION: null
+ CHANGE_ACTIVE_ONBOARD_TAB: null,
+ CHANGE_SEARCH_VALUE: null,
+ RESET_ONBOARD_STORE: null,
+ VSP_MIGRATION: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
index b2e7b0479b..39ceb31b34 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
@@ -13,21 +13,27 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, tabsMapping} from './OnboardConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes, tabsMapping } from './OnboardConstants.js';
+import { combineReducers } from 'redux';
import onboardingCatalogReducer from './onboardingCatalog/OnboardingCatalogReducer.js';
import filterReducer from './filter/FilterReducer.js';
const onboardReducer = combineReducers({
- onboardingCatalog: onboardingCatalogReducer,
- filter: filterReducer,
- activeTab: (state = tabsMapping.WORKSPACE, action) => action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB ? action.activeTab : state,
- searchValue: (state = '', action) => action.type === actionTypes.CHANGE_SEARCH_VALUE ? action.searchValue : state
+ onboardingCatalog: onboardingCatalogReducer,
+ filter: filterReducer,
+ activeTab: (state = tabsMapping.WORKSPACE, action) =>
+ action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB
+ ? action.activeTab
+ : state,
+ searchValue: (state = '', action) =>
+ action.type === actionTypes.CHANGE_SEARCH_VALUE
+ ? action.searchValue
+ : state
});
export default (state, action) => {
- if (action.type === actionTypes.RESET_ONBOARD_STORE) {
- state = undefined;
- }
- return onboardReducer(state, action);
+ if (action.type === actionTypes.RESET_ONBOARD_STORE) {
+ state = undefined;
+ }
+ return onboardReducer(state, action);
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
index c045a3739a..dcaeaa787d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -17,89 +17,99 @@ import React from 'react';
import PropTypes from 'prop-types';
import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx';
import WorkspaceView from './workspace/WorkspaceView.jsx';
-import {tabsMapping} from './OnboardConstants.js';
+import { tabsMapping } from './OnboardConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import classnames from 'classnames';
import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
import objectValues from 'lodash/values.js';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
import Filter from 'sdc-app/onboarding/onboard/filter/Filter.jsx';
-const OnboardHeaderTabs = ({onTabClick, activeTab}) => (
- <div className='onboard-header-tabs'>
- <div
- className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.WORKSPACE })}
- onClick={() => onTabClick(tabsMapping.WORKSPACE)}
- data-test-id='onboard-workspace-tab'>
- {i18n('WORKSPACE')}
- </div>
- <div
- className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.CATALOG })}
- onClick={() => onTabClick(tabsMapping.CATALOG)}
- data-test-id='onboard-onboard-tab'>
- {i18n('ONBOARD CATALOG')}
- </div>
- </div>
+const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
+ <div className="onboard-header-tabs">
+ <div
+ className={classnames('onboard-header-tab', {
+ active: activeTab === tabsMapping.WORKSPACE
+ })}
+ onClick={() => onTabClick(tabsMapping.WORKSPACE)}
+ data-test-id="onboard-workspace-tab">
+ {i18n('WORKSPACE')}
+ </div>
+ <div
+ className={classnames('onboard-header-tab', {
+ active: activeTab === tabsMapping.CATALOG
+ })}
+ onClick={() => onTabClick(tabsMapping.CATALOG)}
+ data-test-id="onboard-onboard-tab">
+ {i18n('ONBOARD CATALOG')}
+ </div>
+ </div>
);
-const OnboardHeader = ({onSearch, activeTab, onTabClick, searchValue}) => (
- <div className='onboard-header'>
- <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
- <ExpandableInput
- onChange={onSearch}
- iconType='search'
- value={searchValue}/>
- <NotificationsView />
- </div>
+const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
+ <div className="onboard-header">
+ <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
+ <ExpandableInput
+ onChange={onSearch}
+ iconType="search"
+ value={searchValue}
+ />
+ <NotificationsView />
+ </div>
);
class OnboardView extends React.Component {
- static propTypes = {
- licenseModelList: PropTypes.array,
- softwareProductList: PropTypes.array,
- finalizedLicenseModelList: PropTypes.array,
- finalizedSoftwareProductList: PropTypes.array,
- archivedSoftwareProductList: PropTypes.array,
- archivedLicenseModelList: PropTypes.array,
- modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
- onSelectLicenseModel: PropTypes.func.isRequired,
- onSelectSoftwareProduct: PropTypes.func.isRequired,
- onAddLicenseModelClick: PropTypes.func.isRequired,
- onAddSoftwareProductClick: PropTypes.func.isRequired,
- closeVspOverlay: PropTypes.func.isRequired,
- onVspOverlayChange: PropTypes.func.isRequired,
- onTabClick: PropTypes.func.isRequired,
- onCatalogTabClick: PropTypes.func.isRequired,
- onSearch: PropTypes.func.isRequired,
- activeTab: PropTypes.number.isRequired,
- catalogActiveTab: PropTypes.number.isRequired,
- searchValue: PropTypes.string.isRequired,
- onMigrate: PropTypes.func.isRequired,
- };
- renderViewByTab(activeTab){
- switch (activeTab){
- case tabsMapping.WORKSPACE:
- return <WorkspaceView {...this.props} />;
- case tabsMapping.CATALOG:
- return <OnboardingCatalogView {...this.props} />;
- default:
- return <WorkspaceView {...this.props} />;
- }
- }
+ static propTypes = {
+ licenseModelList: PropTypes.array,
+ softwareProductList: PropTypes.array,
+ finalizedLicenseModelList: PropTypes.array,
+ finalizedSoftwareProductList: PropTypes.array,
+ archivedSoftwareProductList: PropTypes.array,
+ archivedLicenseModelList: PropTypes.array,
+ modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
+ onSelectLicenseModel: PropTypes.func.isRequired,
+ onSelectSoftwareProduct: PropTypes.func.isRequired,
+ onAddLicenseModelClick: PropTypes.func.isRequired,
+ onAddSoftwareProductClick: PropTypes.func.isRequired,
+ closeVspOverlay: PropTypes.func.isRequired,
+ onVspOverlayChange: PropTypes.func.isRequired,
+ onTabClick: PropTypes.func.isRequired,
+ onCatalogTabClick: PropTypes.func.isRequired,
+ onSearch: PropTypes.func.isRequired,
+ activeTab: PropTypes.number.isRequired,
+ catalogActiveTab: PropTypes.number.isRequired,
+ searchValue: PropTypes.string.isRequired,
+ onMigrate: PropTypes.func.isRequired
+ };
+ renderViewByTab(activeTab) {
+ switch (activeTab) {
+ case tabsMapping.WORKSPACE:
+ return <WorkspaceView {...this.props} />;
+ case tabsMapping.CATALOG:
+ return <OnboardingCatalogView {...this.props} />;
+ default:
+ return <WorkspaceView {...this.props} />;
+ }
+ }
- render() {
- let {activeTab, onTabClick, onSearch, searchValue} = this.props;
- return (
- <div className='catalog-view'>
- <Filter/>
- <div className='catalog-parts'>
- <OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
- {this.renderViewByTab(activeTab)}
- </div>
- </div>
- );
- }
+ render() {
+ let { activeTab, onTabClick, onSearch, searchValue } = this.props;
+ return (
+ <div className="catalog-view">
+ <Filter />
+ <div className="catalog-parts">
+ <OnboardHeader
+ activeTab={activeTab}
+ onTabClick={onTabClick}
+ searchValue={searchValue}
+ onSearch={value => onSearch(value)}
+ />
+ {this.renderViewByTab(activeTab)}
+ </div>
+ </div>
+ );
+ }
}
export default OnboardView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
index d8d04f242b..c80232de0a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -14,83 +14,166 @@
* limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import Accordion from 'nfvo-components/accordion/Accordion.jsx';
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
-import {tabsMapping as onboardTabsMapping} from '../OnboardConstants.js';
-import {itemsType as itemsTypeConstants} from './FilterConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
+import { tabsMapping as onboardTabsMapping } from '../OnboardConstants.js';
+import { itemsType as itemsTypeConstants } from './FilterConstants.js';
-const mapStateToProps = ({onboard: {filter, activeTab}}) => {
- return {
- data: filter,
- activeTab
- };
+const mapStateToProps = ({ onboard: { filter, activeTab } }) => {
+ return {
+ data: filter,
+ activeTab
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData) =>
- dispatch({
- type: actionTypes.FILTER_DATA_CHANGED,
- deltaData
- })
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: deltaData =>
+ dispatch({
+ type: actionTypes.FILTER_DATA_CHANGED,
+ deltaData
+ })
+ };
};
-const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer,
- procedureNetwork, procedureManual, recentlyUpdated, byVendorView, itemsType}, activeTab}) => (
- <div className='catalog-filter'>
- {activeTab === onboardTabsMapping.CATALOG && <Input
- type='select'
- className='catalog-filter-items-type'
- data-test-id='catalog-filter-items-type'
- disabled={byVendorView}
- value={itemsType}
- onChange={e => onDataChanged({itemsType: e.target.value})}>
- <option key={itemsTypeConstants.ACTIVE} value={itemsTypeConstants.ACTIVE}>Active Items</option>
- <option key={itemsTypeConstants.ARCHIVED} value={itemsTypeConstants.ARCHIVED}>Archived Items</option>
- </Input>}
- {activeTab === onboardTabsMapping.CATALOG && <Input
- label={i18n('By Vendor View')}
- type='checkbox'
- disabled={itemsType === itemsTypeConstants.ARCHIVED}
- checked={byVendorView}
- onChange={byVendorView => onDataChanged({byVendorView})}
- data-test-id='filter-by-vendor-view' value='' />
- }
- <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated}
- onChange={recentlyUpdated => onDataChanged({recentlyUpdated})} data-test-id='filter-recently-updated' value='' />
+const Filter = ({
+ onDataChanged,
+ data: {
+ entityTypeVsp,
+ entityTypeVlm,
+ roleOwner,
+ roleContributor,
+ roleViewer,
+ procedureNetwork,
+ procedureManual,
+ recentlyUpdated,
+ byVendorView,
+ itemsType
+ },
+ activeTab
+}) => (
+ <div className="catalog-filter">
+ {activeTab === onboardTabsMapping.CATALOG && (
+ <Input
+ type="select"
+ className="catalog-filter-items-type"
+ data-test-id="catalog-filter-items-type"
+ disabled={byVendorView}
+ value={itemsType}
+ onChange={e => onDataChanged({ itemsType: e.target.value })}>
+ <option
+ key={itemsTypeConstants.ACTIVE}
+ value={itemsTypeConstants.ACTIVE}>
+ Active Items
+ </option>
+ <option
+ key={itemsTypeConstants.ARCHIVED}
+ value={itemsTypeConstants.ARCHIVED}>
+ Archived Items
+ </option>
+ </Input>
+ )}
+ {activeTab === onboardTabsMapping.CATALOG && (
+ <Input
+ label={i18n('By Vendor View')}
+ type="checkbox"
+ disabled={itemsType === itemsTypeConstants.ARCHIVED}
+ checked={byVendorView}
+ onChange={byVendorView => onDataChanged({ byVendorView })}
+ data-test-id="filter-by-vendor-view"
+ value=""
+ />
+ )}
+ <Input
+ label={i18n('Recently Updated')}
+ type="checkbox"
+ checked={recentlyUpdated}
+ onChange={recentlyUpdated => onDataChanged({ recentlyUpdated })}
+ data-test-id="filter-recently-updated"
+ value=""
+ />
- <Accordion title={i18n('ENTITY TYPE')}>
- <Input label={i18n('VSP')} type='checkbox' checked={entityTypeVsp} onChange={entityTypeVsp => onDataChanged({entityTypeVsp})} data-test-id='filter-type-vsp' value='' />
- <Input label={i18n('VLM')} type='checkbox' checked={entityTypeVlm} onChange={entityTypeVlm => onDataChanged({entityTypeVlm})} data-test-id='filter-type-vlm' value='' />
- </Accordion>
+ <Accordion title={i18n('ENTITY TYPE')}>
+ <Input
+ label={i18n('VSP')}
+ type="checkbox"
+ checked={entityTypeVsp}
+ onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })}
+ data-test-id="filter-type-vsp"
+ value=""
+ />
+ <Input
+ label={i18n('VLM')}
+ type="checkbox"
+ checked={entityTypeVlm}
+ onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })}
+ data-test-id="filter-type-vlm"
+ value=""
+ />
+ </Accordion>
- <Accordion title={i18n('ROLE')}>
- <Input label={i18n('Owner')} type='checkbox' checked={roleOwner} onChange={roleOwner => onDataChanged({roleOwner})} data-test-id='filter-role-owner' value='' />
- <Input label={i18n('Contributer')} type='checkbox' checked={roleContributor}
- onChange={roleContributor => onDataChanged({roleContributor})} data-test-id='filter-role-contributor' value='' />
- <Input label={i18n('Viewer')} type='checkbox' checked={roleViewer} onChange={roleViewer => onDataChanged({roleViewer})} data-test-id='filter-role-viewr' value='' />
- </Accordion>
-
- <Accordion title={i18n('ONBOARDING PROCEDURE')}>
- <Input label={i18n('Network Package')} type='checkbox' checked={procedureNetwork}
- onChange={procedureNetwork => onDataChanged({procedureNetwork})} data-test-id='filter-procedure-network' value='' />
- <Input label={i18n('Manual')} type='checkbox' checked={procedureManual}
- onChange={procedureManual => onDataChanged({procedureManual})} data-test-id='filter-procedure-manual' value='' />
- </Accordion>
+ <Accordion title={i18n('ROLE')}>
+ <Input
+ label={i18n('Owner')}
+ type="checkbox"
+ checked={roleOwner}
+ onChange={roleOwner => onDataChanged({ roleOwner })}
+ data-test-id="filter-role-owner"
+ value=""
+ />
+ <Input
+ label={i18n('Contributer')}
+ type="checkbox"
+ checked={roleContributor}
+ onChange={roleContributor => onDataChanged({ roleContributor })}
+ data-test-id="filter-role-contributor"
+ value=""
+ />
+ <Input
+ label={i18n('Viewer')}
+ type="checkbox"
+ checked={roleViewer}
+ onChange={roleViewer => onDataChanged({ roleViewer })}
+ data-test-id="filter-role-viewr"
+ value=""
+ />
+ </Accordion>
+
+ <Accordion title={i18n('ONBOARDING PROCEDURE')}>
+ <Input
+ label={i18n('Network Package')}
+ type="checkbox"
+ checked={procedureNetwork}
+ onChange={procedureNetwork =>
+ onDataChanged({ procedureNetwork })
+ }
+ data-test-id="filter-procedure-network"
+ value=""
+ />
+ <Input
+ label={i18n('Manual')}
+ type="checkbox"
+ checked={procedureManual}
+ onChange={procedureManual => onDataChanged({ procedureManual })}
+ data-test-id="filter-procedure-manual"
+ value=""
+ />
+ </Accordion>
</div>
);
Filter.PropTypes = {
- onDataChanged: PropTypes.func,
- data: PropTypes.object
+ onDataChanged: PropTypes.func,
+ data: PropTypes.object
};
-export default featureToggle(featureToggleNames.FILTER)(connect(mapStateToProps, mapActionsToProps)(Filter));
+export default featureToggle(featureToggleNames.FILTER)(
+ connect(mapStateToProps, mapActionsToProps)(Filter)
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
index d944cb02fb..edfe592877 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
@@ -17,10 +17,10 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- FILTER_DATA_CHANGED: null
+ FILTER_DATA_CHANGED: null
});
export const itemsType = {
- ACTIVE: '1',
- ARCHIVED: '2'
-}; \ No newline at end of file
+ ACTIVE: '1',
+ ARCHIVED: '2'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
index 963226cd38..f1e857498a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
@@ -13,16 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
-export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.FILTER_DATA_CHANGED:
- return {
- ...state,
- ...action.deltaData
- };
- default:
- return state;
- }
+export default (state = {}, action) => {
+ switch (action.type) {
+ case actionTypes.FILTER_DATA_CHANGED:
+ return {
+ ...state,
+ ...action.deltaData
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
index a85c79edd9..aebb829a88 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
@@ -15,69 +15,88 @@
*/
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes} from './OnboardingCatalogConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './OnboardingCatalogConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import OnboardActionHelper from '../OnboardActionHelper.js';
import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-
function getMessageForMigration(name) {
- return (
- <div>
- <div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}</div>
- <div>{i18n('Please don’t forget to submit afterwards')}</div>
- </div>
- );
+ return (
+ <div>
+ <div>
+ {i18n(
+ '{name} needs to be updated. Click ‘Checkout & Update’, to proceed.',
+ { name: name }
+ )}
+ </div>
+ <div>{i18n('Please don’t forget to submit afterwards')}</div>
+ </div>
+ );
}
const OnboardingCatalogActionHelper = {
- changeVspOverlay(dispatch, vendor) {
- dispatch({
- type: actionTypes.CHANGE_VSP_OVERLAY,
- vendorId: vendor ? vendor.id : null
- });
- },
- closeVspOverlay(dispatch) {
- dispatch({
- type: actionTypes.CLOSE_VSP_OVERLAY
- });
- },
- changeActiveTab(dispatch, activeTab) {
- OnboardActionHelper.clearSearchValue(dispatch);
- dispatch({
- type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB,
- activeTab
- });
- },
- onVendorSelect(dispatch, {vendor}) {
- OnboardActionHelper.clearSearchValue(dispatch);
- dispatch({
- type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE,
- selectedVendor: vendor
- });
- },
- onMigrate(dispatch, softwareProduct) {
- const {name, lockingUser} = softwareProduct;
- if (NaN === NaN) { // TODO
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: 'WARNING',
- msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: lockingUser})
- }
- });
- } else {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- title: 'WARNING',
- msg: getMessageForMigration(softwareProduct.name.toUpperCase()),
- confirmationButtonText: i18n('Checkout & Update'),
- onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct})
- }
- });
- }
- }
+ changeVspOverlay(dispatch, vendor) {
+ dispatch({
+ type: actionTypes.CHANGE_VSP_OVERLAY,
+ vendorId: vendor ? vendor.id : null
+ });
+ },
+ closeVspOverlay(dispatch) {
+ dispatch({
+ type: actionTypes.CLOSE_VSP_OVERLAY
+ });
+ },
+ changeActiveTab(dispatch, activeTab) {
+ OnboardActionHelper.clearSearchValue(dispatch);
+ dispatch({
+ type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB,
+ activeTab
+ });
+ },
+ onVendorSelect(dispatch, { vendor }) {
+ OnboardActionHelper.clearSearchValue(dispatch);
+ dispatch({
+ type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE,
+ selectedVendor: vendor
+ });
+ },
+ onMigrate(dispatch, softwareProduct) {
+ const { name, lockingUser } = softwareProduct;
+ if (NaN === NaN) {
+ // TODO
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: 'WARNING',
+ msg: i18n(
+ '{name} is locked by user {lockingUser} for self-healing',
+ {
+ name: name,
+ lockingUser: lockingUser
+ }
+ )
+ }
+ });
+ } else {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: 'WARNING',
+ msg: getMessageForMigration(
+ softwareProduct.name.toUpperCase()
+ ),
+ confirmationButtonText: i18n('Checkout & Update'),
+ onConfirmed: () =>
+ SoftwareProductActionHelper.migrateSoftwareProduct(
+ dispatch,
+ {
+ softwareProduct
+ }
+ )
+ }
+ });
+ }
+ }
};
export default OnboardingCatalogActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
index 239ae4545f..f0cefdcde3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -16,41 +16,41 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const catalogItemTypes = Object.freeze({
- LICENSE_MODEL: 'license-model',
- SOFTWARE_PRODUCT: 'software-product'
+ LICENSE_MODEL: 'license-model',
+ SOFTWARE_PRODUCT: 'software-product'
});
export const catalogItemTypeClasses = {
- LICENSE_MODEL: 'license-model-type',
- SOFTWARE_PRODUCT: 'software-product-type',
- VENDOR: 'vendor-type'
+ LICENSE_MODEL: 'license-model-type',
+ SOFTWARE_PRODUCT: 'software-product-type',
+ VENDOR: 'vendor-type'
};
export const catalogItemStatuses = {
- DRAFT: 'Draft',
- CERTIFIED: 'Certified',
- ARCHIVED: 'ARCHIVED'
+ DRAFT: 'Draft',
+ CERTIFIED: 'Certified',
+ ARCHIVED: 'ARCHIVED'
};
export const modalMapper = {
- 'license-model': 'LICENSE_MODEL',
- 'software-product': 'SOFTWARE_PRODUCT'
+ 'license-model': 'LICENSE_MODEL',
+ 'software-product': 'SOFTWARE_PRODUCT'
};
export const tabsMapping = {
- 'BY_VENDOR': 1,
- 'ACTIVE': 2,
- 'ARCHIVE': 3
+ BY_VENDOR: 1,
+ ACTIVE: 2,
+ ARCHIVE: 3
};
export const migrationStatusMapper = {
- OLD_VERSION: 'True',
+ OLD_VERSION: 'True'
};
export const actionTypes = keyMirror({
- ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null,
- CHANGE_ACTIVE_CATALOG_TAB: null,
- CHANGE_SEARCH_VALUE: null,
- CHANGE_VSP_OVERLAY: null,
- CLOSE_VSP_OVERLAY: null
+ ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null,
+ CHANGE_ACTIVE_CATALOG_TAB: null,
+ CHANGE_SEARCH_VALUE: null,
+ CHANGE_VSP_OVERLAY: null,
+ CLOSE_VSP_OVERLAY: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
index 3f8a833074..9796cf8918 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
@@ -13,18 +13,21 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes, tabsMapping } from './OnboardingCatalogConstants.js';
+import { combineReducers } from 'redux';
import vendorCatalogReducer from './VendorCatalogReducer.js';
const onboardingCatalogReducer = combineReducers({
- vendorCatalog: vendorCatalogReducer,
- activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
+ vendorCatalog: vendorCatalogReducer,
+ activeTab: (state = tabsMapping.ACTIVE, action) =>
+ action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB
+ ? action.activeTab
+ : state
});
export default (state, action) => {
- if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) {
- state = undefined;
- }
- return onboardingCatalogReducer(state, action);
+ if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) {
+ state = undefined;
+ }
+ return onboardingCatalogReducer(state, action);
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
index 78258255ec..d1e401f57d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
@@ -14,6 +14,8 @@
* permissions and limitations under the License.
*/
-export const filterCatalogItemsByType = ({items, filter}) => {
- return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
+export const filterCatalogItemsByType = ({ items, filter }) => {
+ return items.filter(
+ item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1
+ );
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
index 8ae8549688..2cc32c2936 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -18,120 +18,202 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import classnames from 'classnames';
import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx';
import VendorCatalogView from './VendorCatalogView.jsx';
-import { tabsMapping} from './OnboardingCatalogConstants.js';
-import {tabsMapping as WCTabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from './OnboardingCatalogConstants.js';
+import { tabsMapping as WCTabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
-const Separator = () => (
- <div className='tab-separator'/>
-);
+const Separator = () => <div className="tab-separator" />;
-const Tab = ({onTabPress, title, dataTestId, activeTab, tabMapping}) => (
- <div
- className={classnames('catalog-header-tab', {'active': activeTab === tabMapping })}
- onClick={() => onTabPress(tabMapping)}
- data-test-id={dataTestId}>
- {title}
- </div>
+const Tab = ({ onTabPress, title, dataTestId, activeTab, tabMapping }) => (
+ <div
+ className={classnames('catalog-header-tab', {
+ active: activeTab === tabMapping
+ })}
+ onClick={() => onTabPress(tabMapping)}
+ data-test-id={dataTestId}>
+ {title}
+ </div>
);
const ArchiveTab = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Tab);
-const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Separator);
+const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(
+ Separator
+);
-const CatalogHeaderTabs = (props) => (
- <div className='catalog-header-tabs'>
- <Tab {...props} title={i18n('ACTIVE')} dataTestId='catalog-all-tab' tabMapping={tabsMapping.ACTIVE}/>
- <Separator/>
- <Tab {...props} title={i18n('BY VENDOR')} dataTestId='catalog-header-tab' tabMapping={tabsMapping.BY_VENDOR}/>
- <ArchiveTabSeparator/>
- <ArchiveTab {...props} title={i18n('ARCHIVE')} dataTestId='catalog-archive-tab' tabMapping={tabsMapping.ARCHIVE}/>
- </div>
+const CatalogHeaderTabs = props => (
+ <div className="catalog-header-tabs">
+ <Tab
+ {...props}
+ title={i18n('ACTIVE')}
+ dataTestId="catalog-all-tab"
+ tabMapping={tabsMapping.ACTIVE}
+ />
+ <Separator />
+ <Tab
+ {...props}
+ title={i18n('BY VENDOR')}
+ dataTestId="catalog-header-tab"
+ tabMapping={tabsMapping.BY_VENDOR}
+ />
+ <ArchiveTabSeparator />
+ <ArchiveTab
+ {...props}
+ title={i18n('ARCHIVE')}
+ dataTestId="catalog-archive-tab"
+ tabMapping={tabsMapping.ARCHIVE}
+ />
+ </div>
);
-const CatalogHeader = ({activeTab, onTabPress}) => (
- <div className='catalog-header'>
- <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
- </div>
+const CatalogHeader = ({ activeTab, onTabPress }) => (
+ <div className="catalog-header">
+ <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
+ </div>
);
const FilterCatalogHeader = () => (
- <div className='catalog-header'>
- <div className='catalog-header-tabs'>
- <div className='catalog-header-tab active'>
- {i18n('ONBOARD CATALOG')}
- </div>
- </div>
- </div>
+ <div className="catalog-header">
+ <div className="catalog-header-tabs">
+ <div className="catalog-header-tab active">
+ {i18n('ONBOARD CATALOG')}
+ </div>
+ </div>
+ </div>
);
-
-const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({AComp: FilterCatalogHeader, BComp: CatalogHeader});
+const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({
+ AComp: FilterCatalogHeader,
+ BComp: CatalogHeader
+});
class OnboardingCatalogView extends React.Component {
- renderViewByTab(activeTab){
- const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
- onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate,
- archivedSoftwareProductList, archivedLicenseModelList} = this.props;
+ renderViewByTab(activeTab) {
+ const {
+ finalizedLicenseModelList: licenseModelList,
+ fullLicenseModelList,
+ users,
+ vspOverlay,
+ finalizedSoftwareProductList: softwareProductList,
+ onSelectLicenseModel,
+ onSelectSoftwareProduct,
+ onAddLicenseModelClick,
+ onAddSoftwareProductClick,
+ onVspOverlayChange,
+ onVendorSelect,
+ selectedVendor,
+ searchValue,
+ onMigrate,
+ archivedSoftwareProductList,
+ archivedLicenseModelList
+ } = this.props;
- switch (activeTab){
- case tabsMapping.ARCHIVE:
- return (
- <DetailsCatalogView
- VLMList={archivedLicenseModelList}
- VSPList={archivedSoftwareProductList}
- users={users}
- onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
- onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
- filter={searchValue}
- onMigrate={onMigrate}/>
- );
- case tabsMapping.ACTIVE:
- return (
- <DetailsCatalogView
- VLMList={licenseModelList}
- VSPList={softwareProductList}
- users={users}
- onAddVLM={onAddLicenseModelClick}
- onAddVSP={onAddSoftwareProductClick}
- onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
- onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
- filter={searchValue}
- onMigrate={onMigrate}/>
- );
- case tabsMapping.BY_VENDOR:
- default:
- return (
- <VendorCatalogView
- licenseModelList={fullLicenseModelList}
- users={users}
- onAddVSP={onAddSoftwareProductClick}
- onAddVLM={onAddLicenseModelClick}
- onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
- onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
- vspOverlay={vspOverlay}
- onVendorSelect={onVendorSelect}
- selectedVendor={selectedVendor}
- onVspOverlayChange={onVspOverlayChange}
- onMigrate={onMigrate}
- filter={searchValue}/>
- );
- }
- }
+ switch (activeTab) {
+ case tabsMapping.ARCHIVE:
+ return (
+ <DetailsCatalogView
+ VLMList={archivedLicenseModelList}
+ VSPList={archivedSoftwareProductList}
+ users={users}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ filter={searchValue}
+ onMigrate={onMigrate}
+ />
+ );
+ case tabsMapping.ACTIVE:
+ return (
+ <DetailsCatalogView
+ VLMList={licenseModelList}
+ VSPList={softwareProductList}
+ users={users}
+ onAddVLM={onAddLicenseModelClick}
+ onAddVSP={onAddSoftwareProductClick}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ filter={searchValue}
+ onMigrate={onMigrate}
+ />
+ );
+ case tabsMapping.BY_VENDOR:
+ default:
+ return (
+ <VendorCatalogView
+ licenseModelList={fullLicenseModelList}
+ users={users}
+ onAddVSP={onAddSoftwareProductClick}
+ onAddVLM={onAddLicenseModelClick}
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ vspOverlay={vspOverlay}
+ onVendorSelect={onVendorSelect}
+ selectedVendor={selectedVendor}
+ onVspOverlayChange={onVspOverlayChange}
+ onMigrate={onMigrate}
+ filter={searchValue}
+ />
+ );
+ }
+ }
- render() {
- const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props;
- return (
- <div className='catalog-wrapper'>
- {!selectedVendor && <FeaturedCatalogHeader
- onSearch={event => onSearch(event.target.value)}
- activeTab={activeTab}
- onTabPress={tab => onCatalogTabClick(tab)}
- searchValue={searchValue}/>}
- {this.renderViewByTab(activeTab)}
- </div>
- );
- }
+ render() {
+ const {
+ selectedVendor,
+ catalogActiveTab: activeTab,
+ onCatalogTabClick,
+ onSearch,
+ searchValue
+ } = this.props;
+ return (
+ <div className="catalog-wrapper">
+ {!selectedVendor && (
+ <FeaturedCatalogHeader
+ onSearch={event => onSearch(event.target.value)}
+ activeTab={activeTab}
+ onTabPress={tab => onCatalogTabClick(tab)}
+ searchValue={searchValue}
+ />
+ )}
+ {this.renderViewByTab(activeTab)}
+ </div>
+ );
+ }
}
export default OnboardingCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
index 80d9b07ac9..2f00bf95ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
@@ -19,13 +19,27 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
const tooltip = (msg, className = '') => (
- <Tooltip className={className} id={className}>{msg}</Tooltip>
+ <Tooltip className={className} id={className}>
+ {msg}
+ </Tooltip>
);
-export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => (
- <OverlayTrigger placement={placement} overlay={tooltip(children, tooltipClassName)} delayShow={delayShow}>
- <div className={className} data-test-id={dataTestId}>{children}</div>
- </OverlayTrigger>
+export const TooltipWrapper = ({
+ placement = 'top',
+ className = '',
+ tooltipClassName = '',
+ dataTestId,
+ delayShow = 0,
+ children
+}) => (
+ <OverlayTrigger
+ placement={placement}
+ overlay={tooltip(children, tooltipClassName)}
+ delayShow={delayShow}>
+ <div className={className} data-test-id={dataTestId}>
+ {children}
+ </div>
+ </OverlayTrigger>
);
export default tooltip;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
index a2852e5afa..c2eb8250f8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -16,36 +16,52 @@
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {migrationStatusMapper} from './OnboardingCatalogConstants.js';
+import { migrationStatusMapper } from './OnboardingCatalogConstants.js';
-const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => (
- <div className='vsp-overlay-wrapper' onClick={(e) => {
- e.stopPropagation();
- e.preventDefault();
- }}>
- <div className='vsp-overlay-arrow'></div>
- <div className='vsp-overlay'>
- <div className='vsp-overlay-title'>{i18n('Recently Edited')}</div>
- <div className='vsp-overlay-list'>
- {VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => {
- if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) {
- onMigrate({
- softwareProduct: vsp
- });
- } else {
- onSelectVSP(vsp);
- }
- }
- }>{i18n(vsp.name)}</div>)}
- </div>
- {VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>}
- </div>
- </div>
+const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => (
+ <div
+ className="vsp-overlay-wrapper"
+ onClick={e => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}>
+ <div className="vsp-overlay-arrow" />
+ <div className="vsp-overlay">
+ <div className="vsp-overlay-title">{i18n('Recently Edited')}</div>
+ <div className="vsp-overlay-list">
+ {VSPList.slice(0, 5).map(vsp => (
+ <div
+ key={vsp.id}
+ className="vsp-overlay-detail"
+ onClick={() => {
+ if (
+ vsp.isOldVersion &&
+ vsp.isOldVersion ===
+ migrationStatusMapper.OLD_VERSION
+ ) {
+ onMigrate({
+ softwareProduct: vsp
+ });
+ } else {
+ onSelectVSP(vsp);
+ }
+ }}>
+ {i18n(vsp.name)}
+ </div>
+ ))}
+ </div>
+ {VSPList.length > 5 && (
+ <div className="vsp-overlay-see-more" onClick={onSeeMore}>
+ {i18n('See More')}
+ </div>
+ )}
+ </div>
+ </div>
);
VSPOverlay.PropTypes = {
- VSPList: PropTypes.array,
- onSelectVSP: PropTypes.func
+ VSPList: PropTypes.array,
+ onSelectVSP: PropTypes.func
};
export default VSPOverlay;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
index dd8b41bd22..2d22a2db90 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
@@ -13,26 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './OnboardingCatalogConstants.js';
+import { actionTypes } from './OnboardingCatalogConstants.js';
export default (state = {}, action) => {
- switch(action.type) {
- case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE:
- return {
- ...state,
- selectedVendor: action.selectedVendor
- };
- case actionTypes.CHANGE_VSP_OVERLAY:
- return {
- ...state,
- vspOverlay: action.vendorId
- };
- case actionTypes.CLOSE_VSP_OVERLAY:
- return {
- ...state,
- vspOverlay: null
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE:
+ return {
+ ...state,
+ selectedVendor: action.selectedVendor
+ };
+ case actionTypes.CHANGE_VSP_OVERLAY:
+ return {
+ ...state,
+ vspOverlay: action.vendorId
+ };
+ case actionTypes.CLOSE_VSP_OVERLAY:
+ return {
+ ...state,
+ vspOverlay: null
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
index 9914ea2154..02f8d50c5c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
@@ -17,58 +17,100 @@ import React from 'react';
import VendorItem from './VendorItem.jsx';
import CatalogList from '../CatalogList.jsx';
import CatalogItemDetails from '../CatalogItemDetails.jsx';
-import {catalogItemTypes} from './OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './OnboardingCatalogUtils.js';
-const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => {
- return(
- <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
- {
- filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm =>
- <VendorItem
- key={vlm.id}
- onAddVSP={onAddVSP}
- onSelectVSP={(vsp) => onSelectVSP(vsp, users)}
- shouldShowOverlay={currentOverlay === vlm.id}
- onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
- onVendorSelect={onVendorSelect}
- onMigrate={onMigrate}
- vendor={vlm}/>)
- }
- </CatalogList>
- );
+const VendorList = ({
+ onAddVLM,
+ onAddVSP,
+ onSelectVSP,
+ licenseModelList = [],
+ vspOverlay: currentOverlay,
+ onVspOverlayChange,
+ onVendorSelect,
+ filter,
+ onMigrate,
+ users
+}) => {
+ return (
+ <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+ {filterCatalogItemsByType({ items: licenseModelList, filter }).map(
+ vlm => (
+ <VendorItem
+ key={vlm.id}
+ onAddVSP={onAddVSP}
+ onSelectVSP={vsp => onSelectVSP(vsp, users)}
+ shouldShowOverlay={currentOverlay === vlm.id}
+ onVSPButtonClick={hasVSP =>
+ onVspOverlayChange(
+ vlm.id === currentOverlay || !hasVSP
+ ? null
+ : vlm
+ )
+ }
+ onVendorSelect={onVendorSelect}
+ onMigrate={onMigrate}
+ vendor={vlm}
+ />
+ )
+ )}
+ </CatalogList>
+ );
};
-const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => {
- return(
- <div>
- <CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}>
- <CatalogItemDetails
- key={selectedVendor.id}
- onSelect={() => onSelectVLM(selectedVendor, users)}
- catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
- onMigrate={onMigrate}
- catalogItemData={selectedVendor}/>
- {
- filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp =>
- <CatalogItemDetails
- key={vsp.id}
- catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
- onMigrate={onMigrate}
- onSelect={() => onSelectVSP(vsp, users)}
- catalogItemData={vsp}/>
- )
- }
- </CatalogList>
- </div>
- );
+const SoftwareProductListByVendor = ({
+ onAddVSP,
+ selectedVendor,
+ onVendorSelect,
+ onSelectVSP,
+ onSelectVLM,
+ filter,
+ onMigrate,
+ users
+}) => {
+ return (
+ <div>
+ <CatalogList
+ onAddVSP={() => {
+ onAddVSP(selectedVendor.id);
+ }}
+ vendorPageOptions={{
+ selectedVendor,
+ onBack: () => onVendorSelect(false)
+ }}>
+ <CatalogItemDetails
+ key={selectedVendor.id}
+ onSelect={() => onSelectVLM(selectedVendor, users)}
+ catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
+ onMigrate={onMigrate}
+ catalogItemData={selectedVendor}
+ />
+ {filterCatalogItemsByType({
+ items: selectedVendor.softwareProductList,
+ filter
+ }).map(vsp => (
+ <CatalogItemDetails
+ key={vsp.id}
+ catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
+ onMigrate={onMigrate}
+ onSelect={() => onSelectVSP(vsp, users)}
+ catalogItemData={vsp}
+ />
+ ))}
+ </CatalogList>
+ </div>
+ );
};
class VendorCatalogView extends React.Component {
- render() {
- let {selectedVendor} = this.props;
- return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>);
- }
+ render() {
+ let { selectedVendor } = this.props;
+ return selectedVendor ? (
+ <SoftwareProductListByVendor {...this.props} />
+ ) : (
+ <VendorList {...this.props} />
+ );
+ }
}
export default VendorCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
index 158282cc48..bef47d5acf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -16,82 +16,102 @@
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react';
+import {
+ Tile,
+ TileInfo,
+ TileInfoLine,
+ TileFooter,
+ TileFooterCell,
+ Button
+} from 'sdc-ui/lib/react';
import VSPOverlay from './VSPOverlay.jsx';
-import {TooltipWrapper} from './Tooltip.jsx';
+import { TooltipWrapper } from './Tooltip.jsx';
class VendorItem extends React.Component {
+ static PropTypes = {
+ softwareProductList: PropTypes.array,
+ vendor: PropTypes.object,
+ shouldShowOverlay: PropTypes.bool,
+ onSelectVSP: PropTypes.func,
+ onVendorSelect: PropTypes.func,
+ onAddVSP: PropTypes.func,
+ onVSPButtonClick: PropTypes.func
+ };
- static PropTypes = {
- softwareProductList: PropTypes.array,
- vendor: PropTypes.object,
- shouldShowOverlay: PropTypes.bool,
- onSelectVSP: PropTypes.func,
- onVendorSelect: PropTypes.func,
- onAddVSP: PropTypes.func,
- onVSPButtonClick: PropTypes.func
- };
+ render() {
+ let {
+ vendor,
+ onSelectVSP,
+ shouldShowOverlay,
+ onVendorSelect,
+ onMigrate
+ } = this.props;
+ let { softwareProductList = [], name } = vendor;
+ return (
+ <Tile iconName="vendor" onClick={() => onVendorSelect(vendor)}>
+ <TileInfo align="center">
+ <TileInfoLine type="title">
+ <TooltipWrapper
+ className="with-overlay"
+ dataTestId="catalog-item-name">
+ {name}
+ </TooltipWrapper>
+ </TileInfoLine>
+ <TileInfoLine>
+ <Button
+ btnType="outline-rounded"
+ color="dark-gray"
+ onClick={e => this.handleVspCountClick(e)}
+ data-test-id="catalog-vsp-count"
+ disabled={!softwareProductList.length}>
+ {i18n('{length} VSPs', {
+ length: softwareProductList.length
+ })}
+ </Button>
+ {shouldShowOverlay &&
+ softwareProductList.length > 0 && (
+ <VSPOverlay
+ onMigrate={onMigrate}
+ VSPList={softwareProductList}
+ onSelectVSP={onSelectVSP}
+ onSeeMore={() => onVendorSelect(vendor)}
+ />
+ )}
+ </TileInfoLine>
+ </TileInfo>
+ <TileFooter align="center">
+ <TileFooterCell dataTestId="catalog-create-new-vsp-from-vendor">
+ <Button
+ btnType="link"
+ color="primary"
+ iconName="plusThin"
+ onClick={e => this.onCreateVspClick(e)}>
+ {i18n('Create new VSP')}
+ </Button>
+ </TileFooterCell>
+ </TileFooter>
+ </Tile>
+ );
+ }
- render() {
- let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
- let {softwareProductList = [], name} = vendor;
- return (
- <Tile
- iconName='vendor'
- onClick={() => onVendorSelect(vendor)}>
- <TileInfo align='center'>
- <TileInfoLine type='title'>
- <TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
- </TileInfoLine>
- <TileInfoLine>
- <Button
- btnType='outline-rounded'
- color='dark-gray'
- onClick={e => this.handleVspCountClick(e)}
- data-test-id='catalog-vsp-count'
- disabled={!softwareProductList.length}>
- {i18n('{length} VSPs', {length: softwareProductList.length})}
- </Button>
- {shouldShowOverlay && softwareProductList.length > 0 &&
- <VSPOverlay
- onMigrate={onMigrate}
- VSPList={softwareProductList}
- onSelectVSP={onSelectVSP}
- onSeeMore={() => onVendorSelect(vendor)} />
- }
- </TileInfoLine>
- </TileInfo>
- <TileFooter align='center'>
- <TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'>
- <Button
- btnType='link'
- color='primary'
- iconName='plusThin'
- onClick={e => this.onCreateVspClick(e)}>
- {i18n('Create new VSP')}
- </Button>
- </TileFooterCell>
- </TileFooter>
- </Tile>
- );
- }
-
- onCreateVspClick(e) {
- e.stopPropagation();
- e.preventDefault();
- const {onAddVSP, vendor: {id}} = this.props;
- onAddVSP(id);
- }
-
- handleVspCountClick(e){
- e.stopPropagation();
- e.preventDefault();
- const {onVSPButtonClick, vendor: {softwareProductList}} = this.props;
- const hasVSP = Boolean(softwareProductList.length);
- onVSPButtonClick(hasVSP);
- }
+ onCreateVspClick(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ const { onAddVSP, vendor: { id } } = this.props;
+ onAddVSP(id);
+ }
+ handleVspCountClick(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ const {
+ onVSPButtonClick,
+ vendor: { softwareProductList }
+ } = this.props;
+ const hasVSP = Boolean(softwareProductList.length);
+ onVSPButtonClick(hasVSP);
+ }
}
export default VendorItem;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
index a937c11d85..2f17867af1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
@@ -16,31 +16,43 @@
import React from 'react';
import DetailsCatalogView from '../DetailsCatalogView.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {tabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
-const WorkspaceView = (props) => {
- let {
- licenseModelList, softwareProductList, onAddLicenseModelClick, users,
- onAddSoftwareProductClick, onSelectLicenseModel, onSelectSoftwareProduct, searchValue, onMigrate
- } = props;
+const WorkspaceView = props => {
+ let {
+ licenseModelList,
+ softwareProductList,
+ onAddLicenseModelClick,
+ users,
+ onAddSoftwareProductClick,
+ onSelectLicenseModel,
+ onSelectSoftwareProduct,
+ searchValue,
+ onMigrate
+ } = props;
- return (
- <div className='catalog-wrapper workspace-view'>
- <div className='catalog-header workspace-header'>
- {i18n('WORKSPACE')}
- </div>
- <DetailsCatalogView
- VLMList={licenseModelList}
- VSPList={softwareProductList}
- users={users}
- onAddVLM={onAddLicenseModelClick}
- onAddVSP={onAddSoftwareProductClick}
- onSelectVLM={(item, users) => onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)}
- onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)}
- onMigrate={onMigrate}
- filter={searchValue} />
- </div>
- );
+ return (
+ <div className="catalog-wrapper workspace-view">
+ <div className="catalog-header workspace-header">
+ {i18n('WORKSPACE')}
+ </div>
+ <DetailsCatalogView
+ VLMList={licenseModelList}
+ VSPList={softwareProductList}
+ users={users}
+ onAddVLM={onAddLicenseModelClick}
+ onAddVSP={onAddSoftwareProductClick}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)
+ }
+ onMigrate={onMigrate}
+ filter={searchValue}
+ />
+ </div>
+ );
};
export default WorkspaceView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
index c25d93f2fc..d42a2f83ad 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsActionHelper.js
@@ -15,94 +15,110 @@
*/
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionTypes} from './PermissionsConstants.js';
-import {permissionTypes} from './PermissionsConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {askForRightsMsg} from './PermissionsManager.jsx';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './PermissionsConstants.js';
+import { permissionTypes } from './PermissionsConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { askForRightsMsg } from './PermissionsManager.jsx';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
const PermissionsActionHelper = {
- openPermissonsManager(dispatch, {itemId, askForRights}) {
- if (askForRights) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- title: i18n('Ask For Contributers Rights'),
- msg: askForRightsMsg(),
- confirmationButtonText: i18n('SEND'),
- onConfirmed: () => this.askForContributorRights()
- }
- });
- } else {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.MANAGE_PERMISSIONS,
- title: i18n('Manage Permissions'),
- modalComponentProps: {
- itemId
- }
- }
- });
- }
- },
+ openPermissonsManager(dispatch, { itemId, askForRights }) {
+ if (askForRights) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ title: i18n('Ask For Contributers Rights'),
+ msg: askForRightsMsg(),
+ confirmationButtonText: i18n('SEND'),
+ onConfirmed: () => this.askForContributorRights()
+ }
+ });
+ } else {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.MANAGE_PERMISSIONS,
+ title: i18n('Manage Permissions'),
+ modalComponentProps: {
+ itemId
+ }
+ }
+ });
+ }
+ },
- closePermissionManager(dispatch) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- },
+ closePermissionManager(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ },
- saveItemUsers(dispatch, {itemId, removedUsersIds, addedUsersIds, allUsers}) {
- return ItemsHelper.updateContributors({itemId, removedUsersIds, addedUsersIds}).then(() =>
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers})
- );
- },
+ saveItemUsers(
+ dispatch,
+ { itemId, removedUsersIds, addedUsersIds, allUsers }
+ ) {
+ return ItemsHelper.updateContributors({
+ itemId,
+ removedUsersIds,
+ addedUsersIds
+ }).then(() =>
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId,
+ allUsers
+ })
+ );
+ },
- changeOwner(dispatch, {itemId, newOwnerId, allUsers}) {
- return ItemsHelper.changeOwner({itemId, ownerId: newOwnerId}).then(() =>
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers})
- );
- },
+ changeOwner(dispatch, { itemId, newOwnerId, allUsers }) {
+ return ItemsHelper.changeOwner({ itemId, ownerId: newOwnerId }).then(
+ () =>
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId,
+ allUsers
+ })
+ );
+ },
- fetchItemUsers(dispatch, {itemId, allUsers}) {
- return ItemsHelper.fetchUsers({itemId}).then(response => {
+ fetchItemUsers(dispatch, { itemId, allUsers }) {
+ return ItemsHelper.fetchUsers({ itemId }).then(response => {
+ let allContributors = response.results;
- let allContributors = response.results;
-
- let owner = {};
- let contributors = [];
- allContributors.map(user => {
- let userObject = allUsers.find(userObject => userObject.userId === user.userId);
- if (userObject) {
- user = {...user, fullName: userObject.fullName, role: userObject.role};
-
- switch(user.permission) {
- case permissionTypes.OWNER:
- owner = user;
- break;
- case permissionTypes.CONTRIBUTOR:
- contributors.push(user);
- break;
- }
- }
- });
-
- dispatch({
- type: actionTypes.ITEM_USERS_LOADED,
- contributors,
- owner
- });
- });
- },
-
- askForContributorRights() {
- console.log('asked for contributor rights');
- }
+ let owner = {};
+ let contributors = [];
+ allContributors.map(user => {
+ let userObject = allUsers.find(
+ userObject => userObject.userId === user.userId
+ );
+ if (userObject) {
+ user = {
+ ...user,
+ fullName: userObject.fullName,
+ role: userObject.role
+ };
+ switch (user.permission) {
+ case permissionTypes.OWNER:
+ owner = user;
+ break;
+ case permissionTypes.CONTRIBUTOR:
+ contributors.push(user);
+ break;
+ }
+ }
+ });
+ dispatch({
+ type: actionTypes.ITEM_USERS_LOADED,
+ contributors,
+ owner
+ });
+ });
+ },
+ askForContributorRights() {
+ console.log('asked for contributor rights');
+ }
};
export default PermissionsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
index 48a3461799..686aaaf0dd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsConstants.js
@@ -16,12 +16,13 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- ITEM_USERS_LOADED: null
+ ITEM_USERS_LOADED: null
});
export const permissionTypes = {
- OWNER: 'Owner',
- CONTRIBUTOR: 'Contributor'
+ OWNER: 'Owner',
+ CONTRIBUTOR: 'Contributor'
};
-export const changeOwnerMessage = 'You will no longer be able to manage the permissions of this item.\nYour permission level will be set to contributor.';
+export const changeOwnerMessage =
+ 'You will no longer be able to manage the permissions of this item.\nYour permission level will be set to contributor.';
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
index ba6562b28f..3b6d62bc15 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.js
@@ -14,30 +14,55 @@
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import PermissionsManager from './PermissionsManager.jsx';
import PermissionsActionHelper from './PermissionsActionHelper.js';
-export const mapStateToProps = ({versionsPage, users: {usersList, userInfo}}) => {
- let {permissions} = versionsPage;
+export const mapStateToProps = ({
+ versionsPage,
+ users: { usersList, userInfo }
+}) => {
+ let { permissions } = versionsPage;
- return {
- users: usersList,
- userInfo,
- owner: permissions.owner,
- itemUsers: permissions.contributors
- };
+ return {
+ users: usersList,
+ userInfo,
+ owner: permissions.owner,
+ itemUsers: permissions.contributors
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- onCancel: () => PermissionsActionHelper.closePermissionManager(dispatch),
- onSubmit: ({itemId, addedUsersIds, removedUsersIds, allUsers, newOwnerId}) => {
- return PermissionsActionHelper.saveItemUsers(dispatch,{itemId, addedUsersIds, removedUsersIds, allUsers}).then(() => {
- return newOwnerId ? PermissionsActionHelper.changeOwner(dispatch, {itemId, newOwnerId, allUsers}) : Promise.resolve();
- }).then(() => PermissionsActionHelper.closePermissionManager(dispatch));
- }
- };
+const mapActionsToProps = dispatch => {
+ return {
+ onCancel: () =>
+ PermissionsActionHelper.closePermissionManager(dispatch),
+ onSubmit: ({
+ itemId,
+ addedUsersIds,
+ removedUsersIds,
+ allUsers,
+ newOwnerId
+ }) => {
+ return PermissionsActionHelper.saveItemUsers(dispatch, {
+ itemId,
+ addedUsersIds,
+ removedUsersIds,
+ allUsers
+ })
+ .then(() => {
+ return newOwnerId
+ ? PermissionsActionHelper.changeOwner(dispatch, {
+ itemId,
+ newOwnerId,
+ allUsers
+ })
+ : Promise.resolve();
+ })
+ .then(() =>
+ PermissionsActionHelper.closePermissionManager(dispatch)
+ );
+ }
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(PermissionsManager);
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
index b7d5d57cca..ab6add8ac2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
@@ -21,97 +21,154 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {permissionTypes, changeOwnerMessage} from './PermissionsConstants.js';
+import { permissionTypes, changeOwnerMessage } from './PermissionsConstants.js';
export const askForRightsMsg = () => {
- return (
- <div>
- <p>{i18n('Send a Contributor rights reguest to Owner')}</p>
- </div>
- );
+ return (
+ <div>
+ <p>{i18n('Send a Contributor rights reguest to Owner')}</p>
+ </div>
+ );
};
-
class Permissions extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- itemUsers: props.itemUsers,
- newOwnerId: '',
- showChangeOwner: false
- };
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ itemUsers: props.itemUsers,
+ newOwnerId: '',
+ showChangeOwner: false
+ };
+ }
- buildUserOptions() {
- let {users, owner} = this.props;
- return users.filter(user => user.userId !== owner.userId).map(item => {return {label: item.fullName, value: item.userId};});
- }
+ buildUserOptions() {
+ let { users, owner } = this.props;
+ return users.filter(user => user.userId !== owner.userId).map(item => {
+ return { label: item.fullName, value: item.userId };
+ });
+ }
- render() {
- let {onCancel, owner} = this.props;
- let {newOwnerId} = this.state;
- return (
- <div className='manage-permissions-page'>
- <Form
- hasButtons={true}
- onSubmit={() => this.onsaveItemUsers()}
- onReset={() => onCancel() }
- labledButtons={true}>
- <div className='manage-permissions-title'>{i18n('Owner')}</div>
- <div className='owner-details'>
- <span>{owner.fullName}</span>
- <span className='change-owner' onClick={() => this.setState({showChangeOwner: !this.state.showChangeOwner})}>{i18n('Change Owner')}</span>
- </div>
- {this.state.showChangeOwner && <div className='change-owner-wrapper'>
- <div className='change-owner-title'>
- <span className='manage-permissions-title' data-test-id='change-owner'>{i18n('Change Owner')}</span>
- <OverlayTrigger placement='right' trigger='click' overlay={
- <Tooltip id='manage-permissions-owner-tooltip' className='manage-permissions-owner-tooltip'>{i18n(changeOwnerMessage)}</Tooltip> }>
- <SVGIcon name='questionMark' />
- </OverlayTrigger>
- </div>
- <Select
- data-test-id='selected-owner'
- value={newOwnerId}
- onChange={(item) => this.setState({newOwnerId: item ? item.value : ''})}
- options={this.buildUserOptions()} />
- </div>}
- <div className='manage-permissions-title'>{i18n('Contributors')}</div>
- <Select
- data-test-id='selected-contributors'
- value={this.state.itemUsers.map(item => item.userId)}
- className='options-input contributors-select'
- clearable={false}
- onMultiSelectChanged={(value) => {this.onChangeItemUsers({itemUsers: value});}}
- options={this.buildUserOptions()}
- multi/>
- </Form>
- </div>
- );
- }
+ render() {
+ let { onCancel, owner } = this.props;
+ let { newOwnerId } = this.state;
+ return (
+ <div className="manage-permissions-page">
+ <Form
+ hasButtons={true}
+ onSubmit={() => this.onsaveItemUsers()}
+ onReset={() => onCancel()}
+ labledButtons={true}>
+ <div className="manage-permissions-title">
+ {i18n('Owner')}
+ </div>
+ <div className="owner-details">
+ <span>{owner.fullName}</span>
+ <span
+ className="change-owner"
+ onClick={() =>
+ this.setState({
+ showChangeOwner: !this.state.showChangeOwner
+ })
+ }>
+ {i18n('Change Owner')}
+ </span>
+ </div>
+ {this.state.showChangeOwner && (
+ <div className="change-owner-wrapper">
+ <div className="change-owner-title">
+ <span
+ className="manage-permissions-title"
+ data-test-id="change-owner">
+ {i18n('Change Owner')}
+ </span>
+ <OverlayTrigger
+ placement="right"
+ trigger="click"
+ overlay={
+ <Tooltip
+ id="manage-permissions-owner-tooltip"
+ className="manage-permissions-owner-tooltip">
+ {i18n(changeOwnerMessage)}
+ </Tooltip>
+ }>
+ <SVGIcon name="questionMark" />
+ </OverlayTrigger>
+ </div>
+ <Select
+ data-test-id="selected-owner"
+ value={newOwnerId}
+ onChange={item =>
+ this.setState({
+ newOwnerId: item ? item.value : ''
+ })
+ }
+ options={this.buildUserOptions()}
+ />
+ </div>
+ )}
+ <div className="manage-permissions-title">
+ {i18n('Contributors')}
+ </div>
+ <Select
+ data-test-id="selected-contributors"
+ value={this.state.itemUsers.map(item => item.userId)}
+ className="options-input contributors-select"
+ clearable={false}
+ onMultiSelectChanged={value => {
+ this.onChangeItemUsers({ itemUsers: value });
+ }}
+ options={this.buildUserOptions()}
+ multi
+ />
+ </Form>
+ </div>
+ );
+ }
- onChangeItemUsers({itemUsers}) {
- this.setState({
- itemUsers: itemUsers.map(contributor => {
- let contributorFromProps = this.props.itemUsers.find(user => user.userId === contributor.userId);
- return {
- userId: contributor.value,
- fullName: contributor.label,
- permission: contributorFromProps ? contributorFromProps.permission : permissionTypes.CONTRIBUTOR
- };
- })
- });
- }
+ onChangeItemUsers({ itemUsers }) {
+ this.setState({
+ itemUsers: itemUsers.map(contributor => {
+ let contributorFromProps = this.props.itemUsers.find(
+ user => user.userId === contributor.userId
+ );
+ return {
+ userId: contributor.value,
+ fullName: contributor.label,
+ permission: contributorFromProps
+ ? contributorFromProps.permission
+ : permissionTypes.CONTRIBUTOR
+ };
+ })
+ });
+ }
- onsaveItemUsers() {
- let {itemUsers: newUsers, newOwnerId} = this.state;
- let {itemUsers: oldUsers, onSubmit, itemId, users} = this.props;
- let addedUsersIds = newUsers.filter(newUser => !oldUsers.map(oldUser => oldUser.userId).includes(newUser.userId))
- .map(user => user.userId);
- let removedUsersIds = oldUsers.filter(oldUser => !newUsers.map(newUser => newUser.userId).includes(oldUser.userId))
- .map(user => user.userId);
- onSubmit({itemId, addedUsersIds, removedUsersIds, allUsers: users, newOwnerId});
- }
+ onsaveItemUsers() {
+ let { itemUsers: newUsers, newOwnerId } = this.state;
+ let { itemUsers: oldUsers, onSubmit, itemId, users } = this.props;
+ let addedUsersIds = newUsers
+ .filter(
+ newUser =>
+ !oldUsers
+ .map(oldUser => oldUser.userId)
+ .includes(newUser.userId)
+ )
+ .map(user => user.userId);
+ let removedUsersIds = oldUsers
+ .filter(
+ oldUser =>
+ !newUsers
+ .map(newUser => newUser.userId)
+ .includes(oldUser.userId)
+ )
+ .map(user => user.userId);
+ onSubmit({
+ itemId,
+ addedUsersIds,
+ removedUsersIds,
+ allUsers: users,
+ newOwnerId
+ });
+ }
}
export default Permissions;
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
index b4ab78964d..6e817ae3db 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsReducer.js
@@ -13,16 +13,16 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './PermissionsConstants.js';
+import { actionTypes } from './PermissionsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.ITEM_USERS_LOADED:
- return {
- owner: action.owner,
- contributors: action.contributors
- };
- default:
- return state;
- }
-}; \ No newline at end of file
+ switch (action.type) {
+ case actionTypes.ITEM_USERS_LOADED:
+ return {
+ owner: action.owner,
+ contributors: action.contributors
+ };
+ default:
+ return state;
+ }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js b/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
index 73ee5dea21..738e7459fe 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/Revisions.js
@@ -14,24 +14,31 @@
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import RevisionsView from './RevisionsView.jsx';
import RevisionsActionHelper from './RevisionsActionHelper.js';
-export const mapStateToProps = ({revisions, users}) => {
- return {
- revisions: revisions,
- users: users.usersList
- };
+export const mapStateToProps = ({ revisions, users }) => {
+ return {
+ revisions: revisions,
+ users: users.usersList
+ };
};
-export const mapActionsToProps = (dispatch, {itemId, version, itemType}) => {
- return {
- onCancel: () => RevisionsActionHelper.closeRevisionsView(dispatch),
- onRevert: (revisionId) => {
- RevisionsActionHelper.revertToRevision(dispatch, {itemId, version, revisionId, itemType});
- }
- };
+export const mapActionsToProps = (dispatch, { itemId, version, itemType }) => {
+ return {
+ onCancel: () => RevisionsActionHelper.closeRevisionsView(dispatch),
+ onRevert: revisionId => {
+ RevisionsActionHelper.revertToRevision(dispatch, {
+ itemId,
+ version,
+ revisionId,
+ itemType
+ });
+ }
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(RevisionsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(RevisionsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
index 4fd9082b5b..61ccad0cc4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
@@ -16,85 +16,89 @@
import i18n from 'nfvo-utils/i18n/i18n.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {actionsEnum as vcActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionsEnum as vcActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
-import {actionTypes} from './RevisionsConstants.js';
+import { actionTypes } from './RevisionsConstants.js';
function baseUrl(itemId, version) {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/items/${itemId}/versions/${version.id}`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/items/${itemId}/versions/${version.id}`;
}
-function fetchRevisions(itemId, version){
- let fetchUrl = `${baseUrl(itemId, version)}/revisions`;
- return RestAPIUtil.fetch(fetchUrl);
+function fetchRevisions(itemId, version) {
+ let fetchUrl = `${baseUrl(itemId, version)}/revisions`;
+ return RestAPIUtil.fetch(fetchUrl);
}
function revertToRevision(itemId, version, revisionId) {
- let putUrl = `${baseUrl(itemId, version)}/actions`;
- let requestBody = {
- action: vcActionsEnum.REVERT,
- revisionRequest: {
- revisionId: revisionId
- }
- };
- return RestAPIUtil.put(putUrl, requestBody);
+ let putUrl = `${baseUrl(itemId, version)}/actions`;
+ let requestBody = {
+ action: vcActionsEnum.REVERT,
+ revisionRequest: {
+ revisionId: revisionId
+ }
+ };
+ return RestAPIUtil.put(putUrl, requestBody);
}
const RevisionaActionHelper = {
- openRevisionsView(dispatch, {itemId, version, itemType}) {
- this.fetchRevisions(dispatch, {itemId, version}).then(() => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.REVISIONS_LIST,
- modalClassName: 'manage-revisions-modal',
- title: i18n('Revert'),
- modalComponentProps: {
- itemId: itemId,
- version: version,
- itemType
- }
- }
- });
- });
- },
+ openRevisionsView(dispatch, { itemId, version, itemType }) {
+ this.fetchRevisions(dispatch, { itemId, version }).then(() => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.REVISIONS_LIST,
+ modalClassName: 'manage-revisions-modal',
+ title: i18n('Revert'),
+ modalComponentProps: {
+ itemId: itemId,
+ version: version,
+ itemType
+ }
+ }
+ });
+ });
+ },
- closeRevisionsView(dispatch) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- },
+ closeRevisionsView(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ },
+ fetchRevisions(dispatch, { itemId, version }) {
+ return fetchRevisions(itemId, version).then(response => {
+ dispatch({
+ type: actionTypes.ITEM_REVISIONS_LOADED,
+ response: response
+ });
+ });
+ },
- fetchRevisions(dispatch, {itemId, version}) {
- return fetchRevisions(itemId, version).then((response) => {
- dispatch({
- type: actionTypes.ITEM_REVISIONS_LOADED,
- response: response
- });
- });
- },
-
- revertToRevision(dispatch, {itemId, version, revisionId, itemType}) {
- return revertToRevision(itemId, version, revisionId).then(() => {
- this.closeRevisionsView(dispatch);
- if (itemType === screenTypes.LICENSE_MODEL) {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId: itemId, version}});
- } else {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId: itemId, version}});
- }
- });
-
- }
+ revertToRevision(dispatch, { itemId, version, revisionId, itemType }) {
+ return revertToRevision(itemId, version, revisionId).then(() => {
+ this.closeRevisionsView(dispatch);
+ if (itemType === screenTypes.LICENSE_MODEL) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId: itemId, version }
+ });
+ } else {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId: itemId, version }
+ });
+ }
+ });
+ }
};
export default RevisionaActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
index 28a9fa0ff5..dc1845c59c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsConstants.js
@@ -16,5 +16,5 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- ITEM_REVISIONS_LOADED: null
+ ITEM_REVISIONS_LOADED: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
index 778350b93f..a3e6ce8ab0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './RevisionsConstants.js';
+import { actionTypes } from './RevisionsConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.ITEM_REVISIONS_LOADED:
- return action.response.results;
- default:
- return state;
- }
-}; \ No newline at end of file
+ switch (action.type) {
+ case actionTypes.ITEM_REVISIONS_LOADED:
+ return action.response.results;
+ default:
+ return state;
+ }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
index d6ef604a22..1fc8c06925 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
@@ -23,65 +23,111 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
-
class RevisionsView extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- revertId : null
- };
- }
-
- render() {
- let {onCancel, onRevert, revisions, users} = this.props;
- return (
- <div className='manage-revisions-page'>
- <Form
- hasButtons={true}
- onSubmit={() => onRevert(this.state.revertId)}
- onReset={() => onCancel() }
- submitButtonText={i18n('Revert')}
- labledButtons={true}>
- <ListEditorView
- title={i18n('Select a Commit')}
- isReadOnlyMode={false}>
- {revisions.map((revision) => {
- return (
- <div key={revision.id} data-test-id='revision-list-item' className={`revision-list-item ${this.state.revertId === revision.id ? 'selected' : ''}`}>
- <ListEditorItemView
- isReadOnlyMode={false}
- onSelect={() => this.setState({revertId : revision.id})}>
- <ListEditorItemViewField>
- <div className='revision-list-item-fields'>
- <div data-test-id='revision-user' className='revision-user'>
- <SVGIcon name='user' label={users.find(userObject => userObject.userId === revision.user).fullName} labelPosition='right'/>
- </div>
- <div className='revision-date' data-test-id='revision-date'>
- <span className='revision-date'>{i18n.dateNormal(revision.time, {
- year: 'numeric', month: 'numeric', day: 'numeric'
- })}</span>
- <span className='revision-time'>{i18n.dateNormal(revision.time, {
- hour: 'numeric', minute: 'numeric',
- hour12: true
- })}</span>
- </div>
- <div className='revision-message'data-test-id='revision-message'>
- {revision.message && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
- {revision.message}
- </ShowMore>}</div>
- </div>
- </ListEditorItemViewField>
- </ListEditorItemView>
- </div>
-
- );
- })}
- </ListEditorView>
- </Form>
- </div>
- );
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ revertId: null
+ };
+ }
+ render() {
+ let { onCancel, onRevert, revisions, users } = this.props;
+ return (
+ <div className="manage-revisions-page">
+ <Form
+ hasButtons={true}
+ onSubmit={() => onRevert(this.state.revertId)}
+ onReset={() => onCancel()}
+ submitButtonText={i18n('Revert')}
+ labledButtons={true}>
+ <ListEditorView
+ title={i18n('Select a Commit')}
+ isReadOnlyMode={false}>
+ {revisions.map(revision => {
+ return (
+ <div
+ key={revision.id}
+ data-test-id="revision-list-item"
+ className={`revision-list-item ${
+ this.state.revertId === revision.id
+ ? 'selected'
+ : ''
+ }`}>
+ <ListEditorItemView
+ isReadOnlyMode={false}
+ onSelect={() =>
+ this.setState({
+ revertId: revision.id
+ })
+ }>
+ <ListEditorItemViewField>
+ <div className="revision-list-item-fields">
+ <div
+ data-test-id="revision-user"
+ className="revision-user">
+ <SVGIcon
+ name="user"
+ label={
+ users.find(
+ userObject =>
+ userObject.userId ===
+ revision.user
+ ).fullName
+ }
+ labelPosition="right"
+ />
+ </div>
+ <div
+ className="revision-date"
+ data-test-id="revision-date">
+ <span className="revision-date">
+ {i18n.dateNormal(
+ revision.time,
+ {
+ year: 'numeric',
+ month:
+ 'numeric',
+ day: 'numeric'
+ }
+ )}
+ </span>
+ <span className="revision-time">
+ {i18n.dateNormal(
+ revision.time,
+ {
+ hour: 'numeric',
+ minute:
+ 'numeric',
+ hour12: true
+ }
+ )}
+ </span>
+ </div>
+ <div
+ className="revision-message"
+ data-test-id="revision-message">
+ {revision.message && (
+ <ShowMore
+ anchorClass="more-less"
+ lines={2}
+ more={i18n('More')}
+ less={i18n('Less')}>
+ {revision.message}
+ </ShowMore>
+ )}
+ </div>
+ </div>
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ </div>
+ );
+ })}
+ </ListEditorView>
+ </Form>
+ </div>
+ );
+ }
}
export default RevisionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
index b484f5e0a0..9faa6ffd68 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/ArchivedSoftwareProductReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED:
- return [...action.response.results];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED:
+ return [...action.response.results];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
index 396f65f5d7..f91c8f31e3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/FinalizedSoftwareProductReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED:
- return [...action.response.results];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED:
+ return [...action.response.results];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
index e3ea7e1907..db3cc04f76 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProduct.js
@@ -13,359 +13,668 @@
* 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 ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
import TabulatedEditor from 'src/nfvo-components/editor/TabulatedEditor.jsx';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from './SoftwareProductConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
+import {
+ onboardingMethod as onboardingMethodTypes,
+ onboardingOriginTypes
+} from './SoftwareProductConstants.js';
import SoftwareProductActionHelper from './SoftwareProductActionHelper.js';
import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js';
import PermissionsActionHelper from './../permissions/PermissionsActionHelper.js';
import RevisionsActionHelper from './../revisions/RevisionsActionHelper.js';
import HeatSetupActionHelper from './attachments/setup/HeatSetupActionHelper.js';
import { actionsEnum as versionControllerActions } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
-import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
function getActiveNavigationId(screen, componentId) {
- let activeItemId = componentId ? screen + '|' + componentId : screen;
- return activeItemId;
+ let activeItemId = componentId ? screen + '|' + componentId : screen;
+ return activeItemId;
}
-const buildComponentNavigationBarGroups = ({componentId, meta}) => {
- const groups = ([
- {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL + '|' + componentId,
- name: i18n('General'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE + '|' + componentId,
- name: i18n('Compute'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING + '|' + componentId,
- name: i18n('High Availability & Load Balancing'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK + '|' + componentId,
- name: i18n('Networks'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE + '|' + componentId,
- name: i18n('Storage'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES + '|' + componentId,
- name: i18n('Images'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES + '|' + componentId,
- name: i18n('Process Details'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING + '|' + componentId,
- name: i18n('Monitoring'),
- disabled: false,
- meta
- }
- ]);
+const buildComponentNavigationBarGroups = ({ componentId, meta }) => {
+ const groups = [
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL +
+ '|' +
+ componentId,
+ name: i18n('General'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE +
+ '|' +
+ componentId,
+ name: i18n('Compute'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING +
+ '|' +
+ componentId,
+ name: i18n('High Availability & Load Balancing'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK +
+ '|' +
+ componentId,
+ name: i18n('Networks'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE +
+ '|' +
+ componentId,
+ name: i18n('Storage'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES +
+ '|' +
+ componentId,
+ name: i18n('Images'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES +
+ '|' +
+ componentId,
+ name: i18n('Process Details'),
+ disabled: false,
+ meta
+ },
+ {
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING +
+ '|' +
+ componentId,
+ name: i18n('Monitoring'),
+ disabled: false,
+ meta
+ }
+ ];
- return groups;
+ return groups;
};
-const buildNavigationBarProps = ({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}) => {
- const {softwareProductEditor: {data: currentSoftwareProduct = {}}} = softwareProduct;
- const {id, name, onboardingMethod, candidateOnboardingOrigin, onboardingOrigin} = currentSoftwareProduct;
- const groups = [{
- id: id,
- name: name,
- items: [
- {
- id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
- name: i18n('Overview'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
- name: i18n('General'),
- disabled: false,
- meta
- },
- {
- id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT,
- name: i18n('Deployment Flavors'),
- disabled: false,
- hidden: onboardingMethod !== onboardingMethodTypes.MANUAL,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES,
- name: i18n('Process Details'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS,
- name: i18n('Networks'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
- name: i18n('Attachments'),
- disabled: false,
- hidden: !candidateOnboardingOrigin && !onboardingOrigin,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG,
- name: i18n('Activity Log'),
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
- name: i18n('Component Dependencies'),
- hidden: componentsList.length <= 1,
- disabled: false,
- meta
- }, {
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
- name: i18n('Components'),
- hidden: componentsList.length <= 0,
- meta,
- expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
- items: [
- ...componentsList.map(({id, displayName}) => ({
- id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id,
- name: displayName,
- meta,
- expanded: mapOfExpandedIds[enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS + '|' + id] === true && screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
- items: buildComponentNavigationBarGroups({componentId: id, meta})
- }))
- ]
- }
- ]
- }];
- let activeItemId = getActiveNavigationId(screen, componentId);
- return {
- activeItemId, groups, disabled: !!candidateOnboardingOrigin
- };
+const buildNavigationBarProps = ({
+ softwareProduct,
+ meta,
+ screen,
+ componentId,
+ componentsList,
+ mapOfExpandedIds
+}) => {
+ const {
+ softwareProductEditor: { data: currentSoftwareProduct = {} }
+ } = softwareProduct;
+ const {
+ id,
+ name,
+ onboardingMethod,
+ candidateOnboardingOrigin,
+ onboardingOrigin
+ } = currentSoftwareProduct;
+ const groups = [
+ {
+ id: id,
+ name: name,
+ items: [
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ name: i18n('Overview'),
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
+ name: i18n('General'),
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT,
+ name: i18n('Deployment Flavors'),
+ disabled: false,
+ hidden: onboardingMethod !== onboardingMethodTypes.MANUAL,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES,
+ name: i18n('Process Details'),
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS,
+ name: i18n('Networks'),
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS,
+ name: i18n('Attachments'),
+ disabled: false,
+ hidden: !candidateOnboardingOrigin && !onboardingOrigin,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG,
+ name: i18n('Activity Log'),
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES,
+ name: i18n('Component Dependencies'),
+ hidden: componentsList.length <= 1,
+ disabled: false,
+ meta
+ },
+ {
+ id: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS,
+ name: i18n('Components'),
+ hidden: componentsList.length <= 0,
+ meta,
+ expanded:
+ mapOfExpandedIds[
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS
+ ] === true &&
+ screen !== enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ items: [
+ ...componentsList.map(({ id, displayName }) => ({
+ id:
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+ '|' +
+ id,
+ name: displayName,
+ meta,
+ expanded:
+ mapOfExpandedIds[
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS +
+ '|' +
+ id
+ ] === true &&
+ screen !==
+ enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ items: buildComponentNavigationBarGroups({
+ componentId: id,
+ meta
+ })
+ }))
+ ]
+ }
+ ]
+ }
+ ];
+ let activeItemId = getActiveNavigationId(screen, componentId);
+ return {
+ activeItemId,
+ groups,
+ disabled: !!candidateOnboardingOrigin
+ };
};
-const buildVersionControllerProps = ({softwareProduct, versions, currentVersion, permissions, userInfo, isArchived, usersList, itemPermission, isReadOnlyMode}) => {
- const {softwareProductEditor = {data: {}}} = softwareProduct;
- const {isValidityData = true, data: {name, onboardingMethod, candidateOnboardingOrigin}} = softwareProductEditor;
-
- return {
- version: currentVersion,
- viewableVersions: versions,
- isFormDataValid: isValidityData,
- permissions,
- itemName: name,
- itemPermission,
- isReadOnlyMode,
- isArchived,
- userInfo,
- usersList,
- isManual: onboardingMethod === onboardingMethodType.MANUAL,
- candidateInProcess: !!candidateOnboardingOrigin
- };
+const buildVersionControllerProps = ({
+ softwareProduct,
+ versions,
+ currentVersion,
+ permissions,
+ userInfo,
+ isArchived,
+ usersList,
+ itemPermission,
+ isReadOnlyMode
+}) => {
+ const { softwareProductEditor = { data: {} } } = softwareProduct;
+ const {
+ isValidityData = true,
+ data: { name, onboardingMethod, candidateOnboardingOrigin }
+ } = softwareProductEditor;
+
+ return {
+ version: currentVersion,
+ viewableVersions: versions,
+ isFormDataValid: isValidityData,
+ permissions,
+ itemName: name,
+ itemPermission,
+ isReadOnlyMode,
+ isArchived,
+ userInfo,
+ usersList,
+ isManual: onboardingMethod === onboardingMethodType.MANUAL,
+ candidateInProcess: !!candidateOnboardingOrigin
+ };
};
-function buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode}) {
- const {softwareProductEditor, softwareProductComponents, softwareProductQuestionnaire, softwareProductAttachments} = softwareProduct;
- const {data: currentSoftwareProduct = {}} = softwareProductEditor;
- const {version, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct;
- const {qdata} = softwareProductQuestionnaire;
- const {heatSetup, heatSetupCache} = softwareProductAttachments;
- let currentComponentMeta = {};
- if(componentId) {
- const {componentEditor: {data: componentData = {} , qdata: componentQdata}} = softwareProductComponents;
- currentComponentMeta = {componentData, componentQdata};
- }
- const meta = {softwareProduct: currentSoftwareProduct, qdata, version, onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache,
- isReadOnlyMode, currentComponentMeta, softwareProductDependencies};
- return meta;
+function buildMeta({
+ softwareProduct,
+ componentId,
+ softwareProductDependencies,
+ isReadOnlyMode
+}) {
+ const {
+ softwareProductEditor,
+ softwareProductComponents,
+ softwareProductQuestionnaire,
+ softwareProductAttachments
+ } = softwareProduct;
+ const { data: currentSoftwareProduct = {} } = softwareProductEditor;
+ const {
+ version,
+ onboardingOrigin,
+ candidateOnboardingOrigin
+ } = currentSoftwareProduct;
+ const { qdata } = softwareProductQuestionnaire;
+ const { heatSetup, heatSetupCache } = softwareProductAttachments;
+ let currentComponentMeta = {};
+ if (componentId) {
+ const {
+ componentEditor: { data: componentData = {}, qdata: componentQdata }
+ } = softwareProductComponents;
+ currentComponentMeta = { componentData, componentQdata };
+ }
+ const meta = {
+ softwareProduct: currentSoftwareProduct,
+ qdata,
+ version,
+ onboardingOrigin,
+ candidateOnboardingOrigin,
+ heatSetup,
+ heatSetupCache,
+ isReadOnlyMode,
+ currentComponentMeta,
+ softwareProductDependencies
+ };
+ return meta;
}
const mapStateToProps = (
- {
- softwareProduct,
- users: {usersList, userInfo},
- versionsPage: {versionsList: {versions}, permissions}
- },
- {
- currentScreen: {screen, itemPermission, props: {version: currentVersion, componentId, isReadOnlyMode}}
- }
+ {
+ softwareProduct,
+ users: { usersList, userInfo },
+ versionsPage: { versionsList: { versions }, permissions }
+ },
+ {
+ currentScreen: {
+ screen,
+ itemPermission,
+ props: { version: currentVersion, componentId, isReadOnlyMode }
+ }
+ }
) => {
- const {softwareProductEditor, softwareProductComponents, softwareProductDependencies} = softwareProduct;
- const {mapOfExpandedIds = []} = softwareProductEditor;
- const {componentsList = []} = softwareProductComponents;
+ const {
+ softwareProductEditor,
+ softwareProductComponents,
+ softwareProductDependencies
+ } = softwareProduct;
+ const { mapOfExpandedIds = [] } = softwareProductEditor;
+ const { componentsList = [] } = softwareProductComponents;
- const meta = buildMeta({softwareProduct, componentId, softwareProductDependencies, isReadOnlyMode});
- return {
- versionControllerProps: buildVersionControllerProps({
- softwareProduct,
- versions,
- currentVersion,
- userInfo,
- usersList,
- isArchived: itemPermission.isArchived,
- permissions,
- itemPermission: {...itemPermission, isDirty: true},
- isReadOnlyMode
- }),
- navigationBarProps: buildNavigationBarProps({softwareProduct, meta, screen, componentId, componentsList, mapOfExpandedIds}),
- meta
- };
+ const meta = buildMeta({
+ softwareProduct,
+ componentId,
+ softwareProductDependencies,
+ isReadOnlyMode
+ });
+ return {
+ versionControllerProps: buildVersionControllerProps({
+ softwareProduct,
+ versions,
+ currentVersion,
+ userInfo,
+ usersList,
+ isArchived: itemPermission.isArchived,
+ permissions,
+ itemPermission: { ...itemPermission, isDirty: true },
+ isReadOnlyMode
+ }),
+ navigationBarProps: buildNavigationBarProps({
+ softwareProduct,
+ meta,
+ screen,
+ componentId,
+ componentsList,
+ mapOfExpandedIds
+ }),
+ meta
+ };
};
-const autoSaveBeforeNavigate = ({dispatch, screen, softwareProductId, version, componentId,
- meta: {isReadOnlyMode, softwareProduct, qdata,
- currentComponentMeta: {componentData, componentQdata}}}) => {
- let promise;
- if (isReadOnlyMode) {
- promise = Promise.resolve();
- } else {
- switch(screen) {
- case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
- promise = SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, version, qdata});
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
- promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
- {softwareProductId, version, vspComponentId: componentId, componentData, qdata: componentQdata});
- break;
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
- promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, {softwareProductId, version, vspComponentId: componentId, qdata: componentQdata});
- break;
- default:
- promise = Promise.resolve();
- break;
- }
- }
- return promise;
+const autoSaveBeforeNavigate = ({
+ dispatch,
+ screen,
+ softwareProductId,
+ version,
+ componentId,
+ meta: {
+ isReadOnlyMode,
+ softwareProduct,
+ qdata,
+ currentComponentMeta: { componentData, componentQdata }
+ }
+}) => {
+ let promise;
+ if (isReadOnlyMode) {
+ promise = Promise.resolve();
+ } else {
+ switch (screen) {
+ case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+ promise = SoftwareProductActionHelper.updateSoftwareProduct(
+ dispatch,
+ { softwareProduct, version, qdata }
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+ promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ componentData,
+ qdata: componentQdata
+ }
+ );
+ break;
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+ promise = SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(
+ dispatch,
+ {
+ softwareProductId,
+ version,
+ vspComponentId: componentId,
+ qdata: componentQdata
+ }
+ );
+ break;
+ default:
+ promise = Promise.resolve();
+ break;
+ }
+ }
+ return promise;
};
+const mapActionsToProps = (
+ dispatch,
+ {
+ currentScreen: {
+ screen,
+ props: {
+ softwareProductId,
+ licenseModelId,
+ version,
+ componentId: currentComponentId
+ }
+ }
+ }
+) => {
+ const props = {
+ onVersionSwitching: (versionToSwitch, meta) => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId: meta.softwareProduct.id,
+ version: versionToSwitch
+ }
+ });
+ },
+ onOpenPermissions: ({ users }) => {
+ return PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId: softwareProductId,
+ allUsers: users
+ });
+ },
+ onOpenRevisionsModal: () => {
+ return RevisionsActionHelper.openRevisionsView(dispatch, {
+ itemId: softwareProductId,
+ version: version,
+ itemType: screenTypes.SOFTWARE_PRODUCT
+ });
+ },
+ onOpenCommentCommitModal: ({ onCommit, title }) =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.COMMIT_COMMENT,
+ modalComponentProps: {
+ onCommit,
+ type: CommitModalType.COMMIT
+ },
+ title
+ }
+ }),
+ onMoreVersionsClick: ({ itemName, users }) => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ softwareProduct: {
+ name: itemName,
+ vendorId: licenseModelId
+ },
+ usersList: users
+ }
+ });
+ },
+ onToggle: (groups, itemIdToExpand) =>
+ groups.map(({ items }) =>
+ SoftwareProductActionHelper.toggleNavigationItems(dispatch, {
+ items,
+ itemIdToExpand
+ })
+ ),
+ onNavigate: ({ id, meta, newVersion }) => {
+ let navigationVersion = newVersion || version;
+ let {
+ onboardingOrigin,
+ candidateOnboardingOrigin,
+ heatSetup,
+ heatSetupCache
+ } = meta;
+ let heatSetupPopupPromise =
+ screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+ ? HeatSetupActionHelper.heatSetupLeaveConfirmation(
+ dispatch,
+ { softwareProductId, heatSetup, heatSetupCache }
+ )
+ : Promise.resolve();
+ let preNavigate = meta
+ ? autoSaveBeforeNavigate({
+ dispatch,
+ screen,
+ meta,
+ version,
+ softwareProductId,
+ componentId: currentComponentId
+ })
+ : Promise.resolve();
+ version = version || (meta ? meta.version : undefined);
+ Promise.all([preNavigate, heatSetupPopupPromise])
+ .then(() => {
+ let [nextScreen, nextComponentId] = id.split('|');
+ if (
+ nextScreen ===
+ enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS &&
+ nextComponentId &&
+ nextComponentId === currentComponentId
+ ) {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: nextScreen,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ version: navigationVersion
+ }
+ });
+ } else {
+ if (
+ nextScreen ===
+ enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS
+ ) {
+ if (
+ onboardingOrigin ===
+ onboardingOriginTypes.ZIP ||
+ candidateOnboardingOrigin ===
+ onboardingOriginTypes.ZIP
+ ) {
+ nextScreen =
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
+ } else if (
+ onboardingOrigin === onboardingOriginTypes.CSAR
+ ) {
+ nextScreen =
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
+ }
+ }
+ ScreensHelper.loadScreen(dispatch, {
+ screen: nextScreen,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ version: navigationVersion,
+ componentId: nextComponentId
+ }
+ });
+ }
+ })
+ .catch(e => {
+ console.error(e);
+ });
+ }
+ };
-const mapActionsToProps = (dispatch, {currentScreen: {screen, props: {softwareProductId, licenseModelId, version, componentId: currentComponentId}}}) => {
-
- const props = {
- onVersionSwitching: (versionToSwitch, meta) => {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId: meta.softwareProduct.id, version: versionToSwitch}});
- },
- onOpenPermissions: ({users}) => {
- return PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users});
- },
- onOpenRevisionsModal: () => {
- return RevisionsActionHelper.openRevisionsView(dispatch, {itemId: softwareProductId, version: version, itemType: screenTypes.SOFTWARE_PRODUCT});
- },
- onOpenCommentCommitModal: ({onCommit, title}) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.COMMIT_COMMENT,
- modalComponentProps: {
- onCommit,
- type: CommitModalType.COMMIT
- },
- title
- }
- }),
- onMoreVersionsClick: ({itemName, users}) => {
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, softwareProduct: {name: itemName, vendorId: licenseModelId}, usersList: users}});
-
- },
- onToggle: (groups, itemIdToExpand) => groups.map(({items}) => SoftwareProductActionHelper.toggleNavigationItems(dispatch, {items, itemIdToExpand})),
- onNavigate: ({id, meta, newVersion}) => {
- let navigationVersion = newVersion || version;
- let {onboardingOrigin, candidateOnboardingOrigin, heatSetup, heatSetupCache} = meta;
- let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ?
- HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
- Promise.resolve();
- let preNavigate = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
- version = version || (meta ? meta.version : undefined);
- Promise.all([preNavigate, heatSetupPopupPromise]).then(() => {
- let [nextScreen, nextComponentId] = id.split('|');
- if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS && nextComponentId && nextComponentId === currentComponentId) {
- ScreensHelper.loadScreen(dispatch, {
- screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version: navigationVersion}
- });
- }
- else {
- if(nextScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) {
- if(onboardingOrigin === onboardingOriginTypes.ZIP || candidateOnboardingOrigin === onboardingOriginTypes.ZIP) {
- nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP;
- }
- else if(onboardingOrigin === onboardingOriginTypes.CSAR) {
- nextScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION;
- }
- }
- ScreensHelper.loadScreen(dispatch, {
- screen: nextScreen, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version: navigationVersion, componentId: nextComponentId}
- });
- }
- }).catch((e) => {console.error(e);});
- }
- };
-
- switch (screen) {
- case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
- case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
- case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
- case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
- case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
- props.onSave = () => Promise.resolve();
- break;
- default:
- props.onSave = ({softwareProduct, qdata}) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version});
- break;
- }
-
+ switch (screen) {
+ case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+ case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+ case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+ props.onSave = () => Promise.resolve();
+ break;
+ default:
+ props.onSave = ({ softwareProduct, qdata }) =>
+ SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+ softwareProduct,
+ qdata,
+ version
+ });
+ break;
+ }
- props.onVersionControllerAction = (action, version, comment, meta) => {
- let {heatSetup, heatSetupCache} = meta;
- let autoSavePromise = meta ? autoSaveBeforeNavigate({dispatch, screen, meta, version, softwareProductId, componentId: currentComponentId}) : Promise.resolve();
- let heatSetupPopupPromise = screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS && action === versionControllerActions.COMMIT ?
- HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) :
- Promise.resolve();
- Promise.all([autoSavePromise, heatSetupPopupPromise]).then(() => {
- return SoftwareProductActionHelper.performVCAction(dispatch, {softwareProductId, action, version, comment, meta}).then(updatedVersion => {
- const inMerge = updatedVersion && updatedVersion.state && updatedVersion.state.synchronizationState === SyncStates.MERGE;
- if((action === versionControllerActions.SYNC && !inMerge) ||
- ((action === versionControllerActions.COMMIT || action === versionControllerActions.SYNC) && updatedVersion.status === catalogItemStatuses.CERTIFIED)) {
- ScreensHelper.loadLandingScreen(dispatch, {previousScreenName: screen, props: {softwareProductId, version: updatedVersion}});
- } else {
- ScreensHelper.loadScreen(dispatch, {screen, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version: updatedVersion, componentId: currentComponentId}});
- }
- });
- }).catch((e) => {console.error(e);});
- };
+ props.onVersionControllerAction = (action, version, comment, meta) => {
+ let { heatSetup, heatSetupCache } = meta;
+ let autoSavePromise = meta
+ ? autoSaveBeforeNavigate({
+ dispatch,
+ screen,
+ meta,
+ version,
+ softwareProductId,
+ componentId: currentComponentId
+ })
+ : Promise.resolve();
+ let heatSetupPopupPromise =
+ screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS &&
+ action === versionControllerActions.COMMIT
+ ? HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {
+ softwareProductId,
+ heatSetup,
+ heatSetupCache
+ })
+ : Promise.resolve();
+ Promise.all([autoSavePromise, heatSetupPopupPromise])
+ .then(() => {
+ return SoftwareProductActionHelper.performVCAction(dispatch, {
+ softwareProductId,
+ action,
+ version,
+ comment,
+ meta
+ }).then(updatedVersion => {
+ const inMerge =
+ updatedVersion &&
+ updatedVersion.state &&
+ updatedVersion.state.synchronizationState ===
+ SyncStates.MERGE;
+ if (
+ (action === versionControllerActions.SYNC &&
+ !inMerge) ||
+ ((action === versionControllerActions.COMMIT ||
+ action === versionControllerActions.SYNC) &&
+ updatedVersion.status ===
+ catalogItemStatuses.CERTIFIED)
+ ) {
+ ScreensHelper.loadLandingScreen(dispatch, {
+ previousScreenName: screen,
+ props: {
+ softwareProductId,
+ version: updatedVersion
+ }
+ });
+ } else {
+ ScreensHelper.loadScreen(dispatch, {
+ screen,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ version: updatedVersion,
+ componentId: currentComponentId
+ }
+ });
+ }
+ });
+ })
+ .catch(e => {
+ console.error(e);
+ });
+ };
- props.onManagePermissions = () => PermissionsActionHelper.openPermissonsManager(dispatch, {itemId: softwareProductId, askForRights: false});
- return props;
+ props.onManagePermissions = () =>
+ PermissionsActionHelper.openPermissonsManager(dispatch, {
+ itemId: softwareProductId,
+ askForRights: false
+ });
+ return props;
};
export default connect(mapStateToProps, mapActionsToProps)(TabulatedEditor);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 42786bf752..4a2d7a2ece 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -21,553 +21,769 @@ import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseMod
import LicenseAgreementActionHelper from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js';
import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
-import {actionTypes, onboardingOriginTypes, PRODUCT_QUESTIONNAIRE, forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+ actionTypes,
+ onboardingOriginTypes,
+ PRODUCT_QUESTIONNAIRE,
+ forms
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
import SoftwareProductComponentsActionHelper from './components/SoftwareProductComponentsActionHelper.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import {actionTypes as HeatSetupActions} from 'sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
-import {actionTypes as featureGroupsActionConstants} from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js';
-import {actionTypes as licenseAgreementActionTypes} from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
-import {actionTypes as componentActionTypes} from './components/SoftwareProductComponentsConstants.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import { actionTypes as HeatSetupActions } from 'sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js';
+import { actionTypes as featureGroupsActionConstants } from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsConstants.js';
+import { actionTypes as licenseAgreementActionTypes } from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
+import { actionTypes as componentActionTypes } from './components/SoftwareProductComponentsConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {default as ItemsHelper} from 'sdc-app/common/helpers/ItemsHelper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {CommitModalType} from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
-import {actionTypes as commonActionTypes} from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
+import { CommitModalType } from 'nfvo-components/panel/versionController/components/CommitCommentModal.jsx';
+import { actionTypes as commonActionTypes } from 'sdc-app/common/reducers/PlainDataReducerConstants.js';
import versionPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
import getValue from 'nfvo-utils/getValue.js';
function getLicensingData(licensingData = {}) {
- const {licenseAgreement, featureGroups} = licensingData;
- const newlicenseAgreement = getValue(licenseAgreement);
- const newfeatureGroups = getValue(featureGroups);
- return newlicenseAgreement ? {
- licenseAgreement: newlicenseAgreement,
- featureGroups: newfeatureGroups
- } : undefined;
-};
+ const { licenseAgreement, featureGroups } = licensingData;
+ const newlicenseAgreement = getValue(licenseAgreement);
+ const newfeatureGroups = getValue(featureGroups);
+ return newlicenseAgreement
+ ? {
+ licenseAgreement: newlicenseAgreement,
+ featureGroups: newfeatureGroups
+ }
+ : undefined;
+}
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/`;
}
function softwareProductCategoriesUrl() {
- const restCatalogPrefix = Configuration.get('restCatalogPrefix');
- return `${restCatalogPrefix}/v1/categories/resources/`;
+ const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+ return `${restCatalogPrefix}/v1/categories/resources/`;
}
function uploadFile(vspId, formData, version) {
- return RestAPIUtil.post(`${baseUrl()}${vspId}/versions/${version.id}/orchestration-template-candidate`, formData);
-
+ return RestAPIUtil.post(
+ `${baseUrl()}${vspId}/versions/${
+ version.id
+ }/orchestration-template-candidate`,
+ formData
+ );
}
-function putSoftwareProduct({softwareProduct, version}) {
- return RestAPIUtil.put(`${baseUrl()}${softwareProduct.id}/versions/${version.id}`, {
- name: softwareProduct.name,
- description: softwareProduct.description,
- category: softwareProduct.category,
- subCategory: softwareProduct.subCategory,
- vendorId: softwareProduct.vendorId,
- vendorName: softwareProduct.vendorName,
- licensingVersion: softwareProduct.licensingVersion ? softwareProduct.licensingVersion : undefined,
- icon: softwareProduct.icon,
- licensingData: getLicensingData(softwareProduct.licensingData)
- });
+function putSoftwareProduct({ softwareProduct, version }) {
+ return RestAPIUtil.put(
+ `${baseUrl()}${softwareProduct.id}/versions/${version.id}`,
+ {
+ name: softwareProduct.name,
+ description: softwareProduct.description,
+ category: softwareProduct.category,
+ subCategory: softwareProduct.subCategory,
+ vendorId: softwareProduct.vendorId,
+ vendorName: softwareProduct.vendorName,
+ licensingVersion: softwareProduct.licensingVersion
+ ? softwareProduct.licensingVersion
+ : undefined,
+ icon: softwareProduct.icon,
+ licensingData: getLicensingData(softwareProduct.licensingData)
+ }
+ );
}
function putSoftwareProductQuestionnaire(vspId, qdata, version) {
- return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/questionnaire`, qdata);
+ return RestAPIUtil.put(
+ `${baseUrl()}${vspId}/versions/${version.id}/questionnaire`,
+ qdata
+ );
}
function putSoftwareProductAction(id, action, version) {
- return RestAPIUtil.put(`${baseUrl()}${id}/versions/${version.id}/actions`, {action: action});
+ return RestAPIUtil.put(`${baseUrl()}${id}/versions/${version.id}/actions`, {
+ action: action
+ });
}
function fetchSoftwareProductList() {
- return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?versionFilter=${catalogItemStatuses.DRAFT}`
+ );
}
function fetchArchivedSoftwareProductList() {
- return RestAPIUtil.fetch(`${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?Status=${catalogItemStatuses.ARCHIVED}`
+ );
}
function fetchFinalizedSoftwareProductList() {
- return RestAPIUtil.fetch(`${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?versionFilter=${catalogItemStatuses.CERTIFIED}`
+ );
}
function fetchSoftwareProduct(vspId, version) {
- return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}`);
+ return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}`);
}
function fetchSoftwareProductQuestionnaire(vspId, version) {
- return RestAPIUtil.fetch(`${baseUrl()}${vspId}/versions/${version.id}/questionnaire`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}${vspId}/versions/${version.id}/questionnaire`
+ );
}
-function updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version) {
- return RestAPIUtil.put(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/manifest`, heatCandidate);
+function updateSoftwareProductHeatCandidate(
+ softwareProductId,
+ heatCandidate,
+ version
+) {
+ return RestAPIUtil.put(
+ `${baseUrl()}${softwareProductId}/versions/${
+ version.id
+ }/orchestration-template-candidate/manifest`,
+ heatCandidate
+ );
}
function validateHeatCandidate(softwareProductId, version) {
- return RestAPIUtil.put(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/process`);
+ return RestAPIUtil.put(
+ `${baseUrl()}${softwareProductId}/versions/${
+ version.id
+ }/orchestration-template-candidate/process`
+ );
}
-function fetchOrchestrationTemplateCandidate(softwareProductId, version, ) {
- return RestAPIUtil.fetch(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate`, {dataType: 'binary'});
+function fetchOrchestrationTemplateCandidate(softwareProductId, version) {
+ return RestAPIUtil.fetch(
+ `${baseUrl()}${softwareProductId}/versions/${
+ version.id
+ }/orchestration-template-candidate`,
+ { dataType: 'binary' }
+ );
}
function abortValidationProcess(softwareProductId, version) {
- return RestAPIUtil.destroy(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate`);
+ return RestAPIUtil.destroy(
+ `${baseUrl()}${softwareProductId}/versions/${
+ version.id
+ }/orchestration-template-candidate`
+ );
}
function objToString(obj) {
- let str = '';
- if (obj instanceof Array) {
- obj.forEach((item) => {
- str += objToString(item) + '\n';
- });
- }
- else {
- for (let p in obj) {
- if (obj.hasOwnProperty(p)) {
- str += obj[p] + '\n';
- }
- }
- }
- return str.replace(/\n$/, '');
+ let str = '';
+ if (obj instanceof Array) {
+ obj.forEach(item => {
+ str += objToString(item) + '\n';
+ });
+ } else {
+ for (let p in obj) {
+ if (obj.hasOwnProperty(p)) {
+ str += obj[p] + '\n';
+ }
+ }
+ }
+ return str.replace(/\n$/, '');
}
function parseUploadErrorMsg(error) {
- let message = '';
- for (let key in error) {
- if (error.hasOwnProperty(key)) {
- message += objToString(error[key]) + '\n';
- }
- }
- return message.replace(/\n$/, '');
+ let message = '';
+ for (let key in error) {
+ if (error.hasOwnProperty(key)) {
+ message += objToString(error[key]) + '\n';
+ }
+ }
+ return message.replace(/\n$/, '');
}
function fetchSoftwareProductCategories(dispatch) {
- let handleResponse = response => dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED,
- softwareProductCategories: response
- });
- return RestAPIUtil.fetch(softwareProductCategoriesUrl())
- .then(handleResponse)
- .catch(() => handleResponse(null));
+ let handleResponse = response =>
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED,
+ softwareProductCategories: response
+ });
+ return RestAPIUtil.fetch(softwareProductCategoriesUrl())
+ .then(handleResponse)
+ .catch(() => handleResponse(null));
}
-function loadLicensingData(dispatch, {licenseModelId, licensingVersion}) {
- return ItemsHelper.fetchVersion({itemId: licenseModelId, versionId: licensingVersion}).then(() => {
- return Promise.all([
- LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId, version: {id: licensingVersion}}),
- FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version: {id: licensingVersion}})
- ]);
- });
+function loadLicensingData(dispatch, { licenseModelId, licensingVersion }) {
+ return ItemsHelper.fetchVersion({
+ itemId: licenseModelId,
+ versionId: licensingVersion
+ }).then(() => {
+ return Promise.all([
+ LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {
+ licenseModelId,
+ version: { id: licensingVersion }
+ }),
+ FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
+ licenseModelId,
+ version: { id: licensingVersion }
+ })
+ ]);
+ });
}
function getExpandedItemsId(items, itemIdToToggle) {
- for (let i = 0; i < items.length; i++) {
- if (items[i].id === itemIdToToggle) {
- if (items[i].expanded) {
- return {};
- }
- else {
- return {[itemIdToToggle]: true};
- }
- }
- else if (items[i].items && items[i].items.length > 0) {
- let mapOfExpandedIds = getExpandedItemsId(items[i].items, itemIdToToggle);
- if (mapOfExpandedIds !== false) {
- mapOfExpandedIds[items[i].id] = true;
- return mapOfExpandedIds;
- }
- }
- }
- return false;
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].id === itemIdToToggle) {
+ if (items[i].expanded) {
+ return {};
+ } else {
+ return { [itemIdToToggle]: true };
+ }
+ } else if (items[i].items && items[i].items.length > 0) {
+ let mapOfExpandedIds = getExpandedItemsId(
+ items[i].items,
+ itemIdToToggle
+ );
+ if (mapOfExpandedIds !== false) {
+ mapOfExpandedIds[items[i].id] = true;
+ return mapOfExpandedIds;
+ }
+ }
+ }
+ return false;
}
function migrateSoftwareProduct(vspId, version) {
- return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`);
+ return RestAPIUtil.put(`${baseUrl()}${vspId}/versions/${version.id}/heal`);
}
-
-
const SoftwareProductActionHelper = {
-
- fetchFinalizedSoftwareProductList(dispatch) {
- return fetchFinalizedSoftwareProductList().then(response => dispatch({
- type: actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED,
- response
- }));
- },
-
- fetchArchivedSoftwareProductList(dispatch) {
- return fetchArchivedSoftwareProductList().then(response => dispatch({
- type: actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED,
- response
- }));
- },
-
- loadSoftwareProductAssociatedData(dispatch) {
- fetchSoftwareProductCategories(dispatch);
- LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
- },
-
- loadSoftwareProductDetailsData(dispatch, {licenseModelId, licensingVersion}) {
- SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
- if (licensingVersion) {
- return loadLicensingData(dispatch, {licenseModelId, licensingVersion});
- }
- return Promise.resolve();
- },
-
- fetchSoftwareProductList(dispatch) {
- return fetchSoftwareProductList().then(response => dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_LIST_LOADED,
- response
- }));
- },
-
- loadSoftwareProductHeatCandidate(dispatch, {softwareProductId, version}){
- return RestAPIUtil.fetch(`${baseUrl()}${softwareProductId}/versions/${version.id}/orchestration-template-candidate/manifest`).then(response => dispatch({
- type: HeatSetupActions.MANIFEST_LOADED,
- response
- }));
- },
-
- loadLicensingVersionsList(dispatch, {licenseModelId}){
- return ItemsHelper.fetchVersions({itemId: licenseModelId}).then(response => {
- dispatch({
- type: actionTypes.LOAD_LICENSING_VERSIONS_LIST,
- licensingVersionsList: response.results
- });
- });
- },
- updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}){
- return updateSoftwareProductHeatCandidate(softwareProductId, heatCandidate, version);
- },
-
- processAndValidateHeatCandidate(dispatch, {softwareProductId, version}){
- return validateHeatCandidate(softwareProductId, version).then(response => {
- if (response.status === 'Success') {
- SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(dispatch, {softwareProductId, version});
- SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version});
- } else {
- SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {softwareProductId, version});
- }
- });
- },
-
- uploadFile(dispatch, {softwareProductId, formData, failedNotificationTitle, version}) {
- dispatch({
- type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
- payload: {}
- });
-
- Promise.resolve()
- .then(() => uploadFile(softwareProductId, formData, version))
- .then(response => {
- if (response.status === 'Success') {
- dispatch({
- type: commonActionTypes.DATA_CHANGED,
- deltaData: {onboardingOrigin: response.onboardingOrigin},
- formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
- });
- switch(response.onboardingOrigin){
- case onboardingOriginTypes.ZIP:
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- });
- dispatch({
- type: actionTypes.CANDIDATE_IN_PROCESS,
- inProcess: true
- });
- break;
- case onboardingOriginTypes.CSAR:
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- });
- break;
- }
- }
- else {
- throw new Error(parseUploadErrorMsg(response.errors));
- }
- })
- .catch(error => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: failedNotificationTitle,
- msg: error.message || (error.responseJSON && error.responseJSON.message)
- }
- });
- });
- },
-
- downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}){
- let p = isReadOnlyMode ? Promise.resolve() : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {
- softwareProductId,
- heatCandidate,
- version});
- p.then(() => {
- fetchOrchestrationTemplateCandidate(softwareProductId, version)
- .then((response) => {
- showFileSaveDialog({
- blob: response.blob,
- headers: response.headers,
- defaultFilename: 'HEAT_file.zip',
- addTimestamp: true
- });
- });
- }, null/* do not download if data was not saved correctly*/);
- },
-
- hideUploadConfirm (dispatch) {
- dispatch({
- type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION
- });
- },
- updateSoftwareProduct(dispatch, {softwareProduct, version, qdata}) {
- return Promise.all([
- SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {softwareProduct, version}).then(
- () => dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT,
- payload: {softwareProduct}
- })
- ),
- SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(dispatch, {
- softwareProductId: softwareProduct.id,
- qdata,
- version
- })
- ]);
- },
-
- updateSoftwareProductData(dispatch, {softwareProduct, version}) {
- return putSoftwareProduct({softwareProduct, version});
- },
-
- updateSoftwareProductQuestionnaire(dispatch, {softwareProductId, qdata, version}) {
- return putSoftwareProductQuestionnaire(softwareProductId, qdata, version);
- },
-
- softwareProductEditorDataChanged(dispatch, {deltaData}) {
- dispatch({
- type: actionTypes.softwareProductEditor.DATA_CHANGED,
- deltaData
- });
- },
-
- softwareProductQuestionnaireUpdate(dispatch, {data}) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE,
- payload: {qdata: data}
- });
- },
-
- softwareProductEditorVendorChanged(dispatch, {deltaData, formName}) {
- if (deltaData.licensingVersion){
- return loadLicensingData(dispatch, {licenseModelId: deltaData.vendorId, licensingVersion: deltaData.licensingVersion}).then(() => {
- ValidationHelper.dataChanged(dispatch, {deltaData, formName});
- return Promise.resolve();
- });
- } else if (deltaData.vendorId) {
- ValidationHelper.dataChanged(dispatch, {deltaData, formName});
- return SoftwareProductActionHelper.loadLicensingVersionsList(dispatch, {
- licenseModelId: deltaData.vendorId
- }).then( () =>
- OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch)
- );
- } else {
- ValidationHelper.dataChanged(dispatch, {deltaData, formName});
-
- dispatch({
- type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
- response: {results: []}
- });
-
- dispatch({
- type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
- response: {results: []}
- });
- }
-
- },
-
- setIsValidityData(dispatch, {isValidityData}) {
- dispatch({
- type: actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED,
- isValidityData
- });
- },
-
- fetchSoftwareProduct(dispatch, {softwareProductId, version}) {
- return Promise.all([
- fetchSoftwareProduct(softwareProductId, version).then(response => {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_LOADED,
- response
- });
- return response;
- }),
- fetchSoftwareProductQuestionnaire(softwareProductId, version).then(response => {
- ValidationHelper.qDataLoaded(dispatch, {response: {qdata: response.data ? JSON.parse(response.data) : {},
- qschema: JSON.parse(response.schema)}, qName: PRODUCT_QUESTIONNAIRE});
- })
- ]);
- },
-
- manageSubmitAction(dispatch, {softwareProductId, version, isDirty}) {
- if (isDirty) {
- const onCommit = comment => {
- return this.performVCAction(dispatch, {softwareProductId, action: VersionControllerActionsEnum.COMMIT, version, comment}).then(() => {
- return this.performSubmitAction(dispatch, {softwareProductId, version});
- });
- };
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.COMMIT_COMMENT,
- modalComponentProps: {
- onCommit,
- type: CommitModalType.COMMIT_SUBMIT
- },
- title: i18n('Commit & Submit')
- }
- });
- return Promise.resolve(version);
- }
- return this.performSubmitAction(dispatch, {softwareProductId, version});
- },
-
- performSubmitAction(dispatch, {softwareProductId, version}) {
- return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.SUBMIT, version).then(() => {
- return putSoftwareProductAction(softwareProductId, VersionControllerActionsEnum.CREATE_PACKAGE, version).then(() => {
- return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id}).then(updatedVersion => {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
- data: {
- title: i18n('Submit Succeeded'),
- msg: i18n('This software product successfully submitted'),
- cancelButtonText: i18n('OK'),
- timeout: 2000
- }
- });
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
- return Promise.resolve(updatedVersion);
- });
- });
- }, error =>
- {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- modalComponentName: modalContentMapper.SUMBIT_ERROR_RESPONSE,
- title: i18n('Submit Failed'),
- modalComponentProps: {
- validationResponse: error.responseJSON
- },
- cancelButtonText: i18n('OK')
- }
- });
- return Promise.reject(error.responseJSON);
- });
- },
-
- performVCAction(dispatch, {softwareProductId, action, version, comment}) {
- return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({inMerge, isDirty, updatedVersion}) => {
- if ((updatedVersion.status === catalogItemStatuses.CERTIFIED || updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED) &&
- (action === VersionControllerActionsEnum.COMMIT || action === VersionControllerActionsEnum.SYNC)) {
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.SOFTWARE_PRODUCT, itemId: softwareProductId});
- const msg = updatedVersion.archivedStatus === catalogItemStatuses.ARCHIVED ? i18n('Item was Archived') : i18n('Item version already Certified');
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Commit error'),
- msg,
- cancelButtonText: i18n('Cancel')
- }
- });
- return Promise.resolve(updatedVersion);
- }
- if (!inMerge) {
- if (action === VersionControllerActionsEnum.SUBMIT) {
- return this.manageSubmitAction(dispatch, {softwareProductId, version, isDirty});
- }
- else {
- let isCallActionValid = action !== VersionControllerActionsEnum.COMMIT || isDirty;
- if(isCallActionValid) {
- return ItemsHelper.performVCAction({itemId: softwareProductId, action, version, comment}).then(() => {
- versionPageActionHelper.fetchVersions(dispatch, {itemType: itemTypes.LICENSE_MODEL, itemId: softwareProductId});
- if (action === VersionControllerActionsEnum.SYNC) {
- return MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId: softwareProductId, version}).then(({updatedVersion}) => {
- return Promise.resolve(updatedVersion);
- });
- } else {
- return ItemsHelper.checkItemStatus(dispatch, {itemId: softwareProductId, versionId: version.id});
- }
- });
- }
- else {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Commit Failed'),
- msg: i18n('There is nothing to commit')
- }
- });
- }
- }
- }
- });
- },
-
- toggleNavigationItems(dispatch, {items, itemIdToExpand}) {
- let mapOfExpandedIds = getExpandedItemsId(items, itemIdToExpand);
- dispatch({
- type: actionTypes.TOGGLE_NAVIGATION_ITEM,
- mapOfExpandedIds
- });
- },
-
- /** for the next verision */
- addComponent(dispatch, {softwareProductId, modalClassName, version}) {
- SoftwareProductComponentsActionHelper.clearComponentCreationData(dispatch);
- dispatch({
- type: componentActionTypes.COMPONENT_CREATE_OPEN
- });
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.COMPONENT_CREATION,
- modalComponentProps: {softwareProductId, version},
- modalClassName,
- title: 'Create Virtual Function Component'
- }
- });
- },
-
- migrateSoftwareProduct(dispatch, {softwareProduct}) {
- let {id: softwareProductId, version} = softwareProduct;
- const newVer = version.id;
- migrateSoftwareProduct(softwareProductId, version).then(() => ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version: {id: newVer, label: newVer}}
- }));
- },
-
- abortCandidateValidation(dispatch, {softwareProductId, version}) {
- return abortValidationProcess(softwareProductId, version);
- }
-
+ fetchFinalizedSoftwareProductList(dispatch) {
+ return fetchFinalizedSoftwareProductList().then(response =>
+ dispatch({
+ type: actionTypes.FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED,
+ response
+ })
+ );
+ },
+
+ fetchArchivedSoftwareProductList(dispatch) {
+ return fetchArchivedSoftwareProductList().then(response =>
+ dispatch({
+ type: actionTypes.ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED,
+ response
+ })
+ );
+ },
+
+ loadSoftwareProductAssociatedData(dispatch) {
+ fetchSoftwareProductCategories(dispatch);
+ LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
+ },
+
+ loadSoftwareProductDetailsData(
+ dispatch,
+ { licenseModelId, licensingVersion }
+ ) {
+ SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
+ if (licensingVersion) {
+ return loadLicensingData(dispatch, {
+ licenseModelId,
+ licensingVersion
+ });
+ }
+ return Promise.resolve();
+ },
+
+ fetchSoftwareProductList(dispatch) {
+ return fetchSoftwareProductList().then(response =>
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_LIST_LOADED,
+ response
+ })
+ );
+ },
+
+ loadSoftwareProductHeatCandidate(dispatch, { softwareProductId, version }) {
+ return RestAPIUtil.fetch(
+ `${baseUrl()}${softwareProductId}/versions/${
+ version.id
+ }/orchestration-template-candidate/manifest`
+ ).then(response =>
+ dispatch({
+ type: HeatSetupActions.MANIFEST_LOADED,
+ response
+ })
+ );
+ },
+
+ loadLicensingVersionsList(dispatch, { licenseModelId }) {
+ return ItemsHelper.fetchVersions({ itemId: licenseModelId }).then(
+ response => {
+ dispatch({
+ type: actionTypes.LOAD_LICENSING_VERSIONS_LIST,
+ licensingVersionsList: response.results
+ });
+ }
+ );
+ },
+ updateSoftwareProductHeatCandidate(
+ dispatch,
+ { softwareProductId, heatCandidate, version }
+ ) {
+ return updateSoftwareProductHeatCandidate(
+ softwareProductId,
+ heatCandidate,
+ version
+ );
+ },
+
+ processAndValidateHeatCandidate(dispatch, { softwareProductId, version }) {
+ return validateHeatCandidate(softwareProductId, version).then(
+ response => {
+ if (response.status === 'Success') {
+ SoftwareProductComponentsActionHelper.fetchSoftwareProductComponents(
+ dispatch,
+ { softwareProductId, version }
+ );
+ SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+ softwareProductId,
+ version
+ });
+ } else {
+ SoftwareProductActionHelper.fetchSoftwareProduct(dispatch, {
+ softwareProductId,
+ version
+ });
+ }
+ }
+ );
+ },
+
+ uploadFile(
+ dispatch,
+ { softwareProductId, formData, failedNotificationTitle, version }
+ ) {
+ dispatch({
+ type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
+ payload: {}
+ });
+
+ Promise.resolve()
+ .then(() => uploadFile(softwareProductId, formData, version))
+ .then(response => {
+ if (response.status === 'Success') {
+ dispatch({
+ type: commonActionTypes.DATA_CHANGED,
+ deltaData: {
+ onboardingOrigin: response.onboardingOrigin
+ },
+ formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ });
+ switch (response.onboardingOrigin) {
+ case onboardingOriginTypes.ZIP:
+ ScreensHelper.loadScreen(dispatch, {
+ screen:
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ });
+ dispatch({
+ type: actionTypes.CANDIDATE_IN_PROCESS,
+ inProcess: true
+ });
+ break;
+ case onboardingOriginTypes.CSAR:
+ ScreensHelper.loadScreen(dispatch, {
+ screen:
+ enums.SCREEN
+ .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ });
+ break;
+ }
+ } else {
+ throw new Error(parseUploadErrorMsg(response.errors));
+ }
+ })
+ .catch(error => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: failedNotificationTitle,
+ msg:
+ error.message ||
+ (error.responseJSON && error.responseJSON.message)
+ }
+ });
+ });
+ },
+
+ downloadHeatFile(
+ dispatch,
+ { softwareProductId, heatCandidate, isReadOnlyMode, version }
+ ) {
+ let p = isReadOnlyMode
+ ? Promise.resolve()
+ : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+ dispatch,
+ {
+ softwareProductId,
+ heatCandidate,
+ version
+ }
+ );
+ p.then(() => {
+ fetchOrchestrationTemplateCandidate(
+ softwareProductId,
+ version
+ ).then(response => {
+ showFileSaveDialog({
+ blob: response.blob,
+ headers: response.headers,
+ defaultFilename: 'HEAT_file.zip',
+ addTimestamp: true
+ });
+ });
+ }, null /* do not download if data was not saved correctly*/);
+ },
+
+ hideUploadConfirm(dispatch) {
+ dispatch({
+ type: actionTypes.softwareProductEditor.UPLOAD_CONFIRMATION
+ });
+ },
+ updateSoftwareProduct(dispatch, { softwareProduct, version, qdata }) {
+ return Promise.all([
+ SoftwareProductActionHelper.updateSoftwareProductData(dispatch, {
+ softwareProduct,
+ version
+ }).then(() =>
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_LIST_EDIT,
+ payload: { softwareProduct }
+ })
+ ),
+ SoftwareProductActionHelper.updateSoftwareProductQuestionnaire(
+ dispatch,
+ {
+ softwareProductId: softwareProduct.id,
+ qdata,
+ version
+ }
+ )
+ ]);
+ },
+
+ updateSoftwareProductData(dispatch, { softwareProduct, version }) {
+ return putSoftwareProduct({ softwareProduct, version });
+ },
+
+ updateSoftwareProductQuestionnaire(
+ dispatch,
+ { softwareProductId, qdata, version }
+ ) {
+ return putSoftwareProductQuestionnaire(
+ softwareProductId,
+ qdata,
+ version
+ );
+ },
+
+ softwareProductEditorDataChanged(dispatch, { deltaData }) {
+ dispatch({
+ type: actionTypes.softwareProductEditor.DATA_CHANGED,
+ deltaData
+ });
+ },
+
+ softwareProductQuestionnaireUpdate(dispatch, { data }) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE,
+ payload: { qdata: data }
+ });
+ },
+
+ softwareProductEditorVendorChanged(dispatch, { deltaData, formName }) {
+ if (deltaData.licensingVersion) {
+ return loadLicensingData(dispatch, {
+ licenseModelId: deltaData.vendorId,
+ licensingVersion: deltaData.licensingVersion
+ }).then(() => {
+ ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+ return Promise.resolve();
+ });
+ } else if (deltaData.vendorId) {
+ ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+ return SoftwareProductActionHelper.loadLicensingVersionsList(
+ dispatch,
+ {
+ licenseModelId: deltaData.vendorId
+ }
+ ).then(() =>
+ OnboardingActionHelper.forceBreadCrumbsUpdate(dispatch)
+ );
+ } else {
+ ValidationHelper.dataChanged(dispatch, { deltaData, formName });
+
+ dispatch({
+ type: licenseAgreementActionTypes.LICENSE_AGREEMENT_LIST_LOADED,
+ response: { results: [] }
+ });
+
+ dispatch({
+ type: featureGroupsActionConstants.FEATURE_GROUPS_LIST_LOADED,
+ response: { results: [] }
+ });
+ }
+ },
+
+ setIsValidityData(dispatch, { isValidityData }) {
+ dispatch({
+ type: actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED,
+ isValidityData
+ });
+ },
+
+ fetchSoftwareProduct(dispatch, { softwareProductId, version }) {
+ return Promise.all([
+ fetchSoftwareProduct(softwareProductId, version).then(response => {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_LOADED,
+ response
+ });
+ return response;
+ }),
+ fetchSoftwareProductQuestionnaire(softwareProductId, version).then(
+ response => {
+ ValidationHelper.qDataLoaded(dispatch, {
+ response: {
+ qdata: response.data
+ ? JSON.parse(response.data)
+ : {},
+ qschema: JSON.parse(response.schema)
+ },
+ qName: PRODUCT_QUESTIONNAIRE
+ });
+ }
+ )
+ ]);
+ },
+
+ manageSubmitAction(dispatch, { softwareProductId, version, isDirty }) {
+ if (isDirty) {
+ const onCommit = comment => {
+ return this.performVCAction(dispatch, {
+ softwareProductId,
+ action: VersionControllerActionsEnum.COMMIT,
+ version,
+ comment
+ }).then(() => {
+ return this.performSubmitAction(dispatch, {
+ softwareProductId,
+ version
+ });
+ });
+ };
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.COMMIT_COMMENT,
+ modalComponentProps: {
+ onCommit,
+ type: CommitModalType.COMMIT_SUBMIT
+ },
+ title: i18n('Commit & Submit')
+ }
+ });
+ return Promise.resolve(version);
+ }
+ return this.performSubmitAction(dispatch, {
+ softwareProductId,
+ version
+ });
+ },
+
+ performSubmitAction(dispatch, { softwareProductId, version }) {
+ return putSoftwareProductAction(
+ softwareProductId,
+ VersionControllerActionsEnum.SUBMIT,
+ version
+ ).then(
+ () => {
+ return putSoftwareProductAction(
+ softwareProductId,
+ VersionControllerActionsEnum.CREATE_PACKAGE,
+ version
+ ).then(() => {
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: softwareProductId,
+ versionId: version.id
+ }).then(updatedVersion => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SUCCESS,
+ data: {
+ title: i18n('Submit Succeeded'),
+ msg: i18n(
+ 'This software product successfully submitted'
+ ),
+ cancelButtonText: i18n('OK'),
+ timeout: 2000
+ }
+ });
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.SOFTWARE_PRODUCT,
+ itemId: softwareProductId
+ });
+ return Promise.resolve(updatedVersion);
+ });
+ });
+ },
+ error => {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ modalComponentName:
+ modalContentMapper.SUMBIT_ERROR_RESPONSE,
+ title: i18n('Submit Failed'),
+ modalComponentProps: {
+ validationResponse: error.responseJSON
+ },
+ cancelButtonText: i18n('OK')
+ }
+ });
+ return Promise.reject(error.responseJSON);
+ }
+ );
+ },
+
+ performVCAction(dispatch, { softwareProductId, action, version, comment }) {
+ return MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+ itemId: softwareProductId,
+ version
+ }).then(({ inMerge, isDirty, updatedVersion }) => {
+ if (
+ (updatedVersion.status === catalogItemStatuses.CERTIFIED ||
+ updatedVersion.archivedStatus ===
+ catalogItemStatuses.ARCHIVED) &&
+ (action === VersionControllerActionsEnum.COMMIT ||
+ action === VersionControllerActionsEnum.SYNC)
+ ) {
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.SOFTWARE_PRODUCT,
+ itemId: softwareProductId
+ });
+ const msg =
+ updatedVersion.archivedStatus ===
+ catalogItemStatuses.ARCHIVED
+ ? i18n('Item was Archived')
+ : i18n('Item version already Certified');
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Commit error'),
+ msg,
+ cancelButtonText: i18n('Cancel')
+ }
+ });
+ return Promise.resolve(updatedVersion);
+ }
+ if (!inMerge) {
+ if (action === VersionControllerActionsEnum.SUBMIT) {
+ return this.manageSubmitAction(dispatch, {
+ softwareProductId,
+ version,
+ isDirty
+ });
+ } else {
+ let isCallActionValid =
+ action !== VersionControllerActionsEnum.COMMIT ||
+ isDirty;
+ if (isCallActionValid) {
+ return ItemsHelper.performVCAction({
+ itemId: softwareProductId,
+ action,
+ version,
+ comment
+ }).then(() => {
+ versionPageActionHelper.fetchVersions(dispatch, {
+ itemType: itemTypes.LICENSE_MODEL,
+ itemId: softwareProductId
+ });
+ if (action === VersionControllerActionsEnum.SYNC) {
+ return MergeEditorActionHelper.analyzeSyncResult(
+ dispatch,
+ { itemId: softwareProductId, version }
+ ).then(({ updatedVersion }) => {
+ return Promise.resolve(updatedVersion);
+ });
+ } else {
+ return ItemsHelper.checkItemStatus(dispatch, {
+ itemId: softwareProductId,
+ versionId: version.id
+ });
+ }
+ });
+ } else {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Commit Failed'),
+ msg: i18n('There is nothing to commit')
+ }
+ });
+ }
+ }
+ }
+ });
+ },
+
+ toggleNavigationItems(dispatch, { items, itemIdToExpand }) {
+ let mapOfExpandedIds = getExpandedItemsId(items, itemIdToExpand);
+ dispatch({
+ type: actionTypes.TOGGLE_NAVIGATION_ITEM,
+ mapOfExpandedIds
+ });
+ },
+
+ /** for the next verision */
+ addComponent(dispatch, { softwareProductId, modalClassName, version }) {
+ SoftwareProductComponentsActionHelper.clearComponentCreationData(
+ dispatch
+ );
+ dispatch({
+ type: componentActionTypes.COMPONENT_CREATE_OPEN
+ });
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.COMPONENT_CREATION,
+ modalComponentProps: { softwareProductId, version },
+ modalClassName,
+ title: 'Create Virtual Function Component'
+ }
+ });
+ },
+
+ migrateSoftwareProduct(dispatch, { softwareProduct }) {
+ let { id: softwareProductId, version } = softwareProduct;
+ const newVer = version.id;
+ migrateSoftwareProduct(softwareProductId, version).then(() =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: {
+ softwareProductId,
+ version: { id: newVer, label: newVer }
+ }
+ })
+ );
+ },
+
+ abortCandidateValidation(dispatch, { softwareProductId, version }) {
+ return abortValidationProcess(softwareProductId, version);
+ }
};
export default SoftwareProductActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
index 9b147415f9..d1ba947f81 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js
@@ -14,17 +14,21 @@
* permissions and limitations under the License.
*/
export default {
-
- getCurrentCategoryOfSubCategory(selectedSubCategory, softwareProductCategories) {
- let category, subCategory;
- for (var i = 0; i < softwareProductCategories.length; i++) {
- let {subcategories = []} = softwareProductCategories[i];
- subCategory = subcategories.find(sub => sub.uniqueId === selectedSubCategory);
- if (subCategory) {
- category = softwareProductCategories[i].uniqueId;
- break;
- }
- }
- return category;
- }
+ getCurrentCategoryOfSubCategory(
+ selectedSubCategory,
+ softwareProductCategories
+ ) {
+ let category, subCategory;
+ for (var i = 0; i < softwareProductCategories.length; i++) {
+ let { subcategories = [] } = softwareProductCategories[i];
+ subCategory = subcategories.find(
+ sub => sub.uniqueId === selectedSubCategory
+ );
+ if (subCategory) {
+ category = softwareProductCategories[i].uniqueId;
+ break;
+ }
+ }
+ return category;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
index d33eb822cf..711bbf8db8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
@@ -16,41 +16,38 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- SOFTWARE_PRODUCT_LOADED: null,
- SOFTWARE_PRODUCT_LIST_LOADED: null,
- ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED: null,
- FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED: null,
- SOFTWARE_PRODUCT_LIST_EDIT: null,
- SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
- SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
- LOAD_LICENSING_VERSIONS_LIST: null,
- TOGGLE_NAVIGATION_ITEM: null,
- CANDIDATE_IN_PROCESS: null,
-
- softwareProductEditor: {
- OPEN: null,
- CLOSE: null,
- DATA_CHANGED: null,
- IS_VALIDITY_DATA_CHANGED: null
- }
+ SOFTWARE_PRODUCT_LOADED: null,
+ SOFTWARE_PRODUCT_LIST_LOADED: null,
+ ARCHIVED_SOFTWARE_PRODUCT_LIST_LOADED: null,
+ FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED: null,
+ SOFTWARE_PRODUCT_LIST_EDIT: null,
+ SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
+ SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
+ LOAD_LICENSING_VERSIONS_LIST: null,
+ TOGGLE_NAVIGATION_ITEM: null,
+ CANDIDATE_IN_PROCESS: null,
+
+ softwareProductEditor: {
+ OPEN: null,
+ CLOSE: null,
+ DATA_CHANGED: null,
+ IS_VALIDITY_DATA_CHANGED: null
+ }
});
-
-
export const onboardingMethod = {
- MANUAL: 'Manual',
- NETWORK_PACKAGE: 'NetworkPackage'
+ MANUAL: 'Manual',
+ NETWORK_PACKAGE: 'NetworkPackage'
};
export const onboardingOriginTypes = {
- NONE: 'none',
- ZIP: 'zip',
- CSAR: 'csar'
+ NONE: 'none',
+ ZIP: 'zip',
+ CSAR: 'csar'
};
export const forms = keyMirror({
- VENDOR_SOFTWARE_PRODUCT_DETAILS: 'vendor-software-product-details',
+ VENDOR_SOFTWARE_PRODUCT_DETAILS: 'vendor-software-product-details'
});
export const PRODUCT_QUESTIONNAIRE = 'product';
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
index 31be338ff5..f52153a29f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductListReducer.js
@@ -13,16 +13,22 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductConstants.js';
+import { actionTypes } from './SoftwareProductConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.SOFTWARE_PRODUCT_LIST_LOADED:
- return [...action.response.results];
- case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT:
- const indexForEdit = state.findIndex(vsp => vsp.id === action.payload.softwareProduct.id);
- return [...state.slice(0, indexForEdit), action.payload.softwareProduct, ...state.slice(indexForEdit + 1)];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.SOFTWARE_PRODUCT_LIST_LOADED:
+ return [...action.response.results];
+ case actionTypes.SOFTWARE_PRODUCT_LIST_EDIT:
+ const indexForEdit = state.findIndex(
+ vsp => vsp.id === action.payload.softwareProduct.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.payload.softwareProduct,
+ ...state.slice(indexForEdit + 1)
+ ];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
index d7a6c2ef5c..f3de517a1c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
@@ -13,12 +13,15 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {combineReducers} from 'redux';
-import {actionTypes, PRODUCT_QUESTIONNAIRE} from './SoftwareProductConstants.js';
+import { combineReducers } from 'redux';
+import {
+ actionTypes,
+ PRODUCT_QUESTIONNAIRE
+} from './SoftwareProductConstants.js';
import SoftwareProductAttachmentsReducer from './attachments/SoftwareProductAttachmentsReducer.js';
import HeatValidationReducer from './attachments/validation/HeatValidationReducer.js';
import HeatSetupReducer from './attachments/setup/HeatSetupReducer.js';
-import {actionTypes as heatSetupActionTypes} from './attachments/setup/HeatSetupConstants.js';
+import { actionTypes as heatSetupActionTypes } from './attachments/setup/HeatSetupConstants.js';
import SoftwareProductCreationReducer from './creation/SoftwareProductCreationReducer.js';
import SoftwareProductDetailsReducer from './details/SoftwareProductDetailsReducer.js';
import SoftwareProductProcessesListReducer from './processes/SoftwareProductProcessesListReducer.js';
@@ -28,10 +31,10 @@ import SoftwareProductDeploymentEditorReducer from './deployment/editor/Software
import SoftwareProductNetworksListReducer from './networks/SoftwareProductNetworksListReducer.js';
import SoftwareProductComponentsListReducer from './components/SoftwareProductComponentsListReducer.js';
import SoftwareProductComponentEditorReducer from './components/SoftwareProductComponentEditorReducer.js';
-import {actionTypes as processesActionTypes} from './processes/SoftwareProductProcessesConstants.js';
-import SoftwareProductComponentProcessesListReducer from './components/processes/SoftwareProductComponentProcessesListReducer.js';
+import { actionTypes as processesActionTypes } from './processes/SoftwareProductProcessesConstants.js';
+import SoftwareProductComponentProcessesListReducer from './components/processes/SoftwareProductComponentProcessesListReducer.js';
import SoftwareProductComponentProcessesEditorReducer from './components/processes/SoftwareProductComponentProcessesEditorReducer.js';
-import {actionTypes as componentProcessesActionTypes} from './components/processes/SoftwareProductComponentProcessesConstants.js';
+import { actionTypes as componentProcessesActionTypes } from './components/processes/SoftwareProductComponentProcessesConstants.js';
import SoftwareProductComponentsNICListReducer from './components/network/SoftwareProductComponentsNICListReducer.js';
import SoftwareProductComponentsNICEditorReducer from './components/network/SoftwareProductComponentsNICEditorReducer.js';
import SoftwareProductComponentsImageListReducer from './components/images/SoftwareProductComponentsImageListReducer.js';
@@ -40,63 +43,112 @@ import SoftwareProductComponentsNICCreationReducer from './components/network/NI
import SoftwareProductComponentsMonitoringReducer from './components/monitoring/SoftwareProductComponentsMonitoringReducer.js';
import SoftwareProductComponentsComputeFlavorListReducer from './components/compute/computeComponents/computeFlavor/ComputeFlavorListReducer.js';
import SoftwareProductComponentsComputeFlavorReducer from './components/compute/computeComponents/computeFlavor/ComputeFlavorReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
import SoftwareProductDependenciesReducer from './dependencies/SoftwareProductDependenciesReducer.js';
-import {createJSONSchemaReducer, createComposedJSONSchemaReducer} from 'sdc-app/common/reducers/JSONSchemaReducer.js';
-import {COMPONENTS_QUESTIONNAIRE, COMPONENTS_COMPUTE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
-import {NIC_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
-import {IMAGE_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js';
+import {
+ createJSONSchemaReducer,
+ createComposedJSONSchemaReducer
+} from 'sdc-app/common/reducers/JSONSchemaReducer.js';
+import {
+ COMPONENTS_QUESTIONNAIRE,
+ COMPONENTS_COMPUTE_QUESTIONNAIRE
+} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js';
+import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
+import { IMAGE_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js';
export default combineReducers({
- softwareProductAttachments: combineReducers({
- attachmentsDetails: SoftwareProductAttachmentsReducer,
- heatValidation: HeatValidationReducer,
- heatSetup: HeatSetupReducer,
- heatSetupCache: (state = {}, action) => action.type === heatSetupActionTypes.FILL_HEAT_SETUP_CACHE ? action.payload : state
- }),
- softwareProductCreation: createPlainDataReducer(SoftwareProductCreationReducer),
- softwareProductEditor: createPlainDataReducer(SoftwareProductDetailsReducer),
- softwareProductProcesses: combineReducers({
- processesList: SoftwareProductProcessesListReducer,
- processesEditor: createPlainDataReducer(SoftwareProductProcessesEditorReducer),
- processToDelete: (state = false, action) => action.type === processesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM ? action.processToDelete : state
- }),
- softwareProductDeployment: combineReducers({
- deploymentFlavors: SoftwareProductDeploymentListReducer,
- deploymentFlavorEditor: createPlainDataReducer(SoftwareProductDeploymentEditorReducer)
- }),
- softwareProductNetworks: combineReducers({
- networksList: SoftwareProductNetworksListReducer
- }),
- softwareProductDependencies: SoftwareProductDependenciesReducer,
- softwareProductComponents: combineReducers({
- componentsList: SoftwareProductComponentsListReducer,
- componentEditor: createPlainDataReducer(createComposedJSONSchemaReducer(COMPONENTS_QUESTIONNAIRE, SoftwareProductComponentEditorReducer)),
- componentProcesses: combineReducers({
- processesList: SoftwareProductComponentProcessesListReducer,
- processesEditor: createPlainDataReducer(SoftwareProductComponentProcessesEditorReducer),
- processToDelete: (state = false, action) => action.type === componentProcessesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM ? action.processToDelete : state,
- }),
- network: combineReducers({
- nicList: SoftwareProductComponentsNICListReducer,
- nicEditor: createPlainDataReducer(createComposedJSONSchemaReducer(NIC_QUESTIONNAIRE, SoftwareProductComponentsNICEditorReducer)),
- nicCreation: createPlainDataReducer(SoftwareProductComponentsNICCreationReducer)
- }),
- images: combineReducers({
- imagesList: SoftwareProductComponentsImageListReducer,
- imageEditor: createPlainDataReducer(createComposedJSONSchemaReducer(IMAGE_QUESTIONNAIRE, SoftwareProductComponentsImageEditorReducer))
- }),
- computeFlavor: combineReducers({
- computesList: SoftwareProductComponentsComputeFlavorListReducer,
- computeEditor: createPlainDataReducer(createComposedJSONSchemaReducer(COMPONENTS_COMPUTE_QUESTIONNAIRE, SoftwareProductComponentsComputeFlavorReducer)),
- }),
- monitoring: SoftwareProductComponentsMonitoringReducer
- }),
- softwareProductCategories: (state = [], action) => {
- if (action.type === actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED) {
- return action.softwareProductCategories;
- }
- return state;
- },
- softwareProductQuestionnaire: createJSONSchemaReducer(PRODUCT_QUESTIONNAIRE)
+ softwareProductAttachments: combineReducers({
+ attachmentsDetails: SoftwareProductAttachmentsReducer,
+ heatValidation: HeatValidationReducer,
+ heatSetup: HeatSetupReducer,
+ heatSetupCache: (state = {}, action) =>
+ action.type === heatSetupActionTypes.FILL_HEAT_SETUP_CACHE
+ ? action.payload
+ : state
+ }),
+ softwareProductCreation: createPlainDataReducer(
+ SoftwareProductCreationReducer
+ ),
+ softwareProductEditor: createPlainDataReducer(
+ SoftwareProductDetailsReducer
+ ),
+ softwareProductProcesses: combineReducers({
+ processesList: SoftwareProductProcessesListReducer,
+ processesEditor: createPlainDataReducer(
+ SoftwareProductProcessesEditorReducer
+ ),
+ processToDelete: (state = false, action) =>
+ action.type ===
+ processesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM
+ ? action.processToDelete
+ : state
+ }),
+ softwareProductDeployment: combineReducers({
+ deploymentFlavors: SoftwareProductDeploymentListReducer,
+ deploymentFlavorEditor: createPlainDataReducer(
+ SoftwareProductDeploymentEditorReducer
+ )
+ }),
+ softwareProductNetworks: combineReducers({
+ networksList: SoftwareProductNetworksListReducer
+ }),
+ softwareProductDependencies: SoftwareProductDependenciesReducer,
+ softwareProductComponents: combineReducers({
+ componentsList: SoftwareProductComponentsListReducer,
+ componentEditor: createPlainDataReducer(
+ createComposedJSONSchemaReducer(
+ COMPONENTS_QUESTIONNAIRE,
+ SoftwareProductComponentEditorReducer
+ )
+ ),
+ componentProcesses: combineReducers({
+ processesList: SoftwareProductComponentProcessesListReducer,
+ processesEditor: createPlainDataReducer(
+ SoftwareProductComponentProcessesEditorReducer
+ ),
+ processToDelete: (state = false, action) =>
+ action.type ===
+ componentProcessesActionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM
+ ? action.processToDelete
+ : state
+ }),
+ network: combineReducers({
+ nicList: SoftwareProductComponentsNICListReducer,
+ nicEditor: createPlainDataReducer(
+ createComposedJSONSchemaReducer(
+ NIC_QUESTIONNAIRE,
+ SoftwareProductComponentsNICEditorReducer
+ )
+ ),
+ nicCreation: createPlainDataReducer(
+ SoftwareProductComponentsNICCreationReducer
+ )
+ }),
+ images: combineReducers({
+ imagesList: SoftwareProductComponentsImageListReducer,
+ imageEditor: createPlainDataReducer(
+ createComposedJSONSchemaReducer(
+ IMAGE_QUESTIONNAIRE,
+ SoftwareProductComponentsImageEditorReducer
+ )
+ )
+ }),
+ computeFlavor: combineReducers({
+ computesList: SoftwareProductComponentsComputeFlavorListReducer,
+ computeEditor: createPlainDataReducer(
+ createComposedJSONSchemaReducer(
+ COMPONENTS_COMPUTE_QUESTIONNAIRE,
+ SoftwareProductComponentsComputeFlavorReducer
+ )
+ )
+ }),
+ monitoring: SoftwareProductComponentsMonitoringReducer
+ }),
+ softwareProductCategories: (state = [], action) => {
+ if (action.type === actionTypes.SOFTWARE_PRODUCT_CATEGORIES_LOADED) {
+ return action.softwareProductCategories;
+ }
+ return state;
+ },
+ softwareProductQuestionnaire: createJSONSchemaReducer(PRODUCT_QUESTIONNAIRE)
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
index d942172973..4d5887be6f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachments.js
@@ -13,100 +13,142 @@
* 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
import HeatSetupActionHelper from './setup/HeatSetupActionHelper.js';
import SoftwareProductAttachmentsView from './SoftwareProductAttachmentsView.jsx';
-import {errorLevels} from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js';
+import { errorLevels } from 'sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js';
import HeatSetup from './setup/HeatSetup.js';
-import {doesHeatDataExist} from './SoftwareProductAttachmentsUtils.js';
+import { doesHeatDataExist } from './SoftwareProductAttachmentsUtils.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import SoftwareProductAttachmentsActionHelper from './SoftwareProductAttachmentsActionHelper.js';
-export const mapStateToProps = (state) => {
- let {
- softwareProduct: {
- softwareProductEditor:{data: currentSoftwareProduct = {}},
- softwareProductAttachments: {attachmentsDetails: {activeTab}, heatSetup, heatSetupCache, heatValidation : {errorList}}
- }
- } = state;
+export const mapStateToProps = state => {
+ let {
+ softwareProduct: {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductAttachments: {
+ attachmentsDetails: { activeTab },
+ heatSetup,
+ heatSetupCache,
+ heatValidation: { errorList }
+ }
+ }
+ } = state;
- let {unassigned = [], modules = []} = heatSetup;
- let goToOverview = true;
- if (errorList) {
- for (let i = 0 ; i < errorList.length ; i++) {
- if (errorList[i].level === errorLevels.ERROR) {
- goToOverview = false;
- }
- }
- }
- let heatDataExist = doesHeatDataExist(heatSetup);
+ let { unassigned = [], modules = [] } = heatSetup;
+ let goToOverview = true;
+ if (errorList) {
+ for (let i = 0; i < errorList.length; i++) {
+ if (errorList[i].level === errorLevels.ERROR) {
+ goToOverview = false;
+ }
+ }
+ }
+ let heatDataExist = doesHeatDataExist(heatSetup);
- let {version, onboardingOrigin} = currentSoftwareProduct;
- return {
- isValidationAvailable: unassigned.length === 0 && modules.length > 0,
- heatSetup,
- heatSetupCache,
- heatDataExist,
- goToOverview,
- HeatSetupComponent: HeatSetup,
- version,
- onboardingOrigin,
- activeTab,
- candidateInProcess: !!currentSoftwareProduct.candidateOnboardingOrigin
- };
+ let { version, onboardingOrigin } = currentSoftwareProduct;
+ return {
+ isValidationAvailable: unassigned.length === 0 && modules.length > 0,
+ heatSetup,
+ heatSetupCache,
+ heatDataExist,
+ goToOverview,
+ HeatSetupComponent: HeatSetup,
+ version,
+ onboardingOrigin,
+ activeTab,
+ candidateInProcess: !!currentSoftwareProduct.candidateOnboardingOrigin
+ };
};
-export const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDownload: ({heatCandidate, isReadOnlyMode}) => SoftwareProductActionHelper.downloadHeatFile(dispatch, {softwareProductId, heatCandidate, isReadOnlyMode, version}),
- onUpload: (formData) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Upload will erase existing data. Do you want to continue?'),
- confirmationButtonText: i18n('Continue'),
- title: i18n('WARNING'),
+export const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDownload: ({ heatCandidate, isReadOnlyMode }) =>
+ SoftwareProductActionHelper.downloadHeatFile(dispatch, {
+ softwareProductId,
+ heatCandidate,
+ isReadOnlyMode,
+ version
+ }),
+ onUpload: formData =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n(
+ 'Upload will erase existing data. Do you want to continue?'
+ ),
+ confirmationButtonText: i18n('Continue'),
+ title: i18n('WARNING'),
- onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
- softwareProductId,
- formData,
- failedNotificationTitle: i18n('Upload validation failed'),
- version
- })
- }
- }),
- onUploadAbort: () => {
- SoftwareProductActionHelper.abortCandidateValidation(dispatch, {softwareProductId, version})
- .then(()=>{
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- });
- });
- },
- onInvalidFileUpload: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Upload Failed'),
- confirmationButtonText: i18n('Continue'),
- msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
- }
- }),
- onSave: (heatCandidate) => SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate, version}),
- onGoToOverview: () => ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- }),
- onProcessAndValidate: ({heatData, heatDataCache, isReadOnlyMode}) => {
- return HeatSetupActionHelper.processAndValidateHeat(dispatch,
- {softwareProductId, heatData, heatDataCache, isReadOnlyMode, version});
- },
- setActiveTab: ({activeTab}) => SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {activeTab})
-
- };
+ onConfirmed: () =>
+ SoftwareProductActionHelper.uploadFile(dispatch, {
+ softwareProductId,
+ formData,
+ failedNotificationTitle: i18n(
+ 'Upload validation failed'
+ ),
+ version
+ })
+ }
+ }),
+ onUploadAbort: () => {
+ SoftwareProductActionHelper.abortCandidateValidation(dispatch, {
+ softwareProductId,
+ version
+ }).then(() => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ });
+ });
+ },
+ onInvalidFileUpload: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Upload Failed'),
+ confirmationButtonText: i18n('Continue'),
+ msg: i18n(
+ "no zip or csar file was uploaded or expected file doesn't exist"
+ )
+ }
+ }),
+ onSave: heatCandidate =>
+ SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+ dispatch,
+ {
+ softwareProductId,
+ heatCandidate,
+ version
+ }
+ ),
+ onGoToOverview: () =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ }),
+ onProcessAndValidate: ({ heatData, heatDataCache, isReadOnlyMode }) => {
+ return HeatSetupActionHelper.processAndValidateHeat(dispatch, {
+ softwareProductId,
+ heatData,
+ heatDataCache,
+ isReadOnlyMode,
+ version
+ });
+ },
+ setActiveTab: ({ activeTab }) =>
+ SoftwareProductAttachmentsActionHelper.setActiveTab(dispatch, {
+ activeTab
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductAttachmentsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductAttachmentsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
index ae4a615a40..2d35bc27ee 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsActionHelper.js
@@ -14,13 +14,13 @@
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductAttachmentsConstants';
+import { actionTypes } from './SoftwareProductAttachmentsConstants';
export default {
- setActiveTab(dispatch, {activeTab}) {
- dispatch({
- type: actionTypes.SET_ACTIVE_TAB,
- activeTab
- });
- }
+ setActiveTab(dispatch, { activeTab }) {
+ dispatch({
+ type: actionTypes.SET_ACTIVE_TAB,
+ activeTab
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
index 67265909d7..aff0a3dbdf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsConstants.js
@@ -16,10 +16,10 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const tabsMapping = {
- SETUP: 1,
- VALIDATION: 2
+ SETUP: 1,
+ VALIDATION: 2
};
export const actionTypes = keyMirror({
- SET_ACTIVE_TAB: null
+ SET_ACTIVE_TAB: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
index 5f6538ab7e..5d9a37f98a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductAttachmentsConstants.js';
+import { actionTypes } from './SoftwareProductAttachmentsConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.SET_ACTIVE_TAB:
- return {activeTab: action.activeTab};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.SET_ACTIVE_TAB:
+ return { activeTab: action.activeTab };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
index 2e76b11630..f4e77229e9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsUtils.js
@@ -15,11 +15,11 @@
*/
export function doesHeatDataExist(heatData) {
- let result = false;
- for (let key of Object.keys(heatData)) {
- if(heatData[key].length > 0) {
- result = true;
- }
- }
- return result;
+ let result = false;
+ for (let key of Object.keys(heatData)) {
+ if (heatData[key].length > 0) {
+ result = true;
+ }
+ }
+ return result;
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index 2a849f376e..2007493d48 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -13,140 +13,208 @@
* or implied. 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 accept from 'attr-accept';
-import {SVGIcon, Tab, Tabs} from 'sdc-ui/lib/react';
-import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
+import { SVGIcon, Tab, Tabs } from 'sdc-ui/lib/react';
+import { tabsMapping } from './SoftwareProductAttachmentsConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import HeatValidation from './validation/HeatValidation.js';
-import {onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingOriginTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
import Button from 'sdc-ui/lib/react/Button.js';
class HeatScreenView extends Component {
+ static propTypes = {
+ isValidationAvailable: PropTypes.bool,
+ goToOverview: PropTypes.bool,
+ setActiveTab: PropTypes.func
+ };
- static propTypes = {
- isValidationAvailable: PropTypes.bool,
- goToOverview: PropTypes.bool,
- setActiveTab: PropTypes.func
- };
+ componentDidMount() {
+ if (!this.props.goToOverview && this.props.candidateInProcess) {
+ this.props.setActiveTab({ activeTab: tabsMapping.VALIDATION });
+ }
+ }
- componentDidMount() {
- if (!this.props.goToOverview && this.props.candidateInProcess) {
- this.props.setActiveTab({activeTab: tabsMapping.VALIDATION});
- }
- }
+ render() {
+ let {
+ isValidationAvailable,
+ isReadOnlyMode,
+ heatDataExist,
+ onDownload,
+ softwareProductId,
+ onProcessAndValidate,
+ onUploadAbort,
+ candidateInProcess,
+ heatSetup,
+ HeatSetupComponent,
+ onGoToOverview,
+ version,
+ onboardingOrigin,
+ activeTab,
+ setActiveTab,
+ ...other
+ } = this.props;
- render() {
- let {isValidationAvailable, isReadOnlyMode, heatDataExist, onDownload, softwareProductId, onProcessAndValidate, onUploadAbort,
- candidateInProcess, heatSetup, HeatSetupComponent, onGoToOverview, version, onboardingOrigin, activeTab, setActiveTab, ...other} = this.props;
+ return (
+ <div className="vsp-attachments-view">
+ <div className="attachments-view-controllers">
+ {activeTab === tabsMapping.SETUP &&
+ candidateInProcess && (
+ <Button
+ data-test-id="proceed-to-validation-btn"
+ disabled={!isValidationAvailable}
+ className="proceed-to-validation-btn"
+ onClick={() => this.validate()}>
+ {i18n('PROCEED TO VALIDATION')}
+ </Button>
+ )}
+ {candidateInProcess && (
+ <SVGIcon
+ onClick={onUploadAbort}
+ name="close"
+ className="icon-component abort-btn"
+ label={i18n('ABORT')}
+ labelPosition="right"
+ color="secondary"
+ data-test-id="abort-btn"
+ />
+ )}
+ {activeTab === tabsMapping.VALIDATION &&
+ softwareProductId && (
+ <Button
+ btnType="outline"
+ data-test-id="go-to-overview"
+ disabled={this.props.goToOverview !== true}
+ className="go-to-overview-btn"
+ onClick={
+ this.props.goToOverview
+ ? () => onGoToOverview({ version })
+ : undefined
+ }>
+ {i18n('GO TO OVERVIEW')}
+ </Button>
+ )}
+ <div className="separator" />
+ <SVGIcon
+ disabled={heatDataExist ? false : true}
+ name="download"
+ className="icon-component"
+ color="dark-gray"
+ onClick={
+ heatDataExist
+ ? () =>
+ onDownload({
+ heatCandidate: heatSetup,
+ isReadOnlyMode:
+ isReadOnlyMode ||
+ !candidateInProcess,
+ version
+ })
+ : undefined
+ }
+ data-test-id="download-heat"
+ />
+ <SVGIcon
+ name="upload"
+ className="icon-component"
+ color="dark-gray"
+ disabled={isReadOnlyMode || candidateInProcess}
+ onClick={
+ isReadOnlyMode
+ ? undefined
+ : evt =>
+ this.refs.hiddenImportFileInput.click(evt)
+ }
+ data-test-id="upload-heat"
+ />
+ <input
+ ref="hiddenImportFileInput"
+ type="file"
+ name="fileInput"
+ accept=".zip, .csar"
+ onChange={evt => this.handleImport(evt)}
+ />
+ </div>
+ <Tabs
+ className="attachments-tabs"
+ type="header"
+ activeTab={activeTab}
+ onTabClick={key => this.handleTabPress(key)}>
+ <Tab
+ tabId={tabsMapping.SETUP}
+ title="Setup"
+ disabled={
+ onboardingOrigin === onboardingOriginTypes.CSAR
+ }>
+ <HeatSetupComponent
+ heatDataExist={heatDataExist}
+ changeAttachmentsTab={tab =>
+ setActiveTab({ activeTab: tab })
+ }
+ onProcessAndValidate={onProcessAndValidate}
+ softwareProductId={softwareProductId}
+ isReadOnlyMode={isReadOnlyMode}
+ version={version}
+ />
+ </Tab>
+ <Tab
+ tabId={tabsMapping.VALIDATION}
+ title="Validation"
+ disabled={!isValidationAvailable || candidateInProcess}>
+ <HeatValidation {...other} />
+ </Tab>
+ </Tabs>
+ </div>
+ );
+ }
- return (
- <div className='vsp-attachments-view'>
- <div className='attachments-view-controllers'>
- {(activeTab === tabsMapping.SETUP) && candidateInProcess &&
- <Button
- data-test-id='proceed-to-validation-btn'
- disabled={!isValidationAvailable}
- className='proceed-to-validation-btn'
- onClick={()=>this.validate()}>{i18n('PROCEED TO VALIDATION')}</Button>
- }
- {candidateInProcess && <SVGIcon
- onClick={onUploadAbort}
- name='close'
- className='icon-component abort-btn'
- label={i18n('ABORT')}
- labelPosition='right'
- color='secondary'
- data-test-id='abort-btn'/>
- }
- {(activeTab === tabsMapping.VALIDATION && softwareProductId) &&
- <Button btnType='outline'
- data-test-id='go-to-overview'
- disabled={this.props.goToOverview !== true}
- className='go-to-overview-btn'
- onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined}>{i18n('GO TO OVERVIEW')}</Button>}
- <div className='separator'></div>
- <SVGIcon
- disabled={heatDataExist ? false : true}
- name='download'
- className='icon-component'
- color='dark-gray'
- onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode: isReadOnlyMode || !candidateInProcess, version}) : undefined}
- data-test-id='download-heat'/>
- <SVGIcon
- name='upload'
- className='icon-component'
- color='dark-gray'
- disabled={isReadOnlyMode || candidateInProcess}
- onClick={isReadOnlyMode ? undefined : evt => this.refs.hiddenImportFileInput.click(evt)}
- data-test-id='upload-heat'/>
- <input
- ref='hiddenImportFileInput'
- type='file'
- name='fileInput'
- accept='.zip, .csar'
- onChange={evt => this.handleImport(evt)}/>
- </div>
- <Tabs
- className='attachments-tabs'
- type='header'
- activeTab={activeTab}
- onTabClick={key => this.handleTabPress(key)}>
- <Tab tabId={tabsMapping.SETUP} title='Setup' disabled={onboardingOrigin === onboardingOriginTypes.CSAR}>
- <HeatSetupComponent
- heatDataExist={heatDataExist}
- changeAttachmentsTab={tab => setActiveTab({activeTab: tab})}
- onProcessAndValidate={onProcessAndValidate}
- softwareProductId={softwareProductId}
- isReadOnlyMode={isReadOnlyMode}
- version={version}/>
- </Tab>
- <Tab tabId={tabsMapping.VALIDATION} title='Validation' disabled={!isValidationAvailable || candidateInProcess}>
- <HeatValidation {...other}/>
- </Tab>
- </Tabs>
- </div>
- );
- }
-
- handleTabPress(key) {
- let {setActiveTab} = this.props;
- switch (key) {
- case tabsMapping.VALIDATION:
- setActiveTab({activeTab: tabsMapping.VALIDATION});
- return;
- case tabsMapping.SETUP:
- setActiveTab({activeTab: tabsMapping.SETUP});
- return;
- }
- }
-
- handleImport(evt) {
- evt.preventDefault();
- let file = this.refs.hiddenImportFileInput.files[0];
- if(! (file && file.size && accept(file, ['.zip', '.csar'])) ) {
- this.props.onInvalidFileUpload();
- return;
- }
- let {version} = this.props;
- let formData = new FormData();
- formData.append('upload', file);
- this.refs.hiddenImportFileInput.value = '';
- this.props.onUpload(formData, version);
- }
- validate() {
- let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version, setActiveTab} = this.props;
- onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then(
- () => setActiveTab({activeTab: tabsMapping.VALIDATION})
- );
- }
- save() {
- return this.props.onboardingOrigin === onboardingOriginTypes.ZIP ?
- this.props.onSave(this.props.heatSetup, this.props.version) :
- Promise.resolve();
- }
+ handleTabPress(key) {
+ let { setActiveTab } = this.props;
+ switch (key) {
+ case tabsMapping.VALIDATION:
+ setActiveTab({ activeTab: tabsMapping.VALIDATION });
+ return;
+ case tabsMapping.SETUP:
+ setActiveTab({ activeTab: tabsMapping.SETUP });
+ return;
+ }
+ }
+ handleImport(evt) {
+ evt.preventDefault();
+ let file = this.refs.hiddenImportFileInput.files[0];
+ if (!(file && file.size && accept(file, ['.zip', '.csar']))) {
+ this.props.onInvalidFileUpload();
+ return;
+ }
+ let { version } = this.props;
+ let formData = new FormData();
+ formData.append('upload', file);
+ this.refs.hiddenImportFileInput.value = '';
+ this.props.onUpload(formData, version);
+ }
+ validate() {
+ let {
+ heatSetup,
+ heatSetupCache,
+ onProcessAndValidate,
+ isReadOnlyMode,
+ version,
+ setActiveTab
+ } = this.props;
+ onProcessAndValidate({
+ heatData: heatSetup,
+ heatDataCache: heatSetupCache,
+ isReadOnlyMode,
+ version
+ }).then(() => setActiveTab({ activeTab: tabsMapping.VALIDATION }));
+ }
+ save() {
+ return this.props.onboardingOrigin === onboardingOriginTypes.ZIP
+ ? this.props.onSave(this.props.heatSetup, this.props.version)
+ : Promise.resolve();
+ }
}
export default HeatScreenView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
index 4c3adc6a7d..d75d464f9e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
@@ -13,50 +13,65 @@
* 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 HeatSetupView from './HeatSetupView.jsx';
import HeatSetupActionHelper from './HeatSetupActionHelper.js';
-
const BASE = true;
function baseExists(modules) {
- for (let i in modules) {
- if (modules[i].isBase) {
- return true;
- }
- }
- return false;
+ for (let i in modules) {
+ if (modules[i].isBase) {
+ return true;
+ }
+ }
+ return false;
}
-export const mapStateToProps = ({softwareProduct: {softwareProductAttachments: {heatSetup, heatSetupCache}}}) => {
- let {modules = [], unassigned = [], artifacts = [], nested = []} = heatSetup;
- let isBaseExist = baseExists(modules);
+export const mapStateToProps = ({
+ softwareProduct: {
+ softwareProductAttachments: { heatSetup, heatSetupCache }
+ }
+}) => {
+ let {
+ modules = [],
+ unassigned = [],
+ artifacts = [],
+ nested = []
+ } = heatSetup;
+ let isBaseExist = baseExists(modules);
- return {
- heatSetupCache,
- modules,
- unassigned,
- artifacts,
- nested,
- isBaseExist
- };
+ return {
+ heatSetupCache,
+ modules,
+ unassigned,
+ artifacts,
+ nested,
+ isBaseExist
+ };
};
export const mapActionsToProps = (dispatch, {}) => {
- return {
- onModuleRename: (oldName, newName) => HeatSetupActionHelper.renameModule(dispatch, {oldName, newName}),
- onModuleAdd: () => HeatSetupActionHelper.addModule(dispatch, !BASE),
- onBaseAdd: () => HeatSetupActionHelper.addModule(dispatch, BASE),
- onModuleDelete: moduleName => HeatSetupActionHelper.deleteModule(dispatch, moduleName),
- onModuleFileTypeChange: ({module, value, type}) => HeatSetupActionHelper.changeModuleFileType(dispatch, {
- module,
- value,
- type
- }),
- onArtifactListChange: artifacts => HeatSetupActionHelper.changeArtifactList(dispatch, artifacts),
- onAddAllUnassigned: () => HeatSetupActionHelper.addAllUnassignedFilesToArtifacts(dispatch)
- };
+ return {
+ onModuleRename: (oldName, newName) =>
+ HeatSetupActionHelper.renameModule(dispatch, { oldName, newName }),
+ onModuleAdd: () => HeatSetupActionHelper.addModule(dispatch, !BASE),
+ onBaseAdd: () => HeatSetupActionHelper.addModule(dispatch, BASE),
+ onModuleDelete: moduleName =>
+ HeatSetupActionHelper.deleteModule(dispatch, moduleName),
+ onModuleFileTypeChange: ({ module, value, type }) =>
+ HeatSetupActionHelper.changeModuleFileType(dispatch, {
+ module,
+ value,
+ type
+ }),
+ onArtifactListChange: artifacts =>
+ HeatSetupActionHelper.changeArtifactList(dispatch, artifacts),
+ onAddAllUnassigned: () =>
+ HeatSetupActionHelper.addAllUnassignedFilesToArtifacts(dispatch)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(HeatSetupView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(HeatSetupView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
index 87953bb8aa..05ac408fbb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
@@ -13,7 +13,7 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './HeatSetupConstants.js';
+import { actionTypes } from './HeatSetupConstants.js';
import isEqual from 'lodash/isEqual.js';
import cloneDeep from 'lodash/cloneDeep.js';
import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
@@ -21,46 +21,72 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft
// import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
export default {
+ addModule(dispatch, isBase) {
+ dispatch({ type: actionTypes.ADD_MODULE, data: { isBase } });
+ },
- addModule(dispatch, isBase){
- dispatch({type: actionTypes.ADD_MODULE, data: {isBase}});
- },
+ deleteModule(dispatch, moduleName) {
+ dispatch({ type: actionTypes.REMOVE_MODULE, data: { moduleName } });
+ },
- deleteModule(dispatch, moduleName){
- dispatch({type: actionTypes.REMOVE_MODULE, data: {moduleName}});
- },
+ renameModule(dispatch, { oldName, newName }) {
+ dispatch({
+ type: actionTypes.RENAME_MODULE,
+ data: { oldName, newName }
+ });
+ },
- renameModule(dispatch, {oldName, newName}){
- dispatch({type: actionTypes.RENAME_MODULE, data: {oldName, newName}});
- },
+ changeModuleFileType(dispatch, { module, value, type }) {
+ if (!value) {
+ value = { value: '' };
+ }
+ dispatch({
+ type: actionTypes.FILE_ASSIGN_CHANGED,
+ data: { module, value, type }
+ });
+ },
- changeModuleFileType(dispatch, {module, value, type}){
- if (!value) {
- value = {value: ''};
- }
- dispatch({type: actionTypes.FILE_ASSIGN_CHANGED, data: {module, value, type}});
- },
+ changeArtifactList(dispatch, artifacts) {
+ dispatch({
+ type: actionTypes.ARTIFACT_LIST_CHANGE,
+ data: { artifacts: artifacts.map(artifact => artifact.value) }
+ });
+ },
- changeArtifactList(dispatch, artifacts){
- dispatch({type: actionTypes.ARTIFACT_LIST_CHANGE, data: {artifacts: artifacts.map(artifact => artifact.value)}});
- },
+ processAndValidateHeat(
+ dispatch,
+ { softwareProductId, heatData, heatDataCache, isReadOnlyMode, version }
+ ) {
+ return isEqual({ ...heatData, softwareProductId }, heatDataCache) ||
+ isReadOnlyMode
+ ? Promise.resolve()
+ : SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(
+ dispatch,
+ { softwareProductId, heatCandidate: heatData, version }
+ )
+ .then(() =>
+ SoftwareProductActionHelper.processAndValidateHeatCandidate(
+ dispatch,
+ { softwareProductId, version }
+ )
+ )
+ .then(() =>
+ dispatch({
+ type: actionTypes.FILL_HEAT_SETUP_CACHE,
+ payload: { ...cloneDeep(heatData), softwareProductId }
+ })
+ );
+ },
- processAndValidateHeat(dispatch, {softwareProductId, heatData, heatDataCache, isReadOnlyMode, version}){
- return (isEqual({...heatData, softwareProductId}, heatDataCache) || isReadOnlyMode) ? Promise.resolve() :
- SoftwareProductActionHelper.updateSoftwareProductHeatCandidate(dispatch, {softwareProductId, heatCandidate: heatData, version})
- .then(() => SoftwareProductActionHelper.processAndValidateHeatCandidate(dispatch, {softwareProductId, version}))
- .then(() => dispatch({type: actionTypes.FILL_HEAT_SETUP_CACHE, payload: {...cloneDeep(heatData), softwareProductId}}));
- },
+ addAllUnassignedFilesToArtifacts(dispatch) {
+ dispatch({ type: actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS });
+ },
- addAllUnassignedFilesToArtifacts(dispatch){
- dispatch({type: actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS});
- },
+ heatSetupLeaveConfirmation() {
+ return Promise.resolve();
+ }
- heatSetupLeaveConfirmation() {
- return Promise.resolve();
- }
-
- /*heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) {
+ /*heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) {
return new Promise((resolve, reject) => {
if (isEqual({...heatSetup, softwareProductId}, heatSetupCache)) {
resolve();
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
index 2d6bd574a7..ff53fad27f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
@@ -16,27 +16,25 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
+ ARTIFACT_LIST_CHANGE: null,
+ ADD_ALL_UNASSIGNED_TO_ARTIFACTS: null,
+ ADD_ALL_ARTIFACTS_TO_UNASSIGNED: null,
- ARTIFACT_LIST_CHANGE: null,
- ADD_ALL_UNASSIGNED_TO_ARTIFACTS: null,
- ADD_ALL_ARTIFACTS_TO_UNASSIGNED: null,
+ ADD_MODULE: null,
+ REMOVE_MODULE: null,
+ RENAME_MODULE: null,
+ FILL_HEAT_SETUP_CACHE: null,
+ FILE_ASSIGN_CHANGED: null,
- ADD_MODULE: null,
- REMOVE_MODULE: null,
- RENAME_MODULE: null,
- FILL_HEAT_SETUP_CACHE: null,
- FILE_ASSIGN_CHANGED: null,
-
- MANIFEST_LOADED: null,
-
- GO_TO_VALIDATION: null,
- IN_VALIDATION: null
+ MANIFEST_LOADED: null,
+ GO_TO_VALIDATION: null,
+ IN_VALIDATION: null
});
export const fileTypes = {
- YAML: {label: 'yaml', regex: /(yaml|yml)/g},
- ENV: {label: 'env', regex: /env/g},
- VOL: {label: 'vol', regex: /(yaml|yml)/g},
- VOL_ENV: {label: 'volEnv', regex: /env/g}
+ YAML: { label: 'yaml', regex: /(yaml|yml)/g },
+ ENV: { label: 'env', regex: /env/g },
+ VOL: { label: 'vol', regex: /(yaml|yml)/g },
+ VOL_ENV: { label: 'volEnv', regex: /env/g }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
index f49339ce35..8840a11c3e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
@@ -13,112 +13,163 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './HeatSetupConstants.js';
+import { actionTypes } from './HeatSetupConstants.js';
import differenceWith from 'lodash/differenceWith.js';
-
const emptyModule = (isBase, currentLength) => ({
- name: `${isBase ? 'base_' : 'module_'}${currentLength + 1}`,
- isBase: isBase
+ name: `${isBase ? 'base_' : 'module_'}${currentLength + 1}`,
+ isBase: isBase
});
-function syncUnassignedFilesWithArtifactsChanges(unassigned, artifacts, oldArtifacts) {
- if (artifacts.length > oldArtifacts.length) {
- return differenceWith(unassigned, artifacts, (unassignedFile, artifact) => unassignedFile === artifact);
- }
- else {
- const removedArtifact = differenceWith(oldArtifacts, artifacts, (oldArtifact, artifact) => artifact === oldArtifact);
- return [...unassigned, removedArtifact[0]];
- }
+function syncUnassignedFilesWithArtifactsChanges(
+ unassigned,
+ artifacts,
+ oldArtifacts
+) {
+ if (artifacts.length > oldArtifacts.length) {
+ return differenceWith(
+ unassigned,
+ artifacts,
+ (unassignedFile, artifact) => unassignedFile === artifact
+ );
+ } else {
+ const removedArtifact = differenceWith(
+ oldArtifacts,
+ artifacts,
+ (oldArtifact, artifact) => artifact === oldArtifact
+ );
+ return [...unassigned, removedArtifact[0]];
+ }
}
function findModuleIndexByName(modules, name) {
- return modules.findIndex(module => module.name === name);
+ return modules.findIndex(module => module.name === name);
}
-function addDeletedModuleFilesToUnassigned(unassigned, deletedModule){
- let files = [];
- for(let i in deletedModule){
- if (deletedModule.hasOwnProperty(i)) {
- if (typeof deletedModule[i] === 'string' && deletedModule[i] && i !== 'name') {
- files.push(deletedModule[i]);
- }
- }
- }
+function addDeletedModuleFilesToUnassigned(unassigned, deletedModule) {
+ let files = [];
+ for (let i in deletedModule) {
+ if (deletedModule.hasOwnProperty(i)) {
+ if (
+ typeof deletedModule[i] === 'string' &&
+ deletedModule[i] &&
+ i !== 'name'
+ ) {
+ files.push(deletedModule[i]);
+ }
+ }
+ }
- return unassigned.concat(files);
+ return unassigned.concat(files);
}
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.MANIFEST_LOADED:
- return {
- ...state,
- ...action.response,
- modules: action.response.modules.map(module => ({...module, name: module.name || module.yaml.substring(0, module.yaml.lastIndexOf('.'))}))
- };
- case actionTypes.ARTIFACT_LIST_CHANGE:
- return {
- ...state,
- artifacts: action.data.artifacts,
- unassigned: syncUnassignedFilesWithArtifactsChanges(state.unassigned, action.data.artifacts, state.artifacts)
- };
- case actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS:
- return {
- ...state,
- artifacts: [...state.artifacts,...state.unassigned],
- unassigned: []
- };
- case actionTypes.ADD_ALL_ARTIFACTS_TO_UNASSIGNED:
- return {
- ...state,
- artifacts: [],
- unassigned: [...state.unassigned, ...state.artifacts]
- };
- case actionTypes.ADD_MODULE:
- return {
- ...state,
- modules: state.modules.concat({...emptyModule(action.data.isBase, state.modules.length)})
- };
- case actionTypes.REMOVE_MODULE:
- const moduleIndexToDelete = findModuleIndexByName(state.modules, action.data.moduleName);
- let unassigned = addDeletedModuleFilesToUnassigned(state.unassigned, state.modules[moduleIndexToDelete]);
- return {
- ...state,
- unassigned,
- modules: [...state.modules.slice(0, moduleIndexToDelete), ...state.modules.slice(moduleIndexToDelete + 1)]
- };
- case actionTypes.RENAME_MODULE:
- const indexToRename = findModuleIndexByName(state.modules, action.data.oldName);
- let moduleToRename = state.modules[indexToRename];
- moduleToRename.name = action.data.newName;
- return {
- ...state,
- modules: [...state.modules.slice(0, indexToRename), moduleToRename, ...state.modules.slice(indexToRename + 1)]
- };
- case actionTypes.FILE_ASSIGN_CHANGED:
- let {module, value:{value}, type} = action.data;
- const moduleIndexToModify = findModuleIndexByName(state.modules, module.name);
- let moduleToModify = state.modules[moduleIndexToModify];
- let dumpedFile = moduleToModify[type];
- if (dumpedFile !== value) {
- if(value) {
- moduleToModify[type] = value;
- }
- else {
- delete moduleToModify[type];
- }
- const newUnassignedList = dumpedFile ? [...state.unassigned.filter(file => file !== value), dumpedFile] : state.unassigned.filter(file => file !== value);
- return {
- ...state,
- modules: [...state.modules.slice(0, moduleIndexToModify), moduleToModify, ...state.modules.slice(moduleIndexToModify + 1)],
- unassigned: newUnassignedList
- };
- }
- else {
- return state;
- }
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.MANIFEST_LOADED:
+ return {
+ ...state,
+ ...action.response,
+ modules: action.response.modules.map(module => ({
+ ...module,
+ name:
+ module.name ||
+ module.yaml.substring(0, module.yaml.lastIndexOf('.'))
+ }))
+ };
+ case actionTypes.ARTIFACT_LIST_CHANGE:
+ return {
+ ...state,
+ artifacts: action.data.artifacts,
+ unassigned: syncUnassignedFilesWithArtifactsChanges(
+ state.unassigned,
+ action.data.artifacts,
+ state.artifacts
+ )
+ };
+ case actionTypes.ADD_ALL_UNASSIGNED_TO_ARTIFACTS:
+ return {
+ ...state,
+ artifacts: [...state.artifacts, ...state.unassigned],
+ unassigned: []
+ };
+ case actionTypes.ADD_ALL_ARTIFACTS_TO_UNASSIGNED:
+ return {
+ ...state,
+ artifacts: [],
+ unassigned: [...state.unassigned, ...state.artifacts]
+ };
+ case actionTypes.ADD_MODULE:
+ return {
+ ...state,
+ modules: state.modules.concat({
+ ...emptyModule(action.data.isBase, state.modules.length)
+ })
+ };
+ case actionTypes.REMOVE_MODULE:
+ const moduleIndexToDelete = findModuleIndexByName(
+ state.modules,
+ action.data.moduleName
+ );
+ let unassigned = addDeletedModuleFilesToUnassigned(
+ state.unassigned,
+ state.modules[moduleIndexToDelete]
+ );
+ return {
+ ...state,
+ unassigned,
+ modules: [
+ ...state.modules.slice(0, moduleIndexToDelete),
+ ...state.modules.slice(moduleIndexToDelete + 1)
+ ]
+ };
+ case actionTypes.RENAME_MODULE:
+ const indexToRename = findModuleIndexByName(
+ state.modules,
+ action.data.oldName
+ );
+ let moduleToRename = state.modules[indexToRename];
+ moduleToRename.name = action.data.newName;
+ return {
+ ...state,
+ modules: [
+ ...state.modules.slice(0, indexToRename),
+ moduleToRename,
+ ...state.modules.slice(indexToRename + 1)
+ ]
+ };
+ case actionTypes.FILE_ASSIGN_CHANGED:
+ let { module, value: { value }, type } = action.data;
+ const moduleIndexToModify = findModuleIndexByName(
+ state.modules,
+ module.name
+ );
+ let moduleToModify = state.modules[moduleIndexToModify];
+ let dumpedFile = moduleToModify[type];
+ if (dumpedFile !== value) {
+ if (value) {
+ moduleToModify[type] = value;
+ } else {
+ delete moduleToModify[type];
+ }
+ const newUnassignedList = dumpedFile
+ ? [
+ ...state.unassigned.filter(file => file !== value),
+ dumpedFile
+ ]
+ : state.unassigned.filter(file => file !== value);
+ return {
+ ...state,
+ modules: [
+ ...state.modules.slice(0, moduleIndexToModify),
+ moduleToModify,
+ ...state.modules.slice(moduleIndexToModify + 1)
+ ],
+ unassigned: newUnassignedList
+ };
+ } else {
+ return state;
+ }
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index ce6d5260d7..1d4efd9104 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -13,7 +13,7 @@
* or implied. 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 Button from 'sdc-ui/lib/react/Button.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -21,307 +21,476 @@ import FormControl from 'react-bootstrap/lib/FormControl.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SelectInput from 'nfvo-components/input/SelectInput.jsx';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import {fileTypes} from './HeatSetupConstants.js';
-import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
-import {sortable} from 'react-sortable';
+import { fileTypes } from './HeatSetupConstants.js';
+import { tabsMapping } from '../SoftwareProductAttachmentsConstants.js';
+import { sortable } from 'react-sortable';
class ListItem extends Component {
-
- render() {
- return (
- <li {...this.props}>{this.props.children}</li>
- );
- }
+ render() {
+ return <li {...this.props}>{this.props.children}</li>;
+ }
}
-
const SortableListItem = sortable(ListItem);
class SortableModuleFileList extends Component {
-
- state = {
- draggingIndex: null,
- data: this.props.modules
- };
-
-
- componentWillReceiveProps(nextProps) {
- this.setState({data: nextProps.modules});
- }
-
- render() {
-
- let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
- const childProps = module => ({
- module,
- onModuleRename,
- onModuleDelete,
- onModuleFileTypeChange: (value, type) => onModuleFileTypeChange({module, value, type}),
- files: unassigned
- });
- let listItems = this.state.data.map(function (item, i) {
- return (
- <SortableListItem
- key={i}
- updateState={data => this.setState(data)}
- items={this.state.data}
- draggingIndex={this.state.draggingIndex}
- sortId={i}
- outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
- );
- }, this);
-
- return (
- <div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
- <div className='modules-list-header'>
- {!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>}
- <div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div>
- </div>
- {(listItems.length > 0) && <ul>{listItems}</ul>}
- </div>
- );
- }
+ state = {
+ draggingIndex: null,
+ data: this.props.modules
+ };
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({ data: nextProps.modules });
+ }
+
+ render() {
+ let {
+ unassigned,
+ onModuleRename,
+ onModuleDelete,
+ onModuleAdd,
+ onBaseAdd,
+ onModuleFileTypeChange,
+ isBaseExist,
+ isReadOnlyMode
+ } = this.props;
+ const childProps = module => ({
+ module,
+ onModuleRename,
+ onModuleDelete,
+ onModuleFileTypeChange: (value, type) =>
+ onModuleFileTypeChange({ module, value, type }),
+ files: unassigned
+ });
+ let listItems = this.state.data.map(function(item, i) {
+ return (
+ <SortableListItem
+ key={i}
+ updateState={data => this.setState(data)}
+ items={this.state.data}
+ draggingIndex={this.state.draggingIndex}
+ sortId={i}
+ outline="list">
+ <ModuleFile
+ {...childProps(item)}
+ isReadOnlyMode={this.props.isReadOnlyMode}
+ />
+ </SortableListItem>
+ );
+ }, this);
+
+ return (
+ <div
+ className={`modules-list-wrapper ${
+ listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
+ }`}>
+ <div className="modules-list-header">
+ {!isBaseExist && (
+ <div>
+ <Button
+ btnType="link"
+ onClick={onBaseAdd}
+ disabled={
+ isReadOnlyMode || unassigned.length === 0
+ }>
+ {i18n('Add Base')}
+ </Button>
+ </div>
+ )}
+ <div>
+ <Button
+ btnType="link"
+ onClick={onModuleAdd}
+ disabled={
+ isReadOnlyMode || unassigned.length === 0
+ }>
+ {i18n('Add Module')}
+ </Button>
+ </div>
+ </div>
+ {listItems.length > 0 && <ul>{listItems}</ul>}
+ </div>
+ );
+ }
}
-const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
-const UnassignedFileList = (props) => {
- return (
- <div>
- <div className='modules-list-header'/>
- <div className='unassigned-files'>
- <div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div>
- <div className='unassigned-files-list'>{props.children}</div>
- </div>
- </div>
- );
+const tooltip = name => <Tooltip id="tooltip-bottom">{name}</Tooltip>;
+const UnassignedFileList = props => {
+ return (
+ <div>
+ <div className="modules-list-header" />
+ <div className="unassigned-files">
+ <div className="unassigned-files-title">
+ {i18n('UNASSIGNED FILES')}
+ </div>
+ <div className="unassigned-files-list">{props.children}</div>
+ </div>
+ </div>
+ );
};
const EmptyListContent = props => {
- let {heatDataExist} = props;
- let displayText = heatDataExist ? 'All Files Are Assigned' : '';
- return (
- <div className='go-to-validation-button-wrapper'>
- <div className='all-files-assigned'>{i18n(displayText)}</div>
- </div>
- );
+ let { heatDataExist } = props;
+ let displayText = heatDataExist ? 'All Files Are Assigned' : '';
+ return (
+ <div className="go-to-validation-button-wrapper">
+ <div className="all-files-assigned">{i18n(displayText)}</div>
+ </div>
+ );
};
-const UnassignedFile = (props) => (
- <OverlayTrigger placement='bottom' overlay={tooltip(props.name)} delayShow={1000}>
- <li data-test-id='unassigned-files' className='unassigned-files-list-item'>{props.name}</li>
- </OverlayTrigger>
+const UnassignedFile = props => (
+ <OverlayTrigger
+ placement="bottom"
+ overlay={tooltip(props.name)}
+ delayShow={1000}>
+ <li
+ data-test-id="unassigned-files"
+ className="unassigned-files-list-item">
+ {props.name}
+ </li>
+ </OverlayTrigger>
);
-const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
- const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
- const action = add ? onAdd : onDelete;
- return (
- <Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
- );
+const AddOrDeleteVolumeFiles = ({
+ add = true,
+ onAdd,
+ onDelete,
+ isReadOnlyMode
+}) => {
+ const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
+ const action = add ? onAdd : onDelete;
+ return (
+ <Button
+ disabled={isReadOnlyMode}
+ onClick={action}
+ btnType="link"
+ className="add-or-delete-volumes"
+ iconName={add ? 'plus' : 'close'}>
+ {i18n(displayText)}
+ </Button>
+ );
};
-const SelectWithFileType = ({type, selected, files, onChange}) => {
-
- let filteredFiledAccordingToType = files.filter(file => file.label.search(type.regex) > -1);
- if (selected) {
- filteredFiledAccordingToType = filteredFiledAccordingToType.concat({label: selected, value: selected});
- }
-
- return (
- <SelectInput
- data-test-id={`${type.label}-list`}
- label={type.label}
- value={selected}
- onChange={value => value !== selected && onChange(value, type.label)}
- disabled={filteredFiledAccordingToType.length === 0}
- placeholder={filteredFiledAccordingToType.length === 0 ? '' : undefined}
- clearable={true}
- options={filteredFiledAccordingToType} />
- );
+const SelectWithFileType = ({ type, selected, files, onChange }) => {
+ let filteredFiledAccordingToType = files.filter(
+ file => file.label.search(type.regex) > -1
+ );
+ if (selected) {
+ filteredFiledAccordingToType = filteredFiledAccordingToType.concat({
+ label: selected,
+ value: selected
+ });
+ }
+
+ return (
+ <SelectInput
+ data-test-id={`${type.label}-list`}
+ label={type.label}
+ value={selected}
+ onChange={value =>
+ value !== selected && onChange(value, type.label)
+ }
+ disabled={filteredFiledAccordingToType.length === 0}
+ placeholder={
+ filteredFiledAccordingToType.length === 0 ? '' : undefined
+ }
+ clearable={true}
+ options={filteredFiledAccordingToType}
+ />
+ );
};
class NameEditInput extends Component {
- componentDidMount() {
- this.input.focus();
- }
-
- render() {
- return (
- <FormControl {...this.props} className='name-edit' inputRef={input => this.input = input}/>
- );
- }
+ componentDidMount() {
+ this.input.focus();
+ }
+
+ render() {
+ return (
+ <FormControl
+ {...this.props}
+ className="name-edit"
+ inputRef={input => (this.input = input)}
+ />
+ );
+ }
}
class ModuleFile extends Component {
- constructor(props) {
- super(props);
- this.state = {
- isInNameEdit: false,
- displayVolumes: Boolean(props.module.vol || props.module.volEnv)
- };
- }
-
- handleSubmit(event, name) {
- if (event.keyCode === 13) {
- this.handleModuleRename(event, name);
- }
- }
-
- componentWillReceiveProps(nextProps) {
- this.setState({displayVolumes: Boolean(nextProps.module.vol || nextProps.module.volEnv)});
- }
-
- handleModuleRename(event, name) {
- this.setState({isInNameEdit: false});
- this.props.onModuleRename(name, event.target.value);
- }
-
- deleteVolumeFiles() {
- const { onModuleFileTypeChange} = this.props;
- onModuleFileTypeChange(null, fileTypes.VOL.label);
- onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
- this.setState({displayVolumes: false});
- }
-
- renderNameAccordingToEditState() {
- const {module: {name}} = this.props;
- if (this.state.isInNameEdit) {
- return (<NameEditInput defaultValue={name} onBlur={evt => this.handleModuleRename(evt, name)} onKeyDown={evt => this.handleSubmit(evt, name)}/>);
- }
- return (<span className='filename-text'>{name}</span>);
- }
-
- render() {
- const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props;
- const {displayVolumes} = this.state;
- const moduleType = isBase ? 'BASE' : 'MODULE';
- return (
- <div className='modules-list-item' data-test-id='module-item'>
- <div className='modules-list-item-controllers'>
- <div className='modules-list-item-filename'>
- <SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' />
- <span className='module-title-by-type'>{`${moduleType}: `}</span>
- <div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}>
- {this.renderNameAccordingToEditState()}
- {!this.state.isInNameEdit && <SVGIcon
- name='pencil'
- onClick={() => this.setState({isInNameEdit: true})}
- data-test-id={isBase ? 'base-name' : 'module-name'}/>}
- </div>
- </div>
- <SVGIcon name='trashO' onClick={() => onModuleDelete(name)} data-test-id='module-delete'/>
- </div>
- <div className='modules-list-item-selectors'>
- <SelectWithFileType
- type={fileTypes.YAML}
- files={files}
- selected={yaml}
- onChange={onModuleFileTypeChange}/>
- <SelectWithFileType
- type={fileTypes.ENV}
- files={files}
- selected={env}
- onChange={onModuleFileTypeChange}/>
- {displayVolumes && <SelectWithFileType
- type={fileTypes.VOL}
- files={files}
- selected={vol}
- onChange={onModuleFileTypeChange}/>}
- {displayVolumes && <SelectWithFileType
- type={fileTypes.VOL_ENV}
- files={files}
- selected={volEnv}
- onChange={onModuleFileTypeChange}/>}
- <AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
- </div>
- </div>
- );
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ isInNameEdit: false,
+ displayVolumes: Boolean(props.module.vol || props.module.volEnv)
+ };
+ }
+
+ handleSubmit(event, name) {
+ if (event.keyCode === 13) {
+ this.handleModuleRename(event, name);
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ displayVolumes: Boolean(
+ nextProps.module.vol || nextProps.module.volEnv
+ )
+ });
+ }
+
+ handleModuleRename(event, name) {
+ this.setState({ isInNameEdit: false });
+ this.props.onModuleRename(name, event.target.value);
+ }
+
+ deleteVolumeFiles() {
+ const { onModuleFileTypeChange } = this.props;
+ onModuleFileTypeChange(null, fileTypes.VOL.label);
+ onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
+ this.setState({ displayVolumes: false });
+ }
+
+ renderNameAccordingToEditState() {
+ const { module: { name } } = this.props;
+ if (this.state.isInNameEdit) {
+ return (
+ <NameEditInput
+ defaultValue={name}
+ onBlur={evt => this.handleModuleRename(evt, name)}
+ onKeyDown={evt => this.handleSubmit(evt, name)}
+ />
+ );
+ }
+ return <span className="filename-text">{name}</span>;
+ }
+
+ render() {
+ const {
+ module: { name, isBase, yaml, env, vol, volEnv },
+ onModuleDelete,
+ files,
+ onModuleFileTypeChange,
+ isReadOnlyMode
+ } = this.props;
+ const { displayVolumes } = this.state;
+ const moduleType = isBase ? 'BASE' : 'MODULE';
+ return (
+ <div className="modules-list-item" data-test-id="module-item">
+ <div className="modules-list-item-controllers">
+ <div className="modules-list-item-filename">
+ <SVGIcon
+ name={isBase ? 'base' : 'module'}
+ color="primary"
+ iconClassName="heat-setup-module-icon"
+ />
+ <span className="module-title-by-type">{`${moduleType}: `}</span>
+ <div
+ className={`text-and-icon ${
+ this.state.isInNameEdit ? 'in-edit' : ''
+ }`}>
+ {this.renderNameAccordingToEditState()}
+ {!this.state.isInNameEdit && (
+ <SVGIcon
+ name="pencil"
+ onClick={() =>
+ this.setState({ isInNameEdit: true })
+ }
+ data-test-id={
+ isBase ? 'base-name' : 'module-name'
+ }
+ />
+ )}
+ </div>
+ </div>
+ <SVGIcon
+ name="trashO"
+ onClick={() => onModuleDelete(name)}
+ data-test-id="module-delete"
+ />
+ </div>
+ <div className="modules-list-item-selectors">
+ <SelectWithFileType
+ type={fileTypes.YAML}
+ files={files}
+ selected={yaml}
+ onChange={onModuleFileTypeChange}
+ />
+ <SelectWithFileType
+ type={fileTypes.ENV}
+ files={files}
+ selected={env}
+ onChange={onModuleFileTypeChange}
+ />
+ {displayVolumes && (
+ <SelectWithFileType
+ type={fileTypes.VOL}
+ files={files}
+ selected={vol}
+ onChange={onModuleFileTypeChange}
+ />
+ )}
+ {displayVolumes && (
+ <SelectWithFileType
+ type={fileTypes.VOL_ENV}
+ files={files}
+ selected={volEnv}
+ onChange={onModuleFileTypeChange}
+ />
+ )}
+ <AddOrDeleteVolumeFiles
+ isReadOnlyMode={isReadOnlyMode}
+ onAdd={() => this.setState({ displayVolumes: true })}
+ onDelete={() => this.deleteVolumeFiles()}
+ add={!displayVolumes}
+ />
+ </div>
+ </div>
+ );
+ }
}
class ArtifactOrNestedFileList extends Component {
-
- render() {
- let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
- return (
- <div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
- <div className='artifact-files-header'>
- <span>
- {type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
- {`${title}`}
- </span>
- {type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>}
- </div>
- {type === 'nested' ? (
- <ul className='nested-list'>{selected.map(nested =>
- <li key={nested} className='nested-list-item'>{nested}</li>
- )}</ul>) :
- (<SelectInput
- options={options}
- onMultiSelectChanged={onSelectChanged || (() => {
- })}
- value={selected}
- clearable={false}
- placeholder={i18n('Add Artifact')}
- multi/>)
- }
- </div>
- );
- }
+ render() {
+ let {
+ type,
+ title,
+ selected,
+ options,
+ onSelectChanged,
+ onAddAllUnassigned,
+ isReadOnlyMode,
+ headerClassName
+ } = this.props;
+ return (
+ <div
+ className={`artifact-files ${
+ type === 'nested' ? 'nested' : ''
+ } ${headerClassName} `}>
+ <div className="artifact-files-header">
+ <span>
+ {type === 'artifact' && (
+ <SVGIcon
+ color="primary"
+ name="artifacts"
+ iconClassName="heat-setup-module-icon"
+ />
+ )}
+ {`${title}`}
+ </span>
+ {type === 'artifact' && (
+ <Button
+ disabled={isReadOnlyMode}
+ btnType="link"
+ className="add-all-unassigned"
+ onClick={onAddAllUnassigned}>
+ {i18n('Add All Unassigned Files')}
+ </Button>
+ )}
+ </div>
+ {type === 'nested' ? (
+ <ul className="nested-list">
+ {selected.map(nested => (
+ <li key={nested} className="nested-list-item">
+ {nested}
+ </li>
+ ))}
+ </ul>
+ ) : (
+ <SelectInput
+ options={options}
+ onMultiSelectChanged={onSelectChanged || (() => {})}
+ value={selected}
+ clearable={false}
+ placeholder={i18n('Add Artifact')}
+ multi
+ />
+ )}
+ </div>
+ );
+ }
}
-const buildLabelValueObject = str => (typeof str === 'string' ? {value: str, label: str} : str);
+const buildLabelValueObject = str =>
+ typeof str === 'string' ? { value: str, label: str } : str;
class SoftwareProductHeatSetupView extends Component {
-
- processAndValidateHeat(heatData, heatDataCache){
- let {onProcessAndValidate, changeAttachmentsTab, version} = this.props;
- onProcessAndValidate({heatData, heatDataCache, version}).then(
- () => changeAttachmentsTab(tabsMapping.VALIDATION)
- );
- }
-
- render() {
- let {modules, isReadOnlyMode, heatDataExist, unassigned, artifacts, nested, onArtifactListChange, onAddAllUnassigned} = this.props;
-
- const formattedUnassigned = unassigned.map(buildLabelValueObject);
- const formattedArtifacts = artifacts.map(buildLabelValueObject);
- return (
- <div className={`heat-setup-view ${isReadOnlyMode ? 'disabled' : ''}`}>
- <div className='heat-setup-view-modules-and-artifacts'>
- <SortableModuleFileList
- {...this.props}
- isReadOnlyMode={this.props.isReadOnlyMode}
- artifacts={formattedArtifacts}
- unassigned={formattedUnassigned}/>
- <ArtifactOrNestedFileList
- type={'artifact'}
- title={i18n('ARTIFACTS')}
- options={formattedUnassigned}
- selected={formattedArtifacts}
- onSelectChanged={onArtifactListChange}
- isReadOnlyMode={this.props.isReadOnlyMode}
- headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''}
- onAddAllUnassigned={onAddAllUnassigned}/>
- <ArtifactOrNestedFileList
- type={'nested'}
- title={i18n('NESTED HEAT FILES')}
- options={[]}
- isReadOnlyMode={this.props.isReadOnlyMode}
- selected={nested}/>
- </div>
- <UnassignedFileList>
- {
- formattedUnassigned.length > 0 ?
- (<ul>{formattedUnassigned.map(file => <UnassignedFile key={file.label} name={file.label}/>)}</ul>)
- :
- (<EmptyListContent
- heatDataExist={heatDataExist}/>)
- }
- </UnassignedFileList>
- </div>
- );
- }
-
+ processAndValidateHeat(heatData, heatDataCache) {
+ let {
+ onProcessAndValidate,
+ changeAttachmentsTab,
+ version
+ } = this.props;
+ onProcessAndValidate({ heatData, heatDataCache, version }).then(() =>
+ changeAttachmentsTab(tabsMapping.VALIDATION)
+ );
+ }
+
+ render() {
+ let {
+ modules,
+ isReadOnlyMode,
+ heatDataExist,
+ unassigned,
+ artifacts,
+ nested,
+ onArtifactListChange,
+ onAddAllUnassigned
+ } = this.props;
+
+ const formattedUnassigned = unassigned.map(buildLabelValueObject);
+ const formattedArtifacts = artifacts.map(buildLabelValueObject);
+ return (
+ <div
+ className={`heat-setup-view ${
+ isReadOnlyMode ? 'disabled' : ''
+ }`}>
+ <div className="heat-setup-view-modules-and-artifacts">
+ <SortableModuleFileList
+ {...this.props}
+ isReadOnlyMode={this.props.isReadOnlyMode}
+ artifacts={formattedArtifacts}
+ unassigned={formattedUnassigned}
+ />
+ <ArtifactOrNestedFileList
+ type={'artifact'}
+ title={i18n('ARTIFACTS')}
+ options={formattedUnassigned}
+ selected={formattedArtifacts}
+ onSelectChanged={onArtifactListChange}
+ isReadOnlyMode={this.props.isReadOnlyMode}
+ headerClassName={
+ modules && modules.length > 0
+ ? 'with-list-items'
+ : ''
+ }
+ onAddAllUnassigned={onAddAllUnassigned}
+ />
+ <ArtifactOrNestedFileList
+ type={'nested'}
+ title={i18n('NESTED HEAT FILES')}
+ options={[]}
+ isReadOnlyMode={this.props.isReadOnlyMode}
+ selected={nested}
+ />
+ </div>
+ <UnassignedFileList>
+ {formattedUnassigned.length > 0 ? (
+ <ul>
+ {formattedUnassigned.map(file => (
+ <UnassignedFile
+ key={file.label}
+ name={file.label}
+ />
+ ))}
+ </ul>
+ ) : (
+ <EmptyListContent heatDataExist={heatDataExist} />
+ )}
+ </UnassignedFileList>
+ </div>
+ );
+ }
}
export default SoftwareProductHeatSetupView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js
index 21f6e6c77f..00130e4bc7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidation.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 HeatValidationView from './HeatValidationView.jsx';
import HeatValidationActionHelper from './HeatValidationActionHelper.js';
-import {errorLevels, nodeFilters} from './HeatValidationConstants.js';
+import { errorLevels, nodeFilters } from './HeatValidationConstants.js';
-export const mapStateToProps = ({softwareProduct: {softwareProductAttachments: {heatValidation}}}) => {
- let {attachmentsTree, selectedNode, errorList} = heatValidation;
- let currentErrors = [], currentWarnings = [];
- if (errorList) {
- for (let i = 0 ; i < errorList.length ; i++) {
- if (errorList[i].level === errorLevels.ERROR && (errorList[i].name === selectedNode || selectedNode === nodeFilters.ALL)) {
- currentErrors[currentErrors.length] = errorList[i];
- }
- if (errorList[i].level === errorLevels.WARNING && (errorList[i].name === selectedNode || selectedNode === nodeFilters.ALL)) {
- currentWarnings[currentWarnings.length] = errorList[i];
- }
- }
- }
- return {
- attachmentsTree,
- selectedNode,
- errorList,
- currentErrors,
- currentWarnings
- };
+export const mapStateToProps = ({
+ softwareProduct: { softwareProductAttachments: { heatValidation } }
+}) => {
+ let { attachmentsTree, selectedNode, errorList } = heatValidation;
+ let currentErrors = [],
+ currentWarnings = [];
+ if (errorList) {
+ for (let i = 0; i < errorList.length; i++) {
+ if (
+ errorList[i].level === errorLevels.ERROR &&
+ (errorList[i].name === selectedNode ||
+ selectedNode === nodeFilters.ALL)
+ ) {
+ currentErrors[currentErrors.length] = errorList[i];
+ }
+ if (
+ errorList[i].level === errorLevels.WARNING &&
+ (errorList[i].name === selectedNode ||
+ selectedNode === nodeFilters.ALL)
+ ) {
+ currentWarnings[currentWarnings.length] = errorList[i];
+ }
+ }
+ }
+ return {
+ attachmentsTree,
+ selectedNode,
+ errorList,
+ currentErrors,
+ currentWarnings
+ };
};
-const mapActionsToProps = (dispatch) => {
- return {
- toggleExpanded: (path) => HeatValidationActionHelper.toggleExpanded(dispatch, {path}),
- onSelectNode: (nodeName) => HeatValidationActionHelper.onSelectNode(dispatch, {nodeName}),
- onDeselectNode: () => HeatValidationActionHelper.onDeselectNode(dispatch)
- };
+const mapActionsToProps = dispatch => {
+ return {
+ toggleExpanded: path =>
+ HeatValidationActionHelper.toggleExpanded(dispatch, { path }),
+ onSelectNode: nodeName =>
+ HeatValidationActionHelper.onSelectNode(dispatch, { nodeName }),
+ onDeselectNode: () =>
+ HeatValidationActionHelper.onDeselectNode(dispatch)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(HeatValidationView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(HeatValidationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
index 73366c20cc..5e8e49cf8a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationActionHelper.js
@@ -13,27 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './HeatValidationConstants.js';
+import { actionTypes } from './HeatValidationConstants.js';
export default {
+ toggleExpanded(dispatch, { path }) {
+ dispatch({
+ type: actionTypes.TOGGLE_EXPANDED,
+ path
+ });
+ },
- toggleExpanded(dispatch, {path}) {
- dispatch({
- type: actionTypes.TOGGLE_EXPANDED,
- path
- });
- },
+ onSelectNode(dispatch, { nodeName }) {
+ dispatch({
+ type: actionTypes.SELECTED_NODE,
+ nodeName
+ });
+ },
- onSelectNode(dispatch, {nodeName}) {
- dispatch({
- type: actionTypes.SELECTED_NODE,
- nodeName
- });
- },
-
- onDeselectNode(dispatch) {
- dispatch({
- type: actionTypes.UNSELECTED_NODE
- });
- }
+ onDeselectNode(dispatch) {
+ dispatch({
+ type: actionTypes.UNSELECTED_NODE
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
index f783fe6482..8c9f54b5ba 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationConstants.js
@@ -17,41 +17,48 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
export const actionTypes = keyMirror({
- TOGGLE_EXPANDED: null,
- SELECTED_NODE: null,
- UNSELECTED_NODE: null
+ TOGGLE_EXPANDED: null,
+ SELECTED_NODE: null,
+ UNSELECTED_NODE: null
});
export const errorTypes = keyMirror({
- MISSING_FILE_IN_ZIP: i18n('missing file in zip'),
- MISSING_FILE_IN_MANIFEST: i18n('missing file in manifest'),
- MISSING_OR_ILLEGAL_FILE_TYPE_IN_MANIFEST: i18n('missing or illegal file type in manifest'),
- FILE_IS_YML_WITHOUT_YML_EXTENSION: i18n('file is defined as a heat file but it doesn\'t have .yml or .yaml extension'),
- FILE_IS_ENV_WITHOUT_ENV_EXTENSION: i18n('file is defined as an env file but it doesn\'t have .env extension'),
- ILLEGAL_YAML_FILE_CONTENT: i18n('illegal yaml file content'),
- ILLEGAL_HEAT_YAML_FILE_CONTENT: i18n('illegal HEAT yaml file content'),
- MISSING_FILE_NAME_IN_MANIFEST: i18n('a file is written in manifest without file name'),
- MISSING_ENV_FILE_IN_ZIP: i18n('missing env file in zip'),
- ARTIFACT_NOT_IN_USE: i18n('artifact not in use')
+ MISSING_FILE_IN_ZIP: i18n('missing file in zip'),
+ MISSING_FILE_IN_MANIFEST: i18n('missing file in manifest'),
+ MISSING_OR_ILLEGAL_FILE_TYPE_IN_MANIFEST: i18n(
+ 'missing or illegal file type in manifest'
+ ),
+ FILE_IS_YML_WITHOUT_YML_EXTENSION: i18n(
+ "file is defined as a heat file but it doesn't have .yml or .yaml extension"
+ ),
+ FILE_IS_ENV_WITHOUT_ENV_EXTENSION: i18n(
+ "file is defined as an env file but it doesn't have .env extension"
+ ),
+ ILLEGAL_YAML_FILE_CONTENT: i18n('illegal yaml file content'),
+ ILLEGAL_HEAT_YAML_FILE_CONTENT: i18n('illegal HEAT yaml file content'),
+ MISSING_FILE_NAME_IN_MANIFEST: i18n(
+ 'a file is written in manifest without file name'
+ ),
+ MISSING_ENV_FILE_IN_ZIP: i18n('missing env file in zip'),
+ ARTIFACT_NOT_IN_USE: i18n('artifact not in use')
});
export const errorLevels = keyMirror({
- WARNING: 'WARNING',
- ERROR: 'ERROR'
+ WARNING: 'WARNING',
+ ERROR: 'ERROR'
});
export const nodeFilters = keyMirror({
- ALL: 'All'
+ ALL: 'All'
});
export const nodeTypes = keyMirror({
- heat: i18n('Heat'),
- volume: i18n('Volume'),
- network: i18n('Network'),
- artifact: i18n('Artifact'),
- env: i18n('Environment'),
- other: i18n('')
+ heat: i18n('Heat'),
+ volume: i18n('Volume'),
+ network: i18n('Network'),
+ artifact: i18n('Artifact'),
+ env: i18n('Environment'),
+ other: i18n('')
});
export const mouseActions = keyMirror({
- MOUSE_BUTTON_CLICK: 0
+ MOUSE_BUTTON_CLICK: 0
});
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
index 1d11bdd6b7..67e36ca040 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationReducer.js
@@ -13,185 +13,242 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes as softwareProductsActionTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes, nodeFilters} from './HeatValidationConstants.js';
+import { actionTypes as softwareProductsActionTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { actionTypes, nodeFilters } from './HeatValidationConstants.js';
-const mapVolumeData = ({fileName, env, errors}) => ({
- name: fileName,
- expanded: true,
- type: 'volume',
- children: env && [{
- name: env.fileName,
- errors: env.errors,
- type: 'env'
- }],
- errors
+const mapVolumeData = ({ fileName, env, errors }) => ({
+ name: fileName,
+ expanded: true,
+ type: 'volume',
+ children: env && [
+ {
+ name: env.fileName,
+ errors: env.errors,
+ type: 'env'
+ }
+ ],
+ errors
});
-const mapNetworkData = ({fileName, env, errors}) => ({
- name: fileName,
- expanded: true,
- type: 'network',
- children: env && [{
- name: env.fileName,
- errors: env.errors,
- type: 'env'
- }],
- errors
+const mapNetworkData = ({ fileName, env, errors }) => ({
+ name: fileName,
+ expanded: true,
+ type: 'network',
+ children: env && [
+ {
+ name: env.fileName,
+ errors: env.errors,
+ type: 'env'
+ }
+ ],
+ errors
});
-const mapArtifactsData = ({fileName, errors}) => ({
- name: fileName,
- type: 'artifact',
- errors
+const mapArtifactsData = ({ fileName, errors }) => ({
+ name: fileName,
+ type: 'artifact',
+ errors
});
-const mapOtherData = ({fileName, errors}) => ({
- name: fileName,
- type: 'other',
- errors
+const mapOtherData = ({ fileName, errors }) => ({
+ name: fileName,
+ type: 'other',
+ errors
});
-
-const mapHeatData = ({fileName, env, nested, volume, network, artifacts, errors, other}) => ({
- name: fileName,
- expanded: true,
- type: 'heat',
- errors,
- children: [
- ...(volume ? volume.map(mapVolumeData) : []),
- ...(network ? network.map(mapNetworkData) : []),
- ...(env ? [{
- name: env.fileName,
- errors: env.errors,
- type: 'env'
- }] : []),
- ...(artifacts ? artifacts.map(mapArtifactsData) : []),
- ...(other ? other.map(mapOtherData) : []),
- ...(nested ? nested.map(mapHeatData) : [])
- ]
+const mapHeatData = ({
+ fileName,
+ env,
+ nested,
+ volume,
+ network,
+ artifacts,
+ errors,
+ other
+}) => ({
+ name: fileName,
+ expanded: true,
+ type: 'heat',
+ errors,
+ children: [
+ ...(volume ? volume.map(mapVolumeData) : []),
+ ...(network ? network.map(mapNetworkData) : []),
+ ...(env
+ ? [
+ {
+ name: env.fileName,
+ errors: env.errors,
+ type: 'env'
+ }
+ ]
+ : []),
+ ...(artifacts ? artifacts.map(mapArtifactsData) : []),
+ ...(other ? other.map(mapOtherData) : []),
+ ...(nested ? nested.map(mapHeatData) : [])
+ ]
});
function createErrorList(node, parent, deep = 0, errorList = []) {
- if (node.errors) {
- errorList.push(...node.errors.map((error) => ({
- level: error.level,
- errorMessage: error.message,
- name: node.name,
- hasParent: deep > 2,
- parentName: parent.name,
- type: node.type,
- })));
- }
- if (node.children && node.children.length) {
- node.children.map((child) => createErrorList(child, node, deep + 1, errorList));
- }
- return errorList;
+ if (node.errors) {
+ errorList.push(
+ ...node.errors.map(error => ({
+ level: error.level,
+ errorMessage: error.message,
+ name: node.name,
+ hasParent: deep > 2,
+ parentName: parent.name,
+ type: node.type
+ }))
+ );
+ }
+ if (node.children && node.children.length) {
+ node.children.map(child =>
+ createErrorList(child, node, deep + 1, errorList)
+ );
+ }
+ return errorList;
}
const mapValidationDataToTree = (validationData, packageName) => {
- let {heat, nested, volume, network, artifacts, other} = validationData.importStructure || {};
- return {
- children: [
- {
- name: packageName,
- expanded: true,
- type: 'heat',
- header: true,
- children: (heat ? heat.map(mapHeatData) : nested ? nested.map(mapHeatData) : [])
- },
- ...(artifacts ? [{
- name: 'artifacts',
- expanded: true,
- type: 'artifact',
- children: (artifacts ? artifacts.map(mapArtifactsData) : [])
- }] : []),
- ...(network ? [{
- name: 'networks',
- expanded: true,
- type: 'network',
- children: (network ? network.map(mapNetworkData) : []),
- }] : []),
- ...(volume ? [{
- name: 'volume',
- expanded: true,
- type: 'volume',
- children: (volume ? volume.map(mapVolumeData) : []),
- }] : []),
- ...(other ? [{
- name: 'other',
- expanded: true,
- type: 'other',
- children: (other ? other.map(mapOtherData) : []),
- }] : [])
- ]
- };
+ let { heat, nested, volume, network, artifacts, other } =
+ validationData.importStructure || {};
+ return {
+ children: [
+ {
+ name: packageName,
+ expanded: true,
+ type: 'heat',
+ header: true,
+ children: heat
+ ? heat.map(mapHeatData)
+ : nested ? nested.map(mapHeatData) : []
+ },
+ ...(artifacts
+ ? [
+ {
+ name: 'artifacts',
+ expanded: true,
+ type: 'artifact',
+ children: artifacts
+ ? artifacts.map(mapArtifactsData)
+ : []
+ }
+ ]
+ : []),
+ ...(network
+ ? [
+ {
+ name: 'networks',
+ expanded: true,
+ type: 'network',
+ children: network ? network.map(mapNetworkData) : []
+ }
+ ]
+ : []),
+ ...(volume
+ ? [
+ {
+ name: 'volume',
+ expanded: true,
+ type: 'volume',
+ children: volume ? volume.map(mapVolumeData) : []
+ }
+ ]
+ : []),
+ ...(other
+ ? [
+ {
+ name: 'other',
+ expanded: true,
+ type: 'other',
+ children: other ? other.map(mapOtherData) : []
+ }
+ ]
+ : [])
+ ]
+ };
};
const toggleExpanded = (node, path) => {
- let newNode = {...node};
- if (path.length === 0) {
- newNode.expanded = !node.expanded;
- } else {
- let index = path[0];
- newNode.children = [
- ...node.children.slice(0, index),
- toggleExpanded(node.children[index], path.slice(1)),
- ...node.children.slice(index + 1)
- ];
- }
- return newNode;
+ let newNode = { ...node };
+ if (path.length === 0) {
+ newNode.expanded = !node.expanded;
+ } else {
+ let index = path[0];
+ newNode.children = [
+ ...node.children.slice(0, index),
+ toggleExpanded(node.children[index], path.slice(1)),
+ ...node.children.slice(index + 1)
+ ];
+ }
+ return newNode;
};
const expandSelected = (node, selectedNode) => {
- let shouldExpand = node.name === selectedNode;
- let children = node.children && node.children.map(child => {
- let {shouldExpand: shouldExpandChild, node: newChild} = expandSelected(child, selectedNode);
- shouldExpand = shouldExpand || shouldExpandChild;
- return newChild;
- });
+ let shouldExpand = node.name === selectedNode;
+ let children =
+ node.children &&
+ node.children.map(child => {
+ let {
+ shouldExpand: shouldExpandChild,
+ node: newChild
+ } = expandSelected(child, selectedNode);
+ shouldExpand = shouldExpand || shouldExpandChild;
+ return newChild;
+ });
- return {
- node: {
- ...node,
- expanded: node.expanded || shouldExpand,
- children
- },
- shouldExpand
- };
+ return {
+ node: {
+ ...node,
+ expanded: node.expanded || shouldExpand,
+ children
+ },
+ shouldExpand
+ };
};
-export default (state = {attachmentsTree: {}}, action) => {
- switch (action.type) {
- case softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED:
- let currentSoftwareProduct = action.response;
- const packageName = currentSoftwareProduct.networkPackageName;
- let attachmentsTree = currentSoftwareProduct.validationData ? mapValidationDataToTree(currentSoftwareProduct.validationData, packageName) : {};
- let errorList = createErrorList(attachmentsTree);
- return {
- ...state,
- attachmentsTree,
- errorList,
- selectedNode: nodeFilters.ALL
- };
- case actionTypes.TOGGLE_EXPANDED:
- return {
- ...state,
- attachmentsTree: toggleExpanded(state.attachmentsTree, action.path)
- };
- case actionTypes.SELECTED_NODE:
- let selectedNode = action.nodeName;
- return {
- ...state,
- attachmentsTree: expandSelected(state.attachmentsTree, selectedNode).node,
- selectedNode
- };
- case actionTypes.UNSELECTED_NODE:
- return {
- ...state,
- selectedNode: nodeFilters.ALL
- };
- default:
- return state;
- }
+export default (state = { attachmentsTree: {} }, action) => {
+ switch (action.type) {
+ case softwareProductsActionTypes.SOFTWARE_PRODUCT_LOADED:
+ let currentSoftwareProduct = action.response;
+ const packageName = currentSoftwareProduct.networkPackageName;
+ let attachmentsTree = currentSoftwareProduct.validationData
+ ? mapValidationDataToTree(
+ currentSoftwareProduct.validationData,
+ packageName
+ )
+ : {};
+ let errorList = createErrorList(attachmentsTree);
+ return {
+ ...state,
+ attachmentsTree,
+ errorList,
+ selectedNode: nodeFilters.ALL
+ };
+ case actionTypes.TOGGLE_EXPANDED:
+ return {
+ ...state,
+ attachmentsTree: toggleExpanded(
+ state.attachmentsTree,
+ action.path
+ )
+ };
+ case actionTypes.SELECTED_NODE:
+ let selectedNode = action.nodeName;
+ return {
+ ...state,
+ attachmentsTree: expandSelected(
+ state.attachmentsTree,
+ selectedNode
+ ).node,
+ selectedNode
+ };
+ case actionTypes.UNSELECTED_NODE:
+ return {
+ ...state,
+ selectedNode: nodeFilters.ALL
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index 3fdaa9c591..c6ee5efd36 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -13,254 +13,352 @@
* or implied. 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 classNames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js';
+import {
+ mouseActions,
+ errorLevels,
+ nodeFilters
+} from './HeatValidationConstants.js';
const leftPanelWidth = 250;
const typeToIcon = Object.freeze({
- heat: 'nestedHeat',
- volume: 'base',
- network: 'network',
- artifact: 'artifacts',
- env: 'env',
- other: 'other'
+ heat: 'nestedHeat',
+ volume: 'base',
+ network: 'network',
+ artifact: 'artifacts',
+ env: 'env',
+ other: 'other'
});
-
class HeatValidationView extends Component {
+ static propTypes = {
+ attachmentsTree: PropTypes.object.isRequired,
+ errorList: PropTypes.array.isRequired,
+ currentErrors: PropTypes.array.isRequired,
+ currentWarnings: PropTypes.array.isRequired,
+ onSelectNode: PropTypes.func.isRequired,
+ onDeselectNode: PropTypes.func.isRequired,
+ toggleExpanded: PropTypes.func.isRequired,
+ selectedNode: PropTypes.string
+ };
- static propTypes = {
- attachmentsTree: PropTypes.object.isRequired,
- errorList: PropTypes.array.isRequired,
- currentErrors: PropTypes.array.isRequired,
- currentWarnings: PropTypes.array.isRequired,
- onSelectNode: PropTypes.func.isRequired,
- onDeselectNode: PropTypes.func.isRequired,
- toggleExpanded: PropTypes.func.isRequired,
- selectedNode: PropTypes.string
- };
-
- render() {
- return (<div className='vsp-attachments-heat-validation' data-test-id='heat-validation-editor'>
- <HeatFileTree errorList={this.props.errorList} attachmentsTree={this.props.attachmentsTree}
- onSelectNode={this.props.onSelectNode} toggleExpanded={this.props.toggleExpanded}
- selectedNode={this.props.selectedNode} onDeselectNode={this.props.onDeselectNode} />
- <HeatMessageBoard errors={this.props.currentErrors} warnings={this.props.currentWarnings} selectedNode={this.props.selectedNode} />
- </div> );
- }
+ render() {
+ return (
+ <div
+ className="vsp-attachments-heat-validation"
+ data-test-id="heat-validation-editor">
+ <HeatFileTree
+ errorList={this.props.errorList}
+ attachmentsTree={this.props.attachmentsTree}
+ onSelectNode={this.props.onSelectNode}
+ toggleExpanded={this.props.toggleExpanded}
+ selectedNode={this.props.selectedNode}
+ onDeselectNode={this.props.onDeselectNode}
+ />
+ <HeatMessageBoard
+ errors={this.props.currentErrors}
+ warnings={this.props.currentWarnings}
+ selectedNode={this.props.selectedNode}
+ />
+ </div>
+ );
+ }
}
function HeatFileTreeRow(props) {
- let {node, path, toggleExpanded, selectedNode, selectNode} = props;
- let isFolder = node.children && node.children.length > 0;
- return (
- <div onDoubleClick={() => toggleExpanded(path)} className={classNames({
- 'tree-node-row': true,
- 'tree-node-clicked': node.name === props.selectedNode
- })} data-test-id='validation-tree-node'>
- <div className='name-section'>
- {
- isFolder &&
- <div onClick={() => toggleExpanded(path)}
- className='tree-node-expander'>
- <SVGIcon name={!node.expanded ? 'chevronUp' : 'chevronDown'} data-test-id='validation-tree-block-toggle'/>
- </div>
- }
- {
-
- <span className='tree-node-icon'>
- <SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/>
- </span>
- }
- {
-
- <span className='tree-node-name' onClick={() => selectNode(node.name)} data-test-id='validation-tree-node-name'>
- {node.name ? node.name : 'UNKNOWN'}
- </span>
- }
- </div>
- <ErrorsAndWarningsCount errorList={node.errors} onClick={() => selectNode(node.name)} />
- </div>);
+ let { node, path, toggleExpanded, selectedNode, selectNode } = props;
+ let isFolder = node.children && node.children.length > 0;
+ return (
+ <div
+ onDoubleClick={() => toggleExpanded(path)}
+ className={classNames({
+ 'tree-node-row': true,
+ 'tree-node-clicked': node.name === props.selectedNode
+ })}
+ data-test-id="validation-tree-node">
+ <div className="name-section">
+ {isFolder && (
+ <div
+ onClick={() => toggleExpanded(path)}
+ className="tree-node-expander">
+ <SVGIcon
+ name={!node.expanded ? 'chevronUp' : 'chevronDown'}
+ data-test-id="validation-tree-block-toggle"
+ />
+ </div>
+ )}
+ {
+ <span className="tree-node-icon">
+ <SVGIcon
+ name={typeToIcon[node.type]}
+ color={
+ selectedNode === node.name
+ ? 'primary'
+ : 'secondary'
+ }
+ />
+ </span>
+ }
+ {
+ <span
+ className="tree-node-name"
+ onClick={() => selectNode(node.name)}
+ data-test-id="validation-tree-node-name">
+ {node.name ? node.name : 'UNKNOWN'}
+ </span>
+ }
+ </div>
+ <ErrorsAndWarningsCount
+ errorList={node.errors}
+ onClick={() => selectNode(node.name)}
+ />
+ </div>
+ );
}
function HeatFileTreeHeader(props) {
- let hasErrors = props.errorList.filter(error => error.level === errorLevels.ERROR).length > 0;
- return (
- <div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true,
- 'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'>
- <div className='tree-header-title' >
- {/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' />*/}
- <span className={classNames({'tree-header-title-text' : true,
- 'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n('{title} {hasErrors}', {title: props.headerTitle, hasErrors: hasErrors ? '(Draft)' : ''})}</span>
- </div>
- <ErrorsAndWarningsCount errorList={props.errorList} size='large' />
- </div>);
+ let hasErrors =
+ props.errorList.filter(error => error.level === errorLevels.ERROR)
+ .length > 0;
+ return (
+ <div
+ onClick={() => props.selectNode(nodeFilters.ALL)}
+ className={classNames({
+ 'attachments-tree-header': true,
+ 'header-selected': props.selectedNode === nodeFilters.ALL
+ })}
+ data-test-id="validation-tree-header">
+ <div className="tree-header-title">
+ {/*<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' />*/}
+ <span
+ className={classNames({
+ 'tree-header-title-text': true,
+ 'tree-header-title-selected':
+ props.selectedNode === nodeFilters.ALL
+ })}>
+ {i18n('{title} {hasErrors}', {
+ title: props.headerTitle,
+ hasErrors: hasErrors ? '(Draft)' : ''
+ })}
+ </span>
+ </div>
+ <ErrorsAndWarningsCount errorList={props.errorList} size="large" />
+ </div>
+ );
}
-class HeatFileTree extends React.Component {
- static propTypes = {
- attachmentsTree: PropTypes.object.isRequired,
- errorList: PropTypes.array.isRequired,
- onSelectNode: PropTypes.func.isRequired,
- onDeselectNode: PropTypes.func.isRequired,
- toggleExpanded: PropTypes.func.isRequired,
- selectedNode: PropTypes.string
- };
- state = {
- treeWidth: '400'
- };
- render() {
- let {attachmentsTree} = this.props;
- return (
- <div className='validation-tree-section' style={{'width' : this.state.treeWidth + 'px'}}>
- <div className='vsp-attachments-heat-validation-tree'>
- <div className='tree-wrapper'>
- {attachmentsTree && attachmentsTree.children && attachmentsTree.children.map((child, ind) => this.renderNode(child, [ind]))}
- </div>
- </div>
- <div onMouseDown={(e) => this.onChangeTreeWidth(e)}
- className='vsp-attachments-heat-validation-separator' data-test-id='validation-tree-separator'></div>
- </div>);
- }
- renderNode(node, path) {
- let rand = Math.random() * (3000 - 1) + 1;
- let isFolder = node.children && node.children.length > 0;
- let {selectedNode} = this.props;
- return (
- <div key={node.name + rand} className={classNames({'tree-block-inside' : !node.header})}>
- {
- node.header ?
- <HeatFileTreeHeader headerTitle={node.name} selectedNode={selectedNode} errorList={this.props.errorList} selectNode={(nodeName) => this.selectNode(nodeName)} /> :
- <HeatFileTreeRow toggleExpanded={this.props.toggleExpanded} node={node} path={path} selectedNode={selectedNode} selectNode={() => this.selectNode(node.name)} />
- }
- {
- isFolder &&
- <Collapse in={node.expanded}>
- <div className='tree-node-children'>
- {
- node.children.map((child, ind) => this.renderNode(child, [...path, ind]))
- }
- </div>
- </Collapse>
- }
- </div>
- );
- }
-
-
-
-
-
- selectNode(currentSelectedNode) {
- let {onDeselectNode, onSelectNode, selectedNode} = this.props;
- if (currentSelectedNode !== selectedNode) {
- onSelectNode(currentSelectedNode);
- } else {
- onDeselectNode();
- }
-
-
+class HeatFileTree extends React.Component {
+ static propTypes = {
+ attachmentsTree: PropTypes.object.isRequired,
+ errorList: PropTypes.array.isRequired,
+ onSelectNode: PropTypes.func.isRequired,
+ onDeselectNode: PropTypes.func.isRequired,
+ toggleExpanded: PropTypes.func.isRequired,
+ selectedNode: PropTypes.string
+ };
+ state = {
+ treeWidth: '400'
+ };
+ render() {
+ let { attachmentsTree } = this.props;
+ return (
+ <div
+ className="validation-tree-section"
+ style={{ width: this.state.treeWidth + 'px' }}>
+ <div className="vsp-attachments-heat-validation-tree">
+ <div className="tree-wrapper">
+ {attachmentsTree &&
+ attachmentsTree.children &&
+ attachmentsTree.children.map((child, ind) =>
+ this.renderNode(child, [ind])
+ )}
+ </div>
+ </div>
+ <div
+ onMouseDown={e => this.onChangeTreeWidth(e)}
+ className="vsp-attachments-heat-validation-separator"
+ data-test-id="validation-tree-separator"
+ />
+ </div>
+ );
+ }
+ renderNode(node, path) {
+ let rand = Math.random() * (3000 - 1) + 1;
+ let isFolder = node.children && node.children.length > 0;
+ let { selectedNode } = this.props;
+ return (
+ <div
+ key={node.name + rand}
+ className={classNames({ 'tree-block-inside': !node.header })}>
+ {node.header ? (
+ <HeatFileTreeHeader
+ headerTitle={node.name}
+ selectedNode={selectedNode}
+ errorList={this.props.errorList}
+ selectNode={nodeName => this.selectNode(nodeName)}
+ />
+ ) : (
+ <HeatFileTreeRow
+ toggleExpanded={this.props.toggleExpanded}
+ node={node}
+ path={path}
+ selectedNode={selectedNode}
+ selectNode={() => this.selectNode(node.name)}
+ />
+ )}
+ {isFolder && (
+ <Collapse in={node.expanded}>
+ <div className="tree-node-children">
+ {node.children.map((child, ind) =>
+ this.renderNode(child, [...path, ind])
+ )}
+ </div>
+ </Collapse>
+ )}
+ </div>
+ );
+ }
- }
+ selectNode(currentSelectedNode) {
+ let { onDeselectNode, onSelectNode, selectedNode } = this.props;
+ if (currentSelectedNode !== selectedNode) {
+ onSelectNode(currentSelectedNode);
+ } else {
+ onDeselectNode();
+ }
+ }
- onChangeTreeWidth(e) {
- if (e.button === mouseActions.MOUSE_BUTTON_CLICK) {
- let onMouseMove = (e) => {
- this.setState({treeWidth: e.clientX - leftPanelWidth});
- };
- let onMouseUp = () => {
- document.removeEventListener('mousemove', onMouseMove);
- document.removeEventListener('mouseup', onMouseUp);
- };
- document.addEventListener('mousemove', onMouseMove);
- document.addEventListener('mouseup', onMouseUp);
- }
- }
+ onChangeTreeWidth(e) {
+ if (e.button === mouseActions.MOUSE_BUTTON_CLICK) {
+ let onMouseMove = e => {
+ this.setState({ treeWidth: e.clientX - leftPanelWidth });
+ };
+ let onMouseUp = () => {
+ document.removeEventListener('mousemove', onMouseMove);
+ document.removeEventListener('mouseup', onMouseUp);
+ };
+ document.addEventListener('mousemove', onMouseMove);
+ document.addEventListener('mouseup', onMouseUp);
+ }
+ }
}
class HeatMessageBoard extends Component {
- static propTypes = {
- currentErrors: PropTypes.array,
- currentWarnings: PropTypes.array,
- selectedNode: PropTypes.string
- };
- render() {
- let {errors, warnings} = this.props;
- let allItems = [...errors, ...warnings];
- return (
- <div className='message-board-section'>
- { allItems.map(error => this.renderError(error)) }
- </div>
- );
- }
- renderError(error) {
- let rand = Math.random() * (3000 - 1) + 1;
- return (
- <div
- key={error.name + error.errorMessage + error.parentName + rand}
- className='error-item' data-test-id='validation-error'>
- {error.level === errorLevels.WARNING ?
- <SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon name='error' iconClassName='large' color='negative' /> }
- <span className='error-item-file-type'>
- {
- (this.props.selectedNode === nodeFilters.ALL) ?
- <span>
- <span className='error-file-name'>
- {error.name}
- </span>
- <span>
- {error.errorMessage}
- </span>
- </span> :
- error.errorMessage
- }
- </span>
- </div>
- );
- }
+ static propTypes = {
+ currentErrors: PropTypes.array,
+ currentWarnings: PropTypes.array,
+ selectedNode: PropTypes.string
+ };
+ render() {
+ let { errors, warnings } = this.props;
+ let allItems = [...errors, ...warnings];
+ return (
+ <div className="message-board-section">
+ {allItems.map(error => this.renderError(error))}
+ </div>
+ );
+ }
+ renderError(error) {
+ let rand = Math.random() * (3000 - 1) + 1;
+ return (
+ <div
+ key={error.name + error.errorMessage + error.parentName + rand}
+ className="error-item"
+ data-test-id="validation-error">
+ {error.level === errorLevels.WARNING ? (
+ <SVGIcon
+ name="exclamationTriangleLine"
+ iconClassName="large"
+ color="warning"
+ />
+ ) : (
+ <SVGIcon
+ name="error"
+ iconClassName="large"
+ color="negative"
+ />
+ )}
+ <span className="error-item-file-type">
+ {this.props.selectedNode === nodeFilters.ALL ? (
+ <span>
+ <span className="error-file-name">
+ {error.name}
+ </span>
+ <span>{error.errorMessage}</span>
+ </span>
+ ) : (
+ error.errorMessage
+ )}
+ </span>
+ </div>
+ );
+ }
}
class ErrorsAndWarningsCount extends Component {
- static propTypes = {
- errorList: PropTypes.array,
- size: PropTypes.string
- };
- render() {
- let errors = this.getErrorsAndWarningsCount(this.props.errorList);
- if (!errors) {
- return null;
- }
- let {size} = this.props;
- return (<div className='counters'>
- {(errors.errorCount > 0) && <div className='counter'>
- <SVGIcon name='error' color='negative' iconClassName={size}/>
- <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div>
- </div>}
- {(errors.warningCount > 0) && <div className='counter'>
- <SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/>
- <div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div>
- </div>}
- </div>);
- }
- getErrorsAndWarningsCount(errorList) {
- let errorCount = 0, warningCount = 0;
- if (errorList && errorList.length > 0) {
- for (let i = 0; i < errorList.length; i++) {
- if (errorList[i].level === errorLevels.ERROR) {
- errorCount++;
- } else if (errorList[i].level === errorLevels.WARNING) {
- warningCount++;
- }
- }
- }
- if (errorCount === 0 && warningCount === 0) {
- return null;
- }
- return {errorCount, warningCount};
- }
+ static propTypes = {
+ errorList: PropTypes.array,
+ size: PropTypes.string
+ };
+ render() {
+ let errors = this.getErrorsAndWarningsCount(this.props.errorList);
+ if (!errors) {
+ return null;
+ }
+ let { size } = this.props;
+ return (
+ <div className="counters">
+ {errors.errorCount > 0 && (
+ <div className="counter">
+ <SVGIcon
+ name="error"
+ color="negative"
+ iconClassName={size}
+ />
+ <div
+ className={'error-text ' + (size ? size : '')}
+ data-test-id="validation-error-count">
+ {errors.errorCount}
+ </div>
+ </div>
+ )}
+ {errors.warningCount > 0 && (
+ <div className="counter">
+ <SVGIcon
+ name="exclamationTriangleLine"
+ iconClassName={size}
+ color="warning"
+ />
+ <div
+ className={'warning-text ' + (size ? size : '')}
+ data-test-id="validation-warning-count">
+ {errors.warningCount}
+ </div>
+ </div>
+ )}
+ </div>
+ );
+ }
+ getErrorsAndWarningsCount(errorList) {
+ let errorCount = 0,
+ warningCount = 0;
+ if (errorList && errorList.length > 0) {
+ for (let i = 0; i < errorList.length; i++) {
+ if (errorList[i].level === errorLevels.ERROR) {
+ errorCount++;
+ } else if (errorList[i].level === errorLevels.WARNING) {
+ warningCount++;
+ }
+ }
+ }
+ if (errorCount === 0 && warningCount === 0) {
+ return null;
+ }
+ return { errorCount, warningCount };
+ }
}
export default HeatValidationView;
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
index 569b33f999..41584d94e2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
@@ -13,64 +13,96 @@
* 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 SoftwareProductCreationActionHelper from './SoftwareProductCreationActionHelper.js';
import SoftwareProductCreationView from './SoftwareProductCreationView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import SoftwareProductActionHelper from '../SoftwareProductActionHelper.js';
+import SoftwareProductActionHelper from '../SoftwareProductActionHelper.js';
import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {itemTypes as versionItemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { itemTypes as versionItemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
-export const mapStateToProps = ({finalizedLicenseModelList, users: {usersList}, archivedSoftwareProductList,
- softwareProductList, finalizedSoftwareProductList, softwareProduct: {softwareProductCreation, softwareProductCategories} }) => {
- let {genericFieldInfo} = softwareProductCreation;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({
+ finalizedLicenseModelList,
+ users: { usersList },
+ archivedSoftwareProductList,
+ softwareProductList,
+ finalizedSoftwareProductList,
+ softwareProduct: { softwareProductCreation, softwareProductCategories }
+}) => {
+ let { genericFieldInfo } = softwareProductCreation;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let VSPNames = {};
- const allVspList = [...softwareProductList, ...finalizedSoftwareProductList, ...archivedSoftwareProductList];
- allVspList.map(item => {
- VSPNames[item.name.toLowerCase()] = item.id;
- });
-
+ let VSPNames = {};
+ const allVspList = [
+ ...softwareProductList,
+ ...finalizedSoftwareProductList,
+ ...archivedSoftwareProductList
+ ];
+ allVspList.map(item => {
+ VSPNames[item.name.toLowerCase()] = item.id;
+ });
- return {
- data: softwareProductCreation.data,
- selectedVendorId: softwareProductCreation.selectedVendorId,
- disableVendor: softwareProductCreation.disableVendor,
- softwareProductCategories,
- finalizedLicenseModelList,
- isFormValid,
- formReady: softwareProductCreation.formReady,
- genericFieldInfo,
- VSPNames,
- usersList
- };
+ return {
+ data: softwareProductCreation.data,
+ selectedVendorId: softwareProductCreation.selectedVendorId,
+ disableVendor: softwareProductCreation.disableVendor,
+ softwareProductCategories,
+ finalizedLicenseModelList,
+ isFormValid,
+ formReady: softwareProductCreation.formReady,
+ genericFieldInfo,
+ VSPNames,
+ usersList
+ };
};
-export const mapActionsToProps = (dispatch) => {
- return {
- onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
- onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
- onSubmit: (softwareProduct, usersList) => {
- SoftwareProductCreationActionHelper.resetData(dispatch);
- SoftwareProductCreationActionHelper.createSoftwareProduct(dispatch, {softwareProduct}).then(response => {
- let {itemId, version} = response;
- SoftwareProductActionHelper.fetchSoftwareProductList(dispatch).then(() =>
- PermissionsActionHelper.fetchItemUsers(dispatch, {itemId, allUsers: usersList}).then(() =>
- VersionsPageActionHelper.fetchVersions(dispatch, {itemType: versionItemTypes.SOFTWARE_PRODUCT, itemId}).then(() =>
- ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId: itemId, version}})
- )
- )
- );
- });
- },
- onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
- };
+export const mapActionsToProps = dispatch => {
+ return {
+ onDataChanged: (deltaData, formName, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName,
+ customValidations
+ }),
+ onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
+ onSubmit: (softwareProduct, usersList) => {
+ SoftwareProductCreationActionHelper.resetData(dispatch);
+ SoftwareProductCreationActionHelper.createSoftwareProduct(
+ dispatch,
+ { softwareProduct }
+ ).then(response => {
+ let { itemId, version } = response;
+ SoftwareProductActionHelper.fetchSoftwareProductList(
+ dispatch
+ ).then(() =>
+ PermissionsActionHelper.fetchItemUsers(dispatch, {
+ itemId,
+ allUsers: usersList
+ }).then(() =>
+ VersionsPageActionHelper.fetchVersions(dispatch, {
+ itemType: versionItemTypes.SOFTWARE_PRODUCT,
+ itemId
+ }).then(() =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen:
+ enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId: itemId, version }
+ })
+ )
+ )
+ );
+ });
+ },
+ onValidateForm: formName =>
+ ValidationHelper.validateForm(dispatch, formName)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductCreationView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductCreationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
index b19e460497..1b1fd71fef 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationActionHelper.js
@@ -17,68 +17,68 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-import {actionTypes as modalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes} from './SoftwareProductCreationConstants.js';
+import {
+ actionTypes as modalActionTypes,
+ modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductCreationConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/`;
}
function createSoftwareProduct(softwareProduct) {
- return RestAPIUtil.post(baseUrl(), {
- ...softwareProduct,
- icon: 'icon',
- licensingData: {}
- });
+ return RestAPIUtil.post(baseUrl(), {
+ ...softwareProduct,
+ icon: 'icon',
+ licensingData: {}
+ });
}
const SoftwareProductCreationActionHelper = {
+ open(dispatch, vendorId) {
+ SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
+ dispatch({
+ type: actionTypes.OPEN,
+ selectedVendorId: vendorId
+ });
- open(dispatch, vendorId) {
- SoftwareProductActionHelper.loadSoftwareProductAssociatedData(dispatch);
- dispatch({
- type: actionTypes.OPEN,
- selectedVendorId: vendorId
- });
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName:
+ modalContentMapper.SOFTWARE_PRODUCT_CREATION,
+ title: i18n('New Software Product'),
+ modalComponentProps: {
+ vendorId,
+ size: modalSizes.LARGE
+ }
+ }
+ });
+ },
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_CREATION,
- title: i18n('New Software Product'),
- modalComponentProps: {
- vendorId,
- size: modalSizes.LARGE
- }
- }
- });
+ resetData(dispatch) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
- },
-
- resetData(dispatch) {
-
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
-
- dispatch({
- type: actionTypes.RESET_DATA
- });
- },
-
- createSoftwareProduct(dispatch, {softwareProduct}) {
- return createSoftwareProduct(softwareProduct).then(result => {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_CREATED,
- result
- });
- return result;
- });
- }
+ dispatch({
+ type: actionTypes.RESET_DATA
+ });
+ },
+ createSoftwareProduct(dispatch, { softwareProduct }) {
+ return createSoftwareProduct(softwareProduct).then(result => {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_CREATED,
+ result
+ });
+ return result;
+ });
+ }
};
export default SoftwareProductCreationActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
index b941c849cb..ad1034602a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationConstants.js
@@ -16,9 +16,9 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- OPEN: null,
- RESET_DATA: null,
- SOFTWARE_PRODUCT_CREATED: null
+ OPEN: null,
+ RESET_DATA: null,
+ SOFTWARE_PRODUCT_CREATED: null
});
export const SP_CREATION_FORM_NAME = 'SPCREATIONFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
index a7db2b2357..5f70f18f75 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
@@ -13,56 +13,70 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
-
+import {
+ actionTypes,
+ SP_CREATION_FORM_NAME
+} from './SoftwareProductCreationConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.OPEN:
- return {
- ...state,
- formName: SP_CREATION_FORM_NAME,
- disableVendor: action.selectedVendorId ? true : false,
- data: {
- vendorId: action.selectedVendorId ? action.selectedVendorId : undefined
- },
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'freeEnglishText', data: true}, {type: 'maxLength', data: 1000}, {type: 'required', data: true}]
- },
- 'vendorId' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- 'subCategory' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- 'category' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}, {type: 'validateName', data: true}]
- },
- 'onboardingMethod' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'requiredChooseOption', data: true}]
- }
- },
- showModal: true
- };
- case actionTypes.RESET_DATA:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.OPEN:
+ return {
+ ...state,
+ formName: SP_CREATION_FORM_NAME,
+ disableVendor: action.selectedVendorId ? true : false,
+ data: {
+ vendorId: action.selectedVendorId
+ ? action.selectedVendorId
+ : undefined
+ },
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'freeEnglishText', data: true },
+ { type: 'maxLength', data: 1000 },
+ { type: 'required', data: true }
+ ]
+ },
+ vendorId: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ subCategory: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ category: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 25 },
+ { type: 'validateName', data: true }
+ ]
+ },
+ onboardingMethod: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'requiredChooseOption', data: true }
+ ]
+ }
+ },
+ showModal: true
+ };
+ case actionTypes.RESET_DATA:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
index e491491f4d..e94087cc80 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
@@ -22,194 +22,308 @@ 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';
-import {SP_CREATION_FORM_NAME} from './SoftwareProductCreationConstants.js';
+import { SP_CREATION_FORM_NAME } from './SoftwareProductCreationConstants.js';
import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
-import {onboardingMethod as onboardingMethodConst} from '../SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodConst } from '../SoftwareProductConstants.js';
const SoftwareProductPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- category: PropTypes.string,
- subCategory: PropTypes.string,
- vendorId: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ category: PropTypes.string,
+ subCategory: PropTypes.string,
+ vendorId: PropTypes.string
});
class SoftwareProductCreationView extends React.Component {
+ static propTypes = {
+ data: SoftwareProductPropType,
+ finalizedLicenseModelList: PropTypes.array,
+ softwareProductCategories: PropTypes.array,
+ VSPNames: PropTypes.object,
+ usersList: PropTypes.array,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
- static propTypes = {
- data: SoftwareProductPropType,
- finalizedLicenseModelList: PropTypes.array,
- softwareProductCategories: PropTypes.array,
- VSPNames: PropTypes.object,
- usersList: PropTypes.array,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
-
- render() {
- let {softwareProductCategories, data = {}, onDataChanged, onCancel, genericFieldInfo, disableVendor} = this.props;
- let {name, description, vendorId, subCategory, onboardingMethod} = data;
-
- const vendorList = this.getVendorList();
- return (
- <div className='software-product-creation-page'>
- { genericFieldInfo && <Form
- ref={(validationForm) => this.validationForm = validationForm}
- hasButtons={true}
- onSubmit={() => this.submit() }
- onReset={() => onCancel() }
- labledButtons={true}
- isValid={this.props.isFormValid}
- submitButtonText={i18n('Create')}
- formReady={this.props.formReady}
- onValidateForm={() => this.validate() }>
- <GridSection hasLastColSet>
- <GridItem colSpan='2'>
- <Input
- value={name}
- label={i18n('Name')}
- isRequired={true}
- onChange={name => onDataChanged({name},SP_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText}
- type='text'
- className='field-section'
- data-test-id='new-vsp-name' />
- <Input
- label={i18n('Vendor')}
- type='select'
- value={vendorId}
- overlayPos='bottom'
- isRequired={true}
- disabled={disableVendor}
- onChange={e => this.onSelectVendor(e)}
- isValid={genericFieldInfo.vendorId.isValid}
- errorText={genericFieldInfo.vendorId.errorText}
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- data-test-id='new-vsp-vendor' >
- {vendorList.map(vendor =>
- <option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
- </Input>
- <Input
- label={i18n('Category')}
- type='select'
- value={subCategory}
- isRequired={true}
- onChange={e => this.onSelectSubCategory(e)}
- isValid={genericFieldInfo.subCategory.isValid}
- errorText={genericFieldInfo.subCategory.errorText}
- className='input-options-select'
- groupClassName='bootstrap-input-options'
- data-test-id='new-vsp-category' >
- <option key='' value=''>{i18n('please select…')}</option>
- {softwareProductCategories.map(category =>
- category.subcategories &&
- <optgroup
- key={category.name}
- label={category.name}>{category.subcategories.map(sub =>
- <option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
- </optgroup>)
- }
- </Input>
- </GridItem>
- <GridItem colSpan='2' stretch lastColInRow>
- <Input
- value={description}
- label={i18n('Description')}
- isRequired={true}
- overlayPos='bottom'
- onChange={description => onDataChanged({description},SP_CREATION_FORM_NAME)}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- type='textarea'
- className='field-section'
- data-test-id='new-vsp-description'/>
- </GridItem>
- </GridSection>
- <OnboardingProcedure genericFieldInfo={genericFieldInfo} onboardingMethod={onboardingMethod} onDataChanged={onDataChanged} />
- </Form>}
- </div>
- );
- }
-
- getVendorList() {
- let {finalizedLicenseModelList} = this.props;
-
- return [{enum: '', title: i18n('please select...')}].concat(
- sortByStringProperty(finalizedLicenseModelList, 'name').map(vendor => {
- return {
- enum: vendor.id,
- title: vendor.name
- };
- })
- );
- }
-
- onSelectVendor(e) {
- const selectedIndex = e.target.selectedIndex;
- const vendorId = e.target.options[selectedIndex].value;
- this.props.onDataChanged({vendorId},SP_CREATION_FORM_NAME);
- }
-
- onSelectSubCategory(e) {
- const selectedIndex = e.target.selectedIndex;
- const subCategory = e.target.options[selectedIndex].value;
- let {softwareProductCategories, onDataChanged} = this.props;
- let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
- onDataChanged({category, subCategory},SP_CREATION_FORM_NAME);
- }
-
- submit() {
- let {data:softwareProduct, finalizedLicenseModelList, usersList} = this.props;
- softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name;
- this.props.onSubmit(softwareProduct, usersList);
- }
-
- validateName(value) {
- const {data: {id}, VSPNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
-
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
- }
-
- validate() {
- this.props.onValidateForm(SP_CREATION_FORM_NAME);
- }
+ render() {
+ let {
+ softwareProductCategories,
+ data = {},
+ onDataChanged,
+ onCancel,
+ genericFieldInfo,
+ disableVendor
+ } = this.props;
+ let {
+ name,
+ description,
+ vendorId,
+ subCategory,
+ onboardingMethod
+ } = data;
+
+ const vendorList = this.getVendorList();
+ return (
+ <div className="software-product-creation-page">
+ {genericFieldInfo && (
+ <Form
+ ref={validationForm =>
+ (this.validationForm = validationForm)
+ }
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ labledButtons={true}
+ isValid={this.props.isFormValid}
+ submitButtonText={i18n('Create')}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.validate()}>
+ <GridSection hasLastColSet>
+ <GridItem colSpan="2">
+ <Input
+ value={name}
+ label={i18n('Name')}
+ isRequired={true}
+ onChange={name =>
+ onDataChanged(
+ { name },
+ SP_CREATION_FORM_NAME,
+ {
+ name: name =>
+ this.validateName(name)
+ }
+ )
+ }
+ isValid={genericFieldInfo.name.isValid}
+ errorText={genericFieldInfo.name.errorText}
+ type="text"
+ className="field-section"
+ data-test-id="new-vsp-name"
+ />
+ <Input
+ label={i18n('Vendor')}
+ type="select"
+ value={vendorId}
+ overlayPos="bottom"
+ isRequired={true}
+ disabled={disableVendor}
+ onChange={e => this.onSelectVendor(e)}
+ isValid={genericFieldInfo.vendorId.isValid}
+ errorText={
+ genericFieldInfo.vendorId.errorText
+ }
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ data-test-id="new-vsp-vendor">
+ {vendorList.map(vendor => (
+ <option
+ key={vendor.title}
+ value={vendor.enum}>
+ {vendor.title}
+ </option>
+ ))}
+ </Input>
+ <Input
+ label={i18n('Category')}
+ type="select"
+ value={subCategory}
+ isRequired={true}
+ onChange={e => this.onSelectSubCategory(e)}
+ isValid={
+ genericFieldInfo.subCategory.isValid
+ }
+ errorText={
+ genericFieldInfo.subCategory.errorText
+ }
+ className="input-options-select"
+ groupClassName="bootstrap-input-options"
+ data-test-id="new-vsp-category">
+ <option key="" value="">
+ {i18n('please select…')}
+ </option>
+ {softwareProductCategories.map(
+ category =>
+ category.subcategories && (
+ <optgroup
+ key={category.name}
+ label={category.name}>
+ {category.subcategories.map(
+ sub => (
+ <option
+ key={
+ sub.uniqueId
+ }
+ value={
+ sub.uniqueId
+ }>{`${
+ sub.name
+ } (${
+ category.name
+ })`}</option>
+ )
+ )}
+ </optgroup>
+ )
+ )}
+ </Input>
+ </GridItem>
+ <GridItem colSpan="2" stretch lastColInRow>
+ <Input
+ value={description}
+ label={i18n('Description')}
+ isRequired={true}
+ overlayPos="bottom"
+ onChange={description =>
+ onDataChanged(
+ { description },
+ SP_CREATION_FORM_NAME
+ )
+ }
+ isValid={
+ genericFieldInfo.description.isValid
+ }
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ type="textarea"
+ className="field-section"
+ data-test-id="new-vsp-description"
+ />
+ </GridItem>
+ </GridSection>
+ <OnboardingProcedure
+ genericFieldInfo={genericFieldInfo}
+ onboardingMethod={onboardingMethod}
+ onDataChanged={onDataChanged}
+ />
+ </Form>
+ )}
+ </div>
+ );
+ }
+
+ getVendorList() {
+ let { finalizedLicenseModelList } = this.props;
+
+ return [{ enum: '', title: i18n('please select...') }].concat(
+ sortByStringProperty(finalizedLicenseModelList, 'name').map(
+ vendor => {
+ return {
+ enum: vendor.id,
+ title: vendor.name
+ };
+ }
+ )
+ );
+ }
+
+ onSelectVendor(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const vendorId = e.target.options[selectedIndex].value;
+ this.props.onDataChanged({ vendorId }, SP_CREATION_FORM_NAME);
+ }
+
+ onSelectSubCategory(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const subCategory = e.target.options[selectedIndex].value;
+ let { softwareProductCategories, onDataChanged } = this.props;
+ let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(
+ subCategory,
+ softwareProductCategories
+ );
+ onDataChanged({ category, subCategory }, SP_CREATION_FORM_NAME);
+ }
+
+ submit() {
+ let {
+ data: softwareProduct,
+ finalizedLicenseModelList,
+ usersList
+ } = this.props;
+ softwareProduct.vendorName = finalizedLicenseModelList.find(
+ vendor => vendor.id === softwareProduct.vendorId
+ ).name;
+ this.props.onSubmit(softwareProduct, usersList);
+ }
+
+ validateName(value) {
+ const { data: { id }, VSPNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: VSPNames
+ });
+
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Software product by the name '" +
+ value +
+ "' already exists. Software product name must be unique"
+ )
+ };
+ }
+
+ validate() {
+ this.props.onValidateForm(SP_CREATION_FORM_NAME);
+ }
}
-const OnboardingProcedure = ({onboardingMethod, onDataChanged, genericFieldInfo}) => {
- return(
- <GridSection title={i18n('Onboarding procedure')}>
- <GridItem colSpan={4}>
- <Input
- label={i18n('Network Package')}
- overlayPos='top'
- isValid={genericFieldInfo.onboardingMethod.isValid}
- checked={onboardingMethod === onboardingMethodConst.NETWORK_PACKAGE}
- errorText={genericFieldInfo.onboardingMethod.errorText}
- onChange={() => onDataChanged({onboardingMethod: onboardingMethodConst.NETWORK_PACKAGE},SP_CREATION_FORM_NAME)}
- type='radio'
- data-test-id='new-vsp-creation-procedure-heat' />
- </GridItem>
- <GridItem colSpan={4}>
- <Input
- label={i18n('Manual')}
- overlayPos='bottom'
- checked={onboardingMethod === onboardingMethodConst.MANUAL}
- isValid={genericFieldInfo.onboardingMethod.isValid}
- errorText={genericFieldInfo.onboardingMethod.errorText}
- onChange={() => onDataChanged({onboardingMethod: onboardingMethodConst.MANUAL},SP_CREATION_FORM_NAME)}
- type='radio'
- data-test-id='new-vsp-creation-procedure-manual' />
- </GridItem>
- </GridSection>
- );
+const OnboardingProcedure = ({
+ onboardingMethod,
+ onDataChanged,
+ genericFieldInfo
+}) => {
+ return (
+ <GridSection title={i18n('Onboarding procedure')}>
+ <GridItem colSpan={4}>
+ <Input
+ label={i18n('Network Package')}
+ overlayPos="top"
+ isValid={genericFieldInfo.onboardingMethod.isValid}
+ checked={
+ onboardingMethod ===
+ onboardingMethodConst.NETWORK_PACKAGE
+ }
+ errorText={genericFieldInfo.onboardingMethod.errorText}
+ onChange={() =>
+ onDataChanged(
+ {
+ onboardingMethod:
+ onboardingMethodConst.NETWORK_PACKAGE
+ },
+ SP_CREATION_FORM_NAME
+ )
+ }
+ type="radio"
+ data-test-id="new-vsp-creation-procedure-heat"
+ />
+ </GridItem>
+ <GridItem colSpan={4}>
+ <Input
+ label={i18n('Manual')}
+ overlayPos="bottom"
+ checked={onboardingMethod === onboardingMethodConst.MANUAL}
+ isValid={genericFieldInfo.onboardingMethod.isValid}
+ errorText={genericFieldInfo.onboardingMethod.errorText}
+ onChange={() =>
+ onDataChanged(
+ { onboardingMethod: onboardingMethodConst.MANUAL },
+ SP_CREATION_FORM_NAME
+ )
+ }
+ type="radio"
+ data-test-id="new-vsp-creation-procedure-manual"
+ />
+ </GridItem>
+ </GridSection>
+ );
};
export default SoftwareProductCreationView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
index 9888087800..1a0c66d70e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
@@ -13,25 +13,48 @@
* 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 SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx';
import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
- return {
- softwareProductDependencies: softwareProductDependencies,
- componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName}))
- };
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductDependencies,
+ softwareProductComponents: { componentsList }
+ } = softwareProduct;
+ return {
+ softwareProductDependencies: softwareProductDependencies,
+ componentsOptions: componentsList.map(component => ({
+ value: component.id,
+ label: component.displayName
+ }))
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}),
- onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}),
- onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item})
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDataChanged: item =>
+ SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {
+ softwareProductId,
+ version,
+ item
+ }),
+ onDeleteDependency: item =>
+ SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {
+ softwareProductId,
+ version,
+ item
+ }),
+ onAddDependency: item =>
+ SoftwareProductDependenciesActionHelper.createDependency(dispatch, {
+ softwareProductId,
+ version,
+ item
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductDependenciesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductDependenciesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
index f04f8faf56..4bbcaa13d5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
@@ -15,83 +15,99 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+import {
+ actionTypes,
+ NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
function baseUrl(softwareProductId, version) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
}
function fetchDependencies(softwareProductId, version) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
function addDepencency(softwareProductId, version, item) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
- sourceId: item.sourceId,
- targetId: item.targetId,
- relationType: item.relationType
- });
+ return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+ sourceId: item.sourceId,
+ targetId: item.targetId,
+ relationType: item.relationType
+ });
}
-
function updateDepencency(softwareProductId, version, item) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`,
- {
- sourceId: item.sourceId,
- targetId: item.targetId,
- relationType: item.relationType
- });
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version)}/${item.id}`,
+ {
+ sourceId: item.sourceId,
+ targetId: item.targetId,
+ relationType: item.relationType
+ }
+ );
}
function removeDependency(softwareProductId, version, item) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version)}/${item.id}`
+ );
}
-
const SoftwareProductDependenciesActionHelper = {
- updateDependency(dispatch, {softwareProductId, version, item}) {
- // if change was made on existing item - we will update the server and refresh the list
- // if change was made on the 'new' row - we will only fire the event
- if (item.id !== NEW_RULE_TEMP_ID) {
- return updateDepencency(softwareProductId, version, item).then(() => {
- return this.fetchDependencies(dispatch, {softwareProductId, version});
- });
- } else {
- dispatch({
- type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
- item: item
- });
- }
- },
+ updateDependency(dispatch, { softwareProductId, version, item }) {
+ // if change was made on existing item - we will update the server and refresh the list
+ // if change was made on the 'new' row - we will only fire the event
+ if (item.id !== NEW_RULE_TEMP_ID) {
+ return updateDepencency(softwareProductId, version, item).then(
+ () => {
+ return this.fetchDependencies(dispatch, {
+ softwareProductId,
+ version
+ });
+ }
+ );
+ } else {
+ dispatch({
+ type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
+ item: item
+ });
+ }
+ },
- createDependency(dispatch, {softwareProductId, version, item}) {
- // removing the temp id
- delete item.id;
- // creating the new dependency
- return addDepencency(softwareProductId, version, item).then(() => {
- dispatch({
- type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
- });
- return this.fetchDependencies(dispatch, {softwareProductId, version});
- });
- },
+ createDependency(dispatch, { softwareProductId, version, item }) {
+ // removing the temp id
+ delete item.id;
+ // creating the new dependency
+ return addDepencency(softwareProductId, version, item).then(() => {
+ dispatch({
+ type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
+ });
+ return this.fetchDependencies(dispatch, {
+ softwareProductId,
+ version
+ });
+ });
+ },
- removeDependency(dispatch, {softwareProductId, version, item}) {
- return removeDependency(softwareProductId, version, item).then( () => {
- return this.fetchDependencies(dispatch, {softwareProductId, version});
- });
- },
+ removeDependency(dispatch, { softwareProductId, version, item }) {
+ return removeDependency(softwareProductId, version, item).then(() => {
+ return this.fetchDependencies(dispatch, {
+ softwareProductId,
+ version
+ });
+ });
+ },
- fetchDependencies(dispatch, {softwareProductId, version}) {
- return fetchDependencies(softwareProductId, version).then( response => {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
- dependenciesList : response.results
- });
- });
- }
+ fetchDependencies(dispatch, { softwareProductId, version }) {
+ return fetchDependencies(softwareProductId, version).then(response => {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
+ dependenciesList: response.results
+ });
+ });
+ }
};
export default SoftwareProductDependenciesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
index c25561da17..32c7387ca2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
@@ -16,17 +16,17 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
- ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
- UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
+ SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
+ ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
+ UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
});
export const relationTypes = {
- DEPENDS_ON: 'dependsOn'
+ DEPENDS_ON: 'dependsOn'
};
export const relationTypesOptions = [
- {value: relationTypes.DEPENDS_ON, label: 'Depends On'}
+ { value: relationTypes.DEPENDS_ON, label: 'Depends On' }
];
-export const NEW_RULE_TEMP_ID = 'newRuleTempId'; \ No newline at end of file
+export const NEW_RULE_TEMP_ID = 'newRuleTempId';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
index 3edd3b899a..6e028b1ff2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
@@ -1,4 +1,3 @@
-
/*!
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
*
@@ -15,32 +14,47 @@
* permissions and limitations under the License.
*/
-import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
-import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js';
+import {
+ actionTypes,
+ relationTypes,
+ NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
+import { checkCyclesAndMarkDependencies } from './SoftwareProductDependenciesUtils.js';
-let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON};
+let newRowObject = {
+ id: NEW_RULE_TEMP_ID,
+ targetId: null,
+ sourceId: null,
+ relationType: relationTypes.DEPENDS_ON
+};
-export default (state = [Object.assign({}, newRowObject) ], action) => {
- switch (action.type) {
- case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
- // copying the entity with the data for the row that is in the 'add' mode
- let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
- action.dependenciesList.push(newDependency);
- // returning list from the server with our 'new entity' row
- return checkCyclesAndMarkDependencies(action.dependenciesList);
- case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY :
- // resetting the entity with the data for the 'add' mode for a new entity
- let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
- newArray.push(Object.assign({}, newRowObject));
- return newArray;
- case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY :
- // we really only need this for the 'new' row since we need to change the state to get
- // everything updated
- let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID);
- let updateArray = state.slice();
- updateArray.splice(updateArrayIndex, 1, action.item);
- return checkCyclesAndMarkDependencies(updateArray);
- default:
- return state;
- }
+export default (state = [Object.assign({}, newRowObject)], action) => {
+ switch (action.type) {
+ case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
+ // copying the entity with the data for the row that is in the 'add' mode
+ let newDependency = state.find(
+ dependency => dependency.id === NEW_RULE_TEMP_ID
+ );
+ action.dependenciesList.push(newDependency);
+ // returning list from the server with our 'new entity' row
+ return checkCyclesAndMarkDependencies(action.dependenciesList);
+ case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY:
+ // resetting the entity with the data for the 'add' mode for a new entity
+ let newArray = state.filter(
+ dependency => dependency.id !== NEW_RULE_TEMP_ID
+ );
+ newArray.push(Object.assign({}, newRowObject));
+ return newArray;
+ case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY:
+ // we really only need this for the 'new' row since we need to change the state to get
+ // everything updated
+ let updateArrayIndex = state.findIndex(
+ dependency => dependency.id === NEW_RULE_TEMP_ID
+ );
+ let updateArray = state.slice();
+ updateArray.splice(updateArrayIndex, 1, action.item);
+ return checkCyclesAndMarkDependencies(updateArray);
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
index 94d21bd49d..8d5aaf864e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesUtils.js
@@ -16,49 +16,77 @@
import DirectedGraph from 'nfvo-utils/DirectedGraph.js';
-function findCycles(graph, node, id, visited = {}, visitedConnections = {}, recursionStack = {}, connectionsWithCycle = {}) {
- visited[node] = true;
- recursionStack[node] = true;
- if (id) {
- visitedConnections[id] = true;
- }
- for (let edge of graph.getEdges(node)) {
- if (!visited[edge.target]) {
- findCycles(graph, edge.target, edge.id, visited, visitedConnections, recursionStack, connectionsWithCycle);
- } else if (recursionStack[edge.target]) {
- visitedConnections[edge.id] = true;
- for (let connection in visitedConnections) {
- connectionsWithCycle[connection] = true;
- }
- }
- }
- recursionStack[node] = false;
- return {visitedNodes: visited, connectionsWithCycle: connectionsWithCycle};
+function findCycles(
+ graph,
+ node,
+ id,
+ visited = {},
+ visitedConnections = {},
+ recursionStack = {},
+ connectionsWithCycle = {}
+) {
+ visited[node] = true;
+ recursionStack[node] = true;
+ if (id) {
+ visitedConnections[id] = true;
+ }
+ for (let edge of graph.getEdges(node)) {
+ if (!visited[edge.target]) {
+ findCycles(
+ graph,
+ edge.target,
+ edge.id,
+ visited,
+ visitedConnections,
+ recursionStack,
+ connectionsWithCycle
+ );
+ } else if (recursionStack[edge.target]) {
+ visitedConnections[edge.id] = true;
+ for (let connection in visitedConnections) {
+ connectionsWithCycle[connection] = true;
+ }
+ }
+ }
+ recursionStack[node] = false;
+ return {
+ visitedNodes: visited,
+ connectionsWithCycle: connectionsWithCycle
+ };
}
export function checkCyclesAndMarkDependencies(dependenciesList) {
- let overallVisitedNodes = {};
- let overallConnectionsWithCycles = {};
+ let overallVisitedNodes = {};
+ let overallConnectionsWithCycles = {};
- let g = new DirectedGraph();
- for (let dependency of dependenciesList) {
- if (dependency.sourceId !== null && dependency.targetId !== null) {
- g.addEdge(dependency.sourceId, dependency.targetId, {id: dependency.id});
- }
- }
+ let g = new DirectedGraph();
+ for (let dependency of dependenciesList) {
+ if (dependency.sourceId !== null && dependency.targetId !== null) {
+ g.addEdge(dependency.sourceId, dependency.targetId, {
+ id: dependency.id
+ });
+ }
+ }
- for (let node in g.nodes) {
- if (!overallVisitedNodes.node) {
- let {visitedNodes, connectionsWithCycle} = findCycles(g, node, undefined);
- overallVisitedNodes = {...overallVisitedNodes, ...visitedNodes};
- overallConnectionsWithCycles = {...overallConnectionsWithCycles, ...connectionsWithCycle};
- }
- }
- return dependenciesList.map(dependency => (
- {
- ...dependency,
- hasCycle: dependency.sourceId && dependency.targetId ?
- overallConnectionsWithCycles.hasOwnProperty(dependency.id)
- : undefined
- }));
+ for (let node in g.nodes) {
+ if (!overallVisitedNodes.node) {
+ let { visitedNodes, connectionsWithCycle } = findCycles(
+ g,
+ node,
+ undefined
+ );
+ overallVisitedNodes = { ...overallVisitedNodes, ...visitedNodes };
+ overallConnectionsWithCycles = {
+ ...overallConnectionsWithCycles,
+ ...connectionsWithCycle
+ };
+ }
+ }
+ return dependenciesList.map(dependency => ({
+ ...dependency,
+ hasCycle:
+ dependency.sourceId && dependency.targetId
+ ? overallConnectionsWithCycles.hasOwnProperty(dependency.id)
+ : undefined
+ }));
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
index ed92de7bb1..3ea1f2d5cc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
@@ -20,111 +20,201 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
-import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+import {
+ relationTypesOptions,
+ NEW_RULE_TEMP_ID
+} from './SoftwareProductDependenciesConstants.js';
-
-const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
- return (
- <SelectActionTableRow
- key={dependency.id}
- onAction={onAction}
- overlayMsg={i18n('There is a loop between selections')}
- hasError={dependency.hasCycle}
- hasErrorIndication
- showAction={showAction}
- actionIcon={actionIcon}>
- <SelectActionTableCell
- options={sourceOptions}
- selected={dependency.sourceId}
- placeholder={i18n('Select VFC...')}
- clearable={false}
- onChange={newVal => {
- dependency.sourceId = newVal;
- onDataChanged(dependency);
- }} />
- <SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
- <SelectActionTableCell
- placeholder={i18n('Select VFC...')}
- options={targetOptions}
- selected={dependency.targetId}
- clearable={false}
- onChange={newVal => {
- dependency.targetId = newVal;
- onDataChanged(dependency);
- }} />
- </SelectActionTableRow>
- );
+const TableActionRow = ({
+ onAction,
+ actionIcon,
+ showAction,
+ dependency,
+ sourceOptions,
+ targetOptions,
+ onDataChanged
+}) => {
+ return (
+ <SelectActionTableRow
+ key={dependency.id}
+ onAction={onAction}
+ overlayMsg={i18n('There is a loop between selections')}
+ hasError={dependency.hasCycle}
+ hasErrorIndication
+ showAction={showAction}
+ actionIcon={actionIcon}>
+ <SelectActionTableCell
+ options={sourceOptions}
+ selected={dependency.sourceId}
+ placeholder={i18n('Select VFC...')}
+ clearable={false}
+ onChange={newVal => {
+ dependency.sourceId = newVal;
+ onDataChanged(dependency);
+ }}
+ />
+ <SelectActionTableCell
+ options={relationTypesOptions}
+ selected={dependency.relationType}
+ clearable={false}
+ />
+ <SelectActionTableCell
+ placeholder={i18n('Select VFC...')}
+ options={targetOptions}
+ selected={dependency.targetId}
+ clearable={false}
+ onChange={newVal => {
+ dependency.targetId = newVal;
+ onDataChanged(dependency);
+ }}
+ />
+ </SelectActionTableRow>
+ );
};
-
export default class SoftwareProductDependenciesView extends React.Component {
- filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
- let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
- return componentsOptions.filter(component => {
- if (component.value === selectedTargetId) {
- return true;
- } else {
- return component.value !== selectedSourceId && (isInMap ? sourceToTargetMapping[selectedSourceId].indexOf(component.value) < 0 : true);
- }
- });
- }
-
- filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
- return componentsOptions.filter(component => {
- if (component.value === selectedSourceId) {
- return true;
- } else {
- let isInMap = sourceToTargetMapping.hasOwnProperty(component.value);
- return component.value !== selectedTargetId && (isInMap ? sourceToTargetMapping[component.value].indexOf(selectedTargetId) < 0 : true);
- }
- });
- }
+ filterTargets({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId,
+ selectedTargetId
+ }) {
+ let isInMap = sourceToTargetMapping.hasOwnProperty(selectedSourceId);
+ return componentsOptions.filter(component => {
+ if (component.value === selectedTargetId) {
+ return true;
+ } else {
+ return (
+ component.value !== selectedSourceId &&
+ (isInMap
+ ? sourceToTargetMapping[selectedSourceId].indexOf(
+ component.value
+ ) < 0
+ : true)
+ );
+ }
+ });
+ }
- render() {
- let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
- let sourceToTargetMapping = {};
- softwareProductDependencies.map(dependency => {
- let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
- if (dependency.targetId) {
- sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
- }
- });
- let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
- let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
- return (
- <div className='software-product-dependencies'>
- <div className='page-title'>{i18n('Dependencies')}</div>
- <SelectActionTable
- columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
- numOfIcons={2}
- isReadOnlyMode={isReadOnlyMode}>
- {!isReadOnlyMode && <TableActionRow
- key={newDependency.id}
- actionIcon='plusCircle'
- onAction={() => onAddDependency(newDependency)}
- dependency={newDependency}
- componentsOptions={componentsOptions}
- sourceToTargetMapping={sourceToTargetMapping}
- onDataChanged={onDataChanged}
- sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
- targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
- showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
- {depList.map(dependency => (
- <TableActionRow
- key={dependency.id}
- actionIcon='trashO'
- onAction={() => onDeleteDependency(dependency)}
- dependency={dependency}
- componentsOptions={componentsOptions}
- sourceToTargetMapping={sourceToTargetMapping}
- sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
- targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
- onDataChanged={onDataChanged}
- showAction={true}/>
- ))}
- </SelectActionTable>
- </div>
- );
- }
+ filterSources({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId,
+ selectedTargetId
+ }) {
+ return componentsOptions.filter(component => {
+ if (component.value === selectedSourceId) {
+ return true;
+ } else {
+ let isInMap = sourceToTargetMapping.hasOwnProperty(
+ component.value
+ );
+ return (
+ component.value !== selectedTargetId &&
+ (isInMap
+ ? sourceToTargetMapping[component.value].indexOf(
+ selectedTargetId
+ ) < 0
+ : true)
+ );
+ }
+ });
+ }
+ render() {
+ let {
+ componentsOptions,
+ softwareProductDependencies,
+ onDataChanged,
+ onAddDependency,
+ onDeleteDependency,
+ isReadOnlyMode
+ } = this.props;
+ let sourceToTargetMapping = {};
+ softwareProductDependencies.map(dependency => {
+ let isInMap = sourceToTargetMapping.hasOwnProperty(
+ dependency.sourceId
+ );
+ if (dependency.targetId) {
+ sourceToTargetMapping[dependency.sourceId] = isInMap
+ ? [
+ ...sourceToTargetMapping[dependency.sourceId],
+ dependency.targetId
+ ]
+ : [dependency.targetId];
+ }
+ });
+ let depList = softwareProductDependencies.filter(
+ dependency => dependency.id !== NEW_RULE_TEMP_ID
+ );
+ let newDependency = softwareProductDependencies.find(
+ dependency => dependency.id === NEW_RULE_TEMP_ID
+ );
+ return (
+ <div className="software-product-dependencies">
+ <div className="page-title">{i18n('Dependencies')}</div>
+ <SelectActionTable
+ columns={[
+ i18n('Source'),
+ i18n('Relation Type'),
+ i18n('Target')
+ ]}
+ numOfIcons={2}
+ isReadOnlyMode={isReadOnlyMode}>
+ {!isReadOnlyMode && (
+ <TableActionRow
+ key={newDependency.id}
+ actionIcon="plusCircle"
+ onAction={() => onAddDependency(newDependency)}
+ dependency={newDependency}
+ componentsOptions={componentsOptions}
+ sourceToTargetMapping={sourceToTargetMapping}
+ onDataChanged={onDataChanged}
+ sourceOptions={this.filterSources({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId: newDependency.sourceId,
+ selectedTargetId: newDependency.targetId
+ })}
+ targetOptions={this.filterTargets({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId: newDependency.sourceId,
+ selectedTargetId: newDependency.targetId
+ })}
+ showAction={
+ newDependency.targetId !== null &&
+ newDependency.relationType !== null &&
+ newDependency.sourceId !== null
+ }
+ />
+ )}
+ {depList.map(dependency => (
+ <TableActionRow
+ key={dependency.id}
+ actionIcon="trashO"
+ onAction={() => onDeleteDependency(dependency)}
+ dependency={dependency}
+ componentsOptions={componentsOptions}
+ sourceToTargetMapping={sourceToTargetMapping}
+ sourceOptions={this.filterSources({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId: dependency.sourceId,
+ selectedTargetId: dependency.targetId
+ })}
+ targetOptions={this.filterTargets({
+ componentsOptions,
+ sourceToTargetMapping,
+ selectedSourceId: dependency.sourceId,
+ selectedTargetId: dependency.targetId
+ })}
+ onDataChanged={onDataChanged}
+ showAction={true}
+ />
+ ))}
+ </SelectActionTable>
+ </div>
+ );
+ }
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
index a5c70068b0..4e03926ac5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeployment.js
@@ -13,37 +13,70 @@
* 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 SoftwareProductDeploymentView from './SoftwareProductDeploymentView.jsx';
import SoftwareProductDeploymentActionHelper from './SoftwareProductDeploymentActionHelper.js';
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';
-export function mapStateToProps({softwareProduct}) {
- let {softwareProductComponents: {componentsList}, softwareProductDeployment: {deploymentFlavors}} = softwareProduct;
- return {
- deploymentFlavors,
- componentsList
- };
+export function mapStateToProps({ softwareProduct }) {
+ let {
+ softwareProductComponents: { componentsList },
+ softwareProductDeployment: { deploymentFlavors }
+ } = softwareProduct;
+ return {
+ deploymentFlavors,
+ componentsList
+ };
}
-function mapActionToProps(dispatch, {softwareProductId, version}) {
- let modalClassName = 'deployment-flavor-editor';
- return {
- onAddDeployment: componentsList => SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, componentsList, version}),
- onDeleteDeployment: ({id, model}) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete "{model}"?', {model: model}),
- onConfirmed: () => SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: id, version})
- }
- }),
- onEditDeployment: (deploymentFlavor, componentsList) =>
- SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({softwareProductId, deploymentFlavorId: deploymentFlavor.id, version}).then(response =>
- SoftwareProductDeploymentActionHelper
- .openDeploymentFlavorEditor(dispatch, {softwareProductId, componentsList, modalClassName, deploymentFlavor: {...response.data, id: response.id}, isEdit: true, version}),
- )
- };
+function mapActionToProps(dispatch, { softwareProductId, version }) {
+ let modalClassName = 'deployment-flavor-editor';
+ return {
+ onAddDeployment: componentsList =>
+ SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+ dispatch,
+ { softwareProductId, modalClassName, componentsList, version }
+ ),
+ onDeleteDeployment: ({ id, model }) =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete "{model}"?', {
+ model: model
+ }),
+ onConfirmed: () =>
+ SoftwareProductDeploymentActionHelper.deleteDeploymentFlavor(
+ dispatch,
+ {
+ softwareProductId,
+ deploymentFlavorId: id,
+ version
+ }
+ )
+ }
+ }),
+ onEditDeployment: (deploymentFlavor, componentsList) =>
+ SoftwareProductDeploymentActionHelper.fetchDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId: deploymentFlavor.id,
+ version
+ }).then(response =>
+ SoftwareProductDeploymentActionHelper.openDeploymentFlavorEditor(
+ dispatch,
+ {
+ softwareProductId,
+ componentsList,
+ modalClassName,
+ deploymentFlavor: { ...response.data, id: response.id },
+ isEdit: true,
+ version
+ }
+ )
+ )
+ };
}
-export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(SoftwareProductDeploymentView);
+export default connect(mapStateToProps, mapActionToProps, null, {
+ withRef: true
+})(SoftwareProductDeploymentView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
index bd802b38f4..44b25311e0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
@@ -1,101 +1,183 @@
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
-import {actionTypes as GlobalModalActions} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
+import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
import pickBy from 'lodash/pickBy';
function baseUrl(vspId, version) {
- const versionId = version.id;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
+ const versionId = version.id;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/deployment-flavors`;
}
-function fetchDeploymentFlavorsList({softwareProductId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+function fetchDeploymentFlavorsList({ softwareProductId, version }) {
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
-function fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function fetchDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ version
+}) {
+ return RestAPIUtil.fetch(
+ `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+ );
}
-function deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`);
+function deleteDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ version
+}) {
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`
+ );
}
-function createDeploymentFlavor({softwareProductId, data, version}) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
+function createDeploymentFlavor({ softwareProductId, data, version }) {
+ return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, data);
}
-function editDeploymentFlavor({softwareProductId, deploymentFlavorId, data, version}) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`, data);
+function editDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ data,
+ version
+}) {
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version)}/${deploymentFlavorId}`,
+ data
+ );
}
const SoftwareProductDeploymentActionHelper = {
- fetchDeploymentFlavorsList(dispatch, {softwareProductId, version}) {
- return fetchDeploymentFlavorsList({softwareProductId, version}).then(response => {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
- deploymentFlavors: response.results
- });
- });
- },
+ fetchDeploymentFlavorsList(dispatch, { softwareProductId, version }) {
+ return fetchDeploymentFlavorsList({ softwareProductId, version }).then(
+ response => {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS,
+ deploymentFlavors: response.results
+ });
+ }
+ );
+ },
- fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version}) {
- return fetchDeploymentFlavor({softwareProductId, deploymentFlavorId, version});
- },
+ fetchDeploymentFlavor({ softwareProductId, deploymentFlavorId, version }) {
+ return fetchDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ version
+ });
+ },
- deleteDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, version}) {
- return deleteDeploymentFlavor({softwareProductId, deploymentFlavorId, version}).then(() => {
- return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
- });
- },
+ deleteDeploymentFlavor(
+ dispatch,
+ { softwareProductId, deploymentFlavorId, version }
+ ) {
+ return deleteDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ version
+ }).then(() => {
+ return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+ dispatch,
+ { softwareProductId, version }
+ );
+ });
+ },
- createDeploymentFlavor(dispatch, {softwareProductId, data, version}) {
- return createDeploymentFlavor({softwareProductId, data, version}).then(() => {
- return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
- });
- },
+ createDeploymentFlavor(dispatch, { softwareProductId, data, version }) {
+ return createDeploymentFlavor({
+ softwareProductId,
+ data,
+ version
+ }).then(() => {
+ return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+ dispatch,
+ { softwareProductId, version }
+ );
+ });
+ },
- editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId, data, version}) {
- let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
- return editDeploymentFlavor({softwareProductId, deploymentFlavorId, data: dataWithoutId, version}).then(() => {
- return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(dispatch, {softwareProductId, version});
- });
- },
+ editDeploymentFlavor(
+ dispatch,
+ { softwareProductId, deploymentFlavorId, data, version }
+ ) {
+ let dataWithoutId = pickBy(data, (val, key) => key !== 'id');
+ return editDeploymentFlavor({
+ softwareProductId,
+ deploymentFlavorId,
+ data: dataWithoutId,
+ version
+ }).then(() => {
+ return SoftwareProductDeploymentActionHelper.fetchDeploymentFlavorsList(
+ dispatch,
+ { softwareProductId, version }
+ );
+ });
+ },
- closeDeploymentFlavorEditor(dispatch) {
- dispatch({
- type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
- });
- dispatch({
- type: GlobalModalActions.GLOBAL_MODAL_CLOSE
- });
- },
+ closeDeploymentFlavorEditor(dispatch) {
+ dispatch({
+ type:
+ actionTypes.deploymentFlavorEditor
+ .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA
+ });
+ dispatch({
+ type: GlobalModalActions.GLOBAL_MODAL_CLOSE
+ });
+ },
- openDeploymentFlavorEditor(dispatch, {softwareProductId, modalClassName, deploymentFlavor = {}, componentsList, isEdit = false, version}) {
- let alteredDeploymentFlavor = {...deploymentFlavor};
- if (componentsList.length) {
- alteredDeploymentFlavor = {...alteredDeploymentFlavor, componentComputeAssociations: deploymentFlavor.componentComputeAssociations ?
- [{...deploymentFlavor.componentComputeAssociations[0], componentId: componentsList[0].id}]
- :
- [{componentId: componentsList[0].id, computeFlavorId: null}]
- };
- }
- dispatch({
- type: actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
- deploymentFlavor: alteredDeploymentFlavor
- });
- dispatch({
- type: GlobalModalActions.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
- modalComponentProps: {softwareProductId, version},
- modalClassName,
- title: isEdit ? 'Edit Deployment Flavor' : 'Create a New Deployment Flavor'
- }
- });
- },
+ openDeploymentFlavorEditor(
+ dispatch,
+ {
+ softwareProductId,
+ modalClassName,
+ deploymentFlavor = {},
+ componentsList,
+ isEdit = false,
+ version
+ }
+ ) {
+ let alteredDeploymentFlavor = { ...deploymentFlavor };
+ if (componentsList.length) {
+ alteredDeploymentFlavor = {
+ ...alteredDeploymentFlavor,
+ componentComputeAssociations: deploymentFlavor.componentComputeAssociations
+ ? [
+ {
+ ...deploymentFlavor
+ .componentComputeAssociations[0],
+ componentId: componentsList[0].id
+ }
+ ]
+ : [
+ {
+ componentId: componentsList[0].id,
+ computeFlavorId: null
+ }
+ ]
+ };
+ }
+ dispatch({
+ type:
+ actionTypes.deploymentFlavorEditor
+ .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA,
+ deploymentFlavor: alteredDeploymentFlavor
+ });
+ dispatch({
+ type: GlobalModalActions.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
+ modalComponentProps: { softwareProductId, version },
+ modalClassName,
+ title: isEdit
+ ? 'Edit Deployment Flavor'
+ : 'Create a New Deployment Flavor'
+ }
+ });
+ }
};
-export default SoftwareProductDeploymentActionHelper;
+export default SoftwareProductDeploymentActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
index 51469b461c..6c0d3efe38 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentConstants.js
@@ -16,13 +16,13 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
+ FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS: null,
- deploymentFlavorEditor: {
- DATA_CHANGED: null,
- SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
- SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
- }
+ deploymentFlavorEditor: {
+ DATA_CHANGED: null,
+ SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA: null,
+ SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA: null
+ }
});
export const DEPLOYMENT_FLAVORS_FORM_NAME = 'DEPLOYMENT_FLAVORS_FORM_NAME';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
index 8eb91e8fcb..31bf09e945 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentListReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductDeploymentConstants.js';
+import { actionTypes } from './SoftwareProductDeploymentConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
- return [...action.deploymentFlavors];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FETCH_SOFTWARE_PRODUCT_DEPLOYMENT_FLAVORS:
+ return [...action.deploymentFlavors];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
index 860d02c343..e1bdd553a6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentView.jsx
@@ -22,74 +22,82 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
export default class SoftwareProductDeployment extends React.Component {
- state = {
- localFilter: ''
- };
+ state = {
+ localFilter: ''
+ };
- static propTypes = {
- onAddDeployment: PropTypes.func.isRequired,
- onDeleteDeployment: PropTypes.func.isRequired,
- onEditDeployment: PropTypes.func.isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired
- };
+ static propTypes = {
+ onAddDeployment: PropTypes.func.isRequired,
+ onDeleteDeployment: PropTypes.func.isRequired,
+ onEditDeployment: PropTypes.func.isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired
+ };
- render() {
- return (
- <div>
- {this.renderList()}
- </div>
- );
- }
+ render() {
+ return <div>{this.renderList()}</div>;
+ }
- renderList() {
- let {onAddDeployment, isReadOnlyMode, componentsList} = this.props;
- return (
- <ListEditorView
- plusButtonTitle={i18n('Add Deployment Flavor')}
- filterValue={this.state.localFilter}
- placeholder={i18n('Filter Deployment')}
- onAdd={() => onAddDeployment(componentsList)}
- isReadOnlyMode={isReadOnlyMode}
- title={i18n('Deployment Flavors')}
- onFilter={value => this.setState({localFilter: value})}
- twoColumns>
- {this.filterList().map(deploymentFlavor => this.renderListItem(deploymentFlavor, isReadOnlyMode))}
- </ListEditorView>
- );
- }
+ renderList() {
+ let { onAddDeployment, isReadOnlyMode, componentsList } = this.props;
+ return (
+ <ListEditorView
+ plusButtonTitle={i18n('Add Deployment Flavor')}
+ filterValue={this.state.localFilter}
+ placeholder={i18n('Filter Deployment')}
+ onAdd={() => onAddDeployment(componentsList)}
+ isReadOnlyMode={isReadOnlyMode}
+ title={i18n('Deployment Flavors')}
+ onFilter={value => this.setState({ localFilter: value })}
+ twoColumns>
+ {this.filterList().map(deploymentFlavor =>
+ this.renderListItem(deploymentFlavor, isReadOnlyMode)
+ )}
+ </ListEditorView>
+ );
+ }
- renderListItem(deploymentFlavor, isReadOnlyMode) {
- let {id, model, description} = deploymentFlavor;
- let {onEditDeployment, onDeleteDeployment, componentsList} = this.props;
- return (
- <ListEditorItemView
- key={id}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}
- onSelect={() => onEditDeployment(deploymentFlavor, componentsList)}
- onDelete={() => onDeleteDeployment(deploymentFlavor)}>
- <ListEditorItemViewField>
- <div className='model'>{model}</div>
- </ListEditorItemViewField>
- <ListEditorItemViewField>
- <div className='description'>{description}</div>
- </ListEditorItemViewField>
- </ListEditorItemView>
- );
- }
+ renderListItem(deploymentFlavor, isReadOnlyMode) {
+ let { id, model, description } = deploymentFlavor;
+ let {
+ onEditDeployment,
+ onDeleteDeployment,
+ componentsList
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}
+ onSelect={() =>
+ onEditDeployment(deploymentFlavor, componentsList)
+ }
+ onDelete={() => onDeleteDeployment(deploymentFlavor)}>
+ <ListEditorItemViewField>
+ <div className="model">{model}</div>
+ </ListEditorItemViewField>
+ <ListEditorItemViewField>
+ <div className="description">{description}</div>
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ );
+ }
- filterList() {
- let {deploymentFlavors} = this.props;
- let {localFilter} = this.state;
+ filterList() {
+ let { deploymentFlavors } = this.props;
+ let { localFilter } = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return deploymentFlavors.filter(({model = '', description = ''}) => {
- return escape(model).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return deploymentFlavors;
- }
- }
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return deploymentFlavors.filter(
+ ({ model = '', description = '' }) => {
+ return (
+ escape(model).match(filter) ||
+ escape(description).match(filter)
+ );
+ }
+ );
+ } else {
+ return deploymentFlavors;
+ }
+ }
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
index c24548b7b9..9392317692 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditor.js
@@ -13,77 +13,103 @@
* 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 SoftwareProductDeploymentEditorView from './SoftwareProductDeploymentEditorView.jsx';
import SoftwareProdcutDeploymentActionHelper from '../SoftwareProductDeploymentActionHelper.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';
+import { DEPLOYMENT_FLAVORS_FORM_NAME } from '../SoftwareProductDeploymentConstants.js';
export function mapStateToProps({
- licenseModel,
- softwareProduct,
- currentScreen: {props: {isReadOnlyMode}}
+ licenseModel,
+ softwareProduct,
+ currentScreen: { props: { isReadOnlyMode } }
}) {
- let {
- softwareProductEditor: {
- data: currentSoftwareProduct = {}
- },
- softwareProductComponents: {
- componentsList,
- computeFlavor: {
- computesList
- }
- },
- softwareProductDeployment: {
- deploymentFlavors,
- deploymentFlavorEditor: {
- data = {},
- genericFieldInfo,
- formReady
- }
- }
- } = softwareProduct;
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductComponents: {
+ componentsList,
+ computeFlavor: { computesList }
+ },
+ softwareProductDeployment: {
+ deploymentFlavors,
+ deploymentFlavorEditor: { data = {}, genericFieldInfo, formReady }
+ }
+ } = softwareProduct;
- let {
- featureGroup: {
- featureGroupsList
- }
- } = licenseModel;
+ let { featureGroup: { featureGroupsList } } = licenseModel;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData ? currentSoftwareProduct.licensingData.featureGroups || [] : [];
- let selectedFeatureGroupsList = featureGroupsList
- .filter(featureGroup => selectedFeatureGroupsIds.includes(featureGroup.id))
- .map(featureGroup => ({value: featureGroup.id, label: featureGroup.name}));
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ let selectedFeatureGroupsIds = currentSoftwareProduct.licensingData
+ ? currentSoftwareProduct.licensingData.featureGroups || []
+ : [];
+ let selectedFeatureGroupsList = featureGroupsList
+ .filter(featureGroup =>
+ selectedFeatureGroupsIds.includes(featureGroup.id)
+ )
+ .map(featureGroup => ({
+ value: featureGroup.id,
+ label: featureGroup.name
+ }));
- let DFNames = {};
+ let DFNames = {};
- deploymentFlavors.map(deployment => {
- DFNames[deployment.model.toLowerCase()] = deployment.id;
- });
+ deploymentFlavors.map(deployment => {
+ DFNames[deployment.model.toLowerCase()] = deployment.id;
+ });
- return {
- data,
- selectedFeatureGroupsList,
- genericFieldInfo,
- DFNames,
- isFormValid,
- formReady,
- isReadOnlyMode,
- componentsList,
- computesList,
- isEdit: Boolean(data.id)
- };
+ return {
+ data,
+ selectedFeatureGroupsList,
+ genericFieldInfo,
+ DFNames,
+ isFormValid,
+ formReady,
+ isReadOnlyMode,
+ componentsList,
+ computesList,
+ isEdit: Boolean(data.id)
+ };
}
-function mapActionsToProps(dispatch, {softwareProductId, version}) {
- return {
- onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: DEPLOYMENT_FLAVORS_FORM_NAME, customValidations}),
- onClose: () => SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(dispatch),
- onCreate: data => SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(dispatch, {softwareProductId, data, version}),
- onEdit: data => SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(dispatch, {softwareProductId, deploymentFlavorId: data.id, data, version}),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, DEPLOYMENT_FLAVORS_FORM_NAME)
- };
+function mapActionsToProps(dispatch, { softwareProductId, version }) {
+ return {
+ onDataChanged: (deltaData, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+ customValidations
+ }),
+ onClose: () =>
+ SoftwareProdcutDeploymentActionHelper.closeDeploymentFlavorEditor(
+ dispatch
+ ),
+ onCreate: data =>
+ SoftwareProdcutDeploymentActionHelper.createDeploymentFlavor(
+ dispatch,
+ {
+ softwareProductId,
+ data,
+ version
+ }
+ ),
+ onEdit: data =>
+ SoftwareProdcutDeploymentActionHelper.editDeploymentFlavor(
+ dispatch,
+ {
+ softwareProductId,
+ deploymentFlavorId: data.id,
+ data,
+ version
+ }
+ ),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(
+ dispatch,
+ DEPLOYMENT_FLAVORS_FORM_NAME
+ )
+ };
}
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductDeploymentEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductDeploymentEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
index 70836e8ff9..16e73d2162 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorReducer.js
@@ -13,32 +13,37 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, DEPLOYMENT_FLAVORS_FORM_NAME} from '../SoftwareProductDeploymentConstants.js';;
+import {
+ actionTypes,
+ DEPLOYMENT_FLAVORS_FORM_NAME
+} from '../SoftwareProductDeploymentConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
- return {
- ...state,
- data: action.deploymentFlavor,
- formReady: null,
- formName: DEPLOYMENT_FLAVORS_FORM_NAME,
- genericFieldInfo: {
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 500}]
- },
- 'model' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- }
- };
- case actionTypes.deploymentFlavorEditor.SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.deploymentFlavorEditor
+ .SOFTWARE_PRODUCT_DEPLOYMENT_FILL_DATA:
+ return {
+ ...state,
+ data: action.deploymentFlavor,
+ formReady: null,
+ formName: DEPLOYMENT_FLAVORS_FORM_NAME,
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 500 }]
+ },
+ model: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ }
+ };
+ case actionTypes.deploymentFlavorEditor
+ .SOFTWARE_PRODUCT_DEPLOYMENT_CLEAR_DATA:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
index 7c9ae438d9..e44d2bd966 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
@@ -11,127 +11,240 @@ import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.j
import Validator from 'nfvo-utils/Validator.js';
export default class SoftwareProductDeploymentEditorView extends React.Component {
- render() {
- let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props;
- let {model, description, featureGroupId, componentComputeAssociations = []} = data;
- let featureGroupsExist = selectedFeatureGroupsList.length > 0;
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- onSubmit={ () => this.submit() }
- submitButtonText={isEdit ? i18n('Save') : i18n('Create')}
- onReset={ () => onClose() }
- onValidateForm={() => this.validate() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- className='vsp-deployment-editor'>
- <GridSection hasLastColSet>
- <GridItem colSpan={1}>
- <Input
- onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
- label={i18n('Model')}
- value={model}
- data-test-id='deployment-model'
- isValid={genericFieldInfo.model.isValid}
- errorText={genericFieldInfo.model.errorText}
- isRequired={true}
- type='text'/>
- </GridItem>
- <GridItem colSpan={3} lastColInRow>
- <Input
- onChange={description => onDataChanged({description})}
- label={i18n('Description')}
- value={description}
- data-test-id='deployment-description'
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- type='text'/>
- </GridItem>
- </GridSection>
- <GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')} hasLastColSet>
- <GridItem colSpan={1}>
- <SelectInput
- data-test-id='deployment-feature-groups'
- label={i18n('Feature Group')}
- value={featureGroupId}
- onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})}
- type='select'
- clearable={true}
- disabled={isReadOnlyMode || !featureGroupsExist}
- className='field-section'
- options={selectedFeatureGroupsList}/>
- </GridItem>
- </GridSection>
- {!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'>
- <GridItem colSpan={3}>
- <span>{i18n('Please assign Feature Groups in VSP General')}</span>
- </GridItem>
- </GridSection>}
- <GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table' hasLastColSet>
- <GridItem colSpan={4} lastColInRow>
- <SelectActionTable
- columns={['Virtual Function Components', 'Compute Flavors']}
- numOfIcons={0}>
- {componentComputeAssociations.map( (association, index) =>
- <SelectActionTableRow key={association.componentId}>
- <SelectActionTableCell
- options={
- componentsList
- .map(component => ({value: component.id, label: component.displayName}) )
- }
- selected={association.componentId}
- onChange={componentId => {
- let newAssociations = [...componentComputeAssociations];
- newAssociations[index] = {...newAssociations[index], componentId};
- onDataChanged({componentComputeAssociations: newAssociations});
- }}
- disabled={true}/>
- <SelectActionTableCell
- options={
- computesList
- .filter(compute => compute.componentId === association.componentId)
- .map(compute => ({value: compute.computeFlavorId, label: compute.name}) )
- }
- selected={association.computeFlavorId}
- onChange={computeFlavorId => {
- let newAssociations = [...componentComputeAssociations];
- newAssociations[index] = {...newAssociations[index], computeFlavorId};
- onDataChanged({componentComputeAssociations: newAssociations});
- }}
- disabled={isReadOnlyMode}/>
- </SelectActionTableRow>
- )}
- </SelectActionTable>
- </GridItem>
- </GridSection>
- </Form>}
- </div>
- );
- }
+ render() {
+ let {
+ data,
+ isEdit,
+ onClose,
+ onDataChanged,
+ isReadOnlyMode,
+ selectedFeatureGroupsList,
+ componentsList,
+ computesList,
+ genericFieldInfo
+ } = this.props;
+ let {
+ model,
+ description,
+ featureGroupId,
+ componentComputeAssociations = []
+ } = data;
+ let featureGroupsExist = selectedFeatureGroupsList.length > 0;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={() => this.submit()}
+ submitButtonText={
+ isEdit ? i18n('Save') : i18n('Create')
+ }
+ onReset={() => onClose()}
+ onValidateForm={() => this.validate()}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ className="vsp-deployment-editor">
+ <GridSection hasLastColSet>
+ <GridItem colSpan={1}>
+ <Input
+ onChange={model =>
+ onDataChanged(
+ { model },
+ {
+ model: model =>
+ this.validateName(model)
+ }
+ )
+ }
+ label={i18n('Model')}
+ value={model}
+ data-test-id="deployment-model"
+ isValid={genericFieldInfo.model.isValid}
+ errorText={genericFieldInfo.model.errorText}
+ isRequired={true}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={3} lastColInRow>
+ <Input
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ label={i18n('Description')}
+ value={description}
+ data-test-id="deployment-description"
+ isValid={
+ genericFieldInfo.description.isValid
+ }
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ type="text"
+ />
+ </GridItem>
+ </GridSection>
+ <GridSection
+ className={`deployment-feature-groups-section${
+ !featureGroupsExist ? ' no-feature-groups' : ''
+ }`}
+ title={i18n('License Details')}
+ hasLastColSet>
+ <GridItem colSpan={1}>
+ <SelectInput
+ data-test-id="deployment-feature-groups"
+ label={i18n('Feature Group')}
+ value={featureGroupId}
+ onChange={featureGroup =>
+ onDataChanged({
+ featureGroupId: featureGroup
+ ? featureGroup.value
+ : null
+ })
+ }
+ type="select"
+ clearable={true}
+ disabled={
+ isReadOnlyMode || !featureGroupsExist
+ }
+ className="field-section"
+ options={selectedFeatureGroupsList}
+ />
+ </GridItem>
+ </GridSection>
+ {!featureGroupsExist && (
+ <GridSection className="deployment-feature-group-warning-section">
+ <GridItem colSpan={3}>
+ <span>
+ {i18n(
+ 'Please assign Feature Groups in VSP General'
+ )}
+ </span>
+ </GridItem>
+ </GridSection>
+ )}
+ <GridSection
+ title={i18n('Assign VFCs and Compute Flavors')}
+ className="vfc-table"
+ hasLastColSet>
+ <GridItem colSpan={4} lastColInRow>
+ <SelectActionTable
+ columns={[
+ 'Virtual Function Components',
+ 'Compute Flavors'
+ ]}
+ numOfIcons={0}>
+ {componentComputeAssociations.map(
+ (association, index) => (
+ <SelectActionTableRow
+ key={association.componentId}>
+ <SelectActionTableCell
+ options={componentsList.map(
+ component => ({
+ value: component.id,
+ label:
+ component.displayName
+ })
+ )}
+ selected={
+ association.componentId
+ }
+ onChange={componentId => {
+ let newAssociations = [
+ ...componentComputeAssociations
+ ];
+ newAssociations[
+ index
+ ] = {
+ ...newAssociations[
+ index
+ ],
+ componentId
+ };
+ onDataChanged({
+ componentComputeAssociations: newAssociations
+ });
+ }}
+ disabled={true}
+ />
+ <SelectActionTableCell
+ options={computesList
+ .filter(
+ compute =>
+ compute.componentId ===
+ association.componentId
+ )
+ .map(compute => ({
+ value:
+ compute.computeFlavorId,
+ label: compute.name
+ }))}
+ selected={
+ association.computeFlavorId
+ }
+ onChange={computeFlavorId => {
+ let newAssociations = [
+ ...componentComputeAssociations
+ ];
+ newAssociations[
+ index
+ ] = {
+ ...newAssociations[
+ index
+ ],
+ computeFlavorId
+ };
+ onDataChanged({
+ componentComputeAssociations: newAssociations
+ });
+ }}
+ disabled={isReadOnlyMode}
+ />
+ </SelectActionTableRow>
+ )
+ )}
+ </SelectActionTable>
+ </GridItem>
+ </GridSection>
+ </Form>
+ )}
+ </div>
+ );
+ }
- validateName(value) {
- const {data: {id = ''}, DFNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: DFNames});
+ validateName(value) {
+ const { data: { id = '' }, DFNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: DFNames
+ });
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('Deployment flavor by the name \'' + value + '\' already exists. Deployment flavor name must be unique')};
- }
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "Deployment flavor by the name '" +
+ value +
+ "' already exists. Deployment flavor name must be unique"
+ )
+ };
+ }
- submit(){
- let {isEdit, onCreate, onEdit, onClose, data} = this.props;
- if (isEdit) {
- onEdit(data);
- } else {
- onCreate(data);
- }
- onClose();
- }
+ submit() {
+ let { isEdit, onCreate, onEdit, onClose, data } = this.props;
+ if (isEdit) {
+ onEdit(data);
+ } else {
+ onCreate(data);
+ }
+ onClose();
+ }
- validate() {
- this.props.onValidateForm();
- }
+ validate() {
+ this.props.onValidateForm();
+ }
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
index 0973537d43..8a3279a02c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetails.js
@@ -13,80 +13,140 @@
* 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
import SoftwareProductDetailsView from './SoftwareProductDetailsView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {PRODUCT_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-import {actionTypes as modalActionTypes, modalSizes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { PRODUCT_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+ actionTypes as modalActionTypes,
+ modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
export const mapStateToProps = ({
- finalizedLicenseModelList,
- archivedLicenseModelList,
- softwareProduct,
- licenseModel: {licenseAgreement, featureGroup}
+ finalizedLicenseModelList,
+ archivedLicenseModelList,
+ softwareProduct,
+ licenseModel: { licenseAgreement, featureGroup }
}) => {
+ let {
+ softwareProductEditor: {
+ data: currentSoftwareProduct,
+ licensingVersionsList = [],
+ genericFieldInfo
+ },
+ softwareProductCategories,
+ softwareProductQuestionnaire
+ } = softwareProduct;
+ let { licensingData = {}, licensingVersion } = currentSoftwareProduct;
+ let licenseAgreementList = [],
+ filteredFeatureGroupsList = [];
+ licenseAgreementList = licensingVersion
+ ? licenseAgreement.licenseAgreementList
+ : [];
+ if (licensingVersion && licensingData && licensingData.licenseAgreement) {
+ let selectedLicenseAgreement = licenseAgreementList.find(
+ la => la.id === licensingData.licenseAgreement
+ );
+ if (selectedLicenseAgreement) {
+ let featureGroupsList = featureGroup.featureGroupsList.filter(
+ ({ referencingLicenseAgreements }) =>
+ referencingLicenseAgreements.includes(
+ selectedLicenseAgreement.id
+ )
+ );
+ if (featureGroupsList.length) {
+ filteredFeatureGroupsList = featureGroupsList.map(
+ featureGroup => ({
+ enum: featureGroup.id,
+ title: featureGroup.name
+ })
+ );
+ }
+ }
+ }
+ let {
+ qdata,
+ qgenericFieldInfo: qGenericFieldInfo,
+ dataMap
+ } = softwareProductQuestionnaire;
- let {softwareProductEditor: {data: currentSoftwareProduct, licensingVersionsList = [], genericFieldInfo}, softwareProductCategories, softwareProductQuestionnaire} = softwareProduct;
- let {licensingData = {}, licensingVersion} = currentSoftwareProduct;
- let licenseAgreementList = [], filteredFeatureGroupsList = [];
- licenseAgreementList = licensingVersion ?
- licenseAgreement.licenseAgreementList : [];
- if(licensingVersion && licensingData && licensingData.licenseAgreement) {
- let selectedLicenseAgreement = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
- if (selectedLicenseAgreement) {
- let featureGroupsList = featureGroup.featureGroupsList.filter(({referencingLicenseAgreements}) => referencingLicenseAgreements.includes(selectedLicenseAgreement.id));
- if (featureGroupsList.length) {
- filteredFeatureGroupsList = featureGroupsList.map(featureGroup => ({enum: featureGroup.id, title: featureGroup.name}));
- }
- }
- }
- let {qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap} = softwareProductQuestionnaire;
-
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- const isVendorArchived = archivedLicenseModelList.find(item => item.id === currentSoftwareProduct.vendorId);
- return {
- currentSoftwareProduct,
- softwareProductCategories,
- licenseAgreementList,
- licensingVersionsList,
- featureGroupsList: filteredFeatureGroupsList,
- finalizedLicenseModelList,
- qdata,
- isFormValid,
- genericFieldInfo,
- qGenericFieldInfo,
- dataMap,
- isVendorArchived: !!isVendorArchived
- };
-
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ const isVendorArchived = archivedLicenseModelList.find(
+ item => item.id === currentSoftwareProduct.vendorId
+ );
+ return {
+ currentSoftwareProduct,
+ softwareProductCategories,
+ licenseAgreementList,
+ licensingVersionsList,
+ featureGroupsList: filteredFeatureGroupsList,
+ finalizedLicenseModelList,
+ qdata,
+ isFormValid,
+ genericFieldInfo,
+ qGenericFieldInfo,
+ dataMap,
+ isVendorArchived: !!isVendorArchived
+ };
};
-export const mapActionsToProps = (dispatch, {version}) => {
- return {
- onDataChanged: (deltaData, formName) => ValidationHelper.dataChanged(dispatch, {deltaData, formName}),
- onVendorParamChanged: (deltaData, formName) => SoftwareProductActionHelper.softwareProductEditorVendorChanged(dispatch, {deltaData, formName}),
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: PRODUCT_QUESTIONNAIRE}),
- onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData}),
- onSubmit: (softwareProduct, qdata) => SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {softwareProduct, qdata, version}),
- onArchivedVendorRemove: ({onVendorParamChanged, finalizedLicenseModelList, vendorName}) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data:{
- title: i18n('Change Archived VLM'),
- modalComponentName: modalContentMapper.VENDOR_SELECTOR,
- modalComponentProps: {
- size: modalSizes.MEDIUM,
- finalizedLicenseModelList,
- vendorName,
- onClose: () => dispatch({type: modalActionTypes.GLOBAL_MODAL_CLOSE}),
- onConfirm: (vendorId) => onVendorParamChanged({vendorId}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)
- }
- }
- })
- };
+export const mapActionsToProps = (dispatch, { version }) => {
+ return {
+ onDataChanged: (deltaData, formName) =>
+ ValidationHelper.dataChanged(dispatch, { deltaData, formName }),
+ onVendorParamChanged: (deltaData, formName) =>
+ SoftwareProductActionHelper.softwareProductEditorVendorChanged(
+ dispatch,
+ { deltaData, formName }
+ ),
+ onQDataChanged: deltaData =>
+ ValidationHelper.qDataChanged(dispatch, {
+ deltaData,
+ qName: PRODUCT_QUESTIONNAIRE
+ }),
+ onValidityChanged: isValidityData =>
+ SoftwareProductActionHelper.setIsValidityData(dispatch, {
+ isValidityData
+ }),
+ onSubmit: (softwareProduct, qdata) =>
+ SoftwareProductActionHelper.updateSoftwareProduct(dispatch, {
+ softwareProduct,
+ qdata,
+ version
+ }),
+ onArchivedVendorRemove: ({
+ onVendorParamChanged,
+ finalizedLicenseModelList,
+ vendorName
+ }) =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ title: i18n('Change Archived VLM'),
+ modalComponentName: modalContentMapper.VENDOR_SELECTOR,
+ modalComponentProps: {
+ size: modalSizes.MEDIUM,
+ finalizedLicenseModelList,
+ vendorName,
+ onClose: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ }),
+ onConfirm: vendorId =>
+ onVendorParamChanged(
+ { vendorId },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ )
+ }
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductDetailsView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductDetailsView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
index 1a293264c3..1e4a0df787 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsReducer.js
@@ -13,49 +13,56 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import {
+ actionTypes,
+ forms
+} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED:
- return {
- ...state,
- isValidityData: action.isValidityData
- };
- case actionTypes.SOFTWARE_PRODUCT_LOADED:
- return {
- ...state,
- formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS,
- genericFieldInfo: {
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'validateName', data: true}, {type: 'maxLength', data: 25}, {type: 'required', data: true}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- },
- data: action.response
- };
- case actionTypes.TOGGLE_NAVIGATION_ITEM:
- return {
- ...state,
- mapOfExpandedIds: action.mapOfExpandedIds
- };
- case actionTypes.LOAD_LICENSING_VERSIONS_LIST:
- return {
- ...state,
- licensingVersionsList: action.licensingVersionsList
- };
- case actionTypes.CANDIDATE_IN_PROCESS:
- return {
- ...state,
- data: {...state.data, candidateOnboardingOrigin: true}
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.softwareProductEditor.IS_VALIDITY_DATA_CHANGED:
+ return {
+ ...state,
+ isValidityData: action.isValidityData
+ };
+ case actionTypes.SOFTWARE_PRODUCT_LOADED:
+ return {
+ ...state,
+ formName: forms.VENDOR_SOFTWARE_PRODUCT_DETAILS,
+ genericFieldInfo: {
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'validateName', data: true },
+ { type: 'maxLength', data: 25 },
+ { type: 'required', data: true }
+ ]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ },
+ data: action.response
+ };
+ case actionTypes.TOGGLE_NAVIGATION_ITEM:
+ return {
+ ...state,
+ mapOfExpandedIds: action.mapOfExpandedIds
+ };
+ case actionTypes.LOAD_LICENSING_VERSIONS_LIST:
+ return {
+ ...state,
+ licensingVersionsList: action.licensingVersionsList
+ };
+ case actionTypes.CANDIDATE_IN_PROCESS:
+ return {
+ ...state,
+ data: { ...state.data, candidateOnboardingOrigin: true }
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
index c2a3e0bd02..9c20723689 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx
@@ -22,57 +22,77 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
class VendorSelector extends React.Component {
- static propTypes = {
- finalizedLicenseModelList: PropTypes.array,
- vendorName: PropTypes.string,
- onClose: PropTypes.func.isRequired,
- onConfirm: PropTypes.func.isRequired
- }
- constructor(props){
- super(props);
- const selectedValue = props.finalizedLicenseModelList.length ? props.finalizedLicenseModelList[0].id : '';
- this.state = {
- selectedValue
- };
- }
- submit() {
- const vendor = this.props.finalizedLicenseModelList.find(item => item.id === this.state.selectedValue);
- this.props.onConfirm(vendor.id);
- this.props.onClose();
- }
- render() {
- const {finalizedLicenseModelList, vendorName, onClose} = this.props;
- const {selectedValue} = this.state;
- return (
- <div className='vsp-details-vendor-select'>
- <Form
- onSubmit={() => this.submit()}
- onReset={() => onClose()}
- isValid = {!!selectedValue}
- submitButtonText={i18n('Save')}
- hasButtons={true}>
- <div className='vendor-selector-modal-title'>{`${i18n('The VLM')} '${vendorName}' ${i18n('assigned to this VSP is archived')}.`}</div>
- <div className='vendor-selector-modal-additional-text'>{i18n('If you select a different VLM you will not be able to reselect the archived VLM.')}</div>
- <Input
- data-test-id='vsp-vendor-name-select'
- label={i18n('Vendor')}
- type='select'
- onChange={e => {this.setState({
- selectedValue: e.target.options[e.target.selectedIndex].value
- });}}
- value={selectedValue}>
- <option key='emtyVendor' value=''>{i18n('please select...')}</option>
- {sortByStringProperty(
- finalizedLicenseModelList,
- 'name'
- ).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
- }
- </Input>
- </Form>
- </div>
- );
- }
+ static propTypes = {
+ finalizedLicenseModelList: PropTypes.array,
+ vendorName: PropTypes.string,
+ onClose: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func.isRequired
+ };
+ constructor(props) {
+ super(props);
+ const selectedValue = props.finalizedLicenseModelList.length
+ ? props.finalizedLicenseModelList[0].id
+ : '';
+ this.state = {
+ selectedValue
+ };
+ }
+ submit() {
+ const vendor = this.props.finalizedLicenseModelList.find(
+ item => item.id === this.state.selectedValue
+ );
+ this.props.onConfirm(vendor.id);
+ this.props.onClose();
+ }
+ render() {
+ const { finalizedLicenseModelList, vendorName, onClose } = this.props;
+ const { selectedValue } = this.state;
+ return (
+ <div className="vsp-details-vendor-select">
+ <Form
+ onSubmit={() => this.submit()}
+ onReset={() => onClose()}
+ isValid={!!selectedValue}
+ submitButtonText={i18n('Save')}
+ hasButtons={true}>
+ <div className="vendor-selector-modal-title">{`${i18n(
+ 'The VLM'
+ )} '${vendorName}' ${i18n(
+ 'assigned to this VSP is archived'
+ )}.`}</div>
+ <div className="vendor-selector-modal-additional-text">
+ {i18n(
+ 'If you select a different VLM you will not be able to reselect the archived VLM.'
+ )}
+ </div>
+ <Input
+ data-test-id="vsp-vendor-name-select"
+ label={i18n('Vendor')}
+ type="select"
+ onChange={e => {
+ this.setState({
+ selectedValue:
+ e.target.options[e.target.selectedIndex]
+ .value
+ });
+ }}
+ value={selectedValue}>
+ <option key="emtyVendor" value="">
+ {i18n('please select...')}
+ </option>
+ {sortByStringProperty(
+ finalizedLicenseModelList,
+ 'name'
+ ).map(lm => (
+ <option key={lm.id} value={lm.id}>
+ {lm.name}
+ </option>
+ ))}
+ </Input>
+ </Form>
+ </div>
+ );
+ }
}
export default VendorSelector;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
index 24aa319c24..12b1eadc86 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
@@ -13,7 +13,7 @@
* or implied. 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 i18n from 'nfvo-utils/i18n/i18n.js';
@@ -24,427 +24,642 @@ 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';
import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
-import {forms} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { forms } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
-const DeprecatedVlmInfo = ({vendorName, onVendorRemove}) => {
- return (
- <div className='depricated-vlm-info'>
- <Input
- data-test-id='vsp-vendor-name'
- isRequired={true}
- onClick={() => onVendorRemove()}
- label={i18n('Vendor')}
- type='select'
- value={`${vendorName} (Archived)`}>
- <option key={vendorName} value={`${vendorName} (Archived)`}>{`${vendorName} (Archived)`}</option>
- </Input>
- </div>
- );
+const DeprecatedVlmInfo = ({ vendorName, onVendorRemove }) => {
+ return (
+ <div className="depricated-vlm-info">
+ <Input
+ data-test-id="vsp-vendor-name"
+ isRequired={true}
+ onClick={() => onVendorRemove()}
+ label={i18n('Vendor')}
+ type="select"
+ value={`${vendorName} (Archived)`}>
+ <option
+ key={vendorName}
+ value={`${vendorName} (Archived)`}>{`${vendorName} (Archived)`}</option>
+ </Input>
+ </div>
+ );
};
class GeneralSection extends React.Component {
- static propTypes = {
- vendorId: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- subCategory: PropTypes.string,
- softwareProductCategories: PropTypes.array,
- finalizedLicenseModelList: PropTypes.array,
- onDataChanged: PropTypes.func.isRequired,
- onVendorParamChanged: PropTypes.func.isRequired,
- onSelectSubCategory: PropTypes.func.isRequired,
- isVendorArchived: PropTypes.bool,
- onArchivedVendorRemove: PropTypes.func
- };
+ static propTypes = {
+ vendorId: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ subCategory: PropTypes.string,
+ softwareProductCategories: PropTypes.array,
+ finalizedLicenseModelList: PropTypes.array,
+ onDataChanged: PropTypes.func.isRequired,
+ onVendorParamChanged: PropTypes.func.isRequired,
+ onSelectSubCategory: PropTypes.func.isRequired,
+ isVendorArchived: PropTypes.bool,
+ onArchivedVendorRemove: PropTypes.func
+ };
- onVendorParamChanged(e) {
- const selectedIndex = e.target.selectedIndex;
- const vendorId = e.target.options[selectedIndex].value;
- this.props.onVendorParamChanged({vendorId}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+ onVendorParamChanged(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const vendorId = e.target.options[selectedIndex].value;
+ this.props.onVendorParamChanged(
+ { vendorId },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ );
+ }
- }
+ onSelectSubCategory(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const subCategory = e.target.options[selectedIndex].value;
+ this.props.onSelectSubCategory(subCategory);
+ }
+ onVendorRemove() {
+ const {
+ finalizedLicenseModelList,
+ vendorName,
+ onVendorParamChanged
+ } = this.props;
+ this.props.onArchivedVendorRemove({
+ finalizedLicenseModelList,
+ onVendorParamChanged,
+ vendorName
+ });
+ }
- onSelectSubCategory(e) {
- const selectedIndex = e.target.selectedIndex;
- const subCategory = e.target.options[selectedIndex].value;
- this.props.onSelectSubCategory(subCategory);
- }
- onVendorRemove() {
- const {finalizedLicenseModelList, vendorName, onVendorParamChanged} = this.props;
- this.props.onArchivedVendorRemove({finalizedLicenseModelList, onVendorParamChanged, vendorName});
- }
-
- render (){
- let {genericFieldInfo} = this.props;
- return (
- <div>
- {genericFieldInfo && <GridSection title={i18n('General')} className='grid-section-general'>
- <GridItem>
- <Input
- data-test-id='vsp-name'
- label={i18n('Name')}
- type='text'
- value={this.props.name}
- isRequired={true}
- errorText={genericFieldInfo.name.errorText}
- isValid={genericFieldInfo.name.isValid}
- onChange={name => name.length <= 25 && this.props.onDataChanged({name}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/>
- {this.props.isVendorArchived ?
- <DeprecatedVlmInfo onVendorRemove={()=>this.onVendorRemove()} vendorName={this.props.vendorName} /> :
- <Input
- data-test-id='vsp-vendor-name'
- label={i18n('Vendor')}
- type='select'
- value={this.props.vendorId}
- onChange={e => this.onVendorParamChanged(e)}>
- {sortByStringProperty(
- this.props.finalizedLicenseModelList,
- 'name'
- ).map(lm => <option key={lm.id} value={lm.id}>{lm.name}</option>)
- }
- </Input>
- }
- <Input
- data-test-id='vsp-category-name'
- label={i18n('Category')}
- type='select'
- value={this.props.subCategory}
- onChange={e => this.onSelectSubCategory(e)}>
- {
- this.props.softwareProductCategories.map(category =>
- category.subcategories &&
- <optgroup
- key={category.name}
- label={category.name}>{category.subcategories.map(sub =>
- <option
- key={sub.uniqueId}
- value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
- </optgroup>
- )
- }
- </Input>
- </GridItem>
- <GridItem colSpan={2} stretch>
- <Input
- data-test-id='vsp-description'
- label={i18n('Description')}
- type='textarea'
- isRequired={true}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- value={this.props.description}
- onChange={description => this.props.onDataChanged({description}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/>
- </GridItem>
- </GridSection>}
- </div>);
- }
+ render() {
+ let { genericFieldInfo } = this.props;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <GridSection
+ title={i18n('General')}
+ className="grid-section-general">
+ <GridItem>
+ <Input
+ data-test-id="vsp-name"
+ label={i18n('Name')}
+ type="text"
+ value={this.props.name}
+ isRequired={true}
+ errorText={genericFieldInfo.name.errorText}
+ isValid={genericFieldInfo.name.isValid}
+ onChange={name =>
+ name.length <= 25 &&
+ this.props.onDataChanged(
+ { name },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ )
+ }
+ />
+ {this.props.isVendorArchived ? (
+ <DeprecatedVlmInfo
+ onVendorRemove={() => this.onVendorRemove()}
+ vendorName={this.props.vendorName}
+ />
+ ) : (
+ <Input
+ data-test-id="vsp-vendor-name"
+ label={i18n('Vendor')}
+ type="select"
+ value={this.props.vendorId}
+ onChange={e =>
+ this.onVendorParamChanged(e)
+ }>
+ {sortByStringProperty(
+ this.props.finalizedLicenseModelList,
+ 'name'
+ ).map(lm => (
+ <option key={lm.id} value={lm.id}>
+ {lm.name}
+ </option>
+ ))}
+ </Input>
+ )}
+ <Input
+ data-test-id="vsp-category-name"
+ label={i18n('Category')}
+ type="select"
+ value={this.props.subCategory}
+ onChange={e => this.onSelectSubCategory(e)}>
+ {this.props.softwareProductCategories.map(
+ category =>
+ category.subcategories && (
+ <optgroup
+ key={category.name}
+ label={category.name}>
+ {category.subcategories.map(
+ sub => (
+ <option
+ key={sub.uniqueId}
+ value={
+ sub.uniqueId
+ }>{`${sub.name} (${
+ category.name
+ })`}</option>
+ )
+ )}
+ </optgroup>
+ )
+ )}
+ </Input>
+ </GridItem>
+ <GridItem colSpan={2} stretch>
+ <Input
+ data-test-id="vsp-description"
+ label={i18n('Description')}
+ type="textarea"
+ isRequired={true}
+ isValid={genericFieldInfo.description.isValid}
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ value={this.props.description}
+ onChange={description =>
+ this.props.onDataChanged(
+ { description },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ )
+ }
+ />
+ </GridItem>
+ </GridSection>
+ )}
+ </div>
+ );
+ }
}
class LicensesSection extends React.Component {
- static propTypes = {
- onVendorParamChanged: PropTypes.func.isRequired,
- vendorId: PropTypes.string,
- licensingVersion: PropTypes.string,
- licensingVersionsList: PropTypes.array,
- licensingData: PropTypes.shape({
- licenceAgreement: PropTypes.string,
- featureGroups: PropTypes.array
- }),
- onFeatureGroupsChanged: PropTypes.func.isRequired,
- onLicensingDataChanged: PropTypes.func.isRequired,
- featureGroupsList: PropTypes.array,
- licenseAgreementList: PropTypes.array,
- isVendorArchived: PropTypes.bool
- };
+ static propTypes = {
+ onVendorParamChanged: PropTypes.func.isRequired,
+ vendorId: PropTypes.string,
+ licensingVersion: PropTypes.string,
+ licensingVersionsList: PropTypes.array,
+ licensingData: PropTypes.shape({
+ licenceAgreement: PropTypes.string,
+ featureGroups: PropTypes.array
+ }),
+ onFeatureGroupsChanged: PropTypes.func.isRequired,
+ onLicensingDataChanged: PropTypes.func.isRequired,
+ featureGroupsList: PropTypes.array,
+ licenseAgreementList: PropTypes.array,
+ isVendorArchived: PropTypes.bool
+ };
- onVendorParamChanged(e) {
- const selectedIndex = e.target.selectedIndex;
- const licensingVersion = e.target.options[selectedIndex].value;
- this.props.onVendorParamChanged({vendorId: this.props.vendorId, licensingVersion}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
- }
+ onVendorParamChanged(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const licensingVersion = e.target.options[selectedIndex].value;
+ this.props.onVendorParamChanged(
+ { vendorId: this.props.vendorId, licensingVersion },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ );
+ }
- onLicensingDataChanged(e) {
- const selectedIndex = e.target.selectedIndex;
- const licenseAgreement = e.target.options[selectedIndex].value;
- this.props.onLicensingDataChanged({licenseAgreement, featureGroups: []});
- }
+ onLicensingDataChanged(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const licenseAgreement = e.target.options[selectedIndex].value;
+ this.props.onLicensingDataChanged({
+ licenseAgreement,
+ featureGroups: []
+ });
+ }
- render(){
- return (
- <GridSection title={i18n('Licenses')}>
- <GridItem>
- <Input
- data-test-id='vsp-licensing-version'
- onChange={e => this.onVendorParamChanged(e)}
- value={this.props.licensingVersion || ''}
- label={i18n('Licensing Version')}
- disabled={this.props.isVendorArchived}
- type='select'>
- {this.props.licensingVersionsList.map(version =>
- <option
- key={version.enum}
- value={version.enum}>{version.title}
- </option>
- )}
- </Input>
- </GridItem>
- <GridItem>
- <Input
- data-test-id='vsp-license-agreement'
- label={i18n('License Agreement')}
- type='select'
- disabled={this.props.isVendorArchived}
- value={this.props.licensingData.licenseAgreement ? this.props.licensingData.licenseAgreement : '' }
- onChange={(e) => this.onLicensingDataChanged(e)}>
- <option key='placeholder' value=''>{i18n('Select...')}</option>
- {this.props.licenseAgreementList.map(la => <option value={la.id} key={la.id}>{la.name}</option>)}
- </Input>
- </GridItem>
- <GridItem>
- {this.props.licensingData.licenseAgreement && (
- <InputOptions
- data-test-id='vsp-feature-group'
- type='select'
- isMultiSelect={true}
- onInputChange={()=>{}}
- disabled={this.props.isVendorArchived}
- onEnumChange={featureGroups => this.props.onFeatureGroupsChanged({featureGroups})}
- multiSelectedEnum={this.props.licensingData.featureGroups}
- name='feature-groups'
- label={i18n('Feature Groups')}
- clearable={false}
- values={this.props.featureGroupsList}/>)
- }
- </GridItem>
- </GridSection>
- );
- }
+ render() {
+ return (
+ <GridSection title={i18n('Licenses')}>
+ <GridItem>
+ <Input
+ data-test-id="vsp-licensing-version"
+ onChange={e => this.onVendorParamChanged(e)}
+ value={this.props.licensingVersion || ''}
+ label={i18n('Licensing Version')}
+ disabled={this.props.isVendorArchived}
+ type="select">
+ {this.props.licensingVersionsList.map(version => (
+ <option key={version.enum} value={version.enum}>
+ {version.title}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="vsp-license-agreement"
+ label={i18n('License Agreement')}
+ type="select"
+ disabled={this.props.isVendorArchived}
+ value={
+ this.props.licensingData.licenseAgreement
+ ? this.props.licensingData.licenseAgreement
+ : ''
+ }
+ onChange={e => this.onLicensingDataChanged(e)}>
+ <option key="placeholder" value="">
+ {i18n('Select...')}
+ </option>
+ {this.props.licenseAgreementList.map(la => (
+ <option value={la.id} key={la.id}>
+ {la.name}
+ </option>
+ ))}
+ </Input>
+ </GridItem>
+ <GridItem>
+ {this.props.licensingData.licenseAgreement && (
+ <InputOptions
+ data-test-id="vsp-feature-group"
+ type="select"
+ isMultiSelect={true}
+ onInputChange={() => {}}
+ disabled={this.props.isVendorArchived}
+ onEnumChange={featureGroups =>
+ this.props.onFeatureGroupsChanged({
+ featureGroups
+ })
+ }
+ multiSelectedEnum={
+ this.props.licensingData.featureGroups
+ }
+ name="feature-groups"
+ label={i18n('Feature Groups')}
+ clearable={false}
+ values={this.props.featureGroupsList}
+ />
+ )}
+ </GridItem>
+ </GridSection>
+ );
+ }
}
-const AvailabilitySection = (props) => (
- <GridSection title={i18n('Availability')}>
- <GridItem colSpan={2}>
- <Input
- data-test-id='vsp-use-availability-zone'
- label={i18n('Use Availability Zones for High Availability')}
- type='checkbox'
- checked={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
- value={props.dataMap['general/availability/useAvailabilityZonesForHighAvailability']}
- onChange={(aZone) => props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} />
- </GridItem>
- </GridSection>
+const AvailabilitySection = props => (
+ <GridSection title={i18n('Availability')}>
+ <GridItem colSpan={2}>
+ <Input
+ data-test-id="vsp-use-availability-zone"
+ label={i18n('Use Availability Zones for High Availability')}
+ type="checkbox"
+ checked={
+ props.dataMap[
+ 'general/availability/useAvailabilityZonesForHighAvailability'
+ ]
+ }
+ value={
+ props.dataMap[
+ 'general/availability/useAvailabilityZonesForHighAvailability'
+ ]
+ }
+ onChange={aZone =>
+ props.onQDataChanged({
+ 'general/availability/useAvailabilityZonesForHighAvailability': aZone
+ })
+ }
+ />
+ </GridItem>
+ </GridSection>
);
-const RegionsSection = (props) => (
- <GridSection title={i18n('Regions')}>
- <GridItem>
- <InputOptions
- data-test-id='vsp-regions'
- type='select'
- isMultiSelect={true}
- onInputChange={()=>{}}
- onEnumChange={(regions) => props.onQDataChanged({'general/regionsData/regions' : regions})}
- multiSelectedEnum={props.dataMap['general/regionsData/regions']}
- name='vsp-regions'
- clearable={false}
- values={props.genericFieldInfo['general/regionsData/regions'].enum} />
- </GridItem>
- </GridSection>
+const RegionsSection = props => (
+ <GridSection title={i18n('Regions')}>
+ <GridItem>
+ <InputOptions
+ data-test-id="vsp-regions"
+ type="select"
+ isMultiSelect={true}
+ onInputChange={() => {}}
+ onEnumChange={regions =>
+ props.onQDataChanged({
+ 'general/regionsData/regions': regions
+ })
+ }
+ multiSelectedEnum={props.dataMap['general/regionsData/regions']}
+ name="vsp-regions"
+ clearable={false}
+ values={
+ props.genericFieldInfo['general/regionsData/regions'].enum
+ }
+ />
+ </GridItem>
+ </GridSection>
);
-const StorageDataReplicationSection = (props) => (
- <GridSection title={i18n('Storage Data Replication')}>
- <GridItem>
- <Input
- data-test-id='vsp-storage-rep-size'
- label={i18n('Storage Replication Size (GB)')}
- type='number'
- isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationSize'].isValid}
- errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationSize'].errorText}
- value={props.dataMap['general/storageDataReplication/storageReplicationSize']}
- onChange={(sRep) => props.onQDataChanged({'general/storageDataReplication/storageReplicationSize' : sRep})} />
- </GridItem>
- <GridItem>
- <Input
- data-test-id='vsp-storage-rep-source'
- label={i18n('Storage Replication Source')}
- type='text'
- isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationSource'].isValid}
- errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationSource'].errorText}
- value={props.dataMap['general/storageDataReplication/storageReplicationSource']}
- onChange={(sRepSource) => props.onQDataChanged({'general/storageDataReplication/storageReplicationSource' : sRepSource})} />
- </GridItem>
- <GridItem>
- <Input
- data-test-id='vsp-storage-rep-freq'
- label={i18n('Storage Replication Freq. (min)')}
- type='number'
- isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationFrequency'].isValid}
- errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationFrequency'].errorText}
- value={props.dataMap['general/storageDataReplication/storageReplicationFrequency']}
- onChange={(sRepFreq) => props.onQDataChanged({'general/storageDataReplication/storageReplicationFrequency' : sRepFreq})} />
- </GridItem>
- <GridItem>
- <Input
- data-test-id='vsp-storage-rep-dest'
- label={i18n('Storage Replication Destination')}
- type='text'
- isValid={props.genericFieldInfo['general/storageDataReplication/storageReplicationDestination'].isValid}
- errorText={props.genericFieldInfo['general/storageDataReplication/storageReplicationDestination'].errorText}
- value={props.dataMap['general/storageDataReplication/storageReplicationDestination']}
- onChange={(sRepDest) => props.onQDataChanged({'general/storageDataReplication/storageReplicationDestination' : sRepDest})} />
- </GridItem>
- </GridSection>
+const StorageDataReplicationSection = props => (
+ <GridSection title={i18n('Storage Data Replication')}>
+ <GridItem>
+ <Input
+ data-test-id="vsp-storage-rep-size"
+ label={i18n('Storage Replication Size (GB)')}
+ type="number"
+ isValid={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationSize'
+ ].isValid
+ }
+ errorText={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationSize'
+ ].errorText
+ }
+ value={
+ props.dataMap[
+ 'general/storageDataReplication/storageReplicationSize'
+ ]
+ }
+ onChange={sRep =>
+ props.onQDataChanged({
+ 'general/storageDataReplication/storageReplicationSize': sRep
+ })
+ }
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="vsp-storage-rep-source"
+ label={i18n('Storage Replication Source')}
+ type="text"
+ isValid={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationSource'
+ ].isValid
+ }
+ errorText={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationSource'
+ ].errorText
+ }
+ value={
+ props.dataMap[
+ 'general/storageDataReplication/storageReplicationSource'
+ ]
+ }
+ onChange={sRepSource =>
+ props.onQDataChanged({
+ 'general/storageDataReplication/storageReplicationSource': sRepSource
+ })
+ }
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="vsp-storage-rep-freq"
+ label={i18n('Storage Replication Freq. (min)')}
+ type="number"
+ isValid={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationFrequency'
+ ].isValid
+ }
+ errorText={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationFrequency'
+ ].errorText
+ }
+ value={
+ props.dataMap[
+ 'general/storageDataReplication/storageReplicationFrequency'
+ ]
+ }
+ onChange={sRepFreq =>
+ props.onQDataChanged({
+ 'general/storageDataReplication/storageReplicationFrequency': sRepFreq
+ })
+ }
+ />
+ </GridItem>
+ <GridItem>
+ <Input
+ data-test-id="vsp-storage-rep-dest"
+ label={i18n('Storage Replication Destination')}
+ type="text"
+ isValid={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationDestination'
+ ].isValid
+ }
+ errorText={
+ props.genericFieldInfo[
+ 'general/storageDataReplication/storageReplicationDestination'
+ ].errorText
+ }
+ value={
+ props.dataMap[
+ 'general/storageDataReplication/storageReplicationDestination'
+ ]
+ }
+ onChange={sRepDest =>
+ props.onQDataChanged({
+ 'general/storageDataReplication/storageReplicationDestination': sRepDest
+ })
+ }
+ />
+ </GridItem>
+ </GridSection>
);
class SoftwareProductDetails extends Component {
+ static propTypes = {
+ vendorName: PropTypes.string,
+ currentSoftwareProduct: PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ category: PropTypes.string,
+ subCategory: PropTypes.string,
+ vendorId: PropTypes.string,
+ vendorName: PropTypes.string,
+ licensingVersion: PropTypes.string,
+ licensingData: PropTypes.shape({
+ licenceAgreement: PropTypes.string,
+ featureGroups: PropTypes.array
+ })
+ }),
+ softwareProductCategories: PropTypes.array,
+ finalizedLicenseModelList: PropTypes.array,
+ licenseAgreementList: PropTypes.array,
+ featureGroupsList: PropTypes.array,
+ onSubmit: PropTypes.func.isRequired,
+ onDataChanged: PropTypes.func.isRequired,
+ onValidityChanged: PropTypes.func.isRequired,
+ qdata: PropTypes.object.isRequired,
+ onQDataChanged: PropTypes.func.isRequired,
+ onVendorParamChanged: PropTypes.func.isRequired
+ };
- static propTypes = {
- vendorName: PropTypes.string,
- currentSoftwareProduct: PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- category: PropTypes.string,
- subCategory: PropTypes.string,
- vendorId: PropTypes.string,
- vendorName: PropTypes.string,
- licensingVersion: PropTypes.string,
- licensingData: PropTypes.shape({
- licenceAgreement: PropTypes.string,
- featureGroups: PropTypes.array
- })
- }),
- softwareProductCategories: PropTypes.array,
- finalizedLicenseModelList: PropTypes.array,
- licenseAgreementList: PropTypes.array,
- featureGroupsList: PropTypes.array,
- onSubmit: PropTypes.func.isRequired,
- onDataChanged: PropTypes.func.isRequired,
- onValidityChanged: PropTypes.func.isRequired,
- qdata: PropTypes.object.isRequired,
- onQDataChanged: PropTypes.func.isRequired,
- onVendorParamChanged: PropTypes.func.isRequired
- };
-
- prepareDataForGeneralSection(){
- let {softwareProductCategories, finalizedLicenseModelList, onDataChanged, currentSoftwareProduct, genericFieldInfo, isVendorArchived, onArchivedVendorRemove} = this.props;
- let {name, description, vendorId, subCategory, vendorName} = currentSoftwareProduct;
- return {
- name,
- description,
- vendorId,
- subCategory,
- softwareProductCategories,
- finalizedLicenseModelList,
- onDataChanged,
- onVendorParamChanged: args => this.onVendorParamChanged(args),
- onSelectSubCategory: args => this.onSelectSubCategory(args),
- genericFieldInfo,
- vendorName,
- isVendorArchived,
- onArchivedVendorRemove
- };
-
- }
+ prepareDataForGeneralSection() {
+ let {
+ softwareProductCategories,
+ finalizedLicenseModelList,
+ onDataChanged,
+ currentSoftwareProduct,
+ genericFieldInfo,
+ isVendorArchived,
+ onArchivedVendorRemove
+ } = this.props;
+ let {
+ name,
+ description,
+ vendorId,
+ subCategory,
+ vendorName
+ } = currentSoftwareProduct;
+ return {
+ name,
+ description,
+ vendorId,
+ subCategory,
+ softwareProductCategories,
+ finalizedLicenseModelList,
+ onDataChanged,
+ onVendorParamChanged: args => this.onVendorParamChanged(args),
+ onSelectSubCategory: args => this.onSelectSubCategory(args),
+ genericFieldInfo,
+ vendorName,
+ isVendorArchived,
+ onArchivedVendorRemove
+ };
+ }
- prepareDataForLicensesSection(){
- let { featureGroupsList, licenseAgreementList, currentSoftwareProduct, isVendorArchived} = this.props;
- let {vendorId, licensingVersion, licensingData = {}} = currentSoftwareProduct;
- return {
- onVendorParamChanged: args => this.onVendorParamChanged(args),
- vendorId,
- licensingVersion,
- licensingVersionsList: this.buildLicensingVersionsListItems(),
- licensingData,
- onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args),
- onLicensingDataChanged: args => this.onLicensingDataChanged(args),
- featureGroupsList,
- licenseAgreementList,
- isVendorArchived
- };
+ prepareDataForLicensesSection() {
+ let {
+ featureGroupsList,
+ licenseAgreementList,
+ currentSoftwareProduct,
+ isVendorArchived
+ } = this.props;
+ let {
+ vendorId,
+ licensingVersion,
+ licensingData = {}
+ } = currentSoftwareProduct;
+ return {
+ onVendorParamChanged: args => this.onVendorParamChanged(args),
+ vendorId,
+ licensingVersion,
+ licensingVersionsList: this.buildLicensingVersionsListItems(),
+ licensingData,
+ onFeatureGroupsChanged: args => this.onFeatureGroupsChanged(args),
+ onLicensingDataChanged: args => this.onLicensingDataChanged(args),
+ featureGroupsList,
+ licenseAgreementList,
+ isVendorArchived
+ };
+ }
- }
+ render() {
+ let { currentSoftwareProduct } = this.props;
+ let { qdata, onQDataChanged, dataMap, qGenericFieldInfo } = this.props;
+ let { isReadOnlyMode } = this.props;
- render() {
- let {currentSoftwareProduct} = this.props;
- let {qdata, onQDataChanged, dataMap, qGenericFieldInfo} = this.props;
- let {isReadOnlyMode} = this.props;
+ return (
+ <div className="vsp-details-page">
+ <Form
+ ref={validationForm =>
+ (this.validationForm = validationForm)
+ }
+ className="vsp-general-tab"
+ hasButtons={false}
+ formReady={null}
+ isValid={this.props.isFormValid}
+ onSubmit={() =>
+ this.props.onSubmit(currentSoftwareProduct, qdata)
+ }
+ onValidityChanged={isValidityData =>
+ this.props.onValidityChanged(isValidityData)
+ }
+ isReadOnlyMode={isReadOnlyMode}>
+ <GeneralSection {...this.prepareDataForGeneralSection()} />
+ <LicensesSection
+ {...this.prepareDataForLicensesSection()}
+ />
+ <AvailabilitySection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ />
+ <RegionsSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ genericFieldInfo={qGenericFieldInfo}
+ />
+ <StorageDataReplicationSection
+ onQDataChanged={onQDataChanged}
+ dataMap={dataMap}
+ genericFieldInfo={qGenericFieldInfo}
+ />
+ </Form>
+ </div>
+ );
+ }
- return (
- <div className='vsp-details-page'>
- <Form
- ref={(validationForm) => this.validationForm = validationForm}
- className='vsp-general-tab'
- hasButtons={false}
- formReady={null}
- isValid={this.props.isFormValid}
- onSubmit={() => this.props.onSubmit(currentSoftwareProduct, qdata)}
- onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
- isReadOnlyMode={isReadOnlyMode}>
- <GeneralSection {...this.prepareDataForGeneralSection()}/>
- <LicensesSection {...this.prepareDataForLicensesSection()}/>
- <AvailabilitySection onQDataChanged={onQDataChanged} dataMap={dataMap} />
- <RegionsSection onQDataChanged={onQDataChanged} dataMap={dataMap} genericFieldInfo={qGenericFieldInfo} />
- <StorageDataReplicationSection onQDataChanged={onQDataChanged} dataMap={dataMap} genericFieldInfo={qGenericFieldInfo} />
- </Form>
- </div>
- );
- }
+ onVendorParamChanged({ vendorId, licensingVersion }) {
+ let { finalizedLicenseModelList, onVendorParamChanged } = this.props;
+ if (!licensingVersion) {
+ const licensingVersionsList = this.buildLicensingVersionsListItems();
+ licensingVersion = licensingVersionsList[0].enum;
+ }
- onVendorParamChanged({vendorId, licensingVersion}) {
-
- let {finalizedLicenseModelList, onVendorParamChanged} = this.props;
- if(!licensingVersion) {
- const licensingVersionsList = this.buildLicensingVersionsListItems();
- licensingVersion = licensingVersionsList[0].enum;
- }
-
- if (!vendorId) {
- vendorId = finalizedLicenseModelList[0].id;
- }
-
- let vendorName = finalizedLicenseModelList.find(licenseModelItem => licenseModelItem.id === vendorId).name || '';
- let deltaData = {
- vendorId,
- vendorName,
- licensingVersion,
- licensingData: {}
- };
+ if (!vendorId) {
+ vendorId = finalizedLicenseModelList[0].id;
+ }
- onVendorParamChanged(deltaData, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+ let vendorName =
+ finalizedLicenseModelList.find(
+ licenseModelItem => licenseModelItem.id === vendorId
+ ).name || '';
+ let deltaData = {
+ vendorId,
+ vendorName,
+ licensingVersion,
+ licensingData: {}
+ };
- }
+ onVendorParamChanged(deltaData, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
+ }
- buildLicensingVersionsListItems() {
- let {licensingVersionsList} = this.props;
+ buildLicensingVersionsListItems() {
+ let { licensingVersionsList } = this.props;
- let licensingVersionsListItems = [{
- enum: '',
- title: i18n('Select...')
- }];
+ let licensingVersionsListItems = [
+ {
+ enum: '',
+ title: i18n('Select...')
+ }
+ ];
- return licensingVersionsListItems.concat(licensingVersionsList.map(version => ({enum: version.id, title: version.name})));
- }
+ return licensingVersionsListItems.concat(
+ licensingVersionsList.map(version => ({
+ enum: version.id,
+ title: version.name
+ }))
+ );
+ }
- onFeatureGroupsChanged({featureGroups}) {
- this.onLicensingDataChanged({featureGroups});
- }
+ onFeatureGroupsChanged({ featureGroups }) {
+ this.onLicensingDataChanged({ featureGroups });
+ }
- onLicensingDataChanged(deltaData) {
- this.props.onDataChanged({
- licensingData: {
- ...this.props.currentSoftwareProduct.licensingData,
- ...deltaData
- }
- }, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
- }
+ onLicensingDataChanged(deltaData) {
+ this.props.onDataChanged(
+ {
+ licensingData: {
+ ...this.props.currentSoftwareProduct.licensingData,
+ ...deltaData
+ }
+ },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ );
+ }
- onSelectSubCategory(subCategory) {
- let {softwareProductCategories, onDataChanged} = this.props;
- let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
- onDataChanged({category, subCategory}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS);
- }
+ onSelectSubCategory(subCategory) {
+ let { softwareProductCategories, onDataChanged } = this.props;
+ let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(
+ subCategory,
+ softwareProductCategories
+ );
+ onDataChanged(
+ { category, subCategory },
+ forms.VENDOR_SOFTWARE_PRODUCT_DETAILS
+ );
+ }
- save(){
- return this.validationForm.handleFormSubmit(new Event('dummy'));
- }
+ save() {
+ return this.validationForm.handleFormSubmit(new Event('dummy'));
+ }
}
export default SoftwareProductDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
index 64e0d562ce..34bfceec24 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
@@ -13,106 +13,134 @@
* 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 SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
import LandingPageView from './SoftwareProductLandingPageView.jsx';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {onboardingMethod} from '../SoftwareProductConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { onboardingMethod } from '../SoftwareProductConstants.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
export const mapStateToProps = ({
- softwareProduct,
- licenseModel: {licenseAgreement},
+ softwareProduct,
+ licenseModel: { licenseAgreement }
}) => {
- let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = [], } = softwareProduct;
- let {licensingData = {}} = currentSoftwareProduct;
- let {licenseAgreementList} = licenseAgreement;
- let {componentsList} = softwareProductComponents;
- let licenseAgreementName = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
- if (licenseAgreementName) {
- licenseAgreementName = licenseAgreementName.name;
- } else if (licenseAgreementList.length === 0) { // otherwise the state of traingle svgicon will be updated post unmounting
- licenseAgreementName = null;
- }
-
- let categoryName = '', subCategoryName = '', fullCategoryDisplayName = '';
- const category = softwareProductCategories.find(ca => ca.uniqueId === currentSoftwareProduct.category);
- if (category) {
- categoryName = category.name;
- const subcategories = category.subcategories || [];
- const subcat = subcategories.find(sc => sc.uniqueId === currentSoftwareProduct.subCategory);
- subCategoryName = subcat && subcat.name ? subcat.name : '';
- }
- fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductComponents,
+ softwareProductCategories = []
+ } = softwareProduct;
+ let { licensingData = {} } = currentSoftwareProduct;
+ let { licenseAgreementList } = licenseAgreement;
+ let { componentsList } = softwareProductComponents;
+ let licenseAgreementName = licenseAgreementList.find(
+ la => la.id === licensingData.licenseAgreement
+ );
+ if (licenseAgreementName) {
+ licenseAgreementName = licenseAgreementName.name;
+ } else if (licenseAgreementList.length === 0) {
+ // otherwise the state of traingle svgicon will be updated post unmounting
+ licenseAgreementName = null;
+ }
+ let categoryName = '',
+ subCategoryName = '',
+ fullCategoryDisplayName = '';
+ const category = softwareProductCategories.find(
+ ca => ca.uniqueId === currentSoftwareProduct.category
+ );
+ if (category) {
+ categoryName = category.name;
+ const subcategories = category.subcategories || [];
+ const subcat = subcategories.find(
+ sc => sc.uniqueId === currentSoftwareProduct.subCategory
+ );
+ subCategoryName = subcat && subcat.name ? subcat.name : '';
+ }
+ fullCategoryDisplayName = `${subCategoryName} (${categoryName})`;
- return {
- currentSoftwareProduct: {
- ...currentSoftwareProduct,
- licenseAgreementName,
- fullCategoryDisplayName
- },
- componentsList,
- isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
- };
+ return {
+ currentSoftwareProduct: {
+ ...currentSoftwareProduct,
+ licenseAgreementName,
+ fullCategoryDisplayName
+ },
+ componentsList,
+ isManual:
+ currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL
+ };
};
-const mapActionsToProps = (dispatch, {version}) => {
- return {
- onDetailsSelect: ({id: softwareProductId}) =>
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- }),
- onCandidateInProcess: (softwareProductId) => ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version}
- }),
- onUpload: (softwareProductId, formData) =>
- SoftwareProductActionHelper.uploadFile(dispatch, {
- softwareProductId,
- formData,
- failedNotificationTitle: i18n('Upload validation failed'),
- version
- }),
+const mapActionsToProps = (dispatch, { version }) => {
+ return {
+ onDetailsSelect: ({ id: softwareProductId }) =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ }),
+ onCandidateInProcess: softwareProductId =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version }
+ }),
+ onUpload: (softwareProductId, formData) =>
+ SoftwareProductActionHelper.uploadFile(dispatch, {
+ softwareProductId,
+ formData,
+ failedNotificationTitle: i18n('Upload validation failed'),
+ version
+ }),
- onUploadConfirmation: (softwareProductId, formData) =>
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Upload will erase existing data. Do you want to continue?'),
- confirmationButtonText: i18n('Continue'),
- title: i18n('Warning'),
- onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
- softwareProductId,
- formData,
- failedNotificationTitle: i18n('Upload validation failed'),
- version
- }),
- onDeclined: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- })
- }
- }),
+ onUploadConfirmation: (softwareProductId, formData) =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n(
+ 'Upload will erase existing data. Do you want to continue?'
+ ),
+ confirmationButtonText: i18n('Continue'),
+ title: i18n('Warning'),
+ onConfirmed: () =>
+ SoftwareProductActionHelper.uploadFile(dispatch, {
+ softwareProductId,
+ formData,
+ failedNotificationTitle: i18n(
+ 'Upload validation failed'
+ ),
+ version
+ }),
+ onDeclined: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ })
+ }
+ }),
- onInvalidFileSizeUpload: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_ERROR,
- data: {
- title: i18n('Upload Failed'),
- confirmationButtonText: i18n('Continue'),
- msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist')
- }
- }),
- onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, {
- screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId, version, componentId}
- }),
- /** for the next version */
- onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
- };
+ onInvalidFileSizeUpload: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_ERROR,
+ data: {
+ title: i18n('Upload Failed'),
+ confirmationButtonText: i18n('Continue'),
+ msg: i18n(
+ "no zip or csar file was uploaded or expected file doesn't exist"
+ )
+ }
+ }),
+ onComponentSelect: ({ id: softwareProductId, componentId }) =>
+ ScreensHelper.loadScreen(dispatch, {
+ screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId, version, componentId }
+ }),
+ /** for the next version */
+ onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(LandingPageView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(LandingPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index a73a849a08..bc8a2be646 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -18,7 +18,6 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import Dropzone from 'react-dropzone';
-
import i18n from 'nfvo-utils/i18n/i18n.js';
import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
@@ -26,192 +25,237 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js';
const SoftwareProductPropType = PropTypes.shape({
- name: PropTypes.string,
- description: PropTypes.string,
- version: PropTypes.string,
- id: PropTypes.string,
- categoryId: PropTypes.string,
- vendorId: PropTypes.string,
- status: PropTypes.string,
- licensingData: PropTypes.object,
- validationData: PropTypes.object
+ name: PropTypes.string,
+ description: PropTypes.string,
+ version: PropTypes.string,
+ id: PropTypes.string,
+ categoryId: PropTypes.string,
+ vendorId: PropTypes.string,
+ status: PropTypes.string,
+ licensingData: PropTypes.object,
+ validationData: PropTypes.object
});
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 SoftwareProductLandingPageView extends React.Component {
+ state = {
+ fileName: '',
+ dragging: false,
+ files: []
+ };
+
+ static propTypes = {
+ currentSoftwareProduct: SoftwareProductPropType,
+ isReadOnlyMode: PropTypes.bool,
+ componentsList: PropTypes.arrayOf(ComponentPropType),
+ version: PropTypes.object,
+ onDetailsSelect: PropTypes.func,
+ onUpload: PropTypes.func,
+ onUploadConfirmation: PropTypes.func,
+ onInvalidFileSizeUpload: PropTypes.func,
+ onComponentSelect: PropTypes.func,
+ onAddComponent: PropTypes.func
+ };
+ componentDidMount() {
+ const { onCandidateInProcess, currentSoftwareProduct } = this.props;
+ if (currentSoftwareProduct.candidateOnboardingOrigin) {
+ onCandidateInProcess(currentSoftwareProduct.id);
+ }
+ }
+ render() {
+ let {
+ currentSoftwareProduct,
+ isReadOnlyMode,
+ isManual,
+ onDetailsSelect
+ } = this.props;
+ return (
+ <div className="software-product-landing-wrapper">
+ <Dropzone
+ className={classnames('software-product-landing-view', {
+ 'active-dragging': this.state.dragging
+ })}
+ onDrop={files =>
+ this.handleImportSubmit(files, isReadOnlyMode, isManual)
+ }
+ onDragEnter={() =>
+ this.handleOnDragEnter(isReadOnlyMode, isManual)
+ }
+ onDragLeave={() => this.setState({ dragging: false })}
+ multiple={false}
+ disableClick={true}
+ ref="fileInput"
+ name="fileInput"
+ accept=".zip, .csar">
+ <div className="draggable-wrapper">
+ <div className="software-product-landing-view-top">
+ <div className="row">
+ <ProductSummary
+ currentSoftwareProduct={
+ currentSoftwareProduct
+ }
+ onDetailsSelect={onDetailsSelect}
+ />
+ {this.renderProductDetails(
+ isManual,
+ isReadOnlyMode
+ )}
+ </div>
+ </div>
+ </div>
+ </Dropzone>
+ <SoftwareProductComponentsList />
+ </div>
+ );
+ }
+
+ handleOnDragEnter(isReadOnlyMode, isManual) {
+ if (!isReadOnlyMode && !isManual) {
+ this.setState({ dragging: true });
+ }
+ }
+
+ renderProductDetails(isManual, isReadOnlyMode) {
+ return (
+ <div className="details-panel">
+ {!isManual && (
+ <div>
+ <div className="software-product-landing-view-heading-title">
+ {i18n('Software Product Attachments')}
+ </div>
+ <DraggableUploadFileBox
+ dataTestId="upload-btn"
+ isReadOnlyMode={isReadOnlyMode}
+ className={classnames(
+ 'software-product-landing-view-top-block-col-upl',
+ { disabled: isReadOnlyMode }
+ )}
+ onClick={() => this.refs.fileInput.open()}
+ />
+ </div>
+ )}
+ </div>
+ );
+ }
+
+ handleImportSubmit(files, isReadOnlyMode, isManual) {
+ if (isReadOnlyMode || isManual) {
+ return;
+ }
+ if (files[0] && files[0].size) {
+ this.setState({
+ fileName: files[0].name,
+ dragging: false,
+ complete: '0'
+ });
+ this.startUploading(files);
+ } else {
+ this.setState({
+ dragging: false
+ });
+ this.props.onInvalidFileSizeUpload();
+ }
+ }
- state = {
-
- fileName: '',
- dragging: false,
- files: []
- };
-
- static propTypes = {
- currentSoftwareProduct: SoftwareProductPropType,
- isReadOnlyMode: PropTypes.bool,
- componentsList: PropTypes.arrayOf(ComponentPropType),
- version: PropTypes.object,
- onDetailsSelect: PropTypes.func,
- onUpload: PropTypes.func,
- onUploadConfirmation: PropTypes.func,
- onInvalidFileSizeUpload: PropTypes.func,
- onComponentSelect: PropTypes.func,
- onAddComponent: PropTypes.func
- };
- componentDidMount() {
- const {onCandidateInProcess, currentSoftwareProduct} = this.props;
- if (currentSoftwareProduct.candidateOnboardingOrigin) {
- onCandidateInProcess(currentSoftwareProduct.id);
- }
- }
- render() {
- let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} = this.props;
- return (
- <div className='software-product-landing-wrapper'>
- <Dropzone
- className={classnames('software-product-landing-view', {'active-dragging': this.state.dragging})}
- onDrop={files => this.handleImportSubmit(files, isReadOnlyMode, isManual)}
- onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode, isManual)}
- onDragLeave={() => this.setState({dragging:false})}
- multiple={false}
- disableClick={true}
- ref='fileInput'
- name='fileInput'
- accept='.zip, .csar'>
- <div className='draggable-wrapper'>
- <div className='software-product-landing-view-top'>
- <div className='row'>
- <ProductSummary currentSoftwareProduct={currentSoftwareProduct} onDetailsSelect={onDetailsSelect} />
- {this.renderProductDetails(isManual, isReadOnlyMode)}
- </div>
- </div>
- </div>
- </Dropzone>
- <SoftwareProductComponentsList/>
- </div>
- );
- }
-
- handleOnDragEnter(isReadOnlyMode, isManual) {
- if (!isReadOnlyMode && !isManual) {
- this.setState({dragging: true});
- }
- }
-
- renderProductDetails(isManual, isReadOnlyMode) {
- return (
- <div className='details-panel'>
- { !isManual && <div>
- <div className='software-product-landing-view-heading-title'>{i18n('Software Product Attachments')}</div>
- <DraggableUploadFileBox
- dataTestId='upload-btn'
- isReadOnlyMode={isReadOnlyMode}
- className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}
- onClick={() => this.refs.fileInput.open()}/>
- </div>
- }
- </div>
- );
- }
-
- handleImportSubmit(files, isReadOnlyMode, isManual) {
- if (isReadOnlyMode || isManual) {
- return;
- }
- if (files[0] && files[0].size) {
- this.setState({
- fileName: files[0].name,
- dragging: false,
- complete: '0',
- });
- this.startUploading(files);
- }
- else {
- this.setState({
- dragging: false
- });
- this.props.onInvalidFileSizeUpload();
- }
-
- }
-
- startUploading(files) {
- let {onUpload, currentSoftwareProduct, onUploadConfirmation} = this.props;
-
- let {validationData} = currentSoftwareProduct;
-
- if (!(files && files.length)) {
- return;
- }
- let file = files[0];
- let formData = new FormData();
- formData.append('upload', file);
- this.refs.fileInput.value = '';
-
- if (validationData) {
- onUploadConfirmation(currentSoftwareProduct.id, formData);
- }else {
- onUpload(currentSoftwareProduct.id, formData);
- }
-
- }
+ startUploading(files) {
+ let {
+ onUpload,
+ currentSoftwareProduct,
+ onUploadConfirmation
+ } = this.props;
+
+ let { validationData } = currentSoftwareProduct;
+
+ if (!(files && files.length)) {
+ return;
+ }
+ let file = files[0];
+ let formData = new FormData();
+ formData.append('upload', file);
+ this.refs.fileInput.value = '';
+
+ if (validationData) {
+ onUploadConfirmation(currentSoftwareProduct.id, formData);
+ } else {
+ onUpload(currentSoftwareProduct.id, formData);
+ }
+ }
}
-const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => {
- let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''} = currentSoftwareProduct;
- return (
- <div className='details-panel'>
- <div className='software-product-landing-view-heading-title'>{i18n('Software Product Details')}</div>
- <div
- className='software-product-landing-view-top-block clickable'
- onClick={() => onDetailsSelect(currentSoftwareProduct)}>
- <div className='details-container'>
- <div className='single-detail-section title-section'>
- <div className='single-detail-section title-text'>
- {name}
- </div>
- </div>
- <div className='details-section'>
- <div className='multiple-details-section'>
- <div className='detail-col' >
- <div className='title'>{i18n('Vendor')}</div>
- <div className='description'>{vendorName}</div>
- </div>
- <div className='detail-col'>
- <div className='title'>{i18n('Category')}</div>
- <div className='description'>{fullCategoryDisplayName}</div>
- </div>
- <div className='detail-col'>
- <div className='title extra-large'>{i18n('License Agreement')}</div>
- <div className='description'>
- <LicenseAgreement licenseAgreementName={licenseAgreementName}/>
- </div>
- </div>
- </div>
- <div className='single-detail-section'>
- <div className='title'>{i18n('Description')}</div>
- <div className='description'>{description}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- );
+const ProductSummary = ({ currentSoftwareProduct, onDetailsSelect }) => {
+ let {
+ name = '',
+ description = '',
+ vendorName = '',
+ fullCategoryDisplayName = '',
+ licenseAgreementName = ''
+ } = currentSoftwareProduct;
+ return (
+ <div className="details-panel">
+ <div className="software-product-landing-view-heading-title">
+ {i18n('Software Product Details')}
+ </div>
+ <div
+ className="software-product-landing-view-top-block clickable"
+ onClick={() => onDetailsSelect(currentSoftwareProduct)}>
+ <div className="details-container">
+ <div className="single-detail-section title-section">
+ <div className="single-detail-section title-text">
+ {name}
+ </div>
+ </div>
+ <div className="details-section">
+ <div className="multiple-details-section">
+ <div className="detail-col">
+ <div className="title">{i18n('Vendor')}</div>
+ <div className="description">{vendorName}</div>
+ </div>
+ <div className="detail-col">
+ <div className="title">{i18n('Category')}</div>
+ <div className="description">
+ {fullCategoryDisplayName}
+ </div>
+ </div>
+ <div className="detail-col">
+ <div className="title extra-large">
+ {i18n('License Agreement')}
+ </div>
+ <div className="description">
+ <LicenseAgreement
+ licenseAgreementName={
+ licenseAgreementName
+ }
+ />
+ </div>
+ </div>
+ </div>
+ <div className="single-detail-section">
+ <div className="title">{i18n('Description')}</div>
+ <div className="description">{description}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
};
-
-const LicenseAgreement = ({licenseAgreementName}) => {
- if (!licenseAgreementName) {
- return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
- }
- return <div>{licenseAgreementName}</div>;
+const LicenseAgreement = ({ licenseAgreementName }) => {
+ if (!licenseAgreementName) {
+ return (
+ <div className="missing-license">
+ <SVGIcon color="warning" name="exclamationTriangleFull" />
+ <div className="warning-text">{i18n('Missing')}</div>
+ </div>
+ );
+ }
+ return <div>{licenseAgreementName}</div>;
};
export default SoftwareProductLandingPageView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
index 6161eadba9..27dd471a00 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworks.js
@@ -13,13 +13,14 @@
* 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 SoftwareProductNetworksView from './SoftwareProductNetworksView.jsx';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductNetworks: {networksList = []}} = softwareProduct;
- return {networksList};
+export const mapStateToProps = ({ softwareProduct }) => {
+ let { softwareProductNetworks: { networksList = [] } } = softwareProduct;
+ return { networksList };
};
-export default connect(mapStateToProps, null, null, {withRef: true})(SoftwareProductNetworksView);
-
+export default connect(mapStateToProps, null, null, { withRef: true })(
+ SoftwareProductNetworksView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
index 4cb460ecc6..388c641b46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksActionHelper.js
@@ -13,30 +13,29 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductNetworksConstants.js';
+import { actionTypes } from './SoftwareProductNetworksConstants.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
function baseUrl(vspId, version) {
- let {id: versionId} = version;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/networks`;
+ let { id: versionId } = version;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/networks`;
}
-
function fetchNetworksList(softwareProductId, version) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
const SoftwareProductNetworksActionHelper = {
- fetchNetworksList(dispatch, {softwareProductId, version}) {
- return fetchNetworksList(softwareProductId, version).then(response => {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS,
- networksList: response.results
- });
- });
- }
+ fetchNetworksList(dispatch, { softwareProductId, version }) {
+ return fetchNetworksList(softwareProductId, version).then(response => {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS,
+ networksList: response.results
+ });
+ });
+ }
};
-export default SoftwareProductNetworksActionHelper;
+export default SoftwareProductNetworksActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
index a3d5578dc4..17e4bdfe8d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksConstants.js
@@ -16,5 +16,5 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- FETCH_SOFTWARE_PRODUCT_NETWORKS: null,
+ FETCH_SOFTWARE_PRODUCT_NETWORKS: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
index e7c2fcb045..796de822df 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksListReducer.js
@@ -13,13 +13,13 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductNetworksConstants.js';
+import { actionTypes } from './SoftwareProductNetworksConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS:
- return [...action.networksList];
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FETCH_SOFTWARE_PRODUCT_NETWORKS:
+ return [...action.networksList];
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
index e8c365f124..458f3192f4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/networks/SoftwareProductNetworksView.jsx
@@ -22,73 +22,76 @@ import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.js
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
class SoftwareProductNetworksView extends React.Component {
+ static propTypes = {
+ networksList: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ dhcp: PropTypes.bool.isRequired
+ })
+ ).isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired
+ };
- static propTypes = {
- networksList: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- dhcp: PropTypes.bool.isRequired
- })).isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired
- };
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
+ render() {
+ const { localFilter } = this.state;
+ const { isReadOnlyMode } = this.props;
- render() {
- const {localFilter} = this.state;
- const {isReadOnlyMode} = this.props;
+ return (
+ <div className="vsp-networks-page">
+ <ListEditorView
+ title={i18n('Networks')}
+ filterValue={localFilter}
+ placeholder={i18n('Filter Networks')}
+ onFilter={value => this.setState({ localFilter: value })}
+ twoColumns>
+ {this.filterList().map(network =>
+ this.renderNetworksListItem({ network, isReadOnlyMode })
+ )}
+ </ListEditorView>
+ </div>
+ );
+ }
- return (
- <div className='vsp-networks-page'>
- <ListEditorView
- title={i18n('Networks')}
- filterValue={localFilter}
- placeholder={i18n('Filter Networks')}
- onFilter={value => this.setState({localFilter: value})}
- twoColumns>
- {this.filterList().map(network => this.renderNetworksListItem({network, isReadOnlyMode}))}
- </ListEditorView>
- </div>
- );
- }
+ renderNetworksListItem({ network, isReadOnlyMode }) {
+ let { id, name, dhcp } = network;
+ return (
+ <ListEditorItemView
+ key={id}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}>
+ <ListEditorItemViewField>
+ <div className="name">{name}</div>
+ </ListEditorItemViewField>
+ <ListEditorItemViewField>
+ <div className="details">
+ <div className="title">{i18n('DHCP')}</div>
+ <div className="artifact-name">
+ {dhcp ? i18n('YES') : i18n('NO')}
+ </div>
+ </div>
+ </ListEditorItemViewField>
+ </ListEditorItemView>
+ );
+ }
- renderNetworksListItem({network, isReadOnlyMode}) {
- let {id, name, dhcp} = network;
- return (
- <ListEditorItemView
- key={id}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}>
+ filterList() {
+ let { networksList } = this.props;
- <ListEditorItemViewField>
- <div className='name'>{name}</div>
- </ListEditorItemViewField>
- <ListEditorItemViewField>
- <div className='details'>
- <div className='title'>{i18n('DHCP')}</div>
- <div className='artifact-name'>{dhcp ? i18n('YES') : i18n('NO')}</div>
- </div>
- </ListEditorItemViewField>
- </ListEditorItemView>
- );
- }
-
- filterList() {
- let {networksList} = this.props;
-
- let {localFilter} = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return networksList.filter(({name = ''}) => {
- return escape(name).match(filter);
- });
- }
- else {
- return networksList;
- }
- }
+ let { localFilter } = this.state;
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return networksList.filter(({ name = '' }) => {
+ return escape(name).match(filter);
+ });
+ } else {
+ return networksList;
+ }
+ }
}
export default SoftwareProductNetworksView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
index aa39c87dd0..cee46abc69 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-
class SoftwareProductProcessesListView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
-
- static propTypes = {
- onAddProcess: PropTypes.func.isRequired,
- onEditProcess: PropTypes.func.isRequired,
- onDeleteProcess: PropTypes.func.isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired,
- currentSoftwareProduct:PropTypes.object,
- addButtonTitle: PropTypes.string
- };
-
- render() {
- const {localFilter} = this.state;
- let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props;
+ static propTypes = {
+ onAddProcess: PropTypes.func.isRequired,
+ onEditProcess: PropTypes.func.isRequired,
+ onDeleteProcess: PropTypes.func.isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ currentSoftwareProduct: PropTypes.object,
+ addButtonTitle: PropTypes.string
+ };
- return (
- <ListEditorView
- plusButtonTitle={addButtonTitle}
- filterValue={localFilter}
- placeholder={i18n('Filter Process')}
- onAdd={onAddProcess}
- isReadOnlyMode={isReadOnlyMode}
- title={i18n('Process Details')}
- onFilter={value => this.setState({localFilter: value})}>
- {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
- </ListEditorView>);
- }
+ render() {
+ const { localFilter } = this.state;
+ let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props;
- renderProcessListItem(process, isReadOnlyMode) {
- let {id, name, description, artifactName = ''} = process;
- let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props;
- return (
- <ListEditorItemView
- key={id}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}
- onSelect={() => onEditProcess(process)}
- onDelete={() => onDeleteProcess(process, version)}>
+ return (
+ <ListEditorView
+ plusButtonTitle={addButtonTitle}
+ filterValue={localFilter}
+ placeholder={i18n('Filter Process')}
+ onAdd={onAddProcess}
+ isReadOnlyMode={isReadOnlyMode}
+ title={i18n('Process Details')}
+ onFilter={value => this.setState({ localFilter: value })}>
+ {this.filterList().map(processes =>
+ this.renderProcessListItem(processes, isReadOnlyMode)
+ )}
+ </ListEditorView>
+ );
+ }
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='name'>{name}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Artifact name')}</div>
- <div className='artifact-name'>{artifactName}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Notes')}</div>
- <div className='description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
+ renderProcessListItem(process, isReadOnlyMode) {
+ let { id, name, description, artifactName = '' } = process;
+ let {
+ currentSoftwareProduct: { version },
+ onEditProcess,
+ onDeleteProcess
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}
+ onSelect={() => onEditProcess(process)}
+ onDelete={() => onDeleteProcess(process, version)}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="name">{name}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Artifact name')}</div>
+ <div className="artifact-name">{artifactName}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Notes')}</div>
+ <div className="description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
- filterList() {
- let {processesList} = this.props;
- let {localFilter} = this.state;
+ filterList() {
+ let { processesList } = this.props;
+ let { localFilter } = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return processesList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return processesList;
- }
- }
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return processesList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return processesList;
+ }
+ }
}
export default SoftwareProductProcessesListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index b0403abde5..fb44530dae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -13,40 +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 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
- let {data} = processesEditor;
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductProcesses: { processesList, processesEditor }
+ } = softwareProduct;
+ let { data } = processesEditor;
- return {
- currentSoftwareProduct,
- processesList,
- isDisplayEditor: Boolean(data),
- isModalInEditMode: Boolean(data && data.id)
- };
+ return {
+ currentSoftwareProduct,
+ processesList,
+ isDisplayEditor: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
- onEditProcess: (process) => SoftwareProductProcessesActionHelper.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: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
- {process, softwareProductId, version})
- }
- })
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onAddProcess: () =>
+ SoftwareProductProcessesActionHelper.openEditor(dispatch),
+ onEditProcess: process =>
+ SoftwareProductProcessesActionHelper.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: () =>
+ SoftwareProductProcessesActionHelper.deleteProcess(
+ dispatch,
+ {
+ process,
+ softwareProductId,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductProcessesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductProcessesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index 8fd370b6cc..7c72c5b892 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -13,127 +13,145 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
function baseUrl(vspId, version) {
- let {id: versionId} = version;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
+ let { id: versionId } = version;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
}
function putProcess(softwareProductId, version, process) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version)}/${process.id}`,
+ {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ }
+ );
}
function postProcess(softwareProductId, version, process) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+ return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ });
}
function deleteProcess(softwareProductId, version, processId) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version)}/${processId}`
+ );
}
-function uploadFileToProcess(softwareProductId, version, processId, formData)
-{
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData);
+function uploadFileToProcess(softwareProductId, version, processId, formData) {
+ return RestAPIUtil.post(
+ `${baseUrl(softwareProductId, version)}/${processId}/upload`,
+ formData
+ );
}
function fetchProcesses(softwareProductId, version) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
const SoftwareProductActionHelper = {
-
- fetchProcessesList(dispatch, {softwareProductId, version}) {
-
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
- processesList: []
- });
-
- return fetchProcesses(softwareProductId, version).then(response => {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
- processesList: response.results
- });
- });
- },
- openEditor(dispatch, process = {}) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
- process
- });
- },
-
- deleteProcess(dispatch, {process, softwareProductId, version}) {
- return deleteProcess(softwareProductId, version, process.id).then(() => {
- dispatch({
- type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
- processId: process.id
- });
- });
-
- },
-
- closeEditor(dispatch) {
- dispatch({
- type:actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
- });
- },
-
- saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) {
- if (previousProcess) {
- return putProcess(softwareProductId, version, process).then(() => {
- if (process.formData){
- uploadFileToProcess(softwareProductId, version, process.id, process.formData);
- }
- dispatch({
- type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
- process
- });
- });
- }
- else {
- return postProcess(softwareProductId, version, process).then(response => {
- if (process.formData) {
- uploadFileToProcess(softwareProductId, version, response.value, process.formData);
- }
- dispatch({
- type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
- process: {
- ...process,
- id: response.value
- }
- });
- });
- }
- },
-
- hideDeleteConfirm(dispatch) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
- processToDelete: false
- });
- },
-
- openDeleteProcessesConfirm(dispatch, {process} ) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
- processToDelete: process
- });
- }
-
+ fetchProcessesList(dispatch, { softwareProductId, version }) {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+ processesList: []
+ });
+
+ return fetchProcesses(softwareProductId, version).then(response => {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+ processesList: response.results
+ });
+ });
+ },
+ openEditor(dispatch, process = {}) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
+ process
+ });
+ },
+
+ deleteProcess(dispatch, { process, softwareProductId, version }) {
+ return deleteProcess(softwareProductId, version, process.id).then(
+ () => {
+ dispatch({
+ type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
+ processId: process.id
+ });
+ }
+ );
+ },
+
+ closeEditor(dispatch) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
+ });
+ },
+
+ saveProcess(
+ dispatch,
+ { softwareProductId, version, previousProcess, process }
+ ) {
+ if (previousProcess) {
+ return putProcess(softwareProductId, version, process).then(() => {
+ if (process.formData) {
+ uploadFileToProcess(
+ softwareProductId,
+ version,
+ process.id,
+ process.formData
+ );
+ }
+ dispatch({
+ type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
+ process
+ });
+ });
+ } else {
+ return postProcess(softwareProductId, version, process).then(
+ response => {
+ if (process.formData) {
+ uploadFileToProcess(
+ softwareProductId,
+ version,
+ response.value,
+ process.formData
+ );
+ }
+ dispatch({
+ type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
+ process: {
+ ...process,
+ id: response.value
+ }
+ });
+ }
+ );
+ }
+ },
+
+ hideDeleteConfirm(dispatch) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+ processToDelete: false
+ });
+ },
+
+ openDeleteProcessesConfirm(dispatch, { process }) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+ processToDelete: process
+ });
+ }
};
export default SoftwareProductActionHelper;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
index 6eee24cdde..7f09ea8e73 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
@@ -16,20 +16,20 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- ADD_SOFTWARE_PRODUCT_PROCESS: null,
- EDIT_SOFTWARE_PRODUCT_PROCESS: null,
- DELETE_SOFTWARE_PRODUCT_PROCESS: null,
- SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
- SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
- FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
- SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
+ ADD_SOFTWARE_PRODUCT_PROCESS: null,
+ EDIT_SOFTWARE_PRODUCT_PROCESS: null,
+ DELETE_SOFTWARE_PRODUCT_PROCESS: null,
+ SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
+ SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
+ FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
+ SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
});
export const optionsInputValues = {
- PROCESS_TYPE: [
- {title: 'Select...', enum: ''},
- {title: 'Other', enum: 'Other'}
- ]
+ PROCESS_TYPE: [
+ { title: 'Select...', enum: '' },
+ { title: 'Other', enum: 'Other' }
+ ]
};
export const VSP_PROCESS_FORM = 'VSPPROCESSFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index fc194fac13..58cc894a21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -13,41 +13,56 @@
* 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper';
import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx';
-import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import { VSP_PROCESS_FORM } from './SoftwareProductProcessesConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
- 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);
- }
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductProcesses: { processesList, processesEditor }
+ } = softwareProduct;
+ 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);
+ }
- return {
- data,
- genericFieldInfo,
- previousData,
- isFormValid,
- formReady
- };
+ return {
+ data,
+ genericFieldInfo,
+ previousData,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}),
- onSubmit: ({previousProcess, process}) => {
- SoftwareProductProcessesActionHelper.closeEditor(dispatch);
- SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
- },
- onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: VSP_PROCESS_FORM
+ }),
+ onSubmit: ({ previousProcess, process }) => {
+ SoftwareProductProcessesActionHelper.closeEditor(dispatch);
+ SoftwareProductProcessesActionHelper.saveProcess(dispatch, {
+ softwareProductId,
+ version,
+ previousProcess,
+ process
+ });
+ },
+ onCancel: () =>
+ SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
index d1bd602683..6e8254f65b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -25,157 +25,212 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
const SoftwareProductProcessEditorPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- artifactName: PropTypes.string,
- type: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ artifactName: PropTypes.string,
+ type: PropTypes.string
});
-
-
class SoftwareProductProcessesEditorForm extends React.Component {
+ static propTypes = {
+ data: SoftwareProductProcessEditorPropType,
+ previousData: SoftwareProductProcessEditorPropType,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func,
+ onSubmit: PropTypes.func,
+ onCancel: PropTypes.func
+ };
+ state = {
+ dragging: false,
+ files: []
+ };
+ render() {
+ let {
+ data = {},
+ isReadOnlyMode,
+ onDataChanged,
+ onCancel,
+ genericFieldInfo,
+ optionsInputValues
+ } = this.props;
+ let { name, description, artifactName, type } = data;
- static propTypes = {
- data: SoftwareProductProcessEditorPropType,
- previousData: SoftwareProductProcessEditorPropType,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func,
- onSubmit: PropTypes.func,
- onCancel: PropTypes.func
- };
- state = {
- dragging: false,
- files: []
- };
-
- render() {
- let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
- let {name, description, artifactName, type} = data;
-
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm() }
- className='vsp-processes-editor'>
- <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
- <Dropzone
- className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
- onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
- onDragEnter={() => this.setState({dragging: true})}
- onDragLeave={() => this.setState({dragging: false})}
- multiple={false}
- disableClick={true}
- ref='processEditorFileInput'
- name='processEditorFileInput'>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name})}
- isValid={genericFieldInfo.name.isValid}
- isRequired={true}
- data-test-id='name'
- errorText={genericFieldInfo.name.errorText}
- label={i18n('Name')}
- value={name}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <label>&nbsp;</label>
- <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- name='vsp-process-description'
- groupClassName='vsp-process-description'
- onChange={description => onDataChanged({description})}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- label={i18n('Notes')}
- value={description}
- data-test-id='vsp-process-description'
- type='textarea'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <Input
- label={i18n('Artifacts')}
- value={artifactName}
- type='text'
- disabled/>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({type: val});}
- }
- value={type}
- label={i18n('Process Type')}
- className='process-type'
- data-test-id='process-type'
- isValid={genericFieldInfo.type.isValid}
- errorText={genericFieldInfo.type.errorText}
- type='select'>
- {optionsInputValues.PROCESS_TYPE.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- </GridSection>
- </Dropzone>
- </div>
- </Form>}
- </div>
- );
- }
-
- submit() {
- const {data: process, previousData: previousProcess} = this.props;
- let {files} = this.state;
- let formData = false;
- if (files.length) {
- let file = files[0];
- formData = new FormData();
- formData.append('upload', file);
- }
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.props.onValidateForm()}
+ className="vsp-processes-editor">
+ <div
+ className={`vsp-processes-editor-data${
+ isReadOnlyMode ? ' disabled' : ''
+ }`}>
+ <Dropzone
+ className={`vsp-process-dropzone-view ${
+ this.state.dragging ? 'active-dragging' : ''
+ }`}
+ onDrop={(acceptedFiles, rejectedFiles) =>
+ this.handleImportSubmit(
+ acceptedFiles,
+ rejectedFiles
+ )
+ }
+ onDragEnter={() =>
+ this.setState({ dragging: true })
+ }
+ onDragLeave={() =>
+ this.setState({ dragging: false })
+ }
+ multiple={false}
+ disableClick={true}
+ ref="processEditorFileInput"
+ name="processEditorFileInput">
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name })
+ }
+ isValid={
+ genericFieldInfo.name.isValid
+ }
+ isRequired={true}
+ data-test-id="name"
+ errorText={
+ genericFieldInfo.name.errorText
+ }
+ label={i18n('Name')}
+ value={name}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <label>&nbsp;</label>
+ <DraggableUploadFileBox
+ className="process-editor-file-box"
+ isReadOnlyMode={isReadOnlyMode}
+ onClick={() =>
+ this.refs.processEditorFileInput.open()
+ }
+ />
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ name="vsp-process-description"
+ groupClassName="vsp-process-description"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ isValid={
+ genericFieldInfo.description
+ .isValid
+ }
+ errorText={
+ genericFieldInfo.description
+ .errorText
+ }
+ label={i18n('Notes')}
+ value={description}
+ data-test-id="vsp-process-description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <Input
+ label={i18n('Artifacts')}
+ value={artifactName}
+ type="text"
+ disabled
+ />
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[
+ selectedIndex
+ ].value;
+ onDataChanged({ type: val });
+ }}
+ value={type}
+ label={i18n('Process Type')}
+ className="process-type"
+ data-test-id="process-type"
+ isValid={
+ genericFieldInfo.type.isValid
+ }
+ errorText={
+ genericFieldInfo.type.errorText
+ }
+ type="select">
+ {optionsInputValues.PROCESS_TYPE.map(
+ mtype => (
+ <option
+ key={mtype.enum}
+ value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ </GridSection>
+ </Dropzone>
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
- let updatedProcess = {
- ...process,
- formData
- };
- this.props.onSubmit({process: updatedProcess, previousProcess});
- }
+ submit() {
+ const { data: process, previousData: previousProcess } = this.props;
+ let { files } = this.state;
+ let formData = false;
+ if (files.length) {
+ let file = files[0];
+ formData = new FormData();
+ formData.append('upload', file);
+ }
+ let updatedProcess = {
+ ...process,
+ formData
+ };
+ this.props.onSubmit({ process: updatedProcess, previousProcess });
+ }
- handleImportSubmit(files, rejectedFiles) {
- if (files.length > 0) {
- let {onDataChanged} = this.props;
- this.setState({
- dragging: false,
- complete: '0',
- files
- });
- onDataChanged({artifactName: files[0].name});
- }
- else if (rejectedFiles.length > 0) {
- this.setState({
- dragging: false
- });
- if (DEBUG) {
- console.log('file was rejected.' + rejectedFiles[0].name);
- }
- }
- }
+ handleImportSubmit(files, rejectedFiles) {
+ if (files.length > 0) {
+ let { onDataChanged } = this.props;
+ this.setState({
+ dragging: false,
+ complete: '0',
+ files
+ });
+ onDataChanged({ artifactName: files[0].name });
+ } else if (rejectedFiles.length > 0) {
+ this.setState({
+ dragging: false
+ });
+ if (DEBUG) {
+ console.log('file was rejected.' + rejectedFiles[0].name);
+ }
+ }
+ }
}
export default SoftwareProductProcessesEditorForm;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
index 11b89b17c2..a8731fd163 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
@@ -13,43 +13,49 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import {
+ actionTypes,
+ VSP_PROCESS_FORM
+} from './SoftwareProductProcessesConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
- return {
- ...state,
- formReady: null,
- formName: VSP_PROCESS_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_EDITOR_CLOSE:
- return {};
+ switch (action.type) {
+ case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: VSP_PROCESS_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_EDITOR_CLOSE:
+ return {};
- default:
- return state;
- }
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 9ce690a1ca..867090bb31 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -15,16 +15,18 @@
*/
import React from 'react';
-import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
+import { optionsInputValues as ProcessesOptionsInputValues } from './SoftwareProductProcessesConstants.js';
import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx';
-
class SoftwareProductProcessesEditorView extends React.Component {
- render() {
- return (
- <SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
- );
- }
+ render() {
+ return (
+ <SoftwareProductProcessesEditorForm
+ optionsInputValues={ProcessesOptionsInputValues}
+ {...this.props}
+ />
+ );
+ }
}
export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
index 20390d1f60..0e4d94650e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
@@ -13,20 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
- return [...action.processesList];
- case actionTypes.EDIT_SOFTWARE_PRODUCT_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_PROCESS:
- return [...state, action.process];
- case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
- return state.filter(process => process.id !== action.processId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
+ return [...action.processesList];
+ case actionTypes.EDIT_SOFTWARE_PRODUCT_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_PROCESS:
+ return [...state, action.process];
+ case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
+ return state.filter(process => process.id !== action.processId);
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index b0da767a2b..1357c31e12 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -20,45 +20,63 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
-
class SoftwareProductProcessesView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
-
- static propTypes = {
- onAddProcess: PropTypes.func.isRequired,
- onEditProcess: PropTypes.func.isRequired,
- onDeleteProcess: PropTypes.func.isRequired,
- isDisplayEditor: PropTypes.bool.isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired,
- currentSoftwareProduct:PropTypes.object
- };
-
- render() {
- return (
- <div className='software-product-landing-view-right-side vsp-processes-page'>
- {this.renderEditor()}
- <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
- </div>
- );
- }
+ static propTypes = {
+ onAddProcess: PropTypes.func.isRequired,
+ onEditProcess: PropTypes.func.isRequired,
+ onDeleteProcess: PropTypes.func.isRequired,
+ isDisplayEditor: PropTypes.bool.isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ currentSoftwareProduct: PropTypes.object
+ };
- renderEditor() {
- let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
- return (
+ render() {
+ return (
+ <div className="software-product-landing-view-right-side vsp-processes-page">
+ {this.renderEditor()}
+ <SoftwareProductProcessListView
+ addButtonTitle={i18n('Add Process Details')}
+ {...this.props}
+ />
+ </div>
+ );
+ }
- <Modal show={isDisplayEditor} 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 softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
- </Modal.Body>
- </Modal>
- );
- }
+ renderEditor() {
+ let {
+ currentSoftwareProduct: { id },
+ version,
+ isModalInEditMode,
+ isReadOnlyMode,
+ isDisplayEditor
+ } = this.props;
+ return (
+ <Modal
+ show={isDisplayEditor}
+ 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
+ softwareProductId={id}
+ version={version}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ </Modal.Body>
+ </Modal>
+ );
+ }
}
export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
index 2c3442ee68..a3004995d7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsReducer.js
@@ -14,59 +14,66 @@
* permissions and limitations under the License.
*/
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.NOTIFICATION:
- let list = (state.notificationsList) ? state.notificationsList : [];
- const {notifications, lastScanned} = action.data;
- return {
- ...state,
- lastScanned,
- notificationsList: [...notifications, ...list],
- numOfNotSeenNotifications: state.numOfNotSeenNotifications + notifications.length
- };
- case actionTypes.LOAD_NOTIFICATIONS:
- return {
- ...state,
- ...action.result,
- notificationsList: action.result.notifications,
- notifications: undefined
- };
- case actionTypes.LOAD_PREV_NOTIFICATIONS:
- const {notifications: prevNotifications, endOfPage: newEndOfPage} = action.result;
- return {
- ...state,
- notificationsList: [
- ...state.notificationsList,
- ...prevNotifications
- ],
- endOfPage: newEndOfPage
- };
- case actionTypes.UPDATE_READ_NOTIFICATION:
- let {notificationForUpdate} = action;
- notificationForUpdate = {...notificationForUpdate, read: true};
- const indexForEdit = state.notificationsList.findIndex(notification => notification.eventId === notificationForUpdate.eventId);
- return {
- ...state,
- notificationsList: [
- ...state.notificationsList.slice(0, indexForEdit),
- notificationForUpdate,
- ...state.notificationsList.slice(indexForEdit + 1)
- ]
- };
- case actionTypes.RESET_NEW_NOTIFICATIONS:
- return {
- ...state,
- numOfNotSeenNotifications: 0
- };
- case actionTypes.TOGGLE_OVERLAY:
- return {
- ...state,
- showNotificationsOverlay: action.showNotificationsOverlay
- };
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.NOTIFICATION:
+ let list = state.notificationsList ? state.notificationsList : [];
+ const { notifications, lastScanned } = action.data;
+ return {
+ ...state,
+ lastScanned,
+ notificationsList: [...notifications, ...list],
+ numOfNotSeenNotifications:
+ state.numOfNotSeenNotifications + notifications.length
+ };
+ case actionTypes.LOAD_NOTIFICATIONS:
+ return {
+ ...state,
+ ...action.result,
+ notificationsList: action.result.notifications,
+ notifications: undefined
+ };
+ case actionTypes.LOAD_PREV_NOTIFICATIONS:
+ const {
+ notifications: prevNotifications,
+ endOfPage: newEndOfPage
+ } = action.result;
+ return {
+ ...state,
+ notificationsList: [
+ ...state.notificationsList,
+ ...prevNotifications
+ ],
+ endOfPage: newEndOfPage
+ };
+ case actionTypes.UPDATE_READ_NOTIFICATION:
+ let { notificationForUpdate } = action;
+ notificationForUpdate = { ...notificationForUpdate, read: true };
+ const indexForEdit = state.notificationsList.findIndex(
+ notification =>
+ notification.eventId === notificationForUpdate.eventId
+ );
+ return {
+ ...state,
+ notificationsList: [
+ ...state.notificationsList.slice(0, indexForEdit),
+ notificationForUpdate,
+ ...state.notificationsList.slice(indexForEdit + 1)
+ ]
+ };
+ case actionTypes.RESET_NEW_NOTIFICATIONS:
+ return {
+ ...state,
+ numOfNotSeenNotifications: 0
+ };
+ case actionTypes.TOGGLE_OVERLAY:
+ return {
+ ...state,
+ showNotificationsOverlay: action.showNotificationsOverlay
+ };
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
index de105d23a7..7f5b334586 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
@@ -18,89 +18,155 @@ import React from 'react';
import PropTypes from 'prop-types';
import enhanceWithClickOutside from 'react-click-outside';
import classnames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Overlay from 'nfvo-components/overlay/Overlay.jsx';
import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
-const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
- return {currentScreen, notifications, usersList};
+const mapStateToProps = ({
+ currentScreen,
+ notifications,
+ users: { usersList }
+}) => {
+ return { currentScreen, notifications, usersList };
};
-const mapActionToProps = (dispatch) => {
- return {
- resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
- toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
- onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
- onSync: ({itemId, itemName, versionId, versionName, currentScreen}) => UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
- updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
- onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
- };
+const mapActionToProps = dispatch => {
+ return {
+ resetNewNotifications: notificationId =>
+ UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {
+ notificationId
+ }),
+ toggleOverlay: ({ showNotificationsOverlay }) =>
+ dispatch({
+ type: actionTypes.TOGGLE_OVERLAY,
+ showNotificationsOverlay
+ }),
+ onLoadPrevNotifications: (lastScanned, endOfPage) =>
+ UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {
+ lastScanned,
+ endOfPage
+ }),
+ onSync: ({ itemId, itemName, versionId, versionName, currentScreen }) =>
+ UserNotificationsActionHelper.syncItem(dispatch, {
+ itemId,
+ itemName,
+ versionId,
+ versionName,
+ currentScreen
+ }),
+ updateNotification: notificationForUpdate =>
+ UserNotificationsActionHelper.updateNotification(dispatch, {
+ notificationForUpdate
+ }),
+ onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
+ };
};
-
class NotificationsView extends React.Component {
+ static propTypes = {
+ currentScreen: PropTypes.object,
+ notifications: PropTypes.object,
+ resetNewNotifications: PropTypes.func,
+ toggleOverlay: PropTypes.func,
+ onLoadPrevNotifications: PropTypes.func,
+ onSync: PropTypes.func,
+ updateNotification: PropTypes.func,
+ onLoadItemsLists: PropTypes.func
+ };
- static propTypes = {
- currentScreen: PropTypes.object,
- notifications: PropTypes.object,
- resetNewNotifications: PropTypes.func,
- toggleOverlay: PropTypes.func,
- onLoadPrevNotifications: PropTypes.func,
- onSync: PropTypes.func,
- updateNotification: PropTypes.func,
- onLoadItemsLists: PropTypes.func
- };
-
- render() {
- const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
- const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
+ render() {
+ const {
+ usersList,
+ notifications,
+ onLoadPrevNotifications,
+ onSync,
+ updateNotification,
+ onLoadItemsLists,
+ currentScreen
+ } = this.props;
+ const {
+ notificationsList,
+ numOfNotSeenNotifications,
+ showNotificationsOverlay,
+ lastScanned,
+ endOfPage
+ } = notifications;
- return (
- <div className='onboarding-notifications'>
- <div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
- <SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
- <div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
- {numOfNotSeenNotifications}
- </div>
- </div>
- {showNotificationsOverlay &&
- <Overlay>
- <UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
- onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
- currentScreen={currentScreen}/>
- </Overlay>
- }
- </div>
- );
- }
+ return (
+ <div className="onboarding-notifications">
+ <div
+ className="notifications-icon"
+ onClick={() => this.onNotificationIconClick()}>
+ <SVGIcon
+ name={
+ numOfNotSeenNotifications > 0
+ ? 'notificationFullBell'
+ : 'notificationBell'
+ }
+ color={numOfNotSeenNotifications > 0 ? 'primary' : ''}
+ />
+ <div
+ className={classnames('notifications-count', {
+ 'hidden-count': numOfNotSeenNotifications === 0
+ })}>
+ {numOfNotSeenNotifications}
+ </div>
+ </div>
+ {showNotificationsOverlay && (
+ <Overlay>
+ <UserNotifications
+ notificationsList={notificationsList}
+ usersList={usersList}
+ lastScanned={lastScanned}
+ endOfPage={endOfPage}
+ onLoadPrevNotifications={onLoadPrevNotifications}
+ onSync={onSync}
+ updateNotification={updateNotification}
+ onLoadItemsLists={onLoadItemsLists}
+ currentScreen={currentScreen}
+ />
+ </Overlay>
+ )}
+ </div>
+ );
+ }
- handleClickOutside() {
- const {notifications: {showNotificationsOverlay}} = this.props;
- if(showNotificationsOverlay) {
- this.onCloseOverlay();
- }
- }
+ handleClickOutside() {
+ const { notifications: { showNotificationsOverlay } } = this.props;
+ if (showNotificationsOverlay) {
+ this.onCloseOverlay();
+ }
+ }
- onNotificationIconClick() {
- const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
- if (showNotificationsOverlay) {
- this.onCloseOverlay();
- } else {
- toggleOverlay({showNotificationsOverlay: true});
- }
- }
+ onNotificationIconClick() {
+ const {
+ notifications: { showNotificationsOverlay },
+ toggleOverlay
+ } = this.props;
+ if (showNotificationsOverlay) {
+ this.onCloseOverlay();
+ } else {
+ toggleOverlay({ showNotificationsOverlay: true });
+ }
+ }
- onCloseOverlay() {
- const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
- if (numOfNotSeenNotifications) {
- resetNewNotifications(lastScanned);
- }
- toggleOverlay({showNotificationsOverlay: false});
- }
+ onCloseOverlay() {
+ const {
+ notifications: { numOfNotSeenNotifications, lastScanned },
+ resetNewNotifications,
+ toggleOverlay
+ } = this.props;
+ if (numOfNotSeenNotifications) {
+ resetNewNotifications(lastScanned);
+ }
+ toggleOverlay({ showNotificationsOverlay: false });
+ }
}
-export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));
+export default connect(mapStateToProps, mapActionToProps)(
+ enhanceWithClickOutside(NotificationsView)
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
index fd5c04db92..01ca50cd4f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
@@ -19,126 +19,193 @@ import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import {notificationType} from './UserNotificationsConstants.js';
+import { notificationType } from './UserNotificationsConstants.js';
import ShowMore from 'react-show-more';
-const Notification = ({notification, users, onActionClicked, getNotificationTypeDesc}) => {
- const {eventType, read, eventAttributes, dateTime} = notification;
- const {itemName, userId, description, versionName, permission, granted} = eventAttributes;
- const {fullName: userName} = users.find(user => user.userId === userId);
- return (
- <div className={classnames('notification', {'unread': !read})}>
- <div className='notification-data'>
- <div className='item-name'>
- {itemName}
- {versionName && <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>}
- {!read && <div className='unread-circle-icon'></div> }
- </div>
- <div className='flex-items'>
- <div className='type'>{getNotificationTypeDesc(eventType, permission, granted)}</div>
- <div className='separator'/>
- <div className='user-name'>{`${i18n('By')} ${userName}`}</div>
- </div>
- {(description || versionName) && <div className='description'>
- {description && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
- {description}
- </ShowMore>}
- {eventType === notificationType.ITEM_CHANGED.SUBMIT &&
- <div>
- <div>{i18n('Version {versionName} was submitted.', {versionName: versionName})}</div>
- </div>
- }
- </div>
- }
- <div className='date'>{dateTime}</div>
- </div>
- <div className='notification-action'>
- <div className={classnames('action-button', {'hidden': read})} onClick={() => onActionClicked(notification)}>
- {eventType === notificationType.PERMISSION_CHANGED
- || eventType === notificationType.ITEM_DELETED
- || eventType === notificationType.ITEM_ARCHIVED
- || eventType === notificationType.ITEM_RESTORED ? i18n('OK') : i18n('Sync')}
- </div>
- </div>
- </div>
- );
+const Notification = ({
+ notification,
+ users,
+ onActionClicked,
+ getNotificationTypeDesc
+}) => {
+ const { eventType, read, eventAttributes, dateTime } = notification;
+ const {
+ itemName,
+ userId,
+ description,
+ versionName,
+ permission,
+ granted
+ } = eventAttributes;
+ const { fullName: userName } = users.find(user => user.userId === userId);
+ return (
+ <div className={classnames('notification', { unread: !read })}>
+ <div className="notification-data">
+ <div className="item-name">
+ {itemName}
+ {versionName && (
+ <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>
+ )}
+ {!read && <div className="unread-circle-icon" />}
+ </div>
+ <div className="flex-items">
+ <div className="type">
+ {getNotificationTypeDesc(
+ eventType,
+ permission,
+ granted
+ )}
+ </div>
+ <div className="separator" />
+ <div className="user-name">{`${i18n(
+ 'By'
+ )} ${userName}`}</div>
+ </div>
+ {(description || versionName) && (
+ <div className="description">
+ {description && (
+ <ShowMore
+ anchorClass="more-less"
+ lines={2}
+ more={i18n('More')}
+ less={i18n('Less')}>
+ {description}
+ </ShowMore>
+ )}
+ {eventType === notificationType.ITEM_CHANGED.SUBMIT && (
+ <div>
+ <div>
+ {i18n(
+ 'Version {versionName} was submitted.',
+ { versionName: versionName }
+ )}
+ </div>
+ </div>
+ )}
+ </div>
+ )}
+ <div className="date">{dateTime}</div>
+ </div>
+ <div className="notification-action">
+ <div
+ className={classnames('action-button', { hidden: read })}
+ onClick={() => onActionClicked(notification)}>
+ {eventType === notificationType.PERMISSION_CHANGED ||
+ eventType === notificationType.ITEM_DELETED ||
+ eventType === notificationType.ITEM_ARCHIVED ||
+ eventType === notificationType.ITEM_RESTORED
+ ? i18n('OK')
+ : i18n('Sync')}
+ </div>
+ </div>
+ </div>
+ );
};
function getNotificationTypeDesc(eventType, permission, granted) {
- switch (eventType) {
- case notificationType.PERMISSION_CHANGED:
- const grantedStr = granted ? i18n('Granted') : i18n('Taken');
- return `${i18n('Permission')} ${grantedStr}: ${permission}`;
- case notificationType.ITEM_CHANGED.COMMIT:
- return i18n('Your Copy Is Out Of Sync');
- case notificationType.ITEM_CHANGED.SUBMIT:
- return i18n('Version Submitted');
- case notificationType.ITEM_DELETED:
- return i18n('Item was deleted');
- case notificationType.ITEM_ARCHIVED:
- return i18n('Item was archived');
- case notificationType.ITEM_RESTORED:
- return i18n('Item was restored from archive');
- }
+ switch (eventType) {
+ case notificationType.PERMISSION_CHANGED:
+ const grantedStr = granted ? i18n('Granted') : i18n('Taken');
+ return `${i18n('Permission')} ${grantedStr}: ${permission}`;
+ case notificationType.ITEM_CHANGED.COMMIT:
+ return i18n('Your Copy Is Out Of Sync');
+ case notificationType.ITEM_CHANGED.SUBMIT:
+ return i18n('Version Submitted');
+ case notificationType.ITEM_DELETED:
+ return i18n('Item was deleted');
+ case notificationType.ITEM_ARCHIVED:
+ return i18n('Item was archived');
+ case notificationType.ITEM_RESTORED:
+ return i18n('Item was restored from archive');
+ }
}
class UserNotifications extends React.Component {
+ static propTypes = {
+ currentScreen: PropTypes.object,
+ notificationsList: PropTypes.array,
+ usersList: PropTypes.array,
+ lastScanned: PropTypes.string,
+ endOfPage: PropTypes.string,
+ onLoadPrevNotifications: PropTypes.func,
+ onSync: PropTypes.func,
+ updateNotification: PropTypes.func,
+ onLoadItemsLists: PropTypes.func
+ };
- static propTypes = {
- currentScreen: PropTypes.object,
- notificationsList: PropTypes.array,
- usersList: PropTypes.array,
- lastScanned: PropTypes.string,
- endOfPage:PropTypes.string,
- onLoadPrevNotifications: PropTypes.func,
- onSync: PropTypes.func,
- updateNotification: PropTypes.func,
- onLoadItemsLists: PropTypes.func
- };
+ render() {
+ const {
+ notificationsList = [],
+ usersList,
+ lastScanned,
+ endOfPage
+ } = this.props;
- render() {
- const {notificationsList = [], usersList, lastScanned, endOfPage} = this.props;
+ return (
+ <div className="user-notifications">
+ <div className="notifications-title">
+ {i18n('Notifications')}
+ </div>
+ <div
+ className="notifications-list"
+ ref="notificationList"
+ onScroll={() =>
+ this.loadPrevNotifications(lastScanned, endOfPage)
+ }>
+ {notificationsList.map(notification => (
+ <Notification
+ key={notification.eventId}
+ notification={notification}
+ users={usersList}
+ onActionClicked={notification =>
+ this.onActionClicked(notification)
+ }
+ getNotificationTypeDesc={getNotificationTypeDesc}
+ />
+ ))}
+ </div>
+ </div>
+ );
+ }
- return (
- <div className='user-notifications'>
- <div className='notifications-title'>{i18n('Notifications')}</div>
- <div className='notifications-list' ref='notificationList' onScroll={() => this.loadPrevNotifications(lastScanned, endOfPage)}>
- {
- notificationsList.map(notification => (
- <Notification key={notification.eventId} notification={notification} users={usersList}
- onActionClicked={notification => this.onActionClicked(notification)}
- getNotificationTypeDesc={getNotificationTypeDesc}/>))
- }
- </div>
- </div>
- );
- }
+ onActionClicked(notification) {
+ const {
+ onSync,
+ updateNotification,
+ currentScreen,
+ onLoadItemsLists
+ } = this.props;
+ const {
+ eventType,
+ eventAttributes: { itemId, itemName, versionId, versionName }
+ } = notification;
+ if (
+ eventType !== notificationType.PERMISSION_CHANGED &&
+ eventType !== notificationType.ITEM_DELETED &&
+ eventType !== notificationType.ITEM_ARCHIVED &&
+ eventType !== notificationType.ITEM_RESTORED
+ ) {
+ onSync({ itemId, itemName, versionId, versionName, currentScreen });
+ } else {
+ onLoadItemsLists();
+ }
+ updateNotification(notification);
+ }
- onActionClicked(notification) {
- const {onSync, updateNotification, currentScreen, onLoadItemsLists} = this.props;
- const {eventType, eventAttributes: {itemId, itemName, versionId, versionName}} = notification;
- if(eventType !== notificationType.PERMISSION_CHANGED &&
- eventType !== notificationType.ITEM_DELETED &&
- eventType !== notificationType.ITEM_ARCHIVED &&
- eventType !== notificationType.ITEM_RESTORED) {
- onSync({itemId, itemName, versionId, versionName, currentScreen});
- }
- else {
- onLoadItemsLists();
- }
- updateNotification(notification);
- }
+ loadPrevNotifications(lastScanned, endOfPage) {
+ if (endOfPage && lastScanned) {
+ let element = ReactDOM.findDOMNode(this.refs['notificationList']);
+ const { onLoadPrevNotifications } = this.props;
- loadPrevNotifications(lastScanned, endOfPage) {
- if(endOfPage && lastScanned) {
- let element = ReactDOM.findDOMNode(this.refs['notificationList']);
- const {onLoadPrevNotifications} = this.props;
-
- if (element && element.clientHeight + element.scrollTop === element.scrollHeight) {
- onLoadPrevNotifications(lastScanned, endOfPage);
- }
- }
- }
+ if (
+ element &&
+ element.clientHeight + element.scrollTop ===
+ element.scrollHeight
+ ) {
+ onLoadPrevNotifications(lastScanned, endOfPage);
+ }
+ }
+ }
}
-export default UserNotifications; \ No newline at end of file
+export default UserNotifications;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
index 574aa0f3fc..f8693e15be 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js
@@ -1,123 +1,175 @@
-import {actionTypes} from './UserNotificationsConstants.js';
+import { actionTypes } from './UserNotificationsConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Configuration from 'sdc-app/config/Configuration.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import WebSocketUtil, {websocketUrl} from 'nfvo-utils/WebSocketUtil.js';
-import {actionsEnum as VersionControllerActionsEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
+import WebSocketUtil, { websocketUrl } from 'nfvo-utils/WebSocketUtil.js';
+import { actionsEnum as VersionControllerActionsEnum } from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { SyncStates } from 'sdc-app/common/merge/MergeEditorConstants.js';
function baseUrl() {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/notifications`;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/notifications`;
}
function fetch() {
- return RestAPIUtil.fetch(baseUrl());
+ return RestAPIUtil.fetch(baseUrl());
}
function updateNotification(notificationId) {
- return RestAPIUtil.put(`${baseUrl()}/${notificationId}`);
+ return RestAPIUtil.put(`${baseUrl()}/${notificationId}`);
}
function updateLastSeenNotification(notificationId) {
- return RestAPIUtil.put(`${baseUrl()}/last-seen/${notificationId}`);
+ return RestAPIUtil.put(`${baseUrl()}/last-seen/${notificationId}`);
}
function loadPrevNotifications(lastScanned, endOfPage) {
- return RestAPIUtil.fetch(`${baseUrl()}?LAST_DELIVERED_EVENT_ID=${lastScanned}&END_OF_PAGE_EVENT_ID=${endOfPage}`);
+ return RestAPIUtil.fetch(
+ `${baseUrl()}?LAST_DELIVERED_EVENT_ID=${lastScanned}&END_OF_PAGE_EVENT_ID=${endOfPage}`
+ );
}
const INITIAL_LAST_SCANNED = '00000000-0000-1000-8080-808080808080';
const UserNotificationsActionHelper = {
- notificationsFirstHandling(dispatch) {
- console.log('Websocket Url: ', websocketUrl);
- UserNotificationsActionHelper.fetchUserNotificationsList(dispatch).then(({lastScanned}) => {
- WebSocketUtil.open(websocketUrl, {lastScanned: lastScanned || INITIAL_LAST_SCANNED});
- });
- },
+ notificationsFirstHandling(dispatch) {
+ console.log('Websocket Url: ', websocketUrl);
+ UserNotificationsActionHelper.fetchUserNotificationsList(dispatch).then(
+ ({ lastScanned }) => {
+ WebSocketUtil.open(websocketUrl, {
+ lastScanned: lastScanned || INITIAL_LAST_SCANNED
+ });
+ }
+ );
+ },
- fetchUserNotificationsList(dispatch) {
- return fetch().then(result => {
- dispatch({
- type: actionTypes.LOAD_NOTIFICATIONS,
- result
- });
- return Promise.resolve({lastScanned: result.lastScanned});
- });
- },
+ fetchUserNotificationsList(dispatch) {
+ return fetch().then(result => {
+ dispatch({
+ type: actionTypes.LOAD_NOTIFICATIONS,
+ result
+ });
+ return Promise.resolve({ lastScanned: result.lastScanned });
+ });
+ },
- loadPreviousNotifications(dispatch, {lastScanned, endOfPage}) {
- loadPrevNotifications(lastScanned, endOfPage).then(result => dispatch({
- type: actionTypes.LOAD_PREV_NOTIFICATIONS,
- result
- }));
- },
+ loadPreviousNotifications(dispatch, { lastScanned, endOfPage }) {
+ loadPrevNotifications(lastScanned, endOfPage).then(result =>
+ dispatch({
+ type: actionTypes.LOAD_PREV_NOTIFICATIONS,
+ result
+ })
+ );
+ },
- notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen}) {
- let {props} = currentScreen;
- let currentItemId = props.softwareProductId || props.licenseModelId;
- let currentVersion = props.version;
- if(currentItemId === itemId && currentVersion.id === version.id) {
- MergeEditorActionHelper.analyzeSyncResult(dispatch, {itemId, version}).then(() => ScreensHelper.loadScreen(dispatch, currentScreen));
- }
- else {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data: {
- title: i18n('Conflicts'),
- msg: i18n('There are conflicts in {itemName} version {versionName} that you have to resolve', {itemName: itemName.toUpperCase(), versionName: version.versionName}),
- cancelButtonText: i18n('OK')
- }
- });
- }
- },
+ notifyAboutConflicts(
+ dispatch,
+ { itemId, itemName, version, currentScreen }
+ ) {
+ let { props } = currentScreen;
+ let currentItemId = props.softwareProductId || props.licenseModelId;
+ let currentVersion = props.version;
+ if (currentItemId === itemId && currentVersion.id === version.id) {
+ MergeEditorActionHelper.analyzeSyncResult(dispatch, {
+ itemId,
+ version
+ }).then(() => ScreensHelper.loadScreen(dispatch, currentScreen));
+ } else {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ title: i18n('Conflicts'),
+ msg: i18n(
+ 'There are conflicts in {itemName} version {versionName} that you have to resolve',
+ {
+ itemName: itemName.toUpperCase(),
+ versionName: version.versionName
+ }
+ ),
+ cancelButtonText: i18n('OK')
+ }
+ });
+ }
+ },
- syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}) {
- let version = {id: versionId, versionName};
- ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
- let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
- if (!inMerge) {
- ItemsHelper.performVCAction({itemId, version, action: VersionControllerActionsEnum.SYNC}).then(() => {
- return ItemsHelper.fetchVersion({itemId, versionId}).then(response => {
- let inMerge = response && response.state && response.state.synchronizationState === SyncStates.MERGE;
- if (!inMerge) {
- return ScreensHelper.loadScreen(dispatch, currentScreen);
- }
- else {
- return this.notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen});
- }
- });
- });
- }
- else {
- this.notifyAboutConflicts(dispatch, {itemId, itemName, version, currentScreen});
- }
- });
- },
+ syncItem(
+ dispatch,
+ { itemId, itemName, versionId, versionName, currentScreen }
+ ) {
+ let version = { id: versionId, versionName };
+ ItemsHelper.fetchVersion({ itemId, versionId }).then(response => {
+ let inMerge =
+ response &&
+ response.state &&
+ response.state.synchronizationState === SyncStates.MERGE;
+ if (!inMerge) {
+ ItemsHelper.performVCAction({
+ itemId,
+ version,
+ action: VersionControllerActionsEnum.SYNC
+ }).then(() => {
+ return ItemsHelper.fetchVersion({ itemId, versionId }).then(
+ response => {
+ let inMerge =
+ response &&
+ response.state &&
+ response.state.synchronizationState ===
+ SyncStates.MERGE;
+ if (!inMerge) {
+ return ScreensHelper.loadScreen(
+ dispatch,
+ currentScreen
+ );
+ } else {
+ return this.notifyAboutConflicts(dispatch, {
+ itemId,
+ itemName,
+ version,
+ currentScreen
+ });
+ }
+ }
+ );
+ });
+ } else {
+ this.notifyAboutConflicts(dispatch, {
+ itemId,
+ itemName,
+ version,
+ currentScreen
+ });
+ }
+ });
+ },
- updateNotification(dispatch, {notificationForUpdate}) {
- updateNotification(notificationForUpdate.eventId).then(response => {
- if(response.status === 'Success' && Object.keys(response.errors).length === 0) {
- dispatch({
- type: actionTypes.UPDATE_READ_NOTIFICATION,
- notificationForUpdate
- });
- }
- });
- },
+ updateNotification(dispatch, { notificationForUpdate }) {
+ updateNotification(notificationForUpdate.eventId).then(response => {
+ if (
+ response.status === 'Success' &&
+ Object.keys(response.errors).length === 0
+ ) {
+ dispatch({
+ type: actionTypes.UPDATE_READ_NOTIFICATION,
+ notificationForUpdate
+ });
+ }
+ });
+ },
- updateLastSeenNotification(dispatch, {notificationId}) {
- updateLastSeenNotification(notificationId).then(response => {
- if (response.status === 'Success' && Object.keys(response.errors).length === 0) {
- dispatch({type: actionTypes.RESET_NEW_NOTIFICATIONS});
- }
- });
- }
+ updateLastSeenNotification(dispatch, { notificationId }) {
+ updateLastSeenNotification(notificationId).then(response => {
+ if (
+ response.status === 'Success' &&
+ Object.keys(response.errors).length === 0
+ ) {
+ dispatch({ type: actionTypes.RESET_NEW_NOTIFICATIONS });
+ }
+ });
+ }
};
export default UserNotificationsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
index a8e92e29fd..b2466f19af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotificationsConstants.js
@@ -1,22 +1,21 @@
-
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- NOTIFICATION: null,
- LOAD_NOTIFICATIONS: null,
- LOAD_PREV_NOTIFICATIONS: null,
- UPDATE_READ_NOTIFICATION: null,
- RESET_NEW_NOTIFICATIONS: null,
- TOGGLE_OVERLAY: null
+ NOTIFICATION: null,
+ LOAD_NOTIFICATIONS: null,
+ LOAD_PREV_NOTIFICATIONS: null,
+ UPDATE_READ_NOTIFICATION: null,
+ RESET_NEW_NOTIFICATIONS: null,
+ TOGGLE_OVERLAY: null
});
export const notificationType = keyMirror({
- PERMISSION_CHANGED: 'PermissionChanged',
- ITEM_CHANGED: {
- COMMIT: 'commit',
- SUBMIT: 'submit'
- },
- ITEM_DELETED: 'delete',
- ITEM_ARCHIVED: 'archive',
- ITEM_RESTORED: 'restore'
-}); \ No newline at end of file
+ PERMISSION_CHANGED: 'PermissionChanged',
+ ITEM_CHANGED: {
+ COMMIT: 'commit',
+ SUBMIT: 'submit'
+ },
+ ITEM_DELETED: 'delete',
+ ITEM_ARCHIVED: 'archive',
+ ITEM_RESTORED: 'restore'
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
index a2e92fe0bc..98bce1ce56 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersActionHelper.js
@@ -16,46 +16,41 @@
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './UsersConstants.js';
+import { actionTypes } from './UsersConstants.js';
function getUserId() {
- let catalogApiHeaders = Configuration.get('CatalogApiHeaders');
- let User = catalogApiHeaders && catalogApiHeaders.userId;
- let userId = User && User.value ? User.value : '';
- return userId;
+ let catalogApiHeaders = Configuration.get('CatalogApiHeaders');
+ let User = catalogApiHeaders && catalogApiHeaders.userId;
+ let userId = User && User.value ? User.value : '';
+ return userId;
}
function baseUrl() {
- const restCatalogPrefix = Configuration.get('restCatalogPrefix');
- return `${restCatalogPrefix}`;
+ const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+ return `${restCatalogPrefix}`;
}
-
function fetchUsersList() {
- const url = '/v1/user/users';
- return RestAPIUtil.fetch(`${baseUrl()}${url}`);
+ const url = '/v1/user/users';
+ return RestAPIUtil.fetch(`${baseUrl()}${url}`);
}
-
-
const UsersActionHelper = {
- fetchUsersList(dispatch) {
- fetchUsersList().then(response => {
- dispatch({
- type: actionTypes.USERS_LIST_LOADED,
- usersList: response
- });
-
- let userId = getUserId();
- let userInfo = response.find(user => user.userId === userId);
- dispatch({
- type: actionTypes.GOT_USER_INFO,
- userInfo
- });
-
- });
-
- }
+ fetchUsersList(dispatch) {
+ fetchUsersList().then(response => {
+ dispatch({
+ type: actionTypes.USERS_LIST_LOADED,
+ usersList: response
+ });
+
+ let userId = getUserId();
+ let userInfo = response.find(user => user.userId === userId);
+ dispatch({
+ type: actionTypes.GOT_USER_INFO,
+ userInfo
+ });
+ });
+ }
};
export default UsersActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
index fdcf4b179b..216d28ad47 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersConstants.js
@@ -17,6 +17,6 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- USERS_LIST_LOADED: null,
- GOT_USER_INFO: null
+ USERS_LIST_LOADED: null,
+ GOT_USER_INFO: null
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js b/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
index 6bd72e3b3c..89a04d2a8b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/users/UsersReducers.js
@@ -14,29 +14,28 @@
* permissions and limitations under the License.
*/
-import {actionTypes} from './UsersConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes } from './UsersConstants.js';
+import { combineReducers } from 'redux';
-function usersList (state = [], action) {
- switch (action.type) {
- case (actionTypes.USERS_LIST_LOADED):
- return [...action.usersList];
- default:
- return state;
- }
-};
-
-function userInfo (state = {}, action) {
- switch (action.type) {
- case (actionTypes.GOT_USER_INFO):
- return action.userInfo;
- default:
- return state;
- }
+function usersList(state = [], action) {
+ switch (action.type) {
+ case actionTypes.USERS_LIST_LOADED:
+ return [...action.usersList];
+ default:
+ return state;
+ }
}
+function userInfo(state = {}, action) {
+ switch (action.type) {
+ case actionTypes.GOT_USER_INFO:
+ return action.userInfo;
+ default:
+ return state;
+ }
+}
export default combineReducers({
- usersList: usersList,
- userInfo: userInfo
-}); \ No newline at end of file
+ usersList: usersList,
+ userInfo: userInfo
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
index 0fd0eabd86..457d096219 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js
@@ -14,76 +14,100 @@
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import VersionsPageActionHelper from './VersionsPageActionHelper.js';
import VersionsPageCreationActionHelper from './creation/VersionsPageCreationActionHelper.js';
import PermissionsActionHelper from '../permissions/PermissionsActionHelper.js';
-import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
+import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
import VersionsPageView from './VersionsPage.jsx';
export const mapStateToProps = ({
- users: {userInfo},
- versionsPage: {permissions, versionsList},
- currentScreen: {itemPermission: {isCollaborator, isArchived}, props: {itemId}},
- softwareProductList = []
+ users: { userInfo },
+ versionsPage: { permissions, versionsList },
+ currentScreen: {
+ itemPermission: { isCollaborator, isArchived },
+ props: { itemId }
+ },
+ softwareProductList = []
}) => {
+ let { versions = [], selectedVersion } = versionsList;
+ let { owner, contributors, viewers } = permissions;
- let {versions = [], selectedVersion} = versionsList;
- let {owner, contributors, viewers} = permissions;
-
- // sorting the version list
- versions.sort((a,b) => {
- let statusCompare = b.status.localeCompare(a.status);
- if (statusCompare === 0) {
- return b.modificationTime - a.modificationTime;
- } else {
- return statusCompare;
- }
-
- });
- const curentSoftwareProduct = softwareProductList.find(item => item.id === itemId);
- return {
- versions,
- contributors,
- viewers,
- owner,
- currentUser: userInfo,
- selectedVersion,
- isCollaborator,
- isManual: curentSoftwareProduct && curentSoftwareProduct.onboardingMethod === onboardingMethodType.MANUAL,
- isArchived
- };
-
+ // sorting the version list
+ versions.sort((a, b) => {
+ let statusCompare = b.status.localeCompare(a.status);
+ if (statusCompare === 0) {
+ return b.modificationTime - a.modificationTime;
+ } else {
+ return statusCompare;
+ }
+ });
+ const curentSoftwareProduct = softwareProductList.find(
+ item => item.id === itemId
+ );
+ return {
+ versions,
+ contributors,
+ viewers,
+ owner,
+ currentUser: userInfo,
+ selectedVersion,
+ isCollaborator,
+ isManual:
+ curentSoftwareProduct &&
+ curentSoftwareProduct.onboardingMethod ===
+ onboardingMethodType.MANUAL,
+ isArchived
+ };
};
-export const mapActionsToProps = (dispatch, {itemType, itemId, additionalProps}) => {
- return {
- onNavigateToVersion({version}) {
- VersionsPageActionHelper.onNavigateToVersion(dispatch, {version, itemId, itemType, additionalProps});
- },
+export const mapActionsToProps = (
+ dispatch,
+ { itemType, itemId, additionalProps }
+) => {
+ return {
+ onNavigateToVersion({ version }) {
+ VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+ version,
+ itemId,
+ itemType,
+ additionalProps
+ });
+ },
- onSelectVersion({version}) {
- VersionsPageActionHelper.selectVersion(dispatch, {version});
- },
+ onSelectVersion({ version }) {
+ VersionsPageActionHelper.selectVersion(dispatch, { version });
+ },
- onCreateVersion({version}) {
- VersionsPageCreationActionHelper.open(dispatch, {baseVersion: version, itemId, itemType, additionalProps});
- },
+ onCreateVersion({ version }) {
+ VersionsPageCreationActionHelper.open(dispatch, {
+ baseVersion: version,
+ itemId,
+ itemType,
+ additionalProps
+ });
+ },
- onManagePermissions() {
- PermissionsActionHelper.openPermissonsManager(dispatch, {itemId, askForRights: false});
- },
+ onManagePermissions() {
+ PermissionsActionHelper.openPermissonsManager(dispatch, {
+ itemId,
+ askForRights: false
+ });
+ },
- onTreeFullScreen(treeProps) {
- VersionsPageActionHelper.openTree(dispatch, treeProps);
- },
+ onTreeFullScreen(treeProps) {
+ VersionsPageActionHelper.openTree(dispatch, treeProps);
+ },
- onModalNodeClick({version}) {
- VersionsPageActionHelper.selectVersionFromModal(dispatch, {version});
- },
- onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
- onRestore: () => VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
- };
+ onModalNodeClick({ version }) {
+ VersionsPageActionHelper.selectVersionFromModal(dispatch, {
+ version
+ });
+ },
+ onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId),
+ onRestore: () =>
+ VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId)
+ };
};
export default connect(mapStateToProps, mapActionsToProps)(VersionsPageView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index f8417fafbf..7f7af8130f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import featureToggle from 'sdc-app/features/featureToggle.js';
-const DepricateButton = ({depricateAction, title}) => (
- <div className='depricate-btn-wrapper'>
- <Button data-test-id='depricate-action-btn' className='depricate-btn' onClick={depricateAction}>{title}</Button>
- </div>
+const DepricateButton = ({ depricateAction, title }) => (
+ <div className="depricate-btn-wrapper">
+ <Button
+ data-test-id="depricate-action-btn"
+ className="depricate-btn"
+ onClick={depricateAction}>
+ {title}
+ </Button>
+ </div>
);
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
-const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => {
- return (
- <div className='version-page-header'>
- <div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName} ${depricatedTitle}`}</div>
- <FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() } title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/>
- </div>
- );
+const VersionPageTitle = ({
+ itemName,
+ depricatedTitle,
+ isArchived,
+ onRestore,
+ onArchive
+}) => {
+ return (
+ <div className="version-page-header">
+ <div className="versions-page-title">{`${i18n(
+ 'Available Versions'
+ )} - ${itemName} ${depricatedTitle}`}</div>
+ <FeatureDepricatedButton
+ depricateAction={
+ isArchived ? () => onRestore() : () => onArchive()
+ }
+ title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
+ />
+ </div>
+ );
};
class VersionsPage extends React.Component {
- state = {
- showExpanded : false
- }
- render() {
- let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
- onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props;
- const depricatedTitle = isArchived ? i18n('(Archived)') : '';
- return (
- <div className='versions-page-view'>
- <VersionPageTitle
- itemName={itemName}
- depricatedTitle={depricatedTitle}
- onArchive={onArchive}
- isArchived={isArchived}
- onRestore={onRestore}/>
- <PermissionsView
- owner={owner}
- contributors={contributors}
- viewers={viewers}
- currentUser={currentUser}
- isManual={isManual}
- onManagePermissions={onManagePermissions}/>
- <div className='versions-page-list-and-tree'>
- <div className='version-tree-wrapper'>
- <div className='version-tree-title-container'>
- <div className='version-tree-title'>{i18n('Version Tree')}</div>
- {this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
- name: 'versions-tree-popup',
- width: 798,
- height: 500,
- nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
- onNodeClick: (version) => onModalNodeClick({version}),
- selectedNodeId: selectedVersion,
- scrollable: true,
- toWiden: true
- })} />}
- </div>
- <Tree
- name={'versions-tree'}
- width={200}
- allowScaleWidth={false}
- nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
- onNodeClick={version => onSelectVersion({version})}
- onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
- selectedNodeId={selectedVersion}/>
- </div>
- <VersionList
- versions={versions}
- onSelectVersion={onSelectVersion}
- onNavigateToVersion={onNavigateToVersion}
- onCreateVersion={isArchived ? false : onCreateVersion}
- selectedVersion={selectedVersion}
- isCollaborator={isCollaborator} />
- </div>
- </div>
- );
- }
+ state = {
+ showExpanded: false
+ };
+ render() {
+ let {
+ versions,
+ owner,
+ contributors,
+ currentUser,
+ isCollaborator,
+ itemName = '',
+ viewers,
+ onSelectVersion,
+ onNavigateToVersion,
+ onTreeFullScreen,
+ onManagePermissions,
+ onCreateVersion,
+ selectedVersion,
+ onModalNodeClick,
+ isManual,
+ isArchived,
+ onArchive,
+ onRestore
+ } = this.props;
+ const depricatedTitle = isArchived ? i18n('(Archived)') : '';
+ return (
+ <div className="versions-page-view">
+ <VersionPageTitle
+ itemName={itemName}
+ depricatedTitle={depricatedTitle}
+ onArchive={onArchive}
+ isArchived={isArchived}
+ onRestore={onRestore}
+ />
+ <PermissionsView
+ owner={owner}
+ contributors={contributors}
+ viewers={viewers}
+ currentUser={currentUser}
+ isManual={isManual}
+ onManagePermissions={onManagePermissions}
+ />
+ <div className="versions-page-list-and-tree">
+ <div className="version-tree-wrapper">
+ <div className="version-tree-title-container">
+ <div className="version-tree-title">
+ {i18n('Version Tree')}
+ </div>
+ {this.state.showExpanded && (
+ <SVGIcon
+ name="expand"
+ className="version-tree-full-screen"
+ onClick={() =>
+ onTreeFullScreen({
+ name: 'versions-tree-popup',
+ width: 798,
+ height: 500,
+ nodes: versions.map(version => ({
+ id: version.id,
+ name: version.name,
+ parent: version.baseId || ''
+ })),
+ onNodeClick: version =>
+ onModalNodeClick({ version }),
+ selectedNodeId: selectedVersion,
+ scrollable: true,
+ toWiden: true
+ })
+ }
+ />
+ )}
+ </div>
+ <Tree
+ name={'versions-tree'}
+ width={200}
+ allowScaleWidth={false}
+ nodes={versions.map(version => ({
+ id: version.id,
+ name: version.name,
+ parent: version.baseId || ''
+ }))}
+ onNodeClick={version =>
+ onSelectVersion({ version })
+ }
+ onRenderedBeyondWidth={() => {
+ this.setState({ showExpanded: true });
+ }}
+ selectedNodeId={selectedVersion}
+ />
+ </div>
+ <VersionList
+ versions={versions}
+ onSelectVersion={onSelectVersion}
+ onNavigateToVersion={onNavigateToVersion}
+ onCreateVersion={isArchived ? false : onCreateVersion}
+ selectedVersion={selectedVersion}
+ isCollaborator={isCollaborator}
+ />
+ </div>
+ </div>
+ );
+ }
}
export default VersionsPage;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
index d475c03c31..606b17b897 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
@@ -14,94 +14,96 @@
* permissions and limitations under the License.
*/
import ItemsHelper from '../../common/helpers/ItemsHelper.js';
-import {actionTypes} from './VersionsPageConstants.js';
-import {itemTypes} from './VersionsPageConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageConstants.js';
+import { itemTypes } from './VersionsPageConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
-
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
const VersionsPageActionHelper = {
- fetchVersions(dispatch, {itemType, itemId}) {
- return ItemsHelper.fetchVersions({itemId}).then(response => {
- dispatch({
- type: actionTypes.VERSIONS_LOADED,
- versions: response.results,
- itemType,
- itemId
- });
- return Promise.resolve(response);
- });
- },
+ fetchVersions(dispatch, { itemType, itemId }) {
+ return ItemsHelper.fetchVersions({ itemId }).then(response => {
+ dispatch({
+ type: actionTypes.VERSIONS_LOADED,
+ versions: response.results,
+ itemType,
+ itemId
+ });
+ return Promise.resolve(response);
+ });
+ },
- selectVersion(dispatch, {version}) {
- dispatch({
- type: actionTypes.SELECT_VERSION,
- versionId: version.id
- });
- },
+ selectVersion(dispatch, { version }) {
+ dispatch({
+ type: actionTypes.SELECT_VERSION,
+ versionId: version.id
+ });
+ },
- selectNone(dispatch) {
- dispatch({ type: actionTypes.SELECT_NONE });
- },
+ selectNone(dispatch) {
+ dispatch({ type: actionTypes.SELECT_NONE });
+ },
- onNavigateToVersion(dispatch, {version, itemId, itemType}) {
- switch (itemType) {
- case itemTypes.LICENSE_MODEL:
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL,
- props: {licenseModelId: itemId, version}
- });
- break;
- case itemTypes.SOFTWARE_PRODUCT:
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
- props: {softwareProductId: itemId, version}
- });
- break;
- }
- },
+ onNavigateToVersion(dispatch, { version, itemId, itemType }) {
+ switch (itemType) {
+ case itemTypes.LICENSE_MODEL:
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW,
+ screenType: screenTypes.LICENSE_MODEL,
+ props: { licenseModelId: itemId, version }
+ });
+ break;
+ case itemTypes.SOFTWARE_PRODUCT:
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE,
+ screenType: screenTypes.SOFTWARE_PRODUCT,
+ props: { softwareProductId: itemId, version }
+ });
+ break;
+ }
+ },
- openTree(dispatch, treeProps) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.VERSION_TREE,
- modalComponentProps: treeProps,
- onDeclined: () => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- }),
- modalClassName: 'versions-tree-modal',
- cancelButtonText: i18n('Close'),
- title: i18n('Version Tree')
- }
- });
- },
+ openTree(dispatch, treeProps) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.VERSION_TREE,
+ modalComponentProps: treeProps,
+ onDeclined: () =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ }),
+ modalClassName: 'versions-tree-modal',
+ cancelButtonText: i18n('Close'),
+ title: i18n('Version Tree')
+ }
+ });
+ },
- selectVersionFromModal(dispatch, {version}) {
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- this.selectVersion(dispatch, {version});
- },
+ selectVersionFromModal(dispatch, { version }) {
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ this.selectVersion(dispatch, { version });
+ },
- archiveItem(dispatch, itemId) {
- ItemsHelper.archiveItem(itemId).then(() => {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.ONBOARDING_CATALOG
- });
- });
- },
+ archiveItem(dispatch, itemId) {
+ ItemsHelper.archiveItem(itemId).then(() => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.ONBOARDING_CATALOG
+ });
+ });
+ },
- restoreItemFromArchive(dispatch, itemId) {
- ItemsHelper.restoreItem(itemId).then(() => {
- ScreensHelper.loadScreen(dispatch, {
- screen: enums.SCREEN.ONBOARDING_CATALOG
- });
- });
- }
+ restoreItemFromArchive(dispatch, itemId) {
+ ItemsHelper.restoreItem(itemId).then(() => {
+ ScreensHelper.loadScreen(dispatch, {
+ screen: enums.SCREEN.ONBOARDING_CATALOG
+ });
+ });
+ }
};
export default VersionsPageActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
index 983ab79a14..3a3879ddb3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js
@@ -16,12 +16,12 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- VERSIONS_LOADED: null,
- SELECT_VERSION: null,
- SELECT_NONE: null
+ VERSIONS_LOADED: null,
+ SELECT_VERSION: null,
+ SELECT_NONE: null
});
export const itemTypes = {
- LICENSE_MODEL: 'vendor-license-models',
- SOFTWARE_PRODUCT: 'vendor-software-products'
+ LICENSE_MODEL: 'vendor-license-models',
+ SOFTWARE_PRODUCT: 'vendor-software-products'
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
index 9b6fa9f803..c270278f21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js
@@ -13,30 +13,34 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './VersionsPageConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes } from './VersionsPageConstants.js';
+import { combineReducers } from 'redux';
import VersionsPageCreationReducer from './creation/VersionsPageCreationReducer.js';
import PermissionsReducer from '../permissions/PermissionsReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
function VersionsListReducer(state = {}, action) {
- switch (action.type) {
- case actionTypes.VERSIONS_LOADED:
- let {versions, itemType = state.itemType, itemId} = action;
- return {...state, versions, itemType, itemId};
- case actionTypes.SELECT_VERSION:
- return {...state, selectedVersion: action.versionId === state.selectedVersion ? null : action.versionId};
- case actionTypes.SELECT_NONE:
- return {...state, selectedVersion: null};
- default:
- return state;
- }
-};
-
-
+ switch (action.type) {
+ case actionTypes.VERSIONS_LOADED:
+ let { versions, itemType = state.itemType, itemId } = action;
+ return { ...state, versions, itemType, itemId };
+ case actionTypes.SELECT_VERSION:
+ return {
+ ...state,
+ selectedVersion:
+ action.versionId === state.selectedVersion
+ ? null
+ : action.versionId
+ };
+ case actionTypes.SELECT_NONE:
+ return { ...state, selectedVersion: null };
+ default:
+ return state;
+ }
+}
export default combineReducers({
- versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
- versionsList: VersionsListReducer,
- permissions: PermissionsReducer
+ versionCreation: createPlainDataReducer(VersionsPageCreationReducer),
+ versionsList: VersionsListReducer,
+ permissions: PermissionsReducer
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
index 26f8450f4c..74d88f0b52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
@@ -22,61 +22,108 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
const maxContributors = 6;
-function extraUsersTooltip (extraUsers) {
- return (
- <Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'>
- {extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)}
- </Tooltip>
- );
+function extraUsersTooltip(extraUsers) {
+ return (
+ <Tooltip className="extra-users-tooltip" id="extra-users-tooltip-id">
+ {extraUsers.map(extraUser => (
+ <div key={extraUser.userId} className="extra-user">
+ {extraUser.fullName}
+ </div>
+ ))}
+ </Tooltip>
+ );
}
-const User = ({user, isCurrentUser, dataTestId}) => (
- <SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary'
- data-test-id={dataTestId}/>
+const User = ({ user, isCurrentUser, dataTestId }) => (
+ <SVGIcon
+ className={`user-view ${isCurrentUser ? 'current-user' : ''}`}
+ name="user"
+ label={user.fullName}
+ labelPosition="right"
+ color="primary"
+ data-test-id={dataTestId}
+ />
);
-const Owner = ({owner, isCurrentUser}) => (
- <div className='owner-view'>
- <div className='permissions-view-title'>{i18n('Owner')}</div>
- <User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/>
- </div>
+const Owner = ({ owner, isCurrentUser }) => (
+ <div className="owner-view">
+ <div className="permissions-view-title">{i18n('Owner')}</div>
+ <User user={owner} isCurrentUser={isCurrentUser} dataTestId="owner" />
+ </div>
);
-const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => {
- let extraUsers = contributors.length - maxContributors;
- return (
- <div className='contributors-view'>
- <div className='permissions-view-title'>{i18n('Contributors')}</div>
- {contributors.slice(0, maxContributors).map(contributor =>
- <User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/>
- )}
- {extraUsers > 0 &&
- <OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}>
- <div className='extra-contributors'>{`+${extraUsers}`}</div>
- </OverlayTrigger>
- }
- {currentUser.userId === owner.userId && !isManual &&
- <span
- className='manage-permissions'
- onClick={onManagePermissions}
- data-test-id='versions-page-manage-permissions'>
- {i18n('Manage Permissions')}
- </span>
- }
- </div>
- );
+const Contributors = ({
+ contributors,
+ owner,
+ currentUser,
+ onManagePermissions,
+ isManual
+}) => {
+ let extraUsers = contributors.length - maxContributors;
+ return (
+ <div className="contributors-view">
+ <div className="permissions-view-title">{i18n('Contributors')}</div>
+ {contributors
+ .slice(0, maxContributors)
+ .map(contributor => (
+ <User
+ key={contributor.userId}
+ user={contributor}
+ isCurrentUser={
+ contributor.userId === currentUser.userId
+ }
+ dataTestId="contributor"
+ />
+ ))}
+ {extraUsers > 0 && (
+ <OverlayTrigger
+ placement="bottom"
+ overlay={extraUsersTooltip(
+ contributors.slice(maxContributors)
+ )}>
+ <div className="extra-contributors">{`+${extraUsers}`}</div>
+ </OverlayTrigger>
+ )}
+ {currentUser.userId === owner.userId &&
+ !isManual && (
+ <span
+ className="manage-permissions"
+ onClick={onManagePermissions}
+ data-test-id="versions-page-manage-permissions">
+ {i18n('Manage Permissions')}
+ </span>
+ )}
+ </div>
+ );
};
-const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => (
- <div className='versions-page-permissions-view-wrapper'>
- <div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div>
- <div className='permissions-view-content'>
- <div className='permissions-view'>
- <Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} />
- <Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/>
- </div>
- </div>
- </div>
+const PermissionsView = ({
+ owner,
+ contributors,
+ currentUser = {},
+ onManagePermissions,
+ isManual
+}) => (
+ <div className="versions-page-permissions-view-wrapper">
+ <div className="permissions-view-wrapper-title">
+ {i18n('Permissions')}
+ </div>
+ <div className="permissions-view-content">
+ <div className="permissions-view">
+ <Owner
+ owner={owner}
+ isCurrentUser={owner.userId === currentUser.userId}
+ />
+ <Contributors
+ owner={owner}
+ contributors={contributors}
+ currentUser={currentUser}
+ onManagePermissions={onManagePermissions}
+ isManual={isManual}
+ />
+ </div>
+ </div>
+ </div>
);
export default PermissionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
index 47255eb9dc..d74805eccc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
@@ -20,108 +20,177 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-const formatTime = (time) => {
- if (!time) { return ''; }
+const formatTime = time => {
+ if (!time) {
+ return '';
+ }
- const date = new Date(time);
- const options = {
- year: 'numeric',
- month: 'short',
- day: 'numeric',
- hour: '2-digit',
- minute: '2-digit'
- };
- const newDate = date.toLocaleTimeString('en-US', options);
+ const date = new Date(time);
+ const options = {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ };
+ const newDate = date.toLocaleTimeString('en-US', options);
- return newDate;
+ return newDate;
};
const DescriptionField = ({ className, text, useTooltip }) => {
- if (useTooltip) {
- return (
- <div className={className}>
- <OverlayTrigger
- placement='bottom'
- overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
- <div className='description-text'>{text}</div>
- </OverlayTrigger>
- </div>
- );
- }
- return <div className={className}>{text}</div>;
+ if (useTooltip) {
+ return (
+ <div className={className}>
+ <OverlayTrigger
+ placement="bottom"
+ overlay={
+ <Tooltip
+ className="version-description-tooltip"
+ id="version-description-tooltip">
+ {text}
+ </Tooltip>
+ }>
+ <div className="description-text">{text}</div>
+ </OverlayTrigger>
+ </div>
+ );
+ }
+ return <div className={className}>{text}</div>;
};
-const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
+const VersionListItem = ({
+ data,
+ onSelectVersion,
+ onNavigateToVersion,
+ onCreateVersion,
+ isHeader,
+ isSelected,
+ isCollaborator
+}) => {
+ let { modificationTime, name, status, description, additionalInfo } = data;
+ const modificationText = !isHeader
+ ? formatTime(modificationTime)
+ : i18n('Last Edited On');
- let {modificationTime, name, status, description, additionalInfo} = data;
- const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
-
- return (
- <div
- data-test-id='version-item-row'
- className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
- onClick={e => {
- e.stopPropagation();
- onSelectVersion();
- onNavigateToVersion();
- }}>
- <div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
- <div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
- <div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
- <DescriptionField
- className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
- useTooltip={!isHeader && description}
- text={description} />
-
- {
- isHeader ?
- <div className='version-item-field header-field actions'>{i18n('Actions')}</div>
- :
- <div className='version-item-field item-actions'>
- <div className='version-item-field item-select'>
- <SVGIcon
- name='check-circle'
- data-test-id='versions-page-select-version'
- onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
- label={i18n('Go to this Version')}
- labelPosition='right' />
- </div>
- <div className='version-item-field item-create'>
- {!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion &&
- <SVGIcon
- name='plus-circle'
- data-test-id='versions-page-create-version'
- onClick={e => { e.stopPropagation(); onCreateVersion(); }}
- label={i18n('Create New Version')}
- labelPosition='right'
- disabled={!isCollaborator || !onCreateVersion} />
- }
- </div>
- </div>
- }
- </div>
- );
+ return (
+ <div
+ data-test-id="version-item-row"
+ className={`version-item-row ${
+ isHeader ? 'header-row' : 'clickable'
+ } ${isSelected ? 'selected' : ''}`}
+ onClick={e => {
+ e.stopPropagation();
+ onSelectVersion();
+ onNavigateToVersion();
+ }}>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field item-version' : 'item-version'
+ }`}>
+ {name}
+ </div>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field item-status' : 'item-status'
+ }`}>
+ {status}
+ </div>
+ <div
+ className={`version-item-field ${
+ isHeader ? 'header-field' : 'item-last-edited'
+ }`}>
+ {modificationText}
+ </div>
+ <DescriptionField
+ className={`version-item-field ${
+ isHeader
+ ? 'header-field header-description'
+ : 'item-description'
+ }`}
+ useTooltip={!isHeader && description}
+ text={description}
+ />
+ {isHeader ? (
+ <div className="version-item-field header-field actions">
+ {i18n('Actions')}
+ </div>
+ ) : (
+ <div className="version-item-field item-actions">
+ <div className="version-item-field item-select">
+ <SVGIcon
+ name="check-circle"
+ data-test-id="versions-page-select-version"
+ onClick={e => {
+ e.stopPropagation();
+ onNavigateToVersion();
+ }}
+ label={i18n('Go to this Version')}
+ labelPosition="right"
+ />
+ </div>
+ <div className="version-item-field item-create">
+ {!isHeader &&
+ isCollaborator &&
+ additionalInfo.OptionalCreationMethods.length > 0 &&
+ onCreateVersion && (
+ <SVGIcon
+ name="plus-circle"
+ data-test-id="versions-page-create-version"
+ onClick={e => {
+ e.stopPropagation();
+ onCreateVersion();
+ }}
+ label={i18n('Create New Version')}
+ labelPosition="right"
+ disabled={
+ !isCollaborator || !onCreateVersion
+ }
+ />
+ )}
+ </div>
+ </div>
+ )}
+ </div>
+ );
};
-const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
- <div className='version-list'>
- <VersionListItem
- data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
- isHeader />
- <div className='version-list-items'>
- {versions.map(version =>
- <VersionListItem
- key={version.id}
- data={version}
- onSelectVersion={() => onSelectVersion({version})}
- onNavigateToVersion={() => onNavigateToVersion({version})}
- onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false}
- isSelected={selectedVersion === version.id}
- isCollaborator={isCollaborator} />
- )}
- </div>
- </div>
+const VersionList = ({
+ versions,
+ onSelectVersion,
+ onNavigateToVersion,
+ onCreateVersion,
+ selectedVersion,
+ isCollaborator
+}) => (
+ <div className="version-list">
+ <VersionListItem
+ data={{
+ name: i18n('Version'),
+ status: i18n('Status'),
+ description: i18n('Description')
+ }}
+ isHeader
+ />
+ <div className="version-list-items">
+ {versions.map(version => (
+ <VersionListItem
+ key={version.id}
+ data={version}
+ onSelectVersion={() => onSelectVersion({ version })}
+ onNavigateToVersion={() => onNavigateToVersion({ version })}
+ onCreateVersion={
+ onCreateVersion
+ ? () => onCreateVersion({ version })
+ : false
+ }
+ isSelected={selectedVersion === version.id}
+ isCollaborator={isCollaborator}
+ />
+ ))}
+ </div>
+ </div>
);
export default VersionList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
index 66c1c79be5..e0cb925df4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js
@@ -13,32 +13,52 @@
* 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 VersionsPageCreationActionHelper from './VersionsPageCreationActionHelper.js';
import VersionsPageActionHelper from '../VersionsPageActionHelper.js';
import VersionsPageCreationView from './VersionsPageCreationView.jsx';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-import {VERSION_CREATION_FORM_NAME} from './VersionsPageCreationConstants.js';
+import { VERSION_CREATION_FORM_NAME } from './VersionsPageCreationConstants.js';
-export const mapStateToProps = ({versionsPage: {versionCreation}}) => {
- let {genericFieldInfo} = versionCreation;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+export const mapStateToProps = ({ versionsPage: { versionCreation } }) => {
+ let { genericFieldInfo } = versionCreation;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- return {...versionCreation, isFormValid};
+ return { ...versionCreation, isFormValid };
};
-export const mapActionsToProps = (dispatch, {itemId, itemType, additionalProps}) => {
- return {
- onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VERSION_CREATION_FORM_NAME, customValidations}),
- onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
- onSubmit: ({baseVersion, payload}) => {
- VersionsPageCreationActionHelper.close(dispatch);
- VersionsPageCreationActionHelper.createVersion(dispatch, {baseVersion, itemId, payload}).then(response => {
- VersionsPageActionHelper.onNavigateToVersion(dispatch, {version: response, itemId, itemType, additionalProps});
- });
- },
- onValidateForm: () => ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
- };
+export const mapActionsToProps = (
+ dispatch,
+ { itemId, itemType, additionalProps }
+) => {
+ return {
+ onDataChanged: (deltaData, customValidations) =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: VERSION_CREATION_FORM_NAME,
+ customValidations
+ }),
+ onCancel: () => VersionsPageCreationActionHelper.close(dispatch),
+ onSubmit: ({ baseVersion, payload }) => {
+ VersionsPageCreationActionHelper.close(dispatch);
+ VersionsPageCreationActionHelper.createVersion(dispatch, {
+ baseVersion,
+ itemId,
+ payload
+ }).then(response => {
+ VersionsPageActionHelper.onNavigateToVersion(dispatch, {
+ version: response,
+ itemId,
+ itemType,
+ additionalProps
+ });
+ });
+ },
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(VersionsPageCreationView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ VersionsPageCreationView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
index bc038689a4..6e3be705c0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js
@@ -15,65 +15,76 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './VersionsPageCreationConstants.js';
-import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js';
-import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { actionTypes } from './VersionsPageCreationConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
-import {actionTypes as VersionsPageActionTypes} from '../VersionsPageConstants.js';
+import { actionTypes as VersionsPageActionTypes } from '../VersionsPageConstants.js';
-function baseUrl({itemId, baseVersion}) {
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
+function baseUrl({ itemId, baseVersion }) {
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`;
}
-function createVersion({itemId, baseVersion, payload: {description, creationMethod} }) {
- return RestAPIUtil.post(baseUrl({itemId, baseVersion}), {description, creationMethod});
+function createVersion({
+ itemId,
+ baseVersion,
+ payload: { description, creationMethod }
+}) {
+ return RestAPIUtil.post(baseUrl({ itemId, baseVersion }), {
+ description,
+ creationMethod
+ });
}
-
export default {
+ open(dispatch, { itemType, itemId, additionalProps, baseVersion }) {
+ dispatch({
+ type: actionTypes.OPEN
+ });
- open(dispatch, {itemType, itemId, additionalProps, baseVersion}) {
- dispatch({
- type: actionTypes.OPEN
- });
-
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_SHOW,
- data: {
- modalComponentName: modalContentMapper.VERSION_CREATION,
- modalComponentProps: {itemType, itemId, additionalProps, baseVersion},
- title: i18n('New Version - From {name}', {name: baseVersion.name})
- }
- });
- },
-
- close(dispatch){
- dispatch({
- type: actionTypes.CLOSE
- });
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_SHOW,
+ data: {
+ modalComponentName: modalContentMapper.VERSION_CREATION,
+ modalComponentProps: {
+ itemType,
+ itemId,
+ additionalProps,
+ baseVersion
+ },
+ title: i18n('New Version - From {name}', {
+ name: baseVersion.name
+ })
+ }
+ });
+ },
- dispatch({
- type: modalActionTypes.GLOBAL_MODAL_CLOSE
- });
- },
+ close(dispatch) {
+ dispatch({
+ type: actionTypes.CLOSE
+ });
- createVersion(dispatch, {itemId, baseVersion, payload}){
- return createVersion({itemId, baseVersion, payload}).then(result => {
- return ItemsHelper.fetchVersions({itemId}).then(response => {
- dispatch({
- type: VersionsPageActionTypes.VERSIONS_LOADED,
- versions: response.results,
- itemId
- });
- dispatch({
- type: actionTypes.VERSION_CREATED,
- result
- });
- return result;
- });
- });
- }
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_CLOSE
+ });
+ },
+ createVersion(dispatch, { itemId, baseVersion, payload }) {
+ return createVersion({ itemId, baseVersion, payload }).then(result => {
+ return ItemsHelper.fetchVersions({ itemId }).then(response => {
+ dispatch({
+ type: VersionsPageActionTypes.VERSIONS_LOADED,
+ versions: response.results,
+ itemId
+ });
+ dispatch({
+ type: actionTypes.VERSION_CREATED,
+ result
+ });
+ return result;
+ });
+ });
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
index 4ce381d4de..e761232443 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js
@@ -16,13 +16,13 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- OPEN: null,
- CLOSE: null,
- VERSION_CREATED: null
+ OPEN: null,
+ CLOSE: null,
+ VERSION_CREATED: null
});
export const VERSION_CREATION_FORM_NAME = 'VCREATIONFORM';
export const defaultState = {
- creationMethod: 'major'
-}; \ No newline at end of file
+ creationMethod: 'major'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
index 620cf4717f..a762e4d338 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js
@@ -13,32 +13,39 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, VERSION_CREATION_FORM_NAME, defaultState} from './VersionsPageCreationConstants.js';
+import {
+ actionTypes,
+ VERSION_CREATION_FORM_NAME,
+ defaultState
+} from './VersionsPageCreationConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.OPEN:
- return {
- ...state,
- formReady: null,
- formName: VERSION_CREATION_FORM_NAME,
- data: {...defaultState},
- genericFieldInfo: {
- description: {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- creationMethod: {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- }
- };
- case actionTypes.CLOSE:
- return {};
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: VERSION_CREATION_FORM_NAME,
+ data: { ...defaultState },
+ genericFieldInfo: {
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ creationMethod: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ }
+ };
+ case actionTypes.CLOSE:
+ return {};
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
index caa85fe107..ba92d26067 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
@@ -20,125 +20,116 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
import Form from 'nfvo-components/input/validation/Form.jsx';
const VersionPropType = PropTypes.shape({
- name: PropTypes.string,
- description: PropTypes.string,
- creationMethod: PropTypes.string
+ name: PropTypes.string,
+ description: PropTypes.string,
+ creationMethod: PropTypes.string
});
class VersionsPageCreationView extends React.Component {
-
- static propTypes = {
- data: VersionPropType,
- availableMethods: PropTypes.array,
- onDataChanged: PropTypes.func.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onCancel: PropTypes.func.isRequired
- };
-
- render() {
- let {data = {}, genericFieldInfo, baseVersion, onDataChanged, onCancel} = this.props;
- let {additionalInfo: {OptionalCreationMethods}} = baseVersion;
- let {description, creationMethod} = data;
-
- return (
- <div className='version-creation-page'>
- { genericFieldInfo && <Form
- ref={(validationForm) => this.validationForm = validationForm}
- hasButtons={true}
- onSubmit={() => this.submit()}
- submitButtonText={i18n('Create')}
- onReset={() => onCancel()}
- labledButtons={true}
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.validate()}>
-
- <div className='version-form-row'>
- <Input
- label={i18n('Version Category')}
- value={creationMethod}
- onChange={e => this.onSelectMethod(e)}
- type='select'
- overlayPos='bottom'
- data-test-id='new-version-category'
- isValid={genericFieldInfo.creationMethod.isValid}
- errorText={genericFieldInfo.creationMethod.errorText}
- isRequired>
- <option key='' value=''>{i18n('Please select…')}</option>
- {OptionalCreationMethods.map(method => <option key={method} value={method}>{i18n(method)}</option>)}
- </Input>
- </div>
-
- <div className='version-form-row'>
- <Input
- label={i18n('Description')}
- value={description}
- type='text'
- overlayPos='bottom'
- data-test-id='new-version-description'
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- onChange={description => onDataChanged({description})}
- isRequired />
- </div>
-
- </Form> }
- </div>
- );
- }
-
- onSelectMethod(e) {
- const selectedIndex = e.target.selectedIndex;
- const creationMethod = e.target.options[selectedIndex].value;
- this.props.onDataChanged({creationMethod});
- }
-
- submit() {
- let {baseVersion, data: {description, creationMethod}} = this.props;
- this.props.onSubmit({baseVersion, payload: {description, creationMethod}});
- }
-
- validate() {
- this.props.onValidateForm();
- }
-
+ static propTypes = {
+ data: VersionPropType,
+ availableMethods: PropTypes.array,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
+
+ render() {
+ let {
+ data = {},
+ genericFieldInfo,
+ baseVersion,
+ onDataChanged,
+ onCancel
+ } = this.props;
+ let { additionalInfo: { OptionalCreationMethods } } = baseVersion;
+ let { description, creationMethod } = data;
+
+ return (
+ <div className="version-creation-page">
+ {genericFieldInfo && (
+ <Form
+ ref={validationForm =>
+ (this.validationForm = validationForm)
+ }
+ hasButtons={true}
+ onSubmit={() => this.submit()}
+ submitButtonText={i18n('Create')}
+ onReset={() => onCancel()}
+ labledButtons={true}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.validate()}>
+ <div className="version-form-row">
+ <Input
+ label={i18n('Version Category')}
+ value={creationMethod}
+ onChange={e => this.onSelectMethod(e)}
+ type="select"
+ overlayPos="bottom"
+ data-test-id="new-version-category"
+ isValid={
+ genericFieldInfo.creationMethod.isValid
+ }
+ errorText={
+ genericFieldInfo.creationMethod.errorText
+ }
+ isRequired>
+ <option key="" value="">
+ {i18n('Please select…')}
+ </option>
+ {OptionalCreationMethods.map(method => (
+ <option key={method} value={method}>
+ {i18n(method)}
+ </option>
+ ))}
+ </Input>
+ </div>
+
+ <div className="version-form-row">
+ <Input
+ label={i18n('Description')}
+ value={description}
+ type="text"
+ overlayPos="bottom"
+ data-test-id="new-version-description"
+ isValid={genericFieldInfo.description.isValid}
+ errorText={
+ genericFieldInfo.description.errorText
+ }
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ isRequired
+ />
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
+
+ onSelectMethod(e) {
+ const selectedIndex = e.target.selectedIndex;
+ const creationMethod = e.target.options[selectedIndex].value;
+ this.props.onDataChanged({ creationMethod });
+ }
+
+ submit() {
+ let { baseVersion, data: { description, creationMethod } } = this.props;
+ this.props.onSubmit({
+ baseVersion,
+ payload: { description, creationMethod }
+ });
+ }
+
+ validate() {
+ this.props.onValidateForm();
+ }
}
export default VersionsPageCreationView;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
/*
<div className='software-product-inline-section'>
<Input
diff --git a/openecomp-ui/src/sdc-app/sdc.app.jsx b/openecomp-ui/src/sdc-app/sdc.app.jsx
index b467e3ca9d..b759ffd259 100644
--- a/openecomp-ui/src/sdc-app/sdc.app.jsx
+++ b/openecomp-ui/src/sdc-app/sdc.app.jsx
@@ -25,9 +25,18 @@ import Application from './Application.jsx';
import Modules from './ModulesOptions.jsx';
//chrome 48 remove svg method which is used in jointjs core -> https://github.com/cpettitt/dagre-d3/issues/202 --> http://jointjs.com/blog/get-transform-to-element-polyfill.html
-SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
- return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
-};
-
-ReactDOM.render(<Application><Modules/></Application>, document.getElementById('sdc-app'));
+SVGElement.prototype.getTransformToElement =
+ SVGElement.prototype.getTransformToElement ||
+ function(toElement) {
+ return toElement
+ .getScreenCTM()
+ .inverse()
+ .multiply(this.getScreenCTM());
+ };
+ReactDOM.render(
+ <Application>
+ <Modules />
+ </Application>,
+ document.getElementById('sdc-app')
+);