RIFT-15032: launchpad UI - Viewport - icons for nsr

Signed-off-by: KIRAN KASHALKAR <kiran.kashalkar@riftio.com>

diff --git a/skyquake/framework/utils/utils.js b/skyquake/framework/utils/utils.js
index 7442027..8a54ff3 100644 (file)
--- a/skyquake/framework/utils/utils.js
+++ b/skyquake/framework/utils/utils.js
@@ -295,4 +295,20 @@ Utils.arrayIntersperse = (arr, sep) => {
     }, [arr[0]]);
 }
 
+Utils.cleanImageDataURI = (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 '/composer/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');
+}
+
 module.exports = Utils;

diff --git a/skyquake/plugins/launchpad/src/instantiate/catalogCard.jsx b/skyquake/plugins/launchpad/src/instantiate/catalogCard.jsx
index d44bd2e..cf17fc5 100644 (file)
--- a/skyquake/plugins/launchpad/src/instantiate/catalogCard.jsx
+++ b/skyquake/plugins/launchpad/src/instantiate/catalogCard.jsx
@@ -18,6 +18,7 @@
 import './catalogCard.scss';
 import 'style/common.scss';
 import React, {Component} from 'react';
+import Utils from 'utils/utils.js'
 export default class CatalogCard extends Component {
     constructor(props) {
         super(props);
@@ -66,7 +67,7 @@ export default class CatalogCard extends Component {
                                     <div key={i} className="details-section-item">
                                         <img
                                             onError={self.handleImageError}
-                                            src={cleanDataURI(descriptor.logo, 'vnfd', descriptor.id)}
+                                            src={Utils.cleanImageDataURI(descriptor.logo, 'vnfd', descriptor.id)}
                                         />
                                         {v['name']}
                                     </div>
@@ -125,7 +126,7 @@ export default class CatalogCard extends Component {
         className = "CatalogCard " + buildClass(this.props);
         return (
             <div className={className} onClick={props.onClick} onDoubleClick={props.onDoubleClick}>
-                <img className="CatalogCard-thumbnail"  onError={this.handleImageError} src={cleanDataURI(descriptor.logo, 'nsd', descriptor.id)} />
+                <img className="CatalogCard-thumbnail"  onError={this.handleImageError} src={Utils.cleanImageDataURI(descriptor.logo, 'nsd', descriptor.id)} />
                 <div className="CatalogCard-body">
                     <div className="CatalogCard-header">
                         <div className="CatalogCard-name">
@@ -178,19 +179,3 @@ function cardHandler(element) {
         ''
     }
 }
-
-function 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 '/composer/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');
-    }

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.jsx
index d7a86d4..6c76501 100644 (file)
--- a/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.jsx
@@ -20,13 +20,18 @@ import React from 'react';
 import RecordViewActions from './recordViewActions.js';
 import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
 import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
+import Utils from 'utils/utils.js';
+
 import './recordNavigator.scss';
-import nsdImg from 'style/img/catalog-default.svg';
 
 export default class RecordNavigator extends React.Component{
   constructor(props) {
     super(props)
   }
+  handleImageError = (e) => {
+      console.log('Bad logo path, using default');
+      e.target.src = require('style/img/catalog-default.svg');
+  }
   render(){
     let navClass = 'catalogItems';
 
@@ -53,7 +58,10 @@ export default class RecordNavigator extends React.Component{
           }
           navObj.push(
             <div key={'id' + k + '-' + vnfr.id}  onClick={self.props.loadRecord.bind(self,vnfr)} className={iClassName}>
-              <img src={nsdImg} />
+              <img
+                  onError={self.handleImageError}
+                  src={Utils.cleanImageDataURI(vnfr.logo, vnfr.type, vnfr.id)}
+              />
               <section id={vnfr.id}>
               <h1 title={vnfr.name}>{vnfr.name}</h1>
                 <h2>{vnfr.type}</h2>
@@ -67,7 +75,10 @@ export default class RecordNavigator extends React.Component{
         }
         navObj.push(
           <div key={'id' + k + '-' + n.id}  onClick={self.props.loadRecord.bind(self,n)} className={itemClassName}>
-            <img src={nsdImg} />
+            <img
+                onError={self.handleImageError}
+                src={Utils.cleanImageDataURI(n.logo, n.type, n.id)}
+            />
             <section id={n.id}>
             <h1 title={n.name}>{n.name}</h1>
               <h2>{n.type}</h2>

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js b/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js
index b9fded5..3c44676 100644 (file)
--- a/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js
@@ -407,7 +407,8 @@ function connectionManager(type, connection) {
                 name: nsrs.name,
                 id: nsrs.id,
                 nsd_name: nsrs.nsd_name,
-                type: 'nsr'
+                type: 'nsr',
+                logo: nsrs.nsd && nsrs.nsd.logo
             });
 
             // Scaled VNFRs
@@ -424,10 +425,12 @@ function connectionManager(type, connection) {
 
                     sgInstance['vnfrs'] && sgInstance['vnfrs'].map((vnfr, vnfrIndex) => {
                         scaledVnfrs.push(vnfr);
+                        let vnfrObj = _.findWhere(nsrs.vnfrs, {id: vnfr});
                         scaledVnfNav.vnfr.push({
-                            name: _.findWhere(nsrs.vnfrs, {id: vnfr})['short-name'],
+                            name: vnfrObj['short-name'],
                             id: vnfr,
-                            type: 'vnfr'
+                            type: 'vnfr',
+                            logo: vnfrObj['vnfd'] && vnfrObj['vnfd']['logo']
                         });
                     });
                     nav.push(scaledVnfNav);
@@ -440,7 +443,8 @@ function connectionManager(type, connection) {
                     nav.push({
                         name: vnfr["short-name"],
                         id: vnfr.id,
-                        type: 'vnfr'
+                        type: 'vnfr',
+                        logo: vnfr['vnfd'] && vnfr['vnfd']['logo']
                     });
                 }
             });