azkaban-uncached

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index 2306cb6..7c0a5d0 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -39,7 +39,7 @@
 
 ## Alert message
 
-			<div class="alert alert-dismissable" id="messaging">
+			<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>
@@ -54,104 +54,109 @@
 
 			<div class="row">
 				<div class="col-lg-12">
-					<h2>Currently Running Jobs</h2>
-					<table id="executingJobs" class="table table-striped">
-						<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>
+					<div class="panel panel-default">
+						<div class="panel-heading">Currently Running Jobs</div>
+						<table id="executingJobs" class="table table-striped">
+							<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>
+								<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></td>
-								<td class="last">No Executing Flows</td>
-							</tr>
+								<tr>
+									<td></td>
+									<td class="last">No Executing Flows</td>
+								</tr>
 #end
-						</tbody>
-					</table>
-				</div>
-			</div>
+							</tbody>
+						</table>
+					</div><!-- /panel -->
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
 
 			<div class="row">
 				<div class="col-lg-12">
-					<h2>Recently Finished Jobs</h2>
-
-					<table id="recentlyFinished" class="table table-striped">
-						<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>
+					<div class="panel panel-default">
+						<div class="panel-heading">Recently Finished Jobs</div>
+						<table id="recentlyFinished" class="table table-striped">
+							<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>
+								<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></td>
-								<td class="last">No Recently Finished</td>
-							</tr>
+								<tr>
+									<td></td>
+									<td class="last">No Recently Finished</td>
+								</tr>
 #end	
-						</tbody>
-					</table>
+							</tbody>
+						</table>
+					</div><!-- /panel -->
 
-				</div>
-			</div>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
 		
-		</div>
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index 8c833d2..175b1a4 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -16,14 +16,15 @@
 
 <!DOCTYPE html> 
 <html>
-	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
+	<head lang="en">
+
+#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
+		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-timepicker-addon.css" />
+
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>		
@@ -33,85 +34,106 @@
 			var currentTime = ${currentTime};
 			var timezone = "${timezone}";
 		</script>
-		
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-timepicker-addon.css" />
 	</head>
 	<body>
-		#set($current_page="history")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
-
-		#if($errorMsg)
-					<div class="box-error-message">$errorMsg</div>
-		#else
-			#if($error_message != "null")
-	                <div class="box-error-message">$error_message</div>
-			#elseif($success_message != "null")
-        	        <div class="box-success-message">$success_message</div>
-			#end
-		#end	
 		
+#set ($current_page="history")
+#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2>History</h2>
-					<a id="adv-filter-btn" class="btn1 "  href="#">Advanced Filter</a>
-					<form id="search-form" method="get">
-						<input type="hidden" name="search" value="true">
-						<input type="submit" value="Quick Search" class="search-btn">
-						<input id="searchtextbox" type="text" placeholder="flow name containing ..." value=#if($search_term) ${search_term} #else "" #end class="search-input" name="searchterm">
-					</form>
+		<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>
+
+## Page error or success message.
+
+#if ($errorMsg)
+			<div class="panel panel-danger">
+				<div class="panel-heading">Error</div>
+				<div class="panel-body">
+					$errorMsg
 				</div>
 			</div>
-			
-			<div class="executionInfo">
-				<table id="executingJobs">
-					<thead>
-						<tr>
-							<th class="execid">Execution Id</th>
-							<th>Flow</th>
-							<th>Project</th>
-							<th>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(!$flowHistory.isEmpty())
-	#foreach($flow in $flowHistory)
-						<tr class="row" >
-							<td class="tb-name execId">
-								<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
-							</td>
-							<td class="tb-name">
-								<a href="${context}/executor?execid=${flow.executionId}">${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>$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>
+#else
+	#if ($error_message != "null")
+			<div class="alert alert-danger">$error_message</div>
+	#elseif ($success_message != "null")
+			<div class="alert alert-success">$success_message</div>
+	#end
+#end
+
+## Page header.
+
+			<div class="page-header">
+				<h1>History</h1>
+			</div>
+
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">History</div>
+						<div class="panel-body">
+							<form id="search-form" method="get" class="form-inline" role="form">
+								<input type="hidden" name="search" value="true">
+								<div class="form-group">
+									<div class="input-group">
+										<input type="text" id="searchtextbox" placeholder="flow name containing ..." value=#if($search_term) ${search_term} #else "" #end class="form-control" name="searchterm">
+										<span class="input-group-btn">
+											<button class="btn btn-primary">Quick Search</button>
+											<button type="button" class="btn btn-success" id="adv-filter-btn">Advanced Filter</button>
+										</span>
+									</div>
+								</div>
+							</form>
+						</div>
+						<table id="executingJobs" class="table table-striped">
+							<thead>
+								<tr>
+									<th class="execid">Execution Id</th>
+									<th>Flow</th>
+									<th>Project</th>
+									<th>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 (!$flowHistory.isEmpty())
+	#foreach ($flow in $flowHistory)
+								<tr class="row" >
+									<td class="tb-name execId">
+										<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
+									</td>
+									<td class="tb-name">
+										<a href="${context}/executor?execid=${flow.executionId}">${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>$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 class="last" colspan="9">No History Results Found</td></tr>
+								<tr>
+									<td class="last" colspan="9">No History Results Found</td></tr>
 #end
-					</tbody>
-				</table>
-				
-				<div id="pageSelection" class="nonjavascript">
-					<ul>
-		
-						#if($search)
+							</tbody>
+						</table>
+					</div><!-- /panel -->
+					<ul class="pagination" id="pageSelection">
+#if ($search)
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}&search=true&searchterm=${search_term}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}&search=true&searchterm=${search_term}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}&search=true&searchterm=${search_term}">${page2.page}</a></li>
@@ -119,7 +141,7 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}&search=true&searchterm=${search_term}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}&search=true&searchterm=${search_term}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}&search=true&searchterm=${search_term}">Next<span class="arrow">&rarr;</span></a></li>
-						#elseif($advfilter)
+#elseif($advfilter)
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page2.page}</a></li>
@@ -127,7 +149,7 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">Next<span class="arrow">&rarr;</span></a></li>
-						#else
+#else
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}">${page2.page}</a></li>
@@ -135,67 +157,103 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}">Next<span class="arrow">&rarr;</span></a></li>
-						#end
-						
+#end
 					</ul>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
+
+## Advanced Filter Modal.
+
+			<div class="modal fade" id="adv-filter">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Advanced Filter</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="adv-filter-error-msg">$error_msg</div>
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+									<label for="projcontain" class="col-sm-2 control-label">Project</label>
+									<div class="col-sm-10">
+										<input id="projcontain" type="text" placeholder="Project name containing ..." value="" class="form-control" name="projcontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="flowcontain" class="col-sm-2 control-label">Flow</label>
+									<div class="col-sm-10">
+										<input id="flowcontain" type="text" placeholder="Flow name containing ..." value="" class="form-control" name="flowcontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="usercontain" class="col-sm-2 control-label">User</label>
+									<div class="col-sm-10">
+										<input id="usercontain" type="text" placeholder="User name containing ..." value="" class="form-control" name="usercontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="status" class="col-sm-2 control-label">Status</label>
+									<div class="col-sm-10">
+										<select id="status" class="form-control">
+											<option value=0>All Status</option>
+											<option value=10>Ready</option>
+											<option value=20>Preapring</option>
+											<option value=30>Running</option>
+											<option value=40>Paused</option>
+											<option value=50>Succeed</option>
+											<option value=60>Killed</option>
+											<option value=70>Failed</option>
+											<option value=80>Failed Finishing</option>
+											<option value=90>Skipped</option>
+											<option value=100>Disabled</option>
+											<option value=110>Queued</option>
+										</select>
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="datetimebegin" class="col-sm-2 control-label">Date between</label>
+									<div class="col-sm-10">
+										<input type="text" id="datetimebegin" value="" class="ui-datetime-container form-control"> 
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="datetimeend" class="col-sm-2 control-label">and</label>
+									<div class="col-sm-10">
+										<input type="text" id="datetimeend" value="" class="ui-datetime-container form-control"> 
+									</div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button class="btn btn-success" id="filter-btn">Filter</button>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-		
-		<!-- modal content -->
-		<div id="adv-filter" class="modal">
-			<h3>Advanced Filter</h3>
-			<div id="errorMsg" class="box-error-message">$errorMsg</div>
 			
-			<div class="message">
-				<fieldset>
-					<dl>
-						<dt><label for="path" >Project Name</label></dt>
-						<dd><input id="projcontain" type="text" placeholder="project name containing ..." value = ""  class="filter-input" name="projcontain"/></dd>
-						<dt><label for="path">Flow Name</label></dt>
-						<dd><input id="flowcontain" type="text" placeholder="flow name containing ..." value = ""  class="filter-input" name="flowcontain"/></dd>
-						<dt><label for="path">User Name</label></dt>
-						<dd><input id="usercontain" type="text" placeholder="user name containing ..." value = ""  class="filter-input" name="usercontain"/></dd>
-						<dt><label for="path">Status</label></dt>
-						<!--dd><input id="status" type="text" placeholder="Flow status is ..." value = ""  class="filter-input" name="status"/></dd-->
-						<dd>
-							<select id="status">
-								<option value=0>All Status</option>
-								<option value=10>Ready</option>
-								<option value=20>Preapring</option>
-								<option value=30>Running</option>
-								<option value=40>Paused</option>
-								<option value=50>Succeed</option>
-								<option value=60>Killed</option>
-								<option value=70>Failed</option>
-								<option value=80>Failed Finishing</option>
-								<option value=90>Skipped</option>
-								<option value=100>Disabled</option>
-								<option value=110>Queued</option>
-							</select>
-						</dd>
-						<dt>Date between</dt>
-						<dd><div class="ui-datetime-container"> 
-					 		<input type="text" name="basic_example_1" id="datetimebegin" value="" /> 
-						</div></dd>	
-						<!--dd><input type="text" class="ui-datetime-container" id="datetimebegin" value=""/></dd-->
-						<dt>and</dt>
-						<dd><input type="text" class="ui-datetime-container" id="datetimeend" value=""/></dd>
-					</dl>
-				</fieldset>
-			</div>
-			<div class="actions">
-				<a class="yes btn2" id="filter-btn" href="#">Filter</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-			</div>
-			<div id="invalid-session" class="modal">
-				<h3>Invalid Session</h3>
-				<p>Session has expired. Please re-login.</p>
-				<div class="actions">
-					<a class="yes btn2" id="login-btn" href="#">Re-login</a>
+## Modal dialog to be displayed when the user sesion is invalid.
+			
+			<div class="modal fade" id="invalid-session-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Invalid Session</h4>
+						</div>
+						<div class="modal-body">
+							<p>Session has expired. Please re-login.</p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" id="login-btn">Re-login</button>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-		
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
-</html>
+<html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 2887e91..1ebbf41 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -50,7 +50,7 @@
 ## Alert message
 ## TODO: See if this can be removed.
 
-			<div class="alert alert-dismissable" id="messaging">
+			<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>
diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index 39789a8..ab892ff 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -58,7 +58,7 @@
 
 ## Alert message
 
-			<div class="alert alert-dismissable" id="messaging">
+			<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>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index 8837399..8f01d24 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -64,7 +64,7 @@
 
 	## Alert message
 
-			<div class="alert alert-dismissable" id="messaging">
+			<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>
@@ -156,7 +156,7 @@
 				</div>
 			</div>
 
-## Modal dialog to be displayed when the user sesion is invalid. -->
+## Modal dialog to be displayed when the user sesion is invalid.
 			
 			<div class="modal fade" id="invalid-session-modal">
 				<div class="modal-dialog">
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 3bc8668..ee51a3c 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -62,7 +62,7 @@
 
 	## Alert message
 
-			<div class="alert alert-dismissable" id="messaging">
+			<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>
@@ -77,50 +77,53 @@
 
 			<div class="row">
 				<div class="col-lg-12">
-					<table id="scheduledFlowsTbl" class="table table-striped">
-						<thead>
-							<tr>
-								<!--th class="execid">Execution Id</th-->
-								<th>ID</th>
-								<th>Flow</th>
-								<th>Project</th>
-								<th>Submitted By</th>
-								<th class="date">First Scheduled to Run</th>
-								<th class="date">Next Execution Time</th>
-								<th class="date">Repeats Every</th>
-								<th>Has SLA</th>
-								<th colspan="2" class="action ignoresort">Action</th>
-							</tr>
-						</thead>
-						<tbody>
+					<div class="panel panel-default">
+						<div class="panel-heading">Scheduled Flows</div>
+						<table id="scheduledFlowsTbl" class="table table-striped">
+							<thead>
+								<tr>
+									<!--th class="execid">Execution Id</th-->
+									<th>ID</th>
+									<th>Flow</th>
+									<th>Project</th>
+									<th>Submitted By</th>
+									<th class="date">First Scheduled to Run</th>
+									<th class="date">Next Execution Time</th>
+									<th class="date">Repeats Every</th>
+									<th>Has SLA</th>
+									<th colspan="2" class="action ignoresort">Action</th>
+								</tr>
+							</thead>
+							<tbody>
 	#if(!$schedules.isEmpty())
 		#foreach($sched in $schedules)
-							<tr>
-								<td>${sched.scheduleId}</td>
-								<td class="tb-name">
-									<a href="${context}/manager?project=${sched.projectName}&flow=${sched.flowName}">${sched.flowName}</a>
-								</td>
-								<td>
-									<a href="${context}/manager?project=${sched.projectName}">${sched.projectName}</a>
-								</td>
-								<td>${sched.submitUser}</td>
-								<td>$utils.formatDateTime(${sched.firstSchedTime})</td>
-								<td>$utils.formatDateTime(${sched.nextExecTime})</td>
-								<td>$utils.formatPeriod(${sched.period})</td>
-								<td>#if(${sched.slaOptions}) true #else false #end</td>
-								<td><button type="button" id="removeSchedBtn" class="btn btn-sm btn-danger" onclick="removeSched(${sched.scheduleId})" >Remove Schedule</button></td>
-								<td><button type="button" id="addSlaBtn" class="btn btn-sm btn-primary" onclick="slaView.initFromSched(${sched.scheduleId}, '${sched.flowName}')" >Set SLA</button></td>
-							</tr>
+								<tr>
+									<td>${sched.scheduleId}</td>
+									<td class="tb-name">
+										<a href="${context}/manager?project=${sched.projectName}&flow=${sched.flowName}">${sched.flowName}</a>
+									</td>
+									<td>
+										<a href="${context}/manager?project=${sched.projectName}">${sched.projectName}</a>
+									</td>
+									<td>${sched.submitUser}</td>
+									<td>$utils.formatDateTime(${sched.firstSchedTime})</td>
+									<td>$utils.formatDateTime(${sched.nextExecTime})</td>
+									<td>$utils.formatPeriod(${sched.period})</td>
+									<td>#if(${sched.slaOptions}) true #else false #end</td>
+									<td><button type="button" id="removeSchedBtn" class="btn btn-sm btn-danger" onclick="removeSched(${sched.scheduleId})" >Remove Schedule</button></td>
+									<td><button type="button" id="addSlaBtn" class="btn btn-sm btn-primary" onclick="slaView.initFromSched(${sched.scheduleId}, '${sched.flowName}')" >Set SLA</button></td>
+								</tr>
 
 		#end
 	#else
-							<tr>
-								<td class="last">No scheduled flow found.</td>
-							</tr>
+								<tr>
+									<td class="last">No scheduled flow found.</td>
+								</tr>
 	#end
-						</tbody>
-					</table>
-				</div>
+							</tbody>
+						</table>
+					</div><!-- /panel -->
+				</div><!-- /col-lg-12 -->
 			</div><!-- /row -->
 
 ## Set SLA modal.
@@ -171,6 +174,8 @@
 			</div>
 #end
 
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
 		</div>
 	</body>
 </html>
diff --git a/src/web/css/bootstrap-azkaban.css b/src/web/css/bootstrap-azkaban.css
index 28c7804..c1719fa 100644
--- a/src/web/css/bootstrap-azkaban.css
+++ b/src/web/css/bootstrap-azkaban.css
@@ -1,3 +1,7 @@
 .modal-wide .modal-dialog {
 	width: 80%; /* or whatever you wish */
 }
+
+.alert-messaging {
+	display: none;
+}
diff --git a/src/web/js/azkaban.history.view.js b/src/web/js/azkaban.history.view.js
index d1b99c0..ebd2179 100644
--- a/src/web/js/azkaban.history.view.js
+++ b/src/web/js/azkaban.history.view.js
@@ -21,6 +21,7 @@ azkaban.AdvFilterView = Backbone.View.extend({
 	events: {
 		"click #filter-btn": "handleAdvFilter"
 	},
+	
 	initialize: function(settings) {
 		$( "#datetimebegin" ).datetimepicker({
 			dateFormat: "mm/dd/yy",
@@ -32,76 +33,49 @@ azkaban.AdvFilterView = Backbone.View.extend({
 			separator: '-',
 			timeFormat: "HH:mm"
 		});
-		$("#errorMsg").hide();
+		$("#adv-filter-error-msg").hide();
 	},
+	
 	handleAdvFilter: function(evt) {
 		console.log("handleAdv");
 		var projcontain = $('#projcontain').val();
 		var flowcontain = $('#flowcontain').val();
 		var usercontain = $('#usercontain').val();
 		var status = $('#status').val();
-		var begin  = $('#datetimebegin').val();
-		var end    = $('#datetimeend').val();
+		var begin	= $('#datetimebegin').val();
+		var end		= $('#datetimeend').val();
 		
 		console.log("filtering history");
 
 		var historyURL = contextURL + "/history"
 		var redirectURL = contextURL + "/schedule"	
-		
 
 		var requestURL = historyURL + "?advfilter=true" + "&projcontain=" + projcontain + "&flowcontain=" + flowcontain + "&usercontain=" + usercontain + "&status=" + status + "&begin=" + begin + "&end=" + end ; 
 		window.location = requestURL;
-		
-//		$.get(
-//			historyURL,
-//			{"action": "advfilter", "projre": projre, "flowre": flowre, "userre": userre},
-//			function(data) {
-//				if (data.action == "redirect") {
-//                    window.location = data.redirect;
-//                }
-//			},
-//			"json"
-//		)
-//		$.ajax({
-//        	async: "false",
-//        	url: "history",
-//        	dataType: "json",
-//        	type: "POST",
-//        	data: {
-//        	action:"advfilter",
-//        	projre:projre,
-//        	flowre:flowre,
-//        	userre:userre
-//        	},
-//        	success: function(data) {
-//        		if (data.redirect) {
-//               		window.location = data.redirect;
-//            	}
-//        	}
-//        })
+
+		/*
+		var requestData = {
+			"action": "advfilter", 
+			"projre": projre, 
+			"flowre": flowre, 
+			"userre": userre
+		};
+		var successHandler = function(data) {
+			if (data.action == "redirect") {
+				window.location = data.redirect;
+			}
+		};
+		$.get(historyURL, requestData, successHandler, "json");
+	*/
 	},
-	render: function(){
+
+	render: function() {
 	}
 });
 
 $(function() {
-
 	filterView = new azkaban.AdvFilterView({el: $('#adv-filter')});
-
-	 $('#adv-filter-btn').click( function() {
-		$('#adv-filter').modal({
-        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-          position: ["20%",],
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '500px'
-          },
-          onShow: function (dialog) {
-            var modal = this;
-            $("#errorMsg").hide();
-          }
-        });
-    });
-
+	$('#adv-filter-btn').click( function() {
+		$('#adv-filter').modal();
+	});
 });
diff --git a/src/web/js/azkaban.main.view.js b/src/web/js/azkaban.main.view.js
index a91ff68..e0d10c6 100644
--- a/src/web/js/azkaban.main.view.js
+++ b/src/web/js/azkaban.main.view.js
@@ -122,7 +122,6 @@ azkaban.ProjectHeaderView = Backbone.View.extend({
 			$('#messaging-message').html(settings.successMsg);
 		}
 		else {
-			$('#messaging').hide();
 			$('#messaging').removeClass("alert-success");
 			$('#messaging').removeClass("alert-danger");
 		}
diff --git a/src/web/js/azkaban.permission.view.js b/src/web/js/azkaban.permission.view.js
index ce30349..fbd332c 100644
--- a/src/web/js/azkaban.permission.view.js
+++ b/src/web/js/azkaban.permission.view.js
@@ -309,7 +309,6 @@ azkaban.ChangePermissionView= Backbone.View.extend({
 });
 
 $(function() {
-	$('#messaging').hide();
 	permissionTableView = new azkaban.PermissionTableView({
 		el: $('#permissions-table'), 
 		group: false, 
diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 7bd40ba..0ccd2d5 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -349,7 +349,6 @@ azkaban.ProjectSummaryView = Backbone.View.extend({
 });
 
 $(function() {
-	$('#messaging').hide();
 	projectView = new azkaban.ProjectView({el:$('#project-options')});
 	uploadView = new azkaban.UploadProjectView({el:$('#upload-project-modal')});
 	flowTableView = new azkaban.FlowTableView({el:$('#flow-tabs')});
diff --git a/src/web/js/azkaban.scheduled.view.js b/src/web/js/azkaban.scheduled.view.js
index bdf13db..25cad1c 100644
--- a/src/web/js/azkaban.scheduled.view.js
+++ b/src/web/js/azkaban.scheduled.view.js
@@ -62,7 +62,6 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 	},
 	
 	initialize: function(setting) {
-		$('#messaging').hide();
 		$('#sla-options').on('hidden.bs.modal', function() {
 			slaView.handleSlaCancel();
 		});