Support manually stopping any environment from the UI

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    loadingIcon,
+    Icon,
+  },
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-    components: {
-      loadingIcon,
-      Icon,
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  computed: {
+    title() {
+      return 'Deploy to...';
     },
-    props: {
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-    },
-    data() {
-      return {
-        isLoading: false,
-      };
-    },
-    computed: {
-      title() {
-        return 'Deploy to...';
-      },
-    },
-    methods: {
-      onClickAction(endpoint) {
-        this.isLoading = true;
+  },
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
 
-        eventHub.$emit('postAction', endpoint);
-      },
+      eventHub.$emit('postAction', { endpoint });
+    },
 
-      isActionDisabled(action) {
-        if (action.playable === undefined) {
-          return false;
-        }
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
 
-        return !action.playable;
-      },
+      return !action.playable;
     },
-  };
+  },
+};
 </script>
 <template>
   <div
@@ -61,10 +61,7 @@
       data-toggle="dropdown"
     >
       <span>
-        <icon
-          :size="12"
-          name="play"
-        />
+        <icon name="play" />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -85,10 +82,6 @@
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
         >
-          <icon
-            :size="12"
-            name="play"
-          />
           <span>
             {{ action.name }}
           </span>

app/assets/javascripts/environments/components/environment_external_url.vue

 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import { s__ } from '../../locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import { s__ } from '../../locale';
 
-  /**
-  * Renders the external url link in environments table.
-  */
-  export default {
-    components: {
-      Icon,
+/**
+ * Renders the external url link in environments table.
+ */
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    externalUrl: {
+      type: String,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    title() {
+      return s__('Environments|Open live environment');
     },
-    props: {
-      externalUrl: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      title() {
-        return s__('Environments|Open');
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <a
@@ -37,9 +37,6 @@
     target="_blank"
     rel="noopener noreferrer nofollow"
   >
-    <icon
-      :size="12"
-      name="external-link"
-    />
+    <icon name="external-link" />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-  /**
-  * Renders the Monitoring (Metrics) link in environments table.
-  */
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+/**
+ * Renders the Monitoring (Metrics) link in environments table.
+ */
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    monitoringUrl: {
+      type: String,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    title() {
+      return 'Monitoring';
     },
-    props: {
-      monitoringUrl: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      title() {
-        return 'Monitoring';
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <a
@@ -35,9 +35,6 @@
     data-container="body"
     rel="noopener noreferrer nofollow"
   >
-    <icon
-      :size="12"
-      name="chart"
-    />
+    <icon name="chart" />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

 <script>
-  /**
-  * Renders Rollback or Re deploy button in environments table depending
-  * of the provided property `isLastDeployment`.
-  *
-  * Makes a post request when the button is clicked.
-  */
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-  export default {
-    components: {
-      loadingIcon,
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`.
+ *
+ * Makes a post request when the button is clicked.
+ */
+import { s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import eventHub from '../event_hub';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    Icon,
+    LoadingIcon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
     },
-    props: {
-      retryUrl: {
-        type: String,
-        default: '',
-      },
-
-      isLastDeployment: {
-        type: Boolean,
-        default: true,
-      },
+
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
     },
-    data() {
-      return {
-        isLoading: false,
-      };
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return this.isLastDeployment ? s__('Environments|Re-deploy to environment') : s__('Environments|Rollback environment');
     },
-    methods: {
-      onClick() {
-        this.isLoading = true;
+  },
+
+  methods: {
+    onClick() {
+      this.isLoading = true;
 
-        eventHub.$emit('postAction', this.retryUrl);
-      },
+      eventHub.$emit('postAction', { endpoint: this.retryUrl });
     },
-  };
+  },
+};
 </script>
 <template>
   <button
+    v-tooltip
     :disabled="isLoading"
+    :title="title"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
 
-    <span v-if="isLastDeployment">
-      {{ s__("Environments|Re-deploy") }}
-    </span>
-    <span v-else>
-      {{ s__("Environments|Rollback") }}
-    </span>
+    <icon
+      v-if="isLastDeployment"
+      name="repeat" />
+    <icon
+      v-else
+      name="redo"/>
 
     <loading-icon v-if="isLoading" />
   </button>

app/assets/javascripts/environments/components/environment_stop.vue

 <script>
-  /**
-  * Renders the stop "button" that allows stop an environment.
-  * Used in environments table.
-  */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
 
-  import $ from 'jquery';
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+import LoadingButton from '../../vue_shared/components/loading_button.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    components: {
-      loadingIcon,
-    },
+export default {
+  components: {
+    Icon,
+    LoadingButton,
+  },
 
-    directives: {
-      tooltip,
-    },
+  directives: {
+    tooltip,
+  },
 
-    props: {
-      stopUrl: {
-        type: String,
-        default: '',
-      },
+  props: {
+    environment: {
+      type: Object,
+      required: true,
     },
+  },
 
-    data() {
-      return {
-        isLoading: false,
-      };
-    },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
 
-    computed: {
-      title() {
-        return 'Stop';
-      },
+  computed: {
+    title() {
+      return s__('Environments|Stop environment');
     },
+  },
 
-    methods: {
-      onClick() {
-        // eslint-disable-next-line no-alert
-        if (window.confirm('Are you sure you want to stop this environment?')) {
-          this.isLoading = true;
+  mounted() {
+    eventHub.$on('stopEnvironment', this.onStopEnvironment);
+  },
 
-          $(this.$el).tooltip('dispose');
+  beforeDestroy() {
+    eventHub.$off('stopEnvironment', this.onStopEnvironment);
+  },
 
-          eventHub.$emit('postAction', this.stopUrl);
-        }
-      },
+  methods: {
+    onClick() {
+      $(this.$el).tooltip('dispose');
+      eventHub.$emit('requestStopEnvironment', this.environment);
+    },
+    onStopEnvironment(environment) {
+      if (this.environment.id === environment.id) {
+        this.isLoading = true;
+      }
     },
-  };
+  },
+};
 </script>
 <template>
-  <button
+  <loading-button
     v-tooltip
-    :disabled="isLoading"
+    :loading="isLoading"
     :title="title"
     :aria-label="title"
-    type="button"
-    class="btn stop-env-link d-none d-sm-none d-md-block"
+    container-class="btn btn-danger d-none d-sm-none d-md-block"
     data-container="body"
+    data-toggle="modal"
+    data-target="#stop-environment-modal"
     @click="onClick"
   >
-    <i
-      class="fa fa-stop stop-env-icon"
-      aria-hidden="true"
-    >
-    </i>
-    <loading-icon v-if="isLoading" />
-  </button>
+    <icon name="stop"/>
+  </loading-button>
 </template>

app/assets/javascripts/environments/components/environment_terminal_button.vue

 <script>
-  /**
-  * Renders a terminal button to open a web terminal.
-  * Used in environments table.
-  */
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    terminalPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    title() {
+      return 'Terminal';
     },
-    props: {
-      terminalPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-    },
-    computed: {
-      title() {
-        return 'Terminal';
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <a
@@ -36,9 +36,6 @@
     class="btn terminal-button d-none d-sm-none d-md-block"
     data-container="body"
   >
-    <icon
-      :size="12"
-      name="terminal"
-    />
+    <icon name="terminal" />
   </a>
 </template>

app/assets/javascripts/environments/components/environments_app.vue

@@ -5,10 +5,12 @@
   import eventHub from '../event_hub';
   import environmentsMixin from '../mixins/environments_mixin';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+  import StopEnvironmentModal from './stop_environment_modal.vue';
 
   export default {
     components: {
       emptyState,
+      StopEnvironmentModal,
     },
 
     mixins: [
@@ -90,6 +92,8 @@
 </script>
 <template>
   <div :class="cssContainerClass">
+    <stop-environment-modal :environment="environmentInStopModal" />
+
     <div class="top-area">
       <tabs
         :tabs="tabs"

app/assets/javascripts/environments/components/stop_environment_modal.vue

+<script>
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import eventHub from '../event_hub';
+
+export default {
+  id: 'stop-environment-modal',
+  name: 'StopEnvironmentModal',
+
+  components: {
+    GlModal,
+    LoadingButton,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    environment: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    noStopActionMessage() {
+      return sprintf(
+        s__(
+          `Environments|Note that this action will stop the environment,
+        but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment
+        due to no “stop environment action” being defined
+        in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`,
+        ),
+        {
+          emphasisStart: '<strong>',
+          emphasisEnd: '</strong>',
+          ciConfigLinkStart:
+            '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">',
+          ciConfigLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+
+  methods: {
+    onSubmit() {
+      eventHub.$emit('stopEnvironment', this.environment);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :id="$options.id"
+    :footer-primary-button-text="s__('Environments|Stop environment')"
+    footer-primary-button-variant="danger"
+    @submit="onSubmit"
+  >
+    <template slot="header">
+      <h4
+        class="modal-title d-flex mw-100"
+      >
+        Stopping
+        <span
+          v-tooltip
+          :title="environment.name"
+          class="text-truncate ml-1 mr-1 flex-fill"
+        >{{ environment.name }}</span>
+        ?
+      </h4>
+    </template>
+
+    <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
+
+    <div
+      v-if="!environment.has_stop_action"
+      class="warning_message"
+    >
+      <p v-html="noStopActionMessage"></p>
+      <a
+        href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ s__('Environments|Learn more about stopping environments') }}</a>
+    </div>
+  </gl-modal>
+</template>

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <script>
   import environmentsMixin from '../mixins/environments_mixin';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+  import StopEnvironmentModal from '../components/stop_environment_modal.vue';
 
   export default {
+    components: {
+      StopEnvironmentModal,
+    },
+
     mixins: [
       environmentsMixin,
       CIPaginationMixin,
     ],
+
     props: {
       endpoint: {
         type: String,
@@ -38,6 +44,8 @@
 </script>
 <template>
   <div :class="cssContainerClass">
+    <stop-environment-modal :environment="environmentInStopModal" />
+
     <div
       v-if="!isLoading"
       class="top-area"

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -40,6 +40,7 @@ export default {
       scope: getParameterByName('scope') || 'available',
       page: getParameterByName('page') || '1',
       requestData: {},
+      environmentInStopModal: {},
     };
   },
 
@@ -85,7 +86,7 @@ export default {
       Flash(s__('Environments|An error occurred while fetching the environments.'));
     },
 
-    postAction(endpoint) {
+    postAction({ endpoint, errorMessage }) {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
@@ -93,7 +94,7 @@ export default {
           .then(() => this.fetchEnvironments())
           .catch(() => {
             this.isLoading = false;
-            Flash(s__('Environments|An error occurred while making the request.'));
+            Flash(errorMessage || s__('Environments|An error occurred while making the request.'));
           });
       }
     },
@@ -106,6 +107,15 @@ export default {
         .catch(this.errorCallback);
     },
 
+    updateStopModal(environment) {
+      this.environmentInStopModal = environment;
+    },
+
+    stopEnvironment(environment) {
+      const endpoint = environment.stop_path;
+      const errorMessage = s__('Environments|An error occurred while stopping the environment, please try again');
+      this.postAction({ endpoint, errorMessage });
+    },
   },
 
   computed: {
@@ -162,9 +172,13 @@ export default {
     });
 
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('requestStopEnvironment', this.updateStopModal);
+    eventHub.$on('stopEnvironment', this.stopEnvironment);
   },
 
-  beforeDestroyed() {
-    eventHub.$off('postAction');
+  beforeDestroy() {
+    eventHub.$off('postAction', this.postAction);
+    eventHub.$off('requestStopEnvironment', this.updateStopModal);
+    eventHub.$off('stopEnvironment', this.stopEnvironment);
   },
 };

app/assets/javascripts/environments/services/environments_service.js

@@ -13,7 +13,7 @@ export default class EnvironmentsService {
 
   // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return axios.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {});
   }
 
   getFolderContent(folderUrl) {

app/assets/stylesheets/pages/environments.scss

@@ -23,7 +23,7 @@
     }
 
     .btn-group {
-      > a {
+      > .btn:not(.btn-danger) {
         color: $gl-text-color-secondary;
       }
 

app/controllers/projects/environments_controller.rb

@@ -2,7 +2,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   layout 'project'
   before_action :authorize_read_environment!
   before_action :authorize_create_environment!, only: [:new, :create]
-  before_action :authorize_create_deployment!, only: [:stop]
+  before_action :authorize_stop_environment!, only: [:stop]
   before_action :authorize_update_environment!, only: [:edit, :update]
   before_action :authorize_admin_environment!, only: [:terminal, :terminal_websocket_authorize]
   before_action :environment, only: [:show, :edit, :update, :stop, :terminal, :terminal_websocket_authorize, :metrics]
@@ -175,4 +175,8 @@ def environment_params
   def environment
     @environment ||= project.environments.find(params[:id])
   end
+
+  def authorize_stop_environment!
+    access_denied! unless can?(current_user, :stop_environment, environment)
+  end
 end

app/controllers/projects/merge_requests_controller.rb

@@ -192,7 +192,7 @@ def ci_environments_status
           deployment = environment.first_deployment_for(@merge_request.diff_head_sha)
 
           stop_url =
-            if environment.stop_action? && can?(current_user, :create_deployment, environment)
+            if can?(current_user, :stop_environment, environment)
               stop_project_environment_path(project, environment)
             end
 

app/policies/environment_policy.rb

 class EnvironmentPolicy < BasePolicy
   delegate { @subject.project }
 
-  condition(:stop_action_allowed) do
-    @subject.stop_action? && can?(:update_build, @subject.stop_action)
+  condition(:stop_with_deployment_allowed) do
+    @subject.stop_action? && can?(:create_deployment) && can?(:update_build, @subject.stop_action)
   end
 
-  rule { can?(:create_deployment) & stop_action_allowed }.enable :stop_environment
+  condition(:stop_with_update_allowed) do
+    !@subject.stop_action? && can?(:update_environment, @subject)
+  end
+
+  rule { stop_with_deployment_allowed | stop_with_update_allowed }.enable :stop_environment
 end

app/serializers/environment_entity.rb

@@ -7,7 +7,7 @@ class EnvironmentEntity < Grape::Entity
   expose :external_url
   expose :environment_type
   expose :last_deployment, using: DeploymentEntity
-  expose :stop_action?
+  expose :stop_action?, as: :has_stop_action
 
   expose :metrics_path, if: -> (environment, _) { environment.has_metrics? } do |environment|
     metrics_project_environment_path(environment.project, environment)
@@ -31,4 +31,14 @@ class EnvironmentEntity < Grape::Entity
   end
 
   expose :created_at, :updated_at
+
+  expose :can_stop do |environment|
+    environment.available? && can?(current_user, :stop_environment, environment)
+  end
+
+  private
+
+  def current_user
+    request.current_user
+  end
 end

app/views/projects/deployments/_actions.haml

@@ -3,13 +3,12 @@
   - if actions.present?
     .btn-group
       .dropdown
-        %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
-          = custom_icon('icon_play')
+        %button.dropdown.dropdown-new.btn.btn-default.has-tooltip{ type: 'button', 'data-toggle' => 'dropdown', title: s_('Environments|Deploy to...') }
+          = sprite_icon('play')
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-right
           - actions.each do |action|
             - next unless can?(current_user, :update_build, action)
             %li
-              = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow' do
-                = custom_icon('icon_play')
+              = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow', class: 'btn' do
                 %span= action.name.humanize

app/views/projects/deployments/_rollback.haml

 - if can?(current_user, :create_deployment, deployment) && deployment.deployable
-  = link_to [:retry, @project.namespace.becomes(Namespace), @project, deployment.deployable], method: :post, class: 'btn btn-build' do
+  - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment')
+  = link_to [:retry, @project.namespace.becomes(Namespace), @project, deployment.deployable], method: :post, class: 'btn btn-build has-tooltip', title: tooltip do
     - if deployment.last?
-      = _("Re-deploy")
+      = sprite_icon('repeat')
     - else
-      = _("Rollback")
+      = sprite_icon('redo')

app/views/projects/environments/_external_url.html.haml

 - if environment.external_url && can?(current_user, :read_environment, environment)
-  = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do
+  = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url has-tooltip', title: s_('Environments|Open live environment') do
     = sprite_icon('external-link')
     View deployment