FE: Resolve "Performance issues when processing large build traces with Ansi2html"

app/assets/stylesheets/pages/builds.scss

@@ -57,6 +57,37 @@
       margin-right: 5px;
     }
   }
+
+  .truncated-info {
+    text-align: center;
+    border-bottom: 1px solid;
+    background-color: $black-transparent;
+    height: 45px;
+
+    &.affix {
+      top: 0;
+    }
+
+    // with sidebar
+    &.affix.sidebar-expanded {
+      right: 312px;
+      left: 22px;
+    }
+
+    // without sidebar
+    &.affix.sidebar-collapsed {
+      right: 20px;
+      left: 20px;
+    }
+
+    &.affix-top {
+      position: absolute;
+      top: 0;
+      margin: 0 auto;
+      right: 5px;
+      left: 5px;
+    }
+  }
 }
 
 .scroll-controls {
@@ -186,6 +217,7 @@
   white-space: pre;
   overflow-x: auto;
   font-size: 12px;
+  position: relative;
 
   .fa-refresh {
     font-size: 24px;

app/views/projects/builds/show.html.haml

@@ -71,6 +71,11 @@
                   = custom_icon('scroll_down_hover_active')
         #up-build-trace
         %pre.build-trace#build-trace
+          .js-truncated-info.truncated-info.hidden
+            %span<
+              Showing last
+              %span.js-truncated-info-size><
+              KiB of log
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh
 

spec/javascripts/build_spec.js

@@ -64,58 +64,33 @@ describe('Build', () => {
       });
     });
 
-    describe('initial build trace', () => {
-      beforeEach(() => {
-        new Build();
-      });
-
-      it('displays the initial build trace', () => {
-        expect($.ajax.calls.count()).toBe(1);
-        const [{ url, dataType, success, context }] = $.ajax.calls.argsFor(0);
-        expect(url).toBe(
-          `${BUILD_URL}/trace.json`,
-        );
-        expect(dataType).toBe('json');
-        expect(success).toEqual(jasmine.any(Function));
-        spyOn(gl.utils, 'setCiStatusFavicon').and.callFake(() => {});
-
-        success.call(context, { html: '<span>Example</span>', status: 'running' });
-
-        expect($('#build-trace .js-build-output').text()).toMatch(/Example/);
-      });
-
-      it('removes the spinner', () => {
-        const [{ success, context }] = $.ajax.calls.argsFor(0);
-        spyOn(gl.utils, 'setCiStatusFavicon').and.callFake(() => {});
-        success.call(context, { trace_html: '<span>Example</span>', status: 'success' });
-
-        expect($('.js-build-refresh').length).toBe(0);
-      });
-    });
-
     describe('running build', () => {
       beforeEach(function () {
-        $('.js-build-options').data('buildStatus', 'running');
         this.build = new Build();
-        spyOn(this.build, 'location').and.returnValue(BUILD_URL);
       });
 
       it('updates the build trace on an interval', function () {
+        spyOn(gl.utils, 'visitUrl');
+
         jasmine.clock().tick(4001);
 
-        expect($.ajax.calls.count()).toBe(2);
-        let [{ url, dataType, success, context }] = $.ajax.calls.argsFor(1);
-        expect(url).toBe(
-          `${BUILD_URL}/trace.json?state=`,
-        );
-        expect(dataType).toBe('json');
-        expect(success).toEqual(jasmine.any(Function));
-
-        success.call(context, {
+        expect($.ajax.calls.count()).toBe(1);
+
+        // We have to do it this way to prevent Webpack to fail to compile
+        // when destructuring assignments and reusing
+        // the same variables names inside the same scope
+        let args = $.ajax.calls.argsFor(0)[0];
+
+        expect(args.url).toBe(`${BUILD_URL}/trace.json`);
+        expect(args.dataType).toBe('json');
+        expect(args.success).toEqual(jasmine.any(Function));
+
+        args.success.call($, {
           html: '<span>Update<span>',
           status: 'running',
           state: 'newstate',
           append: true,
+          complete: false,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
@@ -123,17 +98,20 @@ describe('Build', () => {
 
         jasmine.clock().tick(4001);
 
-        expect($.ajax.calls.count()).toBe(3);
-        [{ url, dataType, success, context }] = $.ajax.calls.argsFor(2);
-        expect(url).toBe(`${BUILD_URL}/trace.json?state=newstate`);
-        expect(dataType).toBe('json');
-        expect(success).toEqual(jasmine.any(Function));
+        expect($.ajax.calls.count()).toBe(2);
+
+        args = $.ajax.calls.argsFor(1)[0];
+        expect(args.url).toBe(`${BUILD_URL}/trace.json`);
+        expect(args.dataType).toBe('json');
+        expect(args.data.state).toBe('newstate');
+        expect(args.success).toEqual(jasmine.any(Function));
 
-        success.call(context, {
+        args.success.call($, {
           html: '<span>More</span>',
           status: 'running',
           state: 'finalstate',
           append: true,
+          complete: true,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
@@ -141,19 +119,22 @@ describe('Build', () => {
       });
 
       it('replaces the entire build trace', () => {
+        spyOn(gl.utils, 'visitUrl');
+
         jasmine.clock().tick(4001);
-        let [{ success, context }] = $.ajax.calls.argsFor(1);
-        success.call(context, {
+        let args = $.ajax.calls.argsFor(0)[0];
+        args.success.call($, {
           html: '<span>Update</span>',
           status: 'running',
-          append: true,
+          append: false,
+          complete: false,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
 
         jasmine.clock().tick(4001);
-        [{ success, context }] = $.ajax.calls.argsFor(2);
-        success.call(context, {
+        args = $.ajax.calls.argsFor(1)[0];
+        args.success.call($, {
           html: '<span>Different</span>',
           status: 'running',
           append: false,
@@ -163,15 +144,34 @@ describe('Build', () => {
         expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
       });
 
+      it('shows information about truncated log', () => {
+        jasmine.clock().tick(4001);
+        const [{ success }] = $.ajax.calls.argsFor(0);
+
+        success.call($, {
+          html: '<span>Update</span>',
+          status: 'success',
+          append: false,
+          truncated: true,
+          size: '50',
+        });
+
+        expect(
+          $('#build-trace .js-truncated-info').text().trim(),
+        ).toContain('Showing last 50 KiB of log');
+        expect($('#build-trace .js-truncated-info-size').text()).toMatch('50');
+      });
+
       it('reloads the page when the build is done', () => {
         spyOn(gl.utils, 'visitUrl');
 
         jasmine.clock().tick(4001);
-        const [{ success, context }] = $.ajax.calls.argsFor(1);
-        success.call(context, {
+        const [{ success }] = $.ajax.calls.argsFor(0);
+        success.call($, {
           html: '<span>Final</span>',
           status: 'passed',
           append: true,
+          complete: true,
         });
 
         expect(gl.utils.visitUrl).toHaveBeenCalledWith(BUILD_URL);