From efa037d34be7b1570efdc767c79fad8d4005f10e Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 12:57:33 +0200 Subject: Add new code new version Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando --- openecomp-ui/src/sdc-app/flows/FlowsActions.js | 191 +++++++++++++++++++++ openecomp-ui/src/sdc-app/flows/FlowsConstants.js | 48 ++++++ openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js | 54 ++++++ .../src/sdc-app/flows/FlowsEditorModalView.jsx | 40 +++++ openecomp-ui/src/sdc-app/flows/FlowsListEditor.js | 53 ++++++ .../src/sdc-app/flows/FlowsListEditorView.jsx | 133 ++++++++++++++ openecomp-ui/src/sdc-app/flows/FlowsListReducer.js | 97 +++++++++++ openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx | 63 +++++++ openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js | 25 +++ openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx | 96 +++++++++++ openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx | 35 ++++ .../sdc-app/flows/SequenceDiagramModelHelper.js | 71 ++++++++ openecomp-ui/src/sdc-app/flows/emptyModel.json | 11 ++ 13 files changed, 917 insertions(+) create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsActions.js create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsConstants.js create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsListEditor.js create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsListReducer.js create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx create mode 100644 openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js create mode 100644 openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx create mode 100644 openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx create mode 100644 openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js create mode 100644 openecomp-ui/src/sdc-app/flows/emptyModel.json (limited to 'openecomp-ui/src/sdc-app/flows') diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js new file mode 100644 index 0000000000..b8772edb08 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js @@ -0,0 +1,191 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; +import Configuration from 'sdc-app/config/Configuration.js'; +import {actionTypes, enums} from './FlowsConstants.js'; +import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js'; + + +function baseUrl(serviceId, artifactId = '') { + const restATTPrefix = Configuration.get('restATTPrefix'); + return `${restATTPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`; +} + +function encodeDataToBase64(dataAsString) { + return window.btoa(dataAsString); +} + +function decodeDataToBase64(encodedData) { + return window.atob(encodedData); +} + +function encodeContent(flowData) { + let data = { + VERSION: { + major: 1, + minor: 0 + }, + description: flowData.description, + sequenceDiagramModel: flowData.sequenceDiagramModel + }; + + return encodeDataToBase64(JSON.stringify(data)); +} + +function decodeContent(base64Contents) { + let description, sequenceDiagramModel; + let payload = JSON.parse(decodeDataToBase64(base64Contents)); + + if (payload.VERSION === undefined) { + description = payload.description || 'Please, provide description...'; + sequenceDiagramModel = payload.data || payload; + sequenceDiagramModel = sequenceDiagramModel.model || sequenceDiagramModel; + + } else if (payload.VERSION.major === 1) { + description = payload.description; + sequenceDiagramModel = payload.sequenceDiagramModel; + } + + return { + description, + sequenceDiagramModel + }; +} + +function createOrUpdate(flowData) { + let createOrUpdateRequest = { + payloadData: encodeContent(flowData), + artifactLabel: flowData.artifactLabel || flowData.artifactName, + artifactName: flowData.artifactName, + artifactType: flowData.artifactType, + artifactGroupType: enums.INFORMATIONAL, + description: flowData.description + }; + + return RestAPIUtil.create( + baseUrl(flowData.serviceID, flowData.uniqueId), + createOrUpdateRequest, + {md5: true} + ); +} + +const FlowsActions = Object.freeze({ + + fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID}) { + let results = []; + if (!Object.keys(artifacts).length) { + dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType}); + FlowsActions.openFlowDetailsEditor(dispatch); + } + else { + Object.keys(artifacts).forEach(artifact => results.push({ + artifactType: diagramType, + participants, + serviceID, + ...artifacts[artifact] + })); + dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType}); + } + }, + + fetchArtifact(dispatch, {flow}){ + let {serviceID, uniqueId, participants} = flow; + RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(response => { + + let {artifactName, base64Contents} = response; + let {sequenceDiagramModel, ...other} = decodeContent(base64Contents); + + if (!sequenceDiagramModel) { + sequenceDiagramModel = SequenceDiagramModelHelper.createModel({ + id: uniqueId, + name: artifactName, + lifelines: participants + }); + } + else { + sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(sequenceDiagramModel, { + name: artifactName, + lifelines: participants + }); + } + + flow = { + ...flow, + ...other, + uniqueId, + artifactName, + sequenceDiagramModel + }; + + dispatch({type: actionTypes.ARTIFACT_LOADED, flow}); + FlowsActions.openFlowDiagramEditor(dispatch, {flow}); + }); + }, + + createOrUpdateFlow(dispatch, {flow}, isNew) { + if (!isNew && flow.sequenceDiagramModel) { + flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(flow.sequenceDiagramModel, { + name: flow.artifactName + }); + } + createOrUpdate(flow).then(response => { + let {uniqueId, artifactLabel} = response; + flow = {...flow, uniqueId, artifactLabel}; + if (isNew) { + flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel({id: uniqueId, name: flow.artifactName}); + } + dispatch({type: actionTypes.ADD_OR_UPDATE_FLOW, flow}); + }); + }, + + deleteFlow(dispatch, {flow}) { + RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(() => dispatch({ + type: actionTypes.DELETE_FLOW, + flow + })); + }, + + openFlowDetailsEditor(dispatch, flow) { + dispatch({type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow}); + }, + + closeFlowDetailsEditor(dispatch) { + dispatch({type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR}); + }, + + openFlowDiagramEditor(dispatch, {flow}) { + dispatch({type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow}); + }, + + closeFlowDiagramEditor(dispatch) { + dispatch({type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR}); + }, + + flowDetailsDataChanged(dispatch, {deltaData}) { + dispatch({type: actionTypes.CURRENT_FLOW_DATA_CHANGED, deltaData}); + }, + + reset(dispatch) { + dispatch({type: actionTypes.RESET}); + } +}); + +export default FlowsActions; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js new file mode 100644 index 0000000000..5a43a4df4f --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import keyMirror from 'nfvo-utils/KeyMirror.js'; + +export const actionTypes = keyMirror({ + + OPEN_FLOW_DETAILS_EDITOR: null, + CLOSE_FLOW_DETAILS_EDITOR: null, + + OPEN_FLOW_DIAGRAM_EDITOR: null, + CLOSE_FLOW_DIAGRAM_EDITOR: null, + + FLOW_LIST_LOADED: null, + ADD_OR_UPDATE_FLOW: null, + ARTIFACT_LOADED: null, + DELETE_FLOW: null, + + CURRENT_FLOW_DATA_CHANGED: null, + + RESET: null + +}); + +export const enums = { + WORKFLOW: 'WORKFLOW', + NETWORK: 'NETWORK_CALL_FLOW', + INFORMATIONAL: 'INFORMATIONAL', + INSTANTIATION_FLOWS: 'instantiationflows', + MESSAGE_FLOWS: 'messageflows' +}; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js new file mode 100644 index 0000000000..eff1c36b80 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js @@ -0,0 +1,54 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import {connect} from 'react-redux'; +import FlowsEditorModalView from './FlowsEditorModalView.jsx'; +import FlowsActions from './FlowsActions.js'; + +export const mapStateToProps = ({flows}) => { + + let {currentFlow = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants} = flows; + if(!currentFlow.serviceID){ + currentFlow.serviceID = serviceID; + } + if(!currentFlow.artifactType){ + currentFlow.artifactType = diagramType; + } + if(!currentFlow.participants){ + currentFlow.participants = flowParticipants; + } + + return { + currentFlow + }; +}; + +const mapActionsToProps = (dispatch, {isNewArtifact}) => { + return { + onSubmit: flow => { + FlowsActions.closeFlowDetailsEditor(dispatch); + FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact); + }, + onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch), + onDataChanged: deltaData => FlowsActions.flowDetailsDataChanged(dispatch, {deltaData}) + }; +}; + +export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView); diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx new file mode 100644 index 0000000000..8441c7d1d6 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx @@ -0,0 +1,40 @@ +import React, {Component} from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import Input from 'nfvo-components/input/validation/ValidationInput.jsx'; +import Form from 'nfvo-components/input/validation/ValidationForm.jsx'; + +class FlowsEditorModalView extends Component { + + render() { + let {onCancel, onDataChanged, currentFlow} = this.props; + let {artifactName, description} = currentFlow; + return ( +
this.onSaveClicked()} onReset={onCancel}> + onDataChanged({artifactName})}/> + onDataChanged({description})}/> +
+ ); + } + + onSaveClicked() { + let {currentFlow, onSubmit} = this.props; + if (onSubmit) { + onSubmit(currentFlow); + } + } + +} + +export default FlowsEditorModalView; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js new file mode 100644 index 0000000000..ff301b6e13 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js @@ -0,0 +1,53 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import {connect} from 'react-redux'; +import FlowsActions from './FlowsActions.js'; +import FlowsListEditorView from './FlowsListEditorView.jsx'; + +export const mapStateToProps = ({flows}) => { + let {flowList = [], isDisplayModal, isModalInEditMode, shouldShowWorkflowsEditor = true, currentFlow = undefined} = flows; + let isCheckedOut = currentFlow ? !currentFlow.readonly : true; + + return { + flowList, + isDisplayModal, + isCheckedOut, + isModalInEditMode, + shouldShowWorkflowsEditor, + currentFlow + }; +}; + +const mapActionsToProps = (dispatch) => { + return { + onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch), + onEditFlowDetailsClick: flow => FlowsActions.openFlowDetailsEditor(dispatch, flow), + onEditFlowDiagramClick: flow => FlowsActions.fetchArtifact(dispatch, {flow}), + onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, {flow}), + onSequenceDiagramSaveClick: flow => { + FlowsActions.closeFlowDiagramEditor(dispatch); + FlowsActions.createOrUpdateFlow(dispatch, {flow}); + }, + onSequenceDiagramCloseClick: () => FlowsActions.closeFlowDiagramEditor(dispatch) + }; +}; + +export default connect(mapStateToProps, mapActionsToProps)(FlowsListEditorView); diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx new file mode 100644 index 0000000000..3cea3968ff --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx @@ -0,0 +1,133 @@ +import React, {PropTypes, Component} from 'react'; + +import i18n from 'nfvo-utils/i18n/i18n.js'; +import Modal from 'nfvo-components/modal/Modal.jsx'; + +import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; +import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; +import FlowRelatedView from './ImportantLogic.jsx'; +import FlowsEditorModal from './FlowsEditorModal.js'; +import SequenceDiagram from './SequenceDiagram.jsx'; + +class FlowsListEditorView extends Component { + + static propTypes = { + flowList: PropTypes.array, + currentFlow: PropTypes.object, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + isCheckedOut: PropTypes.bool, + shouldShowWorkflowsEditor: PropTypes.bool, + + onAddWorkflowClick: PropTypes.func, + onEditFlowDetailsClick: PropTypes.func, + onEditFlowDiagramClick: PropTypes.func, + onDeleteFlowClick: PropTypes.func, + onSequenceDiagramSaveClick: PropTypes.func, + onSequenceDiagramCloseClick: PropTypes.func + }; + + state = { + localFilter: '' + }; + + render() { + let CurrentView = null; + if (this.props.shouldShowWorkflowsEditor) { + CurrentView = this.renderWorkflowsEditor(); + } + else { + CurrentView = this.renderSequenceDiagramTool(); + } + + return CurrentView; + } + + renderWorkflowsEditor() { + let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props; + const {localFilter} = this.state; + + return ( +
+ + this.setState({localFilter: filter})} + isCheckedOut={isCheckedOut}> + {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))} + + + {isDisplayModal && this.renderWorkflowEditorModal()} + +
+ ); + } + + renderWorkflowEditorModal() { + let { isDisplayModal, isModalInEditMode} = this.props; + return ( + + + + {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`} + + + + + + + ); + } + + renderSequenceDiagramTool() { + let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props; + return ( + onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})} + onClose={onSequenceDiagramCloseClick} + model={currentFlow.sequenceDiagramModel}/> + ); + } + + filterList() { + let {flowList} = this.props; + let {localFilter} = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return flowList.filter(({name = '', description = ''}) => { + return escape(name).match(filter) || escape(description).match(filter); + }); + } + else { + return flowList; + } + } + + renderWorkflowListItem(flow, isCheckedOut) { + let {uniqueId, artifactName, description} = flow; + let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props; + return ( + onEditFlowDetailsClick(flow)} + onDelete={() => onDeleteFlowClick(flow)} + onEdit={() => onEditFlowDiagramClick(flow)} + className='list-editor-item-view' + isCheckedOut={isCheckedOut}> +
+
{i18n('Name')}
+
{artifactName}
+
+
+
{i18n('Description')}
+
{description}
+
+ + ); + } + +} + +export default FlowsListEditorView; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js new file mode 100644 index 0000000000..f025450a58 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js @@ -0,0 +1,97 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import {actionTypes} from './FlowsConstants.js'; + +export default (state = {}, action) => { + switch (action.type) { + case actionTypes.FLOW_LIST_LOADED: + return { + ...state, + flowList: action.results, + flowParticipants: action.participants, + serviceID: action.serviceID, + diagramType: action.diagramType + }; + case actionTypes.ADD_OR_UPDATE_FLOW: + case actionTypes.ARTIFACT_LOADED: + let flowList = state.flowList || []; + let index = flowList.findIndex(flow => flow.uniqueId === action.flow.uniqueId); + if (index === -1) { + index = flowList.length; + } + let flowToBeUpdated = flowList[index]; + flowList = [ + ...flowList.slice(0, index), + {...flowToBeUpdated, ...action.flow}, + ...flowList.slice(index + 1) + ]; + return { + ...state, + flowList, + serviceID: action.flow.serviceID, + diagramType: action.flow.artifactType || state.diagramType + }; + case actionTypes.CURRENT_FLOW_DATA_CHANGED: + return { + ...state, + currentFlow: { + ...state.currentFlow, + ...action.deltaData + } + }; + case actionTypes.DELETE_FLOW: + return { + ...state, + flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId) + }; + case actionTypes.OPEN_FLOW_DETAILS_EDITOR: + return { + ...state, + currentFlow: action.flow, + isDisplayModal: true, + isModalInEditMode: Boolean(action.flow && action.flow.uniqueId) + }; + + case actionTypes.CLOSE_FLOW_DETAILS_EDITOR: + return { + ...state, + currentFlow: undefined, + isDisplayModal: false, + isModalInEditMode: false + }; + case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR: + return { + ...state, + currentFlow: action.flow, + shouldShowWorkflowsEditor: false + }; + case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR: + return { + ...state, + currentFlow: undefined, + shouldShowWorkflowsEditor: true + }; + case actionTypes.RESET: + return {}; + } + + return state; +}; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx new file mode 100644 index 0000000000..958f9a0a2d --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Configuration from 'sdc-app/config/Configuration.js'; +import Application from 'sdc-app/Application.jsx'; +import store from 'sdc-app/AppStore.js'; +import FlowsListEditor from './FlowsListEditor.js'; +import FlowsActions from './FlowsActions.js'; + +class FlowsListEditorPunchOutWrapper extends React.Component { + + componentDidMount() { + let element = ReactDOM.findDOMNode(this); + element.addEventListener('click', event => { + if (event.target.tagName === 'A') { + event.preventDefault(); + } + }); + ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType => + element.addEventListener(eventType, event => event.stopPropagation()) + ); + } + + render() { + return ; + } +} + +export default class DiagramPunchOut { + + render({options: {data, apiRoot, apiHeaders}, onEvent}, element) { + + if (!this.isConfigSet) { + Configuration.setATTApiRoot(apiRoot); + Configuration.setATTApiHeaders(apiHeaders); + this.isConfigSet = true; + } + + this.onEvent = onEvent; + this.handleData(data); + + if (!this.rendered) { + ReactDOM.render(
, element); + this.rendered = true; + } + } + + unmount(element) { + let dispatch = action => store.dispatch(action); + ReactDOM.unmountComponentAtNode(element); + FlowsActions.reset(dispatch); + } + + handleData(data) { + let {serviceID, diagramType} = data; + let dispatch = action => store.dispatch(action); + + if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) { + this.prevServiceID = serviceID; + this.prevDiagramType = diagramType; + FlowsActions.fetchFlowArtifacts(dispatch, {...data}); + } + } +} diff --git a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js new file mode 100644 index 0000000000..b3c0b2e27b --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js @@ -0,0 +1,25 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import flowListReducer from './FlowsListReducer.js'; + +export default { + flows: flowListReducer +}; diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx new file mode 100644 index 0000000000..c4ab41841b --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx @@ -0,0 +1,96 @@ +import React, {Component} from 'react'; +import md5 from 'md5'; + +class ImportantLogic extends Component { + + state = { + whatToDisplay: false + }; + + componentWillReceiveProps(nextProps) { + this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'}); + } + + render() { + if (this.state.whatToDisplay) { + setTimeout(() => this.setState({whatToDisplay: false}), 5000); + } + + return ( +
+ +
+ {} + {} +
+
+ ); + } +} + +export default ImportantLogic; diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx new file mode 100644 index 0000000000..9970969884 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx @@ -0,0 +1,35 @@ +import React, {Component, PropTypes} from 'react'; +import Button from 'react-bootstrap/lib/Button.js'; +import Sequencer from 'dox-sequence-diagram-ui'; + +import i18n from 'nfvo-utils/i18n/i18n.js'; + +class SequenceDiagram extends Component { + + static propTypes = { + onSave: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + model: PropTypes.object.isRequired + }; + + onSave() { + this.props.onSave(this.refs.sequencer.getModel()); + } + + render() { + return ( +
+
+ +
+
+ + +
+
+ ); + } + +} + +export default SequenceDiagram; diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js new file mode 100644 index 0000000000..c2e10a6360 --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js @@ -0,0 +1,71 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ + +import emptyModel from './emptyModel.json'; + +function mergeLifelines(oldLifelines, newLifelines) { + let oldLifelinesMap = new Map(oldLifelines.map(lifeline => [lifeline.id, lifeline])); + let newLifelinesMap = new Map(newLifelines.map(lifeline => [lifeline.id, lifeline])); + + let updatedLifelines = oldLifelines.map(lifeline => { + let newLifeline = newLifelinesMap.get(lifeline.id); + return { + ...lifeline, + name: newLifeline ? newLifeline.name : lifeline.name + }; + }); + + let addedLifelines = newLifelines.filter(lifeline => !oldLifelinesMap.has(lifeline.id)); + + return [ + ...updatedLifelines, + ...addedLifelines + ]; +} + + +const SequenceDiagramModelHelper = Object.freeze({ + + createModel(options) { + return SequenceDiagramModelHelper.updateModel(emptyModel, options); + }, + + updateModel(model, options) { + const diagram = model.diagram; + const metadata = diagram.metadata || model.metadata; + const id = options.id || metadata.id; + const name = options.name || metadata.name; + const lifelines = options.lifelines ? mergeLifelines(diagram.lifelines, options.lifelines) : diagram.lifelines; + + return { + diagram: { + ...diagram, + metadata: { + ...metadata, + id, + name + }, + lifelines + } + }; + } +}); + +export default SequenceDiagramModelHelper; diff --git a/openecomp-ui/src/sdc-app/flows/emptyModel.json b/openecomp-ui/src/sdc-app/flows/emptyModel.json new file mode 100644 index 0000000000..20f4b2fe3c --- /dev/null +++ b/openecomp-ui/src/sdc-app/flows/emptyModel.json @@ -0,0 +1,11 @@ +{ + "diagram": { + "metadata": { + "id": "$", + "ref": "BLANK", + "name": "New Sequence" + }, + "lifelines": [], + "steps": [] + } +} -- cgit 1.2.3-korg