diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-18 13:34:06 +0300 |
commit | 859a6fb938bb9ee2a317c46dfa4fcc1af49608f0 (patch) | |
tree | d7f2700abe6b4ffcb2dcfc80631b2d87d0609239 /app/assets/javascripts/pipelines/components/graph | |
parent | 446d496a6d000c73a304be52587cd9bbc7493136 (diff) |
Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph')
12 files changed, 74 insertions, 46 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 0ce94d4f02f..1df693704d4 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,9 +1,10 @@ <script> import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { deprecatedCreateFlash as 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'; import { __ } from '~/locale'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; import { reportToSentry } from './utils'; /** @@ -62,7 +63,7 @@ export default { * */ onClickAction() { - this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`); + this.$root.$emit(BV_HIDE_TOOLTIP, `js-ci-action-${this.link}`); this.isDisabled = true; this.isLoading = true; diff --git a/app/assets/javascripts/pipelines/components/graph/constants.js b/app/assets/javascripts/pipelines/components/graph/constants.js index 6f0deccfef6..caa269f5095 100644 --- a/app/assets/javascripts/pipelines/components/graph/constants.js +++ b/app/assets/javascripts/pipelines/components/graph/constants.js @@ -2,5 +2,11 @@ export const DOWNSTREAM = 'downstream'; export const MAIN = 'main'; export const UPSTREAM = 'upstream'; +/* + this value is based on the gl-pipeline-job-width class + plus some extra for the margins +*/ +export const ONE_COL_WIDTH = 180; + export const REST = 'rest'; export const GRAPHQL = 'graphql'; diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index cd403757fe6..93156d5d05b 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -1,9 +1,9 @@ <script> import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue'; import LinksLayer from '../graph_shared/links_layer.vue'; +import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH } from './constants'; import LinkedPipelinesColumn from './linked_pipelines_column.vue'; import StageColumnComponent from './stage_column_component.vue'; -import { DOWNSTREAM, MAIN, UPSTREAM } from './constants'; import { reportToSentry } from './utils'; export default { @@ -86,11 +86,11 @@ export default { reportToSentry(this.$options.name, `error: ${err}, info: ${info}`); }, mounted() { - this.measurements = this.getMeasurements(); + this.getMeasurements(); }, methods: { getMeasurements() { - return { + this.measurements = { width: this.$refs[this.containerId].scrollWidth, height: this.$refs[this.containerId].scrollHeight, }; @@ -101,6 +101,13 @@ export default { setJob(jobName) { this.hoveredJobName = jobName; }, + slidePipelineContainer() { + this.$refs.mainPipelineContainer.scrollBy({ + left: ONE_COL_WIDTH, + top: 0, + behavior: 'smooth', + }); + }, togglePipelineExpanded(jobName, expanded) { this.pipelineExpanded = { expanded, @@ -116,8 +123,9 @@ export default { <template> <div class="js-pipeline-graph"> <div - class="gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap" - :class="{ 'gl-pipeline-min-h gl-py-5': !isLinkedPipeline }" + ref="mainPipelineContainer" + class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap" + :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }" > <linked-graph-wrapper> <template #upstream> @@ -153,6 +161,7 @@ export default { :pipeline-id="pipeline.id" @refreshPipelineGraph="$emit('refreshPipelineGraph')" @jobHover="setJob" + @updateMeasurements="getMeasurements" /> </links-layer> </div> @@ -160,11 +169,13 @@ export default { <template #downstream> <linked-pipelines-column v-if="showDownstreamPipelines" + class="gl-mr-6" :linked-pipelines="downstreamPipelines" :column-title="__('Downstream')" :type="$options.pipelineTypeConstants.DOWNSTREAM" @downstreamHovered="setJob" @pipelineExpandToggle="togglePipelineExpanded" + @scrollContainer="slidePipelineContainer" @error="onError" /> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue index 2164dbf4d55..abbf8df6eed 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component_legacy.vue @@ -1,10 +1,10 @@ <script> -import { escape, capitalize } from 'lodash'; import { GlLoadingIcon } from '@gitlab/ui'; -import StageColumnComponentLegacy from './stage_column_component_legacy.vue'; -import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue'; +import { escape, capitalize } from 'lodash'; import GraphBundleMixin from '../../mixins/graph_pipeline_bundle_mixin'; import { UPSTREAM, DOWNSTREAM, MAIN } from './constants'; +import LinkedPipelinesColumnLegacy from './linked_pipelines_column_legacy.vue'; +import StageColumnComponentLegacy from './stage_column_component_legacy.vue'; import { reportToSentry } from './utils'; export default { diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue index 08d6162aeb8..f6aee8c5fcf 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue @@ -60,7 +60,7 @@ export default { > <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between"> <span class="gl-display-flex gl-align-items-center gl-min-w-0"> - <ci-icon :status="group.status" :size="24" /> + <ci-icon :status="group.status" :size="24" class="gl-line-height-0" /> <span class="gl-text-truncate mw-70p gl-pl-3"> {{ group.name }} </span> diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index 8262d728a24..46ef0457d40 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_item.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue @@ -1,11 +1,12 @@ <script> import { GlTooltipDirective, GlLink } from '@gitlab/ui'; -import ActionComponent from './action_component.vue'; -import JobNameComponent from './job_name_component.vue'; -import { sprintf } from '~/locale'; import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; +import { sprintf } from '~/locale'; import { accessValue } from './accessors'; +import ActionComponent from './action_component.vue'; import { REST } from './constants'; +import JobNameComponent from './job_name_component.vue'; import { reportToSentry } from './utils'; /** @@ -144,7 +145,7 @@ export default { }, methods: { hideTooltips() { - this.$root.$emit('bv::hide::tooltip'); + this.$root.$emit(BV_HIDE_TOOLTIP); }, pipelineActionRequestComplete() { this.$emit('pipelineActionRequestComplete'); diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue index 23a38fc053e..fffd8e1818a 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue @@ -30,7 +30,7 @@ export default { </script> <template> <span class="ci-job-name-component mw-100 gl-display-flex gl-align-items-center"> - <ci-icon :size="iconSize" :status="status" /> + <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" /> <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block"> {{ name }} </span> diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index d18e604f087..add7b3445f7 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -1,7 +1,8 @@ <script> import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui'; -import CiStatus from '~/vue_shared/components/ci_icon.vue'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { __, sprintf } from '~/locale'; +import CiStatus from '~/vue_shared/components/ci_icon.vue'; import { accessValue } from './accessors'; import { DOWNSTREAM, REST, UPSTREAM } from './constants'; import { reportToSentry } from './utils'; @@ -126,7 +127,7 @@ export default { this.$emit('pipelineExpandToggle', this.sourceJobName, !this.expanded); }, hideTooltips() { - this.$root.$emit('bv::hide::tooltip'); + this.$root.$emit(BV_HIDE_TOOLTIP); }, onDownstreamHovered() { this.$emit('downstreamHovered', this.sourceJobName); diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue index 40e6a01b88c..3ce77a1c60a 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue @@ -1,8 +1,8 @@ <script> import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql'; -import LinkedPipeline from './linked_pipeline.vue'; import { LOAD_FAILURE } from '../../constants'; -import { UPSTREAM } from './constants'; +import { ONE_COL_WIDTH, UPSTREAM } from './constants'; +import LinkedPipeline from './linked_pipeline.vue'; import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils'; export default { @@ -39,6 +39,7 @@ export default { 'gl-pl-3', 'gl-mb-5', ], + minWidth: `${ONE_COL_WIDTH}px`, computed: { columnClass() { const positionValues = { @@ -47,12 +48,6 @@ export default { }; return `graph-position-${this.graphPosition} ${positionValues[this.graphPosition]}`; }, - graphPosition() { - return this.isUpstream ? 'left' : 'right'; - }, - isUpstream() { - return this.type === UPSTREAM; - }, computedTitleClasses() { const positionalClasses = this.isUpstream ? ['gl-w-full', 'gl-text-right', 'gl-linked-pipeline-padding'] @@ -60,6 +55,15 @@ export default { return [...this.$options.titleClasses, ...positionalClasses]; }, + graphPosition() { + return this.isUpstream ? 'left' : 'right'; + }, + isUpstream() { + return this.type === UPSTREAM; + }, + minWidth() { + return this.isUpstream ? 0 : this.$options.minWidth; + }, }, methods: { getPipelineData(pipeline) { @@ -79,6 +83,7 @@ export default { }, result() { this.loadingPipelineId = null; + this.$emit('scrollContainer'); }, error(err, _vm, _key, type) { this.$emit('error', LOAD_FAILURE); @@ -130,6 +135,9 @@ export default { this.$emit('pipelineExpandToggle', jobName, expanded); }, + showContainer(id) { + return this.isExpanded(id) || this.isLoadingPipeline(id); + }, }, }; </script> @@ -158,9 +166,13 @@ export default { @pipelineClicked="onPipelineClick(pipeline)" @pipelineExpandToggle="onPipelineExpandToggle" /> - <div v-if="isExpanded(pipeline.id)" class="gl-display-inline-block"> + <div + v-if="showContainer(pipeline.id)" + :style="{ minWidth }" + class="gl-display-inline-block" + > <pipeline-graph - v-if="currentPipeline" + v-if="isExpanded(pipeline.id)" :type="type" class="d-inline-block gl-mt-n2" :pipeline="currentPipeline" diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue index 2f1390e07d1..0d1ff94c275 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column_legacy.vue @@ -1,6 +1,6 @@ <script> -import LinkedPipeline from './linked_pipeline.vue'; import { UPSTREAM } from './constants'; +import LinkedPipeline from './linked_pipeline.vue'; import { reportToSentry } from './utils'; export default { diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue index 65f8c231885..0a762563114 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -1,11 +1,11 @@ <script> import { capitalize, escape, isEmpty } from 'lodash'; import MainGraphWrapper from '../graph_shared/main_graph_wrapper.vue'; -import JobItem from './job_item.vue'; -import JobGroupDropdown from './job_group_dropdown.vue'; +import { accessValue } from './accessors'; import ActionComponent from './action_component.vue'; import { GRAPHQL } from './constants'; -import { accessValue } from './accessors'; +import JobGroupDropdown from './job_group_dropdown.vue'; +import JobItem from './job_item.vue'; import { reportToSentry } from './utils'; export default { @@ -67,6 +67,9 @@ export default { errorCaptured(err, _vm, info) { reportToSentry('stage_column_component', `error: ${err}, info: ${info}`); }, + mounted() { + this.$emit('updateMeasurements'); + }, methods: { getGroupId(group) { return accessValue(GRAPHQL, 'groupId', group); @@ -75,17 +78,13 @@ export default { return `ci-badge-${escape(group.name)}`; }, isFadedOut(jobName) { - return ( - this.jobHovered && - this.highlightedJobs.length > 1 && - !this.highlightedJobs.includes(jobName) - ); + return this.highlightedJobs.length > 1 && !this.highlightedJobs.includes(jobName); }, }, }; </script> <template> - <main-graph-wrapper class="gl-px-6"> + <main-graph-wrapper class="gl-px-6" data-testid="stage-column"> <template #stages> <div data-testid="stage-column-title" @@ -123,12 +122,9 @@ export default { :class="{ 'gl-opacity-3': isFadedOut(group.name) }" @pipelineActionRequestComplete="$emit('refreshPipelineGraph')" /> - <job-group-dropdown - v-else - :group="group" - :pipeline-id="pipelineId" - :class="{ 'gl-opacity-3': isFadedOut(group.name) }" - /> + <div v-else :class="{ 'gl-opacity-3': isFadedOut(group.name) }"> + <job-group-dropdown :group="group" :pipeline-id="pipelineId" /> + </div> </div> </template> </main-graph-wrapper> diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue index 059e8f9f8db..2cee2fbbd8f 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component_legacy.vue @@ -1,9 +1,9 @@ <script> import { isEmpty, escape } from 'lodash'; import stageColumnMixin from '../../mixins/stage_column_mixin'; -import JobItem from './job_item.vue'; -import JobGroupDropdown from './job_group_dropdown.vue'; import ActionComponent from './action_component.vue'; +import JobGroupDropdown from './job_group_dropdown.vue'; +import JobItem from './job_item.vue'; import { reportToSentry } from './utils'; export default { |