Adds eventhub to easily refresh the table when a button is clicked

4 files changed, 11 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
index 5df50e8172e..639f87de0cc 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-new */
 /* global Flash */
 import '~/flash';
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -53,6 +54,7 @@ export default {
       this.service.postAction(this.endpoint)
       .then(() => {
         this.isLoading = false;
+        eventHub.$emit('refreshPipelines');
       })
       .catch(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
index c7ed7193eb8..4bb2b048884 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -2,6 +2,7 @@
 /* global Flash */
 import '~/flash';
 import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
 
 export default {
   props: {
@@ -30,6 +31,7 @@ export default {
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
+        eventHub.$emit('refreshPipelines');
       })
       .catch(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/vue_pipelines_index/event_hub.js b/app/assets/javascripts/vue_pipelines_index/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 57d35f19840..7bd390d8dd3 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -3,8 +3,9 @@
 import '~/flash';
 import CommitPipelinesStoreWithTimeAgo from '../commit/pipelines/pipelines_store';
 import PipelinesService from './services/pipelines_service';
+import eventHub from './event_hub';
 
-window.Vue = require('vue');
+const Vue = window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
 require('../vue_shared/components/pipelines_table');
 
@@ -41,6 +42,8 @@ require('../vue_shared/components/pipelines_table');
       this.service = new PipelinesService(this.endpoint);
 
       this.fetchPipelines();
+
+      eventHub.$on('refreshPipelines', this.fetchPipelines);
     },
 
     beforeUpdate() {