skyquake/plugins/launchpad/src/instantiate/catalogCard.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import './catalogCard.scss';
  19 import 'style/common.scss';
  20 import React, {Component} from 'react';
  21 import Utils from 'utils/utils.js'
  22 export default class CatalogCard extends Component {
  23     constructor(props) {
  24         super(props);
  25         this.state = {};
  26         this.state.isExpanded = false;
  27     }
  28     hideIt = (e) => {
  29         document.querySelector('body').removeEventListener('click', this.hideIt);
  30         if(e.target.parentElement.classList.contains('CatalogCard-info--expanded') || e.target.classList.contains('CatalogCard-info--expanded')) {
  31             e.stopPropagation();
  32         }
  33         this.setState({
  34             isExpanded: false
  35         });
  36     }
  37     handleImageError = (e) => {
  38         console.log('Bad logo path, using default');
  39         e.target.src = require('style/img/catalog-default.svg');
  40     }
  41     toggleDetailsDisplay = (e) => {
  42         let self = this;
  43         let isExpanded = this.state.isExpanded;
  44         e.stopPropagation();
  45         if(!isExpanded) {
  46             document.querySelector('body').addEventListener('click', this.hideIt);
  47              self.setState({
  48                 isExpanded: true
  49             });
  50         }
  51     }
  52     detailsHTML = (descriptor) => {
  53         let self = this;
  54         return (
  55             <dd className="details">
  56                 <div className="details-section">
  57                     <div className="details-section-title">
  58                         VNFDs
  59                     </div>
  60                     {
  61                         (
  62                          descriptor['constituent-vnfd'] &&
  63                          (descriptor['constituent-vnfd'].length > 0)
  64                          ) ?
  65                             descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].map(function(v,i) {
  66                                 return (
  67                                     <div key={i} className="details-section-item">
  68                                         <img
  69                                             onError={self.handleImageError}
  70                                             src={Utils.cleanImageDataURI(descriptor.logo, 'vnfd', descriptor.id)}
  71                                         />
  72                                         {v['name']}
  73                                     </div>
  74                                     )
  75                             })
  76                             : 'None'
  77                     }
  78                 </div>
  79                 <div className="details-section">
  80                     <div className="details-section-title">
  81                         VLDs
  82                     </div>
  83                     {
  84                         (
  85                          descriptor['vld'] &&
  86                          (descriptor['vld'].length > 0)
  87                          ) ?
  88                             descriptor['vld'] && descriptor['vld'].map(function(v,i) {
  89                                 return (
  90                                     <div key={i} className="details-section-item">
  91                                         {v['short-name']}
  92                                     </div>
  93                                     )
  94                             })
  95                             : 'None'
  96                     }
  97                 </div>
  98                 <div className="details-section">
  99                     <div className="details-section-title">
 100                         VNFFGDs
 101                     </div>
 102                     {
 103                         (
 104                          descriptor['vnffgd'] &&
 105                          (descriptor['vnffgd'].length > 0)
 106                          ) ?
 107                             descriptor['vnffgd'] && descriptor['vnffgd'].map(function(v,i) {
 108                                 return (
 109                                     <div key={i} className="details-section-item">
 110                                         {v['short-name']}
 111                                     </div>
 112                                     )
 113                             })
 114                             : 'None'
 115                     }
 116                 </div>
 117             </dd>
 118         );
 119     }
 120     componentWillUnmount() {
 121         document.querySelector('body').removeEventListener('click', this.hideIt);
 122     }
 123     render() {
 124         let {className, descriptor, isActive, isOpen, onCloseCard,...props} = this.props;
 125         let openTool = isOpen ? null : <span className="oi CatalogCard-button" data-glyph={isActive ? "circle-x" : "arrow-circle-right"} onClick={isActive ?  onCloseCard : props.onPreviewDescriptor(descriptor)}></span>
 126         className = "CatalogCard " + buildClass(this.props);
 127         return (
 128             <div className={className} onClick={props.onClick} onDoubleClick={props.onDoubleClick}>
 129                 <img className="CatalogCard-thumbnail"  onError={this.handleImageError} src={Utils.cleanImageDataURI(descriptor.logo, 'nsd', descriptor.id)} />
 130                 <div className="CatalogCard-body">
 131                     <div className="CatalogCard-header">
 132                         <div className="CatalogCard-name">
 133                             {descriptor.name}
 134                         </div>
 135                         <div className="CatalogCard-subtitle">
 136                             {descriptor['short-name']}
 137                         </div>
 138                         <div className="CatalogCard-subtitle">
 139                             {descriptor['vendor']} / {descriptor['version']}
 140                         </div>
 141                     </div>
 142                     <div className="CatalogCard-description">
 143                         {descriptor['description']}
 144                     </div>
 145                     <dl className={"CatalogCard-info " + (this.state.isExpanded ? "CatalogCard-info--expanded" : "")} onClick={this.toggleDetailsDisplay}>
 146                         <dt>VNFDs:</dt>
 147                         <dd>{descriptor['constituent-vnfd'] && descriptor['constituent-vnfd'].length || 0}</dd>
 148                         <dt>VLDs:</dt>
 149                         <dd>{descriptor['vld'] && descriptor['vld'].length || 0}</dd>
 150                         <dt>VNFFGDs:</dt>
 151                         <dd>{descriptor['vnffgd'] && descriptor['vnffgd'].length || 0}</dd>
 152                         <dd className="arrow-black--down"></dd>
 153                         {this.detailsHTML(descriptor)}
 154                     </dl>
 155                 </div>
 156                 {openTool}
 157             </div>
 158         )
 159     }
 160 }
 161 CatalogCard.defaultProps = {
 162     className: null,
 163     descriptor: {}
 164 }
 165
 166 function buildClass(props) {
 167     let className = '';
 168     if(props.isSelected) {
 169         className += ' CatalogCard-is-selected';
 170     }
 171     if(props.isActive) {
 172         className += ' CatalogCard-is-active';
 173     }
 174     return className;
 175 }
 176
 177 function cardHandler(element) {
 178     this.handleEvent = function(e) {
 179         ''
 180     }
 181 }