From 62e0430d1da4e7812d45ac228360466798f1e43c Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 8 May 2019 00:05:34 +0530 Subject: [PATCH] Create lifecycle diagram --- .../src/components/apps/release/LifeCycle.js | 7 ++- .../components/apps/release/LifeCycleGraph.js | 43 +++++++++++-------- .../pages/dashboard/apps/release/Release.js | 4 +- 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js index 3b1350e596..1d76067d7f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js @@ -8,7 +8,9 @@ const mapDispatchToProps = dispatch => ({ }); const mapStateToProps = state => { - return {lifecycle: state.lifecycle}; + return { + lifecycle: state.lifecycle + }; }; class ConnectedLifeCycle extends React.Component { @@ -17,10 +19,11 @@ class ConnectedLifeCycle extends React.Component { } render() { + console.log(); const lifecycle = this.props.lifecycle; if(lifecycle != null){ return ( - + ); }else { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js index 5d9400ab60..94f7b21c12 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js @@ -4,6 +4,8 @@ import "storm-react-diagrams/dist/style.min.css"; import "./LifeCycle.css"; import {distributeElements} from "../../../js/utils/dagre-utils.ts"; +const inPortName = "IN"; +const outPortName = "OUT"; class LifeCycleGraph extends React.Component { render() { @@ -16,36 +18,36 @@ class LifeCycleGraph extends React.Component { engine.installDefaultFactories(); const model = new SRD.DiagramModel(); + const nextStates = lifecycle[this.props.currentStatus].proceedingStates; Object.keys(lifecycle).forEach((stateName) => { - const node = createNode(stateName); + let color = "rgb(83, 92, 104)"; + if (stateName === this.props.currentStatus) { + color = "rgb(192,255,0)"; + }else if(nextStates.includes(stateName)){ + color = "rgb(0,192,255)"; + } + const node = createNode(stateName, color); + // node.addPort() nodes.push(node); lifecycle[stateName].node = node; }); Object.keys(lifecycle).forEach((stateName) => { - console.log(stateName); const state = lifecycle[stateName]; - //todo: remove checking property - if(state.hasOwnProperty("proceedingStates")) { - // console.log(state,state.proceedingStates); + if (state.hasOwnProperty("proceedingStates")) { state.proceedingStates.forEach((proceedingState) => { - // console.log(proceedingState); - // console.log(lifecycle[proceedingState]); - // links.push(connectNodes(state.node, lifecycle[proceedingState].node)); + links.push(connectNodes(state.node, lifecycle[proceedingState].node)); }); } }); - links.push(connectNodes(nodes[0], nodes[1])); nodes.forEach((node) => { model.addNode(node); }); - - console.log(links); links.forEach((link) => { model.addLink(link); }); @@ -55,8 +57,8 @@ class LifeCycleGraph extends React.Component { engine.setDiagramModel(distributedModel); return ( -
- +
+
); } @@ -72,18 +74,21 @@ function getDistributedModel(engine, model) { return deSerializedModel; } -function createNode(name) { - return new SRD.DefaultNodeModel(name, "rgb(0,192,255)"); +function createNode(name, color) { + const node = new SRD.DefaultNodeModel(name, color); + node.addPort(new SRD.DefaultPortModel(true, inPortName, " ")); + node.addPort(new SRD.DefaultPortModel(false, outPortName, " ")); + return node; } let count = 0; function connectNodes(nodeFrom, nodeTo) { //just to get id-like structure - count++; - const portOut = nodeFrom.addPort(new SRD.DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, " ")); - const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, " ")); - return portOut.link(portTo); + // count++; + // const portOut = nodeFrom.addPort(new SRD.DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, " ")); + // const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, " ")); + return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName)); } export default LifeCycleGraph; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js index bfbaa6d2ab..c01c0b9283 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js @@ -55,6 +55,8 @@ class ConnectedRelease extends React.Component {
); } + + //todo remove uppercase return (
- +