dnet-applications/apps/dnet-is-application/src/main/resources/static/html/wf_history.html

<page-title title="Workflow History"></page-title>

<div class="container-fluid">
	<div class="row">
		<div class="col">
		
			<page-filter filter="wfFilter" list="workflows"></page-filter>
							
			<p class="text-muted">
				<span ng-show="fromDate < 0 && toDate < 0"><b>Recent workflows</b> (max {{maxNumberOfRecentWfs}})</span>
				<span ng-show="fromDate >= 0 && toDate >= 0"><b>Workflows from </b>{{fromDate | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> {{toDate | date:"yyyy-MM-dd HH:mm:ss"}}</span>
				<span ng-show="fromDate >= 0 && toDate < 0"><b>Workflows from </b>{{fromDate | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> <i>undefined</i></span>
				<span ng-show="fromDate < 0 && toDate >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{toDate | date:"yyyy-MM-dd HH:mm:ss"}}</span>
				<br />
				<span><b>Count :</b> {{(workflows | filter:wfFilter).length}}</span>
			</p>				
			<table class="table table-sm table-striped small">
				<thead>
					<tr>
						<th style="width: 10%">
							<a href="javascript:void(0)" ng-click="sortField = 'processId'; sortReverse = !sortReverse">
								Process Id
								<i ng-show="sortField == 'processId' && !sortReverse" class="fa fa-angle-down"></i>
								<i ng-show="sortField == 'processId' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
						<th style="width: 20%">
							<a href="javascript:void(0)" ng-click="sortField = 'name'; sortReverse = !sortReverse">
								Workflow Name
								<i ng-show="sortField == 'name' && !sortReverse" class="fa fa-angle-down"></i>
								<i ng-show="sortField == 'name' && sortReverse" class="fa fa-angle-up"></i>
							</a>
						</th>
						<th style="width: 10%">
							<a href="javascript:void(0)" ng-click="sortField = 'family'; sortReverse = !sortReverse">
								Workflow Family
								<i ng-show="sortField == 'family' && !sortReverse" class="fa fa-angle-down"></i>
				           		<i ng-show="sortField == 'family' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
						<th style="width: 30%">
							<a href="javascript:void(0)" ng-click="sortField = 'dsName'; sortReverse = !sortReverse">
								Datasource
								<i ng-show="sortField == 'dsName' && !sortReverse" class="fa fa-angle-down"></i>
				            	<i ng-show="sortField == 'dsName' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
						<th style="width: 10%">
							<a href="javascript:void(0)" ng-click="sortField = 'status'; sortReverse = !sortReverse">
								Status
								<i ng-show="sortField == 'status' && !sortReverse" class="fa fa-angle-down"></i>
								<i ng-show="sortField == 'status' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
						<th style="width: 10%">
							<a href="javascript:void(0)" ng-click="sortField = 'startDate'; sortReverse = !sortReverse">
								Start Date
								<i ng-show="sortField == 'startDate' && !sortReverse" class="fa fa-angle-down"></i>
								<i ng-show="sortField == 'startDate' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
						<th style="width: 10%">
							<a href="javascript:void(0)" ng-click="sortField = 'endDate'; sortReverse = !sortReverse">
								End Date
								<i ng-show="sortField == 'endDate' && !sortReverse" class="fa fa-angle-down"></i>
								<i ng-show="sortField == 'endDate' && sortReverse" class="fa fa-angle-up"></i>
          					</a>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-show="(workflows|filter:wfFilter).length == 0">
						<td colspan="7" class="text-muted">no workflows</td>
					</tr>
					<tr ng-repeat="wf in workflows | orderBy:sortField:sortReverse | filter:wfFilter">
						<th><a href="javascript:void(0)" data-toggle="modal" data-target="#showWfDetailsModal" ng-click="setCurrentWf(wf)">{{wf.processId}}</a></th>
						<td>{{wf.name}}</td>
						<td>{{wf.family}}</td>
						<td>{{wf.dsName}}</td>
						<td><span class="badge" ng-class="{
							'badge-success' : (wf.status == 'success'), 
							'badge-danger'  : (wf.status == 'failure'), 
							'badge-primary' : (wf.status != 'success') && (wf.status != 'failure')
						}">{{wf.status}}</span></td>
						<td>{{wf.startDate}}</td>
						<td>{{wf.endDate}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
		
<!-- Modals -->
		
<div class="modal fade" tabindex="-1" id="showWfDetailsModal">
	<div class="modal-dialog modal-xl">
	 	<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Details</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<p>
					<b>Started at: </b>{{currentWf.startDate}}<br />
					<b>Finished at: </b>{{currentWf.endDate}}<br />
					<b>Duration: </b>{{currentWf.duration}}<br />
				</p>

				<page-filter filter="detailsFilter" list="currentWf.arrayDetails"></page-filter>
						
				<table class="table table-sm table-striped small mt-2" style="table-layout: fixed;">
					<tr ng-repeat="p in currentWf.arrayDetails | filter:detailsFilter">
						<th style="width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><a href="javascript:void(0)" ng-click="setCurrentDetailParam(p.k,p.v)">{{p.k}}</a></th>
						<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{p.v}}</td>
					</tr>
				</table>
						
				<div class="card card-body bg-light" ng-show="currDetailsKey">
					<b>{{currDetailsKey}}</b><br />
					<pre>{{currDetailsValue}}</pre>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>