Creates job log component

Creates vue and vuex support for new job log

Creates the new log.vue component to handle the
new format
Updates the store to use the new parser
Creates an utility function to handle the
incremental log

5 files changed, 375 insertions, 49 deletions

diff --git a/spec/frontend/jobs/store/mutations_spec.js b/spec/frontend/jobs/store/mutations_spec.js
index 343301b8716..8e5ab4b229a 100644
--- a/spec/frontend/jobs/store/mutations_spec.js
+++ b/spec/frontend/jobs/store/mutations_spec.js
@@ -97,6 +97,14 @@ describe('Jobs Store Mutations', () => {
     });
   });
 
+  describe('TOGGLE_COLLAPSIBLE_LINE', () => {
+    it('toggles the `isClosed` property of the provided object', () => {
+      const section = { isClosed: true };
+      mutations[types.TOGGLE_COLLAPSIBLE_LINE](stateCopy, section);
+      expect(section.isClosed).toEqual(false);
+    });
+  });
+
   describe('REQUEST_JOB', () => {
     it('sets isLoading to true', () => {
       mutations[types.REQUEST_JOB](stateCopy);
diff --git a/spec/frontend/jobs/store/utils_spec.js b/spec/frontend/jobs/store/utils_spec.js
index 9e81558f8c2..1b96f95b5a5 100644
--- a/spec/frontend/jobs/store/utils_spec.js
+++ b/spec/frontend/jobs/store/utils_spec.js
@@ -1,60 +1,261 @@
-import linesParser from '~/jobs/store/utils';
-
-describe('linesParser', () => {
-  const mockData = [
-    {
-      offset: 1001,
-      content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
-    },
-    {
-      offset: 1002,
-      content: [
-        {
-          text:
-            'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.3-golang-1.11-git-2.22-chrome-73.0-node-12.x-yarn-1.16-postgresql-9.6-graphicsmagick-1.3.33',
-        },
-      ],
-      sections: ['prepare-executor'],
-      section_header: true,
-    },
-    {
-      offset: 1003,
-      content: [{ text: 'Starting service postgres:9.6.14 ...' }],
-      sections: ['prepare-executor'],
-    },
-    {
-      offset: 1004,
-      content: [{ text: 'Pulling docker image postgres:9.6.14 ...', style: 'term-fg-l-green' }],
-      sections: ['prepare-executor'],
-    },
-  ];
-
-  let result;
-
-  beforeEach(() => {
-    result = linesParser(mockData);
-  });
+import { logLinesParser, updateIncrementalTrace } from '~/jobs/store/utils';
+
+describe('Jobs Store Utils', () => {
+  describe('logLinesParser', () => {
+    const mockData = [
+      {
+        offset: 1001,
+        content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
+      },
+      {
+        offset: 1002,
+        content: [
+          {
+            text:
+              'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.3-golang-1.11-git-2.22-chrome-73.0-node-12.x-yarn-1.16-postgresql-9.6-graphicsmagick-1.3.33',
+          },
+        ],
+        sections: ['prepare-executor'],
+        section_header: true,
+      },
+      {
+        offset: 1003,
+        content: [{ text: 'Starting service postgres:9.6.14 ...' }],
+        sections: ['prepare-executor'],
+      },
+      {
+        offset: 1004,
+        content: [{ text: 'Pulling docker image postgres:9.6.14 ...', style: 'term-fg-l-green' }],
+        sections: ['prepare-executor'],
+      },
+    ];
+
+    let result;
+
+    beforeEach(() => {
+      result = logLinesParser(mockData);
+    });
+
+    describe('regular line', () => {
+      it('adds a lineNumber property with correct index', () => {
+        expect(result[0].lineNumber).toEqual(0);
+        expect(result[1].line.lineNumber).toEqual(1);
+      });
+    });
+
+    describe('collpasible section', () => {
+      it('adds a `isClosed` property', () => {
+        expect(result[1].isClosed).toEqual(true);
+      });
 
-  describe('regular line', () => {
-    it('adds a lineNumber property with correct index', () => {
-      expect(result[0].lineNumber).toEqual(0);
-      expect(result[1].line.lineNumber).toEqual(1);
+      it('adds a `isHeader` property', () => {
+        expect(result[1].isHeader).toEqual(true);
+      });
+
+      it('creates a lines array property with the content of the collpasible section', () => {
+        expect(result[1].lines.length).toEqual(2);
+        expect(result[1].lines[0].content).toEqual(mockData[2].content);
+        expect(result[1].lines[1].content).toEqual(mockData[3].content);
+      });
     });
   });
 
-  describe('collpasible section', () => {
-    it('adds a `isClosed` property', () => {
-      expect(result[1].isClosed).toEqual(true);
+  describe('updateIncrementalTrace', () => {
+    const originalTrace = [
+      {
+        offset: 1,
+        content: [
+          {
+            text: 'Downloading',
+          },
+        ],
+      },
+    ];
+
+    describe('without repeated section', () => {
+      it('concats and parses both arrays', () => {
+        const oldLog = logLinesParser(originalTrace);
+        const newLog = [
+          {
+            offset: 2,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+          },
+        ];
+        const result = updateIncrementalTrace(originalTrace, oldLog, newLog);
+
+        expect(result).toEqual([
+          {
+            offset: 1,
+            content: [
+              {
+                text: 'Downloading',
+              },
+            ],
+            lineNumber: 0,
+          },
+          {
+            offset: 2,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+            lineNumber: 1,
+          },
+        ]);
+      });
+    });
+
+    describe('with regular line repeated offset', () => {
+      it('updates the last line and formats with the incremental part', () => {
+        const oldLog = logLinesParser(originalTrace);
+        const newLog = [
+          {
+            offset: 1,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+          },
+        ];
+        const result = updateIncrementalTrace(originalTrace, oldLog, newLog);
+
+        expect(result).toEqual([
+          {
+            offset: 1,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+            lineNumber: 0,
+          },
+        ]);
+      });
     });
 
-    it('adds a `isHeader` property', () => {
-      expect(result[1].isHeader).toEqual(true);
+    describe('with header line repeated', () => {
+      it('updates the header line and formats with the incremental part', () => {
+        const headerTrace = [
+          {
+            offset: 1,
+            section_header: true,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+            sections: ['section'],
+          },
+        ];
+        const oldLog = logLinesParser(headerTrace);
+        const newLog = [
+          {
+            offset: 1,
+            section_header: true,
+            content: [
+              {
+                text: 'updated log line',
+              },
+            ],
+            sections: ['section'],
+          },
+        ];
+        const result = updateIncrementalTrace(headerTrace, oldLog, newLog);
+
+        expect(result).toEqual([
+          {
+            isClosed: true,
+            isHeader: true,
+            line: {
+              offset: 1,
+              section_header: true,
+              content: [
+                {
+                  text: 'updated log line',
+                },
+              ],
+              sections: ['section'],
+              lineNumber: 0,
+            },
+            lines: [],
+          },
+        ]);
+      });
     });
 
-    it('creates a lines array property with the content of the collpasible section', () => {
-      expect(result[1].lines.length).toEqual(2);
-      expect(result[1].lines[0].content).toEqual(mockData[2].content);
-      expect(result[1].lines[1].content).toEqual(mockData[3].content);
+    describe('with collapsible line repeated', () => {
+      it('updates the collapsible line and formats with the incremental part', () => {
+        const collapsibleTrace = [
+          {
+            offset: 1,
+            section_header: true,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+            sections: ['section'],
+          },
+          {
+            offset: 2,
+            content: [
+              {
+                text: 'log line',
+              },
+            ],
+            sections: ['section'],
+          },
+        ];
+        const oldLog = logLinesParser(collapsibleTrace);
+        const newLog = [
+          {
+            offset: 2,
+            content: [
+              {
+                text: 'updated log line',
+              },
+            ],
+            sections: ['section'],
+          },
+        ];
+        const result = updateIncrementalTrace(collapsibleTrace, oldLog, newLog);
+
+        expect(result).toEqual([
+          {
+            isClosed: true,
+            isHeader: true,
+            line: {
+              offset: 1,
+              section_header: true,
+              content: [
+                {
+                  text: 'log line',
+                },
+              ],
+              sections: ['section'],
+              lineNumber: 0,
+            },
+            lines: [
+              {
+                offset: 2,
+                content: [
+                  {
+                    text: 'updated log line',
+                  },
+                ],
+                sections: ['section'],
+                lineNumber: 1,
+              },
+            ],
+          },
+        ]);
+      });
     });
   });
 });
diff --git a/spec/javascripts/jobs/components/log/log_spec.js b/spec/javascripts/jobs/components/log/log_spec.js
new file mode 100644
index 00000000000..469bbf6714d
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/log_spec.js
@@ -0,0 +1,77 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { logLinesParser } from '~/jobs/store/utils';
+import Log from '~/jobs/components/log/log.vue';
+import { jobLog } from './mock_data';
+
+describe('Job Log', () => {
+  let wrapper;
+  let actions;
+  let state;
+  let store;
+
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  const createComponent = () => {
+    wrapper = mount(Log, {
+      sync: false,
+      localVue,
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    actions = {
+      toggleCollapsibleLine: () => {},
+    };
+
+    state = {
+      trace: logLinesParser(jobLog),
+      traceEndpoint: 'jobs/id',
+    };
+
+    store = new Vuex.Store({
+      actions,
+      state,
+    });
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('line numbers', () => {
+    it('renders a line number for each open line', () => {
+      expect(wrapper.find('#L1').text()).toBe('1');
+      expect(wrapper.find('#L2').text()).toBe('2');
+      expect(wrapper.find('#L3').text()).toBe('3');
+    });
+
+    it('links to the provided path and correct line number', () => {
+      expect(wrapper.find('#L1').attributes('href')).toBe(`${state.traceEndpoint}#L1`);
+    });
+  });
+
+  describe('collapsible sections', () => {
+    it('renders a clickable header section', () => {
+      expect(wrapper.find('.collapsible-line').attributes('role')).toBe('button');
+    });
+
+    it('renders an icon with the closed state', () => {
+      expect(wrapper.find('.collapsible-line svg').classes()).toContain('ic-angle-right');
+    });
+
+    describe('on click header section', () => {
+      it('calls toggleCollapsibleLine', () => {
+        spyOn(wrapper.vm, 'toggleCollapsibleLine').and.callThrough();
+
+        wrapper.find('.collapsible-line').trigger('click');
+
+        expect(wrapper.vm.toggleCollapsibleLine).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/components/log/mock_data.js b/spec/javascripts/jobs/components/log/mock_data.js
new file mode 100644
index 00000000000..54a6d31b278
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/mock_data.js
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/prefer-default-export
+export const jobLog = [
+  {
+    offset: 1000,
+    content: [{ text: 'Running with gitlab-runner 12.1.0 (de7731dd)' }],
+  },
+  {
+    offset: 1001,
+    content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
+  },
+  {
+    offset: 1002,
+    content: [
+      {
+        text: 'Using Docker executor with image dev.gitlab.org3',
+      },
+    ],
+    sections: ['prepare-executor'],
+    section_header: true,
+  },
+  {
+    offset: 1003,
+    content: [{ text: 'Starting service postgres:9.6.14 ...', style: 'text-green' }],
+    sections: ['prepare-executor'],
+  },
+];
diff --git a/spec/javascripts/jobs/store/actions_spec.js b/spec/javascripts/jobs/store/actions_spec.js
index 7b96df85b82..91d1942bdbf 100644
--- a/spec/javascripts/jobs/store/actions_spec.js
+++ b/spec/javascripts/jobs/store/actions_spec.js
@@ -16,6 +16,7 @@ import {
   stopPollingTrace,
   receiveTraceSuccess,
   receiveTraceError,
+  toggleCollapsibleLine,
   requestJobsForStage,
   fetchJobsForStage,
   receiveJobsForStageSuccess,
@@ -303,6 +304,19 @@ describe('Job State actions', () => {
     });
   });
 
+  describe('toggleCollapsibleLine', () => {
+    it('should commit TOGGLE_COLLAPSIBLE_LINE mutation ', done => {
+      testAction(
+        toggleCollapsibleLine,
+        { isClosed: true },
+        mockedState,
+        [{ type: types.TOGGLE_COLLAPSIBLE_LINE, payload: { isClosed: true } }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('requestJobsForStage', () => {
     it('should commit REQUEST_JOBS_FOR_STAGE mutation ', done => {
       testAction(