Adding an html file for the visual rendering of the graphical process instances

README.md

@@ -1,3 +1,5 @@
+[![Travis](https://img.shields.io/travis/apache/ode-console.svg)]()
+
 # Apache ODE Console
 
 **Apache ODE** (Orchestration Director Engine) executes business processes written following the [WS-BPEL](http://ode.apache.org/ws-bpel-20.html) standard. It talks to web services, sending and receiving messages, handling data manipulation and error recovery as described by your process definition. It supports both long and short living process executions to orchestrate all the services that are part of your application.
@@ -15,6 +17,12 @@
 
 ## Build
 
+To install all needed dependencies do the following:
+1. Install nodejs and npm
+1. Install Gulp via `npm i -g gulp`
+1. Install npm dependencies via `npm install` (in the working copy)
+1. Install bower dependencies via `bower install` (in the working copy)
+
 * `gulp` or `gulp build` to build an optimized version of your application in `/dist`
 * `gulp serve` to launch a browser sync server on your source files
 * `gulp serve:dist` to launch a server on your optimized application
@@ -30,6 +38,12 @@ There are two ways of installing ODE console.
 1. Copy contents of `/dist` after building to the exploded webapp folder of ODE within a web container, e.g. Tomcat.
 2. Change the endpoint references IMAPI_ENDPOINT, PMAPI_ENDPOINT and DSAPI_ENDPOINT to point to your ODE installation and serve ODE console from what ever webserver you like. ODE console is a single page app that has no specific server-side requirements. When ODE and ODE console are exposed on different hosts and ports, make sure that ODE sets correct CORS headers so that the console can access ODE's endpoints.
 
+## GSoC Project Documentation
+
+
+This section provides a [link](https://docs.google.com/document/d/1Us16u4Do72qY9VbVx0DePPzUcRA9pq0bh5c7vF4DlJ8/edit?usp=sharing) to the documentation about key functionalities and implementations with screenshots attached. It has been mainly adapted for developers, however, users can get neccessary information from the Install/Usage section of this readme
+
+
 ## License
 
 Apache Software License 2.0

TODO

@@ -15,6 +15,7 @@
 - [x] edit variable contents in instance details view
 
 - [ ] check and fix LICENSE and NOTICE files
+- [ ] rewrite st-select directive
 - [ ] write tests!
 - [ ] add package detail view and show BPEL and WSDL sources there (PMAPI change needed)
 - [ ] handle instance/process not found cases in detail views

src/app/index.js

@@ -49,6 +49,10 @@ angular.module('odeConsole', ['ngAnimate', 'ngSanitize', 'ngRoute', 'ui.bootstra
         templateUrl: 'app/instance/instance.html',
         controller: 'InstanceController'
       })
+      .when('/instances/visual/:iid', {
+        templateUrl: 'app/instance/visual.html',
+        controller: 'InstanceController'
+      })
       .when('/processes', {
         templateUrl: 'app/process/processlist.html',
         controller: 'ProcessListController'

src/app/instance/instance.controller.js

@@ -120,4 +120,34 @@ angular.module('odeConsole')
 
   update();
 
+  // starting handled component connection or visual connexion
+
+  $scope.$watch(
+    function() {
+      /*for (var i = 0; i < ; i++) {
+       var elements = document.getElementById(i);
+     };*/
+      var elementOne = document.getElementsByTagName('center');
+      //var elementTwo = document.getElementById('3');
+      console.log(elementOne);
+      if(elementOne != []) {
+        jsPlumb.bind("ready", function() {
+
+          var firstInstance = jsPlumb.getInstance();
+
+          firstInstance.importDefaults({
+            Connector : [ "Flowchart", { curviness: 65 } ],
+            Anchors : [ "BottomCenter", "BottomCenter" ]
+          });
+          for (var i = 0; i < elementOne.length; i++) {
+            firstInstance.connect({
+            source:elementOne[i], 
+            target:elementOne[i+1], 
+            scope:"someScope" 
+          });
+          }; 
+        });
+      }
+    });
+
 });

src/app/instance/instance.service.js

@@ -138,7 +138,7 @@ angular.module('odeConsole')
       var scope = $(this).xpath('ns:scope', nsResolver);
       act.scope = {siid : Number(scope.attr('siid')), name: scope.attr('name'), modelId: Number(scope.attr('modelId')), status: si.status };
       si.activities.push(act);
-
+      //console.log(si.activities);
       var failure = $(this).xpath('ns:failure', nsResolver);
       if (failure.length > 0) {
         act.failure = {};

src/app/instance/instancelist.html

@@ -22,6 +22,7 @@
           <th st-sort="started">Started</th>
           <th st-sort="lastActive" st-sort-default="reverse">Last Active</th>
           <th>Action</th>
+          <th>Visual</th>
         </tr>
       </thead>
       <tbody>
@@ -49,6 +50,7 @@ <h4 class="text-center">No instances found.</h4>
             <time datetime="{{instance.lastActive}}" tooltip="{{instance.lastActive | date:'medium'}}" am-time-ago="instance.lastActive"></time>
           </td>
           <td><div ng-include="'app/instance/instanceactionbuttons.html'"></div></td>
+          <td><a href="#/instances/visual/{{instance.iid}}">visualize</a></td>
         </tr>
       </tbody>
       <tfoot>

src/app/instance/visual.html

@@ -0,0 +1,29 @@
+<div class="container">
+	<h1>Graphical Visualisation of the process instance: {{ variables[0].iid }}</h1>
+
+
+
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<h3 class="panel-title">Instance Details</h3>
+		</div>
+		  <center id="{{ activity.aiid }}" 
+		  	   ng-init="activities= activities | orderBy:'-aiid'" 
+		  	   ng-repeat="activity in activities">
+		  		<!-- <pre>{{activities | json}}</pre> -->
+		  		<br>
+				<br>
+				<br>
+		  		<div  class="btn btn-info btn-lg" style="font-size:16px;">
+		  			<span  class="glyphicon glyphicon-tasks"></span>
+		  			<a class="button" href="#">{{ activity.name }}  </a>
+		  			<span class="badge">
+		  				{{ activity.status }}
+		  			</span>
+		  		</div> 
+
+		  	</center>
+
+	</div>
+</div>
+

src/app/process/process.service.js

@@ -96,7 +96,7 @@ angular.module('odeConsole')
         terminated: Number(processElement.xpath('ns:instance-summary/ns:instances[@state=\'TERMINATED\']/@count', nsResolver).val()),
         inrecovery: Number(processElement.xpath('ns:instance-summary/ns:failures/ns:count', nsResolver).text() || 0)
       };
-
+    //console.log(result.stats);
     return result;
   };
 
@@ -149,6 +149,7 @@ angular.module('odeConsole')
 
         for (var i = 0; i < els.length; i += 1) {
           var process = angular.element(els[i]);
+
           var packageName = process.xpath('ns:deployment-info/ns:package', nsResolver).text();
 
           packages[packageName] = packages[packageName] || _.extend(splitPackageName(packageName),

src/index.html

@@ -45,7 +45,7 @@
     <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="../bower_components/angular-route/angular-route.js"></script>
     <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
-    <script src="../bower_components/angular-smart-table/dist/smart-table.min.js"></script>
+    <script src="../bower_components/angular-smart-table/dist/smart-table.js"></script>
     <script src="../bower_components/angular-xml/angular-xml.js"></script>
     <script src="../bower_components/angular-poller/angular-poller.min.js"></script>
     <script src="../bower_components/moment/moment.js"></script>
@@ -65,11 +65,10 @@
     <script src="app/index.js"></script>
     <script src="app/really.directive.js"></script>
     <script src="app/soap.service.js"></script>
-    <script src="app/spinbutton.directive.js"></script>
     <script src="app/st-select.directive.js"></script>
+    <script src="vendor/dom.jsPlumb-1.7.5.js"></script>
     <script src="vendor/jquery.xpath.js"></script>
     <script src="vendor/vkbeautify.js"></script>
-    <script src="components/navbar/navbar.controller.js"></script>
     <script src="app/dashboard/dashboard.controller.js"></script>
     <script src="app/instance/instance.controller.js"></script>
     <script src="app/instance/instance.service.js"></script>
@@ -79,6 +78,7 @@
     <script src="app/process/process.service.js"></script>
     <script src="app/process/processactions.controller.js"></script>
     <script src="app/process/processlist.controller.js"></script>
+    <script src="components/navbar/navbar.controller.js"></script>
     <!-- endinject -->
 
     <!-- inject:partials -->