diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index f416d20..2306cb6 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -16,14 +16,11 @@
<!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>
- <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>
+ <head lang="en">
+#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
<script type="text/javascript">
var contextURL = "${context}";
@@ -34,103 +31,127 @@
</script>
</head>
<body>
- #set($current_page="executing")
-#parse("azkaban/webapp/servlet/velocity/nav.vm")
- <div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>
- <div class="content">
- <div id="all-jobs-content">
- <div class="section-hd">
- <h2>Executing Flows</h2>
- </div>
+#set ($current_page="executing")
+#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+
+ <div class="container">
+
+## Alert message
+
+ <div class="alert alert-dismissable" id="messaging">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+ <p id="messaging-message"></p>
+ </div>
+
+## Page header.
+
+ <div class="page-header">
+ <h1>Executing Flows</h1>
</div>
-
- <h3 class="subhead">Currently Running Jobs</h3>
- <div class="executionInfo">
- <table id="executingJobs">
- <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>
+
+## Page Content
+
+ <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>
+#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></td><td class="last">No Executing Flows</td></tr>
+ <tr>
+ <td></td>
+ <td class="last">No Executing Flows</td>
+ </tr>
#end
- </tbody>
- </table>
+ </tbody>
+ </table>
+ </div>
</div>
- <h3 class="subhead">Recently Finished Jobs</h3>
- <div class="executionInfo">
- <table id="recentlyFinished">
- <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>
+
+ <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>
+#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></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>
</div>
+
</div>
</body>
</html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index e839b26..3bc8668 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -16,7 +16,7 @@
<!DOCTYPE html>
<html>
- <head>
+ <head lang="en">
#parse ("azkaban/webapp/servlet/velocity/style2.vm")
#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
@@ -60,7 +60,7 @@
<div class="alert alert-success">$success_message</div>
#end
-## Alert message
+ ## Alert message
<div class="alert alert-dismissable" id="messaging">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
