From: KIRAN KASHALKAR Date: Wed, 25 Jan 2017 15:50:30 +0000 (-0500) Subject: Merge master -> master_vca_intg X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=commitdiff_plain;h=266adb435d7a60ae758efb28614c80d24c05fbba;hp=d3b3a1c5d521361bfa40dbdec779495eb2bfd8a0 Merge master -> master_vca_intg Signed-off-by: KIRAN KASHALKAR --- diff --git a/skyquake/plugins/composer/api/composer.js b/skyquake/plugins/composer/api/composer.js index 801873a36..23345f5f2 100644 --- a/skyquake/plugins/composer/api/composer.js +++ b/skyquake/plugins/composer/api/composer.js @@ -636,7 +636,7 @@ FileManager.job = function(req) { forever: constants.FOREVER_ON, rejectUnauthorized: false, }, function(error, response, body) { - if (utils.validateResponse('restconfAPI.streams', error, response, body, resolve, reject)) { + if (utils.validateResponse('FileManager.job', error, response, body, resolve, reject)) { var data = JSON.parse(response.body)['rw-pkg-mgmt:download-jobs']; var returnData = []; data && data.job.map(function(d) { diff --git a/skyquake/plugins/composer/src/src/components/CanvasPanel.js b/skyquake/plugins/composer/src/src/components/CanvasPanel.js index cb212cbfa..df4af5bb3 100644 --- a/skyquake/plugins/composer/src/src/components/CanvasPanel.js +++ b/skyquake/plugins/composer/src/src/components/CanvasPanel.js @@ -34,9 +34,9 @@ import CanvasPanelTray from './CanvasPanelTray' import EditForwardingGraphPaths from './EditorForwardingGraph/EditForwardingGraphPaths' import SelectionManager from '../libraries/SelectionManager' import DescriptorModelIconFactory from '../libraries/model/IconFactory' - import FileManager from './filemanager/FileManager.jsx'; +import ConfigPrimitiveParameters from './ConfigPrimitiveParameters/ConfigPrimitiveParameters' import '../styles/CanvasPanel.scss' const CanvasPanel = React.createClass({ @@ -91,6 +91,13 @@ const CanvasPanel = React.createClass({ ) + //CanvasPanelTray panel to display + let displayedPanel = null; + switch (this.props.displayedPanel) { + case 'forwarding' : displayedPanel = (); break; + case 'parameter' : displayedPanel = (); break; + default: displayedPanel = (

Please select a tab

); break; + } return (
@@ -108,8 +115,8 @@ const CanvasPanel = React.createClass({ : null } - - + + {displayedPanel}
); diff --git a/skyquake/plugins/composer/src/src/components/CanvasPanelTray.js b/skyquake/plugins/composer/src/src/components/CanvasPanelTray.js index 57f29a05e..5fde578af 100644 --- a/skyquake/plugins/composer/src/src/components/CanvasPanelTray.js +++ b/skyquake/plugins/composer/src/src/components/CanvasPanelTray.js @@ -16,13 +16,17 @@ export default function (props) { right: props.layout.right, display: props.show ? false : 'none' }; + const PANEL = { + FORWARD: 'forwarding', + PARAMETER: 'parameter' + } const classNames = ClassNames('CanvasPanelTray', {'-with-transitions': !document.body.classList.contains('resizing')}); function onClickToggleOpenClose(event) { if (event.defaultPrevented) return; event.preventDefault(); // don't toggle if the user was resizing if (!uiTransient.isResizing) { - CanvasPanelTrayActions.toggleOpenClose(); + CanvasPanelTrayActions.toggleOpenClose(event); } event.target.removeEventListener('mousemove', onMouseMove, true); } @@ -37,10 +41,29 @@ export default function (props) { const isOpen = style.height > 25; return (
-

Forwarding Graphs

+
+ + + +
+ +
+
{props.children}
); -} \ No newline at end of file +} diff --git a/skyquake/plugins/composer/src/src/components/ComposerApp.js b/skyquake/plugins/composer/src/src/components/ComposerApp.js index b5cfa7528..d626ea431 100644 --- a/skyquake/plugins/composer/src/src/components/ComposerApp.js +++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js @@ -62,215 +62,218 @@ const clearDragState = () => ComposerAppActions.setDragState(null); const ComposerApp = React.createClass({ - mixins: [PureRenderMixin], - getInitialState() { - return ComposerAppStore.getState(); - }, - getDefaultProps() { - return {}; - }, - componentWillMount() { - if (clearLocalStorage) { - window.localStorage.clear(); - } + mixins: [PureRenderMixin], + getInitialState() { + return ComposerAppStore.getState(); + }, + getDefaultProps() { + return {}; + }, + componentWillMount() { + if (clearLocalStorage) { + window.localStorage.clear(); + } if(this.item) { FileManagerActions.openFileManagerSockets(); } - this.state.isLoading = CatalogDataStore.getState().isLoading; - ComposerAppStore.listen(this.onChange); - CatalogDataStore.listen(this.onCatalogDataChanged); - window.addEventListener('resize', this.resize); - window.onbeforeunload = this.onBeforeUnload; - // prevent browser from downloading any drop outside of our specific drop zones - window.addEventListener('dragover', preventDefault); - window.addEventListener('drop', preventDefault); - // ensure drags initiated in the app clear the state on drop - window.addEventListener('drop', clearDragState); - DeletionManager.addEventListeners(); - }, - componentWillUnmount() { - window.removeEventListener('resize', this.resize); - window.removeEventListener('dragover', preventDefault); - window.removeEventListener('drop', preventDefault); - window.removeEventListener('drop', clearDragState); + this.state.isLoading = CatalogDataStore.getState().isLoading; + ComposerAppStore.listen(this.onChange); + CatalogDataStore.listen(this.onCatalogDataChanged); + window.addEventListener('resize', this.resize); + window.onbeforeunload = this.onBeforeUnload; + // prevent browser from downloading any drop outside of our specific drop zones + window.addEventListener('dragover', preventDefault); + window.addEventListener('drop', preventDefault); + // ensure drags initiated in the app clear the state on drop + window.addEventListener('drop', clearDragState); + DeletionManager.addEventListeners(); + }, + componentWillUnmount() { + window.removeEventListener('resize', this.resize); + window.removeEventListener('dragover', preventDefault); + window.removeEventListener('drop', preventDefault); + window.removeEventListener('drop', clearDragState); FileManagerActions.closeFileManagerSockets(); - // resizeManager automatically registered its event handlers - resizeManager.removeAllEventListeners(); - ComposerAppStore.unlisten(this.onChange); - CatalogDataStore.unlisten(this.onCatalogDataChanged); - DeletionManager.removeEventListeners(); - TooltipManager.removeEventListeners(); - }, - componentDidMount() { - resizeManager.addAllEventListeners(); - const snapshot = window.localStorage.getItem('composer'); - if (snapshot) { - alt.bootstrap(snapshot); - } - document.body.addEventListener('keydown', (event) => { - // prevent details editor form from blowing up the app - const ENTER_KEY = 13; - if (event.which === ENTER_KEY) { - event.preventDefault(); - return false; - } - }); - const appRootElement = ReactDOM.findDOMNode(this.refs.appRoot); - TooltipManager.addEventListeners(appRootElement); - SelectionManager.onClearSelection = () => { - if (this.state.item) { - CatalogItemsActions.catalogItemMetaDataChanged.defer(this.state.item); - } - }; - }, - componentDidUpdate() { - if (this.state.fullScreenMode) { - document.body.classList.add('-is-full-screen'); - } else { - document.body.classList.remove('-is-full-screen'); - } - SelectionManager.refreshOutline(); - }, - resize(e) { - PanelResizeAction.resize(e); - }, - getModel() { - let html; - let self = this; - DescriptorModelMetaFactory.init().then(function(){ + // resizeManager automatically registered its event handlers + resizeManager.removeAllEventListeners(); + ComposerAppStore.unlisten(this.onChange); + CatalogDataStore.unlisten(this.onCatalogDataChanged); + DeletionManager.removeEventListeners(); + TooltipManager.removeEventListeners(); + }, + componentDidMount() { + resizeManager.addAllEventListeners(); + const snapshot = window.localStorage.getItem('composer'); + if (snapshot) { + alt.bootstrap(snapshot); + } + document.body.addEventListener('keydown', (event) => { + // prevent details editor form from blowing up the app + const ENTER_KEY = 13; + if (event.which === ENTER_KEY) { + event.preventDefault(); + return false; + } + }); + const appRootElement = ReactDOM.findDOMNode(this.refs.appRoot); + TooltipManager.addEventListeners(appRootElement); + SelectionManager.onClearSelection = () => { + if (this.state.item) { + CatalogItemsActions.catalogItemMetaDataChanged.defer(this.state.item); + } + }; + }, + componentDidUpdate() { + if (this.state.fullScreenMode) { + document.body.classList.add('-is-full-screen'); + } else { + document.body.classList.remove('-is-full-screen'); + } + SelectionManager.refreshOutline(); + }, + resize(e) { + PanelResizeAction.resize(e); + }, + getModel() { + let html; + let self = this; + DescriptorModelMetaFactory.init().then(function(){ - self.setState({ - hasModel: true - }) - }); - }, - render() { - let html = null; - let self = this; - if(this.state.hasModel) { + self.setState({ + hasModel: true + }) + }); + }, + render() { + let html = null; + let self = this; + if(this.state.hasModel) { - function onClickUpdateSelection(event) { - if (event.defaultPrevented) { - return - } - const element = SelectionManager.getClosestElementWithUID(event.target); - if (element) { - SelectionManager.select(element); - SelectionManager.refreshOutline(); - event.preventDefault(); - } else { - SelectionManager.clearSelectionAndRemoveOutline(); - } - } + function onClickUpdateSelection(event) { + if (event.defaultPrevented) { + return + } + const element = SelectionManager.getClosestElementWithUID(event.target); + if (element) { + SelectionManager.select(element); + SelectionManager.refreshOutline(); + event.preventDefault(); + } else { + if(event.target.offsetParent && !event.target.offsetParent.classList.contains("tray-body")) { + SelectionManager.clearSelectionAndRemoveOutline(); + } + } + } - let cpNumber = 0; - let AppHeader = (
- -
); - // AppHeader = null; - const classNames = ClassNames('ComposerApp'); - const isNew = self.state.item && self.state.item.uiState.isNew; - const hasItem = self.state.item && self.state.item.uiState; - const isModified = self.state.item && self.state.item.uiState.modified; - const isEditingNSD = self.state.item && self.state.item.uiState && /nsd/.test(self.state.item.uiState.type); - const isEditingVNFD = self.state.item && self.state.item.uiState && /vnfd/.test(self.state.item.uiState.type); - const containers = [self.state.item].reduce(DescriptorModelFactory.buildCatalogItemFactory(CatalogDataStore.getState().catalogs), []); + let cpNumber = 0; + let AppHeader = (
+ +
); + // AppHeader = null; + const classNames = ClassNames('ComposerApp'); + const isNew = self.state.item && self.state.item.uiState.isNew; + const hasItem = self.state.item && self.state.item.uiState; + const isModified = self.state.item && self.state.item.uiState.modified; + const isEditingNSD = self.state.item && self.state.item.uiState && /nsd/.test(self.state.item.uiState.type); + const isEditingVNFD = self.state.item && self.state.item.uiState && /vnfd/.test(self.state.item.uiState.type); + const containers = [self.state.item].reduce(DescriptorModelFactory.buildCatalogItemFactory(CatalogDataStore.getState().catalogs), []); - containers.filter(d => DescriptorModelFactory.isConnectionPoint(d)).forEach(d => { - d.cpNumber = ++cpNumber; - containers.filter(d => DescriptorModelFactory.isVnfdConnectionPointRef(d)).filter(ref => ref.key === d.key).forEach(ref => ref.cpNumber = d.cpNumber); - }); - const canvasTitle = containers.length ? containers[0].model.name : ''; - const hasNoCatalogs = CatalogDataStore.getState().catalogs.length === 0; - const isLoading = self.state.isLoading; + containers.filter(d => DescriptorModelFactory.isConnectionPoint(d)).forEach(d => { + d.cpNumber = ++cpNumber; + containers.filter(d => DescriptorModelFactory.isVnfdConnectionPointRef(d)).filter(ref => ref.key === d.key).forEach(ref => ref.cpNumber = d.cpNumber); + }); + const canvasTitle = containers.length ? containers[0].model.name : ''; + const hasNoCatalogs = CatalogDataStore.getState().catalogs.length === 0; + const isLoading = self.state.isLoading; //Bridge element for Crouton fix. Should eventually put Composer on same flux context const Bridge = this.state.ComponentBridgeElement; - html = ( -
+ html = ( +
- - - - - {AppHeader} -
-
- - - { - (self.state.panelTabShown == 'descriptor') ? - - : null - } + + + + + {AppHeader} +
+
+ + + { + (self.state.panelTabShown == 'descriptor') ? + + : null + } - event.stopPropagation()} - panelTabShown={self.state.panelTabShown}/> -
-
- -
- ); - } else { - this.getModel(); - } - return html; - }, - onChange(state) { - this.setState(state); - }, - onCatalogDataChanged(catalogDataState) { - const catalogs = catalogDataState.catalogs; - const unsavedChanges = catalogs.reduce((result, catalog) => { - if (result) { - return result; - } - return catalog.descriptors.reduce((result, descriptor) => { - if (result) { - return result; - } - return descriptor.uiState.modified; - }, false); - }, false); - this.setState({ - unsavedChanges: unsavedChanges, - isLoading: catalogDataState.isLoading - }); - }, - onBeforeUnload() { - // https://trello.com/c/c8v321Xx/160-prompt-user-to-save-changes - //const snapshot = alt.takeSnapshot(); - //window.localStorage.setItem('composer', snapshot); - if (this.state.unsavedChanges) { - return 'You have unsaved changes. If you do not onboard (or update) your changes they will be lost.'; - } - } + event.stopPropagation()} + panelTabShown={self.state.panelTabShown}/> +
+
+ +
+ ); + } else { + this.getModel(); + } + return html; + }, + onChange(state) { + this.setState(state); + }, + onCatalogDataChanged(catalogDataState) { + const catalogs = catalogDataState.catalogs; + const unsavedChanges = catalogs.reduce((result, catalog) => { + if (result) { + return result; + } + return catalog.descriptors.reduce((result, descriptor) => { + if (result) { + return result; + } + return descriptor.uiState.modified; + }, false); + }, false); + this.setState({ + unsavedChanges: unsavedChanges, + isLoading: catalogDataState.isLoading + }); + }, + onBeforeUnload() { + // https://trello.com/c/c8v321Xx/160-prompt-user-to-save-changes + //const snapshot = alt.takeSnapshot(); + //window.localStorage.setItem('composer', snapshot); + if (this.state.unsavedChanges) { + return 'You have unsaved changes. If you do not onboard (or update) your changes they will be lost.'; + } + } }); diff --git a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js new file mode 100644 index 000000000..912895c63 --- /dev/null +++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js @@ -0,0 +1,353 @@ + +/* + * + * Copyright 2016 RIFT.IO Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + + +'use strict'; + +import _ from 'lodash' +import d3 from 'd3' +import React from 'react' +import Range from '../Range' +import Button from '../Button' +import ClassNames from 'classnames' +import changeCase from 'change-case' +import LayoutRow from '../LayoutRow' +import SelectionManager from '../../libraries/SelectionManager' +import PureRenderMixin from 'react-addons-pure-render-mixin' +import CatalogItemsActions from '../../actions/CatalogItemsActions' +import CanvasEditorActions from '../../actions/CanvasEditorActions' +import DescriptorModelFactory from '../../libraries/model/DescriptorModelFactory' +import ComposerAppActions from '../../actions/ComposerAppActions' +import DescriptorModelMetaFactory from '../../libraries/model/DescriptorModelMetaFactory' +import ComposerAppStore from '../../stores/ComposerAppStore' +import DeletionManager from '../../libraries/DeletionManager' +import ContentEditableDiv from '../ContentEditableDiv' +import TooltipManager from '../../libraries/TooltipManager' +import HighlightRecordServicePaths from '../../libraries/graph/HighlightRecordServicePaths' + +import '../../styles/EditForwardingGraphPaths.scss' + +import imgNSD from '../../images/default-catalog-icon.svg' +import imgFG from '../../../../node_modules/open-iconic/svg/infinity.svg' +import imgRemove from '../../../../node_modules/open-iconic/svg/trash.svg' +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 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; + context.vnfapMap = ap; + return ( +
+
{ap.id}
+
{ap.capability['member-vnf-index']}
+
{ap.capability['capability-ref']}
+ +
+ ) + +} + +function mapNSD(nsd, i) { + + const context = this; + context.nsd = nsd; + + function onClickAddConfigParameterMap(nsd, event) { + event.preventDefault(); + nsd.createConfigParameterMap(); + CatalogItemsActions.catalogItemDescriptorChanged(nsd.getRoot()); + } + + const forwardingGraphs = nsd.configParameterMap.map(configParameterMap.bind(context)); + if (forwardingGraphs.length === 0) { + forwardingGraphs.push( +
+ No Forwarding Graphs to model. +
+ ); + } + + return ( +
+ {forwardingGraphs} +
+
+
+
+
+ ); + +} + + +function startEditing() { + event.stopPropagation(); + DeletionManager.removeEventListeners(); + } + +function endEditing() { + DeletionManager.addEventListeners(); +} + + +const ConfigPrimitiveParameters = React.createClass({ + mixins: [PureRenderMixin], + getInitialState: function () { + return ComposerAppStore.getState(); + }, + getDefaultProps: function () { + return { + containers: [] + }; + }, + componentWillMount: function () { + }, + componentDidMount: function () { + }, + componentDidUpdate: function () { + }, + componentWillUnmount: function () { + }, + 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 + }; + + const networkService = containers.filter(d => d.type === 'nsd'); + if (networkService.length === 0) { + return

No NSD open in the canvas. Try opening an NSD.

; + } + let MapData = constructRequestSourceData(containers); + let mapCounter = 1; + + + + return ( +
+
+
+
+ Request +
+
+ Source +
+
+
+ { + MapData.Requests.map(function(r, i) { + let currentValue = {}; + let SourceOptions = [] + MapData.Sources.map(function(s, j) { + let value = { + value: s.name, + index: s.vnfdIndex, + requestValue: r.name, + requestIndex: r.vnfdIndex + } + SourceOptions.push() + }) + //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 ( +
+
{`${r.vnfdName} (${r.vnfdIndex}) / ${r.parameter && r.parameter[0]['config-primitive-name-ref']} / ${r.parameter && r.parameter[0]['config-primitive-parameter-ref']}`}
+
+ +
+
+ ) + }) + } +
+
+
+ ) + } +}); + + 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; diff --git a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js index 4ee4345b7..2a5da2191 100644 --- a/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js +++ b/skyquake/plugins/composer/src/src/components/EditDescriptorModelProperties.js @@ -46,6 +46,8 @@ import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg' import '../styles/EditDescriptorModelProperties.scss' + + function getDescriptorMetaBasicForType(type) { const basicPropertiesFilter = d => _.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name); return DescriptorModelMetaFactory.getModelMetaForType(type, basicPropertiesFilter) || {properties: []}; @@ -70,16 +72,7 @@ function getTitle(model = {}) { return model.id; } } - -export default function EditDescriptorModelProperties(props) { - - const container = props.container; - - if (!(DescriptorModelFactory.isContainer(container))) { - return - } - - function startEditing() { +function startEditing() { DeletionManager.removeEventListeners(); } @@ -262,7 +255,7 @@ export default function EditDescriptorModelProperties(props) { }); } - function buildChoice(container, property, path, value, key) { + function buildChoice(container, property, path, value, key, props={}) { function onFormFieldValueChanged(event) { if (DescriptorModelFactory.isContainer(this)) { @@ -516,15 +509,15 @@ export default function EditDescriptorModelProperties(props) { if (isMissingDescriptorMeta) { field = No Descriptor Meta for {property.name}; } else if (property.type === 'choice') { - field = buildChoice(container, property, valuePath, value, key.join(':')); + field = buildChoice(container, property, valuePath, value, key.join(':'), props); } else if (isSimpleListView) { - field = buildSimpleListItem(container, property, valuePath, value, key, index); + field = buildSimpleListItem(container, property, valuePath, value, key, index, props); } else if (isLeafList) { - field = buildLeafListItem(container, property, valuePath, value, key, index); + field = buildLeafListItem(container, property, valuePath, value, key, index, props); } else if (hasProperties) { - field = buildElement(container, property, valuePath, value, key.join(':')) + field = buildElement(container, property, valuePath, value, key.join(':'), props) } else { - field = buildField(container, property, valuePath, value, key.join(':')); + field = buildField(container, property, valuePath, value, key.join(':'), props); } function onClickLeaf(property, path, value, event) { @@ -594,8 +587,17 @@ export default function EditDescriptorModelProperties(props) { ); } +export default function EditDescriptorModelProperties(props, type) { + + const container = props.container; + + if (!(DescriptorModelFactory.isContainer(container))) { + return + } + + - const containerType = container.uiState['qualified-type'] || container.uiState.type; + const containerType = (_.isEmpty(type) ? false : type)|| container.uiState['qualified-type'] || container.uiState.type; const basicProperties = getDescriptorMetaBasicForType(containerType).properties; function buildBasicGroup() { @@ -633,7 +635,7 @@ export default function EditDescriptorModelProperties(props) { {properties.map(property => { const path = [property.name]; const value = container.model[property.name]; - return build(container, property, path, value, {toggle: true, width: props.width}); + return build(container, property, path, value, _.assign({toggle: true, width: props.width}, props)); })}
We need this so when the user closes the panel it won't shift away and scare the bj out of them!
@@ -665,3 +667,6 @@ export default function EditDescriptorModelProperties(props) { ); } +export {build} +// export buildElement; +// export buildChoice; diff --git a/skyquake/plugins/composer/src/src/components/EditDescriptorModelPropertiesBkUp.js b/skyquake/plugins/composer/src/src/components/EditDescriptorModelPropertiesBkUp.js new file mode 100644 index 000000000..c8e664a83 --- /dev/null +++ b/skyquake/plugins/composer/src/src/components/EditDescriptorModelPropertiesBkUp.js @@ -0,0 +1,671 @@ +/* + * + * Copyright 2016 RIFT.IO Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ +/** + * Created by onvelocity on 1/18/16. + * + * This class generates the form fields used to edit the CONFD JSON model. + */ +'use strict'; + +import _ from 'lodash' +import utils from '../libraries/utils' +import React from 'react' +import ClassNames from 'classnames' +import changeCase from 'change-case' +import toggle from '../libraries/ToggleElementHandler' +import Button from './Button' +import Property from '../libraries/model/DescriptorModelMetaProperty' +import ComposerAppActions from '../actions/ComposerAppActions' +import CatalogItemsActions from '../actions/CatalogItemsActions' +import DESCRIPTOR_MODEL_FIELDS from '../libraries/model/DescriptorModelFields' +import DescriptorModelFactory from '../libraries/model/DescriptorModelFactory' +import DescriptorModelMetaFactory from '../libraries/model/DescriptorModelMetaFactory' +import SelectionManager from '../libraries/SelectionManager' +import DeletionManager from '../libraries/DeletionManager' +import DescriptorModelIconFactory from '../libraries/model/IconFactory' +import getEventPath from '../libraries/getEventPath' +import CatalogDataStore from '../stores/CatalogDataStore' + +import imgAdd from '../../../node_modules/open-iconic/svg/plus.svg' +import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg' + +import '../styles/EditDescriptorModelProperties.scss' + + + +function getDescriptorMetaBasicForType(type) { + const basicPropertiesFilter = d => _.contains(DESCRIPTOR_MODEL_FIELDS[type], d.name); + return DescriptorModelMetaFactory.getModelMetaForType(type, basicPropertiesFilter) || {properties: []}; +} + +function getDescriptorMetaAdvancedForType(type) { + const advPropertiesFilter = d => !_.contains(DESCRIPTOR_MODEL_FIELDS[type], d.name); + return DescriptorModelMetaFactory.getModelMetaForType(type, advPropertiesFilter) || {properties: []}; +} + +function getTitle(model = {}) { + if (typeof model['short-name'] === 'string' && model['short-name']) { + return model['short-name']; + } + if (typeof model.name === 'string' && model.name) { + return model.name; + } + if (model.uiState && typeof model.uiState.displayName === 'string' && model.uiState.displayName) { + return model.uiState.displayName + } + if (typeof model.id === 'string') { + return model.id; + } +} + +export default function EditDescriptorModelProperties(props) { + + const container = props.container; + + if (!(DescriptorModelFactory.isContainer(container))) { + return + } + + function startEditing() { + DeletionManager.removeEventListeners(); + } + + function endEditing() { + DeletionManager.addEventListeners(); + } + + function onClickSelectItem(property, path, value, event) { + event.preventDefault(); + const root = this.getRoot(); + if (SelectionManager.select(value)) { + CatalogItemsActions.catalogItemMetaDataChanged(root.model); + } + } + + function onFocusPropertyFormInputElement(property, path, value, event) { + + event.preventDefault(); + startEditing(); + + function removeIsFocusedClass(event) { + event.target.removeEventListener('blur', removeIsFocusedClass); + Array.from(document.querySelectorAll('.-is-focused')).forEach(d => d.classList.remove('-is-focused')); + } + + removeIsFocusedClass(event); + + const propertyWrapper = getEventPath(event).reduce((parent, element) => { + if (parent) { + return parent; + } + if (!element.classList) { + return false; + } + if (element.classList.contains('property')) { + return element; + } + }, false); + + if (propertyWrapper) { + propertyWrapper.classList.add('-is-focused'); + event.target.addEventListener('blur', removeIsFocusedClass); + } + + } + + function buildAddPropertyAction(container, property, path) { + function onClickAddProperty(property, path, event) { + event.preventDefault(); + //SelectionManager.resume(); + const create = Property.getContainerCreateMethod(property, this); + if (create) { + const model = null; + create(model, path, property); + } else { + const name = path.join('.'); + const value = Property.createModelInstance(property); + utils.assignPathValue(this.model, name, value); + } + CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot()); + } + return ( +