#*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*#

<!DOCTYPE html> 
<html lang="en">
	<head>

#parse("azkaban/webapp/servlet/velocity/style.vm")
#parse("azkaban/webapp/servlet/velocity/javascript.vm")
	
		<script type="text/javascript">
			var contextURL = "${context}";
			var currentTime = ${currentTime};
			var timezone = "${timezone}";
			var errorMessage = null;
			var successMessage = null;
		</script>
	</head>
	<body>

#set ($current_page="executing")
#parse ("azkaban/webapp/servlet/velocity/nav.vm")

		<div class="container">

## Alert message

			<div class="alert alert-dismissable alert-messaging" id="messaging">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
				<p id="messaging-message"></p>
			</div>
		</div>

## Page header.

		<div class="az-page-header">
			<div class="container">
				<h1>Executing Flows</h1>
			</div>
		</div>

## Page Content

		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">Currently Running Jobs</div>
						<table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
							<thead>
								<tr>
									<th class="execid">Execution Id</th>
									<th>Flow</th>
									<th>Project</th>
									<th class="user">User</th>
									<th class="user">Proxy User</th>
									<th class="date">Start Time</th>
									<th class="date">End Time</th>
									<th class="elapse">Elapsed</th>
									<th class="status">Status</th>
									<th class="action">Action</th>
								</tr>
							</thead>
							<tbody>
#if ($runningFlows)
	#foreach ($flow in $runningFlows)
								<tr class="row" >
									<td class="tb-name">
										<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
									</td>
									<td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
									<td>
										<a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
									</td>
									<td>${flow.submitUser}</td>
									<td>${flow.proxyUsers}</td>
									<td>$utils.formatDate(${flow.startTime})</td>
									<td>$utils.formatDate(${flow.endTime})</td>
									<td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
									<td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
									<td></td>
								</tr>
	#end
#else
								<tr>
									<td colspan="10">No Executing Flows</td>
								</tr>
#end
							</tbody>
						</table>
					</div><!-- /panel -->
				</div><!-- /col-lg-12 -->
			</div><!-- /row -->

			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-default">
						<div class="panel-heading">Recently Finished Jobs</div>
						<table id="recentlyFinished" class="table table-striped table-bordered table-hover table-condensed executions-table">
							<thead>
								<tr>
									<th class="execid">Execution Id</th>
									<th>Flow</th>
									<th>Project</th>
									<th class="user">User</th>
									<th class="user">Proxy User</th>
									<th class="date">Start Time</th>
									<th class="date">End Time</th>
									<th class="elapse">Elapsed</th>
									<th class="status">Status</th>
									<th class="action">Action</th>
								</tr>
							</thead>
							<tbody>
#if ($recentlyFinished.isEmpty())
	#foreach ($flow in $recentlyFinished)
								<tr class="row" >
									<td class="tb-name execId">
										<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
									</td>
									<td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
									<td>
										<a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
									</td>
									<td>${flow.submitUser}</td>
									<td>${flow.proxyUsers}</td>
									<td>$utils.formatDate(${flow.startTime})</td>
									<td>$utils.formatDate(${flow.endTime})</td>
									<td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
									<td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
									<td></td>
								</tr>
	#end
#else
								<tr>
									<td colspan="10">No Recently Finished</td>
								</tr>
#end	
							</tbody>
						</table>
					</div><!-- /panel -->

				</div><!-- /col-lg-12 -->
			</div><!-- /row -->
		
#parse ("azkaban/webapp/servlet/velocity/footer.vm")

		</div><!-- /container -->
	</body>
</html>
