skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   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
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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.
  17  *
  18  */
  19
  20
  21 'use strict';
  22
  23 import _ from 'lodash'
  24 import d3 from 'd3'
  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'
  43
  44 import '../../styles/EditForwardingGraphPaths.scss'
  45
  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'
  57
  58 import '../../styles/EditDescriptorModelProperties.scss'
  59 import '../../styles/EditConfigParameterMap.scss';
  60
  61 function configParameterMapMap(ap, i) {
  62
  63     const context = this;
  64     context.vnfapMap = ap;
  65     return (
  66         <div key={i}>
  67         <div>{ap.id}</div>
  68         <div>{ap.capability['member-vnf-index']}</div>
  69         <div>{ap.capability['capability-ref']}</div>
  70
  71         </div>
  72     )
  73
  74 }
  75
  76 function mapNSD(nsd, i) {
  77
  78     const context = this;
  79     context.nsd = nsd;
  80
  81     function onClickAddConfigParameterMap(nsd, event) {
  82         event.preventDefault();
  83         nsd.createConfigParameterMap();
  84         CatalogItemsActions.catalogItemDescriptorChanged(nsd.getRoot());
  85     }
  86
  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.
  92             </div>
  93         );
  94     }
  95
  96     return (
  97         <div key={i} className={nsd.className}>
  98             {forwardingGraphs}
  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" />
 102                 </div>
 103             </div>
 104         </div>
 105     );
 106
 107 }
 108
 109
 110 function startEditing() {
 111         event.stopPropagation();
 112         DeletionManager.removeEventListeners();
 113     }
 114
 115 function endEditing() {
 116     DeletionManager.addEventListeners();
 117 }
 118
 119
 120 const ConfigPrimitiveParameters = React.createClass({
 121     mixins: [PureRenderMixin],
 122     getInitialState: function () {
 123         return ComposerAppStore.getState();
 124     },
 125     getDefaultProps: function () {
 126         return {
 127             containers: []
 128         };
 129     },
 130     componentWillMount: function () {
 131     },
 132     componentDidMount: function () {
 133     },
 134     componentDidUpdate: function () {
 135     },
 136     componentWillUnmount: function () {
 137     },
 138     render() {
 139         const self = this;
 140         const containers = this.props.containers;
 141         let NSContainer = containers.filter(function(c) {
 142            return c.className == "NetworkService"
 143         })[0]
 144         const context = {
 145             component: this,
 146             containers: containers
 147         };
 148
 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>;
 152         }
 153         let MapData = constructRequestSourceData(containers);
 154         let mapCounter = 1;
 155
 156
 157
 158         return (
 159                 <div className="ConfigParameterMap">
 160
 161                         <div className="config-parameter-map">
 162                             <div className="config-parameter-titles">
 163                                 <div className="config-parameter">
 164                                     Primitive Parameter Request
 165                                 </div>
 166                                 <div className="config-parameter">
 167                                     Data Source
 168                                 </div>
 169                             </div>
 170                             {
 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) {
 178                                         let value = {
 179                                             value: s.name,
 180                                             index: s.vnfdIndex,
 181                                             requestValue: r.name,
 182                                             requestIndex: r.vnfdIndex
 183                                         }
 184                                         if (r.vnfdIndex !== s.vnfdIndex) {
 185                                             SourceOptions.push(<option value={JSON.stringify(value)} key={`${j}-${i}`} >{`${s.vnfdName} (${s.vnfdIndex}): ${s.name}`}</option>)
 186                                         }
 187                                     })
 188                                     //Finds current value
 189                                     NSContainer.model['config-parameter-map'] && NSContainer.model['config-parameter-map'].map((c)=>{
 190                                         if(
 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)
 194                                            ) {
 195                                             currentValue = {
 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
 200                                             };
 201                                         }
 202                                     })
 203                                     currentValue.hasOwnProperty('value') ? mapCounter++ : mapCounter--;
 204                                     let currentMapIndex = (mapCounter > 0) ? (mapCounter) - 1: 0;
 205                                     return (
 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">
 209                                                     <select
 210                                                         onChange={onFormFieldValueChanged.bind(NSContainer, i)}
 211                                                         onBlur={endEditing}
 212                                                         onMouseDown={startEditing}
 213                                                         onMouseOver={startEditing}
 214                                                         value={JSON.stringify(currentValue)}
 215                                                          >
 216                                                         }
 217                                                         {SourceOptions}
 218                                                     </select>
 219                                                 </div>
 220                                             </div>
 221                                     )
 222                                 })
 223                             }
 224                         </div>
 225                 </div>
 226         )
 227     }
 228 });
 229
 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);
 235
 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)) {
 244                     ConfigMapIndex = i;
 245                     id = c.id;
 246                 }
 247             });
 248             if(!ConfigMapIndex && _.isBoolean(ConfigMapIndex)) {
 249                 ConfigMapIndex = ConfigMap.length;
 250             }
 251             if(value.value) {
 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());
 258             } else {
 259                 utils.removePathValue(this.model, 'config-parameter-map.' + ConfigMapIndex)
 260                 CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
 261
 262             }
 263         }
 264     }
 265
 266
 267 //Values from
 268 //
 269
 270 //To update
 271 //Container:NSD
 272 //path
 273 //["config-parameter", "config-parameter-source"]
 274 //{config-parameter-source-ref: "service_port", member-vnf-index-ref: 2}
 275
 276 function constructRequestSourceData(containers) {
 277     let cds = CatalogDataStore;
 278     let catalogs = cds.getTransientCatalogs();
 279     let Requests = [];
 280     let Sources = [];
 281     let vnfdData = {
 282         index:[],
 283         vnfdIDs:[],
 284         indexRefs: {},
 285         vnfdRefs:{}
 286     };
 287
 288     //Init VNFD map
 289     //{
 290     //
 291     //  index:[1], //member-vnfd-index-ref
 292     //  vnfdIDs:[],
 293     //  indexRefs: {
 294     //      1: vnfdID
 295     //  },
 296     //  vnfdRefs: {
 297     //      {1.id} : {...}
 298     //  }
 299     //}
 300
 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] = {
 307                 id: c.vnfdId,
 308                 name: c.name,
 309                 'short-name': c['short-name']
 310             };
 311         }
 312     });
 313
 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));
 318
 319
 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({
 326                             id: vnfdId,
 327                             vnfdIndex: vnfdIndex,
 328                             vnfdName: vnfdShortName,
 329                         }, request))
 330         });
 331         vnfd.sources && vnfd.sources.map(function(source) {
 332             Sources.push(_.merge({
 333                             id: vnfdId,
 334                             vnfdIndex: vnfdIndex,
 335                             vnfdName: vnfdShortName,
 336                         }, source));
 337         });
 338     })
 339
 340     return {Requests, Sources};
 341
 342     function constructVnfdMap(vnfdData, vnfd) {
 343         let data = {
 344             requests: vnfd['config-parameter'] && vnfd['config-parameter']['config-parameter-request'],
 345             sources: vnfd['config-parameter'] && vnfd['config-parameter']['config-parameter-source']
 346         };
 347         vnfdData.vnfdRefs[vnfd.id] =  _.merge(vnfdData.vnfdRefs[vnfd.id], data);
 348     }
 349
 350 }
 351
 352
 353
 354 export default ConfigPrimitiveParameters;