azkaban-uncached

Redesign job list on flow pages.

12/6/2013 10:17:24 AM

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index 7bf96fb..e9cf0d5 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -112,45 +112,27 @@
 
 			<div class="row">
 				<div class="col-lg-8">
-					<ul class="nav nav-tabs" id="headertabs">
+					<ul class="nav nav-pills" id="headertabs">
 						<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>
 					</ul>
 				</div>
 				<div class="col-lg-4">
-					<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>
+					<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>
+					</div>
+					<div class="clearfix"></div>
 				</div>
 			</div>
 
 	## Graph View
 
-			<div class="row" id="graphView">
-				<div class="col-lg-4">
-					<div class="panel panel-default" id="jobList">
-						<div class="panel-heading">
-							<div class="pull-right">
-								<button type="button" class="btn btn-xs btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
-							</div>
-							Jobs
-						</div>
-						<div class="panel-body" id="filterList">
-							<input id="filter" type="text" placeholder="Job Filter">
-							<div id="list"></div>
-						</div>
-					</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" >
-						</svg>
-					</div>
-				</div>
-			</div>
+	#parse ("azkaban/webapp/servlet/velocity/flowgraphview.vm")
 	
 	## Job List View
 
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
new file mode 100644
index 0000000..c6e79fd
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -0,0 +1,38 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+
+ 	## Graph view.
+ 
+			<div class="row" id="graphView">
+				<div class="col-lg-4">
+					<div class="panel panel-default" id="jobList">
+						<div class="panel-heading">
+							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
+						</div>
+						<ul id="list" class="list-group"></ul>
+						<div class="panel-footer">
+							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
+						</div>
+					</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" >
+						</svg>
+					</div>
+				</div>
+			</div>
diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index 8f18779..a92c036 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -78,16 +78,10 @@
 	
 	## Page header.
 
-			<div class="row">
-				<div class="col-lg-8">
-					<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
-					<p>$project.description</p>
-				</div>
-				<div class="col-lg-4">
-					<button type="button" class="btn btn-success" id="executebtn">Schedule / Execute Flow</button>
-				</div>
+			<div class="page-header">
+				<h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
+				<p>$project.description</p>
 			</div>
-			<hr>
 
 	## Breadcrumbs and tabs
 
@@ -97,39 +91,28 @@
 						<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>
 
-					<ul class="nav nav-tabs" id="headertabs">
+			<div class="row">
+				<div class="col-lg-8">
+					<ul class="nav nav-pills" id="headertabs">
 						<li id="graphViewLink"><a href="#">Graph</a></li>
 						<li id="executionsViewLink"><a href="#">Executions</a></li>
 					</ul>
 				</div>
-			</div>
-
-	## Graph view.
-
-			<div class="row" id="graphView">
 				<div class="col-lg-4">
-					<div class="panel panel-default" id="jobList">
-						<div class="panel-heading">
-							<div class="pull-right">
-								<button type="button" class="btn btn-xs btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
-							</div>
-							Jobs
-						</div>
-						<div class="panel-body" id="filterList">
-							<input id="filter" type="text" placeholder="Job Filter">
-							<div id="list"></div>
-						</div>
-					</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" >
-						</svg>
+					<div class="pull-right">
+						<button type="button" class="btn btn-success" id="executebtn">Schedule / Execute Flow</button>
 					</div>
+					<div class="clearfix"></div>
 				</div>
 			</div>
 
+	## Graph view.
+
+	#parse ("azkaban/webapp/servlet/velocity/flowgraphview.vm")
+
 	## Executions view.
 
 			<div class="row" id="executionsView">
diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 690ca18..b332247 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -95,7 +95,7 @@
 								</fieldset>
 							</form>
 						</div>
-						<table class="table table-striped table-bordered" id="all-jobs">
+						<table class="table table-striped table-bordered table-hover" id="all-jobs">
 							<thead>
 								<tr>
 									<th class="tb-name">Name</th>
diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index a58f95f..e96d96e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -84,7 +84,7 @@
 	## Breadcrumb
 
 					<ol class="breadcrumb">
-						<li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+						<li class="active"><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
 					</ol>
 
 	#set ($project_page = "flows")
@@ -115,8 +115,8 @@
 								<div class="panel-footer">
 			#if (${exec})
 									<button type="button" class="btn btn-sm btn-primary execute-flow" flowId="${flow.id}">Execute Flow</button>
-									<button type="button" class="btn btn-sm btn-primary">Executions</button>
-									<button type="button" class="btn btn-sm btn-primary">Summary</button>
+									<a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-primary btn-sm">Executions</a>
+									<a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-primary btn-sm">Summary</a>
 			#end
 								</div>
 							</div>
diff --git a/src/web/css/bootstrap-azkaban.css b/src/web/css/bootstrap-azkaban.css
index d5b974b..daaacd6 100644
--- a/src/web/css/bootstrap-azkaban.css
+++ b/src/web/css/bootstrap-azkaban.css
@@ -6,6 +6,10 @@
 	display: none;
 }
 
-.nav-tabs {
+.nav-tabs, .nav-pills {
 	margin-bottom: 15px;
 }
+
+.flow-expander {
+	cursor: pointer;
+}
diff --git a/src/web/js/azkaban.flow.job.view.js b/src/web/js/azkaban.flow.job.view.js
index fa72011..cc41b04 100644
--- a/src/web/js/azkaban.flow.job.view.js
+++ b/src/web/js/azkaban.flow.job.view.js
@@ -28,8 +28,8 @@ azkaban.JobListView = Backbone.View.extend({
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('change:update', this.handleStatusUpdate, this);
 		
-		this.filterInput = $(this.el).find(".filter");
-		this.list = $(this.el).find(".list");
+		this.filterInput = $(this.el).find("#filter");
+		this.list = $(this.el).find("#list");
 		this.contextMenu = settings.contextMenuCallback;
 		this.listNodes = {};
 	},
@@ -68,9 +68,10 @@ azkaban.JobListView = Backbone.View.extend({
 			var index = jobid.indexOf(filter);
 			if (index != -1) {
 				var a = $(this).find("a");
-				
 				var endIndex = index + filter.length;
-				var newHTML = jobid.substring(0, index) + "<span>" + jobid.substring(index, endIndex) + "</span>" + jobid.substring(endIndex, jobid.length);
+				var newHTML = jobid.substring(0, index) + "<span>" + 
+						jobid.substring(index, endIndex) + "</span>" + 
+						jobid.substring(endIndex, jobid.length);
 				
 				$(a).html(newHTML);
 				$(this).show();
@@ -114,7 +115,7 @@ azkaban.JobListView = Backbone.View.extend({
 		};
 	
 		var nodeArray = nodes.slice(0);
-		nodeArray.sort(function(a,b) {
+		nodeArray.sort(function(a, b) {
 			var diff = a.y - b.y;
 			if (diff == 0) {
 				return a.x - b.x;
@@ -124,13 +125,13 @@ azkaban.JobListView = Backbone.View.extend({
 			}
 		});
 		
-		var ul = document.createElement("ul");
-		$(ul).attr("class", "jobs");
+		var ul = this.list;
 		this.jobs = $(ul);
 		
 		for (var i = 0; i < nodeArray.length; ++i) {
 			var li = document.createElement("li");
-			li.jobid=nodeArray[i].id;
+			li.jobid = nodeArray[i].id;
+			$(li).addClass('list-group-item');
 			
 			var iconDiv = document.createElement("div");
 			$(iconDiv).addClass("icon");
@@ -139,13 +140,12 @@ azkaban.JobListView = Backbone.View.extend({
 			var a = document.createElement("a");
 			$(a).text(nodeArray[i].id);
 			li.appendChild(a);
-			ul.appendChild(li);
-			li.jobid=nodeArray[i].id;
+			$(ul).append(li);
+			li.jobid = nodeArray[i].id;
 			
 			this.listNodes[nodeArray[i].id] = li;
 		}
 		
-		this.list.append(ul);
 		this.assignInitialStatus(self);
 		this.handleDisabledChange(self);
 	},
@@ -159,7 +159,7 @@ azkaban.JobListView = Backbone.View.extend({
 	
 	handleJobClick: function(evt) {
 		var jobid = evt.currentTarget.jobid;
-		if(!evt.currentTarget.jobid) {
+		if (!evt.currentTarget.jobid) {
 			return;
 		}
 		
diff --git a/src/web/js/azkaban.flow.view.js b/src/web/js/azkaban.flow.view.js
index d237828..c08bd5e 100644
--- a/src/web/js/azkaban.flow.view.js
+++ b/src/web/js/azkaban.flow.view.js
@@ -374,7 +374,7 @@ $(function() {
 
 	var requestData = {
 		"project": projectName, 
-		"ajax":"fetchflowgraph", 
+		"ajax": "fetchflowgraph", 
 		"flow": flowId
 	};
 	var successHandler = function(data) {