2 * Created by onvelocity on 3/4/16.
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
) {
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
|| '';
20 const onExitEditPathMode
= props
.onExitEditPathMode
|| (() => {});
21 const onAddConnectionPointRef
= props
.onAddConnectionPointRef
|| (() => {});
23 function mapConnectionPoint(connector
) {
24 const cpNumber
= connector
.cpNumber
;
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>
33 function mapConnectionPointsForConstituentVnfd(cvnfd
, i
) {
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
)}
45 return (<div
>{disabledMessage
}</div
>)
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