forked from community/device-mgt-core
Jayasanka
6 years ago
parent
29e06ddf4e
commit
6a67e59243
@ -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";
|
||||
|
||||
|
||||
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 mapDispatchToProps = dispatch => ({
|
||||
getLifecycle: () => dispatch(getLifecycle())
|
||||
});
|
||||
|
||||
model.addAll(node1, node2, node3, link1, link2);
|
||||
const mapStateToProps = state => {
|
||||
return {lifecycle: state.lifecycle};
|
||||
};
|
||||
|
||||
let distributedModel = getDistributedModel(engine, model);
|
||||
engine.setDiagramModel(distributedModel);
|
||||
class ConnectedLifeCycle extends React.Component {
|
||||
componentDidMount() {
|
||||
this.props.getLifecycle();
|
||||
}
|
||||
|
||||
render() {
|
||||
const lifecycle = this.props.lifecycle;
|
||||
if(lifecycle != null){
|
||||
return (
|
||||
<div >
|
||||
<SRD.DiagramWidget diagramEngine={engine} />
|
||||
</div>
|
||||
<LifeCycleGraph lifecycle={this.props.lifecycle}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}else {
|
||||
return null;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
const LifeCycle = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifeCycle);
|
||||
|
||||
export default LifeCycle;
|
||||
@ -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;
|
||||
@ -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
|
||||
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in new issue