2018-11-20 20:47:30 +05:30
|
|
|
<script>
|
|
|
|
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: {
|
|
|
|
jobs: {
|
|
|
|
type: Array,
|
|
|
|
required: true,
|
|
|
|
},
|
2018-12-05 23:21:45 +05:30
|
|
|
jobId: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
isJobActive(currentJobId) {
|
|
|
|
return this.jobId === currentJobId;
|
|
|
|
},
|
|
|
|
tooltipText(job) {
|
|
|
|
return `${job.name} - ${job.status.tooltip}`;
|
|
|
|
},
|
2018-11-20 20:47:30 +05:30
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
2018-12-05 23:21:45 +05:30
|
|
|
<div class="js-jobs-container builds-container">
|
2018-11-20 20:47:30 +05:30
|
|
|
<div
|
2018-12-05 23:21:45 +05:30
|
|
|
v-for="job in jobs"
|
|
|
|
:key="job.id"
|
2018-11-20 20:47:30 +05:30
|
|
|
class="build-job"
|
2018-12-05 23:21:45 +05:30
|
|
|
:class="{ retried: job.retried, active: isJobActive(job.id) }"
|
2018-11-20 20:47:30 +05:30
|
|
|
>
|
|
|
|
<a
|
|
|
|
v-tooltip
|
2018-12-05 23:21:45 +05:30
|
|
|
:href="job.status.details_path"
|
|
|
|
:title="tooltipText(job)"
|
|
|
|
data-container="body"
|
2018-11-20 20:47:30 +05:30
|
|
|
>
|
|
|
|
<icon
|
2018-12-05 23:21:45 +05:30
|
|
|
v-if="isJobActive(job.id)"
|
2018-11-20 20:47:30 +05:30
|
|
|
name="arrow-right"
|
2018-12-05 23:21:45 +05:30
|
|
|
class="js-arrow-right icon-arrow-right"
|
2018-11-20 20:47:30 +05:30
|
|
|
/>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</template>
|