1 files changed, 45 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
new file mode 100644
index 00000000000..5db866afe5a
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -0,0 +1,45 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import LogLine from './line.vue';
+import LogLineHeader from './line_header.vue';
+
+export default {
+  components: {
+    LogLine,
+    LogLineHeader,
+  },
+  computed: {
+    ...mapState(['traceEndpoint', 'trace']),
+  },
+  methods: {
+    ...mapActions(['toggleCollapsibleLine']),
+    handleOnClickCollapsibleLine(section) {
+      this.toggleCollapsibleLine(section);
+    },
+  },
+};
+</script>
+<template>
+  <code class="job-log">
+    <template v-for="(section, index) in trace">
+      <template v-if="section.isHeader">
+        <log-line-header
+          :key="`collapsible-${index}`"
+          :line="section.line"
+          :path="traceEndpoint"
+          :is-closed="section.isClosed"
+          @toggleLine="handleOnClickCollapsibleLine(section)"
+        />
+        <template v-if="!section.isClosed">
+          <log-line
+            v-for="line in section.lines"
+            :key="line.offset"
+            :line="line"
+            :path="traceEndpoint"
+          />
+        </template>
+      </template>
+      <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
+    </template>
+  </code>
+</template>