gitlab-org--gitlab-foss/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue

171 lines
4.4 KiB
Vue

<script>
import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
import { helpPagePath } from '~/helpers/help_page_helper';
import { SCHEDULE_ORIGIN } from '../../constants';
export default {
components: {
GlBadge,
GlLink,
GlPopover,
GlSprintf,
},
directives: {
GlTooltip: GlTooltipDirective,
},
inject: {
targetProjectFullPath: {
default: '',
},
},
props: {
pipeline: {
type: Object,
required: true,
},
pipelineScheduleUrl: {
type: String,
required: true,
},
},
computed: {
isScheduled() {
return this.pipeline.source === SCHEDULE_ORIGIN;
},
isInFork() {
return Boolean(
this.targetProjectFullPath &&
this.pipeline?.project?.full_path !== `/${this.targetProjectFullPath}`,
);
},
autoDevopsTagId() {
return `pipeline-url-autodevops-${this.pipeline.id}`;
},
autoDevopsHelpPath() {
return helpPagePath('topics/autodevops/index.md');
},
},
};
</script>
<template>
<div class="label-container gl-mt-1">
<gl-badge
v-if="isScheduled"
v-gl-tooltip
:href="pipelineScheduleUrl"
target="__blank"
:title="__('This pipeline was triggered by a schedule.')"
variant="info"
size="sm"
data-testid="pipeline-url-scheduled"
>{{ __('Scheduled') }}</gl-badge
>
<gl-badge
v-if="pipeline.flags.latest"
v-gl-tooltip
:title="__('Latest pipeline for the most recent commit on this branch')"
variant="success"
size="sm"
data-testid="pipeline-url-latest"
>{{ __('latest') }}</gl-badge
>
<gl-badge
v-if="pipeline.flags.merge_train_pipeline"
v-gl-tooltip
:title="
s__(
'Pipeline|This pipeline ran on the contents of this merge request combined with the contents of all other merge requests queued for merging into the target branch.',
)
"
variant="info"
size="sm"
data-testid="pipeline-url-train"
>{{ s__('Pipeline|merge train') }}</gl-badge
>
<gl-badge
v-if="pipeline.flags.yaml_errors"
v-gl-tooltip
:title="pipeline.yaml_errors"
variant="danger"
size="sm"
data-testid="pipeline-url-yaml"
>{{ __('yaml invalid') }}</gl-badge
>
<gl-badge
v-if="pipeline.flags.failure_reason"
v-gl-tooltip
:title="pipeline.failure_reason"
variant="danger"
size="sm"
data-testid="pipeline-url-failure"
>{{ __('error') }}</gl-badge
>
<template v-if="pipeline.flags.auto_devops">
<gl-link
:id="autoDevopsTagId"
tabindex="0"
data-testid="pipeline-url-autodevops"
role="button"
>
<gl-badge variant="info" size="sm">
{{ __('Auto DevOps') }}
</gl-badge>
</gl-link>
<gl-popover :target="autoDevopsTagId" triggers="focus" placement="top">
<template #title>
<div class="gl-font-weight-normal gl-line-height-normal">
<gl-sprintf
:message="
__(
'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
)
"
>
<template #strong="{ content }">
<b>{{ content }}</b>
</template>
</gl-sprintf>
</div>
</template>
<gl-link
:href="autoDevopsHelpPath"
data-testid="pipeline-url-autodevops-link"
target="_blank"
>
{{ __('Learn more about Auto DevOps') }}
</gl-link>
</gl-popover>
</template>
<gl-badge
v-if="pipeline.flags.stuck"
variant="warning"
size="sm"
data-testid="pipeline-url-stuck"
>{{ __('stuck') }}</gl-badge
>
<gl-badge
v-if="pipeline.flags.detached_merge_request_pipeline"
v-gl-tooltip
:title="
s__(
`Pipeline|This pipeline ran on the contents of this merge request's source branch, not the target branch.`,
)
"
variant="info"
size="sm"
data-testid="pipeline-url-detached"
>{{ s__('Pipeline|merge request') }}</gl-badge
>
<gl-badge
v-if="isInFork"
v-gl-tooltip
:title="__('Pipeline ran in fork of project')"
variant="info"
size="sm"
data-testid="pipeline-url-fork"
>{{ __('fork') }}</gl-badge
>
</div>
</template>