debian-mirror-gitlab/app/assets/javascripts/pipelines/components/graph/graph_component.vue

244 lines
7 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
2021-04-29 21:17:54 +05:30
import { reportToSentry } from '../../utils';
2021-02-22 17:27:13 +05:30
import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
2021-03-08 18:12:59 +05:30
import LinksLayer from '../graph_shared/links_layer.vue';
2021-06-08 01:23:25 +05:30
import { generateColumnsFromLayersListMemoized } from '../parsing_utils';
2021-04-29 21:17:54 +05:30
import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
2019-12-21 20:55:43 +05:30
import LinkedPipelinesColumn from './linked_pipelines_column.vue';
2021-02-22 17:27:13 +05:30
import StageColumnComponent from './stage_column_component.vue';
2021-04-29 21:17:54 +05:30
import { validateConfigPaths } from './utils';
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
export default {
2019-12-21 20:55:43 +05:30
name: 'PipelineGraph',
2018-05-09 12:01:36 +05:30
components: {
2021-03-08 18:12:59 +05:30
LinksLayer,
2021-02-22 17:27:13 +05:30
LinkedGraphWrapper,
2019-12-21 20:55:43 +05:30
LinkedPipelinesColumn,
2021-02-22 17:27:13 +05:30
StageColumnComponent,
2019-12-21 20:55:43 +05:30
},
props: {
2021-04-17 20:07:23 +05:30
configPaths: {
type: Object,
required: true,
validator: validateConfigPaths,
2019-12-21 20:55:43 +05:30
},
2021-02-22 17:27:13 +05:30
pipeline: {
2019-12-21 20:55:43 +05:30
type: Object,
required: true,
},
2021-06-08 01:23:25 +05:30
showLinks: {
type: Boolean,
required: true,
},
2021-04-29 21:17:54 +05:30
viewType: {
type: String,
required: true,
},
2021-04-17 20:07:23 +05:30
isLinkedPipeline: {
type: Boolean,
required: false,
default: false,
},
2021-10-27 15:23:28 +05:30
computedPipelineInfo: {
type: Object,
2021-04-29 21:17:54 +05:30
required: false,
2021-10-27 15:23:28 +05:30
default: () => ({}),
2021-04-29 21:17:54 +05:30
},
2019-12-21 20:55:43 +05:30
type: {
type: String,
required: false,
2021-01-29 00:20:46 +05:30
default: MAIN,
2019-12-21 20:55:43 +05:30
},
},
2021-02-22 17:27:13 +05:30
pipelineTypeConstants: {
DOWNSTREAM,
UPSTREAM,
},
2021-03-08 18:12:59 +05:30
CONTAINER_REF: 'PIPELINE_LINKS_CONTAINER_REF',
BASE_CONTAINER_ID: 'pipeline-links-container',
2019-12-21 20:55:43 +05:30
data() {
return {
2021-02-22 17:27:13 +05:30
hoveredJobName: '',
2021-04-29 21:17:54 +05:30
hoveredSourceJobName: '',
2021-03-08 18:12:59 +05:30
highlightedJobs: [],
measurements: {
width: 0,
height: 0,
},
2020-11-24 15:15:51 +05:30
pipelineExpanded: {
jobName: '',
expanded: false,
},
2019-12-21 20:55:43 +05:30
};
},
computed: {
2021-03-08 18:12:59 +05:30
containerId() {
return `${this.$options.BASE_CONTAINER_ID}-${this.pipeline.id}`;
},
2021-02-22 17:27:13 +05:30
downstreamPipelines() {
return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
},
2021-04-29 21:17:54 +05:30
layout() {
2021-06-08 01:23:25 +05:30
return this.isStageView
? this.pipeline.stages
2021-10-27 15:23:28 +05:30
: generateColumnsFromLayersListMemoized(
this.pipeline,
this.computedPipelineInfo.pipelineLayers,
);
2021-01-03 14:25:43 +05:30
},
2021-02-22 17:27:13 +05:30
hasDownstreamPipelines() {
return Boolean(this.pipeline?.downstream?.length > 0);
2019-12-21 20:55:43 +05:30
},
2021-02-22 17:27:13 +05:30
hasUpstreamPipelines() {
return Boolean(this.pipeline?.upstream?.length > 0);
2019-12-21 20:55:43 +05:30
},
2021-04-29 21:17:54 +05:30
isStageView() {
return this.viewType === STAGE_VIEW;
},
2021-10-27 15:23:28 +05:30
linksData() {
return this.computedPipelineInfo?.linksData ?? null;
},
2021-04-17 20:07:23 +05:30
metricsConfig() {
return {
path: this.configPaths.metricsPath,
collectMetrics: true,
};
},
2021-06-08 01:23:25 +05:30
showJobLinks() {
return !this.isStageView && this.showLinks;
2021-04-29 21:17:54 +05:30
},
2021-03-08 18:12:59 +05:30
// The show downstream check prevents showing redundant linked columns
2021-02-22 17:27:13 +05:30
showDownstreamPipelines() {
2019-12-21 20:55:43 +05:30
return (
2021-02-22 17:27:13 +05:30
this.hasDownstreamPipelines && this.type !== this.$options.pipelineTypeConstants.UPSTREAM
2019-12-21 20:55:43 +05:30
);
},
2021-03-08 18:12:59 +05:30
// The show upstream check prevents showing redundant linked columns
2021-02-22 17:27:13 +05:30
showUpstreamPipelines() {
2019-12-21 20:55:43 +05:30
return (
2021-02-22 17:27:13 +05:30
this.hasUpstreamPipelines && this.type !== this.$options.pipelineTypeConstants.DOWNSTREAM
2019-12-21 20:55:43 +05:30
);
},
2021-02-22 17:27:13 +05:30
upstreamPipelines() {
return this.hasUpstreamPipelines ? this.pipeline.upstream : [];
2020-03-13 15:44:24 +05:30
},
2019-12-21 20:55:43 +05:30
},
2021-03-08 18:12:59 +05:30
errorCaptured(err, _vm, info) {
reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
},
mounted() {
2021-03-11 19:13:27 +05:30
this.getMeasurements();
2021-03-08 18:12:59 +05:30
},
2019-12-21 20:55:43 +05:30
methods: {
2021-03-08 18:12:59 +05:30
getMeasurements() {
2021-03-11 19:13:27 +05:30
this.measurements = {
2021-03-08 18:12:59 +05:30
width: this.$refs[this.containerId].scrollWidth,
height: this.$refs[this.containerId].scrollHeight,
};
},
2021-04-17 20:07:23 +05:30
onError(payload) {
this.$emit('error', payload);
2021-03-08 18:12:59 +05:30
},
2020-07-28 23:09:34 +05:30
setJob(jobName) {
2021-02-22 17:27:13 +05:30
this.hoveredJobName = jobName;
2020-07-28 23:09:34 +05:30
},
2021-04-29 21:17:54 +05:30
setSourceJob(jobName) {
this.hoveredSourceJobName = jobName;
},
2021-03-11 19:13:27 +05:30
slidePipelineContainer() {
this.$refs.mainPipelineContainer.scrollBy({
left: ONE_COL_WIDTH,
top: 0,
behavior: 'smooth',
});
},
2021-02-22 17:27:13 +05:30
togglePipelineExpanded(jobName, expanded) {
this.pipelineExpanded = {
expanded,
jobName: expanded ? jobName : '',
};
2020-11-24 15:15:51 +05:30
},
2021-03-08 18:12:59 +05:30
updateHighlightedJobs(jobs) {
this.highlightedJobs = jobs;
},
2018-05-09 12:01:36 +05:30
},
};
2017-08-17 22:00:37 +05:30
</script>
<template>
2021-02-22 17:27:13 +05:30
<div class="js-pipeline-graph">
2019-12-21 20:55:43 +05:30
<div
2021-03-11 19:13:27 +05:30
ref="mainPipelineContainer"
2021-09-30 23:02:18 +05:30
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 gl-border-t-solid gl-border-t-1 gl-border-gray-100': !isLinkedPipeline,
}"
2019-12-21 20:55:43 +05:30
>
2021-02-22 17:27:13 +05:30
<linked-graph-wrapper>
<template #upstream>
<linked-pipelines-column
v-if="showUpstreamPipelines"
2021-04-17 20:07:23 +05:30
:config-paths="configPaths"
2021-02-22 17:27:13 +05:30
:linked-pipelines="upstreamPipelines"
:column-title="__('Upstream')"
2021-06-08 01:23:25 +05:30
:show-links="showJobLinks"
2021-02-22 17:27:13 +05:30
:type="$options.pipelineTypeConstants.UPSTREAM"
2021-04-29 21:17:54 +05:30
:view-type="viewType"
2021-03-08 18:12:59 +05:30
@error="onError"
2021-02-22 17:27:13 +05:30
/>
</template>
<template #main>
2021-03-08 18:12:59 +05:30
<div :id="containerId" :ref="containerId">
<links-layer
2021-04-29 21:17:54 +05:30
:pipeline-data="layout"
2021-03-08 18:12:59 +05:30
:pipeline-id="pipeline.id"
:container-id="containerId"
:container-measurements="measurements"
:highlighted-job="hoveredJobName"
2021-10-27 15:23:28 +05:30
:links-data="linksData"
2021-04-17 20:07:23 +05:30
:metrics-config="metricsConfig"
2021-06-08 01:23:25 +05:30
:show-links="showJobLinks"
2021-04-29 21:17:54 +05:30
:view-type="viewType"
2021-03-08 18:12:59 +05:30
@error="onError"
@highlightedJobsChange="updateHighlightedJobs"
>
<stage-column-component
2021-04-29 21:17:54 +05:30
v-for="column in layout"
:key="column.id || column.name"
:name="column.name"
:groups="column.groups"
:action="column.status.action"
2021-03-08 18:12:59 +05:30
:highlighted-jobs="highlightedJobs"
2021-09-30 23:02:18 +05:30
:is-stage-view="isStageView"
2021-03-08 18:12:59 +05:30
:job-hovered="hoveredJobName"
2021-04-29 21:17:54 +05:30
:source-job-hovered="hoveredSourceJobName"
2021-03-08 18:12:59 +05:30
:pipeline-expanded="pipelineExpanded"
:pipeline-id="pipeline.id"
2021-09-30 23:02:18 +05:30
:user-permissions="pipeline.userPermissions"
2021-03-08 18:12:59 +05:30
@refreshPipelineGraph="$emit('refreshPipelineGraph')"
@jobHover="setJob"
2021-03-11 19:13:27 +05:30
@updateMeasurements="getMeasurements"
2021-03-08 18:12:59 +05:30
/>
</links-layer>
</div>
2021-02-22 17:27:13 +05:30
</template>
<template #downstream>
<linked-pipelines-column
v-if="showDownstreamPipelines"
2021-03-11 19:13:27 +05:30
class="gl-mr-6"
2021-04-17 20:07:23 +05:30
:config-paths="configPaths"
2021-02-22 17:27:13 +05:30
:linked-pipelines="downstreamPipelines"
:column-title="__('Downstream')"
2021-06-08 01:23:25 +05:30
:show-links="showJobLinks"
2021-02-22 17:27:13 +05:30
:type="$options.pipelineTypeConstants.DOWNSTREAM"
2021-04-29 21:17:54 +05:30
:view-type="viewType"
@downstreamHovered="setSourceJob"
2021-02-22 17:27:13 +05:30
@pipelineExpandToggle="togglePipelineExpanded"
2021-03-11 19:13:27 +05:30
@scrollContainer="slidePipelineContainer"
2021-03-08 18:12:59 +05:30
@error="onError"
2021-02-22 17:27:13 +05:30
/>
</template>
</linked-graph-wrapper>
2017-08-17 22:00:37 +05:30
</div>
</div>
</template>