diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53d9baffd7830af796c0eb28274d0ca3870ab254
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -0,0 +1,26 @@
+<script>
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+
+export default {
+  components: {
+    CiIcon,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ci-icon :status="job.status" />
+    {{ job.name }}
+    <a
+      :href="job.build_path"
+      target="_blank"
+    >#{{ job.id }}</a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 62042892e1355a9927c10709c1d9d85397e05e24..a4e3b8e7926b9e869775695b1db49ac2b76814a0 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -3,12 +3,14 @@ import { mapActions } from 'vuex';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import Item from './item.vue';
 
 export default {
   components: {
     Icon,
     CiIcon,
     LoadingIcon,
+    Item,
   },
   props: {
     stage: {
@@ -62,17 +64,11 @@ export default {
         v-if="stage.isLoading && !stage.jobs.length"
       />
       <template v-else>
-        <div
+        <item
           v-for="job in stage.jobs"
           :key="job.id"
-        >
-          <ci-icon :status="job.status" />
-          {{ job.name }}
-          <a
-            :href="job.build_path"
-            target="_blank"
-          >#{{ job.id }}</a>
-        </div>
+          :job="job"
+        />
       </template>
     </div>
   </div>