D-Net

	<script type="text/javascript" src="../resources/js/workflows/wf_process_viewer.js"></script>

	<script type="text/javascript" src="../resources/js/workflows/wf_journal.js"></script>

		<wf-process-modal proc-id="currentId" visible="showModal"></wf-process-modal>

<div id="procLogDetailsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">

	<div class="modal-dialog modal-lg">

		<div class="modal-content">

			<div class="modal-header">

				<button type="button" class="close" data-dismiss="modal">&times;</button>

				<h4 class="modal-title" id="logDetailsLabel">Process <i>{{procId}}</i></h4>

			</div>

			<div class="modal-body">

				<p>

					<strong>Started at: </strong>{{proc.startDate | date:'yyyy-MM-dd HH:mm:ss'}}<br/>

					<strong>Finished at: </strong>{{proc.endDate | date:'yyyy-MM-dd HH:mm:ss'}}<br/>

					<strong>Duration: </strong> {{calculateDateDiff(proc.startDate, proc.endDate)}}<br/>

				</p>

				<table class="table table-condensed table-striped" style="table-layout: fixed; font-size: 12px;">

					<tr ng-repeat="p in proc.currentEnv">

						<th class="col-xs-4"><a href="javascript:void(0)" ng-click="setCurrentParam(p)">{{p.name}}</a></th>

						<td style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{p.value}}</td>

					</tr>

				</table>

				<div class="well" style="font-size: 11px" ng-show="currentParam.name">

					<p><strong>{{currentParam.name}}</strong></p>

					<p>{{currentParam.value}}</p>

				</div>

			</div>

			<div class="modal-footer">

				<button class="btn btn-primary" data-dismiss="modal">Close</button>

			</div>

		</div>

	</div>

</div>

var module = angular.module('wfJournalUI', ['ngGrid', 'wfProcessViewer']);

module.controller('wfJournalCtrl', function($scope, $http, $sce) {

	//commonInitialize($scope, $http, $sce);

	initSpinner();

	$scope.journal = [];

	$scope.currentId = '';

	$scope.showModal = false;

	$scope.family = getFamily();

	$scope.filterJournal = {filterText: ''};

	$scope.maxDate = new Date();

	$scope.minDate = new Date(2014, 0, 1);

	$scope.endDate = new Date();

	$scope.startDate = new Date();

	$scope.updateDates = function (start, end) {

		$scope.startDate = start;

		$scope.endDate = end;

		$scope.$apply();

		$scope.refresh();

	}

	// Set date range to [7 days before today, today] inclusive

	$scope.startDate.setDate($scope.endDate.getDate() - 7);

	// Grid configuration

	$scope.gridWfJournal = {

		data: 'journal',

		enableCellSelection: false,

		enableRowSelection: false,

		enableCellEditOnFocus: false,

		enablePaging: false,

		enableHighlighting: true,

		sortInfo: {fields: ['date'], directions: ['desc']},

		filterOptions: $scope.filterJournal,

		columnDefs: [{

			field: 'procId',

			displayName: 'Process ID',

			width: '15%',

			cellTemplate: '<div class="ngCellText"><a href="javascript:void(0)" ng-click="showProcess(row.getProperty(col.field))">{{row.getProperty(col.field)}}</a></div>'

		},

			{field: 'name', displayName: 'Workflow name', width: '20%'},

			{field: 'family', displayName: 'Workflow family', width: '15%'},

			{field: 'datasource', displayName: 'Datasource'},

			{

				field: 'status',

				displayName: 'Status',

				width: '10%',

				headerClass: 'text-center',

				cellTemplate: '<div class="ngCellText text-center"><span class="label label-default" ng-class="{ \'label-success\': row.getProperty(col.field) == \'SUCCESS\', \'label-danger\': row.getProperty(col.field) == \'FAILURE\', \'label-info\': row.getProperty(col.field) == \'EXECUTING\'}">{{row.getProperty(col.field)}}</span></div>'

			},

			{

				field: 'date',

				displayName: 'Date',

				width: '10%',

				headerClass: 'text-right',

				cellTemplate: '<div class="ngCellText text-right">{{ (row.getProperty("date") > 0 && row.getProperty("date") < 9999999999999) ? (row.getProperty("date") | date:"yyyy-MM-dd HH:mm:ss") : "not yet started" }}</div>'

			}

		]

	};

	$scope.showProcess = function(procId) {

		$scope.currentId =  procId;

		$scope.showModal = true;

	}

	$scope.formatDate = function (date) {

		var year = date.getFullYear();

		var month = ("00" + (date.getMonth() + 1)).slice(-2);

		var day = ("00" + date.getDate()).slice(-2);

		return year + '-' + month + '-' + day;

	}

	$scope.refresh = function () {

		showSpinner();

		$scope.current = {};

		$scope.currentParam = {};

		var url = '';

		if ($scope.family) {

			url = 'wf/journal_byFamily.find?family=' + $scope.family;

		} else {

			url = 'wf/journal.range?start=' + $scope.formatDate($scope.startDate) + '&end=' + $scope.formatDate($scope.endDate);

		}

		$http.get(url).success(

			function (data) {

				$scope.journal = data;

				hideSpinner();

			}

		).error(

			function () {

				showError('Something really bad must have happened to our fellow hamster..');

				hideSpinner();

			}

		);

	}

	$scope.resizeMainElement = function (elem) {

		var height = 0;

		var body = window.document.body;

		if (window.innerHeight) {

			height = window.innerHeight;

		} else if (body.parentElement.clientHeight) {

			height = body.parentElement.clientHeight;

		} else if (body && body.clientHeight) {

			height = body.clientHeight;

		}

		elem.style.height = ((height - elem.offsetTop - 280) + "px");

	}

	$scope.refresh();

	$scope.resizeMainElement(document.getElementById('wfJournalTable'));

	if (initProcId()) {

		$scope.showProcess(initProcId());

	}

});

window.onresize = function () {

	var elem = document.getElementById('wfJournalTable');

	angular.element(elem).scope().resizeMainElement(elem);

};

var wfProcessViewer = angular.module("wfProcessViewer", []);

wfProcessViewer.directive("wfProcessModal", function ($http) {

	return {

		restrict: 'E',

		transclude: true,

		replace:true,

		scope: {

	        'procId'  : '=',

	        'visible' : '='

		},

		templateUrl: '../resources/html/wf/wf_process_viewer.html',

		link: function (scope, element, attrs, ctrl) {

			scope.currentParam = {};

			scope.current = {};

			$(element).modal({'show': false});

			scope.$watch(function() {

				return scope.visible;

			}, function(value) {

				if (value == true && scope.procId) { 

					$(element).modal('show');

					scope.visible = false;

					scope.proc = {};

					scope.currentParam = {};

					showSpinner();

					$http.get("wf/journal.get?id=" + scope.procId).success(

						function (data) {

							scope.proc = data;

							hideSpinner();

						}

					).error(

						function () {

							showError('Something really bad must have happened to our fellow hamster..');

							hideSpinner();

						}

					);

				}

			});

			scope.calculateDateDiff = function (start, end) {

				if (start <= 0 || end <= 0) {

					return '-';

				}

				var seconds = 0;

				var minutes = 0;

				var hours = 0;

				var days = 0;

				if (end > start) {

					seconds = Math.round((end - start) / 1000);

					if (seconds > 60) {

						minutes = Math.floor(seconds / 60);

						seconds = seconds % 60;

						if (minutes > 60) {

							hours = Math.floor(minutes / 60);

							minutes = minutes % 60;

							if (hours > 24) {

								days = Math.floor(hours / 24);

								hours = hours % 24;

							}

						}

					}

				}

				var res = '';

				if (days > 0) {

					if (res) {

						res += ', ';

					}

					res += days + " day(s)"

				}

				if (hours > 0) {

					if (res) {

						res += ', ';

					}

					res += hours + " hour(s)"

				}

				if (minutes > 0) {

					if (res) {

						res += ', ';

					}

					res += minutes + " minute(s)"

				}

				if (seconds > 0) {

					if (res) {

						res += ', ';

					}

					res += seconds + " second(s)"

				}

				if (!res) {

					res = '0 seconds';

				}

				return res;

			}

			scope.setCurrentParam  = function (p) {

				scope.currentParam = p;

			}

		}

	}

});