diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/stuck_block.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/stuck_block.vue | 68 |
1 files changed, 43 insertions, 25 deletions
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index b69e6f9686f..8e8202246a2 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -1,10 +1,13 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlAlert, GlBadge, GlLink } from '@gitlab/ui'; +import { s__ } from '../../locale'; /** * Renders Stuck Runners block for job's view. */ export default { components: { + GlAlert, + GlBadge, GlLink, }, props: { @@ -22,35 +25,50 @@ export default { required: true, }, }, + computed: { + hasNoRunnersWithCorrespondingTags() { + return this.tags.length > 0; + }, + stuckData() { + if (this.hasNoRunnersWithCorrespondingTags) { + return { + text: s__(`Job|This job is stuck because you don't have + any active runners online or available with any of these tags assigned to them:`), + dataTestId: 'job-stuck-with-tags', + showTags: true, + }; + } else if (this.hasNoRunnersForProject) { + return { + text: s__(`Job|This job is stuck because the project + doesn't have any runners online assigned to it.`), + dataTestId: 'job-stuck-no-runners', + showTags: false, + }; + } + + return { + text: s__(`Job|This job is stuck because you don't + have any active runners that can run this job.`), + dataTestId: 'job-stuck-no-active-runners', + showTags: false, + }; + }, + }, }; </script> <template> - <div class="bs-callout bs-callout-warning"> - <p v-if="tags.length" class="js-stuck-with-tags gl-mb-0"> - {{ - s__(`This job is stuck because you don't have - any active runners online or available with any of these tags assigned to them:`) - }} - <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2"> - {{ tag }} - </span> + <gl-alert variant="warning" :dismissible="false"> + <p class="gl-mb-0" :data-testid="stuckData.dataTestId"> + {{ stuckData.text }} + <template v-if="stuckData.showTags"> + <gl-badge v-for="tag in tags" :key="tag" variant="info"> + {{ tag }} + </gl-badge> + </template> </p> - <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners gl-mb-0"> - {{ - s__(`Job|This job is stuck because the project - doesn't have any runners online assigned to it.`) - }} - </p> - <p v-else class="js-stuck-no-active-runner gl-mb-0"> - {{ - s__(`This job is stuck because you don't - have any active runners that can run this job.`) - }} - </p> - {{ __('Go to project') }} - <gl-link v-if="runnersPath" :href="runnersPath" class="js-runners-path"> + <gl-link v-if="runnersPath" :href="runnersPath"> {{ __('CI settings') }} </gl-link> - </div> + </gl-alert> </template> |