diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 21:16:39 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-08 21:16:39 +0300 |
commit | 2fc7db3159afc0d67a60dbe76e27df93078f33ca (patch) | |
tree | 28e1baf020a7ff176ab799e7603f3102a0d1a9ec /app/assets/javascripts/pipelines | |
parent | cce7638874731ceee921881393c319feda6dc418 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
3 files changed, 217 insertions, 199 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue new file mode 100644 index 00000000000..40b2454b8c1 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_labels.vue @@ -0,0 +1,170 @@ +<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> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index 54bd42cbf22..1dcbd77a92d 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -1,27 +1,20 @@ <script> -import { GlIcon, GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui'; +import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; -import { helpPagePath } from '~/helpers/help_page_helper'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; -import { SCHEDULE_ORIGIN, ICONS } from '../../constants'; +import { ICONS } from '../../constants'; +import PipelineLabels from './pipeline_labels.vue'; export default { components: { GlIcon, GlLink, - GlPopover, - GlSprintf, - GlBadge, + PipelineLabels, TooltipOnTruncate, }, directives: { GlTooltip: GlTooltipDirective, }, - inject: { - targetProjectFullPath: { - default: '', - }, - }, props: { pipeline: { type: Object, @@ -35,27 +28,8 @@ export default { type: String, required: true, }, - viewType: { - 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'); - }, mergeRequestRef() { return this.pipeline?.merge_request; }, @@ -192,130 +166,11 @@ export default { :title="__('Commit')" data-testid="commit-icon" /> - <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{ commitShortSha }}</gl-link> <!--End of commit row--> </div> - <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> + <pipeline-labels :pipeline-schedule-url="pipelineScheduleUrl" :pipeline="pipeline" /> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue index 14b4813b10f..6f0e67e1ae0 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue @@ -26,6 +26,47 @@ export default { PipelineTriggerer, PipelineUrl, }, + tableFields: [ + { + key: 'status', + label: s__('Pipeline|Status'), + thClass: DEFAULT_TH_CLASSES, + columnClass: 'gl-w-15p', + tdClass: DEFAULT_TD_CLASS, + thAttr: { 'data-testid': 'status-th' }, + }, + { + key: 'pipeline', + label: __('Pipeline'), + thClass: DEFAULT_TH_CLASSES, + tdClass: `${DEFAULT_TD_CLASS}`, + columnClass: 'gl-w-30p', + thAttr: { 'data-testid': 'pipeline-th' }, + }, + { + key: 'triggerer', + label: s__('Pipeline|Triggerer'), + thClass: DEFAULT_TH_CLASSES, + tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`, + columnClass: 'gl-w-10p', + thAttr: { 'data-testid': 'triggerer-th' }, + }, + { + key: 'stages', + label: s__('Pipeline|Stages'), + thClass: DEFAULT_TH_CLASSES, + tdClass: DEFAULT_TD_CLASS, + columnClass: 'gl-w-quarter', + thAttr: { 'data-testid': 'stages-th' }, + }, + { + key: 'actions', + thClass: DEFAULT_TH_CLASSES, + tdClass: DEFAULT_TD_CLASS, + columnClass: 'gl-w-15p', + thAttr: { 'data-testid': 'actions-th' }, + }, + ], directives: { GlTooltip: GlTooltipDirective, }, @@ -61,53 +102,6 @@ export default { cancelingPipeline: null, }; }, - computed: { - tableFields() { - const fields = [ - { - key: 'status', - label: s__('Pipeline|Status'), - thClass: DEFAULT_TH_CLASSES, - columnClass: 'gl-w-15p', - tdClass: DEFAULT_TD_CLASS, - thAttr: { 'data-testid': 'status-th' }, - }, - { - key: 'pipeline', - label: __('Pipeline'), - thClass: DEFAULT_TH_CLASSES, - tdClass: `${DEFAULT_TD_CLASS}`, - columnClass: 'gl-w-30p', - thAttr: { 'data-testid': 'pipeline-th' }, - }, - { - key: 'triggerer', - label: s__('Pipeline|Triggerer'), - thClass: DEFAULT_TH_CLASSES, - tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`, - columnClass: 'gl-w-10p', - thAttr: { 'data-testid': 'triggerer-th' }, - }, - { - key: 'stages', - label: s__('Pipeline|Stages'), - thClass: DEFAULT_TH_CLASSES, - tdClass: DEFAULT_TD_CLASS, - columnClass: 'gl-w-quarter', - thAttr: { 'data-testid': 'stages-th' }, - }, - { - key: 'actions', - thClass: DEFAULT_TH_CLASSES, - tdClass: DEFAULT_TD_CLASS, - columnClass: 'gl-w-15p', - thAttr: { 'data-testid': 'actions-th' }, - }, - ]; - - return fields; - }, - }, watch: { pipelines() { this.cancelingPipeline = null; @@ -138,7 +132,7 @@ export default { <template> <div class="ci-table"> <gl-table-lite - :fields="tableFields" + :fields="$options.tableFields" :items="pipelines" tbody-tr-class="commit" :tbody-tr-attr="{ 'data-testid': 'pipeline-table-row' }" @@ -163,7 +157,6 @@ export default { :pipeline="item" :pipeline-schedule-url="pipelineScheduleUrl" :pipeline-key="pipelineKeyOption.key" - :view-type="viewType" /> </template> |