1 files changed, 14 insertions, 4 deletions
diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
index 4ec212d2333..5886b7d03bf 100644
--- a/app/assets/javascripts/jobs/components/log/line_header.vue
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -1,11 +1,13 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import LineNumber from './line_number.vue';
+import DurationBadge from './duration_badge.vue';
 
 export default {
   components: {
     Icon,
     LineNumber,
+    DurationBadge,
   },
   props: {
     line: {
@@ -20,6 +22,11 @@ export default {
       type: String,
       required: true,
     },
+    duration: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     iconName() {
@@ -35,11 +42,14 @@ export default {
 </script>
 
 <template>
-  <div class="line collapsible-line" role="button" @click="handleOnClick">
-    <icon :name="iconName" class="arrow" />
+  <div class="line collapsible-line d-flex justify-content-between" role="button" @click="handleOnClick">
+    <icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
+    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">
+      {{
       content.text
-    }}</span>
+      }}
+    </span>
+    <duration-badge v-if="duration" :duration="duration" />
   </div>
 </template>