D-Net

<div 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>{{entry.procId}}</i>

					<span class="label label-success" ng-show="entry.success">SUCCESS</span>

					<span class="label label-danger" ng-hide="entry.success">FAILURE</span>

				</h4>

			</div>

			<div class="modal-body">

				<div class="row">

					<div class="col-xs-12">

						<b>Started at:</b> {{entry.startDate > 0 ? (entry.startDate | date:'yyyy-MM-dd HH:mm:ss Z') : '-'}}<br/>

						<b>Finished at:</b> {{entry.endDate > 0 ? (entry.endDate | date:'yyyy-MM-dd HH:mm:ss Z') : '-'}}<br/>

						<b>Duration:</b> {{calculateDateDiff(entry.startDate, entry.endDate)}}<br/>

					</div>

				</div>

				<br />

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

					<tr ng-repeat="p in entry.outputParams">

						<th class="col-xs-4"><a href="javascript:void(0)" ng-click="setCurrentParam(p)">{{p.key}}</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.key">

					<p><strong>{{currentParam.key}}</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>

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

<wf-process-log-modal entry="currentProc" visible="showLogModal"></wf-process-log-modal>

			<td><a href="javascript:void(0)" ng-click="showProcessLog(h)">{{h.procId}}</a></td>

			<td class="text-center">

				<span class="label label-success" ng-show="h.success">SUCCESS</span>

				<span class="label label-danger" ng-hide="h.success">FAILURE</span>

			</td>

			<td class="text-right">{{ (h.endDate > 0 && h.endDate < 9999999999999) ? (h.endDate | date:"yyyy-MM-dd HH:mm:ss") : "-" }}</td>

wfProcessViewer.directive("wfProcessLogModal", function () {

	return {

		restrict: 'E',

		transclude: true,

		replace:true,

		scope: {

	        'entry'   : '=',

	        'visible' : '='

		},

		templateUrl: '/html/wf/wf-process-log-modal.html',

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

			scope.currentParam = {};

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

			scope.$watch(function() {

				return scope.visible;

			}, function(value) {

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

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

					scope.visible = false;

					scope.currentParam = {};

				}

			});

			scope.to_trusted = function (html_code) {

				return $sce.trustAsHtml(html_code);

			};

			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;

			}

		}

	}

});

			scope.currentProc = {};

			scope.showGraphModal = false;

			scope.showLogModal = false;

				scope.showGraphModal = true;

			scope.showProcessLog = function (proc) {

				scope.currentProc = proc;

				scope.showLogModal = true;

			}