Group log messages by date

Introduce a heading for each day in the logs and remove the day
from each column.

Closes COUCHDB-2136

3 files changed, 110 insertions, 23 deletions

diff --git a/src/fauxton/app/addons/logs/resources.js b/src/fauxton/app/addons/logs/resources.js
index 6082fcd7c..dec818795 100644
--- a/src/fauxton/app/addons/logs/resources.js
+++ b/src/fauxton/app/addons/logs/resources.js
@@ -23,11 +23,20 @@ function (app, FauxtonAPI, Backbone, d3) {
 
   Log.Model = Backbone.Model.extend({
 
+    initialize: function () {
+      this.dateObject = new Date(this.get('date'));
+    },
+
     date: function () {
-      var date = new Date(this.get('date')),
-          formatter = d3.time.format("%b %e %H:%M%:%S");
+      var formatter = d3.time.format("%b %e");
+
+      return formatter(this.dateObject);
+    },
+
+    time: function () {
+      var formatter = d3.time.format("%H:%M%:%S");
 
-      return formatter(date);
+      return formatter(this.dateObject);
     },
 
     logLevel: function () {
@@ -66,6 +75,19 @@ function (app, FauxtonAPI, Backbone, d3) {
       return Backbone.Collection.prototype.fetch.call(this, _.extend(options, {dataType: "html"}));
     },
 
+    sortLogsIntoDays: function () {
+      return _.reduce(this.toArray(), function (sortedCollection, log, key) {
+        var date = log.date();
+
+        if (!sortedCollection[date]) {
+          sortedCollection[date] = [];
+        }
+
+        sortedCollection[date].push(log);
+        return sortedCollection;
+      }, {});
+    },
+
     parse: function (resp) {
       resp = resp.replace(/\n\s/g, '');
       var lines = resp.split(/\n/);
@@ -110,7 +132,11 @@ function (app, FauxtonAPI, Backbone, d3) {
     },
 
     serialize: function () {
-      return { logs: new Log.Collection(this.createFilteredCollection())};
+      var collection = new Log.Collection(this.createFilteredCollection());
+
+      return {
+        days: collection.sortLogsIntoDays()
+      };
     },
 
     afterRender: function () {
diff --git a/src/fauxton/app/addons/logs/templates/dashboard.html b/src/fauxton/app/addons/logs/templates/dashboard.html
index 95bee252d..855da37ed 100644
--- a/src/fauxton/app/addons/logs/templates/dashboard.html
+++ b/src/fauxton/app/addons/logs/templates/dashboard.html
@@ -17,7 +17,7 @@ the License.
   <table class="table table-bordered log-table">
     <thead>
       <tr>
-        <th class="date">Date</th>
+        <th class="time">Date</th>
         <th class="level">Log Value</th>
         <th class="pid">Pid</th>
         <th class="args">Url</th>
@@ -25,23 +25,25 @@ the License.
     </thead>
 
     <tbody>
-      <% logs.each(function (log) { %>
-      <tr class="<%= log.logLevel() %>">
-        <td>
-          <!-- TODO: better format the date -->
-          <%= log.date() %>
-        </td>
-        <td>
-          <%= log.logLevel() %>
-        </td>
-        <td class="pid">
-          <%= log.pid() %>
-        </td>
-        <td class="args">
-          <!-- TODO: split the line, maybe put method in it's own column -->
-          <%= log.args() %>
-        </td>
-      </tr>
+      <%  _.forEach(days, function (logs, date) { %>
+        <tr><td class="day" colspan="4"><%= date %></td></tr>
+        <% _.forEach(logs, function (log) { %>
+          <tr class="<%= log.logLevel() %>">
+            <td>
+              <%= log.time() %>
+            </td>
+            <td>
+              <%= log.logLevel() %>
+            </td>
+            <td class="pid">
+              <%= log.pid() %>
+            </td>
+            <td class="args">
+              <!-- TODO: split the line, maybe put method in it's own column -->
+              <%= log.args() %>
+            </td>
+          </tr>
+        <% }); %>
       <% }); %>
     </tbody>
   </table>
diff --git a/src/fauxton/app/addons/logs/tests/resourcesSpec.js b/src/fauxton/app/addons/logs/tests/resourcesSpec.js
index 5bdd339e4..916dc91ab 100644
--- a/src/fauxton/app/addons/logs/tests/resourcesSpec.js
+++ b/src/fauxton/app/addons/logs/tests/resourcesSpec.js
@@ -14,7 +14,8 @@ define([
        'addons/logs/resources',
        'testUtils'
 ], function (Log, testUtils) {
-  var assert = testUtils.assert;
+  var assert = testUtils.assert,
+      ViewSandbox = testUtils.ViewSandbox;
 
   describe('Logs Resources', function () {
 
@@ -54,5 +55,63 @@ define([
         assert.equal(parsedLog[2].args, 'Retrying GET to http://176.9.4.195/registry/google-openid?revs=true&open_revs=%5B%2219-380884ba97e3d6fc48c8c7db3dc0e91b%22%5D&latest=true in 1.0 seconds due to error {error,{error,connection_closing}}');
       });
     });
+
+    describe('uses a heading for each date (COUCHDB-2136)', function () {
+      var collection,
+          view;
+
+      beforeEach(function () {
+        collection = new Log.Collection([
+          new Log.Model({
+            date: new Date('Fri Apr 19 2014 12:06:01 GMT+0200 (CEST)'),
+            log_level: 'info',
+            pid: 1337,
+            args: 'ente ente'
+          }),
+          new Log.Model({
+            date: new Date('Fri Apr 18 2014 12:06:01 GMT+0200 (CEST)'),
+            log_level: 'info',
+            pid: 1337,
+            args: 'ente ente'
+          }),
+          new Log.Model({
+            date: new Date('Thu Apr 17 2014 12:06:01 GMT+0200 (CEST)'),
+            log_level: 'info',
+            pid: 1337,
+            args: 'ente ente'
+          }),
+          new Log.Model({
+            date: new Date('Thu Apr 16 2014 12:06:01 GMT+0200 (CEST)'),
+            log_level: 'info',
+            pid: 1337,
+            args: 'ente ente'
+          })
+        ]);
+
+      });
+
+      it('sorts the data into an object', function () {
+        var sortedCollection = collection.sortLogsIntoDays();
+
+        assert.property(sortedCollection, 'Apr 18');
+        assert.property(sortedCollection, 'Apr 17');
+      });
+
+      it('creates headers with dates', function () {
+        var titles = [],
+            viewSandbox,
+            view;
+
+        view = new Log.Views.View({collection: collection});
+        viewSandbox = new ViewSandbox();
+        viewSandbox.renderView(view);
+
+        view.$('td[colspan="4"]').each(function (i, elem) {
+          titles.push($(elem).text());
+        });
+        assert.include(titles, 'Apr 18');
+        assert.include(titles, 'Apr 17');
+      });
+    });
   });
 });