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.
24 import React
from 'react'
25 import Range
from '../Range'
26 import Button
from '../Button'
27 import ClassNames
from 'classnames'
28 import changeCase
from 'change-case'
29 import LayoutRow
from '../LayoutRow'
30 import SelectionManager
from '../../libraries/SelectionManager'
31 import PureRenderMixin
from 'react-addons-pure-render-mixin'
32 import CatalogItemsActions
from '../../actions/CatalogItemsActions'
33 import CanvasEditorActions
from '../../actions/CanvasEditorActions'
34 import DescriptorModelFactory
from '../../libraries/model/DescriptorModelFactory'
35 import ComposerAppActions
from '../../actions/ComposerAppActions'
36 import DescriptorModelMetaFactory
from '../../libraries/model/DescriptorModelMetaFactory'
37 import ComposerAppStore
from '../../stores/ComposerAppStore'
38 import DeletionManager
from '../../libraries/DeletionManager'
39 import ContentEditableDiv
from '../ContentEditableDiv'
40 import TooltipManager
from '../../libraries/TooltipManager'
41 import HighlightRecordServicePaths
from '../../libraries/graph/HighlightRecordServicePaths'
43 import '../../styles/EditForwardingGraphPaths.scss'
45 import imgNSD
from '../../images/default-catalog-icon.svg'
46 import imgFG
from '../../../../node_modules/open-iconic/svg/infinity.svg'
47 import imgRemove
from '../../../../node_modules/open-iconic/svg/trash.svg'
48 import imgAdd
from '../../../../node_modules/open-iconic/svg/plus.svg'
49 import imgConnection
from '../../../../node_modules/open-iconic/svg/random.svg'
50 import imgClassifier
from '../../../../node_modules/open-iconic/svg/spreadsheet.svg'
51 import imgReorder
from '../../../../node_modules/open-iconic/svg/menu.svg'
52 import EditConfigParameterMap
from '../EditConfigParameterMap'
53 function configParameterMapMap(ap
, i
) {
56 context
.vnfapMap
= ap
;
60 <div
>{ap
.capability
['member-vnf-index']}</div
>
61 <div
>{ap
.capability
['capability-ref']}</div
>
66 // const colors = fg.colors;
67 // const stylePrimary = {borderColor: colors.primary};
68 // const styleSecondary = {borderColor: colors.secondary};
70 // context.stylePrimary = stylePrimary;
71 // context.styleSecondary = styleSecondary;
73 // const rspMap = fg.rsp.reduce((map, rsp) => {
75 // rsp.classifier = [];
79 // fg.classifier.forEach(classifier => {
80 // const rsp = rspMap[classifier.model['rsp-id-ref']];
82 // rsp.classifier.push(classifier);
86 // function onClickRemoveForwardingGraph(fg, event) {
87 // event.preventDefault();
88 // const root = fg.getRoot();
90 // CatalogItemsActions.catalogItemDescriptorChanged(root);
93 // function onClickAddClassifier(context, fg, event) {
94 // event.preventDefault();
95 // fg.createClassifier();
96 // CatalogItemsActions.catalogItemDescriptorChanged(fg.getRoot());
99 // function onClickToggleShowAllFGPaths(fg, event) {
100 // //event.preventDefault();
101 // event.stopPropagation();
102 // fg.uiState.showPaths = event.target.checked;
103 // fg.rsp.forEach(rsp => rsp.uiState.showPath = event.target.checked);
104 // CatalogItemsActions.catalogItemMetaDataChanged(fg.getRoot().model);
107 // if (!fg.uiState.hasOwnProperty('showPaths')) {
108 // fg.uiState.showPaths = true;
109 // fg.rsp.forEach(d => d.uiState.showPath = true);
112 // const toggleSelectAllPaths = (
113 // <input type="checkbox" name={'show-path' + fg.uid} checked={fg.uiState.showPaths} onChange={() => {}} onClick={onClickToggleShowAllFGPaths.bind(null, fg)} />
116 // const srpFactory = DescriptorModelFactory.newRecordServicePathFactory({}, fg);
117 // srpFactory.uid = fg.uid + i;
119 // const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
122 // <div key={i} className={fg.className} data-uid={fg.uid} data-offset-width="true" onClick={onClickSelectAndShowInDetailsPanel.bind(null, fg)} onCut={onCutDelegateToRemove.bind(null, fg)}>
123 // <div key="outline-indicator" data-outline-indicator="true"></div>
124 // <div className="header-actions">
125 // <Button className="remove-forwarding-graph" title="Remove" onClick={onClickRemoveForwardingGraph.bind(null, fg)} src={imgRemove}/>
127 // <LayoutRow primaryActionColumn={toggleSelectAllPaths} secondaryActionColumn={<img className="fg-icon" src={imgFG} width="20px" />}>
128 // <small>{fg.title}</small>
131 // <h4>Rendered Service Paths</h4>
132 // {hasServiceFunctionVNFDs ? fg.recordServicePaths.concat(srpFactory).map(mapRecordServicePath.bind(null, context)) : <small className="no-service-function-chain-msg hint">A VNFD with the chain SF is required to build Rendered Service Paths.</small>}
135 // <h4>Classifiers</h4>
136 // {fg.classifier.map(mapClassifier.bind(null, context))}
137 // <div className="footer-actions">
138 // <div className="row-action-column">
139 // <Button className="create-new-classifier" src={imgAdd} width="20px" onClick={onClickAddClassifier.bind(null, context, fg)} label="Add Classifier" />
149 function mapNSD(nsd
, i
) {
151 const context
= this;
154 function onClickAddConfigParameterMap(nsd
, event
) {
155 event
.preventDefault();
156 nsd
.createConfigParameterMap();
157 CatalogItemsActions
.catalogItemDescriptorChanged(nsd
.getRoot());
160 const forwardingGraphs
= nsd
.configParameterMap
.map(configParameterMap
.bind(context
));
161 if (forwardingGraphs
.length
=== 0) {
162 forwardingGraphs
.push(
163 <div key
="1" className
="welcome-message">
164 No Forwarding Graphs to model
.
170 <div key
={i
} className
={nsd
.className
}>
172 <div className
="footer-actions">
173 <div className
="row-action-column">
174 <Button className
="create-new-forwarding-graph" src
={imgAdd
} width
="20px" onClick
={onClickAddConfigParameterMap
.bind(null, nsd
)} label
="Add new Access Point" />
182 const ConfigPrimitiveParameters
= React
.createClass({
183 mixins
: [PureRenderMixin
],
184 getInitialState: function () {
185 return ComposerAppStore
.getState();
187 getDefaultProps: function () {
192 componentWillMount: function () {
194 componentDidMount: function () {
196 componentDidUpdate: function () {
198 componentWillUnmount: function () {
202 const containers
= this.props
.containers
;
205 containers
: containers
208 const networkService
= containers
.filter(d
=> d
.type
=== 'nsd');
209 if (networkService
.length
=== 0) {
210 return <p className
="welcome-message">No
<img src
={imgNSD
} width
="20px" /> NSD open in the canvas. Try opening an NSD.</p>;
213 <div className
="ConfigParameterMap">
215 containers
.map(function(c
, i
) {
216 if(c
.className
== 'ConfigParameterMap') {
217 return <EditConfigParameterMap key
={i
} container
={c
} width
={self
.props
.width
} />
224 // <div className=" -with-transitions" data-offset-parent="true">
225 // <div key="outline-indicator" data-outline-indicator="true"></div>
226 // {containers.filter(d => d.type === 'nsd').map(mapNSD.bind(context))}
235 export default ConfigPrimitiveParameters
;
236 //<EditDescriptorModelProperties container={DescriptorModelMetaFactory.createModelInstanceForType('nsd.vnffgd.rsp')} width={this.props.width} />