openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import {catalogItemTypeClasses, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
  18 import CatalogTile from './CatalogTile.jsx';
  19 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
  20 import {statusEnum, statusBarTextMap} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
  21 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  22 import i18n from 'nfvo-utils/i18n/i18n.js';
  23 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
  24 import tooltip from './onboardingCatalog/Tooltip.jsx';
  25
  26
  27 const CatalogTileIcon = ({catalogItemTypeClass}) => (
  28         <div className={'catalog-tile-icon ' + catalogItemTypeClass}>
  29                 <div className='icon'><SVGIcon
  30                         name={catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? 'vlm' : 'vsp' }/>
  31                 </div>
  32         </div>
  33 );
  34
  35 const ItemTypeTitle = ({catalogItemTypeClass}) => {
  36         const itemTypeTitle = catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? i18n('VLM') : i18n('VSP');
  37         return (
  38                 <div className={`catalog-tile-type ${catalogItemTypeClass}`}>{itemTypeTitle}</div>
  39         );
  40 };
  41
  42 const CatalogTileVendorName = ({vendorName, catalogItemTypeClass}) => {
  43         const name = catalogItemTypeClass === catalogItemTypeClasses.SOFTWARE_PRODUCT ? vendorName : '';
  44         return ( name ?
  45                 <OverlayTrigger placement='top' overlay={tooltip(name)}>
  46                         <div className='catalog-tile-vendor-name'>{name}</div>
  47                 </OverlayTrigger> : <div className='catalog-tile-vendor-name'>{name}</div>
  48         );
  49 };
  50
  51 const CatalogTileItemName = ({name}) => (
  52         <OverlayTrigger placement='top' overlay={tooltip(name && name.toUpperCase())}>
  53                 <div className='catalog-tile-item-name'>{name}</div>
  54         </OverlayTrigger>
  55 );
  56
  57 const VersionInfo = ({version}) => (
  58         <div className='catalog-tile-version-info'>
  59                 <div className='catalog-tile-item-version' data-test-id='catalog-item-version'>
  60                         V {version}
  61                 </div>
  62         </div>
  63 );
  64
  65 const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => {
  66         const {vendorName, name, version} = catalogItemData;
  67         return (
  68                 <div className='catalog-tile-entity-details'>
  69                         <CatalogTileVendorName catalogItemTypeClass={catalogItemTypeClass} vendorName={vendorName}/>
  70                         <CatalogTileItemName name={name}/>
  71                         <VersionInfo version={version.label}/>
  72                 </div>
  73         );
  74 };
  75
  76
  77 const ItemStatusInfo = ({catalogItemTypeClass, lockingUser, itemStatus}) => {
  78         const status = statusBarTextMap[itemStatus];
  79         const lockedBy = lockingUser ? ` by ${lockingUser}` : '';
  80         const toolTipMsg = `${status}${lockedBy}`;
  81
  82         return (
  83                 <div className={'catalog-tile-content ' + catalogItemTypeClass}>
  84                         <div className='catalog-tile-locking-user-name'>{i18n(status)}</div>
  85                         <OverlayTrigger placement='top' overlay={tooltip(toolTipMsg)}>
  86                                 <div className='catalog-tile-check-in-status'><SVGIcon
  87                                         name={itemStatus === statusEnum.CHECK_OUT_STATUS ? 'unlocked' : 'locked'}
  88                                         data-test-id={itemStatus === statusEnum.CHECK_IN_STATUS ? 'catalog-item-checked-in' : 'catalog-item-checked-out'}/>
  89                                 </div>
  90                         </OverlayTrigger>
  91                 </div>
  92
  93         );
  94 };
  95
  96 const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => {
  97
  98         let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
  99
 100         return (
 101                 <CatalogTile catalogItemTypeClass={catalogItemTypeClass} onSelect={() => {
 102                         if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
 103                                 onMigrate({
 104                                         softwareProduct: catalogItemData
 105                                 });
 106                         }
 107                         else {
 108                                 onSelect();
 109                         }
 110                 }} data-test-id={catalogItemTypeClass}>
 111                         <div className='catalog-tile-top item-details'>
 112                                 <ItemTypeTitle catalogItemTypeClass={catalogItemTypeClass}/>
 113                                 <CatalogTileIcon catalogItemTypeClass={catalogItemTypeClass}/>
 114                                 <EntityDetails catalogItemTypeClass={catalogItemTypeClass} catalogItemData={catalogItemData}/>
 115                                 <ItemStatusInfo itemStatus={itemStatus} catalogItemTypeClass={catalogItemTypeClass} lockingUser={catalogItemData.lockingUser}/>
 116                         </div>
 117                 </CatalogTile>
 118         );
 119
 120 };
 121
 122 CatalogItemDetails.PropTypes = {
 123         catalogItemData: React.PropTypes.obj,
 124         catalogItemTypeClass: React.PropTypes.string,
 125         onSelect: React.PropTypes.func,
 126         onMigrate: React.PropTypes.func
 127 };
 128
 129 export default CatalogItemDetails;
 130