From 6a67e59243c649a640ddbdd5e35e568cef7a7f46 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Tue, 7 May 2019 14:47:01 +0530 Subject: [PATCH] Get lifecycle from API --- .../src/components/apps/release/LifeCycle.js | 89 +++++-------------- .../components/apps/release/LifeCycleGraph.js | 89 +++++++++++++++++++ .../react-app/src/js/actions/index.js | 20 ++++- .../react-app/src/js/constants/ActionTypes.js | 8 +- .../react-app/src/js/reducers/index.js | 10 ++- .../pages/dashboard/apps/release/Release.js | 2 +- 6 files changed, 139 insertions(+), 79 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js 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 fcecc41a77..3b1350e596 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 @@ -1,75 +1,34 @@ 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"; +import LifeCycleGraph from "./LifeCycleGraph"; +import {connect} from "react-redux"; +import {getLifecycle, openReleasesModal} from "../../../js/actions"; +const mapDispatchToProps = dispatch => ({ + getLifecycle: () => dispatch(getLifecycle()) +}); -class LifeCycle extends React.Component { - render() { - 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); - }); +const mapStateToProps = state => { + return {lifecycle: state.lifecycle}; +}; - model.addAll(node1, node2, node3, link1, link2); - - let distributedModel = getDistributedModel(engine, model); - engine.setDiagramModel(distributedModel); - - return ( -
- -
- ); +class ConnectedLifeCycle extends React.Component { + componentDidMount() { + this.props.getLifecycle(); } -} - -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)"); + render() { + const lifecycle = this.props.lifecycle; + if(lifecycle != null){ + return ( + + ); + + }else { + return null; + } + } } -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}`, "Out")); - const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, "IN")); - return portOut.link(portTo); -} +const LifeCycle = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifeCycle); export default LifeCycle; \ No newline at end of file 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 new file mode 100644 index 0000000000..5d9400ab60 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +} + +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; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js index de94675a26..f89df5fbf0 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js +++ b/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'; + } + }); +}; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js index 211bd739a4..dd66861ec7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/constants/ActionTypes.js +++ b/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 }); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js index 5a9b379657..0d720a3578 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js +++ b/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; } 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 9aeff21ad4..bfbaa6d2ab 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 @@ -69,7 +69,7 @@ class ConnectedRelease extends React.Component { - +