diff options
Diffstat (limited to 'app/assets/javascripts/projects/commit_box/info')
3 files changed, 148 insertions, 5 deletions
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue new file mode 100644 index 00000000000..a4a1cb5584d --- /dev/null +++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue @@ -0,0 +1,94 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; +import getLinkedPipelinesQuery from '../graphql/queries/get_linked_pipelines.query.graphql'; + +export default { + i18n: { + linkedPipelinesFetchError: __('There was a problem fetching linked pipelines.'), + }, + components: { + GlLoadingIcon, + PipelineMiniGraph, + LinkedPipelinesMiniList: () => + import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'), + }, + inject: { + fullPath: { + default: '', + }, + iid: { + default: '', + }, + }, + props: { + stages: { + type: Array, + required: true, + }, + }, + apollo: { + pipeline: { + query: getLinkedPipelinesQuery, + variables() { + return { + fullPath: this.fullPath, + iid: this.iid, + }; + }, + skip() { + return !this.fullPath || !this.iid; + }, + update({ project }) { + return project?.pipeline; + }, + error() { + createFlash({ message: this.$options.i18n.linkedPipelinesFetchError }); + }, + }, + }, + data() { + return { + pipeline: null, + }; + }, + computed: { + hasDownstream() { + return this.pipeline?.downstream?.nodes.length > 0; + }, + downstreamPipelines() { + return this.pipeline?.downstream?.nodes; + }, + upstreamPipeline() { + return this.pipeline?.upstream; + }, + }, +}; +</script> + +<template> + <div> + <gl-loading-icon v-if="$apollo.queries.pipeline.loading" /> + <div v-else> + <linked-pipelines-mini-list + v-if="upstreamPipeline" + :triggered-by="[upstreamPipeline]" + data-testid="commit-box-mini-graph-upstream" + /> + + <pipeline-mini-graph + :stages="stages" + class="gl-display-inline" + data-testid="commit-box-mini-graph" + /> + + <linked-pipelines-mini-list + v-if="hasDownstream" + :triggered="downstreamPipelines" + data-testid="commit-box-mini-graph-downstream" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql new file mode 100644 index 00000000000..f7e930bb3f2 --- /dev/null +++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql @@ -0,0 +1,32 @@ +query getLinkedPipelines($fullPath: ID!, $iid: ID!) { + project(fullPath: $fullPath) { + pipeline(iid: $iid) { + downstream { + nodes { + id + path + project { + name + } + detailedStatus { + group + icon + label + } + } + } + upstream { + id + path + project { + name + } + detailedStatus { + group + icon + label + } + } + } + } +} diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js index 9173f5c771f..1d4ec4c110b 100644 --- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js +++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js @@ -1,24 +1,41 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); export const initCommitPipelineMiniGraph = async (selector = '.js-commit-pipeline-mini-graph') => { const el = document.querySelector(selector); + if (!el) { return; } + const { stages, fullPath, iid } = el.dataset; + // Some commits have no pipeline, code splitting to load the pipeline optionally - const { stages } = el.dataset; - const { default: PipelineMiniGraph } = await import( - /* webpackChunkName: 'pipelineMiniGraph' */ '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue' + const { default: CommitBoxPipelineMiniGraph } = await import( + /* webpackChunkName: 'commitBoxPipelineMiniGraph' */ './components/commit_box_pipeline_mini_graph.vue' ); // eslint-disable-next-line no-new new Vue({ el, + apolloProvider, + provide: { + fullPath, + iid, + dataMethod: 'graphql', + }, render(createElement) { - return createElement(PipelineMiniGraph, { + return createElement(CommitBoxPipelineMiniGraph, { props: { - stages: JSON.parse(stages), + // if stages do not exist for some reason, protect JSON.parse from erroring out + stages: stages ? JSON.parse(stages) : [], }, }); }, |