diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue new file mode 100644 index 00000000000..2905b2ca26f --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -0,0 +1,146 @@ +<script> +import { GlLink, GlTooltipDirective } from '@gitlab/ui'; +import { escape } from 'lodash'; +import { SCHEDULE_ORIGIN } from '../../constants'; +import { __, sprintf } from '~/locale'; +import popover from '~/vue_shared/directives/popover'; + +const popoverTitle = sprintf( + escape( + __( + `This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}`, + ), + ), + { strongStart: '<b>', strongEnd: '</b>' }, + false, +); + +export default { + components: { + GlLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + popover, + }, + props: { + pipeline: { + type: Object, + required: true, + }, + pipelineScheduleUrl: { + type: String, + required: true, + }, + autoDevopsHelpPath: { + type: String, + required: true, + }, + }, + computed: { + user() { + return this.pipeline.user; + }, + isScheduled() { + return this.pipeline.source === SCHEDULE_ORIGIN; + }, + popoverOptions() { + return { + html: true, + trigger: 'focus', + placement: 'top', + title: `<div class="autodevops-title"> + ${popoverTitle} + </div>`, + content: `<a + class="autodevops-link" + href="${this.autoDevopsHelpPath}" + target="_blank" + rel="noopener noreferrer nofollow"> + ${escape(__('Learn more about Auto DevOps'))} + </a>`, + }; + }, + }, +}; +</script> +<template> + <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags"> + <gl-link + :href="pipeline.path" + class="js-pipeline-url-link js-onboarding-pipeline-item" + data-testid="pipeline-url-link" + data-qa-selector="pipeline_url_link" + > + <span class="pipeline-id">#{{ pipeline.id }}</span> + </gl-link> + <div class="label-container"> + <gl-link v-if="isScheduled" :href="pipelineScheduleUrl" target="__blank"> + <span + v-gl-tooltip + :title="__('This pipeline was triggered by a schedule.')" + class="badge badge-info" + data-testid="pipeline-url-scheduled" + > + {{ __('Scheduled') }} + </span> + </gl-link> + <span + v-if="pipeline.flags.latest" + v-gl-tooltip + :title="__('Latest pipeline for the most recent commit on this branch')" + class="js-pipeline-url-latest badge badge-success" + data-testid="pipeline-url-latest" + > + {{ __('latest') }} + </span> + <span + v-if="pipeline.flags.yaml_errors" + v-gl-tooltip + :title="pipeline.yaml_errors" + class="js-pipeline-url-yaml badge badge-danger" + data-testid="pipeline-url-yaml" + > + {{ __('yaml invalid') }} + </span> + <span + v-if="pipeline.flags.failure_reason" + v-gl-tooltip + :title="pipeline.failure_reason" + class="js-pipeline-url-failure badge badge-danger" + data-testid="pipeline-url-failure" + > + {{ __('error') }} + </span> + <gl-link + v-if="pipeline.flags.auto_devops" + v-popover="popoverOptions" + tabindex="0" + class="js-pipeline-url-autodevops badge badge-info autodevops-badge" + data-testid="pipeline-url-autodevops" + role="button" + >{{ __('Auto DevOps') }}</gl-link + > + <span + v-if="pipeline.flags.stuck" + class="js-pipeline-url-stuck badge badge-warning" + data-testid="pipeline-url-stuck" + > + {{ __('stuck') }} + </span> + <span + v-if="pipeline.flags.detached_merge_request_pipeline" + v-gl-tooltip + :title=" + __( + 'Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.', + ) + " + class="js-pipeline-url-detached badge badge-info" + data-testid="pipeline-url-detached" + > + {{ __('detached') }} + </span> + </div> + </div> +</template> |