4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
23 import _
from 'lodash'
25 import React
from 'react'
26 import Range
from '../Range'
27 import Button
from '../Button'
28 import ClassNames
from 'classnames'
29 import changeCase
from 'change-case'
30 import LayoutRow
from '../LayoutRow'
31 import SelectionManager
from '../../libraries/SelectionManager'
32 import PureRenderMixin
from 'react-addons-pure-render-mixin'
33 import CatalogItemsActions
from '../../actions/CatalogItemsActions'
34 import CanvasEditorActions
from '../../actions/CanvasEditorActions'
35 import DescriptorModelFactory
from '../../libraries/model/DescriptorModelFactory'
36 import ComposerAppActions
from '../../actions/ComposerAppActions'
37 import DescriptorModelMetaFactory
from '../../libraries/model/DescriptorModelMetaFactory'
38 import ComposerAppStore
from '../../stores/ComposerAppStore'
39 import DeletionManager
from '../../libraries/DeletionManager'
40 import ContentEditableDiv
from '../ContentEditableDiv'
41 import TooltipManager
from '../../libraries/TooltipManager'
42 import HighlightRecordServicePaths
from '../../libraries/graph/HighlightRecordServicePaths'
44 import '../../styles/EditForwardingGraphPaths.scss'
46 import imgNSD
from '../../images/default-catalog-icon.svg'
47 import imgFG
from '../../../../node_modules/open-iconic/svg/infinity.svg'
48 import imgRemove
from '../../../../node_modules/open-iconic/svg/trash.svg'
49 import imgAdd
from '../../../../node_modules/open-iconic/svg/plus.svg'
50 import imgConnection
from '../../../../node_modules/open-iconic/svg/random.svg'
51 import imgClassifier
from '../../../../node_modules/open-iconic/svg/spreadsheet.svg'
52 import imgReorder
from '../../../../node_modules/open-iconic/svg/menu.svg'
53 import CatalogDataStore
from '../../stores/CatalogDataStore'
54 import utils
from '../../libraries/utils'
55 import getEventPath
from '../../libraries/getEventPath'
56 import guid
from '../../libraries/guid'
58 import '../../styles/EditDescriptorModelProperties.scss'
59 import '../../styles/EditConfigParameterMap.scss';
61 function configParameterMapMap(ap
, i
) {
64 context
.vnfapMap
= ap
;
68 <div
>{ap
.capability
['member-vnf-index']}</div
>
69 <div
>{ap
.capability
['capability-ref']}</div
>
76 function mapNSD(nsd
, i
) {
81 function onClickAddConfigParameterMap(nsd
, event
) {
82 event
.preventDefault();
83 nsd
.createConfigParameterMap();
84 CatalogItemsActions
.catalogItemDescriptorChanged(nsd
.getRoot());
87 const forwardingGraphs
= nsd
.configParameterMap
.map(configParameterMap
.bind(context
));
88 if (forwardingGraphs
.length
=== 0) {
89 forwardingGraphs
.push(
90 <div key
="1" className
="welcome-message">
91 No Forwarding Graphs to model
.
97 <div key
={i
} className
={nsd
.className
}>
99 <div className
="footer-actions">
100 <div className
="row-action-column">
101 <Button className
="create-new-forwarding-graph" src
={imgAdd
} width
="20px" onClick
={onClickAddConfigParameterMap
.bind(null, nsd
)} label
="Add new Access Point" />
110 function startEditing() {
111 event
.stopPropagation();
112 DeletionManager
.removeEventListeners();
115 function endEditing() {
116 DeletionManager
.addEventListeners();
120 const ConfigPrimitiveParameters
= React
.createClass({
121 mixins
: [PureRenderMixin
],
122 getInitialState: function () {
123 return ComposerAppStore
.getState();
125 getDefaultProps: function () {
130 componentWillMount: function () {
132 componentDidMount: function () {
134 componentDidUpdate: function () {
136 componentWillUnmount: function () {
140 const containers
= this.props
.containers
;
141 let NSContainer
= containers
.filter(function(c
) {
142 return c
.className
== "NetworkService"
146 containers
: containers
149 const networkService
= containers
.filter(d
=> d
.type
=== 'nsd');
150 if (networkService
.length
=== 0) {
151 return <p className
="welcome-message">No
<img src
={imgNSD
} width
="20px" /> NSD open in the canvas. Try opening an NSD.</p>;
153 let MapData
= constructRequestSourceData(containers
);
159 <div className
="ConfigParameterMap">
161 <div className
="config-parameter-map">
162 <div className
="config-parameter-titles">
163 <div className
="config-parameter">
164 Primitive Parameter Request
166 <div className
="config-parameter">
171 MapData
.Requests
.map(function(r
, i
) {
172 let currentValue
= {};
173 let SourceOptions
= [<option value
={JSON
.stringify({
174 requestValue
: r
.name
,
175 requestIndex
: r
.vnfdIndex
176 })} key
="reset">No Source Selected
</option
>]
177 MapData
.Sources
.map(function(s
, j
) {
181 requestValue
: r
.name
,
182 requestIndex
: r
.vnfdIndex
184 if (r
.vnfdIndex
!== s
.vnfdIndex
) {
185 SourceOptions
.push(<option value
={JSON
.stringify(value
)} key
={`${j}-${i}`} >{`${s.vnfdName} (${s.vnfdIndex}): ${s.name}`}</option
>)
188 //Finds current value
189 NSContainer
.model
['config-parameter-map'] && NSContainer
.model
['config-parameter-map'].map((c
)=>{
191 c
['config-parameter-request'] &&
192 (c
['config-parameter-request']['config-parameter-request-ref'] == r
.name
)
193 && (c
['config-parameter-request']['member-vnf-index-ref'] == r
.vnfdIndex
)
196 value
: c
['config-parameter-source']['config-parameter-source-ref'],
197 index
: c
['config-parameter-source']['member-vnf-index-ref'],
198 requestValue
: r
.name
,
199 requestIndex
: r
.vnfdIndex
203 currentValue
.hasOwnProperty('value') ? mapCounter
++ : mapCounter
--;
204 let currentMapIndex
= (mapCounter
> 0) ? (mapCounter
) - 1: 0;
206 <div key
={i
} className
="EditDescriptorModelProperties -is-tree-view config-parameter config-parameter-group">
207 <div className
="config-parameter-request" >{`${r.vnfdName} (${r.vnfdIndex}): ${r.name}`}</div
>
208 <div className
="config-parameter-source">
210 onChange
={onFormFieldValueChanged
.bind(NSContainer
, i
)}
212 onMouseDown
={startEditing
}
213 onMouseOver
={startEditing
}
214 value
={JSON
.stringify(currentValue
)}
230 function onFormFieldValueChanged(index
, event
) {
231 if (DescriptorModelFactory
.isContainer(this)) {
232 event
.preventDefault();
233 const name
= event
.target
.name
;
234 const value
= JSON
.parse(event
.target
.value
);
236 let ConfigMap
= utils
.resolvePath(this.model
, 'config-parameter-map');
237 let ConfigMapIndex
= false;
238 let id
= guid().substring(0, 8);
239 //Check current map, if request is present, assign map index.
240 ConfigMap
.map(function(c
, i
) {
241 let req
= c
['config-parameter-request'];
242 if((req
['config-parameter-request-ref'] == value
.requestValue
) &&
243 (req
['member-vnf-index-ref'] == value
.requestIndex
)) {
248 if(!ConfigMapIndex
&& _
.isBoolean(ConfigMapIndex
)) {
249 ConfigMapIndex
= ConfigMap
.length
;
252 utils
.assignPathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
+ '.config-parameter-source.config-parameter-source-ref', value
.value
);
253 utils
.assignPathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
+ '.config-parameter-source.member-vnf-index-ref', value
.index
);
254 utils
.assignPathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
+ '.config-parameter-request.config-parameter-request-ref', value
.requestValue
);
255 utils
.assignPathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
+ '.config-parameter-request.member-vnf-index-ref', value
.requestIndex
);
256 utils
.assignPathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
+ '.id', id
);
257 CatalogItemsActions
.catalogItemDescriptorChanged(this.getRoot());
259 utils
.removePathValue(this.model
, 'config-parameter-map.' + ConfigMapIndex
)
260 CatalogItemsActions
.catalogItemDescriptorChanged(this.getRoot());
273 //["config-parameter", "config-parameter-source"]
274 //{config-parameter-source-ref: "service_port", member-vnf-index-ref: 2}
276 function constructRequestSourceData(containers
) {
277 let cds
= CatalogDataStore
;
278 let catalogs
= cds
.getTransientCatalogs();
291 // index:[1], //member-vnfd-index-ref
301 containers
.map(function(c
, i
) {
302 if(c
.className
== 'ConstituentVnfd') {
303 vnfdData
.index
.push(c
.vnfdIndex
);
304 vnfdData
.vnfdIDs
.push(c
.vnfdId
);
305 vnfdData
.indexRefs
[c
.vnfdIndex
] = c
.vnfdId
;
306 vnfdData
.vnfdRefs
[c
.vnfdId
] = {
309 'short-name': c
['short-name']
314 //Decorate VNFDMap with descriptor data;
315 catalogs
[1].descriptors
316 .filter((v
) => vnfdData
.vnfdIDs
.indexOf(v
.id
) > -1)
317 .map(constructVnfdMap
.bind(this, vnfdData
));
320 vnfdData
.index
.map(function(vnfdIndex
) {
321 let vnfdId
= vnfdData
.indexRefs
[vnfdIndex
];
322 let vnfd
= vnfdData
.vnfdRefs
[vnfdId
];
323 let vnfdShortName
= vnfd
['short-name'];
324 vnfd
.requests
&& vnfd
.requests
.map(function(request
) {
325 Requests
.push(_
.merge({
327 vnfdIndex
: vnfdIndex
,
328 vnfdName
: vnfdShortName
,
331 vnfd
.sources
&& vnfd
.sources
.map(function(source
) {
332 Sources
.push(_
.merge({
334 vnfdIndex
: vnfdIndex
,
335 vnfdName
: vnfdShortName
,
340 return {Requests
, Sources
};
342 function constructVnfdMap(vnfdData
, vnfd
) {
344 requests
: vnfd
['config-parameter'] && vnfd
['config-parameter']['config-parameter-request'],
345 sources
: vnfd
['config-parameter'] && vnfd
['config-parameter']['config-parameter-source']
347 vnfdData
.vnfdRefs
[vnfd
.id
] = _
.merge(vnfdData
.vnfdRefs
[vnfd
.id
], data
);
354 export default ConfigPrimitiveParameters
;