1 files changed, 41 insertions, 9 deletions
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 96983a19568..5404d647745 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -1,24 +1,56 @@
+/* global Flash */
+/* eslint-disable no-new, no-alert */
 /**
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
-const Vue = require('vue');
+import eventHub from '../event_hub';
 
-module.exports = Vue.component('stop-component', {
+export default {
   props: {
     stopUrl: {
       type: String,
       default: '',
     },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      if (confirm('Are you sure you want to stop this environment?')) {
+        this.isLoading = true;
+
+        this.service.postAction(this.retryUrl)
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshEnvironments');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.', 'alert');
+        });
+      }
+    },
   },
 
   template: `
-    <a class="btn stop-env-link"
-      :href="stopUrl"
-      data-confirm="Are you sure you want to stop this environment?"
-      data-method="post"
-      rel="nofollow">
+    <button type="button"
+      class="btn stop-env-link"
+      @click="onClick"
+      :disabled="isLoading"
+      title="Stop Environment">
       <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-    </a>
+      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    </button>
   `,
-});
+};