diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx new file mode 100644 index 0000000000..c63fbff21b --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx @@ -0,0 +1,134 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import {catalogItemTypeClasses, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js'; +import CatalogTile from './CatalogTile.jsx'; +import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import {statusEnum, statusBarTextMap} from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +import tooltip from './onboardingCatalog/Tooltip.jsx'; + + + +const CatalogTileIcon = ({catalogItemTypeClass}) => ( + <div className={'catalog-tile-icon ' + catalogItemTypeClass}> + <div className='icon'><SVGIcon + name={catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? 'vlm' : 'vsp' }/> + </div> + </div> +); + +const ItemTypeTitle = ({catalogItemTypeClass}) => { + const itemTypeTitle = catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? i18n('VLM') : i18n('VSP'); + return( + <div className={`catalog-tile-type ${catalogItemTypeClass}`}>{itemTypeTitle}</div> + ); +}; + +const CatalogTileVendorName = ({vendorName, catalogItemTypeClass}) => { + const name = catalogItemTypeClass === catalogItemTypeClasses.SOFTWARE_PRODUCT ? vendorName : ''; + return( + <div> + <OverlayTrigger placement='top' overlay={tooltip(name)}> + <div className='catalog-tile-vendor-name'>{name}</div> + </OverlayTrigger> + </div> + ); +}; + +const CatalogTileItemName = ({name}) => ( + <div> + <OverlayTrigger placement='top' overlay={tooltip(name && name.toUpperCase())}> + <div className='catalog-tile-item-name'>{name}</div> + </OverlayTrigger> + </div> +); + +const VersionInfo = ({version}) => ( + <div className='catalog-tile-version-info'> + <div className='catalog-tile-item-version' data-test-id='catalog-item-version'> + V {version} + </div> + </div> +); + +const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => { + const {vendorName, name, version} = catalogItemData; + return ( + <div className='catalog-tile-entity-details'> + <CatalogTileVendorName catalogItemTypeClass={catalogItemTypeClass} vendorName={vendorName}/> + <CatalogTileItemName name={name}/> + <VersionInfo version={version.label} /> + </div> + ); +}; + + +const ItemStatusInfo = ({catalogItemTypeClass, lockingUser, itemStatus}) => { + const status = statusBarTextMap[itemStatus]; + const lockedBy = lockingUser ? ` by ${lockingUser}` : ''; + const toolTipMsg = `${status}${lockedBy}`; + + return ( + <div className={'catalog-tile-content ' + catalogItemTypeClass}> + <div className='catalog-tile-locking-user-name'>{i18n(status)}</div> + <OverlayTrigger placement='top' overlay={tooltip(toolTipMsg)}> + <div className='catalog-tile-check-in-status'><SVGIcon + name={itemStatus === statusEnum.CHECK_OUT_STATUS ? 'unlocked' : 'locked'} + data-test-id={itemStatus === statusEnum.CHECK_IN_STATUS ? 'catalog-item-checked-in' : 'catalog-item-checked-out'}/> + </div> + </OverlayTrigger> + </div> + + ); +}; + +const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => { + + let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser); + + return ( + <CatalogTile catalogItemTypeClass={catalogItemTypeClass} onSelect={() => { + if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) { + onMigrate({ + softwareProduct: catalogItemData + }); + } else { + onSelect(); + } + }} data-test-id={catalogItemTypeClass}> + <div className='catalog-tile-top item-details'> + <ItemTypeTitle catalogItemTypeClass={catalogItemTypeClass}/> + <CatalogTileIcon catalogItemTypeClass={catalogItemTypeClass}/> + <EntityDetails catalogItemTypeClass={catalogItemTypeClass} catalogItemData={catalogItemData} /> + <ItemStatusInfo itemStatus={itemStatus} catalogItemTypeClass={catalogItemTypeClass} lockingUser={catalogItemData.lockingUser} /> + </div> + </CatalogTile> + ); + +}; + +CatalogItemDetails.PropTypes = { + catalogItemData: React.PropTypes.obj, + catalogItemTypeClass: React.PropTypes.string, + onSelect: React.PropTypes.func, + onMigrate: React.PropTypes.func +}; + +export default CatalogItemDetails; + |