azkaban-uncached

Merge pull request #79 from davidzchen/bootstrap_ui Remove

12/14/2013 9:54:03 PM

Changes

src/java/azkaban/webapp/servlet/velocity/nav2.vm 66(+0 -66)

src/java/azkaban/webapp/servlet/velocity/style2.vm 30(+0 -30)

src/web/css/archive.css 44(+0 -44)

src/web/css/azkaban.css 3030(+0 -3030)

src/web/js/backbone-0.5.3-min.js 33(+0 -33)

src/web/js/jquery.simplemodal.js 25(+0 -25)

src/web/js/jquery.simplemodal-1.4.4.js 716(+0 -716)

src/web/js/underscore-1.2.1-min.js 30(+0 -30)

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index cec8db1..7068095 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
@@ -51,7 +51,7 @@
 
 #set ($current_page="all")
 #set ($show_schedule="false")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -75,17 +75,21 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
 	## Page header
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>
 					<a href="${context}/executor?execid=${execid}">Flow Execution <small>$execid</small></a>
 				</h1>
 			</div>
+		</div>
+
+		<div class="container">
 
 	## Breadcrumb
-				
 			<ol class="breadcrumb">
 				<li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
 				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index 7ec5a6c..7a4997b 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 	
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
@@ -33,7 +33,7 @@
 	<body>
 
 #set ($current_page="executing")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -43,15 +43,19 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
 ## Page header.
 
-			<div class="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">
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index b9833fe..5e0b2af 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
@@ -52,7 +52,7 @@
 	<body>
 
 #set ($current_page="all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -78,16 +78,20 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 	
 	## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
 				<p>$project.description</p>
 			</div>
+		</div>
 
 	## Breadcrumbs and tabs
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-12">
 					<ol class="breadcrumb">
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index e31bc0d..240825a 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
@@ -38,7 +38,7 @@
 	<body>
 		
 #set ($current_page="history")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 			
@@ -66,12 +66,17 @@
 	#end
 #end
 
+		</div>
+
 ## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>History</h1>
 			</div>
+		</div>
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-12">
 					<div class="panel panel-default">
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 7eafaae..5ee0100 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -18,7 +18,7 @@
 <html lang="en">
 	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
@@ -35,15 +35,15 @@
 	<body>
 
 #set ($current_page="all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
 ## Page error or success message.
 
-#if($error_message != "null")
+#if ($error_message != "null")
 			<div class="alert alert-danger">$error_message</div>
-#elseif($success_message != "null")
+#elseif ($success_message != "null")
 			<div class="alert alert-success">$success_message</div>
 #end
 
@@ -55,9 +55,12 @@
 				<p id="messaging-message"></p>
 			</div>
 
+		</div>
+
 ## Page Header and project search form.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 #if ($allProjects)
 				<h1>All Projects</h1>
 				<p>My Projects</p>
@@ -66,9 +69,11 @@
 				<p>All Projects</p>
 #end
 			</div>
+		</div>
 
 ## Table of projects.
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-12">
 					<div class="panel panel-default">
diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index ba299db..bc86b0b 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -15,13 +15,12 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<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/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
+		
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jmx.view.js"></script>
 		<script type="text/javascript">
@@ -33,148 +32,183 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#set($counter=0)
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-#if($errorMsg)
-<div class="box-error-message"><pre>$errorMsg</pre></div>
-#end
+		
+#set ($current_page="all")
+#set ($counter = 0)
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/jmx">Admin JMX Http Page</span></a></h2>
+		<div class="container">
+			
+#if ($errorMsg)
+			<div class="panel panel-danger">
+				<div class="panel-heading">Error</div>
+				<div class="panel-body">
+					$errorMsg
 				</div>
 			</div>
-			<h3 class="subhead">Web Client JMX</h3>
+#end
+
+		</div>
+
+		<div class="az-page-header">
+			<div class="container">
+				<h1>Admin JMX Http Page</h1>
+			</div>
+		</div>
+
+		<div class="container">
 
-			<table id="all-jobs" class="all-jobs job-table">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-#foreach($bean in $mbeans)
-				<tr>
-					<td>${bean.keyPropertyList.get("name")}</td>
-					<td>${bean.domain}</td>
-					<td>${bean.canonicalName}</td>
-					<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</div></td>
-				</tr>
+## Web Client JMX 
 
-				<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-					<td class="expandedFlow" colspan="3">
-						<table class="innerTable">
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Web Client JMX</div>
+						<table id="all-jmx" class="table table-condensed table-bordered table-striped table-hover">
 							<thead>
 								<tr>
-									<th>Attribute Name</th>
-									<th>Value</th>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
 								</tr>
 							</thead>
-							<tbody id="expandBtn-${counter}-tbody">
-							</tbody>
-						</table>
-					</td>
+							<tbody>
+#foreach ($bean in $mbeans)
+							<tr>
+								<td>${bean.keyPropertyList.get("name")}</td>
+								<td>${bean.domain}</td>
+								<td>${bean.canonicalName}</td>
+								<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</button></td>
+							</tr>
+
+							<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+								<td class="expandedFlow" colspan="3">
+									<table class="table table-condensed table-bordered table-striped table-hover">
+										<thead>
+											<tr>
+												<th>Attribute Name</th>
+												<th>Value</th>
+											</tr>
+										</thead>
+										<tbody id="expandBtn-${counter}-tbody">
+										</tbody>
+									</table>
+								</td>
 
-					<td>
-						<div class="btn4 collapse">Collapse</div>
-					</td>
-				</tr>
-#set($counter=$counter + 1)
+								<td>
+									<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+								</td>
+							</tr>
+	#set ($counter = $counter + 1)
 #end
-				</tbody>
-			</table>
+							</tbody>
+						</table>
 
-#foreach($executor in $executorRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Executor JMX $executor.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $executor.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+					</div>
+				</div>
+			</div>
+			
+#foreach ($executor in $executorRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Executor JMX $executor.key</div>
+						<table class="remoteJMX table table-striped table-condensed table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $executor.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
 #end
+			
+#foreach ($triggerserver in $triggerserverRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Trigger Server JMX $triggerserver.key</div>
+						<table class="remoteJMX table table-condensed table-striped table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $triggerserver.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-#foreach($triggerserver in $triggerserverRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Trigger Server JMX $triggerserver.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $triggerserver.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+					</div>
+				</div>
+			</div>
 #end
 
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		</div>
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
index f6abad7..50afd9f 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
@@ -41,7 +41,7 @@
 	<body>
 
 #set ($current_page="executing")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -60,15 +60,20 @@
 	#elseif ($success_message != "null")
 			<div class="alert alert-success">$success_message</div>
 	#end
-	
+
+		</div>
+
 	## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1><a href="${context}/executor?execid=${execid}&job=${jobid}">Job Execution <small>$jobid</small></a></h1>
 			</div>
+		</div>
 	
 	## Breadcrumb
 
+		<div class="container">
 			<ol class="breadcrumb">
 				<li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
 				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index ffb9f8a..95fe515 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
@@ -59,7 +59,7 @@
 	<body>
 
 #set ($current_page="all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -83,16 +83,20 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 	
 	## Page header
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>
 					<a href="${context}/manager?project=${project.name}">$project.name</a> / 
 					<a href="${context}/manager?project=${project.name}&flow=${flowid}">$flowid</a>
 				</h1>
 			</div>
+		</div>
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 	
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index db11bdd..f32d9e1 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
 
-#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
@@ -39,7 +39,7 @@
 	<body>
 		
 #set ($current_page="all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -65,16 +65,20 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
 	## Page header
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>
 					<a href="${context}/manager?project=${project.name}">$project.name</a> / 
 					<a href="${context}/manager?project=${project.name}&flow=${flowid}">$flowid</a>
 				</h1>
 			</div>
+		</div>
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/login.vm b/src/java/azkaban/webapp/servlet/velocity/login.vm
index 62a33f3..84b5e89 100644
--- a/src/java/azkaban/webapp/servlet/velocity/login.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/login.vm
@@ -18,7 +18,7 @@
 <html lang="en">
   <head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
     <script type="text/javascript" src="${context}/js/azkaban.login.js"></script>
@@ -30,7 +30,7 @@
 
 #set ($current_page="all")
 #set ($navbar_disabled=1)
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 			<div class="row">
diff --git a/src/java/azkaban/webapp/servlet/velocity/nav.vm b/src/java/azkaban/webapp/servlet/velocity/nav.vm
index c2fef78..b0b89ac 100644
--- a/src/java/azkaban/webapp/servlet/velocity/nav.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/nav.vm
@@ -13,46 +13,54 @@
  * License for the specific language governing permissions and limitations under
  * the License.
 *#
-		<div id="header" class="header">
-#parse( "azkaban/webapp/servlet/velocity/title.vm" )
-			<script type="text/javascript">
-				function navMenuClick(url) {
-					window.location.href=url;
-				}
 
-			</script>
-
-			<ul id="nav" class="nav">
-				<li id="all-jobs-tab" #if($current_page == 'all')class="selected"#end onClick="navMenuClick('$!context/index')"><a href="$!context/index">Projects</a></li>
-				<li id="scheduled-jobs-tab" #if($current_page == 'schedule')class="selected"#end onClick="navMenuClick('$!context/schedule')"><a href="$!context/schedule">Scheduled</a></li>
-
-				<!--li id="triggers-tab" #if($current_page == 'triggers')class="selected"#end onClick="navMenuClick('$!context/triggers')"><a href="$!context/triggers">Triggers</a></li-->
-
-				<li id="executing-jobs-tab" #if($current_page == 'executing')class="selected"#end onClick="navMenuClick('$!context/executor')"><a href="$!context/executor">Executing</a></li>
-				<li id="history-jobs-tab" #if($current_page == 'history')class="selected"#end onClick="navMenuClick('$!context/history')"><a href="$!context/history">History</a></li>
-				
-				#foreach($viewer in $viewers)
-					#if(!$viewer.hidden)
-					<li #if($current_page == $viewer.pluginName) class="selected"#end onClick="navMenuClick('$!context/$viewer.pluginPath')">
-						<a href="$!context/$viewer.pluginPath">$viewer.pluginName</a>
-					</li>
-					#end
-				#end
-				
-				#foreach($triggerPlugin in $triggerPlugins)
-					#if(!$triggerPlugin.hidden)
-					<li #if($current_page == $triggerPlugin.pluginName) class="selected"#end onClick="navMenuClick('$!context/$triggerPlugin.pluginPath')">
-						<a href="$!context/$triggerPlugin.pluginPath">$triggerPlugin.pluginName</a>
-					</li>
-					#end
-				#end
-				
-			</ul>
-			
-			<div id="user-id">
-				<a>${user_id}<div id="user-down"></div></a>    
-				<div id="user-menu">
-					<ul><li><a id="logout" href="$!context?logout">logout</a></li></ul>
+    <div class="navbar navbar-inverse navbar-static-top">
+      <div class="container">
+        <div class="navbar-header">
+#if ($navbar_disabled != 1)
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+#end
+					<div class="navbar-logo">
+						<a href="${context}/">Azkaban</a>
+					</div>
+        </div>
+				<div class="navbar-left navbar-enviro">
+					<div class="navbar-enviro-name">${azkaban_name}</div>
+					<div class="navbar-enviro-server">${azkaban_label}</div>
 				</div>
-			</div>
-		</div>
+        <div class="navbar-collapse collapse">
+#if ($navbar_disabled != 1)
+          <ul class="nav navbar-nav">
+						<li#if($current_page == 'all') class="active"#end><a href="$!context/index">Projects</a></li>
+						<li#if($current_page == 'schedule') class="active"#end><a href="$!context/schedule">Scheduling</a></li>
+						<!--<li#if($current_page == 'triggers') class="active"#end><a href="$!context/triggers">Triggers</a></li>-->
+						<li#if($current_page == 'executing') class="active"#end><a href="$!context/executor">Executing</a></li>
+						<li#if($current_page == 'history') class="active"#end><a href="$!context/history">History</a></li>
+	#foreach ($viewer in $viewers)
+		#if (!$viewer.hidden)
+						<li#if($current_page == $viewer.pluginName) class="active"#end><a href="$!context/$viewer.pluginPath">$viewer.pluginName</a></li>
+		#end
+	#end
+
+	#foreach ($trigger in $triggerPlugins)
+		#if (!$trigger.hidden)
+						<li#if($current_page == $trigger.pluginName) class="active"#end><a href="$!context/$trigger.pluginPath">$trigger.pluginName</a></li>
+		#end
+	#end
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li class="dropdown">
+							<a href="#" class="dropdown-toggle" data-toggle="dropdown">${user_id} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="$!context?logout">Logout</a></li>
+              </ul>
+            </li>
+          </ul>
+#end
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index e6bcdeb..25d5cf4 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -18,7 +18,7 @@
 <html lang="en">
 	<head>
 
-#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
@@ -36,7 +36,7 @@
 	<body>
 
 #set ($current_page = "all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 	<div class="container">
 
@@ -62,12 +62,16 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
 				<p>$project.description</p>
 			</div>
+		</div>
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 	
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index 3a5a7c7..a3b437f 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
@@ -39,7 +39,7 @@
 	<body>
 
 #set ($current_page="executing")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -59,15 +59,20 @@
 			<div class="alert alert-success">$success_message</div>
 	#end
 
+		</div>
+
 	## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
 				<p>$project.description</p>
 			</div>
+		</div>
 
 	## Page content.
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 	
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index 73546c6..1aab424 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -18,7 +18,7 @@
 <html lang="en">
 	<head>
 
-#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
@@ -42,7 +42,7 @@
 	<body>
 
 #set ($current_page="all")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -68,16 +68,20 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
 	## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
 				<p>$project.description</p>
 			</div>
+		</div>
 
 	## Page content.
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 					
diff --git a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
index 81eb31f..0e47472 100644
--- a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+	<head>
 
-#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
@@ -35,7 +35,7 @@
 	<body>
 
 #set($current_page="all")
-#parse("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse("azkaban/webapp/servlet/velocity/nav.vm")
 		
 		<div class="container">
 
@@ -54,16 +54,20 @@
 	#elseif ($success_message != "null")
 			<div class="alert alert-success">$success_message</div>
 	#end
+		</div>
 
 	## Page header
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>
 					<a href="${context}/manager?project=${project.name}">$project.name</a> / 
 					<a href="${context}/manager?project=${project.name}&flow=${flowid}">$flowid</a>
 				</h1>
 			</div>
+		</div>
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
index 621dc5f..5a11331 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
@@ -15,20 +15,17 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
+
+#parse ("azkaban/webapp/servlet/velocity/style.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.css" />
 		
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
 		<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/jquery/jquery.svg.min.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.table.sort.js"></script>
@@ -46,39 +43,58 @@
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery.svg.css" />
 	</head>
 	<body>
-#set($current_page="schedule")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-		
-#if($errorMsg)
-		<div class="box-error-message">$errorMsg</div>
+#set ($current_page="schedule")
+#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>
 #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>
+	#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
-#end		
-		
-		<div id="all-scheduledFlows-content">
-			<div class="section-hd">
-				<h2>Scheduled Flows</h2>
-			</div>
-		</div>
-		
-		<div class="scheduledFlows">
-			<span class="nav-prev-week btn1" style="margin: 20px; margin-left: 50px;"><a>Previous Week</a></span>
-			<span class="nav-this-week btn1" style="margin: 20px;"><a>Today</a></span>
-			<span class="nav-next-week btn1" style="margin: 20px; margin-right: 50px;"><a>Next Week</a></span>
-			<div id="svgDivCustom">
-			
+
+	## 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>
-		
-		<div id="contextMenu">
-		</div>
+
+    <div class="az-page-header">
+      <div class="container">
+        <h1>Scheduled Flows</h1>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="pull-right">
+            <button type="button" class="nav-prev-week btn btn-default">Previous Week</button>
+            <button type="button" class="nav-this-week btn btn-default">Today</button>
+            <button type="button" class="nav-next-week btn btn-default">Next Week</button>
+          </div>
+          <div id="svgDivCustom"></div>
+        </div>
+      </div>
+      
+      <div id="contextMenu"></div>
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+    </div>
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index ee51a3c..66a2dd1 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -15,10 +15,10 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head lang="en">
+<html lang="en">
+  <head>
 
-#parse ("azkaban/webapp/servlet/velocity/style2.vm")
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
 #parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
@@ -40,7 +40,7 @@
 	<body>
 
 #set ($current_page="schedule")
-#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
 		<div class="container">
 
@@ -66,15 +66,19 @@
 				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
 				<p id="messaging-message"></p>
 			</div>
+		</div>
 
 	## Page header.
 
-			<div class="page-header">
+		<div class="az-page-header">
+			<div class="container">
 				<h1>Scheduled Flows</h1>
 			</div>
+		</div>
 
 	## Page content.
 
+		<div class="container">
 			<div class="row">
 				<div class="col-lg-12">
 					<div class="panel panel-default">
diff --git a/src/java/azkaban/webapp/servlet/velocity/style.vm b/src/java/azkaban/webapp/servlet/velocity/style.vm
index 67a7e4a..6f65f36 100644
--- a/src/java/azkaban/webapp/servlet/velocity/style.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/style.vm
@@ -14,19 +14,17 @@
  * the License.
 *#
 
-		<title>#appname()
-		</title>
-		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban.css" /> 
+    <meta charset="utf-8">
+    <title>#appname()</title>
+    
 		<link rel="shortcut icon" href="${context}/favicon.ico" />
-		<style type="text/css">
-			.enviro-name {
-				color: ${azkaban_color};
-			}
-			.header {
-				border-top-color: ${azkaban_color};
-			}
-			.nav .selected a {
-				border-bottom-color: ${azkaban_color};
-			}
-		</style>
-		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+    <!-- Bootstrap core CSS -->
+    <link href="/css/bootstrap.css" rel="stylesheet">
+    <link href="/css/bootstrap-fileinput.css" rel="stylesheet">
+    <link href="/css/bootstrap-azkaban.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="/js/html5shiv.js"></script>
+      <script src="/js/respond.min.js"></script>
+    <![endif]-->
diff --git a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
index 6ccb348..be065ec 100644
--- a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
@@ -15,19 +15,16 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
+
+#parse("azkaban/webapp/servlet/velocity/style.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.css" />
 		
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
 		<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.table.sort.js"></script>
@@ -42,58 +39,78 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="triggers")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-		
-#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		
-		
-			<div id="all-triggers-content">
-				<div class="section-hd">
-					<h2>All Triggers</h2>
-				</div>
+#set ($current_page="triggers")
+#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 class="triggers">
-				<table id="triggersTbl">
-					<thead>
-						<tr>
-							<th>ID</th>
-							<th>Source</th>
-							<th>Submitted By</th>
-							<th>Description</th>
-							<th>Status</th>
-							<!--th colspan="2" class="action ignoresort">Action</th-->
-						</tr>
-					</thead>
-					<tbody>
-						#if($triggers)
-#foreach($trigger in $triggers)
-						<tr class="row" >
 
-							<td>${trigger.triggerId}</td>
-							<td>${trigger.source}</td>
-							<td>${trigger.submitUser}</td>
-							<td>${trigger.getDescription()}</td>
-							<td>${trigger.getStatus()}</td>
-							<!--td><button id="expireTriggerBtn" onclick="expireTrigger(${trigger.triggerId})" >Expire Trigger</button></td-->
-						</tr>
+## 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>
+#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
+		</div>
+
+    <div class="az-page-header">
+      <div class="container">
+        <h1>All Triggers</h1>
+      </div>
+    </div>
+			
+    <div class="container">
+			<div class="row">
+        <div class="col-lg-12">
+          <table id="triggersTbl" class="table table-striped table-bordered table-condensed table-hover">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Source</th>
+                <th>Submitted By</th>
+                <th>Description</th>
+                <th>Status</th>
+                <!--th colspan="2" class="action ignoresort">Action</th-->
+              </tr>
+            </thead>
+            <tbody>
+#if($triggers)
+  #foreach($trigger in $triggers)
+              <tr class="row">
+                <td>${trigger.triggerId}</td>
+                <td>${trigger.source}</td>
+                <td>${trigger.submitUser}</td>
+                <td>${trigger.getDescription()}</td>
+                <td>${trigger.getStatus()}</td>
+                <!--td><button id="expireTriggerBtn" onclick="expireTrigger(${trigger.triggerId})" >Expire Trigger</button></td-->
+              </tr>
+  #end
 #else
-						<tr><td class="last">No Trigger Found</td></tr>
+              <tr><td class="last">No Trigger Found</td></tr>
 #end
-					</tbody>
-				</table>
-			</div>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+    </div>
 	</body>
 </html>
diff --git a/src/java/azkaban/webapp/servlet/velocity/viewer.vm b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
index 7d18bee..42f3393 100644
--- a/src/java/azkaban/webapp/servlet/velocity/viewer.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
@@ -17,12 +17,9 @@
 <!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>
+
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript">
@@ -41,22 +38,29 @@
 		</style>
 	</head>
 	<body>
-#set($current_page="viewer")
 
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="content">
-		
-		#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="viewer")
+#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>
+#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($viewervm)
+#parse ($viewervm)
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		
 		</div>
 	</body>
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index 55c12c3..645e769 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -182,6 +182,7 @@ table .worksheet-key {
   }
 }
 
+// Restyle navbar-inverse for Azkaban navbar.
 .navbar-inverse {
   background-image: -o-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
   background-image: -moz-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
@@ -253,3 +254,12 @@ table .worksheet-key {
   }
 }
 
+.az-page-header {
+  padding-bottom: 9px;
+  margin: 0 0 30px;
+  border-bottom: 1px solid #eeeeee;
+
+	h1 {
+		font-size: 32px;
+	}
+}
diff --git a/src/web/js/azkaban.jmx.view.js b/src/web/js/azkaban.jmx.view.js
index ee189f6..9aa63ea 100644
--- a/src/web/js/azkaban.jmx.view.js
+++ b/src/web/js/azkaban.jmx.view.js
@@ -17,37 +17,38 @@
 $.namespace('azkaban');
 
 var jmxTableView;
-azkaban.JMXTableView= Backbone.View.extend({
-  events : {
-    "click .querybtn": "queryJMX",
-    "click .collapse": "collapseRow"
-  },
-  initialize : function(settings) {
+azkaban.JMXTableView = Backbone.View.extend({
+	events: {
+		"click .query-btn": "queryJMX",
+		"click .collapse-btn": "collapseRow"
+	},
 
-  },
-  queryJMX : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
+	initialize: function(settings) {
+	},
 	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
-	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
+	queryJMX: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
 
-	var data = {"ajax":"getAllMBeanAttributes", "mBean":canonicalName};
-	if ($(target).attr("hostPort")) {
-		data.ajax = "getAllExecutorAttributes";
-		data.hostPort = $(target).attr("hostPort");
-	}
-	$.get(
-		requestURL,
-		data,
-		function(data) {
+		var data = {
+			"ajax": "getAllMBeanAttributes", 
+			"mBean": canonicalName
+		};
+		if ($(target).attr("hostPort")) {
+			data.ajax = "getAllExecutorAttributes";
+			data.hostPort = $(target).attr("hostPort");
+		}
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -64,28 +65,31 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  queryRemote : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
-	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
+			$(child).fadeIn();
+		};
+		$.get(requestURL, data, successHandler);
+	},
 	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
-	var hostPort = $(target).attr("hostport");
-	$.get(
-		requestURL,
-		{"ajax":"getAllExecutorAttributes", "mBean":canonicalName, "hostPort": hostPort},
-		function(data) {
+	queryRemote: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName = $(target).attr("domain") + ":name=" + $(target).attr("name");
+		var hostPort = $(target).attr("hostport");
+		var requestData = {
+			"ajax": "getAllExecutorAttributes", 
+			"mBean": canonicalName, 
+			"hostPort": hostPort
+		};
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -102,20 +106,22 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  collapseRow: function(evt) {
-  	$(evt.currentTarget).parent().parent().fadeOut();
-  },
-  render: function() {
-  }
+				$(child).fadeIn();
+		};
+		$.get(requestURL, requestData, successHandler);
+	},
+	
+	collapseRow: function(evt) {
+		$(evt.currentTarget).parent().parent().fadeOut();
+	},
+
+	render: function() {
+	}
 });
 
 var remoteTables = new Array();
 $(function() {
-	jmxTableView = new azkaban.JMXTableView({el:$('#all-jobs')});
+	jmxTableView = new azkaban.JMXTableView({el:$('#all-jmx')});
 	
 	$(".remoteJMX").each(function(item) {
 		var newTableView = new azkaban.JMXTableView({el:$(this)});
diff --git a/src/web/js/azkaban.triggers.view.js b/src/web/js/azkaban.triggers.view.js
index 3b9dfc7..83771e9 100644
--- a/src/web/js/azkaban.triggers.view.js
+++ b/src/web/js/azkaban.triggers.view.js
@@ -19,65 +19,56 @@ $.namespace('azkaban');
 function expireTrigger(triggerId) {
 	var triggerURL = contextURL + "/triggers"
 	var redirectURL = contextURL + "/triggers"
-	$.post(
-			triggerURL,
-			{"ajax":"expireTrigger", "triggerId":triggerId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error);
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL;
-				}
-			},
-			"json"
-	)
+	var requestData = {"ajax": "expireTrigger", "triggerId": triggerId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error);
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL;
+    }
+  };
+	$.post(triggerURL, requestData, successHandler, "json");
 }
 
 function removeSched(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSched", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error);
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL;
-				}
-			},
-			"json"
-	)
+	var requestData = {"action": "removeSched", "scheduleId": scheduleId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error);
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL;
+    }
+  };
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
 function removeSla(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSla", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error)
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL
-				}
-			},
-			"json"
-	)
+  var requestData = {"action": "removeSla", "scheduleId": scheduleId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error)
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL
+    }
+  };
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
 azkaban.ChangeSlaView = Backbone.View.extend({
-	events : {
+	events: {
 		"click" : "closeEditingTarget",
 		"click #set-sla-btn": "handleSetSla",	
 		"click #remove-sla-btn": "handleRemoveSla",
@@ -85,10 +76,11 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		"click .modal-close": "handleSlaCancel",
 		"click #addRow": "handleAddRow"
 	},
-	initialize: function(setting) {
-
+	
+  initialize: function(setting) {
 	},
-	handleSlaCancel: function(evt) {
+	
+  handleSlaCancel: function(evt) {
 		console.log("Clicked cancel button");
 		var scheduleURL = contextURL + "/schedule";
 
@@ -98,11 +90,11 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
 		var rows = tFlowRules.rows;
 		var rowLength = rows.length
-		for(var i = 0; i < rowLength-1; i++) {
+		for (var i = 0; i < rowLength-1; i++) {
 			tFlowRules.deleteRow(0);
 		}
-		
 	},
+
 	initFromSched: function(scheduleId, flowName) {
 		this.scheduleId = scheduleId;
 		
@@ -117,138 +109,123 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		var ruleBoxOptions = ["SUCCESS", "FINISH"];
 		this.ruleBoxOptions = ruleBoxOptions;
 		
-		var fetchScheduleData = {"scheduleId": this.scheduleId, "ajax":"slaInfo"};
-		
-		$.get(
-				this.scheduleURL,
-				fetchScheduleData,
-				function(data) {
-					if (data.error) {
-						alert(data.error);
-					}
-					else {
-						if (data.slaEmails) {
-							$('#slaEmails').val(data.slaEmails.join());
-						}
-						
-						var allJobNames = data.allJobNames;
-						
-						indexToName[0] = "";
-						nameToIndex[flowName] = 0;
-						indexToText[0] = "flow " + flowName;
-						for(var i = 1; i <= allJobNames.length; i++) {
-							indexToName[i] = allJobNames[i-1];
-							nameToIndex[allJobNames[i-1]] = i;
-							indexToText[i] = "job " + allJobNames[i-1];
-						}
-						
-						
-						
-						
-						
-						// populate with existing settings
-						if(data.settings) {
-							
-							var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-							
-							for(var setting in data.settings) {
-								var rFlowRule = tFlowRules.insertRow(0);
-								
-								var cId = rFlowRule.insertCell(-1);
-								var idSelect = document.createElement("select");
-								for(var i in indexToName) {
-									idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
-									if(data.settings[setting].id == indexToName[i]) {
-										idSelect.options[i].selected = true;
-									}
-								}								
-								cId.appendChild(idSelect);
-								
-								var cRule = rFlowRule.insertCell(-1);
-								var ruleSelect = document.createElement("select");
-								for(var i in ruleBoxOptions) {
-									ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
-									if(data.settings[setting].rule == ruleBoxOptions[i]) {
-										ruleSelect.options[i].selected = true;
-									}
-								}
-								cRule.appendChild(ruleSelect);
-								
-								var cDuration = rFlowRule.insertCell(-1);
-								var duration = document.createElement("input");
-								duration.type = "text";
-								duration.setAttribute("class", "durationpick");
-								var rawMinutes = data.settings[setting].duration;
-								var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
-								var minutes = parseInt(intMinutes);
-								var hours = Math.floor(minutes / 60);
-								minutes = minutes % 60;
-								duration.value = hours + ":" + minutes;
-								cDuration.appendChild(duration);
+		var fetchScheduleData = {"scheduleId": this.scheduleId, "ajax": "slaInfo"};
+    var successHandler = function(data) {
+      if (data.error) {
+        alert(data.error);
+        return;
+      }
+      if (data.slaEmails) {
+        $('#slaEmails').val(data.slaEmails.join());
+      }
+      
+      var allJobNames = data.allJobNames;
+      
+      indexToName[0] = "";
+      nameToIndex[flowName] = 0;
+      indexToText[0] = "flow " + flowName;
+      for (var i = 1; i <= allJobNames.length; i++) {
+        indexToName[i] = allJobNames[i-1];
+        nameToIndex[allJobNames[i-1]] = i;
+        indexToText[i] = "job " + allJobNames[i-1];
+      }
+      
+      // populate with existing settings
+      if (data.settings) {
+        $('.durationpick').timepicker({hourMax: 99});
+        return;
+      }
+
+      var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
+      for (var setting in data.settings) {
+        var rFlowRule = tFlowRules.insertRow(0);
+        
+        var cId = rFlowRule.insertCell(-1);
+        var idSelect = document.createElement("select");
+        for (var i in indexToName) {
+          idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
+          if (data.settings[setting].id == indexToName[i]) {
+            idSelect.options[i].selected = true;
+          }
+        }								
+        cId.appendChild(idSelect);
+        
+        var cRule = rFlowRule.insertCell(-1);
+        var ruleSelect = document.createElement("select");
+        for (var i in ruleBoxOptions) {
+          ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
+          if (data.settings[setting].rule == ruleBoxOptions[i]) {
+            ruleSelect.options[i].selected = true;
+          }
+        }
+        cRule.appendChild(ruleSelect);
+        
+        var cDuration = rFlowRule.insertCell(-1);
+        var duration = document.createElement("input");
+        duration.type = "text";
+        duration.setAttribute("class", "durationpick");
+        var rawMinutes = data.settings[setting].duration;
+        var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
+        var minutes = parseInt(intMinutes);
+        var hours = Math.floor(minutes / 60);
+        minutes = minutes % 60;
+        duration.value = hours + ":" + minutes;
+        cDuration.appendChild(duration);
 
-								var cEmail = rFlowRule.insertCell(-1);
-								var emailCheck = document.createElement("input");
-								emailCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "EMAIL") {
-										emailCheck.checked = true;
-									}
-								}
-								cEmail.appendChild(emailCheck);
-								
-								var cKill = rFlowRule.insertCell(-1);
-								var killCheck = document.createElement("input");
-								killCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "KILL") {
-										killCheck.checked = true;
-									}
-								}
-								cKill.appendChild(killCheck);
-								
-								$('.durationpick').timepicker({hourMax: 99});
-							}
-						}
-						$('.durationpick').timepicker({hourMax: 99});
-					}
-				},
-				"json"
-			);
+        var cEmail = rFlowRule.insertCell(-1);
+        var emailCheck = document.createElement("input");
+        emailCheck.type = "checkbox";
+        for (var act in data.settings[setting].actions) {
+          if (data.settings[setting].actions[act] == "EMAIL") {
+            emailCheck.checked = true;
+          }
+        }
+        cEmail.appendChild(emailCheck);
+        
+        var cKill = rFlowRule.insertCell(-1);
+        var killCheck = document.createElement("input");
+        killCheck.type = "checkbox";
+        for (var act in data.settings[setting].actions) {
+          if (data.settings[setting].actions[act] == "KILL") {
+            killCheck.checked = true;
+          }
+        }
+        cKill.appendChild(killCheck);
+        $('.durationpick').timepicker({hourMax: 99});
+      }
+      $('.durationpick').timepicker({hourMax: 99});
+    };
 		
+		$.get(this.scheduleURL, fetchScheduleData, successHandler, "json");
 		$('#slaModalBackground').show();
 		$('#sla-options').show();
 		
-//		this.schedFlowOptions = sched.flowOptions
+    //this.schedFlowOptions = sched.flowOptions
 		console.log("Loaded schedule info. Ready to set SLA.");
-
 	},
-	handleRemoveSla: function(evt) {
+	
+  handleRemoveSla: function(evt) {
 		console.log("Clicked remove sla button");
 		var scheduleURL = this.scheduleURL;
 		var redirectURL = this.scheduleURL;
-		$.post(
-				scheduleURL,
-				{"action":"removeSla", "scheduleId":this.scheduleId},
-				function(data) {
-				if (data.error) {
-						$('#errorMsg').text(data.error)
-					}
-					else {
-						window.location = redirectURL
-					}
-				"json"
-				}
-			);
-
+    var requestData = {"action": "removeSla", "scheduleId": this.scheduleId};
+    var successHandler = function(data) {
+      if (data.error) {
+        $('#errorMsg').text(data.error)
+      }
+      else {
+        window.location = redirectURL
+      }
+    };
+		$.post(scheduleURL, requestData, successHandler, "json");
 	},
-	handleSetSla: function(evt) {
-
+	
+  handleSetSla: function(evt) {
 		var slaEmails = $('#slaEmails').val();
 		var settings = {};
 		
-		
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-		for(var row = 0; row < tFlowRules.rows.length-1; row++) {
+		for (var row = 0; row < tFlowRules.rows.length - 1; row++) {
 			var rFlowRule = tFlowRules.rows[row];
 			var id = rFlowRule.cells[0].firstChild.value;
 			var rule = rFlowRule.cells[1].firstChild.value;
@@ -266,24 +243,20 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		};
 
 		var scheduleURL = this.scheduleURL;
+    var successHandler = function(data) {
+      if (data.error) {
+        alert(data.error);
+      }
+      else {
+        tFlowRules.length = 0;
+        window.location = scheduleURL;
+      }
+    };
 		
-		$.post(
-			scheduleURL,
-			slaData,
-			function(data) {
-				if (data.error) {
-					alert(data.error);
-				}
-				else {
-					tFlowRules.length = 0;
-					window.location = scheduleURL;
-				}
-			},
-			"json"
-		);
+		$.post(scheduleURL, slaData, successHandler, "json");
 	},
-	handleAddRow: function(evt) {
-		
+	
+  handleAddRow: function(evt) {
 		var indexToName = this.indexToName;
 		var nameToIndex = this.nameToIndex;
 		var indexToText = this.indexToText;
@@ -294,7 +267,7 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		
 		var cId = rFlowRule.insertCell(-1);
 		var idSelect = document.createElement("select");
-		for(var i in indexToName) {
+		for (var i in indexToName) {
 			idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
 		}
 		
@@ -302,7 +275,7 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		
 		var cRule = rFlowRule.insertCell(-1);
 		var ruleSelect = document.createElement("select");
-		for(var i in ruleBoxOptions) {
+		for (var i in ruleBoxOptions) {
 			ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
 		}
 		cRule.appendChild(ruleSelect);
@@ -324,10 +297,10 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		cKill.appendChild(killCheck);
 		
 		$('.durationpick').timepicker({hourMax: 99});
-
 		return rFlowRule;
 	},
-	handleEditColumn : function(evt) {
+
+	handleEditColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 	
 		if (this.editingTarget != curTarget) {
@@ -346,14 +319,15 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 			this.editingTarget = curTarget;
 		}
 	},
-	handleRemoveColumn : function(evt) {
+
+	handleRemoveColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 		// Should be the table
 		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
 	},
-	closeEditingTarget: function(evt) {
 
+	closeEditingTarget: function(evt) {
 	}
 });
 
@@ -362,16 +336,14 @@ var tableSorterView;
 $(function() {
 	var selected;
 
-
 	slaView = new azkaban.ChangeSlaView({el:$('#sla-options')});
 	tableSorterView = new azkaban.TableSorter({el:$('#scheduledFlowsTbl')});
-//	var requestURL = contextURL + "/manager";
+  /*
+  var requestURL = contextURL + "/manager";
 
 	// Set up the Flow options view. Create a new one every time :p
-//	 $('#addSlaBtn').click( function() {
-//		 slaView.show();
-//	 });
-
-	 
-	
+  $('#addSlaBtn').click( function() {
+    slaView.show();
+  });
+  */
 });