updated project page to give a more fine-grained grouping of projects…

… based on last completed build

Summary: Previously, the project page (/projects) groups projects as "last built in 1 week" and "not built in 1 week". This makes the grouping more fine grained, so we can get more useful information. It adds 1 month, 3 months, and never ran a build to completion.

Test Plan:
ran locally

{F514643}

Reviewers: kylec

Reviewed By: kylec

Subscribers: changesbot, anupc, kylec

Tags: #changes_ui

Differential Revision: https://tails.corp.dropbox.com/D226890

webapp/display/changes/ui.js

@@ -3,6 +3,15 @@ import moment from 'moment';
 
 import SimpleTooltip from 'es6!display/simple_tooltip';
 
+
+// return the age of a build in seconds
+function getBuildAge(lastBuild) {
+  // NOTE: we use dateDecided because in the UI, we are only showing builds
+  // that have finished
+  var date = lastBuild.dateDecided ? lastBuild.dateDecided : lastBuild.dateModified;
+  return moment.utc().format('X') - moment.utc(date).format('X');
+}
+
 /*
  * Mostly things that seemed too small to be worth making into tags, e.g.
  * rendering a shorter name for a repo url.
@@ -14,15 +23,16 @@ var ChangesUI = {
     return _.last(_.compact(repo_url.split(/:|\//)));
   },
 
+  getBuildAge: getBuildAge,
+
   // projects whose last build was over a week old are considered stale
   projectIsStale: function(lastBuild) {
-    var age = moment.utc().format('X') -
-      moment.utc(lastBuild.dateCreated).format('X');
+    var age = getBuildAge(lastBuild)
 
     return age > 60*60*24*7;
   },
 
-  // renders a lock icon with tooltip: you may need special permissions to see 
+  // renders a lock icon with tooltip: you may need special permissions to see
   // this (I think not everyone can see Jenkins)
   restrictedIcon() {
     return <SimpleTooltip label="You may need special permissions to see this">
@@ -60,7 +70,7 @@ var ChangesUI = {
 
   /*
    * Allows us to have links that can dynamically change content using
-   * javascript (tabs, paging buttons) but can still be opened in a new 
+   * javascript (tabs, paging buttons) but can still be opened in a new
    * window with ctrl/right click
    */
   leftClickOnly: function(wrapped_event_handler) {

webapp/pages/all_projects_page.js

@@ -117,22 +117,60 @@ var AllProjectsPage = React.createClass({
    * TODO: do we have any stats we want to show?
    */
   renderDefault: function(projects_data) {
-    var list = [], stale_list = [];
+    var groups = [{
+        minAge: -1,
+        header: 'Recently built',
+        projects: [],
+    }, {
+        minAge: moment.duration(1, 'weeks').asSeconds(),
+        header: 'Last built over 1 week ago',
+        projects: [],
+    }, {
+        minAge: moment.duration(1, 'months').asSeconds(),
+        header: 'Last built over 1 month ago',
+        projects: [],
+    }, {
+        minAge: moment.duration(3, 'months').asSeconds(),
+        header: 'Last built over 3 months ago',
+        projects: [],
+    }, {
+        header: 'Never finished a build',
+        projects: [],
+    }];
+
+    // group builds
     _.each(projects_data, p => {
-      var is_stale = p.lastBuild && ChangesUI.projectIsStale(p.lastBuild);
-      !is_stale ? list.push(p) : stale_list.push(p);
+      if (!p.lastBuild) {
+        groups[groups.length - 1].projects.push(p);
+      } else {
+        var age = ChangesUI.getBuildAge(p.lastBuild);
+        for (var i = groups.length - 2; i >= 0; --i) {
+          if (age > groups[i].minAge) {
+              groups[i].projects.push(p);
+              break;
+          }
+        }
+      }
     });
 
-    var stale_header = stale_list ?
-      <SectionHeader className="marginTopL">Stale Projects (>1 week)</SectionHeader> :
-      null;
+    var staleContent = [];
+    for (var i = 0; i < groups.length; ++i) {
+      if (groups[i].projects.length > 0) {
+        staleContent.push(
+          <span>
+            <SectionHeader className="marginTopL">
+              {groups[i].header}
+            </SectionHeader>
+            <div className='bluishGray'>
+              {this.renderProjectList(groups[i].projects)}
+            </div>
+          </span>
+        );
+      }
+    }
 
     return <div>
-      {this.renderProjectList(list)}
-      {stale_header}
-      <div className="bluishGray">
-        {this.renderProjectList(stale_list)}
-      </div>
+      {staleContent}
     </div>;
   },