azkaban-uncached

Merge pull request #80 from davidzchen/bootstrap_ui New

12/15/2013 10:42:03 PM

Changes

src/web/js/azkaban.nav.js 61(+0 -61)

src/web/js/azkaban.staging.flow.view.js 1023(+0 -1023)

Details

diff --git a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
index 890fc79..ba37274 100644
--- a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
+++ b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
@@ -116,9 +116,6 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 			else if (hasParam(req, "permissions")) {
 				handlePermissionPage(req, resp, session);
 			}
-			else if (hasParam(req, "staging")) {
-				handleFlowStagingPage(req, resp, session);
-			}
 			else if (hasParam(req, "prop")) {
 				handlePropertyPage(req, resp, session);
 			}
@@ -1131,48 +1128,6 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		page.render();
 	}
 
-	private void handleFlowStagingPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException {
-		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/flowstagingpage.vm");
-		String projectName = getParam(req, "project");
-		String flowName = getParam(req, "flow");
-		
-		String retryFlow = null;
-		if (hasParam(req, "retry")) {
-			retryFlow = getParam(req, "retry");
-		}
-		
-		User user = session.getUser();
-		Project project = null;
-		Flow flow = null;
-		try {
-			project = projectManager.getProject(projectName);
-			
-			if (project == null) {
-				page.add("errorMsg", "Project " + projectName + " not found.");
-			}
-			else {
-				if (!hasPermission(project, user, Type.EXECUTE)) {
-					throw new AccessControlException( "No permission Project " + projectName + " to Execute.");
-				}
-				
-				page.add("project", project);
-				
-				flow = project.getFlow(flowName);
-				if (flow == null) {
-					page.add("errorMsg", "Flow " + flowName + " not found.");
-				}
-				
-				page.add("flowid", flow.getId());
-				page.add("retry", retryFlow);
-			}
-		}
-		catch (AccessControlException e) {
-			page.add("errorMsg", e.getMessage());
-		}
-		
-		page.render();
-	}
-	
 	private void handleProjectPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException {
 		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/projectpage.vm");
 		String projectName = getParam(req, "project");
diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index 7068095..891f19c 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -27,11 +27,10 @@
 		<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.job.status.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.exflow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.job.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.svg.graph.view.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.exflow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -93,7 +92,7 @@
 			<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>
-				<li><a href="${context}/executor?execid=${execid}"><strong>Execution</strong> $execid</a></li>
+				<li class="active"><strong>Execution</strong> $execid</li>
 			</ol>
 		
 	## Flow status
@@ -114,9 +113,9 @@
 
 	## Tabs and buttons.
 
-			<div class="row">
+			<div class="row" id="headertabs">
 				<div class="col-lg-8">
-					<ul class="nav nav-pills" id="headertabs">
+					<ul class="nav nav-pills">
 						<li id="graphViewLink"><a href="#graph">Graph</a></li>
 						<li id="jobslistViewLink"><a href="#jobslist">Job List</a></li>
 						<li id="flowLogViewLink"><a href="#log">Flow Log</a></li>
@@ -124,11 +123,11 @@
 				</div>
 				<div class="col-lg-4">
 					<div class="pull-right">
-						<button id="pausebtn" class="btn btn-primary">Pause</button>
-						<button id="resumebtn" class="btn btn-primary">Resume</button>
-						<button id="cancelbtn" class="btn btn-danger">Cancel</button>
-						<button id="retrybtn" class="btn btn-success">Retry Failed</button>
-						<button id="executebtn" class="btn btn-success">Prepare Execution</button>
+						<button type="button" id="pausebtn" class="btn btn-primary">Pause</button>
+						<button type="button" id="resumebtn" class="btn btn-primary">Resume</button>
+						<button type="button" id="cancelbtn" class="btn btn-danger">Cancel</button>
+						<button type="button" id="retrybtn" class="btn btn-success">Retry Failed</button>
+						<button type="button" id="executebtn" class="btn btn-success">Prepare Execution</button>
 					</div>
 					<div class="clearfix"></div>
 				</div>
@@ -190,11 +189,14 @@
 						<div class="modal-body" id="messageDiv">
 							<p id="messageBox"></p>
 						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
+						</div>
 					</div>
 				</div>
 			</div>
 
-		<div id="contextMenu"></div>
+      <div id="contextMenu"></div>
 
 	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
 	#parse ("azkaban/webapp/servlet/velocity/flowexecutionpanel.vm")
diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index 7a4997b..883344b 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -21,7 +21,6 @@
 #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">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
index b752a56..1b0fd31 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
@@ -59,7 +59,7 @@
 ## SVG graph panel.
 
 									<div id="svg-div-custom" class="side-panel">
-										<svg class="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
+										<svg id="flow-executing-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
 										</svg>
 									</div>
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
index c6e79fd..6ec2216 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -30,8 +30,8 @@
 					</div>
 				</div>
 				<div class="col-lg-8">
-					<div id="svgDiv" class="well">
-						<svg id="svgGraph" class="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed" >
+					<div id="svgDiv" class="well well-clear well-sm">
+						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
 						</svg>
 					</div>
 				</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 5e0b2af..cb48fbc 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -28,11 +28,10 @@
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.common.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.flow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.job.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.graph.view.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.flow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -84,7 +83,7 @@
 
 		<div class="az-page-header">
 			<div class="container">
-				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
+        <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <small>$flowid</small></a></h1>
 				<p>$project.description</p>
 			</div>
 		</div>
@@ -92,14 +91,10 @@
 	## Breadcrumbs and tabs
 
 		<div class="container">
-			<div class="row">
-				<div class="col-lg-12">
-					<ol class="breadcrumb">
-						<li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
-						<li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
-					</ol>
-				</div>
-			</div>
+      <ol class="breadcrumb">
+        <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+        <li class="active"><strong>Flow</strong> $flowid</li>
+      </ol>
 
 			<div class="row">
 				<div class="col-lg-8">
diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index 240825a..bb85769 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -27,7 +27,6 @@
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>		
 		<script type="text/javascript" src="${context}/js/azkaban.history.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 5ee0100..3b99772 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -22,7 +22,6 @@
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.main.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -63,10 +62,8 @@
 			<div class="container">
 #if ($allProjects)
 				<h1>All Projects</h1>
-				<p>My Projects</p>
 #else
 				<h1>My Projects</h1>
-				<p>All Projects</p>
 #end
 			</div>
 		</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index bc86b0b..b4e3425 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -21,7 +21,6 @@
 #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">
 			var contextURL = "${context}";
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
index 50afd9f..639a70e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
@@ -22,7 +22,6 @@
 #parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jobdetails.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -78,17 +77,25 @@
 				<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>
 				<li><a href="${context}/executor?execid=${execid}#jobslist"><strong>Execution</strong> $execid</a></li>
-				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid"><strong>Job</strong> $jobid</a></li>
+        <li class="active"><strong>Job</strong> $jobid</li>
 			</ol>
-
-	## Tabs
-					
-			<ul class="nav nav-tabs" id="headertabs">
-				<li id="jobSummaryViewLink"><a href="#jobsummary">Summary</a></li>
-				<li id="jobLogViewLink"><a href="#joblog">Log</a></li>
-				<li><a href="${context}/pigvisualizer?execid=${execid}&jobid=${jobid}">Visualization</a></li>
-			</ul>
 			
+      <div class="row">
+				<div class="col-lg-8">
+					<ul class="nav nav-pills" id="headertabs">
+            <li id="jobSummaryViewLink"><a href="#jobsummary">Summary</a></li>
+            <li id="jobLogViewLink"><a href="#joblog">Log</a></li>
+            <li><a href="${context}/pigvisualizer?execid=${execid}&jobid=${jobid}">Visualization</a></li>
+					</ul>
+				</div>
+				<div class="col-lg-4">
+					<div class="pull-right">
+            <a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid" class="btn btn-default">Job Properties</a>
+					</div>
+					<div class="clearfix"></div>
+				</div>
+			</div>
+
 	## Log content.
 
 			<div class="row" id="jobLogView">
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 95fe515..7a58cf6 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -21,7 +21,6 @@
 #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/d3.v3.min.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jobhistory.view.js"></script>
diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index f32d9e1..fc2c378 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -23,7 +23,6 @@
 
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jobedit.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -71,25 +70,23 @@
 
 		<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>
+        <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <small>$jobid</small></a></h1>
 			</div>
 		</div>
 
 		<div class="container">
-			<div class="row">
-				<div class="col-lg-8">
+	
+  ## Breadcrumb
 
-	## Breadcrumb
+      <ol class="breadcrumb">
+        <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+        <li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+        <li class="active"><strong>Job</strong> $jobid</li>
+      </ol>
 
-					<ol class="breadcrumb">
-						<li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
-						<li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
-						<li class="active"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}"><strong>Job</strong> $jobid</a></li>
-					</ol>
-				
+			<div class="row">
+				<div class="col-lg-8">
+	
 	#set ($job_page="properties")
 	#parse ("azkaban/webapp/servlet/velocity/jobnav.vm")
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index 25d5cf4..1106a2b 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -21,7 +21,6 @@
 #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.permission.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -145,7 +144,11 @@
 										</tr>
 		#end
 	#else
-										<tr><td class="last">No Users Found.</td></tr>
+    #if ($isAdmin)
+										<tr><td colspan="7">No Users Found.</td></tr>
+    #else
+										<tr><td colspan="6">No Users Found.</td></tr>
+    #end
 	#end
 									</tbody>
 								</table>
@@ -200,7 +203,11 @@
 										</tr>
 		#end
 	#else
-										<tr><td class="last">No Groups Found.</td></tr>
+    #if ($isAdmin)
+										<tr><td colspan="7">No Groups Found.</td></tr>
+    #else
+										<tr><td colspan="6">No Groups Found.</td></tr>
+    #end
 	#end
 									</tbody>
 								</table>
@@ -224,13 +231,17 @@
 		#foreach ($proxyUser in $proxyUsers)
 										<tr>
 											<td class="tb-username">#if($proxyUser == $username) ${proxyUser} <span class="sublabel">(you)</span> #else $proxyUser #end</td>
-			#if($isAdmin)
+			#if ($isAdmin)
 											<td><button id="proxy-${proxyUser}" name="${proxyUser}" class="btn btn-xs btn-primary">Remove</button></td>
 			#end
 										</tr>
 		#end
 	#else
-										<tr><td class="last">No Proxy User Found.</td></tr>
+    #if ($isAdmin)
+										<tr><td colspan="2">No Proxy User Found.</td></tr>
+    #else
+										<tr><td>No Proxy User Found.</td></tr>
+    #end
 	#end
 									</tbody>
 								</table>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index a3b437f..9d21afe 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -23,7 +23,6 @@
 
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.projectlog.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index 1aab424..49b652d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -25,7 +25,6 @@
 		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban-svg.css" />
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.project.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -79,18 +78,19 @@
 			</div>
 		</div>
 
+  
+	## Breadcrumb
+
+    <div class="container">
+      <ol class="breadcrumb">
+        <li class="active"><strong>Project</strong> $project.name</li>
+      </ol>
+
 	## Page content.
 
-		<div class="container">
 			<div class="row">
 				<div class="col-lg-8">
 					
-	## Breadcrumb
-
-					<ol class="breadcrumb">
-						<li class="active"><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
-					</ol>
-
 	#set ($project_page = "flows")
 	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
index 0e47472..e9af077 100644
--- a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
@@ -21,7 +21,6 @@
 #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">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
index 5a11331..6285330 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
@@ -29,7 +29,6 @@
 		<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>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.schedule.svg.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 66a2dd1..361da87 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -27,7 +27,6 @@
 		<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>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.scheduled.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -121,7 +120,7 @@
 		#end
 	#else
 								<tr>
-									<td class="last">No scheduled flow found.</td>
+									<td colspan="10">No scheduled flow found.</td>
 								</tr>
 	#end
 							</tbody>
diff --git a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
index be065ec..ff0b457 100644
--- a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
@@ -28,7 +28,6 @@
 		<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>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.triggers.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
diff --git a/src/java/azkaban/webapp/servlet/velocity/viewer.vm b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
index 42f3393..558702e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/viewer.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
@@ -21,7 +21,6 @@
 #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">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index 645e769..f7a1fe1 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -1,26 +1,26 @@
 // Wide modal used for certain panels such as executing flow panel.
 .modal-wide .modal-dialog {
-	width: 80%;
+  width: 80%;
 }
 
 // Hide messaging alert by default.
 .alert-messaging {
-	display: none;
+  display: none;
 }
 
 // Add additional space under navs.
 .nav-tabs, .nav-pills {
-	margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 // Flow panel heading.
 .flow-expander {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 // Flow summary.
 table .worksheet-key {
-	width: 25%;
+  width: 25%;
 }
 
 // Job table.
@@ -93,52 +93,55 @@ table .worksheet-key {
 
 // Table of executions.
 .executions-table {
-  th.date {
-    width: 140px;
-  }
+  th {
+    &.date {
+      width: 140px;
+    }
 
-  th.execid {
-    width: 100px;
-  }
+    &.execid {
+      width: 100px;
+    }
 
-  th.project {
-    width: 200px;
-  }
+    &.project {
+      width: 200px;
+    }
 
-  th.user {
-    width: 60px;
-  }
+    &.user {
+      width: 60px;
+    }
 
-  th.elapse {
-    width: 90px;
-  }
+    &.elapse {
+      width: 90px;
+    }
 
-  th.status {
-    width: 100px;
-  }
+    &.status {
+      width: 100px;
+    }
 
-  th.details {
-    width: 10px;
-  }
+    &.details {
+      width: 10px;
+    }
 
-  th.action {
-    width: 20px;
+    &.action {
+      width: 20px;
+    }
   }
 
-  td.timeline {
-    width: 280px;
-    padding: 0px;
-    height: 100%;
-    vertical-align: bottom;
-    margin: 0px;
-  }
+  td {
+    &.timeline {
+      width: 280px;
+      padding: 0px;
+      height: 100%;
+      vertical-align: bottom;
+      margin: 0px;
+    }
 
-  td.execId {
-    font-weight: bold;
+    &.execId {
+      font-weight: bold;
+    }
   }
 }
 
-
 .navbar-logo {
   float: left;
   padding: 15px 15px;
@@ -189,11 +192,11 @@ table .worksheet-key {
   background-image: -webkit-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
   background-image: -ms-linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%);
   background-image: -webkit-gradient(
-   	linear,
-   	left bottom,
-   	left top,
-   	color-stop(0.33, rgb(56,56,56)),
-   	color-stop(0.66, rgb(73,73,73))
+     linear,
+     left bottom,
+     left top,
+     color-stop(0.33, rgb(56,56,56)),
+     color-stop(0.66, rgb(73,73,73))
   );
   background-image: linear-gradient(bottom, rgb(56,56,56) 33%, rgb(73,73,73) 66%); 
   border-top: 5px solid #ff3601;
@@ -259,7 +262,167 @@ table .worksheet-key {
   margin: 0 0 30px;
   border-bottom: 1px solid #eeeeee;
 
-	h1 {
-		font-size: 32px;
-	}
+  h1 {
+    font-size: 32px;
+  }
+}
+
+.contextMenu {
+  position: absolute;
+  background-color: #FFF;
+  border: 1px solid #DDD;
+  -moz-box-shadow: 2px 2px 5px #888;
+  -webkit-box-shadow: 2px 2px 5px #888;
+  box-shadow: 2px 2px 5px #888;
+  z-index: 2010;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    &.menuitem {
+      background-color: #FFF;
+      padding: 3px 20px;
+      min-width: 50px;
+      font-size: 10pt;
+      cursor: pointer;
+    
+      .expandSymbol {
+        background-image: url("../css/images/ui-icons_cccccc_256x240.png");
+        background-position: -32px -16px;
+        height: 16px;
+        width: 16px;
+        float:right;
+      }
+      
+      &:hover {
+        background-color: #555;
+        color: #FFF;
+      }
+    }
+
+    &.break {
+      border-bottom: 1px solid #BBB;
+      margin: 2px 5px;
+    }
+  }
+}
+
+.well-clear {
+  background-color: transparent;
+}
+
+#flow-graph {
+  width: 750px;
+  height: 500px;
+}
+
+#flow-executing-graph {
+  width: 750px;
+  height: 500px;
+}
+
+.flow-progress {
+	width: 280px;
+	margin: 4px;
+  background-color: #f5f5f5;
+  height: 24px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.flow-progress-bar {
+	height: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+
+  &.attempt {
+    opacity: 0.70;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.SUCCEEDED {
+    background-color: #82b859;
+  }
+
+  &.FAILED {
+    background-color: #c82123;
+  }
+
+  &.RUNNING {
+    background-color: #3398cc;	
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 40px 40px;
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+            animation: progress-bar-stripes 2s linear infinite;
+  }
+
+  &.QUEUED {
+    background-color: #009fc9;
+  }
+}
+
+td {
+  .status {
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+
+    padding: 2px 2px;
+    color: #FFF;
+    text-align: center;
+    margin-top: 2px;
+    
+    &.SUCCEEDED {
+      background-color: #82b859;
+    }
+
+    &.FAILED {
+      background-color: #c82123;
+    }
+
+    &.PAUSED {
+      background-color: #c82123;
+    }
+
+    &.READY {
+      background-color: #ccc;
+    }
+
+    &.RUNNING {
+      background-color: #3398cc;	
+    }
+
+    &.FAILED_FINISHING {
+      background-color: #f19153;	
+    }
+
+    &.DISABLED {
+      background-color: #aaa;	
+    }
+
+    &.SKIPPED {
+      background-color: #aaa;	
+    }
+
+    &.KILLED {
+      background-color: #cc0000;
+    }
+
+    &.UNKNOWN {
+      background-color: #ccc;
+    }
+  }
 }
diff --git a/src/web/js/azkaban.context.menu.js b/src/web/js/azkaban.context.menu.js
index 0654c2b..0e92dd2 100644
--- a/src/web/js/azkaban.context.menu.js
+++ b/src/web/js/azkaban.context.menu.js
@@ -17,16 +17,18 @@
 $.namespace('azkaban');
 
 azkaban.ContextMenuView = Backbone.View.extend({
-	events :  {
+	events: {
 	},
-	initialize : function(settings) {
+	
+  initialize: function(settings) {
 		var div = this.el;
 		$('body').click(function(e) {
 			$(".contextMenu").remove();
 		});
 		$('body').bind("contextmenu", function(e) {$(".contextMenu").remove()});
 	},
-	show : function(evt, menu) {
+	
+  show: function(evt, menu) {
 		console.log("Show context menu");
 		$(".contextMenu").remove();
 		var x = evt.pageX;
@@ -36,14 +38,17 @@ azkaban.ContextMenuView = Backbone.View.extend({
 		$(contextMenu).css({top: y, left: x});
 		$(this.el).after(contextMenu);
 	},
-	hide : function(evt) {
+	
+  hide: function(evt) {
 		console.log("Hide context menu");
 		$(".contextMenu").remove();
 	},
-	handleClick: function(evt) {
+	
+  handleClick: function(evt) {
 		console.log("handling click");
 	},
-	setupMenu: function(menu) {
+	
+  setupMenu: function(menu) {
 		var contextMenu = document.createElement("div");
 		$(contextMenu).addClass("contextMenu");
 		var ul = document.createElement("ul");
@@ -53,51 +58,51 @@ azkaban.ContextMenuView = Backbone.View.extend({
 			var menuItem = document.createElement("li");
 			if (menu[i].break) {
 				$(menuItem).addClass("break");
+			  $(ul).append(menuItem);
+        continue;
 			}
-			else {
-				var title = menu[i].title;
-				var callback = menu[i].callback;
-				$(menuItem).addClass("menuitem");
-				$(menuItem).text(title);
-				menuItem.callback = callback;
-				$(menuItem).click(function() { 
-					$(contextMenu).hide(); 
-					this.callback.call();});
-					
-				if (menu[i].submenu) {
-					var expandSymbol = document.createElement("div");
-					$(expandSymbol).addClass("expandSymbol");
-					$(menuItem).append(expandSymbol);
-					
-					var subMenu = this.setupMenu(menu[i].submenu);
-					$(subMenu).addClass("subMenu");
-					subMenu.parent = contextMenu;
-					menuItem.subMenu = subMenu;
-					$(subMenu).hide();
-					$(this.el).after(subMenu);
-					
-					$(menuItem).mouseenter(function() {
-						$(".subMenu").hide();
-						var menuItem = this;
-						menuItem.selected = true;
-						setTimeout(function() {
-							if (menuItem.selected) {
-								var offset = $(menuItem).offset();
-								var left = offset.left;
-								var top = offset.top;
-								var width = $(menuItem).width();
-								var subMenu = menuItem.subMenu;
-								
-								var newLeft = left + width - 5;
-								$(subMenu).css({left: newLeft, top: top});
-								$(subMenu).show();
-							}
-						}, 500);
-					});
-					$(menuItem).mouseleave(function() {this.selected = false;});
-				}
-			}
-
+      var title = menu[i].title;
+      var callback = menu[i].callback;
+      $(menuItem).addClass("menuitem");
+      $(menuItem).text(title);
+      menuItem.callback = callback;
+      $(menuItem).click(function() { 
+        $(contextMenu).hide(); 
+        this.callback.call();
+      });
+        
+      if (menu[i].submenu) {
+        var expandSymbol = document.createElement("div");
+        $(expandSymbol).addClass("expandSymbol");
+        $(menuItem).append(expandSymbol);
+        
+        var subMenu = this.setupMenu(menu[i].submenu);
+        $(subMenu).addClass("subMenu");
+        subMenu.parent = contextMenu;
+        menuItem.subMenu = subMenu;
+        $(subMenu).hide();
+        $(this.el).after(subMenu);
+        
+        $(menuItem).mouseenter(function() {
+          $(".subMenu").hide();
+          var menuItem = this;
+          menuItem.selected = true;
+          setTimeout(function() {
+            if (menuItem.selected) {
+              var offset = $(menuItem).offset();
+              var left = offset.left;
+              var top = offset.top;
+              var width = $(menuItem).width();
+              var subMenu = menuItem.subMenu;
+              
+              var newLeft = left + width - 5;
+              $(subMenu).css({left: newLeft, top: top});
+              $(subMenu).show();
+            }
+          }, 500);
+        });
+        $(menuItem).mouseleave(function() {this.selected = false;});
+      }
 			$(ul).append(menuItem);
 		}
 
diff --git a/src/web/js/azkaban.exflow.view.js b/src/web/js/azkaban.exflow.view.js
index 0d70f37..0209a2c 100644
--- a/src/web/js/azkaban.exflow.view.js
+++ b/src/web/js/azkaban.exflow.view.js
@@ -158,7 +158,7 @@ azkaban.FlowTabView = Backbone.View.extend({
 		$("#retrybtn").hide();
 
 		if (data.status == "SUCCEEDED") {
-				$("#executebtn").show();
+      $("#executebtn").show();
 		}
 		else if (data.status == "FAILED") {
 			$("#executebtn").show();
@@ -203,7 +203,7 @@ azkaban.FlowTabView = Backbone.View.extend({
 	handleRetryClick: function(evt) {
 		var graphData = graphModel.get("data");
 		var requestURL = contextURL + "/executor";
-		var requestData = {"execid": execId, "ajax":"retryFailedJobs"};
+		var requestData = {"execid": execId, "ajax": "retryFailedJobs"};
 		var successHandler = function(data) {
 			console.log("cancel clicked");
 			if (data.error) {
@@ -218,6 +218,7 @@ azkaban.FlowTabView = Backbone.View.extend({
 	},
 	
 	handleRestartClick: function(evt) {
+    console.log("handleRestartClick");
 		var data = graphModel.get("data");
 		var nodes = data.nodes;
 		var executingData = {
@@ -274,7 +275,7 @@ var mainSvgGraphView;
 var executionListView;
 azkaban.ExecutionListView = Backbone.View.extend({
 	events: {
-		//"click .progressBox": "handleProgressBoxClick"
+		//"click .flow-progress-bar": "handleProgressBoxClick"
 	},
 	
 	initialize: function(settings) {
@@ -322,67 +323,68 @@ azkaban.ExecutionListView = Backbone.View.extend({
 		
 		for (var i = 0; i < nodes.length; ++i) {
 			var node = nodes[i];
-			if (node.startTime > -1) {
-				var nodeId = node.id.replace(".", "\\\\.");
-				var row = document.getElementById(nodeId + "-row");
-				if (!row) {
-					this.addNodeRow(node);
-				}
-				
-				var div = $("#" + nodeId + "-status-div");
-				div.text(statusStringMap[node.status]);
-				$(div).attr("class", "status " + node.status);
-				
-				var startdate = new Date(node.startTime);
-				$("#" + nodeId + "-start").text(getDateFormat(startdate));
-				
-				var endTime = node.endTime;
-				if (node.endTime == -1) {
-					$("#" + nodeId + "-end").text("-");
-					endTime = node.startTime + 1;
-				}
-				else {
-					var enddate = new Date(node.endTime);
-					$("#" + nodeId + "-end").text(getDateFormat(enddate));
-				}
-				
-				var progressBar = $("#" + nodeId + "-progressbar");
-				if (!progressBar.hasClass(node.status)) {
-					for (var j = 0; j < statusList.length; ++j) {
-						var status = statusList[j];
-						progressBar.removeClass(status);
-					}
-					progressBar.addClass(node.status);
-				}
-				
-				// Create past attempts
-				if (node.pastAttempts) {
-					for (var a = 0; a < node.pastAttempts.length; ++a) {
-						var attemptBarId = nodeId + "-progressbar-" + a;
-						var attempt = node.pastAttempts[a];
-						if ($("#" + attemptBarId).length == 0) {
-							var attemptBox = document.createElement("div");
-							$(attemptBox).attr("id", attemptBarId);
-							$(attemptBox).addClass("progressBox");
-							$(attemptBox).addClass("attempt");
-							$(attemptBox).addClass(attempt.status);
-							$(attemptBox).css("float","left");
-							$(attemptBox).bind("contextmenu", attemptRightClick);
-							$(progressBar).before(attemptBox);
-							attemptBox.job = nodeId;
-							attemptBox.attempt = a;
-						}
-					}
-				}
-				
-				if (node.endTime == -1) {
-					//$("#" + node.id + "-elapse").text("0 sec");
-					$("#" + nodeId + "-elapse").text(getDuration(node.startTime, (new Date()).getTime()));					
-				}
-				else {
-					$("#" + nodeId + "-elapse").text(getDuration(node.startTime, node.endTime));
-				}
-			}
+			if (node.startTime < 0) {
+        continue;
+      }
+      var nodeId = node.id.replace(".", "\\\\.");
+      var row = document.getElementById(nodeId + "-row");
+      if (!row) {
+        this.addNodeRow(node);
+      }
+      
+      var div = $("#" + nodeId + "-status-div");
+      div.text(statusStringMap[node.status]);
+      $(div).attr("class", "status " + node.status);
+      
+      var startdate = new Date(node.startTime);
+      $("#" + nodeId + "-start").text(getDateFormat(startdate));
+      
+      var endTime = node.endTime;
+      if (node.endTime == -1) {
+        $("#" + nodeId + "-end").text("-");
+        endTime = node.startTime + 1;
+      }
+      else {
+        var enddate = new Date(node.endTime);
+        $("#" + nodeId + "-end").text(getDateFormat(enddate));
+      }
+      
+      var progressBar = $("#" + nodeId + "-progressbar");
+      if (!progressBar.hasClass(node.status)) {
+        for (var j = 0; j < statusList.length; ++j) {
+          var status = statusList[j];
+          progressBar.removeClass(status);
+        }
+        progressBar.addClass(node.status);
+      }
+      
+      // Create past attempts
+      if (node.pastAttempts) {
+        for (var a = 0; a < node.pastAttempts.length; ++a) {
+          var attemptBarId = nodeId + "-progressbar-" + a;
+          var attempt = node.pastAttempts[a];
+          if ($("#" + attemptBarId).length == 0) {
+            var attemptBox = document.createElement("div");
+            $(attemptBox).attr("id", attemptBarId);
+            $(attemptBox).addClass("flow-progress-bar");
+            $(attemptBox).addClass("attempt");
+            $(attemptBox).addClass(attempt.status);
+            $(attemptBox).css("float","left");
+            $(attemptBox).bind("contextmenu", attemptRightClick);
+            $(progressBar).before(attemptBox);
+            attemptBox.job = nodeId;
+            attemptBox.attempt = a;
+          }
+        }
+      }
+      
+      if (node.endTime == -1) {
+        //$("#" + node.id + "-elapse").text("0 sec");
+        $("#" + nodeId + "-elapse").text(getDuration(node.startTime, (new Date()).getTime()));					
+      }
+      else {
+        $("#" + nodeId + "-elapse").text(getDuration(node.startTime, node.endTime));
+      }
 		}
 	},
 	
@@ -478,12 +480,12 @@ azkaban.ExecutionListView = Backbone.View.extend({
 
 		var outerProgressBar = document.createElement("div");
 		$(outerProgressBar).attr("id", node.id + "-outerprogressbar");
-		$(outerProgressBar).addClass("outerProgress");
+		$(outerProgressBar).addClass("flow-progress");
 
 		var progressBox = document.createElement("div");
 		progressBox.job = node.id;
 		$(progressBox).attr("id", node.id + "-progressbar");
-		$(progressBox).addClass("progressBox");
+		$(progressBox).addClass("flow-progress-bar");
 		$(outerProgressBar).append(progressBox);
 		$(tdTimeline).append(outerProgressBar);
 		$(tdTimeline).addClass("timeline");
@@ -729,7 +731,8 @@ $(function() {
 		el: $('#headertabs'), 
 		model: graphModel
 	});
-	mainSvgGraphView = new azkaban.SvgGraphView({
+	
+  mainSvgGraphView = new azkaban.SvgGraphView({
 		el: $('#svgDiv'), 
 		model: graphModel, 
 		rightClick:	{ 
@@ -738,16 +741,19 @@ $(function() {
 			"graph": exGraphClickCallback 
 		}
 	});
-	jobsListView = new azkaban.JobListView({
+	
+  jobsListView = new azkaban.JobListView({
 		el: $('#jobList'), 
 		model: graphModel, 
 		contextMenuCallback: exJobClickCallback
 	});
-	flowLogView = new azkaban.FlowLogView({
+	
+  flowLogView = new azkaban.FlowLogView({
 		el: $('#flowLogView'), 
 		model: logModel
 	});
-	statusView = new azkaban.StatusView({
+	
+  statusView = new azkaban.StatusView({
 		el: $('#flow-status'), 
 		model: graphModel
 	});
diff --git a/src/web/js/azkaban.flow.execute.view.js b/src/web/js/azkaban.flow.execute.view.js
index a74f473..d2940e3 100644
--- a/src/web/js/azkaban.flow.execute.view.js
+++ b/src/web/js/azkaban.flow.execute.view.js
@@ -452,7 +452,7 @@ azkaban.SideMenuDialogView = Backbone.View.extend({
 var handleJobMenuClick = function(action, el, pos) {
 	var jobid = el[0].jobid;
 	
-	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowName + "&job=" + jobid;
+	var requesgURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowName + "&job=" + jobid;
 	if (action == "open") {
 		window.location.href = requestURL;
 	}
diff --git a/src/web/js/azkaban.flow.graph.view.js b/src/web/js/azkaban.flow.graph.view.js
index 338b08c..6ad2100 100644
--- a/src/web/js/azkaban.flow.graph.view.js
+++ b/src/web/js/azkaban.flow.graph.view.js
@@ -156,7 +156,12 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			var x = node.x - offset;
 			var y = node.y - offset;
 			
-			$(this.svgGraph).svgNavigate("transformToBox", {x: x, y: y, width: widthHeight, height: widthHeight});
+			$(this.svgGraph).svgNavigate("transformToBox", {
+        x: x, 
+        y: y, 
+        width: widthHeight, 
+        height: widthHeight
+      });
 		}
 	},
 	handleStatusUpdate: function(evt) {
@@ -294,7 +299,13 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	},
 	resetPanZoom : function(duration) {
 		var bounds = this.graphBounds;
-		var param = {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY), duration: duration };
+		var param = {
+      x: bounds.minX, 
+      y: bounds.minY, 
+      width: (bounds.maxX - bounds.minX), 
+      height: (bounds.maxY - bounds.minY), 
+      duration: duration
+    };
 
 		$(this.svgGraph).svgNavigate("transformToBox", param);
 	}
diff --git a/src/web/js/azkaban.flow.job.view.js b/src/web/js/azkaban.flow.job.view.js
index cc41b04..cd04d42 100644
--- a/src/web/js/azkaban.flow.job.view.js
+++ b/src/web/js/azkaban.flow.job.view.js
@@ -89,8 +89,10 @@ azkaban.JobListView = Backbone.View.extend({
 		if (updateData.nodes) {
 			for (var i = 0; i < updateData.nodes.length; ++i) {
 				var updateNode = updateData.nodes[i];
-				$(this.listNodes[updateNode.id]).removeClass();
-				$(this.listNodes[updateNode.id]).addClass(updateNode.status);
+				var job = this.listNodes[updateNode.id];
+				$(job).removeClass();
+				$(job).addClass("list-group-item");
+				$(job).addClass(updateNode.status);
 			}
 		}
 	},
@@ -99,7 +101,11 @@ azkaban.JobListView = Backbone.View.extend({
 		var data = this.model.get("data");
 		for (var i = 0; i < data.nodes.length; ++i) {
 			var updateNode = data.nodes[i];
-			$(this.listNodes[updateNode.id]).addClass(updateNode.status);
+			var job = this.listNodes[updateNode.id];
+      if (!$(job).hasClass("list-group-item")) {
+        $(job).addClass("list-group-item");
+      }
+			$(job).addClass(updateNode.status);
 		}
 	},
 	
diff --git a/src/web/js/azkaban.svg.graph.view.js b/src/web/js/azkaban.svg.graph.view.js
index 66f914f..67d2530 100644
--- a/src/web/js/azkaban.svg.graph.view.js
+++ b/src/web/js/azkaban.svg.graph.view.js
@@ -21,7 +21,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		"contextmenu g" : "handleRightClick",
 		"contextmenu polyline": "handleRightClick"
 	},
-	initialize: function(settings) {
+	
+  initialize: function(settings) {
 		this.model.bind('change:selected', this.changeSelected, this);
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('resetPanZoom', this.resetPanZoom, this);
@@ -46,7 +47,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 
 		$(svg).svgNavigate();
 	},
-	initializeDefs: function(self) {
+	
+  initializeDefs: function(self) {
 		var def = document.createElementNS(svgns, 'defs');
 		def.setAttributeNS(null, "id", "buttonDefs");
 
@@ -68,7 +70,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		
 		this.svgGraph.appendChild(def);
 	},
-	render: function(self) {
+	
+  render: function(self) {
 		console.log("graph render");
 
 		// Clean everything
@@ -131,7 +134,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		this.graphBounds = bounds;
 		this.resetPanZoom(0);
 	},
-	handleDisabledChange: function(evt) {
+	
+  handleDisabledChange: function(evt) {
 		var disabledMap = this.model.get("disabled");
 
 		for(var id in this.nodes) {
@@ -146,7 +150,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			}
 		}
 	},
-	assignInitialStatus: function(evt) {
+	
+  assignInitialStatus: function(evt) {
 		var data = this.model.get("data");
 		for (var i = 0; i < data.nodes.length; ++i) {
 			var updateNode = data.nodes[i];
@@ -154,7 +159,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			addClass(g, updateNode.status);
 		}
 	},
-	changeSelected: function(self) {
+	
+  changeSelected: function(self) {
 		console.log("change selected");
 		var selected = this.model.get("selected");
 		var previous = this.model.previous("selected");
@@ -184,7 +190,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			});
 		}
 	},
-	handleStatusUpdate: function(evt) {
+	
+  handleStatusUpdate: function(evt) {
 		var updateData = this.model.get("update");
 		if (updateData.nodes) {
 			for (var i = 0; i < updateData.nodes.length; ++i) {
@@ -197,19 +204,22 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			}
 		}
 	},
-	handleRemoveAllStatus: function(gNode) {
+	
+  handleRemoveAllStatus: function(gNode) {
 		for (var j = 0; j < statusList.length; ++j) {
 			var status = statusList[j];
 			removeClass(gNode, status);
 		}
 	},
-	clickGraph: function(self) {
+	
+  clickGraph: function(self) {
 		console.log("click");
 		if (self.currentTarget.jobid) {
 			this.model.set({"selected": self.currentTarget.jobid});
 		}
 	},
-	handleRightClick: function(self) {
+	
+  handleRightClick: function(self) {
 		if (this.rightClick) {
 			var callbacks = this.rightClick;
 			var currentTarget = self.currentTarget;
@@ -229,7 +239,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	
 		return true;
 	},	
-	drawEdge: function(self, edge) {
+	
+  drawEdge: function(self, edge) {
 		var svg = self.svgGraph;
 		var svgns = self.svgns;
 		
@@ -262,7 +273,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			self.mainG.appendChild(line);
 		}
 	},
-	drawNode: function(self, node, bounds) {
+	
+  drawNode: function(self, node, bounds) {
 		var svg = self.svgGraph;
 		var svgns = self.svgns;
 
@@ -323,7 +335,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		nodeG.setAttributeNS(null, "class", "node");
 		nodeG.jobid=node.id;
 	},
-	addBounds: function(toBounds, addBounds) {
+	
+  addBounds: function(toBounds, addBounds) {
 		toBounds.minX = toBounds.minX 
 				? Math.min(toBounds.minX, addBounds.minX) : addBounds.minX;
 		toBounds.minY = toBounds.minY 
@@ -333,7 +346,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		toBounds.maxY = toBounds.maxY 
 				? Math.max(toBounds.maxY, addBounds.maxY) : addBounds.maxY;
 	},
-	resetPanZoom : function(duration) {
+	
+  resetPanZoom: function(duration) {
 		var bounds = this.graphBounds;
 		var param = {
 			x: bounds.minX,