update from RIFT as of 696b75d2fe9fb046261b08c616f1bcf6c0b54a9b third try

[osm/UI.git] / skyquake / plugins / composer / src / src / components / CatalogItems.js

diff --git a/skyquake/plugins/composer/src/src/components/CatalogItems.js b/skyquake/plugins/composer/src/src/components/CatalogItems.js
index 78a18e0..1735dbc 100644 (file)
--- 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) => {