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         // const colors = fg.colors;
  67         // const stylePrimary = {borderColor: colors.primary};
  68         // const styleSecondary = {borderColor: colors.secondary};
  69
  70         // context.stylePrimary = stylePrimary;
  71         // context.styleSecondary = styleSecondary;
  72
  73         // const rspMap = fg.rsp.reduce((map, rsp) => {
  74         //     map[rsp.id] = rsp;
  75         //     rsp.classifier = [];
  76         //     return map;
  77         // }, {});
  78
  79         // fg.classifier.forEach(classifier => {
  80         //     const rsp = rspMap[classifier.model['rsp-id-ref']];
  81         //     if (rsp) {
  82         //         rsp.classifier.push(classifier);
  83         //     }
  84         // });
  85
  86         // function onClickRemoveForwardingGraph(fg, event) {
  87         //     event.preventDefault();
  88         //     const root = fg.getRoot();
  89         //     fg.remove();
  90         //     CatalogItemsActions.catalogItemDescriptorChanged(root);
  91         // }
  92
  93         // function onClickAddClassifier(context, fg, event) {
  94         //     event.preventDefault();
  95         //     fg.createClassifier();
  96         //     CatalogItemsActions.catalogItemDescriptorChanged(fg.getRoot());
  97         // }
  98
  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);
 105         // }
 106
 107         // if (!fg.uiState.hasOwnProperty('showPaths')) {
 108         //     fg.uiState.showPaths = true;
 109         //     fg.rsp.forEach(d => d.uiState.showPath = true);
 110         // }
 111
 112         // const toggleSelectAllPaths = (
 113         //     <input type="checkbox" name={'show-path' + fg.uid} checked={fg.uiState.showPaths} onChange={() => {}} onClick={onClickToggleShowAllFGPaths.bind(null, fg)} />
 114         // );
 115
 116         // const srpFactory = DescriptorModelFactory.newRecordServicePathFactory({}, fg);
 117         // srpFactory.uid = fg.uid + i;
 118
 119         // const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
 120
 121         // return (
 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}/>
 126         //         </div>
 127         //         <LayoutRow primaryActionColumn={toggleSelectAllPaths} secondaryActionColumn={<img className="fg-icon" src={imgFG} width="20px" />}>
 128         //             <small>{fg.title}</small>
 129         //         </LayoutRow>
 130         //         <div>
 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>}
 133         //         </div>
 134         //         <div>
 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" />
 140         //                 </div>
 141         //             </div>
 142         //         </div>
 143         //     </div>
 144         // );
 145     */
 146
 147 }
 148
 149 function mapNSD(nsd, i) {
 150
 151     const context = this;
 152     context.nsd = nsd;
 153
 154     function onClickAddConfigParameterMap(nsd, event) {
 155         event.preventDefault();
 156         nsd.createConfigParameterMap();
 157         CatalogItemsActions.catalogItemDescriptorChanged(nsd.getRoot());
 158     }
 159
 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.
 165             </div>
 166         );
 167     }
 168
 169     return (
 170         <div key={i} className={nsd.className}>
 171             {forwardingGraphs}
 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" />
 175                 </div>
 176             </div>
 177         </div>
 178     );
 179
 180 }
 181
 182 const ConfigPrimitiveParameters = React.createClass({
 183     mixins: [PureRenderMixin],
 184     getInitialState: function () {
 185         return ComposerAppStore.getState();
 186     },
 187     getDefaultProps: function () {
 188         return {
 189             containers: []
 190         };
 191     },
 192     componentWillMount: function () {
 193     },
 194     componentDidMount: function () {
 195     },
 196     componentDidUpdate: function () {
 197     },
 198     componentWillUnmount: function () {
 199     },
 200     render() {
 201         const self = this;
 202         const containers = this.props.containers;
 203         const context = {
 204             component: this,
 205             containers: containers
 206         };
 207
 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>;
 211         }
 212         return (
 213                 <div className="ConfigParameterMap">
 214                     {
 215                         containers.map(function(c, i) {
 216                             if(c.className == 'ConfigParameterMap') {
 217                                 return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
 218                             }
 219                         })
 220                     }
 221                 </div>
 222         )
 223         // return (
 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))}
 227         //     </div>
 228         // );
 229
 230     }
 231 });
 232
 233
 234
 235 export default ConfigPrimitiveParameters;
 236 //<EditDescriptorModelProperties container={DescriptorModelMetaFactory.createModelInstanceForType('nsd.vnffgd.rsp')} width={this.props.width} />