All files / app/assets/javascripts/projects/commit_box/info/components commit_box_pipeline_mini_graph.vue

100% Statements 15/15
100% Branches 12/12
100% Functions 10/10
100% Lines 15/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96  2x 2x 2x 2x 2x                 2x                                         7x           7x     8x     2x         9x           9x     5x     9x           54x                                                  
<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"
        :pipeline-path="pipeline.path"
        data-testid="commit-box-mini-graph-downstream"
      />
    </div>
  </div>
</template>