diff options
Diffstat (limited to 'app/assets/javascripts/jobs')
4 files changed, 77 insertions, 50 deletions
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue index fa35b87ef2b..ba14aaeed2c 100644 --- a/app/assets/javascripts/jobs/components/job_app.vue +++ b/app/assets/javascripts/jobs/components/job_app.vue @@ -165,7 +165,7 @@ <gl-loading-icon v-if="isLoading" :size="2" - class="js-job-loading prepend-top-20" + class="js-job-loading qa-loading-animation prepend-top-20" /> <template v-else-if="shouldRenderContent"> @@ -217,8 +217,8 @@ /> <!--job log --> - <div - v-if="hasTrace" + <div + v-if="hasTrace" class="build-trace-container prepend-top-default"> <log-top-bar :class="{ 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> diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue index accda5d1bd8..ffa6ada3e28 100644 --- a/app/assets/javascripts/jobs/components/job_log.vue +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -42,7 +42,7 @@ }; </script> <template> - <pre class="js-build-trace build-trace"> + <pre class="js-build-trace build-trace qa-build-trace"> <code class="bash" v-html="trace" diff --git a/app/assets/javascripts/jobs/components/jobs_container.vue b/app/assets/javascripts/jobs/components/jobs_container.vue index 03f36ec5c8b..951bcb36600 100644 --- a/app/assets/javascripts/jobs/components/jobs_container.vue +++ b/app/assets/javascripts/jobs/components/jobs_container.vue @@ -1,17 +1,11 @@ <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'; +import JobContainerItem from './job_container_item.vue'; export default { components: { - CiIcon, - Icon, - }, - directives: { - tooltip, + JobContainerItem, }, + props: { jobs: { type: Array, @@ -26,49 +20,16 @@ export default { isJobActive(currentJobId) { return this.jobId === currentJobId; }, - tooltipText(job) { - return `${_.escape(job.name)} - ${job.status.tooltip}`; - }, }, }; </script> <template> <div class="js-jobs-container builds-container"> - <div + <job-container-item v-for="job in jobs" :key="job.id" - class="build-job" - :class="{ retried: job.retried, active: isJobActive(job.id) }" - > - <a - v-tooltip - :href="job.status.details_path" - :title="tooltipText(job)" - data-container="body" - > - <icon - v-if="isJobActive(job.id)" - name="arrow-right" - class="js-arrow-right icon-arrow-right" - /> - - <ci-icon :status="job.status" /> - - <span> - <template v-if="job.name"> - {{ job.name }} - </template> - <template v-else> - {{ job.id }} - </template> - </span> - - <icon - v-if="job.retried" - name="retry" - class="js-retry-icon" - /> - </a> - </div> + :job="job" + :is-active="isJobActive(job.id)" + /> </div> </template> |