azkaban-uncached

Improve display of project panels.

12/24/2013 12:15:02 PM

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index aa537dc..b1b1a5d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -69,22 +69,20 @@
             <div id="flow-tabs">
 	#if ($flows)
 		#foreach ($flow in $flows)
-              <div class="panel panel-info" flow="${flow.id}" project="${project.name}">
+              <div class="panel panel-default" flow="${flow.id}" project="${project.name}">
                 <div class="panel-heading flow-expander" id="${flow.id}">
 			#if (${exec})
                 <div class="pull-right">
                   <button type="button" class="btn btn-xs btn-primary execute-flow" flowId="${flow.id}">Execute Flow</button>
-                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-primary btn-xs">Executions</a>
-                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-primary btn-xs">Summary</a>
+                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-info btn-xs">Executions</a>
+                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-info btn-xs">Summary</a>
                 </div>
 			#end
                 <a href="${context}/manager?project=${project.name}&flow=${flow.id}">${flow.id}</a>
               </div>
-              <div id="${flow.id}-child" class="panel-collapse collapse">
-                <table class="table">
-                  <tbody id="${flow.id}-tbody">
-                  </tbody>
-                </table>
+              <div id="${flow.id}-child" class="panel-collapse panel-list collapse">
+                <ul class="list-group list-group-collapse" id="${flow.id}-tbody">
+                </ul>
               </div>
             </div>
 		#end
diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
index 4aef997..889588d 100644
--- a/src/less/bootstrap-azkaban.less
+++ b/src/less/bootstrap-azkaban.less
@@ -46,6 +46,31 @@
   margin-bottom: 15px;
 }
 
+.panel-list {
+  border: 0;
+}
+
+.list-group-collapse {
+  margin: 0;
+  .list-group-item {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    
+    &:first-child {
+      border-top: 0;
+    }
+    
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    button {
+      margin-left: 3px;
+    }
+  }
+}
+
 .az-project-row {
 	cursor: pointer;
 }
diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 6f04950..c278d3b 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -80,21 +80,19 @@ azkaban.FlowTableView = Backbone.View.extend({
 			var name = job.id;
 			var level = job.level;
 			var nodeId = flowId + "-" + name;
-			
-			var tr = document.createElement("tr");
-			$(tr).addClass("jobrow");
-			var idtd = document.createElement("td");
-			$(idtd).addClass("tb-name");
-			$(idtd).addClass("tb-job-name");
-			idtd.flowId = flowId;
-			idtd.projectName = project;
-			idtd.jobName = name;
+		
+      var li = document.createElement("li");
+      $(li).addClass("list-group-item");
+			li.flowId = flowId;
+			li.projectName = project;
+			li.jobName = name;
 
 			if (execAccess) {
 				var hoverMenuDiv = document.createElement("div");
 				$(hoverMenuDiv).addClass("pull-right");
 				
 				var divRunJob = document.createElement("button");
+        $(divRunJob).attr('type', 'button');
 				$(divRunJob).addClass("btn");
 				$(divRunJob).addClass("btn-success");
 				$(divRunJob).addClass("btn-xs");
@@ -105,6 +103,7 @@ azkaban.FlowTableView = Backbone.View.extend({
 				$(hoverMenuDiv).append(divRunJob);
 				
 				var divRunWithDep = document.createElement("button");
+        $(divRunWithDep).attr('type', 'button');
 				$(divRunWithDep).addClass("btn");
 				$(divRunWithDep).addClass("btn-success");
 				$(divRunWithDep).addClass("btn-xs");
@@ -114,7 +113,7 @@ azkaban.FlowTableView = Backbone.View.extend({
 				divRunWithDep.flowId = flowId;
 				$(hoverMenuDiv).append(divRunWithDep);
 				
-				$(idtd).append(hoverMenuDiv);
+				$(li).append(hoverMenuDiv);
 			}
 			
 			var ida = document.createElement("a");
@@ -127,9 +126,8 @@ azkaban.FlowTableView = Backbone.View.extend({
 			$(ida).css("margin-left", level * 20);
 			$(ida).attr("href", requestURL + name);
 			
-			$(idtd).append(ida);
-			$(tr).append(idtd);
-			$(innerTable).append(tr);
+			$(li).append(ida);
+			$(innerTable).append(li);
 		}
 	},