diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2018-10-22 17:43:43 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-10-22 17:43:43 +0000 |
commit | 60405bd373b74ca0d5ec557c35dbce95be2be639 (patch) | |
tree | 0e3686b9d76ba1d2cbe32a35f6d6b3bff0d66761 /app/assets/javascripts/jobs/components/job_container_item.vue | |
parent | 0518e63bd9d3ccf69bd79c3427a980a73e9ffe2e (diff) | |
download | gitlab-ce-60405bd373b74ca0d5ec557c35dbce95be2be639.tar.gz |
Extract JobContainerItem component
Diffstat (limited to 'app/assets/javascripts/jobs/components/job_container_item.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/job_container_item.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue new file mode 100644 index 00000000000..81cc0823792 --- /dev/null +++ b/app/assets/javascripts/jobs/components/job_container_item.vue @@ -0,0 +1,66 @@ +<script> +import _ from 'underscore'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import Icon from '~/vue_shared/components/icon.vue'; +import tooltip from '~/vue_shared/directives/tooltip'; + +export default { + components: { + CiIcon, + Icon, + }, + + directives: { + tooltip, + }, + + props: { + job: { + type: Object, + required: true, + }, + isActive: { + type: Boolean, + required: true, + }, + }, + + computed: { + tooltipText() { + return `${_.escape(this.job.name)} - ${this.job.status.tooltip}`; + }, + }, +}; +</script> + +<template> + <div + class="build-job" + :class="{ retried: job.retried, active: isActive }" + > + <a + v-tooltip + :href="job.status.details_path" + :title="tooltipText" + data-container="body" + data-boundary="viewport" + class="js-job-link" + > + <icon + v-if="isActive" + name="arrow-right" + class="js-arrow-right icon-arrow-right" + /> + + <ci-icon :status="job.status" /> + + <span>{{ job.name ? job.name : job.id }}</span> + + <icon + v-if="job.retried" + name="retry" + class="js-retry-icon" + /> + </a> + </div> +</template> |