viewed basic diagram in lifecycle

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",

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;
+}

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 (
+            <div >
+                <SRD.DiagramWidget diagramEngine={engine} />
+            </div>
+        );
+    }
+}
+
+export default LifeCycle;

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 {
                 </Header>
                 <Content style={{padding: '0 0'}}>
                     <Switch>
-                        <Redirect exact from="/publisher/dashboard" to="/publisher/dashboard/apps"/>
+                        <Redirect exact from="/publisher" to="/publisher/apps"/>
                         {this.state.routes.map((route) => (
                             <RouteWithSubRoutes key={route.path} {...route} />
                         ))}

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 {
                 />
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
                     <Row style={{padding: 10}}>
-                        <Col span={18}>
+                        <Col span={16}>
                             <Card>
                                 <ReleaseView release={release}/>
                             </Card>
                         </Col>
+                        <Col span={8}>
+                            <Card>
+                                <LifeCycle/>
+                            </Card>
+                        </Col>
                     </Row>
                 </div>