Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

1 files changed, 106 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
new file mode 100644
index 00000000000..d98e3aad054
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -0,0 +1,106 @@
+<script>
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { DEFAULT, LOAD_FAILURE } from '../../constants';
+import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
+import PipelineGraph from './graph_component.vue';
+import { unwrapPipelineData, toggleQueryPollingByVisibility } from './utils';
+
+export default {
+  name: 'PipelineGraphWrapper',
+  components: {
+    GlAlert,
+    GlLoadingIcon,
+    PipelineGraph,
+  },
+  inject: {
+    pipelineIid: {
+      default: '',
+    },
+    pipelineProjectPath: {
+      default: '',
+    },
+  },
+  data() {
+    return {
+      pipeline: null,
+      alertType: null,
+      showAlert: false,
+    };
+  },
+  errorTexts: {
+    [LOAD_FAILURE]: __('We are currently unable to fetch data for this pipeline.'),
+    [DEFAULT]: __('An unknown error occurred while loading this graph.'),
+  },
+  apollo: {
+    pipeline: {
+      query: getPipelineDetails,
+      pollInterval: 10000,
+      variables() {
+        return {
+          projectPath: this.pipelineProjectPath,
+          iid: this.pipelineIid,
+        };
+      },
+      update(data) {
+        return unwrapPipelineData(this.pipelineProjectPath, data);
+      },
+      error() {
+        this.reportFailure(LOAD_FAILURE);
+      },
+    },
+  },
+  computed: {
+    alert() {
+      switch (this.alertType) {
+        case LOAD_FAILURE:
+          return {
+            text: this.$options.errorTexts[LOAD_FAILURE],
+            variant: 'danger',
+          };
+        default:
+          return {
+            text: this.$options.errorTexts[DEFAULT],
+            variant: 'danger',
+          };
+      }
+    },
+    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);
+  },
+  methods: {
+    hideAlert() {
+      this.showAlert = false;
+    },
+    refreshPipelineGraph() {
+      this.$apollo.queries.pipeline.refetch();
+    },
+    reportFailure(type) {
+      this.showAlert = true;
+      this.failureType = type;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="showAlert" :variant="alert.variant" @dismiss="hideAlert">
+      {{ alert.text }}
+    </gl-alert>
+    <gl-loading-icon v-if="showLoadingIcon" class="gl-mx-auto gl-my-4" size="lg" />
+    <pipeline-graph
+      v-if="pipeline"
+      :pipeline="pipeline"
+      @error="reportFailure"
+      @refreshPipelineGraph="refreshPipelineGraph"
+    />
+  </div>
+</template>