openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx

   1 import React from 'react';
   2 import ReactDOM from 'react-dom';
   3 import {connect} from 'react-redux';
   4 import isEqual from 'lodash/isEqual.js';
   5 import objectValues from 'lodash/values.js';
   6
   7 import i18n from 'nfvo-utils/i18n/i18n.js';
   8 import Application from 'sdc-app/Application.jsx';
   9 import store from 'sdc-app/AppStore.js';
  10 import Configuration from 'sdc-app/config/Configuration.js';
  11
  12 import OnboardingCatalog from './OnboardingCatalog.js';
  13 import LicenseModel from './licenseModel/LicenseModel.js';
  14 import LicenseAgreementListEditor from './licenseModel/licenseAgreement/LicenseAgreementListEditor.js';
  15 import FeatureGroupListEditor from './licenseModel/featureGroups/FeatureGroupListEditor.js';
  16 import LicenseKeyGroupsListEditor from './licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
  17 import EntitlementPoolsListEditor from './licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
  18 import SoftwareProduct from './softwareProduct/SoftwareProduct.js';
  19 import SoftwareProductLandingPage  from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
  20 import SoftwareProductDetails  from './softwareProduct/details/SoftwareProductDetails.js';
  21 import SoftwareProductAttachments from './softwareProduct/attachments/SoftwareProductAttachments.js';
  22 import SoftwareProductProcesses from './softwareProduct/processes/SoftwareProductProcesses.js';
  23 import SoftwareProductNetworks from './softwareProduct/networks/SoftwareProductNetworks.js';
  24 import SoftwareProductComponentsList from './softwareProduct/components/SoftwareProductComponentsList.js';
  25 import SoftwareProductComponentProcessesList from './softwareProduct/components/processes/SoftwareProductComponentProcessesList.js';
  26 import SoftwareProductComponentStorage from './softwareProduct/components/storage/SoftwareProductComponentStorage.js';
  27 import SoftwareProductComponentsNetworkList from './softwareProduct/components/network/SoftwareProductComponentsNetworkList.js';
  28 import SoftwareProductComponentsGeneral from './softwareProduct/components/general/SoftwareProductComponentsGeneral.js';
  29 import SoftwareProductComponentsCompute from './softwareProduct/components/compute/SoftwareProductComponentCompute.js';
  30 import SoftwareProductComponentLoadBalancing from './softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js';
  31 import SoftwareProductComponentsMonitoring from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js';
  32 import {navigationItems as SoftwareProductNavigationItems, actionTypes as SoftwareProductActionTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
  33
  34 import {enums} from './OnboardingConstants.js';
  35 import OnboardingActionHelper from './OnboardingActionHelper.js';
  36
  37
  38 class OnboardingView extends React.Component {
  39         static propTypes = {
  40                 currentScreen: React.PropTypes.shape({
  41                         screen: React.PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
  42                         props: React.PropTypes.object.isRequired
  43                 }).isRequired
  44         };
  45
  46         componentDidMount() {
  47                 let element = ReactDOM.findDOMNode(this);
  48                 element.addEventListener('click', event => {
  49                         if (event.target.tagName === 'A') {
  50                                 event.preventDefault();
  51                         }
  52                 });
  53                 ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  54                         element.addEventListener(eventType, event => event.stopPropagation())
  55                 );
  56         }
  57
  58         render() {
  59                 let {currentScreen} = this.props;
  60                 let {screen, props} = currentScreen;
  61
  62                 return (
  63                         <div className='dox-ui dox-ui-punch-out dox-ui-punch-out-full-page'>
  64                                 {(() => {
  65                                         switch (screen) {
  66                                                 case enums.SCREEN.ONBOARDING_CATALOG:
  67                                                         return <OnboardingCatalog {...props}/>;
  68
  69                                                 case enums.SCREEN.LICENSE_AGREEMENTS:
  70                                                 case enums.SCREEN.FEATURE_GROUPS:
  71                                                 case enums.SCREEN.ENTITLEMENT_POOLS:
  72                                                 case enums.SCREEN.LICENSE_KEY_GROUPS:
  73                                                         return (
  74                                                                 <LicenseModel currentScreen={currentScreen}>
  75                                                                 {
  76                                                                         (()=>{
  77                                                                                 switch(screen) {
  78                                                                                         case enums.SCREEN.LICENSE_AGREEMENTS:
  79                                                                                                 return <LicenseAgreementListEditor {...props}/>;
  80                                                                                         case enums.SCREEN.FEATURE_GROUPS:
  81                                                                                                 return <FeatureGroupListEditor {...props}/>;
  82                                                                                         case enums.SCREEN.ENTITLEMENT_POOLS:
  83                                                                                                 return <EntitlementPoolsListEditor {...props}/>;
  84                                                                                         case enums.SCREEN.LICENSE_KEY_GROUPS:
  85                                                                                                 return <LicenseKeyGroupsListEditor {...props}/>;
  86                                                                                 }
  87                                                                         })()
  88                                                                 }
  89                                                                 </LicenseModel>
  90                                                         );
  91
  92                                                 case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
  93                                                 case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
  94                                                 case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
  95                                                 case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
  96                                                 case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
  97                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
  98                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
  99                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
 100                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
 101                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
 102                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
 103                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
 104                                                 case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
 105                                                         return (
 106                                                                 <SoftwareProduct currentScreen={currentScreen}>
 107                                                                 {
 108                                                                         (()=>{
 109                                                                                 switch(screen) {
 110                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
 111                                                                                                 return <SoftwareProductLandingPage {...props}/>;
 112                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
 113                                                                                                 return <SoftwareProductDetails {...props}/>;
 114                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
 115                                                                                                 return <SoftwareProductAttachments className='no-padding-content-area'  {...props} />;
 116                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
 117                                                                                                 return <SoftwareProductProcesses {...props}/>;
 118                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
 119                                                                                                 return <SoftwareProductNetworks {...props}/>;
 120                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
 121                                                                                                 return <SoftwareProductComponentsList  {...props}/>;
 122                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
 123                                                                                                 return <SoftwareProductComponentProcessesList  {...props}/>;
 124                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
 125                                                                                                 return <SoftwareProductComponentStorage {...props}/>;
 126                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
 127                                                                                                 return <SoftwareProductComponentsNetworkList {...props}/>;
 128                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
 129                                                                                                 return <SoftwareProductComponentsGeneral{...props}/>;
 130                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
 131                                                                                                 return <SoftwareProductComponentsCompute {...props}/>;
 132                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
 133                                                                                                 return <SoftwareProductComponentLoadBalancing{...props}/>;
 134                                                                                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
 135                                                                                                 return <SoftwareProductComponentsMonitoring {...props}/>;
 136                                                                                 }
 137                                                                         })()
 138                                                                 }
 139                                                                 </SoftwareProduct>
 140                                                         );
 141                                         }
 142                                 })()}
 143                         </div>
 144                 );
 145         }
 146 }
 147 const mapStateToProps = ({currentScreen}) => ({currentScreen});
 148 let Onboarding = connect(mapStateToProps, null)(OnboardingView);
 149
 150 export default class OnboardingPunchOut {
 151
 152         render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
 153                 if (!this.unsubscribeFromStore) {
 154                         this.unsubscribeFromStore = store.subscribe(() => this.handleStoreChange());
 155                 }
 156
 157                 if (!this.isConfigSet) {
 158                         Configuration.setATTApiRoot(apiRoot);
 159                         Configuration.setATTApiHeaders(apiHeaders);
 160                         this.isConfigSet = true;
 161                 }
 162
 163                 this.onEvent = (...args) => onEvent(...args);
 164                 this.handleData(data);
 165
 166                 if (!this.rendered) {
 167                         ReactDOM.render(
 168                                 <Application>
 169                                         <Onboarding/>
 170                                 </Application>,
 171                                 element
 172                         );
 173                         this.rendered = true;
 174                 }
 175         }
 176
 177         unmount(element) {
 178                 ReactDOM.unmountComponentAtNode(element);
 179                 this.rendered = false;
 180                 this.unsubscribeFromStore();
 181                 this.unsubscribeFromStore = null;
 182         }
 183
 184         handleData(data) {
 185                 let {breadcrumbs: {selectedKeys = []} = {}} = data;
 186                 let dispatch = action => store.dispatch(action);
 187                 let {softwareProductList, softwareProduct: {softwareProductEditor: {data: {id: currentSoftwareProductId, version: currentSoftwareProductVersion} = {}}},
 188                         licenseModelList, licenseModel: {licenseModelEditor: {data: {id: currentLicenseModelId, version: currentLicenseModelVersion} = {}}}} = store.getState();
 189
 190                 if (this.programmaticBreadcrumbsUpdate) {
 191                         this.prevSelectedKeys = selectedKeys;
 192                         this.programmaticBreadcrumbsUpdate = false;
 193                         return;
 194                 }
 195
 196                 if (!isEqual(selectedKeys, this.prevSelectedKeys)) {
 197                         this.breadcrumbsPrefixSelected = isEqual(selectedKeys, this.prevSelectedKeys && this.prevSelectedKeys.slice(0, selectedKeys.length));
 198                         this.prevSelectedKeys = selectedKeys;
 199
 200                         if (selectedKeys.length === 0) {
 201                                 OnboardingActionHelper.navigateToOnboardingCatalog(dispatch);
 202                         } else if (selectedKeys.length === 1 || selectedKeys[1] === enums.BREADCRUMS.LICENSE_MODEL) {
 203                                 let [licenseModelId, , licenseModelScreen] = selectedKeys;
 204                                 if (!licenseModelScreen) {
 205                                         licenseModelScreen = enums.BREADCRUMS.LICENSE_AGREEMENTS;
 206                                 }
 207                                 if(currentLicenseModelId !== licenseModelId) {
 208                                         currentLicenseModelVersion = licenseModelList.find(lm => lm.id === licenseModelId).version;
 209                                 }
 210                                 switch (licenseModelScreen) {
 211                                         case enums.BREADCRUMS.LICENSE_AGREEMENTS:
 212                                                 OnboardingActionHelper.navigateToLicenseAgreements(dispatch, {licenseModelId, version: currentLicenseModelVersion});
 213                                                 break;
 214                                         case enums.BREADCRUMS.FEATURE_GROUPS:
 215                                                 OnboardingActionHelper.navigateToFeatureGroups(dispatch, {licenseModelId, version: currentLicenseModelVersion});
 216                                                 break;
 217                                         case enums.BREADCRUMS.ENTITLEMENT_POOLS:
 218                                                 OnboardingActionHelper.navigateToEntitlementPools(dispatch, {licenseModelId, version: currentLicenseModelVersion});
 219                                                 break;
 220                                         case enums.BREADCRUMS.LICENSE_KEY_GROUPS:
 221                                                 OnboardingActionHelper.navigateToLicenseKeyGroups(dispatch, {licenseModelId, version: currentLicenseModelVersion});
 222                                                 break;
 223                                 }
 224                         } else if (selectedKeys.length <= 4 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT) {
 225                                 let [licenseModelId, , softwareProductId, softwareProductScreen] = selectedKeys;
 226                                 let softwareProduct = softwareProductId ?
 227                                         softwareProductList.find(({id}) => id === softwareProductId) :
 228                                         softwareProductList.find(({vendorId}) => vendorId === licenseModelId);
 229                                 if (!softwareProductId) {
 230                                         softwareProductId = softwareProduct.id;
 231                                 }
 232                                 if(currentSoftwareProductId !== softwareProductId) {
 233                                         currentSoftwareProductVersion = softwareProduct.version;
 234                                 }
 235                                 switch (softwareProductScreen) {
 236                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS:
 237                                                 OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {softwareProductId});
 238                                                 break;
 239                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS:
 240                                                 OnboardingActionHelper.navigateToSoftwareProductAttachments(dispatch, {softwareProductId});
 241                                                 break;
 242                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES:
 243                                                 OnboardingActionHelper.navigateToSoftwareProductProcesses(dispatch, {softwareProductId, version: currentSoftwareProductVersion});
 244                                                 break;
 245                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS:
 246                                                 OnboardingActionHelper.navigateToSoftwareProductNetworks(dispatch, {softwareProductId, version: currentSoftwareProductVersion});
 247                                                 break;
 248                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS:
 249                                                 OnboardingActionHelper.navigateToSoftwareProductComponents(dispatch, {softwareProductId, version: currentSoftwareProductVersion});
 250                                                 dispatch({
 251                                                         type: SoftwareProductActionTypes.TOGGLE_NAVIGATION_ITEM,
 252                                                         mapOfExpandedIds: {
 253                                                                 [SoftwareProductNavigationItems.COMPONENTS]: true
 254                                                         }
 255                                                 });
 256                                                 break;
 257                                         default:
 258                                                 OnboardingActionHelper.navigateToSoftwareProductLandingPage(dispatch, {softwareProductId, version: currentSoftwareProductVersion});
 259                                                 break;
 260                                 }
 261                         }else if (selectedKeys.length === 5 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
 262                                 let [licenseModelId, , softwareProductId, , componentId] = selectedKeys;
 263                                 let softwareProduct = softwareProductId ?
 264                                         softwareProductList.find(({id}) => id === softwareProductId) :
 265                                         softwareProductList.find(({vendorId}) => vendorId === licenseModelId);
 266                                 if (!softwareProductId) {
 267                                         softwareProductId = softwareProduct.id;
 268                                 }
 269                                 if(currentSoftwareProductId !== softwareProductId) {
 270                                         currentSoftwareProductVersion = softwareProduct.version;
 271                                 }
 272                                 OnboardingActionHelper.navigateToSoftwareProductComponentGeneralAndUpdateLeftPanel(dispatch, {softwareProductId, componentId, version: currentSoftwareProductVersion});
 273                         }else if (selectedKeys.length === 6 && selectedKeys[1] === enums.BREADCRUMS.SOFTWARE_PRODUCT && selectedKeys[3] === enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS) {
 274                                 let [licenseModelId, , softwareProductId, , componentId, componentScreen] = selectedKeys;
 275                                 let softwareProduct = softwareProductId ?
 276                                         softwareProductList.find(({id}) => id === softwareProductId) :
 277                                         softwareProductList.find(({vendorId}) => vendorId === licenseModelId);
 278                                 if (!softwareProductId) {
 279                                         softwareProductId = softwareProduct.id;
 280                                 }
 281                                 if(currentSoftwareProductId !== softwareProductId) {
 282                                         currentSoftwareProductVersion = softwareProduct.version;
 283                                 }
 284                                 switch (componentScreen) {
 285                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
 286                                                 OnboardingActionHelper.navigateToSoftwareProductComponentGeneral(dispatch, {softwareProductId, componentId, version: currentSoftwareProductVersion});
 287                                                 break;
 288                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
 289                                                 OnboardingActionHelper.navigateToComponentCompute(dispatch, {softwareProductId, componentId});
 290                                                 break;
 291                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
 292                                                 OnboardingActionHelper.navigateToComponentLoadBalancing(dispatch, {softwareProductId, componentId});
 293                                                 break;
 294                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
 295                                                 OnboardingActionHelper.navigateToComponentNetwork(dispatch, {softwareProductId, componentId});
 296                                                 break;
 297                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
 298                                                 OnboardingActionHelper.navigateToComponentStorage(dispatch, {softwareProductId, componentId});
 299                                                 break;
 300                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
 301                                                 OnboardingActionHelper.navigateToSoftwareProductComponentProcesses(dispatch, {softwareProductId, componentId});
 302                                                 break;
 303                                         case enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
 304                                                 OnboardingActionHelper.navigateToSoftwareProductComponentMonitoring(dispatch, {softwareProductId, componentId});
 305                                                 break;
 306                                 }
 307                         } else {
 308                                 console.error('Unknown breadcrumbs path: ', selectedKeys);
 309                         }
 310                 }
 311         }
 312
 313         handleStoreChange() {
 314                 let {currentScreen, licenseModelList, softwareProductList} = store.getState();
 315                 let breadcrumbsData = {currentScreen, licenseModelList, softwareProductList};
 316
 317                 if (!isEqual(breadcrumbsData, this.prevBreadcrumbsData) || this.breadcrumbsPrefixSelected) {
 318                         this.prevBreadcrumbsData = breadcrumbsData;
 319                         this.breadcrumbsPrefixSelected = false;
 320                         this.programmaticBreadcrumbsUpdate = true;
 321
 322                         let breadcrumbs = this.buildBreadcrumbs(breadcrumbsData);
 323                         this.onEvent('breadcrumbsupdated', breadcrumbs);
 324                 }
 325         }
 326
 327         buildBreadcrumbs({currentScreen: {screen, props}, licenseModelList, softwareProductList}) {
 328                 let componentsList;
 329                 if(props.componentId) {
 330                         componentsList = store.getState().softwareProduct.softwareProductComponents.componentsList;
 331                 }
 332                 let screenToBreadcrumb;
 333                 switch (screen) {
 334                         case enums.SCREEN.ONBOARDING_CATALOG:
 335                                 return [];
 336
 337                         case enums.SCREEN.LICENSE_AGREEMENTS:
 338                         case enums.SCREEN.FEATURE_GROUPS:
 339                         case enums.SCREEN.ENTITLEMENT_POOLS:
 340                         case enums.SCREEN.LICENSE_KEY_GROUPS:
 341                                 screenToBreadcrumb = {
 342                                         [enums.SCREEN.LICENSE_AGREEMENTS]: enums.BREADCRUMS.LICENSE_AGREEMENTS,
 343                                         [enums.SCREEN.FEATURE_GROUPS]: enums.BREADCRUMS.FEATURE_GROUPS,
 344                                         [enums.SCREEN.ENTITLEMENT_POOLS]: enums.BREADCRUMS.ENTITLEMENT_POOLS,
 345                                         [enums.SCREEN.LICENSE_KEY_GROUPS]: enums.BREADCRUMS.LICENSE_KEY_GROUPS
 346                                 };
 347                                 return [
 348                                         {
 349                                                 selectedKey: props.licenseModelId,
 350                                                 menuItems: licenseModelList.map(({id, vendorName}) => ({
 351                                                         key: id,
 352                                                         displayText: vendorName
 353                                                 }))
 354                                         },
 355                                         {
 356                                                 selectedKey: enums.BREADCRUMS.LICENSE_MODEL,
 357                                                 menuItems: [{
 358                                                         key: enums.BREADCRUMS.LICENSE_MODEL,
 359                                                         displayText: i18n('License Model')
 360                                                 },
 361                                                         ...(softwareProductList.findIndex(({vendorId}) => vendorId === props.licenseModelId) === -1 ? [] : [{
 362                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
 363                                                                 displayText: i18n('Software Products')
 364                                                         }])]
 365                                         }, {
 366                                                 selectedKey: screenToBreadcrumb[screen],
 367                                                 menuItems: [{
 368                                                         key: enums.BREADCRUMS.LICENSE_AGREEMENTS,
 369                                                         displayText: i18n('License Agreements')
 370                                                 }, {
 371                                                         key: enums.BREADCRUMS.FEATURE_GROUPS,
 372                                                         displayText: i18n('Feature Groups')
 373                                                 }, {
 374                                                         key: enums.BREADCRUMS.ENTITLEMENT_POOLS,
 375                                                         displayText: i18n('Entitlement Pools')
 376                                                 }, {
 377                                                         key: enums.BREADCRUMS.LICENSE_KEY_GROUPS,
 378                                                         displayText: i18n('License Key Groups')
 379                                                 }]
 380                                         }
 381                                 ];
 382
 383                         case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
 384                         case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
 385                         case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
 386                         case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
 387                         case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
 388                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
 389
 390                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
 391                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
 392                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
 393                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
 394                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
 395                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
 396                         case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
 397                                 screenToBreadcrumb = {
 398                                         [enums.SCREEN.SOFTWARE_PRODUCT_DETAILS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
 399                                         [enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
 400                                         [enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
 401                                         [enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
 402                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS
 403                                 };
 404                                 let componentScreenToBreadcrumb = {
 405                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
 406                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
 407                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
 408                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
 409                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
 410                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
 411                                         [enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING]: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING
 412                                 };
 413                                 let licenseModelId = softwareProductList.find(({id}) => id === props.softwareProductId).vendorId;
 414                                 let returnedBreadcrumb = [
 415                                         {
 416                                                 selectedKey: licenseModelId,
 417                                                 menuItems: licenseModelList.map(({id, vendorName}) => ({
 418                                                         key: id,
 419                                                         displayText: vendorName
 420                                                 }))
 421                                         },
 422                                         {
 423                                                 selectedKey: enums.BREADCRUMS.SOFTWARE_PRODUCT,
 424                                                 menuItems: [{
 425                                                         key: enums.BREADCRUMS.LICENSE_MODEL,
 426                                                         displayText: i18n('License Model')
 427                                                 }, {
 428                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT,
 429                                                         displayText: i18n('Software Products')
 430                                                 }]
 431                                         },
 432                                         {
 433                                                 selectedKey: props.softwareProductId,
 434                                                 menuItems: softwareProductList
 435                                                         .filter(({vendorId}) => vendorId === licenseModelId)
 436                                                         .map(({id, name}) => ({
 437                                                                 key: id,
 438                                                                 displayText: name
 439                                                         }))
 440                                         },
 441                                         ...(screen === enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE ? [] : [{
 442                                                 selectedKey: screenToBreadcrumb[screen] || enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
 443                                                 menuItems: [{
 444                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT_DETAILS,
 445                                                         displayText: i18n('General')
 446                                                 }, {
 447                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT_ATTACHMENTS,
 448                                                         displayText: i18n('Attachments')
 449                                                 }, {
 450                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT_PROCESSES,
 451                                                         displayText: i18n('Process Details')
 452                                                 }, {
 453                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT_NETWORKS,
 454                                                         displayText: i18n('Networks')
 455                                                 }, {
 456                                                         key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENTS,
 457                                                         displayText: i18n('Components')
 458                                                 }]
 459                                         }])
 460                                 ];
 461                                 if(props.componentId) {
 462                                         returnedBreadcrumb = [
 463                                                 ...returnedBreadcrumb, {
 464                                                         selectedKey: props.componentId,
 465                                                         menuItems: componentsList
 466                                                                 .map(({id, displayName}) => ({
 467                                                                         key: id,
 468                                                                         displayText: displayName
 469                                                                 }))
 470                                                 },
 471                                                 ...[{
 472                                                         selectedKey: componentScreenToBreadcrumb[screen],
 473                                                         menuItems: [{
 474                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_GENERAL,
 475                                                                 displayText: i18n('General')
 476                                                         }, {
 477                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_COMPUTE,
 478                                                                 displayText: i18n('Compute')
 479                                                         }, {
 480                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING,
 481                                                                 displayText: i18n('High Availability & Load Balancing')
 482                                                         }, {
 483                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_NETWORK,
 484                                                                 displayText: i18n('Networks')
 485                                                         }, {
 486                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_STORAGE,
 487                                                                 displayText: i18n('Storage')
 488                                                         }, {
 489                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_PROCESSES,
 490                                                                 displayText: i18n('Process Details')
 491                                                         }, {
 492                                                                 key: enums.BREADCRUMS.SOFTWARE_PRODUCT_COMPONENT_MONITORING,
 493                                                                 displayText: i18n('Monitoring')
 494                                                         }]
 495                                                 }]
 496                                         ];
 497                                 }
 498                                 return returnedBreadcrumb;
 499                 }
 500         }
 501 }