2 files changed, 64 insertions, 20 deletions
diff --git a/app/assets/javascripts/jobs/components/log/collapsible_section.vue b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
new file mode 100644
index 00000000000..7c0deb08488
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
@@ -0,0 +1,55 @@
+<script>
+import LogLine from './line.vue';
+import LogLineHeader from './line_header.vue';
+
+export default {
+  name: 'CollpasibleLogSection',
+  components: {
+    LogLine,
+    LogLineHeader,
+  },
+  props: {
+    section: {
+      type: Object,
+      required: true,
+    },
+    traceEndpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    badgeDuration() {
+      return this.section.line && this.section.line.section_duration;
+    },
+  },
+  methods: {
+    handleOnClickCollapsibleLine(section) {
+      this.$emit('onClickCollapsibleLine', section);
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <log-line-header
+      :line="section.line"
+      :duration="badgeDuration"
+      :path="traceEndpoint"
+      :is-closed="section.isClosed"
+      @toggleLine="handleOnClickCollapsibleLine(section)"
+    />
+    <template v-if="!section.isClosed">
+      <template v-for="line in section.lines">
+        <collpasible-log-section
+          v-if="line.isHeader"
+          :key="`collapsible-nested-${line.offset}`"
+          :section="line"
+          :trace-endpoint="traceEndpoint"
+          @toggleLine="handleOnClickCollapsibleLine"
+        />
+        <log-line v-else :key="line.offset" :line="line" :path="traceEndpoint" />
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
index 429796aeb4e..ef126166e8b 100644
--- a/app/assets/javascripts/jobs/components/log/log.vue
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
+import CollpasibleLogSection from './collapsible_section.vue';
 import LogLine from './line.vue';
-import LogLineHeader from './line_header.vue';
 
 export default {
   components: {
+    CollpasibleLogSection,
     LogLine,
-    LogLineHeader,
   },
   computed: {
     ...mapState(['traceEndpoint', 'trace', 'isTraceComplete']),
@@ -22,24 +22,13 @@ export default {
 <template>
   <code class="job-log d-block">
     <template v-for="(section, index) in trace">
-      <template v-if="section.isHeader">
-        <log-line-header
-          :key="`collapsible-${index}`"
-          :line="section.line"
-          :duration="section.section_duration"
-          :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>
+      <collpasible-log-section
+        v-if="section.isHeader"
+        :key="`collapsible-${index}`"
+        :section="section"
+        :trace-endpoint="traceEndpoint"
+        @onClickCollapsibleLine="handleOnClickCollapsibleLine"
+      />
       <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
     </template>