diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 40 |
1 files changed, 14 insertions, 26 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 63048777724..71ec81b8969 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -2,6 +2,7 @@ import { reportToSentry } from '../../utils'; import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue'; import LinksLayer from '../graph_shared/links_layer.vue'; +import { generateColumnsFromLayersListMemoized } from '../parsing_utils'; import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants'; import LinkedPipelinesColumn from './linked_pipelines_column.vue'; import StageColumnComponent from './stage_column_component.vue'; @@ -25,6 +26,10 @@ export default { type: Object, required: true, }, + showLinks: { + type: Boolean, + required: true, + }, viewType: { type: String, required: true, @@ -74,7 +79,9 @@ export default { return this.hasDownstreamPipelines ? this.pipeline.downstream : []; }, layout() { - return this.isStageView ? this.pipeline.stages : this.generateColumnsFromLayersList(); + return this.isStageView + ? this.pipeline.stages + : generateColumnsFromLayersListMemoized(this.pipeline, this.pipelineLayers); }, hasDownstreamPipelines() { return Boolean(this.pipeline?.downstream?.length > 0); @@ -91,8 +98,8 @@ export default { collectMetrics: true, }; }, - shouldHideLinks() { - return this.isStageView; + showJobLinks() { + return !this.isStageView && this.showLinks; }, shouldShowStageName() { return !this.isStageView; @@ -120,26 +127,6 @@ export default { this.getMeasurements(); }, methods: { - generateColumnsFromLayersList() { - return this.pipelineLayers.map((layers, idx) => { - /* - look up the groups in each layer, - then add each set of layer groups to a stage-like object - */ - - const groups = layers.map((id) => { - const { stageIdx, groupIdx } = this.pipeline.stagesLookup[id]; - return this.pipeline.stages?.[stageIdx]?.groups?.[groupIdx]; - }); - - return { - name: '', - id: `layer-${idx}`, - status: { action: null }, - groups: groups.filter(Boolean), - }; - }); - }, getMeasurements() { this.measurements = { width: this.$refs[this.containerId].scrollWidth, @@ -178,7 +165,7 @@ 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="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap gl-border-t-solid gl-border-t-1 gl-border-gray-100" :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }" > <linked-graph-wrapper> @@ -188,6 +175,7 @@ export default { :config-paths="configPaths" :linked-pipelines="upstreamPipelines" :column-title="__('Upstream')" + :show-links="showJobLinks" :type="$options.pipelineTypeConstants.UPSTREAM" :view-type="viewType" @error="onError" @@ -202,9 +190,8 @@ export default { :container-measurements="measurements" :highlighted-job="hoveredJobName" :metrics-config="metricsConfig" - :never-show-links="shouldHideLinks" + :show-links="showJobLinks" :view-type="viewType" - default-link-color="gl-stroke-transparent" @error="onError" @highlightedJobsChange="updateHighlightedJobs" > @@ -234,6 +221,7 @@ export default { :config-paths="configPaths" :linked-pipelines="downstreamPipelines" :column-title="__('Downstream')" + :show-links="showJobLinks" :type="$options.pipelineTypeConstants.DOWNSTREAM" :view-type="viewType" @downstreamHovered="setSourceJob" |