import '../styles/CatalogItems.scss'
import imgFile from 'file!../images/vendor-riftio.png'
+const DEFAULT_NSD_ICON = require('style/img/catalog-nsd-default.svg');
+const DEFAULT_VNFD_ICON = require('style/img/catalog-vnfd-default.svg');
+const DEFAULT_ICON = require('style/img/catalog-default.svg');
+
+function renderVersion (version) {
+ if (version) {
+ return (<span className='version'>{version}</span>);
+ } // else return null by default
+};
+function getImageErrorHandler (type) {
+ return type === 'nsd' ? handleNsdImageError : type === 'vnfd' ? handleVnfdImageError : handleImageError;
+}
+function handleImageError (e, image) {
+ console.log('Bad logo path, using default');
+ e.target.src = image || DEFAULT_ICON;
+};
+function handleNsdImageError (e) {
+ handleImageError(e, DEFAULT_NSD_ICON);
+};
+function handleVnfdImageError (e) {
+ handleImageError(e, DEFAULT_VNFD_ICON);
+};
+
const CatalogItems = React.createClass({
mixins: [PureRenderMixin],
getInitialState() {
onChange(state) {
this.setState(state);
},
- renderVersion(version) {
- if (version) {
- return (<span className='version'>{version}</span>);
- } // else return null by default
- },
- handleImageError(e) {
- console.log('Bad logo path, using default');
- e.target.src = require('style/img/catalog-default.svg');
- },
render() {
- const self = this;
const onDragStart = function(event) {
const data = {type: 'catalog-item', item: this};
event.dataTransfer.effectAllowed = 'copy';
// single clicking an item is handled by ComposerApp::onClick handler
//CatalogItemsActions.selectCatalogItem(this);
};
- const cleanDataURI = this.cleanDataURI;
+ const cleanDataURI = function (imageString, type, id) {
+ if (/\bbase64\b/g.test(imageString)) {
+ return imageString;
+ } else if (/<\?xml\b/g.test(imageString)) {
+ const imgStr = imageString.substring(imageString.indexOf('<?xml'));
+ return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(imgStr);
+ } else if (/\.(svg|png|gif|jpeg|jpg)$/.test(imageString)) {
+ return 'assets/logos/' + type + '/' + id + '/' + imageString;
+ // return require('../images/logos/' + imageString);
+ }
+ return type === 'nsd' ? DEFAULT_NSD_ICON : type === 'vnfd' ? DEFAULT_VNFD_ICON : DEFAULT_ICON;
+ }
const items = this.getCatalogItems().map(function (d) {
const isNSD = d.uiState.type === 'nsd';
const isVNFD = d.uiState.type === 'vnfd';
const isOpenForEdit = d.uiState.isOpenForEdit;
const spanClassNames = ClassNames({'-is-selected': isSelected, '-is-open-for-edit': isOpenForEdit});
const sectionClassNames = ClassNames('catalog-item', {'-is-modified': isModified, '-is-deleted': isDeleted});
- const instanceCount = d.uiState['instance-ref-count'];
- const instanceCountLabel = isNSD && instanceCount ? <span>({instanceCount})</span> : null;
let type;
if(isNSD) {
type = 'nsd';
{isModified ? <div className="-is-modified-indicator" title="This descriptor has changes."></div> : null}
<div className="type-header">{type}</div>
<dl>
- <dt className="name">{d.name} {instanceCountLabel}</dt>
+ <dt className="name">{d.name}</dt>
<dd className="logo">
- <img className="logo" src={cleanDataURI(d['logo'], type, d.id)} draggable="false" onError={self.handleImageError} />
+ <img className="logo" src={cleanDataURI(d['logo'], type, d.id)} draggable="false" onError={getImageErrorHandler(type)} />
</dd>
<dd className="short-name" title={d.name}>{d['short-name']}</dd>
<dd className="description">{d.description}</dd>
- <dd className="vendor">{d.vendor || d.provider} {self.renderVersion(d.version)}</dd>
+ <dd className="vendor">{d.vendor || d.provider} {renderVersion(d.version)}</dd>
</dl>
</div>
</div>
</div>
);
},
- cleanDataURI(imageString, type, id) {
- if (/\bbase64\b/g.test(imageString)) {
- return imageString;
- } else if (/<\?xml\b/g.test(imageString)) {
- const imgStr = imageString.substring(imageString.indexOf('<?xml'));
- return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(imgStr);
- } else if (/\.(svg|png|gif|jpeg|jpg)$/.test(imageString)) {
- return 'assets/logos/' + type + '/' + id + '/' + imageString;
- // return require('../images/logos/' + imageString);
- }
- if(type == 'nsd' || type == 'vnfd') {
- return require('style/img/catalog-'+type+'-default.svg');
- }
- return require('style/img/catalog-default.svg');
- },
getCatalogItems() {
const catalogFilter = (d) => {return d.type === this.props.filterByType};
return this.state.catalogs.filter(catalogFilter).reduce((result, catalog) => {