diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components')
14 files changed, 158 insertions, 134 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue index 9329a35ba99..fb45738f8d1 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue @@ -1,12 +1,12 @@ <script> import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; +import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql'; import { __ } from '~/locale'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants'; import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql'; -import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql'; import { reportToSentry, reportMessageToSentry } from '../../utils'; import { listByLayers } from '../parsing_utils'; import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW, VIEW_TYPE_KEY } from './constants'; diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue index 1435276edd3..3c78b655dc7 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue @@ -1,6 +1,6 @@ <script> import { GlAlert, GlLoadingIcon, GlSegmentedControl, GlToggle } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import { STAGE_VIEW, LAYER_VIEW } from './constants'; export default { @@ -36,20 +36,20 @@ export default { }, i18n: { hoverTipText: __('Tip: Hover over a job to see the jobs it depends on to run.'), - linksLabelText: __('Show dependencies'), + linksLabelText: s__('GraphViewType|Show dependencies'), viewLabelText: __('Group jobs by'), }, views: { [STAGE_VIEW]: { type: STAGE_VIEW, text: { - primary: __('Stage'), + primary: s__('GraphViewType|Stage'), }, }, [LAYER_VIEW]: { type: LAYER_VIEW, text: { - primary: __('Job dependencies'), + primary: s__('GraphViewType|Job dependencies'), }, }, }, diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index 3f746731e34..b3c5af5418f 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -58,7 +58,7 @@ export default { }, computed: { tooltipText() { - return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} + return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} - ${this.sourceJobInfo}`; }, buttonId() { @@ -71,7 +71,7 @@ export default { return this.pipeline.project.name; }, downstreamTitle() { - return this.childPipeline ? __('child-pipeline') : this.pipeline.project.name; + return this.childPipeline ? this.sourceJobName : this.pipeline.project.name; }, parentPipeline() { return this.isUpstream && this.isSameProject; @@ -163,7 +163,7 @@ export default { /> <div v-else class="gl-pr-2"><gl-loading-icon inline /></div> <div class="gl-display-flex gl-flex-direction-column gl-w-13"> - <span class="gl-text-truncate"> + <span class="gl-text-truncate" data-testid="downstream-title"> {{ downstreamTitle }} </span> <div class="gl-text-truncate"> diff --git a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js index 7c306683305..7c62acbe8de 100644 --- a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js +++ b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js @@ -60,8 +60,16 @@ export const generateLinksData = ({ links }, containerID, modifier = '') => { paddingTop + sourceNodeCoordinates.height / 2; - // Start point - path.moveTo(sourceNodeX, sourceNodeY); + const sourceNodeLeftX = sourceNodeCoordinates.left - containerCoordinates.x - paddingLeft; + + // If the source and target X values are the same, + // it means the nodes are in the same column so we + // want to start the line on the left of the pill + // instead of the right to have a nice curve. + const firstPointCoordinateX = sourceNodeLeftX === targetNodeX ? sourceNodeLeftX : sourceNodeX; + + // First point + path.moveTo(firstPointCoordinateX, sourceNodeY); // Make cross-stages lines a straight line all the way // until we can safely draw the bezier to look nice. diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index d8e7b83a8c1..b7500ef00b0 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -132,6 +132,16 @@ export default { }; } }, + canRetryPipeline() { + const { retryable, userPermissions } = this.pipeline; + + return retryable && userPermissions.updatePipeline; + }, + canCancelPipeline() { + const { cancelable, userPermissions } = this.pipeline; + + return cancelable && userPermissions.updatePipeline; + }, }, watch: { isFinished(finished) { @@ -219,7 +229,7 @@ export default { item-name="Pipeline" > <gl-button - v-if="pipeline.retryable" + v-if="canRetryPipeline" :loading="isRetrying" :disabled="isRetrying" category="secondary" @@ -232,7 +242,7 @@ export default { </gl-button> <gl-button - v-if="pipeline.cancelable" + v-if="canCancelPipeline" :loading="isCanceling" :disabled="isCanceling" class="gl-ml-3" diff --git a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue index 3972c126673..d19215e7895 100644 --- a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue +++ b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue @@ -1,6 +1,6 @@ <script> import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { dasherize } from '~/lib/utils/text_utility'; @@ -81,7 +81,9 @@ export default { reportToSentry('action_component', err); - createFlash(__('An error occurred while making the request.')); + createFlash({ + message: __('An error occurred while making the request.'), + }); }); }, }, diff --git a/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue b/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue deleted file mode 100644 index 6dff3828a34..00000000000 --- a/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue +++ /dev/null @@ -1,90 +0,0 @@ -<script> -import { GlBanner, GlLink, GlSprintf } from '@gitlab/ui'; -import createFlash from '~/flash'; -import { __ } from '~/locale'; -import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql'; -import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql'; - -const featureName = 'pipeline_needs_banner'; -const enumFeatureName = featureName.toUpperCase(); - -export default { - i18n: { - title: __('View job dependencies in the pipeline graph!'), - description: __( - 'You can now group jobs in the pipeline graph based on which jobs are configured to run first, if you use the %{codeStart}needs:%{codeEnd} keyword to establish job dependencies in your CI/CD pipelines. %{linkStart}Learn how to speed up your pipeline with needs.%{linkEnd}', - ), - buttonText: __('Provide feedback'), - }, - components: { - GlBanner, - GlLink, - GlSprintf, - }, - apollo: { - callouts: { - query: getUserCallouts, - update(data) { - return data?.currentUser?.callouts?.nodes.map((c) => c.featureName); - }, - error() { - this.hasError = true; - }, - }, - }, - inject: ['dagDocPath'], - data() { - return { - callouts: [], - dismissedAlert: false, - hasError: false, - }; - }, - computed: { - showBanner() { - return ( - !this.$apollo.queries.callouts?.loading && - !this.hasError && - !this.dismissedAlert && - !this.callouts.includes(enumFeatureName) - ); - }, - }, - methods: { - handleClose() { - this.dismissedAlert = true; - try { - this.$apollo.mutate({ - mutation: DismissPipelineGraphCallout, - variables: { - featureName, - }, - }); - } catch { - createFlash(__('There was a problem dismissing this notification.')); - } - }, - }, -}; -</script> -<template> - <gl-banner - v-if="showBanner" - :title="$options.i18n.title" - :button-text="$options.i18n.buttonText" - button-link="https://gitlab.com/gitlab-org/gitlab/-/issues/327688" - variant="introduction" - @close="handleClose" - > - <p> - <gl-sprintf :message="$options.i18n.description"> - <template #link="{ content }"> - <gl-link :href="dagDocPath" target="_blank"> {{ content }}</gl-link> - </template> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> - </gl-banner> -</template> diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js index 9d886e0e379..f1d9ced807b 100644 --- a/app/assets/javascripts/pipelines/components/parsing_utils.js +++ b/app/assets/javascripts/pipelines/components/parsing_utils.js @@ -55,28 +55,32 @@ export const createNodeDict = (nodes) => { export const makeLinksFromNodes = (nodes, nodeDict) => { const constantLinkValue = 10; // all links are the same weight return nodes - .map((group) => { - return group.jobs.map((job) => { - if (!job.needs) { - return []; - } - - return job.needs.map((needed) => { - return { - source: nodeDict[needed]?.name, - target: group.name, - value: constantLinkValue, - }; - }); - }); - }) + .map(({ jobs, name: groupName }) => + jobs.map(({ needs = [] }) => + needs.reduce((acc, needed) => { + // It's possible that we have an optional job, which + // is being needed by another job. In that scenario, + // the needed job doesn't exist, so we don't want to + // create link for it. + if (nodeDict[needed]?.name) { + acc.push({ + source: nodeDict[needed].name, + target: groupName, + value: constantLinkValue, + }); + } + + return acc; + }, []), + ), + ) .flat(2); }; export const getAllAncestors = (nodes, nodeDict) => { const needs = nodes .map((node) => { - return nodeDict[node].needs || ''; + return nodeDict[node]?.needs || ''; }) .flat() .filter(Boolean); diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue index e9773f055a7..104a3caab4c 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -2,6 +2,7 @@ import { GlEmptyState, GlButton } from '@gitlab/ui'; import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils'; import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; +import ExperimentTracking from '~/experimentation/experiment_tracking'; import { getExperimentData } from '~/experimentation/utils'; import { helpPagePath } from '~/helpers/help_page_helper'; import { s__ } from '~/locale'; @@ -13,7 +14,9 @@ export default { description: s__(`Pipelines|GitLab CI/CD can automatically build, test, and deploy your code. Let GitLab take care of time consuming tasks, so you can spend more time creating.`), - btnText: s__('Pipelines|Get started with CI/CD'), + aboutRunnersBtnText: s__('Pipelines|Learn about Runners'), + installRunnersBtnText: s__('Pipelines|Install GitLab Runners'), + getStartedBtnText: s__('Pipelines|Get started with CI/CD'), codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'), codeQualityDescription: s__(`Pipelines|To keep your codebase simple, readable, and accessible to contributors, use GitLab CI/CD @@ -42,6 +45,11 @@ export default { required: false, default: null, }, + ciRunnerSettingsPath: { + type: String, + required: false, + default: null, + }, }, computed: { ciHelpPagePath() { @@ -50,6 +58,12 @@ export default { isPipelineEmptyStateTemplatesExperimentActive() { return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates')); }, + isCodeQualityExperimentActive() { + return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough')); + }, + isCiRunnerTemplatesExperimentActive() { + return this.canSetCi && Boolean(getExperimentData('ci_runner_templates')); + }, }, mounted() { startCodeQualityWalkthrough(); @@ -58,6 +72,10 @@ export default { trackClick() { track('cta_clicked'); }, + trackCiRunnerTemplatesClick(action) { + const tracking = new ExperimentTracking('ci_runner_templates'); + tracking.event(action); + }, }, }; </script> @@ -72,7 +90,7 @@ export default { :title="$options.i18n.title" :svg-path="emptyStateSvgPath" :description="$options.i18n.description" - :primary-button-text="$options.i18n.btnText" + :primary-button-text="$options.i18n.getStartedBtnText" :primary-button-link="ciHelpPagePath" /> </template> @@ -80,7 +98,7 @@ export default { <pipelines-ci-templates /> </template> </gitlab-experiment> - <gitlab-experiment v-else-if="canSetCi" name="code_quality_walkthrough"> + <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough"> <template #control> <gl-empty-state :title="$options.i18n.title" @@ -89,7 +107,7 @@ export default { > <template #actions> <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()"> - {{ $options.i18n.btnText }} + {{ $options.i18n.getStartedBtnText }} </gl-button> </template> </gl-empty-state> @@ -108,6 +126,57 @@ export default { </gl-empty-state> </template> </gitlab-experiment> + <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates"> + <template #control> + <gl-empty-state + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + > + <template #actions> + <gl-button + :href="ciHelpPagePath" + variant="confirm" + @click="trackCiRunnerTemplatesClick('get_started_button_clicked')" + > + {{ $options.i18n.getStartedBtnText }} + </gl-button> + </template> + </gl-empty-state> + </template> + <template #candidate> + <gl-empty-state + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + > + <template #actions> + <gl-button + :href="ciRunnerSettingsPath" + variant="confirm" + @click="trackCiRunnerTemplatesClick('install_runners_button_clicked')" + > + {{ $options.i18n.installRunnersBtnText }} + </gl-button> + <gl-button + :href="ciHelpPagePath" + variant="default" + @click="trackCiRunnerTemplatesClick('learn_button_clicked')" + > + {{ $options.i18n.aboutRunnersBtnText }} + </gl-button> + </template> + </gl-empty-state> + </template> + </gitlab-experiment> + <gl-empty-state + v-else-if="canSetCi" + :title="$options.i18n.title" + :svg-path="emptyStateSvgPath" + :description="$options.i18n.description" + :primary-button-text="$options.i18n.getStartedBtnText" + :primary-button-link="ciHelpPagePath" + /> <gl-empty-state v-else title="" 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 d39e120dc6c..52c8ef2cf26 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -56,6 +56,7 @@ export default { <div class="pipeline-tags" data-testid="pipeline-url-table-cell"> <gl-link :href="pipeline.path" + class="gl-text-decoration-underline" data-testid="pipeline-url-link" data-qa-selector="pipeline_url_link" > diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 0218cb2e1b8..8bb2657c161 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,7 +1,7 @@ <script> import { GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { isEqual } from 'lodash'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { getParameterByName } from '~/lib/utils/common_utils'; import { __, s__ } from '~/locale'; import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; @@ -99,6 +99,11 @@ export default { required: false, default: null, }, + ciRunnerSettingsPath: { + type: String, + required: false, + default: null, + }, }, data() { return { @@ -249,11 +254,16 @@ export default { .postAction(endpoint) .then(() => { this.isResetCacheButtonLoading = false; - createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice'); + createFlash({ + message: s__('Pipelines|Project cache successfully reset.'), + type: 'notice', + }); }) .catch(() => { this.isResetCacheButtonLoading = false; - createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.')); + createFlash({ + message: s__('Pipelines|Something went wrong while cleaning runners cache.'), + }); }); }, resetRequestData() { @@ -278,7 +288,10 @@ export default { } if (!filter.type) { - createFlash(RAW_TEXT_WARNING, 'warning'); + createFlash({ + message: RAW_TEXT_WARNING, + type: 'warning', + }); } }); @@ -337,6 +350,7 @@ export default { :empty-state-svg-path="emptyStateSvgPath" :can-set-ci="canCreatePipeline" :code-quality-page-path="codeQualityPagePath" + :ci-runner-settings-path="ciRunnerSettingsPath" /> <gl-empty-state diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue index 20a232beb83..15ff7da35e1 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue @@ -2,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; export default { @@ -38,7 +38,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_BRANCH_ERROR_MESSAGE); + createFlash({ + message: FETCH_BRANCH_ERROR_MESSAGE, + }); this.loading = false; throw err; }); diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue index 4a8d89ebe37..af62c492748 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue @@ -2,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; export default { @@ -38,7 +38,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_TAG_ERROR_MESSAGE); + createFlash({ + message: FETCH_TAG_ERROR_MESSAGE, + }); this.loading = false; throw err; }); diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue index 3db5893b565..bc661f37493 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue @@ -8,7 +8,7 @@ import { } from '@gitlab/ui'; import { debounce } from 'lodash'; import Api from '~/api'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import { ANY_TRIGGER_AUTHOR, FETCH_AUTHOR_ERROR_MESSAGE, @@ -61,7 +61,9 @@ export default { this.loading = false; }) .catch((err) => { - createFlash(FETCH_AUTHOR_ERROR_MESSAGE); + createFlash({ + message: FETCH_AUTHOR_ERROR_MESSAGE, + }); this.loading = false; throw err; }); |