diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx | 1250 |
1 files changed, 801 insertions, 449 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx index e04f9b7309..f462dd790b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx @@ -16,7 +16,7 @@ import React from 'react'; -import {render} from 'react-dom'; +import { render } from 'react-dom'; import ReactDOM from 'react-dom'; import isEqual from 'lodash/isEqual.js'; @@ -29,460 +29,812 @@ import store from 'sdc-app/AppStore.js'; import Configuration from 'sdc-app/config/Configuration.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; +import { + onboardingMethod as onboardingMethodTypes, + onboardingOriginTypes +} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; -import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import { itemTypes } from './versionsPage/VersionsPageConstants.js'; -import {itemTypes} from './versionsPage/VersionsPageConstants.js'; - -import {AppContainer} from 'react-hot-loader'; +import { AppContainer } from 'react-hot-loader'; import HeatSetupActionHelper from './softwareProduct/attachments/setup/HeatSetupActionHelper.js'; -import {actionTypes, enums, screenTypes} from './OnboardingConstants.js'; +import { actionTypes, enums, screenTypes } from './OnboardingConstants.js'; import OnboardingActionHelper from './OnboardingActionHelper.js'; import Onboarding from './Onboarding.js'; export default class OnboardingPunchOut { - - render({options: {data, apiRoot, apiHeaders}, onEvent}, element) { - if (!this.unsubscribeFromStore) { - this.unsubscribeFromStore = store.subscribe(() => this.handleStoreChange()); - } - - if (!this.isConfigSet) { - Configuration.setCatalogApiRoot(apiRoot); - Configuration.setCatalogApiHeaders(apiHeaders); - this.isConfigSet = true; - } - - this.onEvent = (...args) => onEvent(...args); - this.handleData(data); - - if (!this.rendered) { - render( - <AppContainer> - <Application> - <Onboarding/> - </Application> - </AppContainer>, - element - ); - if (module.hot) { - module.hot.accept('sdc-app/onboarding/Onboarding.js', () => { - const NextOnboarding = require('sdc-app/onboarding/Onboarding.js').default; - render( - <AppContainer> - <Application> - <NextOnboarding/> - </Application> - </AppContainer>, - element - ); - }); - } - this.rendered = true; - } - } - - unmount(element) { - ReactDOM.unmountComponentAtNode(element); - this.rendered = false; - this.unsubscribeFromStore(); - this.unsubscribeFromStore = null; - } - - handleData(data) { - let {breadcrumbs: {selectedKeys = []} = {}} = data; - let dispatch = action => store.dispatch(action); - let {currentScreen, users: {usersList}, softwareProductList, finalizedSoftwareProductList, licenseModelList, finalizedLicenseModelList, - softwareProduct: {softwareProductEditor: {data: vspData = {}}, - softwareProductComponents = {}, softwareProductQuestionnaire = {}}, archivedLicenseModelList} = store.getState(); - const wholeSoftwareProductList = [...softwareProductList, ...finalizedSoftwareProductList]; - const wholeLicenseModelList = [...licenseModelList, ...finalizedLicenseModelList, ...archivedLicenseModelList]; - - let {props: {version, isReadOnlyMode}, screen} = currentScreen; - let {componentEditor: {data: componentData = {}, qdata: componentQData = {}}} = softwareProductComponents; - if (this.programmaticBreadcrumbsUpdate) { - this.prevSelectedKeys = selectedKeys; - this.programmaticBreadcrumbsUpdate = false; - return; - } - if (!isEqual(selectedKeys, this.prevSelectedKeys)) { - this.breadcrumbsPrefixSelected = isEqual(selectedKeys, this.prevSelectedKeys && this.prevSelectedKeys.slice(0, selectedKeys.length)); - - const [, screenType, prevVspId, , prevComponentId] = this.prevSelectedKeys || []; - let preNavigate = Promise.resolve(); - if(screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT && screen !== 'VERSIONS_PAGE' && !isReadOnlyMode) { - let dataToSave = prevVspId ? prevComponentId ? {componentData, qdata: componentQData} : {softwareProduct: vspData, qdata: softwareProductQuestionnaire.qdata} : {}; - preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate(dispatch, { - softwareProductId: prevVspId, - version, - vspComponentId: prevComponentId, - dataToSave - }); - } - - let {currentScreen: {props: {softwareProductId}}, softwareProduct: {softwareProductAttachments: {heatSetup, heatSetupCache}}} = store.getState(); - let heatSetupPopupPromise = currentScreen.screen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS ? - HeatSetupActionHelper.heatSetupLeaveConfirmation(dispatch, {softwareProductId, heatSetup, heatSetupCache}) : - Promise.resolve(); - Promise.all([preNavigate, heatSetupPopupPromise]).then(() => { - this.prevSelectedKeys = selectedKeys; - if (selectedKeys.length === 0) { - ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.ONBOARDING_CATALOG}); - - } else if (selectedKeys.length === 1 || selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL) { - let [licenseModelId, , licenseModelScreen] = selectedKeys; - let licenseModel = wholeLicenseModelList.find(vlm => vlm.id === licenseModelId); - ScreensHelper.loadScreen(dispatch, {screen: licenseModelScreen, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId, version, licenseModel, usersList}}); - - } else if (selectedKeys.length <= 4 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT) { - let [licenseModelId, , softwareProductId, softwareProductScreen] = selectedKeys; - let softwareProduct = softwareProductId ? - wholeSoftwareProductList.find(({id}) => id === softwareProductId) : - wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId); - if (!softwareProductId) { - softwareProductId = softwareProduct.id; - } - if (softwareProductScreen === enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS) { - softwareProduct = vspData; - //check current vsp fields to determine which file has uploaded - if(vspData.onboardingOrigin === onboardingOriginTypes.ZIP || vspData.candidateOnboardingOrigin === onboardingOriginTypes.ZIP) { - softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP; - } - else if(vspData.onboardingOrigin === onboardingOriginTypes.CSAR) { - softwareProductScreen = enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION; - } - } - - ScreensHelper.loadScreen(dispatch, {screen: softwareProductScreen, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, softwareProduct, version, usersList}}); - - } else if (selectedKeys.length === 5 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) { - let [licenseModelId, , softwareProductId, , componentId] = selectedKeys; - let softwareProduct = softwareProductId ? - wholeSoftwareProductList.find(({id}) => id === softwareProductId) : - wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId); - if (!softwareProductId) { - softwareProductId = softwareProduct.id; - } - ScreensHelper.loadScreen(dispatch, {screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, softwareProduct, componentId, version, usersList}}); - - } else if (selectedKeys.length === 6 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) { - let [licenseModelId, , softwareProductId, , componentId, componentScreen] = selectedKeys; - let softwareProduct = softwareProductId ? - wholeSoftwareProductList.find(({id}) => id === softwareProductId) : - wholeSoftwareProductList.find(({vendorId}) => vendorId === licenseModelId); - if (!softwareProductId) { - softwareProductId = softwareProduct.id; - } - ScreensHelper.loadScreen(dispatch, {screen: componentScreen, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, softwareProduct, componentId, version, usersList}}); - - } else { - console.error('Unknown breadcrumbs path: ', selectedKeys); - } - }).catch(() => { - store.dispatch({ - type: actionTypes.SET_CURRENT_SCREEN, - currentScreen: { - ...currentScreen, - forceBreadCrumbsUpdate: true - } - }); - }); - } - } - - handleStoreChange() { - let {currentScreen, licenseModelList, finalizedLicenseModelList, softwareProductList, finalizedSoftwareProductList, versionsPage: - {versionsList: {itemType, itemId}}, - softwareProduct: {softwareProductEditor: {data: currentSoftwareProduct = {onboardingMethod: ''}}, - softwareProductComponents: {componentsList}}, archivedLicenseModelList, archivedSoftwareProductList} = store.getState(); - const wholeSoftwareProductList = lodashUnionBy(softwareProductList, [...finalizedSoftwareProductList, ...archivedSoftwareProductList], 'id'); - const wholeLicenseModelList = lodashUnionBy(licenseModelList, [...finalizedLicenseModelList, ...archivedLicenseModelList], 'id'); - let breadcrumbsData = {itemType, itemId, currentScreen, wholeLicenseModelList, wholeSoftwareProductList, currentSoftwareProduct, componentsList}; - - if (currentScreen.forceBreadCrumbsUpdate || !isEqual(breadcrumbsData, this.prevBreadcrumbsData) || this.breadcrumbsPrefixSelected) { - this.prevBreadcrumbsData = breadcrumbsData; - this.breadcrumbsPrefixSelected = false; - this.programmaticBreadcrumbsUpdate = true; - let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData); - this.onEvent('breadcrumbsupdated', breadcrumbs); - store.dispatch({ - type: actionTypes.SET_CURRENT_SCREEN, - currentScreen: { - ...currentScreen, - forceBreadCrumbsUpdate: false - } - }); - } - } - - buildBreadcrumbs({currentScreen: {screen, props}, itemType, itemId, currentSoftwareProduct, - wholeLicenseModelList, wholeSoftwareProductList, componentsList}) { - let {onboardingMethod, onboardingOrigin, candidateOnboardingOrigin} = currentSoftwareProduct; - let screenToBreadcrumb; - switch (screen) { - case enums.SCREEN.ONBOARDING_CATALOG: - return []; - - case enums.SCREEN.VERSIONS_PAGE: - let firstMenuItems = itemType === itemTypes.LICENSE_MODEL ? [ - { - selectedKey: itemId, - menuItems: wholeLicenseModelList.map(({id, name}) => ({ - key: id, - displayText: name - })) - }] : [ - { - selectedKey: props.additionalProps.licenseModelId || currentSoftwareProduct.vendorId, - menuItems: wholeLicenseModelList.map(({id, name}) => ({ - key: id, - displayText: name - })) - }, - { - selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT, - menuItems: [{ - key: enums.BREADCRUMS.LICENSE_MODEL, - displayText: i18n('License Model') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT, - displayText: i18n('Software Products') - }] - }, - { - selectedKey: itemId, - menuItems: wholeSoftwareProductList - .filter(({id, vendorId}) => vendorId === currentSoftwareProduct.vendorId || id === itemId) - .map(({id, name}) => ({ - key: id, - displayText: name - })) - }, - ]; - return [ - ...firstMenuItems, - { - selectedKey: enums.BREADCRUMS.VERSIONS_PAGE, - menuItems: [{key: enums.BREADCRUMS.VERSIONS_PAGE, displayText: i18n('Versions Page')}] - } - ]; - - case enums.SCREEN.LICENSE_AGREEMENTS: - case enums.SCREEN.FEATURE_GROUPS: - case enums.SCREEN.ENTITLEMENT_POOLS: - case enums.SCREEN.LICENSE_KEY_GROUPS: - case enums.SCREEN.LICENSE_MODEL_OVERVIEW: - case enums.SCREEN.ACTIVITY_LOG: - screenToBreadcrumb = { - [enums.SCREEN.LICENSE_AGREEMENTS]: enums.BREADCRUMS.LICENSE_AGREEMENTS, - [enums.SCREEN.FEATURE_GROUPS]: enums.BREADCRUMS.FEATURE_GROUPS, - [enums.SCREEN.ENTITLEMENT_POOLS]: enums.BREADCRUMS.ENTITLEMENT_POOLS, - [enums.SCREEN.LICENSE_KEY_GROUPS]: enums.BREADCRUMS.LICENSE_KEY_GROUPS, - [enums.SCREEN.LICENSE_MODEL_OVERVIEW]: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW, - [enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG - }; - return [ - { - selectedKey: props.licenseModelId, - menuItems: wholeLicenseModelList.map(({id, name}) => ({ - key: id, - displayText: name - })) - }, - { - selectedKey: enums.BREADCRUMS.LICENSE_MODEL, - menuItems: [{ - key: enums.BREADCRUMS.LICENSE_MODEL, - displayText: i18n('License Model') - }, - ...(wholeSoftwareProductList.findIndex(({vendorId}) => vendorId === props.licenseModelId) === -1 ? [] : [{ - key: enums.BREADCRUMS.SOFTWARE_PRODUCT, - displayText: i18n('Software Products') - }])] - }, { - selectedKey: screenToBreadcrumb[screen], - menuItems: [{ - key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW, - displayText: i18n('Overview') - },{ - key: enums.BREADCRUMS.LICENSE_AGREEMENTS, - displayText: i18n('License Agreements') - }, { - key: enums.BREADCRUMS.FEATURE_GROUPS, - displayText: i18n('Feature Groups') - }, { - key: enums.BREADCRUMS.ENTITLEMENT_POOLS, - displayText: i18n('Entitlement Pools') - }, { - key: enums.BREADCRUMS.LICENSE_KEY_GROUPS, - displayText: i18n('License Key Groups') - }, { - key: enums.BREADCRUMS.ACTIVITY_LOG, - displayText: i18n('Activity Log') - }] - } - ]; - - case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE: - case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS: - case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS: - case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES: - case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT: - case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS: - case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES: - case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS: - - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES: - case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING: - screenToBreadcrumb = { - [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE, - [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS, - [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS, - [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES, - [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT, - [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS, - [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS, - [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG - }; - let componentScreenToBreadcrumb = { - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES, - [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING - }; - let licenseModelId = currentSoftwareProduct.vendorId; - let returnedBreadcrumb = [ - { - selectedKey: licenseModelId, - menuItems: wholeLicenseModelList.map(({id, name}) => ({ - key: id, - displayText: name - })) - }, - { - selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT, - menuItems: [{ - key: enums.BREADCRUMS.LICENSE_MODEL, - displayText: i18n('License Model') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT, - displayText: i18n('Software Products') - }] - }, - { - selectedKey: props.softwareProductId, - menuItems: wholeSoftwareProductList - .filter(({vendorId, id}) => vendorId === licenseModelId || id === props.softwareProductId) - .map(({id, name}) => ({ - key: id, - displayText: name - })) - }, - ...(/*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [{ - selectedKey: screenToBreadcrumb[screen] || enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS, - menuItems: [{ - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE, - displayText: i18n('Overview') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS, - displayText: i18n('General') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT, - displayText: i18n('Deployment Flavors') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES, - displayText: i18n('Process Details') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS, - displayText: i18n('Networks') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES, - displayText: i18n('Components Dependencies') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS, - displayText: i18n('Attachments') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG, - displayText: i18n('Activity Log') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS, - displayText: i18n('Components') - }].filter(item => { - switch (item.key) { - case enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS: - let isHeatData = onboardingOrigin !== onboardingOriginTypes.NONE || candidateOnboardingOrigin === onboardingOriginTypes.ZIP; - return isHeatData; - case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS: - return (componentsList.length > 0); - case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT: - let isManualMode = onboardingMethod === onboardingMethodTypes.MANUAL; - return isManualMode; - case enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES: - return (componentsList.length > 1); - default: - return true; - } - }) - }]) - ]; - if(props.componentId) { - returnedBreadcrumb = [ - ...returnedBreadcrumb, { - selectedKey: props.componentId, - menuItems: componentsList - .map(({id, displayName}) => ({ - key: id, - displayText: displayName - })) - }, - ...[{ - selectedKey: componentScreenToBreadcrumb[screen], - menuItems: [{ - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL, - displayText: i18n('General') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE, - displayText: i18n('Compute') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, - displayText: i18n('High Availability & Load Balancing') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK, - displayText: i18n('Networks') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE, - displayText: i18n('Storage') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES, - displayText: i18n('Images') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES, - displayText: i18n('Process Details') - }, { - key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING, - displayText: i18n('Monitoring') - }] - }] - ]; - } - return returnedBreadcrumb; - } - } + render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) { + if (!this.unsubscribeFromStore) { + this.unsubscribeFromStore = store.subscribe(() => + this.handleStoreChange() + ); + } + + if (!this.isConfigSet) { + Configuration.setCatalogApiRoot(apiRoot); + Configuration.setCatalogApiHeaders(apiHeaders); + this.isConfigSet = true; + } + + this.onEvent = (...args) => onEvent(...args); + this.handleData(data); + + if (!this.rendered) { + render( + <AppContainer> + <Application> + <Onboarding /> + </Application> + </AppContainer>, + element + ); + if (module.hot) { + module.hot.accept('sdc-app/onboarding/Onboarding.js', () => { + const NextOnboarding = require('sdc-app/onboarding/Onboarding.js') + .default; + render( + <AppContainer> + <Application> + <NextOnboarding /> + </Application> + </AppContainer>, + element + ); + }); + } + this.rendered = true; + } + } + + unmount(element) { + ReactDOM.unmountComponentAtNode(element); + this.rendered = false; + this.unsubscribeFromStore(); + this.unsubscribeFromStore = null; + } + + handleData(data) { + let { breadcrumbs: { selectedKeys = [] } = {} } = data; + let dispatch = action => store.dispatch(action); + let { + currentScreen, + users: { usersList }, + softwareProductList, + finalizedSoftwareProductList, + licenseModelList, + finalizedLicenseModelList, + softwareProduct: { + softwareProductEditor: { data: vspData = {} }, + softwareProductComponents = {}, + softwareProductQuestionnaire = {} + }, + archivedLicenseModelList + } = store.getState(); + const wholeSoftwareProductList = [ + ...softwareProductList, + ...finalizedSoftwareProductList + ]; + const wholeLicenseModelList = [ + ...licenseModelList, + ...finalizedLicenseModelList, + ...archivedLicenseModelList + ]; + + let { props: { version, isReadOnlyMode }, screen } = currentScreen; + let { + componentEditor: { + data: componentData = {}, + qdata: componentQData = {} + } + } = softwareProductComponents; + if (this.programmaticBreadcrumbsUpdate) { + this.prevSelectedKeys = selectedKeys; + this.programmaticBreadcrumbsUpdate = false; + return; + } + if (!isEqual(selectedKeys, this.prevSelectedKeys)) { + this.breadcrumbsPrefixSelected = isEqual( + selectedKeys, + this.prevSelectedKeys && + this.prevSelectedKeys.slice(0, selectedKeys.length) + ); + + const [, screenType, prevVspId, , prevComponentId] = + this.prevSelectedKeys || []; + let preNavigate = Promise.resolve(); + if ( + screenType === enums.BREADCRUMS.SOFTWARE_PRODUCT && + screen !== 'VERSIONS_PAGE' && + !isReadOnlyMode + ) { + let dataToSave = prevVspId + ? prevComponentId + ? { componentData, qdata: componentQData } + : { + softwareProduct: vspData, + qdata: softwareProductQuestionnaire.qdata + } + : {}; + preNavigate = OnboardingActionHelper.autoSaveBeforeNavigate( + dispatch, + { + softwareProductId: prevVspId, + version, + vspComponentId: prevComponentId, + dataToSave + } + ); + } + + let { + currentScreen: { props: { softwareProductId } }, + softwareProduct: { + softwareProductAttachments: { heatSetup, heatSetupCache } + } + } = store.getState(); + let heatSetupPopupPromise = + currentScreen.screen === + enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS + ? HeatSetupActionHelper.heatSetupLeaveConfirmation( + dispatch, + { softwareProductId, heatSetup, heatSetupCache } + ) + : Promise.resolve(); + Promise.all([preNavigate, heatSetupPopupPromise]) + .then(() => { + this.prevSelectedKeys = selectedKeys; + if (selectedKeys.length === 0) { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.ONBOARDING_CATALOG + }); + } else if ( + selectedKeys.length === 1 || + selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL + ) { + let [ + licenseModelId, + , + licenseModelScreen + ] = selectedKeys; + let licenseModel = wholeLicenseModelList.find( + vlm => vlm.id === licenseModelId + ); + ScreensHelper.loadScreen(dispatch, { + screen: licenseModelScreen, + screenType: screenTypes.LICENSE_MODEL, + props: { + licenseModelId, + version, + licenseModel, + usersList + } + }); + } else if ( + selectedKeys.length <= 4 && + selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT + ) { + let [ + licenseModelId, + , + softwareProductId, + softwareProductScreen + ] = selectedKeys; + let softwareProduct = softwareProductId + ? wholeSoftwareProductList.find( + ({ id }) => id === softwareProductId + ) + : wholeSoftwareProductList.find( + ({ vendorId }) => vendorId === licenseModelId + ); + if (!softwareProductId) { + softwareProductId = softwareProduct.id; + } + if ( + softwareProductScreen === + enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS + ) { + softwareProduct = vspData; + //check current vsp fields to determine which file has uploaded + if ( + vspData.onboardingOrigin === + onboardingOriginTypes.ZIP || + vspData.candidateOnboardingOrigin === + onboardingOriginTypes.ZIP + ) { + softwareProductScreen = + enums.SCREEN + .SOFTWARE_PRODUCT_ATTACHMENTS_SETUP; + } else if ( + vspData.onboardingOrigin === + onboardingOriginTypes.CSAR + ) { + softwareProductScreen = + enums.SCREEN + .SOFTWARE_PRODUCT_ATTACHMENTS_VALIDATION; + } + } + + ScreensHelper.loadScreen(dispatch, { + screen: softwareProductScreen, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + softwareProduct, + version, + usersList + } + }); + } else if ( + selectedKeys.length === 5 && + selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && + selectedKeys[3] === + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS + ) { + let [ + licenseModelId, + , + softwareProductId, + , + componentId + ] = selectedKeys; + let softwareProduct = softwareProductId + ? wholeSoftwareProductList.find( + ({ id }) => id === softwareProductId + ) + : wholeSoftwareProductList.find( + ({ vendorId }) => vendorId === licenseModelId + ); + if (!softwareProductId) { + softwareProductId = softwareProduct.id; + } + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + softwareProduct, + componentId, + version, + usersList + } + }); + } else if ( + selectedKeys.length === 6 && + selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && + selectedKeys[3] === + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS + ) { + let [ + licenseModelId, + , + softwareProductId, + , + componentId, + componentScreen + ] = selectedKeys; + let softwareProduct = softwareProductId + ? wholeSoftwareProductList.find( + ({ id }) => id === softwareProductId + ) + : wholeSoftwareProductList.find( + ({ vendorId }) => vendorId === licenseModelId + ); + if (!softwareProductId) { + softwareProductId = softwareProduct.id; + } + ScreensHelper.loadScreen(dispatch, { + screen: componentScreen, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + softwareProduct, + componentId, + version, + usersList + } + }); + } else { + console.error( + 'Unknown breadcrumbs path: ', + selectedKeys + ); + } + }) + .catch(() => { + store.dispatch({ + type: actionTypes.SET_CURRENT_SCREEN, + currentScreen: { + ...currentScreen, + forceBreadCrumbsUpdate: true + } + }); + }); + } + } + + handleStoreChange() { + let { + currentScreen, + licenseModelList, + finalizedLicenseModelList, + softwareProductList, + finalizedSoftwareProductList, + versionsPage: { versionsList: { itemType, itemId } }, + softwareProduct: { + softwareProductEditor: { + data: currentSoftwareProduct = { onboardingMethod: '' } + }, + softwareProductComponents: { componentsList } + }, + archivedLicenseModelList, + archivedSoftwareProductList + } = store.getState(); + const wholeSoftwareProductList = lodashUnionBy( + softwareProductList, + [...finalizedSoftwareProductList, ...archivedSoftwareProductList], + 'id' + ); + const wholeLicenseModelList = lodashUnionBy( + licenseModelList, + [...finalizedLicenseModelList, ...archivedLicenseModelList], + 'id' + ); + let breadcrumbsData = { + itemType, + itemId, + currentScreen, + wholeLicenseModelList, + wholeSoftwareProductList, + currentSoftwareProduct, + componentsList + }; + + if ( + currentScreen.forceBreadCrumbsUpdate || + !isEqual(breadcrumbsData, this.prevBreadcrumbsData) || + this.breadcrumbsPrefixSelected + ) { + this.prevBreadcrumbsData = breadcrumbsData; + this.breadcrumbsPrefixSelected = false; + this.programmaticBreadcrumbsUpdate = true; + let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData); + this.onEvent('breadcrumbsupdated', breadcrumbs); + store.dispatch({ + type: actionTypes.SET_CURRENT_SCREEN, + currentScreen: { + ...currentScreen, + forceBreadCrumbsUpdate: false + } + }); + } + } + + buildBreadcrumbs({ + currentScreen: { screen, props }, + itemType, + itemId, + currentSoftwareProduct, + wholeLicenseModelList, + wholeSoftwareProductList, + componentsList + }) { + let { + onboardingMethod, + onboardingOrigin, + candidateOnboardingOrigin + } = currentSoftwareProduct; + let screenToBreadcrumb; + switch (screen) { + case enums.SCREEN.ONBOARDING_CATALOG: + return []; + + case enums.SCREEN.VERSIONS_PAGE: + let firstMenuItems = + itemType === itemTypes.LICENSE_MODEL + ? [ + { + selectedKey: itemId, + menuItems: wholeLicenseModelList.map( + ({ id, name }) => ({ + key: id, + displayText: name + }) + ) + } + ] + : [ + { + selectedKey: + props.additionalProps.licenseModelId || + currentSoftwareProduct.vendorId, + menuItems: wholeLicenseModelList.map( + ({ id, name }) => ({ + key: id, + displayText: name + }) + ) + }, + { + selectedKey: + enums.BREADCRUMS.SOFTWARE_PRODUCT, + menuItems: [ + { + key: enums.BREADCRUMS.LICENSE_MODEL, + displayText: i18n('License Model') + }, + { + key: + enums.BREADCRUMS.SOFTWARE_PRODUCT, + displayText: i18n('Software Products') + } + ] + }, + { + selectedKey: itemId, + menuItems: wholeSoftwareProductList + .filter( + ({ id, vendorId }) => + vendorId === + currentSoftwareProduct.vendorId || + id === itemId + ) + .map(({ id, name }) => ({ + key: id, + displayText: name + })) + } + ]; + return [ + ...firstMenuItems, + { + selectedKey: enums.BREADCRUMS.VERSIONS_PAGE, + menuItems: [ + { + key: enums.BREADCRUMS.VERSIONS_PAGE, + displayText: i18n('Versions Page') + } + ] + } + ]; + + case enums.SCREEN.LICENSE_AGREEMENTS: + case enums.SCREEN.FEATURE_GROUPS: + case enums.SCREEN.ENTITLEMENT_POOLS: + case enums.SCREEN.LICENSE_KEY_GROUPS: + case enums.SCREEN.LICENSE_MODEL_OVERVIEW: + case enums.SCREEN.ACTIVITY_LOG: + screenToBreadcrumb = { + [enums.SCREEN.LICENSE_AGREEMENTS]: + enums.BREADCRUMS.LICENSE_AGREEMENTS, + [enums.SCREEN.FEATURE_GROUPS]: + enums.BREADCRUMS.FEATURE_GROUPS, + [enums.SCREEN.ENTITLEMENT_POOLS]: + enums.BREADCRUMS.ENTITLEMENT_POOLS, + [enums.SCREEN.LICENSE_KEY_GROUPS]: + enums.BREADCRUMS.LICENSE_KEY_GROUPS, + [enums.SCREEN.LICENSE_MODEL_OVERVIEW]: + enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW, + [enums.SCREEN.ACTIVITY_LOG]: enums.BREADCRUMS.ACTIVITY_LOG + }; + return [ + { + selectedKey: props.licenseModelId, + menuItems: wholeLicenseModelList.map( + ({ id, name }) => ({ + key: id, + displayText: name + }) + ) + }, + { + selectedKey: enums.BREADCRUMS.LICENSE_MODEL, + menuItems: [ + { + key: enums.BREADCRUMS.LICENSE_MODEL, + displayText: i18n('License Model') + }, + ...(wholeSoftwareProductList.findIndex( + ({ vendorId }) => + vendorId === props.licenseModelId + ) === -1 + ? [] + : [ + { + key: + enums.BREADCRUMS.SOFTWARE_PRODUCT, + displayText: i18n('Software Products') + } + ]) + ] + }, + { + selectedKey: screenToBreadcrumb[screen], + menuItems: [ + { + key: enums.BREADCRUMS.LICENSE_MODEL_OVERVIEW, + displayText: i18n('Overview') + }, + { + key: enums.BREADCRUMS.LICENSE_AGREEMENTS, + displayText: i18n('License Agreements') + }, + { + key: enums.BREADCRUMS.FEATURE_GROUPS, + displayText: i18n('Feature Groups') + }, + { + key: enums.BREADCRUMS.ENTITLEMENT_POOLS, + displayText: i18n('Entitlement Pools') + }, + { + key: enums.BREADCRUMS.LICENSE_KEY_GROUPS, + displayText: i18n('License Key Groups') + }, + { + key: enums.BREADCRUMS.ACTIVITY_LOG, + displayText: i18n('Activity Log') + } + ] + } + ]; + + case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE: + case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS: + case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS: + case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES: + case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT: + case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS: + case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES: + case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS: + + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES: + case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING: + screenToBreadcrumb = { + [enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_LANDING_PAGE, + [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS, + [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS, + [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES, + [enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPLOYMENT, + [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS, + [enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_DEPENDENCIES, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS, + [enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_ACTIVITY_LOG + }; + let componentScreenToBreadcrumb = { + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_IMAGES, + [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING + }; + let licenseModelId = currentSoftwareProduct.vendorId; + let returnedBreadcrumb = [ + { + selectedKey: licenseModelId, + menuItems: wholeLicenseModelList.map( + ({ id, name }) => ({ + key: id, + displayText: name + }) + ) + }, + { + selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT, + menuItems: [ + { + key: enums.BREADCRUMS.LICENSE_MODEL, + displayText: i18n('License Model') + }, + { + key: enums.BREADCRUMS.SOFTWARE_PRODUCT, + displayText: i18n('Software Products') + } + ] + }, + { + selectedKey: props.softwareProductId, + menuItems: wholeSoftwareProductList + .filter( + ({ vendorId, id }) => + vendorId === licenseModelId || + id === props.softwareProductId + ) + .map(({ id, name }) => ({ + key: id, + displayText: name + })) + }, + .../*screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] :*/ [ + { + selectedKey: + screenToBreadcrumb[screen] || + enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS, + menuItems: [ + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_LANDING_PAGE, + displayText: i18n('Overview') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_DETAILS, + displayText: i18n('General') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_DEPLOYMENT, + displayText: i18n('Deployment Flavors') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_PROCESSES, + displayText: i18n('Process Details') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_NETWORKS, + displayText: i18n('Networks') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_DEPENDENCIES, + displayText: i18n('Components Dependencies') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_ATTACHMENTS, + displayText: i18n('Attachments') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_ACTIVITY_LOG, + displayText: i18n('Activity Log') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENTS, + displayText: i18n('Components') + } + ].filter(item => { + switch (item.key) { + case enums.BREADCRUMS + .SOFTWARE_PRODUCT_ATTACHMENTS: + let isHeatData = + onboardingOrigin !== + onboardingOriginTypes.NONE || + candidateOnboardingOrigin === + onboardingOriginTypes.ZIP; + return isHeatData; + case enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENTS: + return componentsList.length > 0; + case enums.BREADCRUMS + .SOFTWARE_PRODUCT_DEPLOYMENT: + let isManualMode = + onboardingMethod === + onboardingMethodTypes.MANUAL; + return isManualMode; + case enums.BREADCRUMS + .SOFTWARE_PRODUCT_DEPENDENCIES: + return componentsList.length > 1; + default: + return true; + } + }) + } + ] + ]; + if (props.componentId) { + returnedBreadcrumb = [ + ...returnedBreadcrumb, + { + selectedKey: props.componentId, + menuItems: componentsList.map( + ({ id, displayName }) => ({ + key: id, + displayText: displayName + }) + ) + }, + ...[ + { + selectedKey: + componentScreenToBreadcrumb[screen], + menuItems: [ + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_GENERAL, + displayText: i18n('General') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_COMPUTE, + displayText: i18n('Compute') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING, + displayText: i18n( + 'High Availability & Load Balancing' + ) + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_NETWORK, + displayText: i18n('Networks') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_STORAGE, + displayText: i18n('Storage') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_IMAGES, + displayText: i18n('Images') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_PROCESSES, + displayText: i18n('Process Details') + }, + { + key: + enums.BREADCRUMS + .SOFTWARE_PRODUCT_COMPONENT_MONITORING, + displayText: i18n('Monitoring') + } + ] + } + ] + ]; + } + return returnedBreadcrumb; + } + } } |