Creates a mediator for pipeline details vue in order to mount several vue apps with the same data

5 files changed, 101 insertions, 65 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 14c98847d93..77cbaeb43ef 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,68 +1,32 @@
 <script>
-  /* global Flash */
-  import Visibility from 'visibilityjs';
-  import Poll from '../../../lib/utils/poll';
-  import PipelineService from '../../services/pipeline_service';
-  import PipelineStore from '../../stores/pipeline_store';
   import stageColumnComponent from './stage_column_component.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import '../../../flash';
 
   export default {
+    props: {
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+      pipeline: {
+        type: Object,
+        required: true,
+      },
+    },
+
     components: {
       stageColumnComponent,
       loadingIcon,
     },
 
-    data() {
-      const DOMdata = document.getElementById('js-pipeline-graph-vue').dataset;
-      const store = new PipelineStore();
-
-      return {
-        isLoading: false,
-        endpoint: DOMdata.endpoint,
-        store,
-        state: store.state,
-      };
-    },
-
-    created() {
-      this.service = new PipelineService(this.endpoint);
-
-      const poll = new Poll({
-        resource: this.service,
-        method: 'getPipeline',
-        successCallback: this.successCallback,
-        errorCallback: this.errorCallback,
-      });
-
-      if (!Visibility.hidden()) {
-        this.isLoading = true;
-        poll.makeRequest();
-      }
-
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          poll.restart();
-        } else {
-          poll.stop();
-        }
-      });
+    computed: {
+      graph() {
+        return this.pipeline.details && this.pipeline.details.stages;
+      },
     },
 
     methods: {
-      successCallback(response) {
-        const data = response.json();
-
-        this.isLoading = false;
-        this.store.storeGraph(data.details.stages);
-      },
-
-      errorCallback() {
-        this.isLoading = false;
-        return new Flash('An error occurred while fetching the pipeline.');
-      },
-
       capitalizeStageName(name) {
         return name.charAt(0).toUpperCase() + name.slice(1);
       },
@@ -101,7 +65,7 @@
         v-if="!isLoading"
         class="stage-column-list">
         <stage-column-component
-          v-for="(stage, index) in state.graph"
+          v-for="(stage, index) in graph"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
           :key="stage.name"
diff --git a/app/assets/javascripts/pipelines/graph_bundle.js b/app/assets/javascripts/pipelines/graph_bundle.js
deleted file mode 100644
index b7a6b5d8479..00000000000
--- a/app/assets/javascripts/pipelines/graph_bundle.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import pipelineGraph from './components/graph/graph_component.vue';
-
-document.addEventListener('DOMContentLoaded', () => new Vue({
-  el: '#js-pipeline-graph-vue',
-  components: {
-    pipelineGraph,
-  },
-  render: createElement => createElement('pipeline-graph'),
-}));
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
new file mode 100644
index 00000000000..03b399cc726
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import PipelinesMediator from './pipeline_details_mediatior';
+import pipelineGraph from './components/graph/graph_component.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
+
+  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+
+  mediator.fetchPipeline();
+
+  const pipelineGraphApp = new Vue({
+    el: '#js-pipeline-graph-vue',
+    data: {
+      mediator,
+    },
+    components: {
+      pipelineGraph,
+    },
+    render(createElement) {
+      return createElement('pipeline-graph', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          pipeline: this.mediator.store.state.pipeline,
+        },
+      });
+    },
+  });
+
+  return pipelineGraphApp;
+});
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
new file mode 100644
index 00000000000..5e0c60eb796
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -0,0 +1,51 @@
+/* global Flash */
+
+import Visibility from 'visibilityjs';
+import Poll from '../lib/utils/poll';
+import PipelineStore from './stores/pipeline_store';
+import PipelineService from './services/pipeline_service';
+
+export default class pipelinesMediator {
+  constructor(options) {
+    this.options = options || {};
+    this.store = new PipelineStore();
+    this.service = new PipelineService(options.endpoint);
+
+    this.state = {};
+    this.state.isLoading = false;
+  }
+
+  fetchPipeline() {
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getPipeline',
+      successCallback: this.successCallback.bind(this),
+      errorCallback: this.errorCallback.bind(this),
+    });
+
+    if (!Visibility.hidden()) {
+      this.state.isLoading = true;
+      this.poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+  }
+
+  successCallback(response) {
+    const data = response.json();
+
+    this.state.isLoading = false;
+    this.store.storePipeline(data);
+  }
+
+  errorCallback() {
+    this.state.isLoading = false;
+    return new Flash('An error occurred while fetching the pipeline.');
+  }
+}
diff --git a/app/assets/javascripts/pipelines/stores/pipeline_store.js b/app/assets/javascripts/pipelines/stores/pipeline_store.js
index 86ab50d8f1e..052e34a8aef 100644
--- a/app/assets/javascripts/pipelines/stores/pipeline_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipeline_store.js
@@ -2,10 +2,10 @@ export default class PipelineStore {
   constructor() {
     this.state = {};
 
-    this.state.graph = [];
+    this.state.pipeline = {};
   }
 
-  storeGraph(graph = []) {
-    this.state.graph = graph;
+  storePipeline(pipeline = {}) {
+    this.state.pipeline = pipeline;
   }
 }