X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FConfigPrimitiveParameters%2FConfigPrimitiveParameters.js;h=912895c6363acf4358b89f69f0cfafd65650b255;hb=7a485f58714f7271c9e06782aea598fb4545025f;hp=362106175ee15abd2d4d45f4e2acf3d5a9df00a1;hpb=1065d361f1c1b0c4f1334efe736f2e6e940e7035;p=osm%2FUI.git

diff --git a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
index 362106175..912895c63 100644
--- a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
+++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
@@ -20,6 +20,7 @@
 
 'use strict';
 
+import _ from 'lodash'
 import d3 from 'd3'
 import React from 'react'
 import Range from '../Range'
@@ -49,7 +50,14 @@ import imgAdd from '../../../../node_modules/open-iconic/svg/plus.svg'
 import imgConnection from '../../../../node_modules/open-iconic/svg/random.svg'
 import imgClassifier from '../../../../node_modules/open-iconic/svg/spreadsheet.svg'
 import imgReorder from '../../../../node_modules/open-iconic/svg/menu.svg'
-import EditDescriptorModelProperties from '../EditDescriptorModelProperties'
+import CatalogDataStore from '../../stores/CatalogDataStore'
+import utils from '../../libraries/utils'
+import getEventPath from '../../libraries/getEventPath'
+import guid from '../../libraries/guid'
+
+import '../../styles/EditDescriptorModelProperties.scss'
+import '../../styles/EditConfigParameterMap.scss';
+
 function configParameterMapMap(ap, i) {
 
     const context = this;
@@ -62,87 +70,6 @@ function configParameterMapMap(ap, i) {
 
         </div>
     )
-    /*
-        // const colors = fg.colors;
-        // const stylePrimary = {borderColor: colors.primary};
-        // const styleSecondary = {borderColor: colors.secondary};
-
-        // context.stylePrimary = stylePrimary;
-        // context.styleSecondary = styleSecondary;
-
-        // const rspMap = fg.rsp.reduce((map, rsp) => {
-        //     map[rsp.id] = rsp;
-        //     rsp.classifier = [];
-        //     return map;
-        // }, {});
-
-        // fg.classifier.forEach(classifier => {
-        //     const rsp = rspMap[classifier.model['rsp-id-ref']];
-        //     if (rsp) {
-        //         rsp.classifier.push(classifier);
-        //     }
-        // });
-
-        // function onClickRemoveForwardingGraph(fg, event) {
-        //     event.preventDefault();
-        //     const root = fg.getRoot();
-        //     fg.remove();
-        //     CatalogItemsActions.catalogItemDescriptorChanged(root);
-        // }
-
-        // function onClickAddClassifier(context, fg, event) {
-        //     event.preventDefault();
-        //     fg.createClassifier();
-        //     CatalogItemsActions.catalogItemDescriptorChanged(fg.getRoot());
-        // }
-
-        // function onClickToggleShowAllFGPaths(fg, event) {
-        //     //event.preventDefault();
-        //     event.stopPropagation();
-        //     fg.uiState.showPaths = event.target.checked;
-        //     fg.rsp.forEach(rsp => rsp.uiState.showPath = event.target.checked);
-        //     CatalogItemsActions.catalogItemMetaDataChanged(fg.getRoot().model);
-        // }
-
-        // if (!fg.uiState.hasOwnProperty('showPaths')) {
-        //     fg.uiState.showPaths = true;
-        //     fg.rsp.forEach(d => d.uiState.showPath = true);
-        // }
-
-        // const toggleSelectAllPaths = (
-        //     <input type="checkbox" name={'show-path' + fg.uid} checked={fg.uiState.showPaths} onChange={() => {}} onClick={onClickToggleShowAllFGPaths.bind(null, fg)} />
-        // );
-
-        // const srpFactory = DescriptorModelFactory.newRecordServicePathFactory({}, fg);
-        // srpFactory.uid = fg.uid + i;
-
-        // const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
-
-        // return (
-        //     <div key={i} className={fg.className} data-uid={fg.uid} data-offset-width="true" onClick={onClickSelectAndShowInDetailsPanel.bind(null, fg)} onCut={onCutDelegateToRemove.bind(null, fg)}>
-        //         <div key="outline-indicator" data-outline-indicator="true"></div>
-        //         <div className="header-actions">
-        //             <Button className="remove-forwarding-graph" title="Remove" onClick={onClickRemoveForwardingGraph.bind(null, fg)} src={imgRemove}/>
-        //         </div>
-        //         <LayoutRow primaryActionColumn={toggleSelectAllPaths} secondaryActionColumn={<img className="fg-icon" src={imgFG} width="20px" />}>
-        //             <small>{fg.title}</small>
-        //         </LayoutRow>
-        //         <div>
-        //             <h4>Rendered Service Paths</h4>
-        //             {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>}
-        //         </div>
-        //         <div>
-        //             <h4>Classifiers</h4>
-        //             {fg.classifier.map(mapClassifier.bind(null, context))}
-        //             <div className="footer-actions">
-        //                 <div className="row-action-column">
-        //                     <Button className="create-new-classifier" src={imgAdd} width="20px" onClick={onClickAddClassifier.bind(null, context, fg)} label="Add Classifier" />
-        //                 </div>
-        //             </div>
-        //         </div>
-        //     </div>
-        // );
-    */
 
 }
 
@@ -179,6 +106,17 @@ function mapNSD(nsd, i) {
 
 }
 
+
+function startEditing() {
+        event.stopPropagation();
+        DeletionManager.removeEventListeners();
+    }
+
+function endEditing() {
+    DeletionManager.addEventListeners();
+}
+
+
 const ConfigPrimitiveParameters = React.createClass({
     mixins: [PureRenderMixin],
     getInitialState: function () {
@@ -200,6 +138,9 @@ const ConfigPrimitiveParameters = React.createClass({
     render() {
         const self = this;
         const containers = this.props.containers;
+        let NSContainer = containers.filter(function(c) {
+           return c.className == "NetworkService"
+        })[0]
         const context = {
             component: this,
             containers: containers
@@ -209,28 +150,204 @@ const ConfigPrimitiveParameters = React.createClass({
         if (networkService.length === 0) {
             return <p className="welcome-message">No <img src={imgNSD} width="20px" /> NSD open in the canvas. Try opening an NSD.</p>;
         }
+        let MapData = constructRequestSourceData(containers);
+        let mapCounter = 1;
+
+
+
         return (
                 <div className="ConfigParameterMap">
-                    {
-                        containers.map(function(c, i) {
-                            if(c.className == 'ConfigParameterMap') {
-                                return <EditDescriptorModelProperties key={i} container={c} width={self.props.width} />
+                    <div className="config-parameter-map">
+                        <div className="config-parameter-titles">
+                            <div className="config-parameter">
+                                Request
+                            </div>
+                            <div className="config-parameter">
+                                Source
+                            </div>
+                        </div>
+                        <div className="config-parameter-map">
+                            {
+                                MapData.Requests.map(function(r, i) {
+                                    let currentValue = {};
+                                    let SourceOptions = [<option value={JSON.stringify({
+                                            requestValue: r.name,
+                                            requestIndex: r.vnfdIndex
+                                        })} key="reset">No Source Selected</option>]
+                                    MapData.Sources.map(function(s, j) {
+                                        let value = {
+                                            value: s.name,
+                                            index: s.vnfdIndex,
+                                            requestValue: r.name,
+                                            requestIndex: r.vnfdIndex
+                                        }
+                                        SourceOptions.push(<option value={JSON.stringify(value)} key={`${j}-${i}`} >{`${s.vnfdName} (${s.vnfdIndex}) / ${s.name}`}</option>)
+                                    })
+                                    //Finds current value
+                                    NSContainer.model['config-parameter-map'] && NSContainer.model['config-parameter-map'].map((c)=>{
+                                        if(
+                                            c['config-parameter-request'] &&
+                                            (c['config-parameter-request']['config-parameter-request-ref'] == r.name)
+                                            && (c['config-parameter-request']['member-vnf-index-ref'] == r.vnfdIndex)
+                                           ) {
+                                            currentValue = {
+                                                value: c['config-parameter-source']['config-parameter-source-ref'],
+                                                index: c['config-parameter-source']['member-vnf-index-ref'],
+                                                requestValue: r.name,
+                                                requestIndex: r.vnfdIndex
+                                            };
+                                        }
+                                    })
+                                    currentValue.hasOwnProperty('value') ? mapCounter++ : mapCounter--;
+                                    let currentMapIndex = (mapCounter > 0) ? (mapCounter) - 1: 0;
+                                    return (
+                                            <div key={i} className="EditDescriptorModelProperties -is-tree-view config-parameter config-parameter-group">
+                                                <div  className="config-parameter-request" >{`${r.vnfdName} (${r.vnfdIndex}) / ${r.parameter && r.parameter[0]['config-primitive-name-ref']} / ${r.parameter && r.parameter[0]['config-primitive-parameter-ref']}`}</div>
+                                                <div className="config-parameter-source">
+                                                    <select
+                                                        onChange={onFormFieldValueChanged.bind(NSContainer, i)}
+                                                        onBlur={endEditing}
+                                                        onMouseDown={startEditing}
+                                                        onMouseOver={startEditing}
+                                                        value={JSON.stringify(currentValue)}
+                                                         >
+                                                        }
+                                                        {SourceOptions}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                    )
+                                })
                             }
-                        })
-                    }
+                        </div>
+                    </div>
                 </div>
         )
-        // return (
-        //     <div className=" -with-transitions" data-offset-parent="true">
-        //         <div key="outline-indicator" data-outline-indicator="true"></div>
-        //         {containers.filter(d => d.type === 'nsd').map(mapNSD.bind(context))}
-        //     </div>
-        // );
-
     }
 });
 
+    function onFormFieldValueChanged(index, event) {
+        if (DescriptorModelFactory.isContainer(this)) {
+            event.preventDefault();
+            const name = event.target.name;
+            const value = JSON.parse(event.target.value);
+
+            let ConfigMap = utils.resolvePath(this.model, 'config-parameter-map');
+            let ConfigMapIndex = false;
+            let id = guid().substring(0, 8);
+            //Check current map, if request is present, assign map index.
+            ConfigMap.map(function(c, i) {
+                let req = c['config-parameter-request'];
+                if((req['config-parameter-request-ref'] == value.requestValue) &&
+                   (req['member-vnf-index-ref'] == value.requestIndex)) {
+                    ConfigMapIndex = i;
+                    id = c.id;
+                }
+            });
+            if(!ConfigMapIndex && _.isBoolean(ConfigMapIndex)) {
+                ConfigMapIndex = ConfigMap.length;
+            }
+            if(value.value) {
+                utils.assignPathValue(this.model, 'config-parameter-map.' + ConfigMapIndex + '.config-parameter-source.config-parameter-source-ref', value.value);
+                utils.assignPathValue(this.model, 'config-parameter-map.' + ConfigMapIndex + '.config-parameter-source.member-vnf-index-ref', value.index);
+                utils.assignPathValue(this.model, 'config-parameter-map.' + ConfigMapIndex + '.config-parameter-request.config-parameter-request-ref', value.requestValue);
+                utils.assignPathValue(this.model, 'config-parameter-map.' + ConfigMapIndex + '.config-parameter-request.member-vnf-index-ref', value.requestIndex);
+                utils.assignPathValue(this.model, 'config-parameter-map.' + ConfigMapIndex + '.id', id);
+                CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
+            } else {
+                utils.removePathValue(this.model, 'config-parameter-map.' + ConfigMapIndex)
+                CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
+
+            }
+        }
+    }
+
+
+//Values from
+//
+
+//To update
+//Container:NSD
+//path
+//["config-parameter", "config-parameter-source"]
+//{config-parameter-source-ref: "service_port", member-vnf-index-ref: 2}
+
+function constructRequestSourceData(containers) {
+    let cds = CatalogDataStore;
+    let catalogs = cds.getTransientCatalogs();
+    let Requests = [];
+    let Sources = [];
+    let vnfdData = {
+        index:[],
+        vnfdIDs:[],
+        indexRefs: {},
+        vnfdRefs:{}
+    };
+
+    //Init VNFD map
+    //{
+    //
+    //  index:[1], //member-vnfd-index-ref
+    //  vnfdIDs:[],
+    //  indexRefs: {
+    //      1: vnfdID
+    //  },
+    //  vnfdRefs: {
+    //      {1.id} : {...}
+    //  }
+    //}
+
+    containers.map(function(c, i) {
+        if(c.className == 'ConstituentVnfd') {
+            vnfdData.index.push(c.vnfdIndex);
+            vnfdData.vnfdIDs.push(c.vnfdId);
+            vnfdData.indexRefs[c.vnfdIndex] = c.vnfdId;
+            vnfdData.vnfdRefs[c.vnfdId] = {
+                id: c.vnfdId,
+                name: c.name,
+                'short-name': c['short-name']
+            };
+        }
+    });
+
+    //Decorate VNFDMap with descriptor data;
+    catalogs[1].descriptors
+        .filter((v) => vnfdData.vnfdIDs.indexOf(v.id) > -1)
+        .map(constructVnfdMap.bind(this, vnfdData));
+
+
+    vnfdData.index.map(function(vnfdIndex) {
+        let vnfdId = vnfdData.indexRefs[vnfdIndex];
+        let vnfd = vnfdData.vnfdRefs[vnfdId];
+        let vnfdShortName = vnfd['short-name'];
+        vnfd.requests && vnfd.requests.map(function(request) {
+            Requests.push(_.merge({
+                            id: vnfdId,
+                            vnfdIndex: vnfdIndex,
+                            vnfdName: vnfdShortName,
+                        }, request))
+        });
+        vnfd.sources && vnfd.sources.map(function(source) {
+            Sources.push(_.merge({
+                            id: vnfdId,
+                            vnfdIndex: vnfdIndex,
+                            vnfdName: vnfdShortName,
+                        }, source));
+        });
+    })
+
+    return {Requests, Sources};
+
+    function constructVnfdMap(vnfdData, vnfd) {
+        let data = {
+            requests: vnfd['config-parameter']['config-parameter-request'],
+            sources: vnfd['config-parameter']['config-parameter-source']
+        };
+        vnfdData.vnfdRefs[vnfd.id] =  _.merge(vnfdData.vnfdRefs[vnfd.id], data);
+    }
+
+}
+
 
 
 export default ConfigPrimitiveParameters;
-//<EditDescriptorModelProperties container={DescriptorModelMetaFactory.createModelInstanceForType('nsd.vnffgd.rsp')} width={this.props.width} />