Adds rollback and stop component

5 files changed, 105 insertions, 12 deletions

diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
index 0fd91afb32a..b5d540ea934 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js.es6
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -14,7 +14,7 @@
     },
 
     template: `
-      <a class="btn external_url":href="external_url" :target="_blank">
+      <a class="btn external_url" :href="external_url" :target="_blank">
         <i class="fa fa-external-link"></i>
       </a>
     `,
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 06077c601b5..07ed282a16d 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -1,6 +1,9 @@
 /*= require vue_common_component/commit
 /*= require ./environment_actions
 /*= require ./environment_external_url
+/*= require ./environment_stop
+/*= require ./environment_rollback
+
 /* globals Vue, timeago */
 
 (() => {
@@ -24,6 +27,8 @@
       'commit-component': window.gl.CommitComponent,
       'actions-component': window.gl.environmentsList.ActionsComponent,
       'external-url-component': window.gl.environmentsList.ExternalUrlComponent,
+      'stop-component': window.gl.environmentsList.StopComponent,
+      'rollback-component': window.gl.environmentsList.RollbackComponent,
     },
 
     props: ['model', 'can-create-deployment', 'can-create-deployment', 'can-read-environment'],
@@ -248,11 +253,26 @@
         return undefined;
       },
 
+      retryUrl() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable.retry_url) {
+          return this.model.last_deployment.deployable.retry_url;
+        }
+        return undefined;
+      },
+
+      isLastDeployment() {
+        return this.model.last_deployment && this.model.last_deployment['last?'];
+      },
+
       canReadEnvironmentParsed() {
+        return true;
         return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
       },
 
       canCreateDeploymentParsed() {
+        return true;
         return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
       },
     },
@@ -295,7 +315,7 @@
 
     template: `
       <tr>
-        <td v-bind:class="rowClass">
+        <td v-bind:class="{ 'children-row': isChildren}" class="col-sm-2">
           <a v-if="!isFolder" class="environment-name" :href="model.environment_url">
             {{model.name}}
           </a>
@@ -313,7 +333,7 @@
           </span>
         </td>
 
-        <td class="deployment-column">
+        <td class="deployment-column col-sm-2">
           <span v-if="!isFolder && model.last_deployment && model.last_deployment.iid">
             #{{model.last_deployment.iid}}
 
@@ -329,7 +349,7 @@
           </span>
         </td>
 
-        <td>
+        <td class="col-sm-2">
           <a v-if="!isFolder && model.last_deployment && model.last_deployment.deployable"
             class="build-link"
             :href="model.last_deployment.deployable.build_url">
@@ -337,7 +357,7 @@
           </a>
         </td>
 
-        <td>
+        <td class="col-sm-2">
           <div v-if="!isFolder && model.last_deployment">
             <commit-component
               :tag="commitTag"
@@ -353,23 +373,38 @@
           </p>
         </td>
 
-        <td>
+        <td class="col-sm-1">
           <span v-if="!isFolder && model.last_deployment" class="environment-created-date-timeago">
             {{createdDate}}
           </span>
         </td>
 
-        <td class="hidden-xs">
+        <td class="hidden-xs col-sm-3">
           <div v-if="!isFolder">
-            <div v-if="hasManualActions && canCreateDeploymentParsed">
-              <actions-component :actions="manualActions"></actions-component>
+            <div v-if="hasManualActions && canCreateDeploymentParsed" class="inline">
+              <actions-component 
+                :actions="manualActions">
+              </actions-component>
             </div>
-            
-            <div v-if="model.external_url && canReadEnvironmentParsed">
+
+            <div v-if="model.external_url && canReadEnvironmentParsed" class="inline">
               <external-url-component 
                 :external_url="model.external_url">
               </external_url-component>
             </div>
+
+            <div v-if="isStoppable && canCreateDeploymentParsed" class="inline">
+              <stop-component 
+                :stop_url="model.environment_url">
+              </stop-component>
+            </div>
+
+            <div v-if="canRetry && canCreateDeploymentParsed" class="inline">
+              <rollback-component 
+                :is_last_deployment="isLastDeployment"
+                :retry_url="retryUrl">
+                </rollback-component>
+            </div>
           </div>
         </td>
       </tr>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js.es6 b/app/assets/javascripts/environments/components/environment_rollback.js.es6
new file mode 100644
index 00000000000..055b0efec56
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_rollback.js.es6
@@ -0,0 +1,31 @@
+/*= require vue
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  window.gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
+    props: {
+      retry_url: {
+        type: String,
+        default: '',
+      },
+      is_last_deployment: {
+        type: Boolean,
+        default: true,
+      },
+    },
+
+    template: `
+      <a class="btn" :href="retry_url" data-method="post" rel="nofollow">
+        <span v-if="is_last_deployment">
+          Re-deploy
+        </span>
+        <span v-else>
+          Rollback
+        </span>
+      </a>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6
new file mode 100644
index 00000000000..c15b669c9c1
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_stop.js.es6
@@ -0,0 +1,26 @@
+/*= require vue
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  window.gl.environmentsList.StopComponent = Vue.component('stop-component', {
+    props: {
+      stop_url: {
+        type: String,
+        default: '',
+      },
+    },
+
+    template: `
+      <a class="btn stop-env-link" 
+        :href="stop_url" 
+        method="post"
+        rel="nofollow", 
+        data-confirm="Are you sure you want to stop this environment?">
+        <i class="fa fa-stop stop-env-icon"></i>
+      </a>
+    `,
+  });
+})();
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 6ce10f1e7ef..e42fa63ba00 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -47,7 +47,8 @@
     color: $gl-dark-link-color;
   }
 
-  .stop-env-link {
+  .stop-env-link,
+  .external-url {
     color: $table-text-gray;
 
     .stop-env-icon {