X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FCatalogItems.js;h=1735dbc7b1f160f53c419006db25ecfe7ca6ab6d;hp=78a18e04c06958e1a90a29ad5917adbc59e3e456;hb=refs%2Ftags%2Fv3.0.0rc2;hpb=f2dc2462571800e62cba969964de621dca09299c

diff --git a/skyquake/plugins/composer/src/src/components/CatalogItems.js b/skyquake/plugins/composer/src/src/components/CatalogItems.js
index 78a18e04c..1735dbc7b 100644
--- a/skyquake/plugins/composer/src/src/components/CatalogItems.js
+++ b/skyquake/plugins/composer/src/src/components/CatalogItems.js
@@ -31,6 +31,29 @@ import SelectionManager from '../libraries/SelectionManager'
 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() {
@@ -54,17 +77,7 @@ const CatalogItems = React.createClass({
 	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';
@@ -78,7 +91,18 @@ const CatalogItems = React.createClass({
 			// 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';
@@ -88,8 +112,6 @@ const CatalogItems = React.createClass({
 			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';
@@ -104,13 +126,13 @@ const CatalogItems = React.createClass({
 							{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>
@@ -126,21 +148,6 @@ const CatalogItems = React.createClass({
 			</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) => {