azkaban-uncached

Merge pull request #87 from davidzchen/bootstrap_ui UI

12/23/2013 6:32:06 PM

Changes

ISSUES 3(+0 -3)

src/tl/flowsummary.tl 52(+26 -26)

Details

ISSUES 3(+0 -3)

diff --git a/ISSUES b/ISSUES
index 9186c94..706c515 100644
--- a/ISSUES
+++ b/ISSUES
@@ -1,12 +1,9 @@
  Azkaban 3 UI Issues
  ===================
  
- - Remind people to clear cache due to JavaScript mismatches.
- - Fix graph in executing flow panel.
  - Make log view fit screen size
  - Make graph view fit screen size
  - Fix sidebar on graph views.
- - Job Summary stats table overflows.
  - Unify error messages.
  - Change chevron on My Projects list to proper expanders.
  - Redesign Project Page flows list.
diff --git a/src/java/azkaban/webapp/servlet/velocity/alerts.vm b/src/java/azkaban/webapp/servlet/velocity/alerts.vm
new file mode 100644
index 0000000..d75fe4d
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/alerts.vm
@@ -0,0 +1,21 @@
+#*
+ * 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.
+*#
+
+	#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
diff --git a/src/java/azkaban/webapp/servlet/velocity/errormsg.vm b/src/java/azkaban/webapp/servlet/velocity/errormsg.vm
new file mode 100644
index 0000000..d19f6e5
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/errormsg.vm
@@ -0,0 +1,20 @@
+#*
+ * 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.
+*#
+
+			<div class="alert alert-danger">
+        <h4>Error</h4>
+        $errorMsg
+      </div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index 544ca6f..4842f61 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -54,29 +54,14 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
+
 	## Page header
 
 		<div class="az-page-header">
@@ -162,7 +147,7 @@
 					<div class="panel panel-default">
 						<div class="panel-heading">
 							<div class="pull-right">
-								<button type="button" id="updateLogBtn" class="btn btn-xs btn-default">Refresh</button>
+								<button type="button" id="updateLogBtn" class="btn btn-xs btn-info">Refresh</button>
 							</div>
 							Flow log
 						</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index 8f69701..87b1d9e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -36,13 +36,7 @@
 #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>
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 		</div>
 
 ## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
index 277ac4a..038dcc4 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
@@ -186,7 +186,9 @@
 
 						<div class="modal-footer">
 #if (!$show_schedule || $show_schedule == 'true') 
-							<button type="button" class="btn btn-success" id="schedule-btn">Schedule</button>
+              <div class="pull-left">
+                <button type="button" class="btn btn-success" id="schedule-btn">Schedule</button>
+              </div>
 #end
 #*
 #if ($triggerPlugins.size() > 0)
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index 6ec2216..5954e96 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -23,7 +23,7 @@
 						<div class="panel-heading">
 							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
 						</div>
-						<ul id="list" class="list-group"></ul>
+						<div id="list" class="list-group"></div>
 						<div class="panel-footer">
 							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
 						</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index a8d86f9..332761d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -56,29 +56,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 	
 	## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index dce1759..f139349 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -38,34 +38,14 @@
 #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>
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
-## Page header.
+  ## Page header.
 
 		<div class="az-page-header">
       <div class="container">
@@ -109,8 +89,8 @@
               </tr>
             </thead>
             <tbody>
-#if (!$flowHistory.isEmpty())
-	#foreach ($flow in $flowHistory)
+  #if (!$flowHistory.isEmpty())
+    #foreach ($flow in $flowHistory)
               <tr>
                 <td class="tb-name execId">
                   <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
@@ -130,16 +110,16 @@
                 </td>
                 <td></td>
               </tr>
-	#end
-#else
+    #end
+  #else
               <tr>
                 <td class="last" colspan="9">No History Results Found</td>
               </tr>
-#end
+  #end
             </tbody>
           </table>
 					<ul class="pagination" id="pageSelection">
-#if ($search)
+  #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>
@@ -147,7 +127,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>
@@ -155,7 +135,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>
@@ -163,12 +143,12 @@
 						<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.
+  ## Advanced Filter Modal.
 
 			<div class="modal" id="adv-filter">
 				<div class="modal-dialog">
@@ -239,7 +219,8 @@
 				</div>
 			</div>
 			
-#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+  #parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+#end
 #parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
 		</div><!-- /container -->
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index a098c24..5f61e0e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -37,23 +37,8 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## Page error or success message.
-
-#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
-
-## Alert message
-## TODO: See if this can be removed.
-
-			<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>
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 ## Page Header and project search form.
diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index b4e3425..cbddd02 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -39,12 +39,7 @@
 		<div class="container">
 			
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #end
 
 		</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
index fc8d88b..e429314 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
@@ -43,23 +43,10 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## 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>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header.
@@ -72,7 +59,7 @@
 					</div>
 					<div class="col-lg-6">
 						<div class="pull-right az-page-header-form">
-							<a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid" class="btn btn-default">Job Properties</a>
+							<a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid" class="btn btn-info">Job Properties</a>
 						</div>
 					</div>
 				</div>
@@ -132,12 +119,14 @@
 				
 					<div class="panel panel-default" id="jobstats">
 						<div class="panel-heading">Job Stats</div>
-						<table class="table table-striped table-bordered table-hover table-condensed">
-							<thead id="statsHeader">
-							</thead>
-							<tbody id="statsBody">
-							</tbody>
-						</table>
+            <div class="panel-body panel-body-stats">
+              <table class="table table-striped table-bordered table-hover table-condensed">
+                <thead id="statsHeader">
+                </thead>
+                <tbody id="statsBody">
+                </tbody>
+              </table>
+            </div>
 					</div>
 					
 					<div class="panel panel-default" id="hiveTable">
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 3ca1afb..36f9359 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -61,27 +61,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 	
 	## Page header
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index 1626c5e..3ee11c4 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -39,29 +39,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header
@@ -115,7 +97,8 @@
 							<tbody>
 	#foreach ($parameter in $parameters)
 								<tr>
-									<td class="first">$parameter.first</td><td>$parameter.second</td>
+									<td class="property-key">$parameter.first</td>
+                  <td>$parameter.second</td>
 								</tr>
 	#end
 							</tbody>
diff --git a/src/java/azkaban/webapp/servlet/velocity/message.vm b/src/java/azkaban/webapp/servlet/velocity/message.vm
new file mode 100644
index 0000000..13b989a
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/message.vm
@@ -0,0 +1,22 @@
+#*
+ * 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.
+*#
+
+	## 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>
diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index ab7c22c..e477244 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -39,29 +39,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 	<div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index 75afd98..bec33e7 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -42,23 +42,10 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## 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>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index e09811d..aa537dc 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -46,29 +46,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
index f23f4e7..08c40bf 100644
--- a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
@@ -37,22 +37,10 @@
 #parse("azkaban/webapp/servlet/velocity/nav.vm")
 		
 		<div class="container">
-
-## 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>
+  #parse("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
+  #parse("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header
@@ -91,7 +79,8 @@
 							<tbody>
 	#foreach ($parameter in $parameters)
 								<tr>
-									<td class="first">$parameter.first</td><td>$parameter.second</td>
+									<td class="property-key">$parameter.first</td>
+                  <td>$parameter.second</td>
 								</tr>
 	#end
 							</tbody>
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
index 6285330..18ad3f7 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
@@ -47,30 +47,12 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
     <div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 #end
-
-	## 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>
 
     <div class="az-page-header">
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 16cb339..ab281d0 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -41,29 +41,11 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
-
-	## 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>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 		</div>
 
 	## Page header.
diff --git a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
index 48f6473..e2bb94e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
@@ -43,29 +43,11 @@
 #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>
-
-## Page error or success message.
-
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 #end
 		</div>
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/viewer.vm b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
index 558702e..3ff5761 100644
--- a/src/java/azkaban/webapp/servlet/velocity/viewer.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
@@ -42,20 +42,10 @@
 #parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
     <div class="container">
-
 #if ($errorMsg)
-			<div class="panel panel-danger">
-				<div class="panel-heading">Error</div>
-				<div class="panel-body">
-					$errorMsg
-				</div>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #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
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 #end
 
 #parse ($viewervm)
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index e141048..7fe2b9b 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -56,12 +56,12 @@
 }
 
 // Flow summary.
-td.flow-summary-key {
+td.property-key {
   width: 25%;
   font-weight: bold;
 }
 
-td.flow-summary-value {
+td.property-value-half {
   width: 25%;
 }
 
@@ -491,7 +491,7 @@ td {
 
 .log-viewer {
   padding: 0;
-  background-color: #f0f0f0;
+  background-color: #fcfcfc;
 
   pre {
     margin: 0;
@@ -505,3 +505,12 @@ td {
     white-space: pre;
   }
 }
+
+.panel-body-stats {
+  padding: 0;
+  overflow: auto;
+
+  table {
+    margin-bottom: 0;
+  }
+}

src/tl/flowsummary.tl 52(+26 -26)

diff --git a/src/tl/flowsummary.tl b/src/tl/flowsummary.tl
index 2485671..10a0680 100644
--- a/src/tl/flowsummary.tl
+++ b/src/tl/flowsummary.tl
@@ -2,16 +2,16 @@
           <table class="table table-bordered table-condensed table-striped">
             <tbody>
               <tr>
-                <td class="flow-summary-key">Flow name</td>
-                <td class="flow-summary-value">{flowName}</td>
-                <td class="flow-summary-key">Project name</td>
-                <td class="flow-summary-value">{projectName}</td>
+                <td class="property-key">Flow name</td>
+                <td class="property-value-half">{flowName}</td>
+                <td class="property-key">Project name</td>
+                <td class="property-value-half">{projectName}</td>
               </tr>
               <tr>
-                <td class="flow-summary-key">Run As</td>
-                <td class="flow-summary-value">{user}</td>
-                <td class="flow-summary-key">Job Types Used</td>
-                <td class="flow-summary-value">{#jobTypes}{.} {/jobTypes}</td>
+                <td class="property-key">Run As</td>
+                <td class="property-value-half">{user}</td>
+                <td class="property-key">Job Types Used</td>
+                <td class="property-value-half">{#jobTypes}{.} {/jobTypes}</td>
               </tr>
             </tbody>
           </table>
@@ -29,22 +29,22 @@
 						<table class="table table-condensed table-bordered table-striped">
 							<tbody>
 								<tr>
-									<td class="flow-summary-key">Schedule ID</td>
-									<td class="flow-summary-value">{schedule.scheduleId}</td>
-									<td class="flow-summary-key">Submitted By</td>
-									<td class="flow-summary-value">{schedule.submitUser}</td>
+									<td class="property-key">Schedule ID</td>
+									<td class="property-value-half">{schedule.scheduleId}</td>
+									<td class="property-key">Submitted By</td>
+									<td class="property-value-half">{schedule.submitUser}</td>
 								</tr>
 								<tr>
-									<td class="flow-summary-key">First Scheduled to Run</td>
-									<td class="flow-summary-value">{schedule.firstSchedTime}</td>
-									<td class="flow-summary-key">Repeats Every</td>
-									<td class="flow-summary-value">{schedule.period}</td>
+									<td class="property-key">First Scheduled to Run</td>
+									<td class="property-value-half">{schedule.firstSchedTime}</td>
+									<td class="property-key">Repeats Every</td>
+									<td class="property-value-half">{schedule.period}</td>
 								</tr>
 								<tr>
-									<td class="flow-summary-key">Next Execution Time</td>
-									<td class="flow-summary-value">{schedule.nextExecTime}</td>
-									<td class="flow-summary-key">SLA</td>
-									<td class="flow-summary-value">
+									<td class="property-key">Next Execution Time</td>
+									<td class="property-value-half">{schedule.nextExecTime}</td>
+									<td class="property-key">SLA</td>
+									<td class="property-value-half">
 									{?schedule.slaOptions}
 										true 
 									{:else} 
@@ -73,27 +73,27 @@
             <table class="table table-bordered table-condensed table-striped">
               <tbody>
 								<tr>
-									<td class="flow-summary-key">Max Map Slots from Largest Job</td>
+									<td class="property-key">Max Map Slots from Largest Job</td>
 									<td>{lastRun.maxMapSlots}</td>
                 </tr>
                 <tr>
-									<td class="flow-summary-key">Max Reduce Slots from Largest Job</td>
+									<td class="property-key">Max Reduce Slots from Largest Job</td>
 									<td>{lastRun.maxReduceSlots}</td>
 								</tr>
 								<tr>
-									<td class="flow-summary-key">Total Map Slots from All Jobs</td>
+									<td class="property-key">Total Map Slots from All Jobs</td>
 									<td>{lastRun.totalMapSlots}</td>
                 </tr>
                 <tr>
-									<td class="flow-summary-key">Total Reduce Slots from All Jobs</td>
+									<td class="property-key">Total Reduce Slots from All Jobs</td>
 									<td>{lastRun.totalReduceSlots}</td>
 								</tr>
 								<tr>
-									<td class="flow-summary-key">Total Number of Jobs</td>
+									<td class="property-key">Total Number of Jobs</td>
 									<td>{lastRun.numJobs}</td>
                 </tr>
                 <tr>
-									<td class="flow-summary-key">Longest Task Time</td>
+									<td class="property-key">Longest Task Time</td>
 									<td>{lastRun.longestTaskTime}</td>
 								</tr>
               </tbody>
diff --git a/src/web/js/azkaban.flow.job.view.js b/src/web/js/azkaban.flow.job.view.js
index cd04d42..efc62c4 100644
--- a/src/web/js/azkaban.flow.job.view.js
+++ b/src/web/js/azkaban.flow.job.view.js
@@ -17,7 +17,7 @@
 azkaban.JobListView = Backbone.View.extend({
 	events: {
 		"keyup input": "filterJobs",
-		"click li": "handleJobClick",
+		"click .job": "handleJobClick",
 		"click .resetPanZoomBtn": "handleResetPanZoom",
 		"contextmenu li": "handleContextMenuClick"
 	},
@@ -131,25 +131,16 @@ azkaban.JobListView = Backbone.View.extend({
 			}
 		});
 		
-		var ul = this.list;
-		this.jobs = $(ul);
-		
+		var list = this.list;
+		this.jobs = $(list);
 		for (var i = 0; i < nodeArray.length; ++i) {
-			var li = document.createElement("li");
-			li.jobid = nodeArray[i].id;
-			$(li).addClass('list-group-item');
-			
-			var iconDiv = document.createElement("div");
-			$(iconDiv).addClass("icon");
-			li.appendChild(iconDiv);
-			
 			var a = document.createElement("a");
+			$(a).addClass('list-group-item').addClass('job');
+      $(a).attr('href', '#');
 			$(a).text(nodeArray[i].id);
-			li.appendChild(a);
-			$(ul).append(li);
-			li.jobid = nodeArray[i].id;
-			
-			this.listNodes[nodeArray[i].id] = li;
+			$(list).append(a);
+			a.jobid = nodeArray[i].id;
+			this.listNodes[nodeArray[i].id] = a;
 		}
 		
 		this.assignInitialStatus(self);
@@ -206,11 +197,11 @@ azkaban.JobListView = Backbone.View.extend({
 		var current = this.model.get("selected");
 		
 		if (previous) {
-			$(this.listNodes[previous]).removeClass("selected");
+			$(this.listNodes[previous]).removeClass("active");
 		}
 		
 		if (current) {
-			$(this.listNodes[current]).addClass("selected");
+			$(this.listNodes[current]).addClass("active");
 		}
 	},