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 d3 from 'd3'
  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'
  42
  43 import '../../styles/EditForwardingGraphPaths.scss'
  44
  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) {
  54
  55     const context = this;
  56     context.vnfapMap = ap;
  57     return (
  58         <div key={i}>
  59         <div>{ap.id}</div>
  60         <div>{ap.capability['member-vnf-index']}</div>
  61         <div>{ap.capability['capability-ref']}</div>
  62
  63         </div>
  64     )
  65
  66 }
  67
  68 function mapNSD(nsd, i) {
  69
  70     const context = this;
  71     context.nsd = nsd;
  72
  73     function onClickAddConfigParameterMap(nsd, event) {
  74         event.preventDefault();
  75         nsd.createConfigParameterMap();
  76         CatalogItemsActions.catalogItemDescriptorChanged(nsd.getRoot());
  77     }
  78
  79     const forwardingGraphs = nsd.configParameterMap.map(configParameterMap.bind(context));
  80     if (forwardingGraphs.length === 0) {
  81         forwardingGraphs.push(
  82             <div key="1" className="welcome-message">
  83                 No Forwarding Graphs to model.
  84             </div>
  85         );
  86     }
  87
  88     return (
  89         <div key={i} className={nsd.className}>
  90             {forwardingGraphs}
  91             <div className="footer-actions">
  92                 <div className="row-action-column">
  93                     <Button className="create-new-forwarding-graph" src={imgAdd} width="20px" onClick={onClickAddConfigParameterMap.bind(null, nsd)} label="Add new Access Point" />
  94                 </div>
  95             </div>
  96         </div>
  97     );
  98
  99 }
 100
 101 const ConfigPrimitiveParameters = React.createClass({
 102     mixins: [PureRenderMixin],
 103     getInitialState: function () {
 104         return ComposerAppStore.getState();
 105     },
 106     getDefaultProps: function () {
 107         return {
 108             containers: []
 109         };
 110     },
 111     componentWillMount: function () {
 112     },
 113     componentDidMount: function () {
 114     },
 115     componentDidUpdate: function () {
 116     },
 117     componentWillUnmount: function () {
 118     },
 119     render() {
 120         const self = this;
 121         const containers = this.props.containers;
 122         const context = {
 123             component: this,
 124             containers: containers
 125         };
 126
 127         const networkService = containers.filter(d => d.type === 'nsd');
 128         if (networkService.length === 0) {
 129             return <p className="welcome-message">No <img src={imgNSD} width="20px" /> NSD open in the canvas. Try opening an NSD.</p>;
 130         }
 131         return (
 132                 <div className="ConfigParameterMap">
 133                     <div className="config-parameter-map">
 134                         <div className="config-parameter-titles">
 135                             <div className="config-parameter">
 136                                 Request
 137                             </div>
 138                             <div className="config-parameter">
 139                                 Source
 140                             </div>
 141                         </div>
 142                         {
 143                             containers.map(function(c, i) {
 144                                 if(c.className == 'ConfigParameterMap') {
 145                                     return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
 146                                 }
 147                             })
 148                         }
 149                         <div className="toggle-bottom-spacer" style={{visibility: 'hidden', 'height': '50%', position: 'absolute'}}>We need this so when the user closes the panel it won't shift away and scare the bj out of them!</div>
 150                     </div>
 151                 </div>
 152         )
 153     }
 154 });
 155
 156
 157
 158 export default ConfigPrimitiveParameters;
 159 //<EditDescriptorModelProperties container={DescriptorModelMetaFactory.createModelInstanceForType('nsd.vnffgd.rsp')} width={this.props.width} />