skyquake/plugins/composer/src/src/components/EditorForwardingGraph/ConnectionPointSelector.js

   1 /**
   2  * Created by onvelocity on 3/4/16.
   3  */
   4 'use strict';
   5 import React from 'react'
   6 import ClassNames from 'classnames'
   7 import CatalogItemsActions from '../../actions/CatalogItemsActions'
   8 import DescriptorModelFactory from '../../libraries/model/DescriptorModelFactory'
   9 import onHoverHighlightConnectionPoint from './onHoverHighlightConnectionPoint'
  10 import '../../styles/ConnectionPointSelector.scss'
  11 export default function ConnectionPointSelector(props) {
  12
  13         const containers = props.containers || [];
  14         const serviceChain = props.serviceChain || 'SF';
  15         const connectionPointStyle = props.style || {};
  16         const isDisabled = props.isDisabled;
  17         const disabledMessage = props.disabledMessage || '';
  18
  19         // events
  20         const onExitEditPathMode = props.onExitEditPathMode || (() => {});
  21         const onAddConnectionPointRef = props.onAddConnectionPointRef || (() => {});
  22
  23         function mapConnectionPoint(connector) {
  24                 const cpNumber = connector.cpNumber;
  25                 return (
  26                         <div key={connector.uid} className={ClassNames(connector.className, 'connection-point')} style={connectionPointStyle}
  27                                  onClick={onAddConnectionPointRef.bind(null, connector)}
  28                                  onMouseEnter={onHoverHighlightConnectionPoint.bind(null, cpNumber)}
  29                                  onMouseLeave={onHoverHighlightConnectionPoint.bind(null, cpNumber)}><small>cp{cpNumber}</small></div>
  30                 );
  31         }
  32
  33         function mapConnectionPointsForConstituentVnfd(cvnfd, i) {
  34                 return (
  35                         <div key={i} className={ClassNames(cvnfd.className, 'vnfd')}>
  36                                 <small className="vnfd-title">{cvnfd.title}</small>
  37                                 <div className="connectors">
  38                                         {cvnfd.connectors.map(mapConnectionPoint)}
  39                                 </div>
  40                         </div>
  41                 );
  42         }
  43
  44         if (isDisabled) {
  45                 return (<div>{disabledMessage}</div>)
  46         }
  47
  48         return (
  49                 <div className="ConnectionPointSelector selection">
  50                         <div className="vnfd-list">
  51                                 {containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, serviceChain)).map(mapConnectionPointsForConstituentVnfd)}
  52                                 <small className="Button"
  53                                            onClick={onExitEditPathMode}>done
  54                                 </small>
  55                         </div>
  56                 </div>
  57         )
  58
  59 }