1 files changed, 51 insertions, 0 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..0c7b78a3da7
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
@@ -0,0 +1,51 @@
+<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">
+      <log-line
+        v-for="line in section.lines"
+        :key="line.offset"
+        :line="line"
+        :path="traceEndpoint"
+      />
+    </template>
+  </div>
+</template>