From 6d9c522334ce20112635c1dd2417aa9231f6a308 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 6 May 2019 14:20:58 +0530 Subject: [PATCH] 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 2abcaecd713..c8a73873f2b 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 00000000000..912a757ebae --- /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 00000000000..55d9140a3b7 --- /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 396e335f2e2..ea9d762d9b8 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 aad15ec595c..9aeff21ad48 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 { />
- + + + + + +