From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../ArchivedSoftwareProductReducer.js | 14 +- .../FinalizedSoftwareProductReducer.js | 14 +- .../onboarding/softwareProduct/SoftwareProduct.js | 947 ++++++++++------ .../softwareProduct/SoftwareProductActionHelper.js | 1174 ++++++++++++-------- .../SoftwareProductCategoriesHelper.js | 30 +- .../softwareProduct/SoftwareProductConstants.js | 49 +- .../softwareProduct/SoftwareProductListReducer.js | 26 +- .../softwareProduct/SoftwareProductReducer.js | 176 +-- .../attachments/SoftwareProductAttachments.js | 206 ++-- .../SoftwareProductAttachmentsActionHelper.js | 14 +- .../SoftwareProductAttachmentsConstants.js | 6 +- .../SoftwareProductAttachmentsReducer.js | 14 +- .../attachments/SoftwareProductAttachmentsUtils.js | 14 +- .../attachments/SoftwareProductAttachmentsView.jsx | 312 ++++-- .../softwareProduct/attachments/setup/HeatSetup.js | 81 +- .../attachments/setup/HeatSetupActionHelper.js | 92 +- .../attachments/setup/HeatSetupConstants.js | 32 +- .../attachments/setup/HeatSetupReducer.js | 239 ++-- .../attachments/setup/HeatSetupView.jsx | 713 +++++++----- .../attachments/validation/HeatValidation.js | 74 +- .../validation/HeatValidationActionHelper.js | 37 +- .../validation/HeatValidationConstants.js | 55 +- .../validation/HeatValidationReducer.js | 371 ++++--- .../attachments/validation/HeatValidationView.jsx | 542 +++++---- .../SoftwareProductComponentEditorReducer.js | 150 +-- .../components/SoftwareProductComponents.js | 93 +- .../SoftwareProductComponentsActionHelper.js | 360 +++--- .../SoftwareProductComponentsConstants.js | 50 +- .../SoftwareProductComponentsListReducer.js | 32 +- .../SoftwareProductComponentsListView.jsx | 168 +-- .../compute/ComputeFlavorActionHelper.js | 362 ++++-- .../compute/SoftwareProductComponentCompute.js | 74 +- .../SoftwareProductComponentComputeView.jsx | 144 ++- .../compute/computeComponents/ComputeFlavors.js | 218 ++-- .../compute/computeComponents/GuestOs.jsx | 136 ++- .../compute/computeComponents/NumberOfVms.jsx | 97 +- .../computeFlavor/ComputeFlavorConstants.js | 20 +- .../computeFlavor/ComputeFlavorEditor.js | 99 +- .../computeFlavor/ComputeFlavorEditorView.jsx | 169 +-- .../computeFlavor/ComputeFlavorListReducer.js | 36 +- .../computeFlavor/ComputeFlavorReducer.js | 53 +- .../computeComponents/computeFlavor/VmSizing.jsx | 223 ++-- .../creation/SoftwareProductComponentCreation.js | 64 +- .../SoftwareProductComponentCreationView.jsx | 121 +- .../general/SoftwareProductComponentsGeneral.js | 92 +- .../SoftwareProductComponentsGeneralView.jsx | 572 ++++++---- .../components/images/ImageValidations.js | 6 +- .../SoftwareProductComponentsImageActionHelper.js | 375 ++++--- .../SoftwareProductComponentsImageConstants.js | 10 +- .../images/SoftwareProductComponentsImageEditor.js | 119 +- .../SoftwareProductComponentsImageEditorReducer.js | 47 +- .../SoftwareProductComponentsImageEditorView.jsx | 116 +- .../images/SoftwareProductComponentsImageList.js | 161 ++- .../SoftwareProductComponentsImageListReducer.js | 15 +- .../SoftwareProductComponentsImageListView.jsx | 237 ++-- .../images/imagesEditorComponents/FileDetails.jsx | 78 +- .../images/imagesEditorComponents/Format.jsx | 54 +- .../images/imagesEditorComponents/ImageDetails.jsx | 33 +- .../images/imagesEditorComponents/Version.jsx | 42 +- .../SoftwareProductComponentLoadBalancing.js | 55 +- ...oftwareProductComponentLoadBalancingRefView.jsx | 359 +++--- .../SoftwareProductComponentsMonitoring.js | 79 +- ...twareProductComponentsMonitoringActionHelper.js | 115 +- ...SoftwareProductComponentsMonitoringConstants.js | 27 +- .../SoftwareProductComponentsMonitoringReducer.js | 37 +- .../SoftwareProductComponentsMonitoringView.jsx | 232 ++-- .../components/network/NICCreation/NICCreation.js | 66 +- .../network/NICCreation/NICCreationActionHelper.js | 54 +- .../network/NICCreation/NICCreationReducer.js | 65 +- .../network/NICCreation/NICCreationView.jsx | 217 ++-- .../network/SoftwareProductComponentsNICEditor.js | 125 ++- .../SoftwareProductComponentsNICEditorReducer.js | 62 +- .../SoftwareProductComponentsNICEditorView.jsx | 147 ++- .../SoftwareProductComponentsNICListReducer.js | 26 +- ...SoftwareProductComponentsNetworkActionHelper.js | 300 +++-- .../SoftwareProductComponentsNetworkConstants.js | 26 +- .../SoftwareProductComponentsNetworkList.js | 179 +-- .../SoftwareProductComponentsNetworkListView.jsx | 313 +++--- .../network/nicEditorComponents/Acceptable.jsx | 142 ++- .../network/nicEditorComponents/FlowLength.jsx | 22 +- .../network/nicEditorComponents/InFlowTraffic.jsx | 22 +- .../network/nicEditorComponents/IpConfig.jsx | 52 +- .../network/nicEditorComponents/NameAndPurpose.jsx | 70 +- .../network/nicEditorComponents/Network.jsx | 110 +- .../network/nicEditorComponents/OutFlowTraffic.jsx | 22 +- .../network/nicEditorComponents/PacketsBytes.jsx | 93 +- .../network/nicEditorComponents/Protocols.jsx | 120 +- .../network/nicEditorComponents/Sizing.jsx | 41 +- ...oftwareProductComponentProcessesActionHelper.js | 263 +++-- .../SoftwareProductComponentProcessesConstants.js | 27 +- .../SoftwareProductComponentProcessesEditor.js | 86 +- ...ftwareProductComponentProcessesEditorReducer.js | 78 +- ...SoftwareProductComponentProcessesEditorView.jsx | 17 +- .../SoftwareProductComponentProcessesList.js | 83 +- ...SoftwareProductComponentProcessesListReducer.js | 34 +- .../SoftwareProductComponentsProcessesListView.jsx | 110 +- .../storage/SoftwareProductComponentStorage.js | 59 +- .../SoftwareProductComponentStorageView.jsx | 450 +++++--- .../creation/SoftwareProductCreation.js | 126 ++- .../SoftwareProductCreationActionHelper.js | 98 +- .../creation/SoftwareProductCreationConstants.js | 6 +- .../creation/SoftwareProductCreationReducer.js | 114 +- .../creation/SoftwareProductCreationView.jsx | 468 +++++--- .../dependencies/SoftwareProductDependencies.js | 51 +- .../SoftwareProductDependenciesActionHelper.js | 130 ++- .../SoftwareProductDependenciesConstants.js | 12 +- .../SoftwareProductDependenciesReducer.js | 68 +- .../SoftwareProductDependenciesUtils.js | 108 +- .../SoftwareProductDependenciesView.jsx | 292 +++-- .../deployment/SoftwareProductDeployment.js | 85 +- .../SoftwareProductDeploymentActionHelper.js | 232 ++-- .../SoftwareProductDeploymentConstants.js | 12 +- .../SoftwareProductDeploymentListReducer.js | 14 +- .../deployment/SoftwareProductDeploymentView.jsx | 136 +-- .../editor/SoftwareProductDeploymentEditor.js | 144 ++- .../SoftwareProductDeploymentEditorReducer.js | 57 +- .../editor/SoftwareProductDeploymentEditorView.jsx | 351 ++++-- .../details/SoftwareProductDetails.js | 190 ++-- .../details/SoftwareProductDetailsReducer.js | 93 +- .../SoftwareProductDetailsVendorSelector.jsx | 122 +- .../details/SoftwareProductDetailsView.jsx | 993 ++++++++++------- .../landingPage/SoftwareProductLandingPage.js | 204 ++-- .../landingPage/SoftwareProductLandingPageView.jsx | 396 ++++--- .../networks/SoftwareProductNetworks.js | 13 +- .../SoftwareProductNetworksActionHelper.js | 29 +- .../networks/SoftwareProductNetworksConstants.js | 2 +- .../networks/SoftwareProductNetworksListReducer.js | 14 +- .../networks/SoftwareProductNetworksView.jsx | 125 ++- .../processes/SoftwareProductProcessListView.jsx | 140 +-- .../processes/SoftwareProductProcesses.js | 71 +- .../SoftwareProductProcessesActionHelper.js | 218 ++-- .../processes/SoftwareProductProcessesConstants.js | 22 +- .../processes/SoftwareProductProcessesEditor.js | 73 +- .../SoftwareProductProcessesEditorForm.jsx | 341 +++--- .../SoftwareProductProcessesEditorReducer.js | 78 +- .../SoftwareProductProcessesEditorView.jsx | 16 +- .../SoftwareProductProcessesListReducer.js | 34 +- .../processes/SoftwareProductProcessesView.jsx | 88 +- 138 files changed, 12185 insertions(+), 7824 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct') 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 ( +
+
+ {activeTab === tabsMapping.SETUP && + candidateInProcess && ( + + )} + {candidateInProcess && ( + + )} + {activeTab === tabsMapping.VALIDATION && + softwareProductId && ( + + )} +
+ + onDownload({ + heatCandidate: heatSetup, + isReadOnlyMode: + isReadOnlyMode || + !candidateInProcess, + version + }) + : undefined + } + data-test-id="download-heat" + /> + + this.refs.hiddenImportFileInput.click(evt) + } + data-test-id="upload-heat" + /> + this.handleImport(evt)} + /> +
+ this.handleTabPress(key)}> + + + setActiveTab({ activeTab: tab }) + } + onProcessAndValidate={onProcessAndValidate} + softwareProductId={softwareProductId} + isReadOnlyMode={isReadOnlyMode} + version={version} + /> + + + + + +
+ ); + } - return ( -
-
- {(activeTab === tabsMapping.SETUP) && candidateInProcess && - - } - {candidateInProcess && - } - {(activeTab === tabsMapping.VALIDATION && softwareProductId) && - } -
- onDownload({heatCandidate: heatSetup, isReadOnlyMode: isReadOnlyMode || !candidateInProcess, version}) : undefined} - data-test-id='download-heat'/> - this.refs.hiddenImportFileInput.click(evt)} - data-test-id='upload-heat'/> - this.handleImport(evt)}/> -
- this.handleTabPress(key)}> - - setActiveTab({activeTab: tab})} - onProcessAndValidate={onProcessAndValidate} - softwareProductId={softwareProductId} - isReadOnlyMode={isReadOnlyMode} - version={version}/> - - - - - -
- ); - } - - 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 ( -
  • {this.props.children}
    • - ); - } + render() { + return
  • {this.props.children}
    • ; + } } - 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 ( - this.setState(data)} - items={this.state.data} - draggingIndex={this.state.draggingIndex} - sortId={i} - outline='list'> - ); - }, this); - - return ( -
    0) ? 'modules-list-wrapper-divider' : ''}`}> -
    - {!isBaseExist &&
    } -
    -
    - {(listItems.length > 0) &&
      {listItems}
    } -
    - ); - } + 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 ( + this.setState(data)} + items={this.state.data} + draggingIndex={this.state.draggingIndex} + sortId={i} + outline="list"> + + + ); + }, this); + + return ( +
    0 ? 'modules-list-wrapper-divider' : '' + }`}> +
    + {!isBaseExist && ( +
    + +
    + )} +
    + +
    +
    + {listItems.length > 0 &&
      {listItems}
    } +
    + ); + } } -const tooltip = (name) => {name}; -const UnassignedFileList = (props) => { - return ( -
    -
    -
    -
    {i18n('UNASSIGNED FILES')}
    -
    {props.children}
    -
    -
    - ); +const tooltip = name => {name}; +const UnassignedFileList = props => { + return ( +
    +
    +
    +
    + {i18n('UNASSIGNED FILES')} +
    +
    {props.children}
    +
    +
    + ); }; const EmptyListContent = props => { - let {heatDataExist} = props; - let displayText = heatDataExist ? 'All Files Are Assigned' : ''; - return ( -
    -
    {i18n(displayText)}
    -
    - ); + let { heatDataExist } = props; + let displayText = heatDataExist ? 'All Files Are Assigned' : ''; + return ( +
    +
    {i18n(displayText)}
    +
    + ); }; -const UnassignedFile = (props) => ( - -
  • {props.name}
    • -     +const UnassignedFile = props => ( + +
  • + {props.name} +
    • +     ); -const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => { - const displayText = add ? 'Add Volume Files' : 'Delete Volume Files'; - const action = add ? onAdd : onDelete; - return ( - - ); +const AddOrDeleteVolumeFiles = ({ + add = true, + onAdd, + onDelete, + isReadOnlyMode +}) => { + const displayText = add ? 'Add Volume Files' : 'Delete Volume Files'; + const action = add ? onAdd : onDelete; + return ( + + ); }; -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 ( - 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 ( + + 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 ( - this.input = input}/> - ); - } + componentDidMount() { + this.input.focus(); + } + + render() { + return ( + (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 ( this.handleModuleRename(evt, name)} onKeyDown={evt => this.handleSubmit(evt, name)}/>); - } - return ({name}); - } - - 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 ( -
    -
    -
    - - {`${moduleType}: `} -
    - {this.renderNameAccordingToEditState()} - {!this.state.isInNameEdit && this.setState({isInNameEdit: true})} - data-test-id={isBase ? 'base-name' : 'module-name'}/>} -
    -
    - onModuleDelete(name)} data-test-id='module-delete'/> -
    -
    - - - {displayVolumes && } - {displayVolumes && } - this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/> -
    -
    - ); - } + 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 ( + this.handleModuleRename(evt, name)} + onKeyDown={evt => this.handleSubmit(evt, name)} + /> + ); + } + return {name}; + } + + 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 ( +
    +
    +
    + + {`${moduleType}: `} +
    + {this.renderNameAccordingToEditState()} + {!this.state.isInNameEdit && ( + + this.setState({ isInNameEdit: true }) + } + data-test-id={ + isBase ? 'base-name' : 'module-name' + } + /> + )} +
    +
    + onModuleDelete(name)} + data-test-id="module-delete" + /> +
    +
    + + + {displayVolumes && ( + + )} + {displayVolumes && ( + + )} + this.setState({ displayVolumes: true })} + onDelete={() => this.deleteVolumeFiles()} + add={!displayVolumes} + /> +
    +
    + ); + } } class ArtifactOrNestedFileList extends Component { - - render() { - let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props; - return ( -
    -
    - - {type === 'artifact' && ()} - {`${title}`} - - {type === 'artifact' && } -
    - {type === 'nested' ? ( -
      {selected.map(nested => -
    • {nested}
      • - )}
    ) : - ( { - })} - value={selected} - clearable={false} - placeholder={i18n('Add Artifact')} - multi/>) - } -
    - ); - } + render() { + let { + type, + title, + selected, + options, + onSelectChanged, + onAddAllUnassigned, + isReadOnlyMode, + headerClassName + } = this.props; + return ( +
    +
    + + {type === 'artifact' && ( + + )} + {`${title}`} + + {type === 'artifact' && ( + + )} +
    + {type === 'nested' ? ( +
      + {selected.map(nested => ( +
    • + {nested} +
      • + ))} +
    + ) : ( + {})} + value={selected} + clearable={false} + placeholder={i18n('Add Artifact')} + multi + /> + )} +
    + ); + } } -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 ( -
    -
    - - 0) ? 'with-list-items' : ''} - onAddAllUnassigned={onAddAllUnassigned}/> - -
    - - { - formattedUnassigned.length > 0 ? - (
      {formattedUnassigned.map(file => )}
    ) - : - () - } -     -
    - ); - } - + 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 ( +
    +
    + + 0 + ? 'with-list-items' + : '' + } + onAddAllUnassigned={onAddAllUnassigned} + /> + +
    + + {formattedUnassigned.length > 0 ? ( +
      + {formattedUnassigned.map(file => ( + + ))} +
    + ) : ( + + )} +     +
    + ); + } } 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 (
    - - -
    ); - } + render() { + return ( +
    + + +
    + ); + } } function HeatFileTreeRow(props) { - let {node, path, toggleExpanded, selectedNode, selectNode} = props; - let isFolder = node.children && node.children.length > 0; - return ( -
    toggleExpanded(path)} className={classNames({ - 'tree-node-row': true, - 'tree-node-clicked': node.name === props.selectedNode - })} data-test-id='validation-tree-node'> -
    - { - isFolder && -
    toggleExpanded(path)} - className='tree-node-expander'> - -
    - } - { - - - - - } - { - - selectNode(node.name)} data-test-id='validation-tree-node-name'> - {node.name ? node.name : 'UNKNOWN'} - - } -
    - selectNode(node.name)} /> -
    ); + let { node, path, toggleExpanded, selectedNode, selectNode } = props; + let isFolder = node.children && node.children.length > 0; + return ( +
    toggleExpanded(path)} + className={classNames({ + 'tree-node-row': true, + 'tree-node-clicked': node.name === props.selectedNode + })} + data-test-id="validation-tree-node"> +
    + {isFolder && ( +
    toggleExpanded(path)} + className="tree-node-expander"> + +
    + )} + { + + + + } + { + selectNode(node.name)} + data-test-id="validation-tree-node-name"> + {node.name ? node.name : 'UNKNOWN'} + + } +
    + selectNode(node.name)} + /> +
    + ); } function HeatFileTreeHeader(props) { - let hasErrors = props.errorList.filter(error => error.level === errorLevels.ERROR).length > 0; - return ( -
    props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true, - 'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'> -
    - {/**/} - {i18n('{title} {hasErrors}', {title: props.headerTitle, hasErrors: hasErrors ? '(Draft)' : ''})} -
    - -
    ); + let hasErrors = + props.errorList.filter(error => error.level === errorLevels.ERROR) + .length > 0; + return ( +
    props.selectNode(nodeFilters.ALL)} + className={classNames({ + 'attachments-tree-header': true, + 'header-selected': props.selectedNode === nodeFilters.ALL + })} + data-test-id="validation-tree-header"> +
    + {/**/} + + {i18n('{title} {hasErrors}', { + title: props.headerTitle, + hasErrors: hasErrors ? '(Draft)' : '' + })} + +
    + +
    + ); } -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 ( -
    -
    -
    - {attachmentsTree && attachmentsTree.children && attachmentsTree.children.map((child, ind) => this.renderNode(child, [ind]))} -
    -
    -
    this.onChangeTreeWidth(e)} - className='vsp-attachments-heat-validation-separator' data-test-id='validation-tree-separator'>
    -
    ); - } - renderNode(node, path) { - let rand = Math.random() * (3000 - 1) + 1; - let isFolder = node.children && node.children.length > 0; - let {selectedNode} = this.props; - return ( -
    - { - node.header ? - this.selectNode(nodeName)} /> : - this.selectNode(node.name)} /> - } - { - isFolder && - -
    - { - node.children.map((child, ind) => this.renderNode(child, [...path, ind])) - } -
    -     - } -
    - ); - } - - - - - - 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 ( +
    +
    +
    + {attachmentsTree && + attachmentsTree.children && + attachmentsTree.children.map((child, ind) => + this.renderNode(child, [ind]) + )} +
    +
    +
    this.onChangeTreeWidth(e)} + className="vsp-attachments-heat-validation-separator" + data-test-id="validation-tree-separator" + /> +
    + ); + } + renderNode(node, path) { + let rand = Math.random() * (3000 - 1) + 1; + let isFolder = node.children && node.children.length > 0; + let { selectedNode } = this.props; + return ( +
    + {node.header ? ( + this.selectNode(nodeName)} + /> + ) : ( + this.selectNode(node.name)} + /> + )} + {isFolder && ( + +
    + {node.children.map((child, ind) => + this.renderNode(child, [...path, ind]) + )} +
    +     + )} +
    + ); + } - } + 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 ( -
    - { allItems.map(error => this.renderError(error)) } -
    - ); - } - renderError(error) { - let rand = Math.random() * (3000 - 1) + 1; - return ( -
    - {error.level === errorLevels.WARNING ? - : } - - { - (this.props.selectedNode === nodeFilters.ALL) ? - - - {error.name} - - - {error.errorMessage} - - : - error.errorMessage - } - -
    - ); - } + static propTypes = { + currentErrors: PropTypes.array, + currentWarnings: PropTypes.array, + selectedNode: PropTypes.string + }; + render() { + let { errors, warnings } = this.props; + let allItems = [...errors, ...warnings]; + return ( +
    + {allItems.map(error => this.renderError(error))} +
    + ); + } + renderError(error) { + let rand = Math.random() * (3000 - 1) + 1; + return ( +
    + {error.level === errorLevels.WARNING ? ( + + ) : ( + + )} + + {this.props.selectedNode === nodeFilters.ALL ? ( + + + {error.name} + + {error.errorMessage} + + ) : ( + error.errorMessage + )} + +
    + ); + } } 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 (
    - {(errors.errorCount > 0) &&
    - -
    {errors.errorCount}
    -
    } - {(errors.warningCount > 0) &&
    - -
    {errors.warningCount}
    -
    } -
    ); - } - 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 ( +
    + {errors.errorCount > 0 && ( +
    + +
    + {errors.errorCount} +
    +
    + )} + {errors.warningCount > 0 && ( +
    + +
    + {errors.warningCount} +
    +
    + )} +
    + ); + } + 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 ( +
    + {(componentsList.length > 0 || isManual) && + this.renderComponents()} +
    + ); + } - render() { - let {componentsList = [], isManual} = this.props; - return ( -
    - { - (componentsList.length > 0 || isManual) && this.renderComponents() - } -
    - ); - } + renderComponents() { + const { localFilter } = this.state; + const { + isManual, + onAddComponent, + isReadOnlyMode, + version, + currentSoftwareProduct: { id: softwareProductId }, + componentsList + } = this.props; + return ( + 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) + )} + + ); + } - renderComponents() { - const {localFilter} = this.state; - const {isManual, onAddComponent, isReadOnlyMode, version, currentSoftwareProduct: {id: softwareProductId}, componentsList } = this.props; - return ( - 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))} - - ); - } + renderComponentsListItem(component) { + let { + id: componentId, + name, + displayName, + description = '' + } = component; + let { + currentSoftwareProduct: { id }, + onComponentSelect, + version + } = this.props; + return ( + + onComponentSelect({ id, componentId, version }) + }> + +
    {displayName}
    +     + +
    {description}
    +     +     + ); + } - renderComponentsListItem(component) { - let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id}, onComponentSelect, version} = this.props; - return ( - onComponentSelect({id, componentId, version})}> - -
    {displayName}
    -     - -
    {description}
    -     -     - ); - } + 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 ( +
    + {qgenericFieldInfo && ( +
    { + this.form = form; + }} + formReady={null} + isValid={true} + hasButtons={false} + onSubmit={() => onSubmit({ qdata })} + className="component-questionnaire-validation-form" + isReadOnlyMode={isReadOnlyMode}> + + + + + )} +
    + ); + } - return ( -
    - { qgenericFieldInfo &&
    { this.form = form; }} - formReady={null} - isValid={true} - hasButtons={false} - onSubmit={() => onSubmit({qdata})} - className='component-questionnaire-validation-form' - isReadOnlyMode={isReadOnlyMode} > - - - - } -
    - ); - } + 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 ( +
    + onAddComputeClick(isReadOnlyMode) + : null + } + isReadOnlyMode={isReadOnlyMode} + onFilter={ + isManual + ? value => this.setState({ localFilter: value }) + : null + } + filterValue={localFilter} + twoColumns> + {this.filterList().map(computeItem => ( + + ))} + +
    + ); + } - render() { - const {localFilter} = this.state; - const {isReadOnlyMode, isManual, onAddComputeClick, onEditCompute, onDeleteCompute} = this.props; - return ( -
    - onAddComputeClick(isReadOnlyMode) : null} - isReadOnlyMode={isReadOnlyMode} - onFilter={isManual ? value => this.setState({localFilter: value}) : null} - filterValue={localFilter} - twoColumns> - {this.filterList().map(computeItem => - ) - } - -
    - ); - } + 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 ( - onEditCompute({computeId: id, isReadOnlyMode})} - onDelete={isManual ? () => onDeleteCompute({id, name}) : null}> - -
    -
    {name}
    -
    -
    -
    {description}
    -
    -     - ); +const ComputeItem = ({ + computeItem, + isReadOnlyMode, + isManual, + onEditCompute, + onDeleteCompute +}) => { + const { id, name, description } = computeItem; + return ( + onEditCompute({ computeId: id, isReadOnlyMode })} + onDelete={isManual ? () => onDeleteCompute({ id, name }) : null}> +
    +
    {name}
    +
    +
    +
    {description}
    +
    +     + ); }; -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( -
    - - -
    - -
    - {qgenericFieldInfo['compute/guestOS/bitSize'].enum.map(bitSize => ( - 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} /> )) } -
    -
    -     - - - onQDataChanged({'compute/guestOS/name' : tools})} - isValid={qgenericFieldInfo['compute/guestOS/name'].isValid} - errorText={qgenericFieldInfo['compute/guestOS/name'].errorText} - value={dataMap['compute/guestOS/name']} /> - - - onQDataChanged({'compute/guestOS/tools' : tools})} - isValid={qgenericFieldInfo['compute/guestOS/tools'].isValid} - errorText={qgenericFieldInfo['compute/guestOS/tools'].errorText} - value={dataMap['compute/guestOS/tools']} /> - -     - - -
    - ); +const GuestOs = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( +
    + + +
    + +
    + {qgenericFieldInfo[ + 'compute/guestOS/bitSize' + ].enum.map(bitSize => ( + + 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 + } + /> + ))} +
    +
    +     + + + + onQDataChanged({ 'compute/guestOS/name': tools }) + } + isValid={ + qgenericFieldInfo['compute/guestOS/name'].isValid + } + errorText={ + qgenericFieldInfo['compute/guestOS/name'].errorText + } + value={dataMap['compute/guestOS/name']} + /> + + + + onQDataChanged({ 'compute/guestOS/tools': tools }) + } + isValid={ + qgenericFieldInfo['compute/guestOS/tools'].isValid + } + errorText={ + qgenericFieldInfo['compute/guestOS/tools'].errorText + } + value={dataMap['compute/guestOS/tools']} + /> + +     +
    + ); }; 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( - - - { 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']} /> - - - { 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']} /> - - - ); +const NumberOfVms = ({ + qgenericFieldInfo, + dataMap, + onQDataChanged, + qValidateData, + customValidations +}) => { + return ( + + + { + 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']} + /> + + + { + 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']} + /> + + + ); }; 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 ( +
    + {genericFieldInfo && ( +
    { + 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') + }> + + + onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={ + genericFieldInfo['name'].errorText + } + isRequired + /> + + + + onDataChanged({ description }) + } + isValid={ + genericFieldInfo['description'].isValid + } + errorText={ + genericFieldInfo['description'] + .errorText + } + /> + + + {edittingComputeMode && ( + + )} + + )} +
    + ); + } - return ( -
    - {genericFieldInfo &&
    { - 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')}> - - - onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - isRequired/> - - - onDataChanged({description})} - isValid={genericFieldInfo['description'].isValid} - errorText={genericFieldInfo['description'].errorText}/> - - - {edittingComputeMode && } - - } -
    - ); - } - - 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( - - - onQDataChanged({'vmSizing/numOfCPUs' : tools})} - isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} - errorText={qgenericFieldInfo['vmSizing/numOfCPUs'].errorText} - value={dataMap['vmSizing/numOfCPUs']} /> - - - onQDataChanged({'vmSizing/fileSystemSizeGB' : tools})} - isValid={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid} - errorText={qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText} - value={dataMap['vmSizing/fileSystemSizeGB']} /> - - - onQDataChanged({'vmSizing/persistentStorageVolumeSize' : tools})} - isValid={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].isValid} - errorText={qgenericFieldInfo['vmSizing/persistentStorageVolumeSize'].errorText} - value={dataMap['vmSizing/persistentStorageVolumeSize']} /> - - - onQDataChanged({'vmSizing/ioOperationsPerSec' : tools})} - isValid={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid} - errorText={qgenericFieldInfo['vmSizing/ioOperationsPerSec'].errorText} - value={dataMap['vmSizing/ioOperationsPerSec']} /> - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/cpuOverSubscriptionRatio' : val});} - }> - - {qgenericFieldInfo['vmSizing/cpuOverSubscriptionRatio'].enum.map(cpuOSR => )} - - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'vmSizing/memoryRAM' : val});} - }> - - {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => )} - - - - ); +const VmSizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + + + + onQDataChanged({ 'vmSizing/numOfCPUs': tools }) + } + isValid={qgenericFieldInfo['vmSizing/numOfCPUs'].isValid} + errorText={ + qgenericFieldInfo['vmSizing/numOfCPUs'].errorText + } + value={dataMap['vmSizing/numOfCPUs']} + /> + + + + onQDataChanged({ 'vmSizing/fileSystemSizeGB': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/fileSystemSizeGB'].errorText + } + value={dataMap['vmSizing/fileSystemSizeGB']} + /> + + + + onQDataChanged({ + 'vmSizing/persistentStorageVolumeSize': tools + }) + } + isValid={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'vmSizing/persistentStorageVolumeSize' + ].errorText + } + value={dataMap['vmSizing/persistentStorageVolumeSize']} + /> + + + + onQDataChanged({ 'vmSizing/ioOperationsPerSec': tools }) + } + isValid={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'].isValid + } + errorText={ + qgenericFieldInfo['vmSizing/ioOperationsPerSec'] + .errorText + } + value={dataMap['vmSizing/ioOperationsPerSec']} + /> + + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ + 'vmSizing/cpuOverSubscriptionRatio': val + }); + }}> + + {qgenericFieldInfo[ + 'vmSizing/cpuOverSubscriptionRatio' + ].enum.map(cpuOSR => ( + + ))} + + + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ 'vmSizing/memoryRAM': val }); + }}> + + {qgenericFieldInfo['vmSizing/memoryRAM'].enum.map(mRAM => ( + + ))} + + + + ); }; 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( -
    - { - genericFieldInfo &&
    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'> - - - onDataChanged({displayName})} - label={i18n('Name')} - isRequired={true} - isValid={genericFieldInfo.displayName.isValid} - errorText={genericFieldInfo.displayName.errorText} - value={displayName} - type='text'/> - - - onDataChanged({description})} - value={description} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - data-test-id='description' - type='textarea'/> - - -
    - } -
    - ); - } + render() { + let { + data = {}, + onDataChanged, + onCancel, + genericFieldInfo + } = this.props; + let { displayName, description } = data; + return ( +
    + {genericFieldInfo && ( +
    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"> + + + + onDataChanged({ displayName }) + } + label={i18n('Name')} + isRequired={true} + isValid={ + genericFieldInfo.displayName.isValid + } + errorText={ + genericFieldInfo.displayName.errorText + } + value={displayName} + type="text" + /> + + + + onDataChanged({ description }) + } + value={description} + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + data-test-id="description" + type="textarea" + /> + + +
    + )} +
    + ); + } - 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}) => ( - - {/* disabled until backend will be ready to implement it +const GeneralSection = ({ + onDataChanged, + displayName, + vfcCode, + nfcFunction, + description, + isReadOnlyMode, + genericFieldInfo, + isManual +}) => ( + + {/* disabled until backend will be ready to implement it
    @@ -32,156 +41,248 @@ const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, descr
    */} - - - {!isManual && onDataChanged({vfcCode})} - disabled={isReadOnlyMode} - type='text'/> } - onDataChanged({nfcFunction})} - disabled={isReadOnlyMode} - type='text'/> - - - onDataChanged({description})} - disabled={isReadOnlyMode} - value={description} - groupClassName='multi-line-textarea' - data-test-id='description' - type='textarea'/> - - - + + + {!isManual && ( + onDataChanged({ vfcCode })} + disabled={isReadOnlyMode} + type="text" + /> + )} + onDataChanged({ nfcFunction })} + disabled={isReadOnlyMode} + type="text" + /> + + + onDataChanged({ description })} + disabled={isReadOnlyMode} + value={description} + groupClassName="multi-line-textarea" + data-test-id="description" + type="textarea" + /> + + + ); -const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'general/hypervisor/hypervisor' : val});} - }> - - {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => )} - - - - 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']}/> - - - onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})} - isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid} - errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText} - value={dataMap['general/hypervisor/containerFeaturesDescription']}/> - - +const HypervisorSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ 'general/hypervisor/hypervisor': val }); + }}> + + {qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map( + hv => ( + + ) + )} + + + + + 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']} + /> + + + + onQDataChanged({ + 'general/hypervisor/containerFeaturesDescription': containerFeaturesDescription + }) + } + isValid={ + qgenericFieldInfo[ + 'general/hypervisor/containerFeaturesDescription' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'general/hypervisor/containerFeaturesDescription' + ].errorText + } + value={ + dataMap['general/hypervisor/containerFeaturesDescription'] + } + /> + + ); -const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - 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']}/> - - - 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']}/> - - +const ImageSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + + + + 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']} + /> + + + + 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']} + /> + + ); -const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - onQDataChanged({'general/recovery/pointObjective' : pointObjective})} - isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid} - errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText} - value={dataMap['general/recovery/pointObjective']}/> - - - onQDataChanged({'general/recovery/timeObjective' : timeObjective})} - isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid} - errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText} - value={dataMap['general/recovery/timeObjective']}/> -
    - - - - onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})} - isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid} - errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText} - value={dataMap['general/recovery/vmProcessFailuresHandling']}/> -
    - - - { - /** disabled until backend will be ready to implement it +const RecoverySection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + + + + onQDataChanged({ + 'general/recovery/pointObjective': pointObjective + }) + } + isValid={ + qgenericFieldInfo['general/recovery/pointObjective'].isValid + } + errorText={ + qgenericFieldInfo['general/recovery/pointObjective'] + .errorText + } + value={dataMap['general/recovery/pointObjective']} + /> + + + + onQDataChanged({ + 'general/recovery/timeObjective': timeObjective + }) + } + isValid={ + qgenericFieldInfo['general/recovery/timeObjective'].isValid + } + errorText={ + qgenericFieldInfo['general/recovery/timeObjective'] + .errorText + } + value={dataMap['general/recovery/timeObjective']} + /> +
    + + + + + onQDataChanged({ + 'general/recovery/vmProcessFailuresHandling': vmProcessFailuresHandling + }) + } + isValid={ + qgenericFieldInfo[ + 'general/recovery/vmProcessFailuresHandling' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'general/recovery/vmProcessFailuresHandling' + ].errorText + } + value={dataMap['general/recovery/vmProcessFailuresHandling']} + /> +
    + + {/** disabled until backend will be ready to implement it
    ( pointer='/general/recovery/VMRecoveryDocument'/>
    - */ - } - + */} + ); -const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})} - isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid} - errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText} - value={dataMap['general/dnsConfiguration']}/> - - +const DNSConfigurationSection = ({ + dataMap, + onQDataChanged, + qgenericFieldInfo +}) => ( + + + + onQDataChanged({ + 'general/dnsConfiguration': dnsConfiguration + }) + } + isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid} + errorText={ + qgenericFieldInfo['general/dnsConfiguration'].errorText + } + value={dataMap['general/dnsConfiguration']} + /> + + ); -const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})} - isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid} - errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText} - value={dataMap['general/vmCloneUsage']}/> - - +const CloneSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + + + + onQDataChanged({ 'general/vmCloneUsage': vmCloneUsage }) + } + isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid} + errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText} + value={dataMap['general/vmCloneUsage']} + /> + + ); class SoftwareProductComponentsGeneralView extends React.Component { + render() { + let { + isManual, + onQDataChanged, + onDataChanged, + genericFieldInfo, + dataMap, + qGenericFieldInfo, + componentData: { displayName, vfcCode, nfcFunction, description }, + isReadOnlyMode + } = this.props; + return ( +
    +
    + {genericFieldInfo && + qGenericFieldInfo && ( +
    + this.props.onValidityChanged(isValidityData) + } + hasButtons={false}> + + + + + + + + )} +
    +
    + ); + } - render() { - let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} = this.props; - return( -
    -
    - {genericFieldInfo && qGenericFieldInfo &&
    this.props.onValidityChanged(isValidityData)} - hasButtons={false}> - - - - - - - } -
    -
    - ); - } - - 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 ( -
    - {genericFieldInfo &&
    { 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'> -
    - - {editingMode && } -
    -
    } -
    - ); - } - 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 ( +
    + {genericFieldInfo && ( +
    { + 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"> +
    + + {editingMode && ( + + )} +
    +
    + )} +
    + ); + } + 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( -
    -
    -
    - { qgenericFieldInfo &&
    this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - -

    {i18n('Image')}

    -
    -
    -
    - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'general/image/providedBy' : val});} - }> - - { qgenericFieldInfo['general/image/providedBy'].enum.map(proto => - ) } - -
    -
    -
    -
    - - } -
    -
    - {this.renderImagesList()} + render() { + let { + dataMap, + onQDataChanged, + isReadOnlyMode, + qgenericFieldInfo + } = this.props; + return ( +
    +
    +
    + {qgenericFieldInfo && ( +
    this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> +

    + {i18n('Image')} +

    +
    +
    +
    + { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[ + selectedIndex + ].value; + onQDataChanged({ + 'general/image/providedBy': val + }); + }}> + + {qgenericFieldInfo[ + 'general/image/providedBy' + ].enum.map(proto => ( + + ))} + +
    +
    +
    +
    + + )} +
    +
    + {this.renderImagesList()}
    - ); - }; - - renderImagesList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddImage, isManual} = this.props; - - return ( - this.setState({localFilter: value})} - onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} - plusButtonTitle={i18n('Add Image')} - twoColumns> - {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))} - - ); - }; + ); + } + 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 ( - onEditImageClick(image, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteImage(image) : null}> + return ( + this.setState({ localFilter: value })} + onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} + plusButtonTitle={i18n('Add Image')} + twoColumns> + {this.filterList().map(image => + this.renderImagesListItem(image, isReadOnlyMode) + )} + + ); + } - -
    {fileName}
    -     -     - ); - } + renderImagesListItem(image, isReadOnlyMode) { + let { id, fileName } = image; + let { onEditImageClick, isManual, onDeleteImage } = this.props; + return ( + onEditImageClick(image, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteImage(image) : null}> + +
    + {fileName} +
    +     +     + ); + } - 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( - - - 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'/> - - {!editingMode &&
    {i18n('After image creation you must go to Edit Image and add File Version')}
    } - {editingMode && } - {editingMode && } -     - ); +const FileDetails = ({ + editingMode, + fileName, + onDataChanged, + isManual, + dataMap, + onQDataChanged, + genericFieldInfo, + qgenericFieldInfo +}) => { + let fileNameCols = editingMode ? 3 : 4; + return ( + + + + 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" + /> + + {!editingMode && ( +
    + {i18n( + 'After image creation you must go to Edit Image and add File Version' + )} +
    + )} + {editingMode && ( + + )} + {editingMode && ( + + )} +     + ); }; 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( - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'format' : val});} - }> - - {qgenericFieldInfo['format'].enum.map(hv => )} - - - ); +const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ format: val }); + }}> + + {qgenericFieldInfo['format'].enum.map(hv => ( + + ))} + + + ); }; 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( - - - onQDataChanged({'md5' : md5})} - isValid={qgenericFieldInfo['md5'].isValid} - errorText={qgenericFieldInfo['md5'].errorText} - value={dataMap['md5']}/> - - - ); +const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + + onQDataChanged({ md5: md5 })} + isValid={qgenericFieldInfo['md5'].isValid} + errorText={qgenericFieldInfo['md5'].errorText} + value={dataMap['md5']} + /> + + + ); }; 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( - - onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})} - isValid={qgenericFieldInfo['version'].isValid} - errorText={qgenericFieldInfo['version'].errorText} - value={dataMap['version']}/> - - ); +const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + + onQDataChanged( + { version: version }, + { version: imageCustomValidations['version'] } + ) + } + isValid={qgenericFieldInfo['version'].isValid} + errorText={qgenericFieldInfo['version'].errorText} + value={dataMap['version']} + /> + + ); }; 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}) => ( - -
    toggle(item.key)}> - - {i18n(item.description)} - {item.added &&
    {i18n(item.added)}
    } -
    -
    -
    -
    - onQDataChanged({[`${prefix}${item.key}`] : val})} /> -
    -
    -
    -     +const TextAreaItem = ({ + item, + toggle, + expanded, + genericFieldInfo, + dataMap, + onQDataChanged +}) => ( + +
    toggle(item.key)}> + + {i18n(item.description)} + {item.added &&
    {i18n(item.added)}
    } +
    +
    +
    +
    + + onQDataChanged({ [`${prefix}${item.key}`]: val }) + } + /> +
    +
    +
    +     ); 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 ( -
    -
    - { genericFieldInfo &&
    this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({[`${prefix}isComponentMandatory`] : val});} - }> - - { genericFieldInfo[`${prefix}isComponentMandatory`].enum.map(isMan => ) } - - - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({[`${prefix}highAvailabilityMode`] : val});} - }> - - {genericFieldInfo[`${prefix}highAvailabilityMode`].enum.map(hmode => )} - - - - - - {pointers.map(pointer => {this.toggle(name);}} />)} - -
    } -
    -
    - ); - } + render() { + let { + dataMap, + genericFieldInfo, + onQDataChanged, + isReadOnlyMode + } = this.props; + return ( +
    +
    + {genericFieldInfo && ( +
    this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + + + { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onQDataChanged({ + [`${prefix}isComponentMandatory`]: val + }); + }}> + + {genericFieldInfo[ + `${prefix}isComponentMandatory` + ].enum.map(isMan => ( + + ))} + + + + + { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[selectedIndex] + .value; + onQDataChanged({ + [`${prefix}highAvailabilityMode`]: val + }); + }}> + + {genericFieldInfo[ + `${prefix}highAvailabilityMode` + ].enum.map(hmode => ( + + ))} + + + + + + {pointers.map(pointer => ( + { + this.toggle(name); + }} + /> + ))} + +
    + )} +
    +
    + ); + } - 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 ( -
    - {this.renderDropzoneWithType(fileTypes.VES_EVENT)} - {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)} - {this.renderDropzoneWithType(fileTypes.SNMP_POLL)} -
    - ); - } - - 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 ( - 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'> -
    -
    {typeDisplayName}
    - {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)} -
    -     - ); - } - - renderUploadButton(refAndName) { - let {isReadOnlyMode} = this.props; - return ( - this.refs[refAndName].open()}/> - ); - } - - renderUploadedFileName(filename, type, isReadOnlyMode) { - return ( -
    - - -
    - ); - } - - - 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 ( +
    + {this.renderDropzoneWithType(fileTypes.VES_EVENT)} + {this.renderDropzoneWithType(fileTypes.SNMP_TRAP)} + {this.renderDropzoneWithType(fileTypes.SNMP_POLL)} +
    + ); + } + + 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 ( + + 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"> +
    +
    {typeDisplayName}
    + {fileName + ? this.renderUploadedFileName( + fileName, + type, + isReadOnlyMode + ) + : this.renderUploadButton(refAndName)} +
    +     + ); + } + + renderUploadButton(refAndName) { + let { isReadOnlyMode } = this.props; + return ( + this.refs[refAndName].open()} + /> + ); + } + + renderUploadedFileName(filename, type, isReadOnlyMode) { + return ( +
    + + +
    + ); + } + + 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 ( +
    + {genericFieldInfo && ( +
    (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}> + + + onDataChanged({ name })} + isRequired={true} + type="text" + isValid={genericFieldInfo['name'].isValid} + errorText={ + genericFieldInfo['name'].errorText + } + className="field-section" + /> + + onDataChanged({ description }) + } + isValid={ + genericFieldInfo['description'].isValid + } + errorText={ + genericFieldInfo['description'] + .errorText + } + type="textarea" + className="field-section" + /> + + + + +
    + +
    + + +
    +
    +     + + + onDataChanged({ networkDescription }) + } + isValid={ + genericFieldInfo['networkDescription'] + .isValid + } + errorText={ + genericFieldInfo['networkDescription'] + .errorText + } + type="text" + className="field-section" + /> + +     +
    + )} +
    + ); + } - render() { - let {data = {}, onDataChanged, genericFieldInfo, isFormValid, onValidateForm, formReady} = this.props; - let {name, description, networkDescription} = data; - return ( -
    - {genericFieldInfo &&
    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} > - - - onDataChanged({name})} - isRequired={true} - type='text' - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - className='field-section'/> - onDataChanged({description})} - isValid={genericFieldInfo['description'].isValid} - errorText={genericFieldInfo['description'].errorText} - type='textarea' - className='field-section'/> - - - - -
    - -
    - - -
    -
    -     - - onDataChanged({networkDescription})} - isValid={genericFieldInfo['networkDescription'].isValid} - errorText={genericFieldInfo['networkDescription'].errorText} - type='text' - className='field-section'/> - -     -
    } -
    - ); - } - - - 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 ( +
    + {qgenericFieldInfo && ( +
    { + 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"> +
    + + + + + + + + + +
    +
    + )} +
    + ); + } - 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 ( -
    - {qgenericFieldInfo &&
    { 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'> -
    - - - - - - - - - -
    -
    } -
    - ); - } - - 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( -
    -
    -
    -{ qgenericFieldInfo &&
    this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> -

    {i18n('Network Capacity')}

    -
    -
    -
    - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' : val});} - }> - - { qgenericFieldInfo['network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'].enum.map(proto => - ) } - -
    -
    - onQDataChanged({'network/networkCapacity/networkTransactionsPerSecond' : ntps})} - isValid={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].isValid} - errorText={qgenericFieldInfo['network/networkCapacity/networkTransactionsPerSecond'].errorText} - value={dataMap['network/networkCapacity/networkTransactionsPerSecond']} /> -
    -
    -
    -
    - - } -
    - {this.renderNicList()} -
    - -
    - ); - } - - renderNicList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddNic, isManual} = this.props; - return ( - this.setState({localFilter: value})} - onAdd={isManual ? onAddNic : null} - plusButtonTitle={i18n('Add NIC')} - twoColumns> - {this.filterList().map(nic => this.renderNicListItem(nic, isReadOnlyMode))} - - ); - } + 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 ( - onEditNicClick(nic, version, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteNic(nic, version) : null}> + return ( +
    +
    +
    + {qgenericFieldInfo && ( +
    this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> +

    + {i18n('Network Capacity')} +

    +
    +
    +
    + { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[ + selectedIndex + ].value; + onQDataChanged({ + 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val + }); + }}> + + {qgenericFieldInfo[ + 'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs' + ].enum.map(proto => ( + + ))} + +
    +
    + + onQDataChanged({ + 'network/networkCapacity/networkTransactionsPerSecond': ntps + }) + } + isValid={ + qgenericFieldInfo[ + 'network/networkCapacity/networkTransactionsPerSecond' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'network/networkCapacity/networkTransactionsPerSecond' + ].errorText + } + value={ + dataMap[ + 'network/networkCapacity/networkTransactionsPerSecond' + ] + } + /> +
    +
    +
    +
    + + )} +
    + {this.renderNicList()} +
    +
    + ); + } - -
    {name}
    -     - -
    -
    {i18n('Purpose of NIC')}
    - {description &&
    {description}
    } -
    - {!isManual &&
    -
    {i18n('Network')}
    -
    {networkName}
    -
    } -     + renderNicList() { + const { localFilter } = this.state; + let { isReadOnlyMode, onAddNic, isManual } = this.props; + return ( + this.setState({ localFilter: value })} + onAdd={isManual ? onAddNic : null} + plusButtonTitle={i18n('Add NIC')} + twoColumns> + {this.filterList().map(nic => + this.renderNicListItem(nic, isReadOnlyMode) + )} + + ); + } - - ); - } + renderNicListItem(nic, isReadOnlyMode) { + let { id, name, description, networkName = '' } = nic; + let { onEditNicClick, version, isManual, onDeleteNic } = this.props; + return ( + onEditNicClick(nic, version, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteNic(nic, version) : null}> + +
    {name}
    +     + +
    +
    + {i18n('Purpose of NIC')} +
    + {description && ( +
    + {description} +
    + )} +
    + {!isManual && ( +
    +
    {i18n('Network')}
    +
    {networkName}
    +
    + )} +     +     + ); + } - 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( - - -
    {i18n('Acceptable Jitter')}
    -     - -
    {i18n('Allow Packet Loss')}
    -     - - onQDataChanged({'sizing/acceptableJitter/mean' : val})} /> - - - onQDataChanged({'sizing/acceptableJitter/max' : val})} /> - - - onQDataChanged({'sizing/acceptableJitter/variable' : val})} /> - - - onQDataChanged({'sizing/acceptablePacketLoss' : val})} /> - -     - ); +const Acceptable = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + + +
    + {i18n('Acceptable Jitter')} +
    +     + +
    + {i18n('Allow Packet Loss')} +
    +     + + + onQDataChanged({ 'sizing/acceptableJitter/mean': val }) + } + /> + + + + onQDataChanged({ 'sizing/acceptableJitter/max': val }) + } + /> + + + + onQDataChanged({ + 'sizing/acceptableJitter/variable': val + }) + } + /> + + + + onQDataChanged({ 'sizing/acceptablePacketLoss': val }) + } + /> + +     + ); }; 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( - - ); +const FlowLength = props => { + return ( + + ); }; 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( - - ); +const InFlowTraffic = props => { + return ( + + ); }; 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 ( - - - onQDataChanged({'ipConfiguration/ipv4Required' : value})} - data-test-id='ipConfiguration-ipv4Required' - value={dataMap['ipConfiguration/ipv4Required']} /> - - - onQDataChanged({'ipConfiguration/ipv6Required' : value})} - value={dataMap['ipConfiguration/ipv6Required']} /> - - - ); +const IpConfig = ({ dataMap, onQDataChanged }) => { + return ( + + + + onQDataChanged({ + 'ipConfiguration/ipv4Required': value + }) + } + data-test-id="ipConfiguration-ipv4Required" + value={dataMap['ipConfiguration/ipv4Required']} + /> + + + + onQDataChanged({ + 'ipConfiguration/ipv6Required': value + }) + } + value={dataMap['ipConfiguration/ipv6Required']} + /> + + + ); }; 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 ( - - - onDataChanged({name})} - isValid={genericFieldInfo['name'].isValid} - errorText={genericFieldInfo['name'].errorText} - type='text' /> - - - onDataChanged({description})} - disabled={isReadOnlyMode} - type='textarea' /> - - - ); +const NameAndPurpose = ({ + onDataChanged, + genericFieldInfo, + isReadOnlyMode, + name, + description, + isManual +}) => { + return ( + + + onDataChanged({ name })} + isValid={genericFieldInfo['name'].isValid} + errorText={genericFieldInfo['name'].errorText} + type="text" + /> + + + onDataChanged({ description })} + disabled={isReadOnlyMode} + type="textarea" + /> + + + ); }; 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 ( - - - - - - - - - { - isExternal ? - onDataChanged({networkDescription})} - disabled={isReadOnlyMode} - type='text' /> - : - - {networkValues.map(val => )} - - } - - - ); +const Network = ({ + networkValues, + networkType, + networkDescription, + onDataChanged, + isReadOnlyMode +}) => { + const isExternal = networkType === networkTypes.EXTERNAL; + return ( + + + + + + + + + {isExternal ? ( + + onDataChanged({ networkDescription }) + } + disabled={isReadOnlyMode} + type="text" + /> + ) : ( + + {networkValues.map(val => ( + + ))} + + )} + + + ); }; 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( - - ); +const OutFlowTraffic = props => { + return ( + + ); }; 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 ( - - onQDataChanged({[value]: val})} /> - - ); +const PointerInput = ({ + label, + value, + onQDataChanged, + qgenericFieldInfo, + dataMap, + lastColInRow +}) => { + return ( + + onQDataChanged({ [value]: val })} + /> + + ); }; PointerInput.PropTypes = { - label: PropTypes.string, - value: PropTypes.string + label: PropTypes.string, + value: PropTypes.string }; -const PacketsBytes = ({title, pointers = [], qgenericFieldInfo, dataMap, onQDataChanged}) => { - return( - - -
    {i18n('Packets')}
    -     - -
    {i18n('Bytes')}
    -     - {pointers.map((pointer, i) => {return ();})} -     - ); +const PacketsBytes = ({ + title, + pointers = [], + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + + +
    + {i18n('Packets')} +
    +     + +
    {i18n('Bytes')}
    +     + {pointers.map((pointer, i) => { + return ( + + ); + })} +     + ); }; 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 ( - - - {}} - onEnumChange={protocols => { - onQDataChanged({'protocols/protocols' : protocols});} - } - multiSelectedEnum={dataMap['protocols/protocols']} - clearable={false} - values={qgenericFieldInfo['protocols/protocols'].enum}/> - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'protocols/protocolWithHighestTrafficProfile' : val});} - }> - {(protocols.length === 0) && - - } - {protocols.map(protocol => )} - - - - ); +const Protocols = ({ + protocols, + qgenericFieldInfo, + dataMap, + onQDataChanged +}) => { + return ( + + + {}} + onEnumChange={protocols => { + onQDataChanged({ 'protocols/protocols': protocols }); + }} + multiSelectedEnum={dataMap['protocols/protocols']} + clearable={false} + values={qgenericFieldInfo['protocols/protocols'].enum} + /> + + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ + 'protocols/protocolWithHighestTrafficProfile': val + }); + }}> + {protocols.length === 0 && ( + + )} + {protocols.map(protocol => ( + + ))} + + + + ); }; 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( - - - onQDataChanged({'sizing/describeQualityOfService' : val}) }/> - - - ); +const Sizing = ({ qgenericFieldInfo, dataMap, onQDataChanged }) => { + return ( + + + + onQDataChanged({ + 'sizing/describeQualityOfService': val + }) + } + /> + + + ); }; 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 ( - - ); - } + render() { + return ( + + ); + } } 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 ( -
    -
    -
    - {this.renderEditor()} - -
    -
    -
    - ); - } - - renderEditor() { - let {softwareProductId, version, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props; - return ( - - - {isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')} - - - - - - - ); - } + render() { + return ( +
    +
    +
    + {this.renderEditor()} + +
    +
    +
    + ); + } + renderEditor() { + let { + softwareProductId, + version, + componentId, + isReadOnlyMode, + isDisplayModal, + isModalInEditMode + } = this.props; + return ( + + + + {isModalInEditMode + ? i18n('Edit Process Details') + : i18n('Create New Process Details')} + + + + + + + ); + } } 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}) => ( - - -
    - -
    - {qgenericFieldInfo['storage/backup/backupType'].enum.map(onSite => ( - onQDataChanged({'storage/backup/backupType' : site})} - isValid={qgenericFieldInfo['storage/backup/backupType'].isValid} - errorText={qgenericFieldInfo['storage/backup/backupType'].errorText} - checked={dataMap['storage/backup/backupType'] === onSite.enum} /> )) } -
    -
    -     - - 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']}/> - - - 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']}/> - - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'storage/backup/backupNIC' : val});} - }> - - {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => )} - - -     +const BackupSection = ({ + isReadOnlyMode, + dataMap, + onQDataChanged, + qgenericFieldInfo +}) => ( + + +
    + +
    + {qgenericFieldInfo['storage/backup/backupType'].enum.map( + onSite => ( + + onQDataChanged({ + 'storage/backup/backupType': site + }) + } + isValid={ + qgenericFieldInfo[ + 'storage/backup/backupType' + ].isValid + } + errorText={ + qgenericFieldInfo[ + 'storage/backup/backupType' + ].errorText + } + checked={ + dataMap['storage/backup/backupType'] === + onSite.enum + } + /> + ) + )} +
    +
    +     + + + 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']} + /> + + + + 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']} + /> + + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ 'storage/backup/backupNIC': val }); + }}> + + {qgenericFieldInfo['storage/backup/backupNIC'].enum.map(hv => ( + + ))} + + +     ); -const SnapshotBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - 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']}/> - - +const SnapshotBackupSection = ({ + dataMap, + onQDataChanged, + qgenericFieldInfo +}) => ( + + + + 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']} + /> + + ); -const LogBackupSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => ( - - - 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']}/> - - - onQDataChanged({'storage/logBackup/logRetentionPeriod' : logRetentionPeriod})} - type='number' - isValid={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].isValid} - errorText={qgenericFieldInfo['storage/logBackup/logRetentionPeriod'].errorText} - value={dataMap['storage/logBackup/logRetentionPeriod']}/> - - - onQDataChanged({'storage/logBackup/logBackupFrequency' : logBackupFrequency})} - type='number' - isValid={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].isValid} - errorText={qgenericFieldInfo['storage/logBackup/logBackupFrequency'].errorText} - value={dataMap['storage/logBackup/logBackupFrequency']}/> - - - onQDataChanged({'storage/logBackup/logFileLocation' : logFileLocation})} - type='text' - isValid={qgenericFieldInfo['storage/logBackup/logFileLocation'].isValid} - errorText={qgenericFieldInfo['storage/logBackup/logFileLocation'].errorText} - value={dataMap['storage/logBackup/logFileLocation']}/> - - +const LogBackupSection = ({ dataMap, onQDataChanged, qgenericFieldInfo }) => ( + + + + 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']} + /> + + + + onQDataChanged({ + 'storage/logBackup/logRetentionPeriod': logRetentionPeriod + }) + } + type="number" + isValid={ + qgenericFieldInfo['storage/logBackup/logRetentionPeriod'] + .isValid + } + errorText={ + qgenericFieldInfo['storage/logBackup/logRetentionPeriod'] + .errorText + } + value={dataMap['storage/logBackup/logRetentionPeriod']} + /> + + + + onQDataChanged({ + 'storage/logBackup/logBackupFrequency': logBackupFrequency + }) + } + type="number" + isValid={ + qgenericFieldInfo['storage/logBackup/logBackupFrequency'] + .isValid + } + errorText={ + qgenericFieldInfo['storage/logBackup/logBackupFrequency'] + .errorText + } + value={dataMap['storage/logBackup/logBackupFrequency']} + /> + + + + onQDataChanged({ + 'storage/logBackup/logFileLocation': logFileLocation + }) + } + type="text" + isValid={ + qgenericFieldInfo['storage/logBackup/logFileLocation'] + .isValid + } + errorText={ + qgenericFieldInfo['storage/logBackup/logFileLocation'] + .errorText + } + value={dataMap['storage/logBackup/logFileLocation']} + /> + + ); 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 ( +
    + {qGenericFieldInfo && ( +
    (this.form = form)} + isValid={true} + formReady={null} + onSubmit={() => onSubmit({ qdata })} + className="component-questionnaire-validation-form" + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> + + + + + )} +
    + ); + } - return( -
    - {qGenericFieldInfo &&
    this.form = form } - isValid={true} - formReady={null} - onSubmit={() => onSubmit({qdata})} - className='component-questionnaire-validation-form' - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - - - - } -
    - ); - } - - 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 ( -
    - { genericFieldInfo &&
    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() }> - - - 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' /> - 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 => - )} - - 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' > - - {softwareProductCategories.map(category => - category.subcategories && - {category.subcategories.map(sub => - )} - ) - } - - - - 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'/> - - - - } -
    - ); - } - - 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 ( +
    + {genericFieldInfo && ( +
    + (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()}> + + + + 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" + /> + 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 => ( + + ))} + + 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"> + + {softwareProductCategories.map( + category => + category.subcategories && ( + + {category.subcategories.map( + sub => ( + + ) + )} + + ) + )} + + + + + 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" + /> + + + + + )} +
    + ); + } + + 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( - - - onDataChanged({onboardingMethod: onboardingMethodConst.NETWORK_PACKAGE},SP_CREATION_FORM_NAME)} - type='radio' - data-test-id='new-vsp-creation-procedure-heat' /> - - - onDataChanged({onboardingMethod: onboardingMethodConst.MANUAL},SP_CREATION_FORM_NAME)} - type='radio' - data-test-id='new-vsp-creation-procedure-manual' /> - - - ); +const OnboardingProcedure = ({ + onboardingMethod, + onDataChanged, + genericFieldInfo +}) => { + return ( + + + + onDataChanged( + { + onboardingMethod: + onboardingMethodConst.NETWORK_PACKAGE + }, + SP_CREATION_FORM_NAME + ) + } + type="radio" + data-test-id="new-vsp-creation-procedure-heat" + /> + + + + onDataChanged( + { onboardingMethod: onboardingMethodConst.MANUAL }, + SP_CREATION_FORM_NAME + ) + } + type="radio" + data-test-id="new-vsp-creation-procedure-manual" + /> + + + ); }; 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 ( - - { - dependency.sourceId = newVal; - onDataChanged(dependency); - }} /> - - { - dependency.targetId = newVal; - onDataChanged(dependency); - }} /> - - ); +const TableActionRow = ({ + onAction, + actionIcon, + showAction, + dependency, + sourceOptions, + targetOptions, + onDataChanged +}) => { + return ( + + { + dependency.sourceId = newVal; + onDataChanged(dependency); + }} + /> + + { + dependency.targetId = newVal; + onDataChanged(dependency); + }} + /> + + ); }; - 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 ( -
    -
    {i18n('Dependencies')}
    - - {!isReadOnlyMode && 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 => ( - 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}/> - ))} - -
    - ); - } + 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 ( +
    +
    {i18n('Dependencies')}
    + + {!isReadOnlyMode && ( + 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 => ( + 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} + /> + ))} + +
    + ); + } } 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 ( -
    - {this.renderList()} -
    - ); - } + render() { + return
    {this.renderList()}
    ; + } - renderList() { - let {onAddDeployment, isReadOnlyMode, componentsList} = this.props; - return ( - onAddDeployment(componentsList)} - isReadOnlyMode={isReadOnlyMode} - title={i18n('Deployment Flavors')} - onFilter={value => this.setState({localFilter: value})} - twoColumns> - {this.filterList().map(deploymentFlavor => this.renderListItem(deploymentFlavor, isReadOnlyMode))} - - ); - } + renderList() { + let { onAddDeployment, isReadOnlyMode, componentsList } = this.props; + return ( + onAddDeployment(componentsList)} + isReadOnlyMode={isReadOnlyMode} + title={i18n('Deployment Flavors')} + onFilter={value => this.setState({ localFilter: value })} + twoColumns> + {this.filterList().map(deploymentFlavor => + this.renderListItem(deploymentFlavor, isReadOnlyMode) + )} + + ); + } - renderListItem(deploymentFlavor, isReadOnlyMode) { - let {id, model, description} = deploymentFlavor; - let {onEditDeployment, onDeleteDeployment, componentsList} = this.props; - return ( - onEditDeployment(deploymentFlavor, componentsList)} - onDelete={() => onDeleteDeployment(deploymentFlavor)}> - -
    {model}
    -     - -
    {description}
    -     -     - ); - } + renderListItem(deploymentFlavor, isReadOnlyMode) { + let { id, model, description } = deploymentFlavor; + let { + onEditDeployment, + onDeleteDeployment, + componentsList + } = this.props; + return ( + + onEditDeployment(deploymentFlavor, componentsList) + } + onDelete={() => onDeleteDeployment(deploymentFlavor)}> + +
    {model}
    +     + +
    {description}
    +     +     + ); + } - 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 ( -
    - {genericFieldInfo &&
    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'> - - - 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'/> - - - onDataChanged({description})} - label={i18n('Description')} - value={description} - data-test-id='deployment-description' - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - type='text'/> - - - - - onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})} - type='select' - clearable={true} - disabled={isReadOnlyMode || !featureGroupsExist} - className='field-section' - options={selectedFeatureGroupsList}/> - - - {!featureGroupsExist && - - {i18n('Please assign Feature Groups in VSP General')} - - } - - - - {componentComputeAssociations.map( (association, index) => - - ({value: component.id, label: component.displayName}) ) - } - selected={association.componentId} - onChange={componentId => { - let newAssociations = [...componentComputeAssociations]; - newAssociations[index] = {...newAssociations[index], componentId}; - onDataChanged({componentComputeAssociations: newAssociations}); - }} - disabled={true}/> - 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}/> - - )} - - - -
    } -
    - ); - } + 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 ( +
    + {genericFieldInfo && ( +
    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"> + + + + 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" + /> + + + + onDataChanged({ description }) + } + label={i18n('Description')} + value={description} + data-test-id="deployment-description" + isValid={ + genericFieldInfo.description.isValid + } + errorText={ + genericFieldInfo.description.errorText + } + type="text" + /> + + + + + + onDataChanged({ + featureGroupId: featureGroup + ? featureGroup.value + : null + }) + } + type="select" + clearable={true} + disabled={ + isReadOnlyMode || !featureGroupsExist + } + className="field-section" + options={selectedFeatureGroupsList} + /> + + + {!featureGroupsExist && ( + + + + {i18n( + 'Please assign Feature Groups in VSP General' + )} + + + + )} + + + + {componentComputeAssociations.map( + (association, index) => ( + + ({ + value: component.id, + label: + component.displayName + }) + )} + selected={ + association.componentId + } + onChange={componentId => { + let newAssociations = [ + ...componentComputeAssociations + ]; + newAssociations[ + index + ] = { + ...newAssociations[ + index + ], + componentId + }; + onDataChanged({ + componentComputeAssociations: newAssociations + }); + }} + disabled={true} + /> + + 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} + /> + + ) + )} + + + +
    + )} +
    + ); + } - 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 ( -
    -
    this.submit()} - onReset={() => onClose()} - isValid = {!!selectedValue} - submitButtonText={i18n('Save')} - hasButtons={true}> -
    {`${i18n('The VLM')} '${vendorName}' ${i18n('assigned to this VSP is archived')}.`}
    -
    {i18n('If you select a different VLM you will not be able to reselect the archived VLM.')}
    - {this.setState({ - selectedValue: e.target.options[e.target.selectedIndex].value - });}} - value={selectedValue}> - - {sortByStringProperty( - finalizedLicenseModelList, - 'name' - ).map(lm => ) - } - -
    -
    - ); - } + 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 ( +
    +
    this.submit()} + onReset={() => onClose()} + isValid={!!selectedValue} + submitButtonText={i18n('Save')} + hasButtons={true}> +
    {`${i18n( + 'The VLM' + )} '${vendorName}' ${i18n( + 'assigned to this VSP is archived' + )}.`}
    +
    + {i18n( + 'If you select a different VLM you will not be able to reselect the archived VLM.' + )} +
    + { + this.setState({ + selectedValue: + e.target.options[e.target.selectedIndex] + .value + }); + }} + value={selectedValue}> + + {sortByStringProperty( + finalizedLicenseModelList, + 'name' + ).map(lm => ( + + ))} + +
    +
    + ); + } } 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 ( -
    - onVendorRemove()} - label={i18n('Vendor')} - type='select' - value={`${vendorName} (Archived)`}> - - -
    - ); +const DeprecatedVlmInfo = ({ vendorName, onVendorRemove }) => { + return ( +
    + onVendorRemove()} + label={i18n('Vendor')} + type="select" + value={`${vendorName} (Archived)`}> + + +
    + ); }; 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 ( -
    - {genericFieldInfo && - - name.length <= 25 && this.props.onDataChanged({name}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/> - {this.props.isVendorArchived ? - this.onVendorRemove()} vendorName={this.props.vendorName} /> : - this.onVendorParamChanged(e)}> - {sortByStringProperty( - this.props.finalizedLicenseModelList, - 'name' - ).map(lm => ) - } - - } - this.onSelectSubCategory(e)}> - { - this.props.softwareProductCategories.map(category => - category.subcategories && - {category.subcategories.map(sub => - )} - - ) - } - - - - this.props.onDataChanged({description}, forms.VENDOR_SOFTWARE_PRODUCT_DETAILS)}/> - - } -
    ); - } + render() { + let { genericFieldInfo } = this.props; + return ( +
    + {genericFieldInfo && ( + + + + name.length <= 25 && + this.props.onDataChanged( + { name }, + forms.VENDOR_SOFTWARE_PRODUCT_DETAILS + ) + } + /> + {this.props.isVendorArchived ? ( + this.onVendorRemove()} + vendorName={this.props.vendorName} + /> + ) : ( + + this.onVendorParamChanged(e) + }> + {sortByStringProperty( + this.props.finalizedLicenseModelList, + 'name' + ).map(lm => ( + + ))} + + )} + this.onSelectSubCategory(e)}> + {this.props.softwareProductCategories.map( + category => + category.subcategories && ( + + {category.subcategories.map( + sub => ( + + ) + )} + + ) + )} + + + + + this.props.onDataChanged( + { description }, + forms.VENDOR_SOFTWARE_PRODUCT_DETAILS + ) + } + /> + + + )} +
    + ); + } } 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 ( - - - this.onVendorParamChanged(e)} - value={this.props.licensingVersion || ''} - label={i18n('Licensing Version')} - disabled={this.props.isVendorArchived} - type='select'> - {this.props.licensingVersionsList.map(version => - - )} - - - - this.onLicensingDataChanged(e)}> - - {this.props.licenseAgreementList.map(la => )} - - - - {this.props.licensingData.licenseAgreement && ( - {}} - 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}/>) - } - - - ); - } + render() { + return ( + + + this.onVendorParamChanged(e)} + value={this.props.licensingVersion || ''} + label={i18n('Licensing Version')} + disabled={this.props.isVendorArchived} + type="select"> + {this.props.licensingVersionsList.map(version => ( + + ))} + + + + this.onLicensingDataChanged(e)}> + + {this.props.licenseAgreementList.map(la => ( + + ))} + + + + {this.props.licensingData.licenseAgreement && ( + {}} + 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} + /> + )} + + + ); + } } -const AvailabilitySection = (props) => ( - - - props.onQDataChanged({'general/availability/useAvailabilityZonesForHighAvailability' : aZone})} /> - - +const AvailabilitySection = props => ( + + + + props.onQDataChanged({ + 'general/availability/useAvailabilityZonesForHighAvailability': aZone + }) + } + /> + + ); -const RegionsSection = (props) => ( - - - {}} - 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} /> - - +const RegionsSection = props => ( + + + {}} + 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 + } + /> + + ); -const StorageDataReplicationSection = (props) => ( - - - props.onQDataChanged({'general/storageDataReplication/storageReplicationSize' : sRep})} /> - - - props.onQDataChanged({'general/storageDataReplication/storageReplicationSource' : sRepSource})} /> - - - props.onQDataChanged({'general/storageDataReplication/storageReplicationFrequency' : sRepFreq})} /> - - - props.onQDataChanged({'general/storageDataReplication/storageReplicationDestination' : sRepDest})} /> - - +const StorageDataReplicationSection = props => ( + + + + props.onQDataChanged({ + 'general/storageDataReplication/storageReplicationSize': sRep + }) + } + /> + + + + props.onQDataChanged({ + 'general/storageDataReplication/storageReplicationSource': sRepSource + }) + } + /> + + + + props.onQDataChanged({ + 'general/storageDataReplication/storageReplicationFrequency': sRepFreq + }) + } + /> + + + + props.onQDataChanged({ + 'general/storageDataReplication/storageReplicationDestination': sRepDest + }) + } + /> + + ); 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 ( +
    +
    + (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}> + + + + + + +
    + ); + } - return ( -
    -
    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}> - - - - - - -
    - ); - } + 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 ( +
    + + 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"> +
    +
    +
    + + {this.renderProductDetails( + isManual, + isReadOnlyMode + )} +
    +
    +
    +     + +
    + ); + } + + handleOnDragEnter(isReadOnlyMode, isManual) { + if (!isReadOnlyMode && !isManual) { + this.setState({ dragging: true }); + } + } + + renderProductDetails(isManual, isReadOnlyMode) { + return ( +
    + {!isManual && ( +
    +
    + {i18n('Software Product Attachments')} +
    + this.refs.fileInput.open()} + /> +
    + )} +
    + ); + } + + 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 ( -
    - 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'> -
    -
    -
    - - {this.renderProductDetails(isManual, isReadOnlyMode)} -
    -
    -
    -     - -
    - ); - } - - handleOnDragEnter(isReadOnlyMode, isManual) { - if (!isReadOnlyMode && !isManual) { - this.setState({dragging: true}); - } - } - - renderProductDetails(isManual, isReadOnlyMode) { - return ( -
    - { !isManual &&
    -
    {i18n('Software Product Attachments')}
    - this.refs.fileInput.open()}/> -
    - } -
    - ); - } - - 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 ( -
    -
    {i18n('Software Product Details')}
    -
    onDetailsSelect(currentSoftwareProduct)}> -
    -
    -
    - {name} -
    -
    -
    -
    -
    -
    {i18n('Vendor')}
    -
    {vendorName}
    -
    -
    -
    {i18n('Category')}
    -
    {fullCategoryDisplayName}
    -
    -
    -
    {i18n('License Agreement')}
    -
    - -
    -
    -
    -
    -
    {i18n('Description')}
    -
    {description}
    -
    -
    -
    -
    -
    - ); +const ProductSummary = ({ currentSoftwareProduct, onDetailsSelect }) => { + let { + name = '', + description = '', + vendorName = '', + fullCategoryDisplayName = '', + licenseAgreementName = '' + } = currentSoftwareProduct; + return ( +
    +
    + {i18n('Software Product Details')} +
    +
    onDetailsSelect(currentSoftwareProduct)}> +
    +
    +
    + {name} +
    +
    +
    +
    +
    +
    {i18n('Vendor')}
    +
    {vendorName}
    +
    +
    +
    {i18n('Category')}
    +
    + {fullCategoryDisplayName} +
    +
    +
    +
    + {i18n('License Agreement')} +
    +
    + +
    +
    +
    +
    +
    {i18n('Description')}
    +
    {description}
    +
    +
    +
    +
    +
    + ); }; - -const LicenseAgreement = ({licenseAgreementName}) => { - if (!licenseAgreementName) { - return (
    {i18n('Missing')}
    ); - } - return
    {licenseAgreementName}
    ; +const LicenseAgreement = ({ licenseAgreementName }) => { + if (!licenseAgreementName) { + return ( +
    + +
    {i18n('Missing')}
    +
    + ); + } + return
    {licenseAgreementName}
    ; }; 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 ( +
    + this.setState({ localFilter: value })} + twoColumns> + {this.filterList().map(network => + this.renderNetworksListItem({ network, isReadOnlyMode }) + )} + +
    + ); + } - return ( -
    - this.setState({localFilter: value})} - twoColumns> - {this.filterList().map(network => this.renderNetworksListItem({network, isReadOnlyMode}))} - -
    - ); - } + renderNetworksListItem({ network, isReadOnlyMode }) { + let { id, name, dhcp } = network; + return ( + + +
    {name}
    +     + +
    +
    {i18n('DHCP')}
    +
    + {dhcp ? i18n('YES') : i18n('NO')} +
    +
    +     +     + ); + } - renderNetworksListItem({network, isReadOnlyMode}) { - let {id, name, dhcp} = network; - return ( - + filterList() { + let { networksList } = this.props; - -
    {name}
    -     - -
    -
    {i18n('DHCP')}
    -
    {dhcp ? i18n('YES') : i18n('NO')}
    -
    -     -     - ); - } - - 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 ( - this.setState({localFilter: value})}> - {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))} - ); - } + 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 ( - onEditProcess(process)} - onDelete={() => onDeleteProcess(process, version)}> + return ( + this.setState({ localFilter: value })}> + {this.filterList().map(processes => + this.renderProcessListItem(processes, isReadOnlyMode) + )} + + ); + } -
    -
    {i18n('Name')}
    -
    {name}
    -
    -
    -
    {i18n('Artifact name')}
    -
    {artifactName}
    -
    -
    -
    {i18n('Notes')}
    -
    {description}
    -
    -     - ); - } + renderProcessListItem(process, isReadOnlyMode) { + let { id, name, description, artifactName = '' } = process; + let { + currentSoftwareProduct: { version }, + onEditProcess, + onDeleteProcess + } = this.props; + return ( + onEditProcess(process)} + onDelete={() => onDeleteProcess(process, version)}> +
    +
    {i18n('Name')}
    +
    {name}
    +
    +
    +
    {i18n('Artifact name')}
    +
    {artifactName}
    +
    +
    +
    {i18n('Notes')}
    +
    {description}
    +
    +     + ); + } - 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 ( -
    - {genericFieldInfo &&
    this.submit() } - onReset={ () => onCancel() } - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.props.onValidateForm() } - className='vsp-processes-editor'> -
    - this.handleImportSubmit(acceptedFiles, rejectedFiles)} - onDragEnter={() => this.setState({dragging: true})} - onDragLeave={() => this.setState({dragging: false})} - multiple={false} - disableClick={true} - ref='processEditorFileInput' - name='processEditorFileInput'> - - - onDataChanged({name})} - isValid={genericFieldInfo.name.isValid} - isRequired={true} - data-test-id='name' - errorText={genericFieldInfo.name.errorText} - label={i18n('Name')} - value={name} - type='text'/> - - - - this.refs.processEditorFileInput.open()}/> - - - - - onDataChanged({description})} - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - label={i18n('Notes')} - value={description} - data-test-id='vsp-process-description' - type='textarea'/> - - - - { - // 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 => - )} - - - - -
    -
    } -
    - ); - } - - 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 ( +
    + {genericFieldInfo && ( +
    this.submit()} + onReset={() => onCancel()} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.props.onValidateForm()} + className="vsp-processes-editor"> +
    + + this.handleImportSubmit( + acceptedFiles, + rejectedFiles + ) + } + onDragEnter={() => + this.setState({ dragging: true }) + } + onDragLeave={() => + this.setState({ dragging: false }) + } + multiple={false} + disableClick={true} + ref="processEditorFileInput" + name="processEditorFileInput"> + + + + onDataChanged({ name }) + } + isValid={ + genericFieldInfo.name.isValid + } + isRequired={true} + data-test-id="name" + errorText={ + genericFieldInfo.name.errorText + } + label={i18n('Name')} + value={name} + type="text" + /> + + + + + this.refs.processEditorFileInput.open() + } + /> + + + + + + onDataChanged({ description }) + } + isValid={ + genericFieldInfo.description + .isValid + } + errorText={ + genericFieldInfo.description + .errorText + } + label={i18n('Notes')} + value={description} + data-test-id="vsp-process-description" + type="textarea" + /> + + + + { + // 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 => ( + + ) + )} + + + + +
    +
    + )} +
    + ); + } - 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 ( - - ); - } + render() { + return ( + + ); + } } 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 ( -
    - {this.renderEditor()} - -
    - ); - } + 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 ( +
    + {this.renderEditor()} + +
    + ); + } - - - {isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')} - - - - - - ); - } + renderEditor() { + let { + currentSoftwareProduct: { id }, + version, + isModalInEditMode, + isReadOnlyMode, + isDisplayEditor + } = this.props; + return ( + + + + {isModalInEditMode + ? i18n('Edit Process Details') + : i18n('Create New Process Details')} + + + + + + + ); + } } export default SoftwareProductProcessesView; -- cgit 1.2.3-korg