From 6d9c522334ce20112635c1dd2417aa9231f6a308 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 6 May 2019 14:20:58 +0530 Subject: [PATCH 1/5] viewed basic diagram in lifecycle --- .../react-app/package.json | 3 +- .../src/components/apps/release/LifeCycle.css | 7 ++++ .../src/components/apps/release/LifeCycle.js | 39 +++++++++++++++++++ .../src/pages/dashboard/Dashboard.js | 2 +- .../pages/dashboard/apps/release/Release.js | 8 +++- 5 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index 2abcaecd71..c8a73873f2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -21,7 +21,8 @@ "react-router-config": "^5.0.0", "react-router-dom": "latest", "react-scripts": "2.1.8", - "redux-thunk": "^2.3.0" + "redux-thunk": "^2.3.0", + "storm-react-diagrams": "^5.2.1" }, "devDependencies": { "@babel/core": "^7.0.0", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css new file mode 100644 index 0000000000..912a757eba --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.css @@ -0,0 +1,7 @@ +.srd-diagram{ + height: 100%; + min-height: 300px; + background-color: #3c3c3c !important; + background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent); + background-size: 50px 50px; +} 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 new file mode 100644 index 0000000000..55d9140a3b --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js @@ -0,0 +1,39 @@ +import React from "react"; +import * as SRD from "storm-react-diagrams"; +import "storm-react-diagrams/dist/style.min.css"; +import "./LifeCycle.css"; + +class LifeCycle extends React.Component { + render() { + 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); + + model.addAll(node1, node2, node3, link1, link2); + + engine.setDiagramModel(model); + + return ( +
+ +
+ ); + } +} + +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/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index 396e335f2e..ea9d762d9b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -38,7 +38,7 @@ class Dashboard extends React.Component { - + {this.state.routes.map((route) => ( ))} 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 aad15ec595..9aeff21ad4 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 @@ -3,6 +3,7 @@ import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "ant import {connect} from "react-redux"; import ReleaseView from "../../../../components/apps/release/ReleaseView"; import {getRelease} from "../../../../js/actions"; +import LifeCycle from "../../../../components/apps/release/LifeCycle"; const Search = Input.Search; const {Title} = Typography; @@ -61,11 +62,16 @@ class ConnectedRelease extends React.Component { />
- + + + + + +
From a3798b8bfae35cbb42cf400d78c21f1567a8f120 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 6 May 2019 14:57:53 +0530 Subject: [PATCH 2/5] created util to auto arrange nodes in LifeCycle --- .../react-app/package.json | 1 + .../src/components/apps/release/LifeCycle.js | 38 ++++++++++++- .../react-app/src/js/utils/dagre-utils.ts | 56 +++++++++++++++++++ 3 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index c8a73873f2..469943d5b7 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -13,6 +13,7 @@ "acorn": "^6.1.1", "antd": "^3.15.0", "axios": "^0.18.0", + "dagre": "^0.8.4", "keymirror": "^0.1.1", "react": "^16.8.4", "react-dom": "^16.8.4", 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 55d9140a3b..fcecc41a77 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 @@ -2,9 +2,13 @@ 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 LifeCycle extends React.Component { render() { + const nodes = []; + const engine = new SRD.DiagramEngine(); engine.installDefaultFactories(); @@ -24,9 +28,17 @@ class LifeCycle extends React.Component { 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); - engine.setDiagramModel(model); + let distributedModel = getDistributedModel(engine, model); + engine.setDiagramModel(distributedModel); return (
@@ -36,4 +48,28 @@ class LifeCycle extends React.Component { } } +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}`, "Out")); + const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, "IN")); + return portOut.link(portTo); +} + 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/js/utils/dagre-utils.ts b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts new file mode 100644 index 0000000000..58a006f9a9 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts @@ -0,0 +1,56 @@ +import * as dagre from "dagre"; +import * as _ from "lodash"; + +const size = { + width: 60, + height: 60 +}; + +export function distributeElements(model) { + let clonedModel = _.cloneDeep(model); + let nodes = distributeGraph(clonedModel); + nodes.forEach(node => { + let modelNode = clonedModel.nodes.find(item => item.id === node.id); + modelNode.x = node.x - node.width / 2; + modelNode.y = node.y - node.height / 2; + }); + return clonedModel; +} + +function distributeGraph(model) { + let nodes = mapElements(model); + let edges = mapEdges(model); + let graph = new dagre.graphlib.Graph(); + graph.setGraph({}); + graph.setDefaultEdgeLabel(() => ({})); + //add elements to dagre graph + nodes.forEach(node => { + graph.setNode(node.id, node.metadata); + }); + edges.forEach(edge => { + if (edge.from && edge.to) { + graph.setEdge(edge.from, edge.to); + } + }); + //auto-distribute + dagre.layout(graph); + return graph.nodes().map(node => graph.node(node)); +} + +function mapElements(model) { + // dagre compatible format + return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } })); +} + +function mapEdges(model) { + // returns links which connects nodes + // we check are there both from and to nodes in the model. Sometimes links can be detached + return model.links + .map(link => ({ + from: link.source, + to: link.target + })) + .filter( + item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to) + ); +} \ No newline at end of file From 6a67e59243c649a640ddbdd5e35e568cef7a7f46 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Tue, 7 May 2019 14:47:01 +0530 Subject: [PATCH 3/5] 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 { - + From 62e0430d1da4e7812d45ac228360466798f1e43c Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 8 May 2019 00:05:34 +0530 Subject: [PATCH 4/5] 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 (
- + From 1c8d5bfc3ea28f65f0e86ac6baddec0341a5348f Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 8 May 2019 00:05:52 +0530 Subject: [PATCH 5/5] Create lifecycle diagram --- .../react-app/src/components/apps/release/LifeCycleGraph.js | 4 ---- 1 file changed, 4 deletions(-) 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 94f7b21c12..f5051decd1 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 @@ -84,10 +84,6 @@ function createNode(name, color) { 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 nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName)); }