2020-11-27 15:09:34 +00:00
|
|
|
<script>
|
|
|
|
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
|
2021-01-19 12:10:46 +00:00
|
|
|
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
|
2020-11-27 15:09:34 +00:00
|
|
|
import { __ } from '~/locale';
|
2021-02-18 00:09:31 +00:00
|
|
|
import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
|
2020-11-27 15:09:34 +00:00
|
|
|
import PipelineGraph from './graph_component.vue';
|
2021-03-02 18:11:20 +00:00
|
|
|
import {
|
|
|
|
getQueryHeaders,
|
|
|
|
reportToSentry,
|
|
|
|
toggleQueryPollingByVisibility,
|
|
|
|
unwrapPipelineData,
|
|
|
|
} from './utils';
|
2020-11-27 15:09:34 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'PipelineGraphWrapper',
|
|
|
|
components: {
|
|
|
|
GlAlert,
|
|
|
|
GlLoadingIcon,
|
|
|
|
PipelineGraph,
|
|
|
|
},
|
|
|
|
inject: {
|
2021-03-02 18:11:20 +00:00
|
|
|
graphqlResourceEtag: {
|
|
|
|
default: '',
|
|
|
|
},
|
2021-02-18 18:10:41 +00:00
|
|
|
metricsPath: {
|
|
|
|
default: '',
|
|
|
|
},
|
2020-11-27 15:09:34 +00:00
|
|
|
pipelineIid: {
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
pipelineProjectPath: {
|
|
|
|
default: '',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
pipeline: null,
|
|
|
|
alertType: null,
|
|
|
|
showAlert: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
errorTexts: {
|
2021-02-19 12:11:06 +00:00
|
|
|
[DRAW_FAILURE]: __('An error occurred while drawing job relationship links.'),
|
2020-11-27 15:09:34 +00:00
|
|
|
[LOAD_FAILURE]: __('We are currently unable to fetch data for this pipeline.'),
|
|
|
|
[DEFAULT]: __('An unknown error occurred while loading this graph.'),
|
|
|
|
},
|
|
|
|
apollo: {
|
|
|
|
pipeline: {
|
2021-03-02 18:11:20 +00:00
|
|
|
context() {
|
|
|
|
return getQueryHeaders(this.graphqlResourceEtag);
|
|
|
|
},
|
2020-11-27 15:09:34 +00:00
|
|
|
query: getPipelineDetails,
|
2020-12-14 18:09:48 +00:00
|
|
|
pollInterval: 10000,
|
2020-11-27 15:09:34 +00:00
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
projectPath: this.pipelineProjectPath,
|
|
|
|
iid: this.pipelineIid,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
update(data) {
|
2020-12-07 15:09:49 +00:00
|
|
|
return unwrapPipelineData(this.pipelineProjectPath, data);
|
2020-11-27 15:09:34 +00:00
|
|
|
},
|
|
|
|
error() {
|
|
|
|
this.reportFailure(LOAD_FAILURE);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
alert() {
|
|
|
|
switch (this.alertType) {
|
2021-02-18 00:09:31 +00:00
|
|
|
case DRAW_FAILURE:
|
|
|
|
return {
|
|
|
|
text: this.$options.errorTexts[DRAW_FAILURE],
|
|
|
|
variant: 'danger',
|
|
|
|
};
|
2020-11-27 15:09:34 +00:00
|
|
|
case LOAD_FAILURE:
|
|
|
|
return {
|
|
|
|
text: this.$options.errorTexts[LOAD_FAILURE],
|
|
|
|
variant: 'danger',
|
|
|
|
};
|
|
|
|
default:
|
|
|
|
return {
|
|
|
|
text: this.$options.errorTexts[DEFAULT],
|
|
|
|
variant: 'danger',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
2021-03-02 18:11:20 +00:00
|
|
|
configPaths() {
|
|
|
|
return {
|
|
|
|
graphqlResourceEtag: this.graphqlResourceEtag,
|
|
|
|
metricsPath: this.metricsPath,
|
|
|
|
};
|
|
|
|
},
|
2020-12-14 18:09:48 +00:00
|
|
|
showLoadingIcon() {
|
|
|
|
/*
|
|
|
|
Shows the icon only when the graph is empty, not when it is is
|
|
|
|
being refetched, for instance, on action completion
|
|
|
|
*/
|
|
|
|
return this.$apollo.queries.pipeline.loading && !this.pipeline;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
toggleQueryPollingByVisibility(this.$apollo.queries.pipeline);
|
2020-11-27 15:09:34 +00:00
|
|
|
},
|
2021-01-11 21:10:36 +00:00
|
|
|
errorCaptured(err, _vm, info) {
|
|
|
|
reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
|
|
|
|
},
|
2020-11-27 15:09:34 +00:00
|
|
|
methods: {
|
|
|
|
hideAlert() {
|
|
|
|
this.showAlert = false;
|
|
|
|
},
|
2020-12-14 18:09:48 +00:00
|
|
|
refreshPipelineGraph() {
|
|
|
|
this.$apollo.queries.pipeline.refetch();
|
|
|
|
},
|
2020-11-27 15:09:34 +00:00
|
|
|
reportFailure(type) {
|
|
|
|
this.showAlert = true;
|
2021-02-18 00:09:31 +00:00
|
|
|
this.alertType = type;
|
|
|
|
reportToSentry(this.$options.name, this.alertType);
|
2020-11-27 15:09:34 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
2020-12-07 15:09:49 +00:00
|
|
|
<div>
|
|
|
|
<gl-alert v-if="showAlert" :variant="alert.variant" @dismiss="hideAlert">
|
|
|
|
{{ alert.text }}
|
|
|
|
</gl-alert>
|
2020-12-14 18:09:48 +00:00
|
|
|
<gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
|
|
|
|
<pipeline-graph
|
|
|
|
v-if="pipeline"
|
2021-03-02 18:11:20 +00:00
|
|
|
:config-paths="configPaths"
|
2020-12-14 18:09:48 +00:00
|
|
|
:pipeline="pipeline"
|
|
|
|
@error="reportFailure"
|
|
|
|
@refreshPipelineGraph="refreshPipelineGraph"
|
|
|
|
/>
|
2020-12-07 15:09:49 +00:00
|
|
|
</div>
|
2020-11-27 15:09:34 +00:00
|
|
|
</template>
|