Create lifecycle diagram

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 (
-                <LifeCycleGraph lifecycle={this.props.lifecycle}/>
+                <LifeCycleGraph currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
             );
 
         }else {

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")) {
+            if (state.hasOwnProperty("proceedingStates")) {
-                // console.log(state,state.proceedingStates);
 
                 state.proceedingStates.forEach((proceedingState) => {
-                    // console.log(proceedingState);
+                    links.push(connectNodes(state.node, lifecycle[proceedingState].node));
-                    // console.log(lifecycle[proceedingState]);
-                    // 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 (
-            <div>
+            <div style={{height: 900}}>
-                <SRD.DiagramWidget diagramEngine={engine}/>
+                <SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
             </div>
         );
     }
@@ -72,18 +74,21 @@ function getDistributedModel(engine, model) {
     return deSerializedModel;
 }
 
-function createNode(name) {
+function createNode(name, color) {
-    return new SRD.DefaultNodeModel(name, "rgb(0,192,255)");
+    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++;
+    // count++;
-    const portOut = nodeFrom.addPort(new SRD.DefaultPortModel(true, `${nodeFrom.name}-out-${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}`, " "));
+    // const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, " "));
-    return portOut.link(portTo);
+    return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
 }
 
 export default LifeCycleGraph;

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 {
                 </div>
             );
         }
+
+        //todo remove uppercase
         return (
             <div>
                 <PageHeader
@@ -69,7 +71,7 @@ class ConnectedRelease extends React.Component {
                         </Col>
                         <Col span={8}>
                             <Card>
-                               <LifeCycle/>
+                               <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
                             </Card>
                         </Col>
                     </Row>