Merge pull request #112 from screwdriver-cd/logtime

feat: display timestamps in logs

app/components/build-log/component.js

@@ -1,5 +1,6 @@
 /* eslint-disable new-cap */
 import Ember from 'ember';
+import moment from 'moment';
 
 export default Ember.Component.extend({
   logger: Ember.inject.service('build-logs'),
@@ -109,7 +110,10 @@ export default Ember.Component.extend({
    */
   updateLogContent(lines) {
     // convert all loaded log lines into a single string
-    const newLogLines = lines.map(l => `${l.m}\n`).reduce((log = '', line) => log + line);
+    const newLogLines = lines.map(l => '<span class="line">' +
+      `<span class="time">${moment(l.t).format('HH:mm:ss')}</span>` +
+      `<span class="content">${l.m}</span></span>`
+    ).reduce((log = '', line) => log + line);
 
     this.set('logContent', `${this.get('logContent')}${newLogLines}`);
   },

app/components/build-log/styles.scss

@@ -1,6 +1,3 @@
-&.is-open {
-  padding: 0 15px 10px;
-}
 .logs {
   font-size: 1em;
   font-family: monospace;
@@ -10,10 +7,42 @@
   height: 0;
   padding: 0;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+
+  .line {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .time {
+    color: $sd-text-med;
+    display: none;
+  }
+
+  .content {
+    display: inline-flex;
+    flex-grow: 1;
+  }
+}
+
+&.is-open {
+  padding: 0 15px 10px;
+
+  .logs {
+    padding: 20px 30px;
+    overflow: auto;
+    height: auto;
+  }
 }
 
-&.is-open .logs {
-  padding: 20px 30px;
-  overflow: auto;
-  height: auto;
+@media screen and (min-width: 35.5em) {
+  .logs .line {
+    flex-direction: row;
+  }
+  .logs .time {
+    display: inline-flex;
+    margin-right: 10px;
+  }
 }

tests/acceptance/build-test.js

@@ -3,7 +3,10 @@ import moduleForAcceptance from 'screwdriver-ui/tests/helpers/module-for-accepta
 // import { authenticateSession } from 'screwdriver-ui/tests/helpers/ember-simple-auth';
 import Pretender from 'pretender';
 import Ember from 'ember';
+import moment from 'moment';
 let server;
+const time = 1474649593036;
+const timeFormat = moment(time).format('HH:mm:ss');
 
 moduleForAcceptance('Acceptance | build', {
   beforeEach() {
@@ -124,13 +127,13 @@ moduleForAcceptance('Acceptance | build', {
     server.get('http://localhost:8080/v4/builds/1234/steps/install/logs', () => [
       200,
       { 'Content-Type': 'application/json', 'x-more-data': 'false' },
-      JSON.stringify([{ t: 1474649593036, m: 'bad stuff', n: 0 }])
+      JSON.stringify([{ t: time, m: 'bad stuff', n: 0 }])
     ]);
 
     server.get('http://localhost:8080/v4/builds/1234/steps/sd-setup/logs', () => [
       200,
       { 'Content-Type': 'application/json', 'x-more-data': 'false' },
-      JSON.stringify([{ t: 1474649593036, m: 'fancy stuff', n: 0 }])
+      JSON.stringify([{ t: time, m: 'fancy stuff', n: 0 }])
     ]);
   },
   afterEach() {
@@ -148,15 +151,17 @@ test('visiting /pipelines/:id/build/:id', function (assert) {
     assert.equal(find('a h1').text().trim(), 'foo/bar', 'incorrect pipeline name');
     assert.equal(find('.line1 h1').text().trim(), 'PR-50', 'incorrect job name');
     assert.equal(find('span.sha').text().trim(), '#abcdef', 'incorrect sha');
-    assert.equal(find('.is-open .logs').text().trim(), 'bad stuff', 'incorrect logs open');
+    assert.equal(find('.is-open .logs').text().trim(),
+      `${timeFormat}bad stuff`, 'incorrect logs open');
 
     // This looks weird, but :nth-child(n) wasn't resolving properly.
     // This does essentially the same thing by setting a context for looking up `.name`.
     click('.name', $('.build-step-collection > div').get(2)); // close install step
     click('.name', $('.build-step-collection > div').get(1)); // open sd-setup step
 
     andThen(() => {
-      assert.equal(find('.is-open .logs').text().trim(), 'fancy stuff', 'incorrect logs open');
+      assert.equal(find('.is-open .logs').text().trim(),
+        `${timeFormat}fancy stuff`, 'incorrect logs open');
     });
   });
 });

tests/integration/components/build-log/component-test.js

@@ -2,13 +2,18 @@ import { moduleForComponent, test } from 'ember-qunit';
 import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
 import wait from 'ember-test-helpers/wait';
+import moment from 'moment';
+const time1 = 1478912844724;
+const time2 = 1478912845725;
+const timeFormat1 = moment(time1).format('HH:mm:ss');
+const timeFormat2 = moment(time2).format('HH:mm:ss');
 
 const logService = Ember.Service.extend({
   fetchLogs() {
     return Ember.RSVP.resolve({
       lines: [
-        { m: 'hello', n: 1, t: 1478912844724 },
-        { m: 'world', n: 2, t: 1478912844725 }
+        { m: 'hello', n: 1, t: time1 },
+        { m: 'world', n: 2, t: time2 }
       ],
       done: true
     });
@@ -62,7 +67,7 @@ test('it renders open when told to', function (assert) {
   assert.ok(this.$('.build-log').hasClass('is-open'));
 
   return wait().then(() => {
-    assert.equal(this.$().text().trim(), 'hello\nworld');
+    assert.equal(this.$().text().trim(), `${timeFormat1}hello${timeFormat2}world`);
   });
 });
 
@@ -81,7 +86,7 @@ test('it starts loading when open changes', function (assert) {
 
   return wait().then(() => {
     assert.ok(this.$('.build-log').hasClass('is-open'), 'is open');
-    assert.equal(this.$().text().trim(), 'hello\nworld');
+    assert.equal(this.$().text().trim(), `${timeFormat1}hello${timeFormat2}world`);
   });
 });
 

tests/integration/components/build-step/component-test.js

@@ -2,11 +2,14 @@ import { moduleForComponent, test } from 'ember-qunit';
 import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
 import wait from 'ember-test-helpers/wait';
+import moment from 'moment';
+const time = 1478912844724;
+const timeFormat = moment(time).format('HH:mm:ss');
 
 const logService = Ember.Service.extend({
   fetchLogs() {
     return Ember.RSVP.resolve({
-      lines: [{ m: 'hello, world', n: 1, t: 1478912844724 }],
+      lines: [{ m: 'hello, world', n: 1, t: time }],
       done: true
     });
   }
@@ -53,7 +56,7 @@ test('it starts open when step failed', function (assert) {
   assert.equal($('.step-view.failure').length, 1, 'has step view');
   assert.equal($('.build-log').length, 1, 'has log view');
   assert.ok($('.build-step').hasClass('is-open'), 'rendered open');
-  assert.equal($('.build-log').text().trim(), 'hello, world');
+  assert.equal($('.build-log').text().trim(), `${timeFormat}hello, world`);
 
   $('.name').click();
 
@@ -79,7 +82,7 @@ test('it starts open when step is running', function (assert) {
   assert.ok(this.$('.build-step').hasClass('is-open'));
 
   return wait().then(() => {
-    assert.equal(this.$('.build-log').text().trim(), 'hello, world');
+    assert.equal(this.$('.build-log').text().trim(), `${timeFormat}hello, world`);
   });
 });
 
@@ -103,7 +106,7 @@ test('it can toggle open and closed', function (assert) {
 
   return wait().then(() => {
     assert.ok(this.$('.build-step').hasClass('is-open'), 'is open');
-    assert.equal(this.$('.build-log').text().trim(), 'hello, world');
+    assert.equal(this.$('.build-log').text().trim(), `${timeFormat}hello, world`);
 
     this.$('.name').click();
 

tests/unit/build-logs/service-test.js

@@ -2,6 +2,7 @@ import { moduleFor, test } from 'ember-qunit';
 // import wait from 'ember-test-helpers/wait';
 import Pretender from 'pretender';
 let server;
+const now = Date.now();
 
 const noMoreLogs = () => {
   server.get('http://localhost:8080/v4/builds/1/steps/banana/logs/', () => [
@@ -11,7 +12,7 @@ const noMoreLogs = () => {
       'x-more-data': false
     },
     JSON.stringify([{
-      t: Date.now(),
+      t: now,
       n: 0,
       m: 'hello, world'
     }])
@@ -26,7 +27,7 @@ const moreLogs = () => {
       'x-more-data': true
     },
     JSON.stringify([{
-      t: Date.now(),
+      t: now,
       n: 0,
       m: 'hello, world'
     }])