azkaban-memoizeit

Details

diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index 73a00d6..2d3a605 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -83,50 +83,43 @@
 
 ## Table of projects.
 
-			<div class="row">
-				<div class="col-xs-12">
-          <table class="table table-condensed table-striped table-bordered table-hover" id="all-jobs">
-            <thead>
-              <tr>
-                <th class="tb-name">Name</th>
-                <th class="tb-up-date">Modified Date</th>
-                <th class="tb-owner">Modified By</th>
-              </tr>
-            </thead>
-            <tbody>
+      <div class="row">
+        <div class="col-xs-12">
 #if (!$projects.isEmpty())
+          <ul id="project-list">
 	#foreach ($project in $projects)
-              <tr class="az-project-row">
-                <td id="${project.name}" class="tb-name project-expand expanded">
-                  <span class="state-icon state-icon-expand az-expander"></span>
-                  <a href="${context}/manager?project=${project.name}">$project.name</a>
-                </td>
-                <td class="tb-up-date">$utils.formatDate($project.lastModifiedTimestamp)</td>
-                <td class="tb-owner">$project.lastModifiedUser</td>
-              </tr>
-              <tr class="childrow collapse" id="${project.name}-child">
-                <td colspan="3">
-                  <table class="table table-bordered">
-                    <thead>
-                      <tr>
-                        <th class="tb-name">Flows</th>
-                      </tr>
-                    </thead>
-                    <tbody id="${project.name}-tbody">
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-	#end
+            <li>
+              <div class="project-info">
+                <h4><a href="${context}/manager?project=${project.name}">$project.name</a></h4>
+                <p class="project-description">$project.description</p>
+                <p class="project-last-modified">Last modified on <strong>$utils.formatDate($project.lastModifiedTimestamp)</strong> by <strong>$project.lastModifiedUser</strong>.</p>
+              </div>
+              <div class="project-expander" id="${project.name}">
+                <span class="glyphicon glyphicon-chevron-down project-expander-icon"></span>
+              </div>
+              <div class="clearfix"></div>
+              <div class="project-flows" id="${project.name}-child">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th class="tb-name">Flows</th>
+                    </tr>
+                  </thead>
+                  <tbody id="${project.name}-tbody">
+                  </tbody>
+                </table>
+              </div>
+            </li>
+  #end
+          </ul>
 #else
-              <tr>
-                <td colspan="3">No viewable projects found.</td>
-              </tr>
+          <div class="alert alert-default">
+            <h4>No Viewable Projects</h4>
+            <p>Click Create Project to create a new project.</p>
+          </div>
 #end
-            </tbody>
-          </table>
-				</div>
-			</div>
+        </div>
+      </div>
 
 ## Modal dialog to be displayed to create a new project.
 
diff --git a/src/less/project.less b/src/less/project.less
index b3ae43f..667b83f 100644
--- a/src/less/project.less
+++ b/src/less/project.less
@@ -1,5 +1,52 @@
-.az-project-row {
-	cursor: pointer;
+#project-list {
+  padding: 0;
+  margin: 0;
+
+  li {
+    list-style: none;
+    border-bottom: 1px solid #c0c0c0;
+    padding-top: 14px;
+    padding-bottom: 0px;
+  }
+
+  .project-expander {
+    float: right;
+    cursor: pointer;
+    &:hover {
+      color: #2a6496;
+    }
+  }
+
+  .project-info {
+    float: left;
+    h4 {
+      margin-top: 0;
+      margin-bottom: 4px;
+    }
+    
+    .project-description {
+      margin-bottom: 4px;
+    }
+
+    .project-last-modified {
+      color: #a0a0a0;
+      margin-bottom: 16px;
+      strong {
+        font-weight: normal;
+        color: #000000;
+      }
+    }
+  }
+
+  .project-flows {
+    display: none;
+    background-color: #f9f9f9;
+    table {
+      background: transparent;
+      margin-bottom: 0;
+      border-top: 1px solid #dddddd;
+    }
+  }
 }
 
 // Flow panel heading.
diff --git a/src/web/js/azkaban.main.view.js b/src/web/js/azkaban.main.view.js
index 56fba73..b6aac48 100644
--- a/src/web/js/azkaban.main.view.js
+++ b/src/web/js/azkaban.main.view.js
@@ -19,7 +19,7 @@ $.namespace('azkaban');
 var projectTableView;
 azkaban.ProjectTableView = Backbone.View.extend({
 	events: {
-		"click .project-expand": "expandProject"
+		"click .project-expander": "expandProject"
 	},
 	
 	initialize: function(settings) {
@@ -44,17 +44,17 @@ azkaban.ProjectTableView = Backbone.View.extend({
 		else if (target.loaded) {
 			if ($(targetExpanded).is(':visible')) {
 				$(target).addClass('expanded').removeClass('collapsed');
-				var expander = $(target).children('.az-expander')[0];
-				$(expander).removeClass('state-icon-collapse');
-				$(expander).addClass('state-icon-expand');
-				$(targetExpanded).fadeOut("fast");
+				var expander = $(target).children('.project-expander-icon')[0];
+				$(expander).removeClass('glyphicon-chevron-up');
+				$(expander).addClass('glyphicon-chevron-down');
+				$(targetExpanded).slideUp();
 			}
 			else {
 				$(target).addClass('collapsed').removeClass('expanded');
-				var expander = $(target).children('.az-expander')[0];
-				$(expander).removeClass('state-icon-expand');
-				$(expander).addClass('state-icon-collapse');
-				$(targetExpanded).fadeIn();
+				var expander = $(target).children('.project-expander-icon')[0];
+				$(expander).removeClass('glyphicon-chevron-down');
+				$(expander).addClass('glyphicon-chevron-up');
+				$(targetExpanded).slideDown();
 			}
 		}
 		else {
@@ -75,10 +75,10 @@ azkaban.ProjectTableView = Backbone.View.extend({
 				createFlowListFunction(data, targetTBody);
 				
 				$(target).addClass('collapsed').removeClass('wait');
-				var expander = $(target).children('.az-expander')[0];
-				$(expander).removeClass('state-icon-expand');
-				$(expander).addClass('state-icon-collapse');
-				$(targetExpanded).fadeIn("fast");
+				var expander = $(target).children('.project-expander-icon')[0];
+				$(expander).removeClass('glyphicon-chevron-down');
+				$(expander).addClass('glyphicon-chevron-up');
+				$(targetExpanded).slideDown();
 			};
 			
 			$.get(requestURL, request, successHandler, "json");
@@ -201,13 +201,13 @@ $(function() {
 	});
 	
 	projectTableView = new azkaban.ProjectTableView({
-		el: $('#all-jobs')
+		el: $('#project-list')
 	});
 	
-	tableSorterView = new azkaban.TableSorter({
+	/*tableSorterView = new azkaban.TableSorter({
 		el: $('#all-jobs'), 
 		initialSort: $('.tb-name')
-	});
+	});*/
 	
 	uploadView = new azkaban.CreateProjectView({
 		el: $('#create-project-modal')