Creates utils for the job log66454-utils-parser

With the new job log json format
we need a parser on the frontend

3 files changed, 105 insertions, 0 deletions

diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js
new file mode 100644
index 00000000000..de7de92ed2e
--- /dev/null
+++ b/app/assets/javascripts/jobs/store/utils.js
@@ -0,0 +1,40 @@
+/**
+ * Parses the job log content into a structure usable by the template
+ *
+ * For collaspible lines (section_header = true):
+ *    - creates a new array to hold the lines that are collpasible,
+ *    - adds a isClosed property to handle toggle
+ *    - adds a isHeader property to handle template logic
+ * For each line:
+ *    - adds the index as  lineNumber
+ *
+ * @param {Array} lines
+ * @returns {Array}
+ */
+export default (lines = []) =>
+  lines.reduce((acc, line, index) => {
+    if (line.section_header) {
+      acc.push({
+        isClosed: true,
+        isHeader: true,
+        line: {
+          ...line,
+          lineNumber: index,
+        },
+
+        lines: [],
+      });
+    } else if (acc.length && acc[acc.length - 1].isHeader) {
+      acc[acc.length - 1].lines.push({
+        ...line,
+        lineNumber: index,
+      });
+    } else {
+      acc.push({
+        ...line,
+        lineNumber: index,
+      });
+    }
+
+    return acc;
+  }, []);
diff --git a/changelogs/unreleased/66454-utils-parser.yml b/changelogs/unreleased/66454-utils-parser.yml
new file mode 100644
index 00000000000..80cd699937f
--- /dev/null
+++ b/changelogs/unreleased/66454-utils-parser.yml
@@ -0,0 +1,5 @@
+---
+title: Creates utility parser for the job log
+merge_request: 32555
+author:
+type: added
diff --git a/spec/frontend/jobs/store/utils_spec.js b/spec/frontend/jobs/store/utils_spec.js
new file mode 100644
index 00000000000..9e81558f8c2
--- /dev/null
+++ b/spec/frontend/jobs/store/utils_spec.js
@@ -0,0 +1,60 @@
+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);
+  });
+
+  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);
+    });
+
+    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);
+    });
+  });
+});