Get lifecycle from API

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js

@@ -1,75 +1,34 @@
 import React from "react";
-import * as SRD from "storm-react-diagrams";
+import LifeCycleGraph from "./LifeCycleGraph";
-import "storm-react-diagrams/dist/style.min.css";
+import {connect} from "react-redux";
-import "./LifeCycle.css";
+import {getLifecycle, openReleasesModal} from "../../../js/actions";
-import {distributeElements} from "../../../js/utils/dagre-utils.ts";
 
+const mapDispatchToProps = dispatch => ({
+    getLifecycle: () => dispatch(getLifecycle())
+});
 
-class LifeCycle extends React.Component {
+const mapStateToProps = state => {
-    render() {
+    return {lifecycle: state.lifecycle};
-        const nodes = [];
+};
-
-        const engine = new SRD.DiagramEngine();
-        engine.installDefaultFactories();
-
-        const model = new SRD.DiagramModel();
-
-        const node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
-        const port1 = node1.addOutPort(" ");
-        // node1.setPosition(100, 100);
-
-        const node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
-        const port2 = node2.addInPort(" ");
-
-        const node3 = new SRD.DefaultNodeModel("Node 3", "rgb(192,255,0)");
-        const port3 = node3.addInPort(" ");
-        // node2.setPosition(400, 100);
-
-        const link1 = port1.link(port2);
-        const link2 = port1.link(port3);
-
-
-        nodes.push(createNode("hi"));
-
-        nodes.forEach((node)=>{
-           model.addNode(node);
-        });
 
-        model.addAll(node1, node2, node3, link1, link2);
+class ConnectedLifeCycle extends React.Component {
-
+    componentDidMount() {
-        let distributedModel = getDistributedModel(engine, model);
+        this.props.getLifecycle();
-        engine.setDiagramModel(distributedModel);
-
-        return (
-            <div >
-                <SRD.DiagramWidget diagramEngine={engine} />
-            </div>
-        );
     }
-}
-
-function getDistributedModel(engine, model) {
-    const serialized = model.serializeDiagram();
-    const distributedSerializedDiagram = distributeElements(serialized);
-
-    //deserialize the model
-    let deSerializedModel = new SRD.DiagramModel();
-    deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
-    return deSerializedModel;
-}
 
-function createNode(name) {
+    render() {
-    return new SRD.DefaultNodeModel(name, "rgb(0,192,255)");
+        const lifecycle = this.props.lifecycle;
+        if(lifecycle != null){
+            return (
+                <LifeCycleGraph lifecycle={this.props.lifecycle}/>
+            );
+
+        }else {
+            return null;
+        }
+    }
 }
 
-let count = 0;
+const LifeCycle = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifeCycle);
-
-function connectNodes(nodeFrom, nodeTo) {
-    //just to get id-like structure
-    count++;
-    const portOut = nodeFrom.addPort(new SRD.DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, "Out"));
-    const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, "IN"));
-    return portOut.link(portTo);
-}
 
 export default LifeCycle;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js

@@ -0,0 +1,89 @@
+import React from "react";
+import * as SRD from "storm-react-diagrams";
+import "storm-react-diagrams/dist/style.min.css";
+import "./LifeCycle.css";
+import {distributeElements} from "../../../js/utils/dagre-utils.ts";
+
+
+class LifeCycleGraph extends React.Component {
+    render() {
+
+        const lifecycle = this.props.lifecycle;
+        const nodes = [];
+        const links = [];
+
+        const engine = new SRD.DiagramEngine();
+        engine.installDefaultFactories();
+
+        const model = new SRD.DiagramModel();
+
+
+        Object.keys(lifecycle).forEach((stateName) => {
+            const node = createNode(stateName);
+            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);
+
+                state.proceedingStates.forEach((proceedingState) => {
+                    // console.log(proceedingState);
+                    // 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);
+        });
+
+
+        let distributedModel = getDistributedModel(engine, model);
+        engine.setDiagramModel(distributedModel);
+
+        return (
+            <div>
+                <SRD.DiagramWidget diagramEngine={engine}/>
+            </div>
+        );
+    }
+}
+
+function getDistributedModel(engine, model) {
+    const serialized = model.serializeDiagram();
+    const distributedSerializedDiagram = distributeElements(serialized);
+
+    //deserialize the model
+    let deSerializedModel = new SRD.DiagramModel();
+    deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
+    return deSerializedModel;
+}
+
+function createNode(name) {
+    return new SRD.DefaultNodeModel(name, "rgb(0,192,255)");
+}
+
+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);
+}
+
+export default LifeCycleGraph;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js

@@ -14,7 +14,6 @@ export const getApps = () => dispatch => {
             if (res.data.data.hasOwnProperty("applications")) {
                 apps = res.data.data.applications;
             }
-            console.log(res.data);
             dispatch({type: ActionTypes.GET_APPS, payload: apps});
         }
 
@@ -35,8 +34,6 @@ export const getRelease = (uuid) => dispatch => {
     ).then(res => {
         if (res.status === 200) {
             let release = res.data.data;
-
-            console.log(res.data);
             dispatch({type: ActionTypes.GET_RELEASE, payload: release});
         }
 
@@ -50,7 +47,6 @@ export const getRelease = (uuid) => dispatch => {
 };
 
 export const openReleasesModal = (app) => dispatch => {
-    console.log(app);
     dispatch({
         type: ActionTypes.OPEN_RELEASES_MODAL,
         payload: {
@@ -59,3 +55,19 @@ export const openReleasesModal = (app) => dispatch => {
     });
 };
 
+export const getLifecycle = ()=> dispatch =>{
+    const request = "method=get&content-type=application/json&payload={}&api-endpoint=/application-mgt-publisher/v1.0/applications/lifecycle-config";
+
+    return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+    ).then(res => {
+        if (res.status === 200) {
+            let lifecycle = res.data.data;
+            dispatch({type: ActionTypes.GET_LIFECYCLE, payload: lifecycle});
+        }
+
+    }).catch(function (error) {
+        if (error.response.status === 401) {
+            window.location.href = 'https://localhost:9443/publisher/login';
+        }
+    });
+};

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js

@@ -1,16 +1,12 @@
 import keyMirror from 'keymirror';
 
-// export const LOGIN = "LOGIN";
-// export const GET_APPS = "GET_APPS";
-// export const OPEN_RELEASES_MODAL = "OPEN_RELEASES_MODAL";
-// export const CLOSE_RELEASES_MODAL = "CLOSE_RELEASES_MODAL";
-
 const ActionTypes = keyMirror({
     LOGIN: null,
     GET_APPS: null,
     OPEN_RELEASES_MODAL: null,
     CLOSE_RELEASES_MODAL: null,
-    GET_RELEASE: null
+    GET_RELEASE: null,
+    GET_LIFECYCLE: null
 
 });
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js

@@ -6,7 +6,8 @@ const initialState = {
         visible: false,
         app: null
     },
-    release: null
+    release: null,
+    lifecycle: null
 };
 
 function rootReducer(state = initialState, action) {
@@ -21,11 +22,14 @@ function rootReducer(state = initialState, action) {
                 app: action.payload.app
             }
         });
-    }else if(action.type === ActionTypes.GET_RELEASE){
+    } else if (action.type === ActionTypes.GET_RELEASE) {
         return Object.assign({}, state, {
             release: action.payload
         });
-
+    } else if (action.type === ActionTypes.GET_LIFECYCLE) {
+        return Object.assign({}, state, {
+            lifecycle: action.payload
+        });
     }
     return state;
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -69,7 +69,7 @@ class ConnectedRelease extends React.Component {
                         </Col>
                         <Col span={8}>
                             <Card>
-                                <LifeCycle/>
+                               <LifeCycle/>
                             </Card>
                         </Col>
                     </Row>