summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/flows
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/flows')
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsActions.js321
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsConstants.js32
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js77
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx101
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListEditor.js66
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx261
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsListReducer.js162
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx97
-rw-r--r--openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js4
-rw-r--r--openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx58
-rw-r--r--openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx54
-rw-r--r--openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js77
12 files changed, 718 insertions, 592 deletions
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
index 61a419b314..9fb65f37d4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
@@ -15,171 +15,204 @@
*/
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, enums} from './FlowsConstants.js';
+import { actionTypes, enums } from './FlowsConstants.js';
import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js';
-
function baseUrl(serviceId, artifactId = '') {
- const restCatalogPrefix = Configuration.get('restCatalogPrefix');
- return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
+ const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+ return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
}
function encodeDataToBase64(dataAsString) {
- return window.btoa(dataAsString);
+ return window.btoa(dataAsString);
}
function decodeDataToBase64(encodedData) {
- return window.atob(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));
+ 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
- };
+ 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.post(
- baseUrl(flowData.serviceID, flowData.uniqueId),
- createOrUpdateRequest,
- {md5: true}
- );
+ let createOrUpdateRequest = {
+ payloadData: encodeContent(flowData),
+ artifactLabel: flowData.artifactLabel || flowData.artifactName,
+ artifactName: flowData.artifactName,
+ artifactType: flowData.artifactType,
+ artifactGroupType: enums.INFORMATIONAL,
+ description: flowData.description
+ };
+
+ return RestAPIUtil.post(
+ baseUrl(flowData.serviceID, flowData.uniqueId),
+ createOrUpdateRequest,
+ { md5: true }
+ );
}
const FlowsActions = Object.freeze({
-
- fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID, readonly}) {
- let results = [];
- if (!Object.keys(artifacts).length) {
- dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
- if (!readonly) {
- 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, readonly});
- }
- },
-
- fetchArtifact(dispatch, {flow}){
- let {serviceID, uniqueId, participants} = flow;
- return 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
- });
- }
- return 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}) {
- return 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});
- },
-
- reset(dispatch) {
- dispatch({type: actionTypes.RESET});
- }
+ fetchFlowArtifacts(
+ dispatch,
+ { artifacts, diagramType, participants, serviceID, readonly }
+ ) {
+ let results = [];
+ if (!Object.keys(artifacts).length) {
+ dispatch({
+ type: actionTypes.FLOW_LIST_LOADED,
+ results,
+ participants,
+ serviceID,
+ diagramType,
+ readonly
+ });
+ if (!readonly) {
+ 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,
+ readonly
+ });
+ }
+ },
+
+ fetchArtifact(dispatch, { flow }) {
+ let { serviceID, uniqueId, participants } = flow;
+ return 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
+ }
+ );
+ }
+ return 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 }) {
+ return 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 });
+ },
+
+ 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
index 2b3d86bae2..4dcd840ff3 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
@@ -16,30 +16,28 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
+ OPEN_FLOW_DETAILS_EDITOR: null,
+ CLOSE_FLOW_DETAILS_EDITOR: null,
- OPEN_FLOW_DETAILS_EDITOR: null,
- CLOSE_FLOW_DETAILS_EDITOR: null,
+ OPEN_FLOW_DIAGRAM_EDITOR: null,
+ CLOSE_FLOW_DIAGRAM_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,
- FLOW_LIST_LOADED: null,
- ADD_OR_UPDATE_FLOW: null,
- ARTIFACT_LOADED: null,
- DELETE_FLOW: null,
-
- CURRENT_FLOW_DATA_CHANGED: null,
-
- RESET: 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'
+ WORKFLOW: 'WORKFLOW',
+ NETWORK: 'NETWORK_CALL_FLOW',
+ INFORMATIONAL: 'INFORMATIONAL',
+ INSTANTIATION_FLOWS: 'instantiationflows',
+ MESSAGE_FLOWS: 'messageflows'
};
export const FLOWS_EDITOR_FORM = 'FLOWS_FORM';
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
index f9585f985f..b45a9fc54e 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
@@ -13,44 +13,57 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
import FlowsEditorModalView from './FlowsEditorModalView.jsx';
import FlowsActions from './FlowsActions.js';
-import {FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { FLOWS_EDITOR_FORM } from './FlowsConstants.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
-export const mapStateToProps = ({flows}) => {
+export const mapStateToProps = ({ flows }) => {
+ let {
+ data = { artifactName: '', description: '' },
+ serviceID,
+ diagramType,
+ flowParticipants,
+ genericFieldInfo,
+ formReady
+ } = flows;
+ if (!data.serviceID) {
+ data.serviceID = serviceID;
+ }
+ if (!data.artifactType) {
+ data.artifactType = diagramType;
+ }
+ if (!data.participants) {
+ data.participants = flowParticipants;
+ }
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let {data = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants, genericFieldInfo, formReady} = flows;
- if(!data.serviceID){
- data.serviceID = serviceID;
- }
- if(!data.artifactType){
- data.artifactType = diagramType;
- }
- if(!data.participants){
- data.participants = flowParticipants;
- }
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
- return {
- currentFlow: data,
- genericFieldInfo,
- isFormValid,
- formReady
- };
+ return {
+ currentFlow: data,
+ genericFieldInfo,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {isNewArtifact}) => {
- return {
- onSubmit: flow => {
- FlowsActions.closeFlowDetailsEditor(dispatch);
- FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact);
- },
- onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
- onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: FLOWS_EDITOR_FORM}),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
- };
+const mapActionsToProps = (dispatch, { isNewArtifact }) => {
+ return {
+ onSubmit: flow => {
+ FlowsActions.closeFlowDetailsEditor(dispatch);
+ FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact);
+ },
+ onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: FLOWS_EDITOR_FORM
+ }),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView);
+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
index 1250a0b58e..8c805cca9c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
@@ -13,52 +13,73 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import Form from 'nfvo-components/input/validation/Form.jsx';
class FlowsEditorModalView extends Component {
+ render() {
+ let {
+ onCancel,
+ onDataChanged,
+ currentFlow,
+ genericFieldInfo,
+ formReady,
+ isFormValid,
+ onValidateForm
+ } = this.props;
+ let { artifactName, description } = currentFlow;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ onSubmit={() => this.onSaveClicked()}
+ onReset={onCancel}
+ formReady={formReady}
+ isValid={isFormValid}
+ onValidateForm={() => onValidateForm()}>
+ <Input
+ type="text"
+ name="name"
+ label={i18n('Name')}
+ isValid={genericFieldInfo['artifactName'].isValid}
+ errorText={
+ genericFieldInfo['artifactName'].errorText
+ }
+ isRequired={true}
+ value={artifactName}
+ onChange={artifactName =>
+ onDataChanged({ artifactName })
+ }
+ />
+ <Input
+ type="textarea"
+ name="description"
+ label={i18n('Description')}
+ isValid={genericFieldInfo['description'].isValid}
+ errorText={
+ genericFieldInfo['description'].errorText
+ }
+ isRequired={true}
+ value={description}
+ overlayPos="bottom"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ />
+ </Form>
+ )}
+ </div>
+ );
+ }
- render() {
- let {onCancel, onDataChanged, currentFlow, genericFieldInfo, formReady, isFormValid, onValidateForm} = this.props;
- let {artifactName, description} = currentFlow;
- return (
- <div>
- {genericFieldInfo && <Form
- onSubmit={() => this.onSaveClicked()}
- onReset={onCancel} formReady={formReady} isValid={isFormValid} onValidateForm={() => onValidateForm()} >
- <Input
- type='text'
- name='name'
- label={i18n('Name')}
- isValid={genericFieldInfo['artifactName'].isValid}
- errorText={genericFieldInfo['artifactName'].errorText}
- isRequired={true}
- value={artifactName}
- onChange={artifactName => onDataChanged({artifactName})}/>
- <Input
- type='textarea'
- name='description'
- label={i18n('Description')}
- isValid={genericFieldInfo['description'].isValid}
- errorText={genericFieldInfo['description'].errorText}
- isRequired={true}
- value={description}
- overlayPos='bottom'
- onChange={description => onDataChanged({description})}/>
- </Form> }
- </div>
- );
- }
-
- onSaveClicked() {
- let {currentFlow, onSubmit} = this.props;
- if (onSubmit) {
- onSubmit(currentFlow);
- }
- }
-
+ 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
index 642c578eb7..2718c19aaa 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
@@ -13,40 +13,50 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {connect} from 'react-redux';
+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, data = undefined, readonly} = flows;
- let isCheckedOut = !readonly;
- if(data && data.readonly){
- isCheckedOut = !data.readonly;
- }
+export const mapStateToProps = ({ flows }) => {
+ let {
+ flowList = [],
+ isDisplayModal,
+ isModalInEditMode,
+ shouldShowWorkflowsEditor = true,
+ data = undefined,
+ readonly
+ } = flows;
+ let isCheckedOut = !readonly;
+ if (data && data.readonly) {
+ isCheckedOut = !data.readonly;
+ }
- return {
- flowList,
- isDisplayModal,
- isCheckedOut,
- isModalInEditMode,
- shouldShowWorkflowsEditor,
- currentFlow: data,
- readonly
- };
+ return {
+ flowList,
+ isDisplayModal,
+ isCheckedOut,
+ isModalInEditMode,
+ shouldShowWorkflowsEditor,
+ currentFlow: data,
+ readonly
+ };
};
-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)
- };
+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
index 365b7f1bdf..3b2ff0619c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
@@ -13,7 +13,7 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Modal from 'nfvo-components/modal/Modal.jsx';
@@ -25,125 +25,146 @@ 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,
- readonly: 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 (
- <div className='workflows license-agreement-list-editor'>
- <FlowRelatedView display={localFilter}/>
- <ListEditorView
- plusButtonTitle={i18n('Add Workflow')}
- onAdd={onAddWorkflowClick}
- filterValue={localFilter}
- onFilter={filter => this.setState({localFilter: filter})}
- isReadOnlyMode={!isCheckedOut}>
- {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
- </ListEditorView>
-
- {isDisplayModal && this.renderWorkflowEditorModal()}
-
- </div>
- );
- }
-
- renderWorkflowEditorModal() {
- let { isDisplayModal, isModalInEditMode} = this.props;
- return (
- <Modal show={isDisplayModal} animation={true} className='onborading-modal workflows-editor-modal'>
- <Modal.Header>
- <Modal.Title>
- {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
- </Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
- </Modal.Body>
- </Modal>
- );
- }
-
- renderSequenceDiagramTool() {
- let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
- return (
- <SequenceDiagram
- onSave={sequenceDiagramModel => 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 (
- <ListEditorItemView
- key={uniqueId}
- onSelect={() => onEditFlowDetailsClick(flow)}
- onDelete={() => onDeleteFlowClick(flow)}
- onEdit={() => onEditFlowDiagramClick(flow)}
- className='list-editor-item-view'
- isCheckedOut={isCheckedOut}>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='text name'>{artifactName}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Description')}</div>
- <div className='text description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
-
+ static propTypes = {
+ flowList: PropTypes.array,
+ currentFlow: PropTypes.object,
+ isDisplayModal: PropTypes.bool,
+ isModalInEditMode: PropTypes.bool,
+ isCheckedOut: PropTypes.bool,
+ shouldShowWorkflowsEditor: PropTypes.bool,
+ readonly: 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 (
+ <div className="workflows license-agreement-list-editor">
+ <FlowRelatedView display={localFilter} />
+ <ListEditorView
+ plusButtonTitle={i18n('Add Workflow')}
+ onAdd={onAddWorkflowClick}
+ filterValue={localFilter}
+ onFilter={filter => this.setState({ localFilter: filter })}
+ isReadOnlyMode={!isCheckedOut}>
+ {this.filterList().map(flow =>
+ this.renderWorkflowListItem(flow, isCheckedOut)
+ )}
+ </ListEditorView>
+
+ {isDisplayModal && this.renderWorkflowEditorModal()}
+ </div>
+ );
+ }
+
+ renderWorkflowEditorModal() {
+ let { isDisplayModal, isModalInEditMode } = this.props;
+ return (
+ <Modal
+ show={isDisplayModal}
+ animation={true}
+ className="onborading-modal workflows-editor-modal">
+ <Modal.Header>
+ <Modal.Title>
+ {`${
+ isModalInEditMode
+ ? i18n('Edit Workflow')
+ : i18n('Create New Workflow')
+ }`}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <FlowsEditorModal isNewArtifact={!isModalInEditMode} />
+ </Modal.Body>
+ </Modal>
+ );
+ }
+
+ renderSequenceDiagramTool() {
+ let {
+ onSequenceDiagramSaveClick,
+ onSequenceDiagramCloseClick,
+ currentFlow
+ } = this.props;
+ return (
+ <SequenceDiagram
+ onSave={sequenceDiagramModel =>
+ 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 (
+ <ListEditorItemView
+ key={uniqueId}
+ onSelect={() => onEditFlowDetailsClick(flow)}
+ onDelete={() => onDeleteFlowClick(flow)}
+ onEdit={() => onEditFlowDiagramClick(flow)}
+ className="list-editor-item-view"
+ isCheckedOut={isCheckedOut}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="text name">{artifactName}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Description')}</div>
+ <div className="text description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
}
export default FlowsListEditorView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
index 14bf595050..0279824ac4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
@@ -13,87 +13,91 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { actionTypes, FLOWS_EDITOR_FORM } 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,
- readonly: action.readonly
- };
- 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.DELETE_FLOW:
- return {
- ...state,
- flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId)
- };
- case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
- return {
- ...state,
- formName: FLOWS_EDITOR_FORM,
- formReady: null,
- genericFieldInfo: {
- artifactName : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- },
- description: {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}]
- }
- },
- data: action.flow,
- isDisplayModal: true,
- isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
- };
+ switch (action.type) {
+ case actionTypes.FLOW_LIST_LOADED:
+ return {
+ ...state,
+ flowList: action.results,
+ flowParticipants: action.participants,
+ serviceID: action.serviceID,
+ diagramType: action.diagramType,
+ readonly: action.readonly
+ };
+ 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.DELETE_FLOW:
+ return {
+ ...state,
+ flowList: state.flowList.filter(
+ flow => flow.uniqueId !== action.flow.uniqueId
+ )
+ };
+ case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
+ return {
+ ...state,
+ formName: FLOWS_EDITOR_FORM,
+ formReady: null,
+ genericFieldInfo: {
+ artifactName: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'required', data: true }]
+ }
+ },
+ data: action.flow,
+ isDisplayModal: true,
+ isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
+ };
- case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
- return {
- ...state,
- data: undefined,
- isDisplayModal: false,
- isModalInEditMode: false
- };
- case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
- return {
- ...state,
- data: action.flow,
- shouldShowWorkflowsEditor: false
- };
- case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
- return {
- ...state,
- data: undefined,
- shouldShowWorkflowsEditor: true
- };
- case actionTypes.RESET:
- return {};
- }
+ case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
+ return {
+ ...state,
+ data: undefined,
+ isDisplayModal: false,
+ isModalInEditMode: false
+ };
+ case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
+ return {
+ ...state,
+ data: action.flow,
+ shouldShowWorkflowsEditor: false
+ };
+ case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
+ return {
+ ...state,
+ data: undefined,
+ shouldShowWorkflowsEditor: true
+ };
+ case actionTypes.RESET:
+ return {};
+ }
- return state;
+ return state;
};
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
index a2a5554203..7d302444e4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
@@ -22,57 +22,66 @@ 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()
+ )
+ );
+ }
- 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 <FlowsListEditor/>;
- }
+ render() {
+ return <FlowsListEditor />;
+ }
}
export default class DiagramPunchOut {
+ render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+ if (!this.isConfigSet) {
+ Configuration.setCatalogApiRoot(apiRoot);
+ Configuration.setCatalogApiHeaders(apiHeaders);
+ this.isConfigSet = true;
+ }
- render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
-
- if (!this.isConfigSet) {
- Configuration.setCatalogApiRoot(apiRoot);
- Configuration.setCatalogApiHeaders(apiHeaders);
- this.isConfigSet = true;
- }
-
- this.onEvent = onEvent;
- this.handleData(data);
+ this.onEvent = onEvent;
+ this.handleData(data);
- if (!this.rendered) {
- ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
- this.rendered = true;
- }
- }
+ if (!this.rendered) {
+ ReactDOM.render(
+ <Application>
+ <div className="dox-ui">
+ <FlowsListEditorPunchOutWrapper />
+ </div>
+ </Application>,
+ element
+ );
+ this.rendered = true;
+ }
+ }
- unmount(element) {
- let dispatch = action => store.dispatch(action);
- ReactDOM.unmountComponentAtNode(element);
- FlowsActions.reset(dispatch);
- }
+ 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);
+ 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});
- }
- }
+ 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
index 54043498f0..c037f3eefd 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
@@ -15,8 +15,8 @@
*/
import flowListReducer from './FlowsListReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
export default {
- flows: createPlainDataReducer(flowListReducer)
+ flows: createPlainDataReducer(flowListReducer)
};
diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
index d0a5bf3251..8a634915ac 100644
--- a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
+++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
@@ -13,27 +13,31 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import md5 from 'md5';
class ImportantLogic extends Component {
+ state = {
+ whatToDisplay: false
+ };
- state = {
- whatToDisplay: false
- };
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ whatToDisplay:
+ md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'
+ });
+ }
- componentWillReceiveProps(nextProps) {
- this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
- }
+ render() {
+ if (this.state.whatToDisplay) {
+ setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+ }
- render() {
- if (this.state.whatToDisplay) {
- setTimeout(() => this.setState({whatToDisplay: false}), 5000);
- }
-
- return (
- <div>
- <style>{'\.easter-wrapper {\
+ return (
+ <div>
+ <style>
+ {
+ '.easter-wrapper {\
position: fixed;\
width: 70px;\
height: 70px;\
@@ -96,16 +100,20 @@ class ImportantLogic extends Component {
@keyframes yo-yo {\
from { transform: rotate(-0deg); top: 0 }\
to { transform: rotate(-360deg); top:120px }\
- }'}</style>
- <div
- className='easter-wrapper'
- style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
- <span className='string'>{}</span>
- <span className='yo-yo'>{}</span>
- </div>
- </div>
- );
- }
+ }'
+ }
+ </style>
+ <div
+ className="easter-wrapper"
+ style={{
+ display: this.state.whatToDisplay ? 'block' : 'none'
+ }}>
+ <span className="string">{}</span>
+ <span className="yo-yo">{}</span>
+ </div>
+ </div>
+ );
+ }
}
export default ImportantLogic;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
index c128083774..ca24964472 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
@@ -13,7 +13,7 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from 'sdc-ui/lib/react/Button.js';
import Sequencer from 'dox-sequence-diagram-ui';
@@ -21,31 +21,37 @@ 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,
+ model: PropTypes.object.isRequired
+ };
- static propTypes = {
- onSave: PropTypes.func.isRequired,
- onClose: PropTypes.func,
- model: PropTypes.object.isRequired
- };
-
- onSave() {
- this.props.onSave(this.refs.sequencer.getModel());
- }
-
- render() {
- return (
- <div className='sequence-diagram'>
- <div className='sequence-diagram-sequencer'>
- <Sequencer ref='sequencer' options={{useHtmlSelect: true}} model={this.props.model} />
- </div>
- <div className='sequence-diagram-action-buttons'>
- <Button onClick={() => this.onSave()}>{i18n('Save')}</Button>
- <Button onClick={this.props.onClose}>{i18n('Close')}</Button>
- </div>
- </div>
- );
- }
+ onSave() {
+ this.props.onSave(this.refs.sequencer.getModel());
+ }
+ render() {
+ return (
+ <div className="sequence-diagram">
+ <div className="sequence-diagram-sequencer">
+ <Sequencer
+ ref="sequencer"
+ options={{ useHtmlSelect: true }}
+ model={this.props.model}
+ />
+ </div>
+ <div className="sequence-diagram-action-buttons">
+ <Button onClick={() => this.onSave()}>
+ {i18n('Save')}
+ </Button>
+ <Button onClick={this.props.onClose}>
+ {i18n('Close')}
+ </Button>
+ </div>
+ </div>
+ );
+ }
}
export default SequenceDiagram;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
index c83fdc91f0..23723dc91d 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
@@ -16,51 +16,54 @@
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 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 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));
+ let addedLifelines = newLifelines.filter(
+ lifeline => !oldLifelinesMap.has(lifeline.id)
+ );
- return [
- ...updatedLifelines,
- ...addedLifelines
- ];
+ return [...updatedLifelines, ...addedLifelines];
}
-
const SequenceDiagramModelHelper = Object.freeze({
+ createModel(options) {
+ return SequenceDiagramModelHelper.updateModel(emptyModel, options);
+ },
- 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;
+ 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
- }
- };
- }
+ return {
+ diagram: {
+ ...diagram,
+ metadata: {
+ ...metadata,
+ id,
+ name
+ },
+ lifelines
+ }
+ };
+ }
});
export default SequenceDiagramModelHelper;