diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/header.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/header.vue | 83 |
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> |