azkaban-uncached

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index 3b301a9..9622744 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -74,23 +74,27 @@
 
 			<div class="row">
 				<div class="col-lg-8">
-					<div class="panel panel-default">
-						<div class="panel-heading">Flows</div>
+					<div class="panel panel-default" id="flow-tabs">
+						<div class="panel-heading">
+							<div class="pull-right" id="project-options">
+								<button id="project-upload-btn" class="btn btn-xs btn-primary">Upload</button>
+								<button id="project-delete-btn" class="btn btn-xs btn-danger">Delete Project</button>
+							</div>
+							Flows
+						</div>
 						<div class="panel-body">
 
 	#if ($flows)
 		#foreach ($flow in $flows)
 							<div class="panel panel-info" flow="${flow.id}" project="${project.name}">
-								<div class="panel-heading" id="${flow.id}">
-									<span>+</span>
+								<div class="panel-heading flow-expander" id="${flow.id}">
 									<a href="${context}/manager?project=${project.name}&flow=${flow.id}">${flow.id}</a>
 								</div>
-								<div class="panel-body">
-									<div class="panel panel-default">
-										<div class="panel-heading">Jobs</div>
-										<div class="panel-body" id="${flow.id}-body">
-										</div>
-									</div>
+								<div id="${flow.id}-child" class="panel-collapse collapse">
+									<table class="table">
+										<tbody id="${flow.id}-tbody">
+										</tbody>
+									</table>
 								</div>
 								<div class="panel-footer">
 			#if (${exec})
@@ -127,11 +131,6 @@
 						</table>
 					</div>
 
-					<div class="well" id="project-options">
-						<button id="project-upload-btn" class="btn btn-primary">Upload</button>
-						<button id="project-delete-btn" class="btn btn-danger">Delete Project</button>
-					</div>
-
 					<div class="well well-sm">
 						<ul class="nav nav-pills nav-stacked">
 							<li class="active"><a href="${context}/manager?project=${project.name}">Project</a></li>
@@ -149,29 +148,29 @@
 			<div class="modal fade" id="upload-project-modal">
 				<div class="modal-dialog">
 					<div class="modal-content">
-						<div class="modal-header">
-							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-							<h4 class="modal-title">Upload Project Files</h4>
-						</div>
-						<div class="modal-body">
-							<div class="alert alert-danger" id="upload-project-modal-error-msg">$error_msg</div>
-							<form id="upload-project-form" enctype="multipart/form-data" method="post" action="$!context/manager">
-								<fieldset class="form-horizontal">
-									<div class="form-group">
-										<label for="path" class="col-sm-2 control-label">Job Archive</label>
-										<div class="col-sm-10">
-											<input type="file" class="form-control" id="file" name="file">
+						<form id="upload-project-form" enctype="multipart/form-data" method="post" action="$!context/manager">
+							<div class="modal-header">
+								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+								<h4 class="modal-title">Upload Project Files</h4>
+							</div>
+							<div class="modal-body">
+								<div class="alert alert-danger" id="upload-project-modal-error-msg">$error_msg</div>
+									<fieldset class="form-horizontal">
+										<div class="form-group">
+											<label for="path" class="col-sm-2 control-label">Job Archive</label>
+											<div class="col-sm-10">
+												<input type="file" class="form-control" id="file" name="file">
+											</div>
 										</div>
-									</div>
-								</fieldset>
-							</form>
-						</div>
-						<div class="modal-footer">
-							<input type="hidden" name="project" value="$project.name">
-							<input type="hidden" name="action" value="upload">
-							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-primary" id="upload-project-btn">Upload</button>
-						</div>
+									</fieldset>
+							</div>
+							<div class="modal-footer">
+								<input type="hidden" name="project" value="$project.name">
+								<input type="hidden" name="action" value="upload">
+								<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+								<button type="button" class="btn btn-primary" id="upload-project-btn">Upload</button>
+							</div>
+						</form>
 					</div>
 				</div>
 			</div>
@@ -208,10 +207,12 @@
 							<p>Warning: This project will be deleted and may not be recoverable.</p>
 						</div>
 						<div class="modal-footer">
-							<input type="hidden" name="project" value="$project.name">
-							<input type="hidden" name="delete" value="true">
-							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-							<button type="button" class="btn btn-danger" id="delete-btn">Yes</button>
+							<form id="delete-form">
+								<input type="hidden" name="project" value="$project.name">
+								<input type="hidden" name="delete" value="true">
+								<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+								<button type="button" class="btn btn-danger" id="delete-btn">Yes</button>
+							</form>
 						</div>
 					</div>
 				</div>

diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 6cf529d..0adf955 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -80,7 +80,7 @@ azkaban.DeleteProjectView = Backbone.View.extend({
 var flowTableView;
 azkaban.FlowTableView = Backbone.View.extend({
 	events : {
-		"click .jobfolder": "expandFlowProject",
+		"click .flow-expander": "expandFlowProject",
 		"mouseover .expandedFlow a": "highlight",
 		"mouseout .expandedFlow a": "unhighlight",
 		"click .runJob": "runJob",
@@ -94,7 +94,7 @@ azkaban.FlowTableView = Backbone.View.extend({
 	},
 
 	expandFlowProject: function(evt) {
-		if (evt.target.tagName != "SPAN") {
+		if (evt.target.tagName == "A") {
 			return;
 		}
 		
@@ -106,42 +106,28 @@ azkaban.FlowTableView = Backbone.View.extend({
 		var targetTBody = $('#' + targetId + '-tbody');
 		
 		var createJobListFunction = this.createJobListTable;
-		
 		if (target.loading) {
 			console.log("Still loading.");
 		}
 		else if (target.loaded) {
-			if($(targetExpanded).is(':visible')) {
-				$(target).addClass('expand').removeClass('collapse');
-				$(targetExpanded).fadeOut("fast");
-			}
-			else {
-					$(target).addClass('collapse').removeClass('expand');
-				$(targetExpanded).fadeIn();
-			}
+			$(targetExpanded).collapse('toggle');
 		}
 		else {
 			// projectName is available
-			$(target).addClass('wait').removeClass('collapse').removeClass('expand');
 			target.loading = true;
-			
-			$.get(
-				requestURL,
-				{
-					"project": projectName, 
-					"ajax":"fetchflowjobs", 
-					"flow":targetId
-				},
-				function(data) {
-					console.log("Success");
-					target.loaded = true;
-					target.loading = false;
-					createJobListFunction(data, targetTBody);
-					$(target).addClass('collapse').removeClass('wait');
-					$(targetExpanded).fadeIn("fast");
-				},
-				"json"
-			);
+			var requestData = {
+				"project": projectName, 
+				"ajax":"fetchflowjobs", 
+				"flow":targetId
+			};
+			var successHandler = function(data) {
+				console.log("Success");
+				target.loaded = true;
+				target.loading = false;
+				createJobListFunction(data, targetTBody);
+				$(targetExpanded).collapse('show');
+			};
+			$.get(requestURL, requestData, successHandler, "json");
 		}
 	},
 	createJobListTable : function(data, innerTable) {
@@ -160,38 +146,28 @@ azkaban.FlowTableView = Backbone.View.extend({
 			var idtd = document.createElement("td");
 			$(idtd).addClass("tb-name");
 			$(idtd).addClass("tb-job-name");
-			idtd.flowId=flowId;
-			idtd.projectName=project;
-			idtd.jobName=name;
-			
-			var ida = document.createElement("a");
-			ida.dependents = job.dependents;
-			ida.dependencies = job.dependencies;
-			ida.flowid = flowId;
-			$(ida).text(name);
-			$(ida).addClass("jobLink");
-			$(ida).attr("id", nodeId);
-			$(ida).css("margin-left", level * 20);
-			$(ida).attr("href", requestURL + name);
-			
-			$(idtd).append(ida);
-			$(tr).append(idtd);
-			$(innerTable).append(tr);
+			idtd.flowId = flowId;
+			idtd.projectName = project;
+			idtd.jobName = name;
 
 			if (execAccess) {
 				var hoverMenuDiv = document.createElement("div");
-				$(hoverMenuDiv).addClass("job-hover-menu");
+				$(hoverMenuDiv).addClass("pull-right");
 				
-				var divRunJob = document.createElement("div");
-				$(divRunJob).addClass("btn1");
+				var divRunJob = document.createElement("button");
+				$(divRunJob).addClass("btn");
+				$(divRunJob).addClass("btn-success");
+				$(divRunJob).addClass("btn-xs");
 				$(divRunJob).addClass("runJob");
 				$(divRunJob).text("Run Job");
 				divRunJob.jobName = name;
 				divRunJob.flowId = flowId;
 				$(hoverMenuDiv).append(divRunJob);
 				
-				var divRunWithDep = document.createElement("div");
-				$(divRunWithDep).addClass("btn1");
+				var divRunWithDep = document.createElement("button");
+				$(divRunWithDep).addClass("btn");
+				$(divRunWithDep).addClass("btn-success");
+				$(divRunWithDep).addClass("btn-xs");
 				$(divRunWithDep).addClass("runWithDep");
 				$(divRunWithDep).text("Run With Dependencies");
 				divRunWithDep.jobName = name;
@@ -200,6 +176,20 @@ azkaban.FlowTableView = Backbone.View.extend({
 				
 				$(idtd).append(hoverMenuDiv);
 			}
+			
+			var ida = document.createElement("a");
+			ida.dependents = job.dependents;
+			ida.dependencies = job.dependencies;
+			ida.flowid = flowId;
+			$(ida).text(name);
+			$(ida).addClass("jobLink");
+			$(ida).attr("id", nodeId);
+			$(ida).css("margin-left", level * 20);
+			$(ida).attr("href", requestURL + name);
+			
+			$(idtd).append(ida);
+			$(tr).append(idtd);
+			$(innerTable).append(tr);
 		}
 	},
 	unhighlight: function(evt) {
@@ -241,7 +231,6 @@ azkaban.FlowTableView = Backbone.View.extend({
 	viewFlow: function(evt) {
 		console.log("View Flow");
 		var flowId = evt.currentTarget.flowId;
-
 		location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
 	},
 
@@ -249,7 +238,6 @@ azkaban.FlowTableView = Backbone.View.extend({
 		console.log("View Job");
 		var flowId = evt.currentTarget.flowId;
 		var jobId = evt.currentTarget.jobId;
-		
 		location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
 	},