From b79d9d1e00fcfbace2af4a470de81f32e1f42924 Mon Sep 17 00:00:00 2001 From: Laurence Maultsby Date: Thu, 26 Jan 2017 11:55:39 -0500 Subject: [PATCH] Merge v1.1 into master_vca_intg Signed-off-by: Laurence Maultsby --- .../src/src/components/ComposerApp.js | 388 +++++++++--------- .../src/src/stores/ComposerAppStore.js | 27 +- .../src/recordViewer/recordViewStore.js | 11 +- 3 files changed, 210 insertions(+), 216 deletions(-) diff --git a/skyquake/plugins/composer/src/src/components/ComposerApp.js b/skyquake/plugins/composer/src/src/components/ComposerApp.js index d626ea431..6507b3419 100644 --- a/skyquake/plugins/composer/src/src/components/ComposerApp.js +++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js @@ -62,218 +62,210 @@ 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 { - if(event.target.offsetParent && !event.target.offsetParent.classList.contains("tray-body")) { - 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 { + 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), []); - 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; + 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.containers; + 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/stores/ComposerAppStore.js b/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js index 156fe76b7..75276d22a 100644 --- a/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js +++ b/skyquake/plugins/composer/src/src/stores/ComposerAppStore.js @@ -125,7 +125,7 @@ class ComposerAppStore { this.files = false; this.filesState = {}; this.downloadJobs = {}; - this.displayedPanel = 'forwarding' //or parameter + this.containers = []; //End File manager values this.bindListeners({ onResize: PanelResizeAction.RESIZE, @@ -202,8 +202,17 @@ class ComposerAppStore { } updateItem(item) { + const self = this; + let containers = []; + let cpNumber = 0; if(!document.body.classList.contains('resizing')) { - this.setState({item: _.cloneDeep(item)}); + containers = [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); + }); + this.setState({containers: containers, item: _.cloneDeep(item)}); } SelectionManager.refreshOutline(); } @@ -342,23 +351,13 @@ class ComposerAppStore { this.setState({showJSONViewer: false}); } - toggleCanvasPanelTray(event) { + toggleCanvasPanelTray() { const layout = this.layout; - const attrMap = event.target.attributes; - let panelEvent = null; - for(let k in attrMap) { - if(attrMap[k].name == 'data-event') { - panelEvent = attrMap[k].nodeValue; - } - } - if ((layout.bottom > 25) && ((panelEvent == this.displayedPanel) || panelEvent == 'arrow')) { + if (layout.bottom > 25) { this.closeCanvasPanelTray(); } else { this.openCanvasPanelTray(); } - if(panelEvent != 'arrow'){ - this.setState({displayedPanel: panelEvent}) - } } openCanvasPanelTray() { diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js b/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js index b9f74990a..a7770a7fa 100644 --- a/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js +++ b/skyquake/plugins/launchpad/src/recordViewer/recordViewStore.js @@ -136,7 +136,7 @@ class RecordViewStore { let vnfrIndex = data.vnfrIndex; let configPrimitiveIndex = data.configPrimitiveIndex; let payload = {}; - let isValid = false; + let isValid = true; let configPrimitive = vnfrs[vnfrIndex]['vnf-configuration']['service-primitive'][configPrimitiveIndex]; payload['name'] = ''; @@ -144,7 +144,7 @@ class RecordViewStore { payload['vnf-list'] = []; payload['triggered-by'] = 'vnf-primitive'; let parameters = []; - configPrimitive['parameter'].map((parameter) => { + configPrimitive['parameter'] && configPrimitive['parameter'].map((parameter) => { if(!isValid) { isValid = validateParameter(parameter); } @@ -157,8 +157,11 @@ class RecordViewStore { let vnfPrimitive = []; vnfPrimitive[0] = { name: configPrimitive['name'], - index: configPrimitiveIndex, - parameter: parameters + index: configPrimitiveIndex + }; + + if (parameters.length > 0) { + vnfPrimitive[0].parameter = parameters; } payload['vnf-list'].push({ -- 2.25.1