1 files changed, 39 insertions, 2 deletions
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 5aab25e0348..bfc416da50b 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,6 +1,10 @@
+/* global Flash */
+
 import Vue from 'vue';
 import PipelinesMediator from './pipeline_details_mediatior';
 import pipelineGraph from './components/graph/graph_component.vue';
+import pipelineHeader from './components/header_component.vue';
+import eventHub from './event_hub';
 
 document.addEventListener('DOMContentLoaded', () => {
   const dataset = document.querySelector('.js-pipeline-details-vue').dataset;
@@ -9,7 +13,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   mediator.fetchPipeline();
 
-  const pipelineGraphApp = new Vue({
+  // eslint-disable-next-line
+  new Vue({
     el: '#js-pipeline-graph-vue',
     data() {
       return {
@@ -29,5 +34,37 @@ document.addEventListener('DOMContentLoaded', () => {
     },
   });
 
-  return pipelineGraphApp;
+  // eslint-disable-next-line
+  new Vue({
+    el: '#js-pipeline-header-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      pipelineHeader,
+    },
+    created() {
+      eventHub.$on('headerPostAction', this.postAction);
+    },
+    beforeDestroy() {
+      eventHub.$off('headerPostAction', this.postAction);
+    },
+    methods: {
+      postAction(action) {
+        this.mediator.service.postAction(action.path)
+          .then(() => this.mediator.refreshPipeline())
+          .catch(() => new Flash('An error occurred while making the request.'));
+      },
+    },
+    render(createElement) {
+      return createElement('pipeline-header', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          pipeline: this.mediator.store.state.pipeline,
+        },
+      });
+    },
+  });
 });