diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_details')
14 files changed, 220 insertions, 68 deletions
diff --git a/app/assets/javascripts/ci/pipeline_details/constants.js b/app/assets/javascripts/ci/pipeline_details/constants.js index 70b758ae6b0..51d0e980e78 100644 --- a/app/assets/javascripts/ci/pipeline_details/constants.js +++ b/app/assets/javascripts/ci/pipeline_details/constants.js @@ -2,7 +2,6 @@ import { __, s__ } from '~/locale'; export const CANCEL_REQUEST = 'CANCEL_REQUEST'; export const SUPPORTED_FILTER_PARAMETERS = ['username', 'ref', 'status', 'source']; -export const SCHEDULE_ORIGIN = 'schedule'; export const NEEDS_PROPERTY = 'needs'; export const EXPLICIT_NEEDS_PROPERTY = 'previousStageJobsOrNeeds'; diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue index f098d790736..3da2f27c1b9 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_component.vue @@ -4,6 +4,7 @@ import { generateColumnsFromLayersListMemoized, keepLatestDownstreamPipelines, } from '~/ci/pipeline_details/utils/parsing_utils'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import LinksLayer from '../../../common/private/job_links_layer.vue'; import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from '../constants'; import { validateConfigPaths } from '../utils'; @@ -19,6 +20,7 @@ export default { LinkedPipelinesColumn, StageColumnComponent, }, + mixins: [glFeatureFlagMixin()], props: { configPaths: { type: Object, @@ -132,6 +134,9 @@ export default { upstreamPipelines() { return this.hasUpstreamPipelines ? this.pipeline.upstream : []; }, + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, }, errorCaptured(err, _vm, info) { reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); @@ -178,10 +183,15 @@ export default { <div class="js-pipeline-graph"> <div ref="mainPipelineContainer" - class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap" + class="pipeline-graph gl-display-flex gl-position-relative gl-white-space-nowrap gl-rounded-lg" :class="{ - 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline, + 'gl-bg-gray-10': !isNewPipelineGraph, + 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isNewPipelineGraph && !isLinkedPipeline, + 'pipeline-graph-container gl-bg-gray-10 gl-pipeline-min-h gl-align-items-flex-start gl-pt-3 gl-pb-8 gl-mt-3 gl-overflow-auto': + isNewPipelineGraph && !isLinkedPipeline, + 'gl-bg-gray-50 gl-sm-ml-5': isNewPipelineGraph && isLinkedPipeline, }" + data-testid="pipeline-container" > <linked-graph-wrapper> <template #upstream> @@ -199,7 +209,7 @@ export default { /> </template> <template #main> - <div :id="containerId" :ref="containerId"> + <div :id="containerId" :ref="containerId" class="pipeline-links-container"> <links-layer :pipeline-data="layout" :pipeline-id="pipeline.id" @@ -238,7 +248,7 @@ export default { <template #downstream> <linked-pipelines-column v-if="showDownstreamPipelines" - class="gl-mr-6" + :class="{ 'gl-sm-ml-3': isNewPipelineGraph }" :config-paths="configPaths" :linked-pipelines="downstreamPipelines" :column-title="__('Downstream')" diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue index fb7dcb300f1..114b224fbe7 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/graph_view_selector.vue @@ -1,11 +1,11 @@ <script> import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon, GlToggle } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { __, s__ } from '~/locale'; import { STAGE_VIEW, LAYER_VIEW } from '../constants'; export default { name: 'GraphViewSelector', - components: { GlAlert, GlButton, @@ -13,7 +13,7 @@ export default { GlLoadingIcon, GlToggle, }, - + mixins: [glFeatureFlagMixin()], props: { showLinks: { type: Boolean, @@ -77,6 +77,9 @@ export default { }; }); }, + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, }, watch: { /* @@ -138,7 +141,13 @@ export default { <template> <div> - <div class="gl-relative gl-display-flex gl-align-items-center gl-w-max-content gl-my-4"> + <div + class="gl-relative gl-display-flex gl-align-items-center gl-my-4" + :class="{ + 'gl-w-max-content': !isNewPipelineGraph, + 'gl-flex-wrap gl-sm-flex-nowrap': isNewPipelineGraph, + }" + > <gl-loading-icon v-if="isSwitcherLoading" data-testid="switcher-loading-state" @@ -161,7 +170,10 @@ export default { <gl-toggle v-model="showLinksActive" data-testid="show-links-toggle" - class="gl-mx-4" + :class="{ + 'gl-mx-4': !isNewPipelineGraph, + 'gl-sm-ml-4 gl-mt-4 gl-sm-mt-0': isNewPipelineGraph, + }" :label="$options.i18n.linksLabelText" :is-loading="isToggleLoading" label-position="left" diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue index bb36ac8b6ab..c6340e6787a 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue @@ -5,7 +5,7 @@ import delayedJobMixin from '~/ci/mixins/delayed_job_mixin'; import { helpPagePath } from '~/helpers/help_page_helper'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { __, s__, sprintf } from '~/locale'; -import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; import ActionComponent from '../../../common/private/job_action_component.vue'; import JobNameComponent from '../../../common/private/job_name_component.vue'; import { BRIDGE_KIND, RETRY_ACTION_TITLE, SINGLE_JOB, SKIP_RETRY_MODAL_KEY } from '../constants'; @@ -58,7 +58,7 @@ export default { hoverClass: 'gl-shadow-x0-y0-b3-s1-blue-500', components: { ActionComponent, - CiBadgeLink, + CiIcon, GlBadge, GlForm, GlFormCheckbox, @@ -329,7 +329,7 @@ export default { @mouseout="hideTooltips" > <div class="gl-display-flex gl-align-items-center gl-flex-grow-1"> - <ci-badge-link :status="job.status" size="md" :show-text="false" :use-link="false" /> + <ci-icon :status="job.status" :use-link="false" /> <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width"> <div class="gl-text-truncate gl-pr-9 gl-line-height-normal">{{ job.name }}</div> <div diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue index fb2280d971a..0d72373a0f5 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_graph_wrapper.vue @@ -1,5 +1,20 @@ +<script> +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + +export default { + mixins: [glFeatureFlagMixin()], + computed: { + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, + }, +}; +</script> <template> - <div class="gl-display-flex"> + <div + class="gl-display-flex" + :class="{ 'gl-flex-wrap gl-sm-flex-nowrap gl-w-full': isNewPipelineGraph }" + > <slot name="upstream"></slot> <slot name="main"></slot> <slot name="downstream"></slot> diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue index 5960eea5b4f..26521f87426 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue @@ -7,13 +7,14 @@ import { GlTooltip, GlTooltipDirective, } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { TYPENAME_CI_PIPELINE } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { __, sprintf } from '~/locale'; import CancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql'; import RetryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql'; -import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; import { reportToSentry } from '~/ci/utils'; import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from '../constants'; @@ -22,13 +23,14 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - CiBadgeLink, + CiIcon, GlBadge, GlButton, GlLink, GlLoadingIcon, GlTooltip, }, + mixins: [glFeatureFlagMixin()], styles: { actionSizeClasses: ['gl-h-7 gl-w-7'], flatLeftBorder: ['gl-rounded-bottom-left-none!', 'gl-rounded-top-left-none!'], @@ -115,9 +117,6 @@ export default { downstreamTitle() { return this.childPipeline ? this.sourceJobName : this.pipeline.project.name; }, - flexDirection() { - return this.isUpstream ? 'gl-flex-direction-row-reverse' : 'gl-flex-direction-row'; - }, graphqlPipelineId() { return convertToGraphQLId(TYPENAME_CI_PIPELINE, this.pipeline.id); }, @@ -176,6 +175,9 @@ export default { return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} - ${this.sourceJobInfo}`; }, + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, }, errorCaptured(err, _vm, info) { reportToSentry('linked_pipeline', `error: ${err}, info: ${info}`); @@ -231,9 +233,15 @@ export default { <template> <div ref="linkedPipeline" - class="gl-h-full gl-display-flex! gl-px-2" - :class="flexDirection" + class="linked-pipeline-container gl-h-full gl-display-flex!" + :class="{ + 'gl-flex-direction-row-reverse': isUpstream, + 'gl-flex-direction-row': !isUpstream, + 'gl-px-2': !isNewPipelineGraph, + 'gl-w-full gl-sm-w-auto': isNewPipelineGraph, + }" data-testid="linked-pipeline-container" + :aria-expanded="expanded" @mouseover="onDownstreamHovered" @mouseleave="onDownstreamHoverLeave" > @@ -242,17 +250,15 @@ export default { </gl-tooltip> <div class="gl-bg-white gl-border gl-p-3 gl-rounded-lg gl-w-full" :class="cardClasses"> <div class="gl-display-flex gl-gap-x-3"> - <ci-badge-link + <ci-icon v-if="!pipelineIsLoading" :status="pipelineStatus" - size="md" - :show-text="false" :use-link="false" class="gl-align-self-start" /> <div v-else class="gl-pr-3"><gl-loading-icon size="sm" inline /></div> <div - class="gl-display-flex gl-downstream-pipeline-job-width gl-flex-direction-column gl-line-height-normal" + class="gl-display-flex gl-flex-direction-column gl-line-height-normal gl-downstream-pipeline-job-width" > <span class="gl-text-truncate" data-testid="downstream-title-content"> {{ downstreamTitle }} diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue index 2de7e43c9b1..395770826d8 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue @@ -1,4 +1,5 @@ <script> +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; import { reportToSentry } from '~/ci/utils'; import { LOAD_FAILURE } from '../../constants'; @@ -18,6 +19,7 @@ export default { LinkedPipeline, PipelineGraph: () => import('./graph_component.vue'), }, + mixins: [glFeatureFlagMixin()], props: { columnTitle: { type: String, @@ -63,23 +65,30 @@ export default { 'gl-pipeline-job-width', 'gl-text-truncate', 'gl-line-height-36', - 'gl-pl-3', - 'gl-mb-5', ], minWidth: `${ONE_COL_WIDTH}px`, computed: { columnClass() { - const positionValues = { + const positionValuesOld = { right: 'gl-ml-6', left: 'gl-mx-6', }; + const positionValues = { + right: 'gl-mx-5', + left: 'gl-mx-4 gl-flex-basis-full', + }; + const usePositionValues = this.isNewPipelineGraph ? positionValues : positionValuesOld; - return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`; + return `graph-position-${this.graphPosition} ${usePositionValues[this.graphPosition]}`; }, computedTitleClasses() { const positionalClasses = this.isUpstream ? ['gl-w-full', 'gl-linked-pipeline-padding'] : []; - return [...this.$options.titleClasses, ...positionalClasses]; + return [ + ...this.$options.titleClasses, + !this.isNewPipelineGraph ?? ['gl-pl-3', 'gl-mb-5'], + ...positionalClasses, + ]; }, graphPosition() { return this.isUpstream ? 'left' : 'right'; @@ -93,6 +102,9 @@ export default { minWidth() { return this.isUpstream ? 0 : this.$options.minWidth; }, + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, }, methods: { getPipelineData(pipeline) { @@ -197,7 +209,7 @@ export default { </script> <template> - <div class="gl-display-flex"> + <div class="gl-display-flex" :class="{ 'gl-w-full gl-sm-w-auto': isNewPipelineGraph }"> <div :class="columnClass" class="linked-pipelines-column"> <div data-testid="linked-column-title" :class="computedTitleClasses"> {{ columnTitle }} @@ -206,8 +218,12 @@ export default { <li v-for="pipeline in linkedPipelines" :key="pipeline.id" - class="gl-display-flex gl-mb-3" - :class="{ 'gl-flex-direction-row-reverse': isUpstream }" + class="gl-display-flex" + :class="{ + 'gl-mb-3': !isNewPipelineGraph, + 'gl-flex-wrap gl-sm-flex-nowrap gl-mb-6': isNewPipelineGraph, + 'gl-flex-direction-row-reverse': !isNewPipelineGraph && isUpstream, + }" > <linked-pipeline class="gl-display-inline-block" @@ -224,12 +240,15 @@ export default { <div v-if="showContainer(pipeline.id)" :style="{ minWidth }" - class="gl-display-inline-block" + class="gl-display-inline-block pipeline-show-container" > <pipeline-graph v-if="isExpanded(pipeline.id)" :type="type" - class="gl-inline-block gl-mt-n2" + class="gl-inline-block" + :class="{ + 'gl-mt-n2': !isNewPipelineGraph, + }" :config-paths="configPaths" :pipeline="currentPipeline" :computed-pipeline-info="getPipelineLayers(pipeline.id)" diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue index bcd7705669e..7c07591d0de 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/root_graph_layout.vue @@ -1,5 +1,12 @@ <script> +import { GlCard } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + export default { + components: { + GlCard, + }, + mixins: [glFeatureFlagMixin()], props: { stageClasses: { type: String, @@ -12,18 +19,37 @@ export default { default: '', }, }, + computed: { + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, + }, }; </script> <template> <div> - <div class="gl-display-flex gl-align-items-center gl-w-full gl-mb-5" :class="stageClasses"> - <slot name="stages"> </slot> - </div> - <div - class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full" - :class="jobClasses" + <gl-card + v-if="isNewPipelineGraph" + class="gl-rounded-lg" + header-class="gl-rounded-lg gl-px-0 gl-py-0 gl-bg-white gl-border-b-0" + body-class="gl-pt-2 gl-pb-0 gl-px-2" > - <slot name="jobs"> </slot> - </div> + <template #header> + <slot name="stages"></slot> + </template> + + <slot name="jobs"></slot> + </gl-card> + <template v-else> + <div class="gl-display-flex gl-align-items-center gl-w-full" :class="stageClasses"> + <slot name="stages"> </slot> + </div> + <div + class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full" + :class="jobClasses" + > + <slot name="jobs"> </slot> + </div> + </template> </div> </template> diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue index 6030adc96ad..01a9c6d030d 100644 --- a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue +++ b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue @@ -68,7 +68,7 @@ export default { required: true, }, }, - jobClasses: [ + legacyJobClasses: [ 'gl-p-3', 'gl-border-gray-100', 'gl-border-solid', @@ -82,18 +82,43 @@ export default { 'gl-hover-border-gray-200', 'gl-focus-border-gray-200', ], - titleClasses: [ + jobClasses: [ + 'gl-p-3', + 'gl-border-0', + 'gl-bg-transparent', + 'gl-rounded-base', + 'gl-hover-bg-gray-50', + 'gl-focus-bg-gray-50', + 'gl-hover-text-gray-900', + 'gl-focus-text-gray-900', + ], + legacyTitleClasses: [ 'gl-font-weight-bold', 'gl-pipeline-job-width', 'gl-text-truncate', 'gl-line-height-36', 'gl-pl-3', ], + titleClasses: [ + 'gl-font-weight-bold', + 'gl-pipeline-job-width', + 'gl-text-truncate', + 'gl-line-height-36', + 'gl-pl-4', + 'gl-mb-n2', + ], computed: { canUpdatePipeline() { return this.userPermissions.updatePipeline; }, columnSpacingClass() { + if (this.isNewPipelineGraph) { + const baseClasses = 'stage-column gl-relative gl-flex-basis-full'; + return this.isStageView + ? `${baseClasses} is-stage-view gl-m-5` + : `${baseClasses} gl-my-5 gl-mx-7`; + } + return this.isStageView ? 'gl-px-6' : 'gl-px-9'; }, hasAction() { @@ -102,6 +127,17 @@ export default { showStageName() { return !this.isStageView; }, + isNewPipelineGraph() { + return this.glFeatures.newPipelineGraph; + }, + jobClasses() { + return this.isNewPipelineGraph ? this.$options.jobClasses : this.$options.legacyJobClasses; + }, + titleClasses() { + return this.isNewPipelineGraph + ? this.$options.titleClasses + : this.$options.legacyTitleClasses; + }, }, errorCaptured(err, _vm, info) { reportToSentry('stage_column_component', `error: ${err}, info: ${info}`); @@ -135,12 +171,16 @@ export default { }; </script> <template> - <root-graph-layout :class="columnSpacingClass" data-testid="stage-column"> + <root-graph-layout + :class="columnSpacingClass" + class="stage-column gl-relative gl-flex-basis-full" + data-testid="stage-column" + > <template #stages> <div data-testid="stage-column-title" - class="gl-display-flex gl-justify-content-space-between gl-relative" - :class="$options.titleClasses" + class="stage-column-title gl-display-flex gl-justify-content-space-between gl-relative" + :class="titleClasses" > <span :title="name" class="gl-text-truncate gl-pr-3 gl-w-85p"> {{ name }} @@ -161,7 +201,11 @@ export default { :id="groupId(group)" :key="getGroupId(group)" data-testid="stage-column-group" - class="gl-relative gl-mb-3 gl-white-space-normal gl-pipeline-job-width" + class="gl-relative gl-white-space-normal gl-pipeline-job-width" + :class="{ + 'gl-mb-3': !isNewPipelineGraph, + 'gl-mb-2': isNewPipelineGraph, + }" @mouseenter="$emit('jobHover', group.name)" @mouseleave="$emit('jobHover', '')" > @@ -174,7 +218,7 @@ export default { :pipeline-expanded="pipelineExpanded" :pipeline-id="pipelineId" :stage-name="showStageName ? group.stageName : ''" - :css-class-job-name="$options.jobClasses" + :css-class-job-name="jobClasses" :class="[ { 'gl-opacity-3': isFadedOut(group.name) }, 'gl-transition-duration-slow gl-transition-timing-function-ease', @@ -188,7 +232,7 @@ export default { :group="group" :stage-name="showStageName ? group.stageName : ''" :pipeline-id="pipelineId" - :css-class-job-name="$options.jobClasses" + :css-class-job-name="jobClasses" /> </div> </div> diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue index 51a68f6619a..651662d6395 100644 --- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue +++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue @@ -17,7 +17,7 @@ import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; // eslint- import { __, s__, sprintf, formatNumber } from '~/locale'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import SafeHtml from '~/vue_shared/directives/safe_html'; import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants'; @@ -38,7 +38,7 @@ export default { pipelineRetry: 'pipelineRetry', finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'], components: { - CiBadgeLink, + CiIcon, ClipboardButton, GlAlert, GlBadge, @@ -58,13 +58,17 @@ export default { i18n: { scheduleBadgeText: s__('Pipelines|Scheduled'), scheduleBadgeTooltip: __('This pipeline was created by a schedule'), + triggerBadgeText: __('trigger token'), + triggerBadgeTooltip: __( + 'This pipeline was created by an API call authenticated with a trigger token', + ), childBadgeText: s__('Pipelines|Child pipeline (%{linkStart}parent%{linkEnd})'), childBadgeTooltip: __('This is a child pipeline within the parent pipeline'), latestBadgeText: s__('Pipelines|latest'), latestBadgeTooltip: __('Latest pipeline for the most recent commit on this branch'), mergeTrainBadgeText: s__('Pipelines|merge train'), mergeTrainBadgeTooltip: s__( - 'Pipelines|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.', + 'Pipelines|This pipeline ran on the contents of the merge request combined with the contents of all other merge requests queued for merging into the target branch.', ), invalidBadgeText: s__('Pipelines|yaml invalid'), failedBadgeText: s__('Pipelines|error'), @@ -74,7 +78,11 @@ export default { ), detachedBadgeText: s__('Pipelines|merge request'), detachedBadgeTooltip: s__( - "Pipelines|This pipeline ran on the contents of this merge request's source branch, not the target branch.", + "Pipelines|This pipeline ran on the contents of the merge request's source branch, not the target branch.", + ), + mergedResultsBadgeText: s__('Pipelines|merged results'), + mergedResultsBadgeTooltip: s__( + 'Pipelines|This pipeline ran on the contents of the merge request combined with the contents of the target branch.', ), stuckBadgeText: s__('Pipelines|stuck'), stuckBadgeTooltip: s__('Pipelines|This pipeline is stuck'), @@ -403,7 +411,7 @@ export default { {{ commitTitle }} </h3> <div> - <ci-badge-link :status="detailedStatus" class="gl-display-inline-block gl-mb-3" /> + <ci-icon :status="detailedStatus" show-status-text :show-link="false" class="gl-mb-3" /> <div class="gl-ml-2 gl-mb-3 gl-display-inline-block gl-h-6"> <gl-link v-if="user" @@ -458,6 +466,15 @@ export default { {{ $options.i18n.scheduleBadgeText }} </gl-badge> <gl-badge + v-if="badges.trigger" + v-gl-tooltip + :title="$options.i18n.triggerBadgeTooltip" + variant="info" + size="sm" + > + {{ $options.i18n.triggerBadgeText }} + </gl-badge> + <gl-badge v-if="badges.child" v-gl-tooltip :title="$options.i18n.childBadgeTooltip" @@ -527,6 +544,15 @@ export default { {{ $options.i18n.detachedBadgeText }} </gl-badge> <gl-badge + v-if="badges.mergedResultsPipeline" + v-gl-tooltip + :title="$options.i18n.mergedResultsBadgeTooltip" + variant="info" + size="sm" + > + {{ $options.i18n.mergedResultsBadgeText }} + </gl-badge> + <gl-badge v-if="badges.stuck" v-gl-tooltip :title="$options.i18n.stuckBadgeTooltip" diff --git a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue index 4752fbb3e96..287f6e045c6 100644 --- a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue +++ b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue @@ -5,7 +5,7 @@ import { __, s__ } from '~/locale'; import { createAlert } from '~/alert'; import Tracking from '~/tracking'; import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated -import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; import { TRACKING_CATEGORIES } from '~/ci/constants'; import RetryFailedJobMutation from '../graphql/mutations/retry_failed_job.mutation.graphql'; import { DEFAULT_FIELDS } from '../../constants'; @@ -14,7 +14,7 @@ export default { fields: DEFAULT_FIELDS, retry: __('Retry'), components: { - CiBadgeLink, + CiIcon, GlButton, GlLink, GlTableLite, @@ -80,7 +80,7 @@ export default { <div class="gl-display-flex gl-align-items-center gl-lg-justify-content-start gl-justify-content-end" > - <ci-badge-link :status="item.detailedStatus" :show-text="false" class="gl-mr-3" /> + <ci-icon :status="item.detailedStatus" class="gl-mr-3" /> <div class="gl-text-truncate"> <gl-link :href="item.detailedStatus.detailsPath" diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js b/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js index 067ec3f305e..4966b657887 100644 --- a/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js +++ b/app/assets/javascripts/ci/pipeline_details/pipeline_details_header.js @@ -23,9 +23,11 @@ export const createPipelineDetailsHeaderApp = (elSelector, apolloProvider, graph failureReason, triggeredByPath, schedule, + trigger, child, latest, mergeTrainPipeline, + mergedResultsPipeline, invalid, failed, autoDevops, @@ -59,9 +61,11 @@ export const createPipelineDetailsHeaderApp = (elSelector, apolloProvider, graph refText, badges: { schedule: parseBoolean(schedule), + trigger: parseBoolean(trigger), child: parseBoolean(child), latest: parseBoolean(latest), mergeTrainPipeline: parseBoolean(mergeTrainPipeline), + mergedResultsPipeline: parseBoolean(mergedResultsPipeline), invalid: parseBoolean(invalid), failed: parseBoolean(failed), autoDevops: parseBoolean(autoDevops), diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_shared_client.js b/app/assets/javascripts/ci/pipeline_details/pipeline_shared_client.js index c3be487caae..63a46d81dd5 100644 --- a/app/assets/javascripts/ci/pipeline_details/pipeline_shared_client.js +++ b/app/assets/javascripts/ci/pipeline_details/pipeline_shared_client.js @@ -2,10 +2,5 @@ import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; export const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient( - {}, - { - useGet: true, - }, - ), + defaultClient: createDefaultClient(), }); diff --git a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js index 8a7c3367fc1..ea2875713a9 100644 --- a/app/assets/javascripts/ci/pipeline_details/pipelines_index.js +++ b/app/assets/javascripts/ci/pipeline_details/pipelines_index.js @@ -42,8 +42,6 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => { projectId, defaultBranchName, params, - iosRunnersAvailable, - registrationToken, fullPath, visibilityPipelineIdType, } = el.dataset; @@ -55,7 +53,6 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => { artifactsEndpoint, artifactsEndpointPlaceholder, fullPath, - iosRunnersAvailable: parseBoolean(iosRunnersAvailable), manualActionsLimit: 50, pipelineEditorPath, pipelineSchedulesPath, @@ -84,7 +81,6 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => { newPipelinePath, params: JSON.parse(params), projectId, - registrationToken, resetCachePath, store: this.store, }, |