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 'nfvo-components/icon/SVGIcon.jsx';
  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
  28 const CatalogTileIcon = ({catalogItemTypeClass}) => (
  29                 <div className={'catalog-tile-icon ' + catalogItemTypeClass}>
  30                         <div className='icon'><SVGIcon
  31                                 name={catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? 'vlm' : 'vsp' }/>
  32                         </div>
  33                 </div>
  34 );
  35
  36 const ItemTypeTitle = ({catalogItemTypeClass}) => {
  37         const itemTypeTitle = catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? i18n('VLM') : i18n('VSP');
  38         return(
  39                 <div className={`catalog-tile-type ${catalogItemTypeClass}`}>{itemTypeTitle}</div>
  40         );
  41 };
  42
  43 const CatalogTileVendorName = ({vendorName, catalogItemTypeClass}) => {
  44         const name = catalogItemTypeClass === catalogItemTypeClasses.SOFTWARE_PRODUCT ? vendorName : '';
  45         return(
  46                 <div>
  47                         <OverlayTrigger placement='top' overlay={tooltip(name)}>
  48                                 <div className='catalog-tile-vendor-name'>{name}</div>
  49                         </OverlayTrigger>
  50                 </div>
  51         );
  52 };
  53
  54 const CatalogTileItemName = ({name}) => (
  55         <div>
  56                 <OverlayTrigger placement='top'  overlay={tooltip(name && name.toUpperCase())}>
  57                         <div className='catalog-tile-item-name'>{name}</div>
  58                 </OverlayTrigger>
  59         </div>
  60 );
  61
  62 const VersionInfo = ({version}) => (
  63         <div className='catalog-tile-version-info'>
  64                 <div className='catalog-tile-item-version' data-test-id='catalog-item-version'>
  65                         V {version}
  66                 </div>
  67         </div>
  68 );
  69
  70 const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => {
  71         const {vendorName, name, version} = catalogItemData;
  72         return (
  73                 <div className='catalog-tile-entity-details'>
  74                         <CatalogTileVendorName catalogItemTypeClass={catalogItemTypeClass} vendorName={vendorName}/>
  75                         <CatalogTileItemName name={name}/>
  76                         <VersionInfo version={version.label} />
  77                 </div>
  78         );
  79 };
  80
  81
  82 const  ItemStatusInfo = ({catalogItemTypeClass, lockingUser, itemStatus}) => {
  83         const status = statusBarTextMap[itemStatus];
  84         const lockedBy = lockingUser ? ` by ${lockingUser}` : '';
  85         const toolTipMsg = `${status}${lockedBy}`;
  86
  87         return (
  88                 <div className={'catalog-tile-content ' + catalogItemTypeClass}>
  89                         <div className='catalog-tile-locking-user-name'>{i18n(status)}</div>
  90                         <OverlayTrigger placement='top'  overlay={tooltip(toolTipMsg)}>
  91                                 <div className='catalog-tile-check-in-status'><SVGIcon
  92                                         name={itemStatus === statusEnum.CHECK_OUT_STATUS ? 'unlocked' : 'locked'}
  93                                         data-test-id={itemStatus === statusEnum.CHECK_IN_STATUS ? 'catalog-item-checked-in' : 'catalog-item-checked-out'}/>
  94                                 </div>
  95                         </OverlayTrigger>
  96                 </div>
  97
  98         );
  99 };
 100
 101 const  CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) =>  {
 102
 103         let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
 104
 105         return (
 106                 <CatalogTile catalogItemTypeClass={catalogItemTypeClass} onSelect={() => {
 107                         if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
 108                                 onMigrate({
 109                                         softwareProduct: catalogItemData
 110                                 });
 111                         } else {
 112                                 onSelect();
 113                         }
 114                 }} data-test-id={catalogItemTypeClass}>
 115                         <div className='catalog-tile-top item-details'>
 116                                 <ItemTypeTitle catalogItemTypeClass={catalogItemTypeClass}/>
 117                                 <CatalogTileIcon catalogItemTypeClass={catalogItemTypeClass}/>
 118                                 <EntityDetails catalogItemTypeClass={catalogItemTypeClass} catalogItemData={catalogItemData} />
 119                                 <ItemStatusInfo itemStatus={itemStatus} catalogItemTypeClass={catalogItemTypeClass} lockingUser={catalogItemData.lockingUser} />
 120                         </div>
 121                 </CatalogTile>
 122         );
 123
 124 };
 125
 126 CatalogItemDetails.PropTypes = {
 127         catalogItemData: React.PropTypes.obj,
 128         catalogItemTypeClass: React.PropTypes.string,
 129         onSelect: React.PropTypes.func,
 130         onMigrate: React.PropTypes.func
 131 };
 132
 133 export default CatalogItemDetails;
 134