Creates base components for new job log

Creates a link component, a line component and
a clickable line component to handle the
new job log format

3 files changed, 125 insertions, 0 deletions

diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
new file mode 100644
index 00000000000..86d0fcc3b74
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -0,0 +1,28 @@
+<script>
+import LineNumber from './line_number.vue';
+
+export default {
+  components: {
+    LineNumber,
+  },
+  props: {
+    line: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="line">
+    <line-number :line-number="line.lineNumber" :path="path" />
+    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
+      content.text
+    }}</span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
new file mode 100644
index 00000000000..4ec212d2333
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -0,0 +1,45 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import LineNumber from './line_number.vue';
+
+export default {
+  components: {
+    Icon,
+    LineNumber,
+  },
+  props: {
+    line: {
+      type: Object,
+      required: true,
+    },
+    isClosed: {
+      type: Boolean,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    iconName() {
+      return this.isClosed ? 'angle-right' : 'angle-down';
+    },
+  },
+  methods: {
+    handleOnClick() {
+      this.$emit('toggleLine');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="line collapsible-line" role="button" @click="handleOnClick">
+    <icon :name="iconName" class="arrow" />
+    <line-number :line-number="line.lineNumber" :path="path" />
+    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
+      content.text
+    }}</span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jobs/components/log/line_number.vue b/app/assets/javascripts/jobs/components/log/line_number.vue
new file mode 100644
index 00000000000..e06836e2e97
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/line_number.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlLink,
+  },
+  props: {
+    lineNumber: {
+      type: Number,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    /**
+     * Builds the url for each line number
+     *
+     * @returns {String}
+     */
+    buildLineNumber() {
+      return `${this.path}#${this.lineNumberId}`;
+    },
+    /**
+     * Array indexes start with 0, so we add 1
+     * to create the line number
+     *
+     * @returns {Number} the line number
+     */
+    parsedLineNumber() {
+      return this.lineNumber + 1;
+    },
+
+    /**
+     * Creates the anchor for each link
+     *
+     * @returns {String}
+     */
+    lineNumberId() {
+      return `L${this.parsedLineNumber}`;
+    },
+  },
+};
+</script>
+<template>
+  <gl-link :id="lineNumberId" class="line-number" :href="buildLineNumber">{{
+    parsedLineNumber
+  }}</gl-link>
+</template>