1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
new file mode 100644
index 00000000000..5b9cf577189
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -0,0 +1,83 @@
+<script>
+  import ciHeader from '../../vue_shared/components/header_ci_component.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    name: 'jobHeaderSection',
+    props: {
+      job: {
+        type: Object,
+        required: true,
+      },
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    components: {
+      ciHeader,
+      loadingIcon,
+    },
+    data() {
+      return {
+        actions: this.getActions(),
+      };
+    },
+    computed: {
+      status() {
+        return this.job && this.job.status;
+      },
+      shouldRenderContent() {
+        return !this.isLoading && Object.keys(this.job).length;
+      },
+    },
+    methods: {
+      getActions() {
+        const actions = [];
+
+        if (this.job.new_issue_path) {
+          actions.push({
+            label: 'New issue',
+            path: this.job.new_issue_path,
+            cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block',
+            type: 'ujs-link',
+          });
+        }
+
+        if (this.job.retry_path) {
+          actions.push({
+            label: 'Retry',
+            path: this.job.retry_path,
+            cssClass: 'js-retry-button btn btn-inverted-secondary visible-md-block visible-lg-block',
+            type: 'ujs-link',
+          });
+        }
+
+        return actions;
+      },
+    },
+    watch: {
+      job() {
+        this.actions = this.getActions();
+      },
+    },
+  };
+</script>
+<template>
+  <div class="js-build-header build-header top-area">
+    <ci-header
+      v-if="shouldRenderContent"
+      :status="status"
+      item-name="Job"
+      :item-id="job.id"
+      :time="job.created_at"
+      :user="job.user"
+      :actions="actions"
+      :hasSidebarButton="true"
+      />
+    <loading-icon
+      v-if="isLoading"
+      size="2"
+      />
+  </div>
+</template>