1 files changed, 77 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue b/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue
new file mode 100644
index 00000000000..097ab3b4cf6
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue
@@ -0,0 +1,77 @@
+<script>
+import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
+import { sprintf } from '~/locale';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+
+export default {
+  components: {
+    CiIcon,
+    GlIcon,
+    GlLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [delayedJobMixin],
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipText() {
+      const { name, status } = this.job;
+      const text = `${name} - ${status.tooltip}`;
+
+      if (this.isDelayedJob) {
+        return sprintf(text, { remainingTime: this.remainingTime });
+      }
+
+      return text;
+    },
+    jobName() {
+      return this.job.name ? this.job.name : this.job.id;
+    },
+    classes() {
+      return {
+        retried: this.job.retried,
+        'gl-font-weight-bold': this.isActive,
+      };
+    },
+    dataTestId() {
+      return this.isActive ? 'active-job' : null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="build-job gl-relative" :class="classes">
+    <gl-link
+      v-gl-tooltip.left.viewport
+      :href="job.status.details_path"
+      :title="tooltipText"
+      class="gl-display-flex gl-align-items-center"
+      :data-testid="dataTestId"
+    >
+      <gl-icon
+        v-if="isActive"
+        name="arrow-right"
+        class="icon-arrow-right gl-absolute gl-display-block"
+        :size="14"
+      />
+
+      <ci-icon :status="job.status" class="gl-mr-2" :size="14" />
+
+      <span class="gl-text-truncate gl-w-full">{{ jobName }}</span>
+
+      <gl-icon v-if="job.retried" name="retry" />
+    </gl-link>
+  </div>
+</template>