Merge branch 'master' into menu-resize-hidemenu-resize-hide

6 files changed, 892 insertions, 0 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
new file mode 100644
index 00000000000..35e183a9086
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -0,0 +1,249 @@
+/* eslint-disable no-param-reassign */
+/* global Vue */
+/* global EnvironmentsService */
+
+//= require vue
+//= require vue-resource
+//= require_tree ../services/
+//= require ./environment_item
+
+(() => {
+  window.gl = window.gl || {};
+
+  /**
+   * Given the visibility prop provided by the url query parameter and which
+   * changes according to the active tab we need to filter which environments
+   * should be visible.
+   *
+   * The environments array is a recursive tree structure and we need to filter
+   * both root level environments and children environments.
+   *
+   * In order to acomplish that, both `filterState` and `filterEnvironmnetsByState`
+   * functions work together.
+   * The first one works as the filter that verifies if the given environment matches
+   * the given state.
+   * The second guarantees both root level and children elements are filtered as well.
+   */
+
+  const filterState = state => environment => environment.state === state && environment;
+  /**
+   * Given the filter function and the array of environments will return only
+   * the environments that match the state provided to the filter function.
+   *
+   * @param {Function} fn
+   * @param {Array} array
+   * @return {Array}
+   */
+  const filterEnvironmnetsByState = (fn, arr) => arr.map((item) => {
+    if (item.children) {
+      const filteredChildren = filterEnvironmnetsByState(fn, item.children).filter(Boolean);
+      if (filteredChildren.length) {
+        item.children = filteredChildren;
+        return item;
+      }
+    }
+    return fn(item);
+  }).filter(Boolean);
+
+  window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
+    props: {
+      store: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+
+    components: {
+      'environment-item': window.gl.environmentsList.EnvironmentItem,
+    },
+
+    data() {
+      const environmentsData = document.querySelector('#environments-list-view').dataset;
+
+      return {
+        state: this.store.state,
+        visibility: 'available',
+        isLoading: false,
+        cssContainerClass: environmentsData.cssClass,
+        endpoint: environmentsData.environmentsDataEndpoint,
+        canCreateDeployment: environmentsData.canCreateDeployment,
+        canReadEnvironment: environmentsData.canReadEnvironment,
+        canCreateEnvironment: environmentsData.canCreateEnvironment,
+        projectEnvironmentsPath: environmentsData.projectEnvironmentsPath,
+        projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
+        newEnvironmentPath: environmentsData.newEnvironmentPath,
+        helpPagePath: environmentsData.helpPagePath,
+      };
+    },
+
+    computed: {
+      filteredEnvironments() {
+        return filterEnvironmnetsByState(filterState(this.visibility), this.state.environments);
+      },
+
+      scope() {
+        return this.$options.getQueryParameter('scope');
+      },
+
+      canReadEnvironmentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
+      },
+
+      canCreateDeploymentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
+      },
+
+      canCreateEnvironmentParsed() {
+        return this.$options.convertPermissionToBoolean(this.canCreateEnvironment);
+      },
+    },
+
+    /**
+     * Fetches all the environmnets and stores them.
+     * Toggles loading property.
+     */
+    created() {
+      gl.environmentsService = new EnvironmentsService(this.endpoint);
+
+      const scope = this.$options.getQueryParameter('scope');
+      if (scope) {
+        this.visibility = scope;
+      }
+
+      this.isLoading = true;
+
+      return gl.environmentsService.all()
+        .then(resp => resp.json())
+        .then((json) => {
+          this.store.storeEnvironments(json);
+          this.isLoading = false;
+        });
+    },
+
+    /**
+     * Transforms the url parameter into an object and
+     * returns the one requested.
+     *
+     * @param  {String} param
+     * @returns {String}       The value of the requested parameter.
+     */
+    getQueryParameter(parameter) {
+      return window.location.search.substring(1).split('&').reduce((acc, param) => {
+        const paramSplited = param.split('=');
+        acc[paramSplited[0]] = paramSplited[1];
+        return acc;
+      }, {})[parameter];
+    },
+
+    /**
+     * Converts permission provided as strings to booleans.
+     * @param  {String} string
+     * @returns {Boolean}
+     */
+    convertPermissionToBoolean(string) {
+      return string === 'true';
+    },
+
+    methods: {
+      toggleRow(model) {
+        return this.store.toggleFolder(model.name);
+      },
+    },
+
+    template: `
+      <div :class="cssContainerClass">
+        <div class="top-area">
+          <ul v-if="!isLoading" class="nav-links">
+            <li v-bind:class="{ 'active': scope === undefined }">
+              <a :href="projectEnvironmentsPath">
+                Available
+                <span class="badge js-available-environments-count">
+                  {{state.availableCounter}}
+                </span>
+              </a>
+            </li>
+            <li v-bind:class="{ 'active' : scope === 'stopped' }">
+              <a :href="projectStoppedEnvironmentsPath">
+                Stopped
+                <span class="badge js-stopped-environments-count">
+                  {{state.stoppedCounter}}
+                </span>
+              </a>
+            </li>
+          </ul>
+          <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
+            <a :href="newEnvironmentPath" class="btn btn-create">
+              New environment
+            </a>
+          </div>
+        </div>
+
+        <div class="environments-container">
+          <div class="environments-list-loading text-center" v-if="isLoading">
+            <i class="fa fa-spinner spin"></i>
+          </div>
+
+          <div class="blank-state blank-state-no-icon"
+            v-if="!isLoading && state.environments.length === 0">
+            <h2 class="blank-state-title">
+              You don't have any environments right now.
+            </h2>
+            <p class="blank-state-text">
+              Environments are places where code gets deployed, such as staging or production.
+              <br />
+              <a :href="helpPagePath">
+                Read more about environments
+              </a>
+            </p>
+
+            <a
+              v-if="canCreateEnvironmentParsed"
+              :href="newEnvironmentPath"
+              class="btn btn-create">
+              New Environment
+            </a>
+          </div>
+
+          <div class="table-holder"
+            v-if="!isLoading && state.environments.length > 0">
+            <table class="table ci-table environments">
+              <thead>
+                <tr>
+                  <th class="environments-name">Environment</th>
+                  <th class="environments-deploy">Last deployment</th>
+                  <th class="environments-build">Build</th>
+                  <th class="environments-commit">Commit</th>
+                  <th class="environments-date"></th>
+                  <th class="hidden-xs environments-actions"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <template v-for="model in filteredEnvironments"
+                  v-bind:model="model">
+
+                  <tr
+                    is="environment-item"
+                    :model="model"
+                    :toggleRow="toggleRow.bind(model)"
+                    :can-create-deployment="canCreateDeploymentParsed"
+                    :can-read-environment="canReadEnvironmentParsed"></tr>
+
+                  <tr v-if="model.isOpen && model.children && model.children.length > 0"
+                    is="environment-item"
+                    v-for="children in model.children"
+                    :model="children"
+                    :toggleRow="toggleRow.bind(children)"
+                    :can-create-deployment="canCreateDeploymentParsed"
+                    :can-read-environment="canReadEnvironmentParsed">
+                    </tr>
+
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
new file mode 100644
index 00000000000..d149a446e0b
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -0,0 +1,67 @@
+/*= require vue */
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  window.gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
+    props: {
+      actions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+
+    /**
+     * Appends the svg icon that were render in the index page.
+     * In order to reuse the svg instead of copy and paste in this template
+     * we need to render it outside this component using =custom_icon partial.
+     *
+     * TODO: Remove this when webpack is merged.
+     *
+     */
+    mounted() {
+      const playIcon = document.querySelector('.play-icon-svg.hidden svg');
+
+      const dropdownContainer = this.$el.querySelector('.dropdown-play-icon-container');
+      const actionContainers = this.$el.querySelectorAll('.action-play-icon-container');
+      // Phantomjs does not have support to iterate a nodelist.
+      const actionsArray = [].slice.call(actionContainers);
+
+      if (playIcon && actionsArray && dropdownContainer) {
+        dropdownContainer.appendChild(playIcon.cloneNode(true));
+
+        actionsArray.forEach((element) => {
+          element.appendChild(playIcon.cloneNode(true));
+        });
+      }
+    },
+
+    template: `
+      <div class="inline">
+        <div class="dropdown">
+          <a class="dropdown-new btn btn-default" data-toggle="dropdown">
+            <span class="dropdown-play-icon-container"></span>
+            <i class="fa fa-caret-down"></i>
+          </a>
+
+          <ul class="dropdown-menu dropdown-menu-align-right">
+            <li v-for="action in actions">
+              <a :href="action.play_path"
+                data-method="post"
+                rel="nofollow"
+                class="js-manual-action-link">
+                <span class="action-play-icon-container"></span>
+                <span>
+                  {{action.name}}
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
new file mode 100644
index 00000000000..79cd5ded5bd
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -0,0 +1,22 @@
+/*= require vue */
+/* global Vue */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
+    props: {
+      external_url: {
+        type: String,
+        default: '',
+      },
+    },
+
+    template: `
+      <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
new file mode 100644
index 00000000000..07f49cce3dc
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -0,0 +1,497 @@
+/* global Vue */
+/* global timeago */
+
+/*= require timeago */
+/*= require lib/utils/text_utility */
+/*= require vue_common_component/commit */
+/*= require ./environment_actions */
+/*= require ./environment_external_url */
+/*= require ./environment_stop */
+/*= require ./environment_rollback */
+
+(() => {
+  /**
+   * Envrionment Item Component
+   *
+   * Used in a hierarchical structure to show folders with children
+   * in a table.
+   * Recursive component based on [Tree View](https://vuejs.org/examples/tree-view.html)
+   *
+   * See this [issue](https://gitlab.com/gitlab-org/gitlab-ce/issues/22539)
+   * for more information.15
+   */
+
+  window.gl = window.gl || {};
+  window.gl.environmentsList = window.gl.environmentsList || {};
+
+  gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
+
+    components: {
+      '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: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+
+      toggleRow: {
+        type: Function,
+        required: false,
+      },
+
+      canCreateDeployment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      canReadEnvironment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+
+    data() {
+      return {
+        rowClass: {
+          'children-row': this.model['vue-isChildren'],
+        },
+      };
+    },
+
+    computed: {
+
+      /**
+       * If an item has a `children` entry it means it is a folder.
+       * Folder items have different behaviours - it is possible to toggle
+       * them and show their children.
+       *
+       * @returns {Boolean|Undefined}
+       */
+      isFolder() {
+        return this.model.children && this.model.children.length > 0;
+      },
+
+      /**
+       * If an item is inside a folder structure will return true.
+       * Used for css purposes.
+       *
+       * @returns {Boolean|undefined}
+       */
+      isChildren() {
+        return this.model['vue-isChildren'];
+      },
+
+      /**
+       * Counts the number of environments in each folder.
+       * Used to show a badge with the counter.
+       *
+       * @returns {Number|Undefined}  The number of environments for the current folder.
+       */
+      childrenCounter() {
+        return this.model.children && this.model.children.length;
+      },
+
+      /**
+       * Verifies if `last_deployment` key exists in the current Envrionment.
+       * This key is required to render most of the html - this method works has
+       * an helper.
+       *
+       * @returns {Boolean}
+       */
+      hasLastDeploymentKey() {
+        if (this.model.last_deployment &&
+          !this.$options.isObjectEmpty(this.model.last_deployment)) {
+          return true;
+        }
+        return false;
+      },
+
+      /**
+       * Verifies is the given environment has manual actions.
+       * Used to verify if we should render them or nor.
+       *
+       * @returns {Boolean|Undefined}
+       */
+      hasManualActions() {
+        return this.model.last_deployment && this.model.last_deployment.manual_actions &&
+          this.model.last_deployment.manual_actions.length > 0;
+      },
+
+      /**
+       * Returns the value of the `stoppable?` key provided in the response.
+       *
+       * @returns {Boolean}
+       */
+      isStoppable() {
+        return this.model['stoppable?'];
+      },
+
+      /**
+       * Verifies if the `deployable` key is present in `last_deployment` key.
+       * Used to verify whether we should or not render the rollback partial.
+       *
+       * @returns {Boolean|Undefined}
+       */
+      canRetry() {
+        return this.hasLastDeploymentKey &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable;
+      },
+
+      /**
+       * Human readable date.
+       *
+       * @returns {String}
+       */
+      createdDate() {
+        const timeagoInstance = new timeago(); // eslint-disable-line
+
+        return timeagoInstance.format(this.model.created_at);
+      },
+
+      /**
+       * Returns the manual actions with the name parsed.
+       *
+       * @returns {Array.<Object>|Undefined}
+       */
+      manualActions() {
+        if (this.hasManualActions) {
+          return this.model.last_deployment.manual_actions.map((action) => {
+            const parsedAction = {
+              name: gl.text.humanize(action.name),
+              play_path: action.play_path,
+            };
+            return parsedAction;
+          });
+        }
+        return [];
+      },
+
+      /**
+       * Builds the string used in the user image alt attribute.
+       *
+       * @returns {String}
+       */
+      userImageAltDescription() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.user &&
+          this.model.last_deployment.user.username) {
+          return `${this.model.last_deployment.user.username}'s avatar'`;
+        }
+        return '';
+      },
+
+      /**
+       * If provided, returns the commit tag.
+       *
+       * @returns {String|Undefined}
+       */
+      commitTag() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.tag) {
+          return this.model.last_deployment.tag;
+        }
+        return undefined;
+      },
+
+      /**
+       * If provided, returns the commit ref.
+       *
+       * @returns {Object|Undefined}
+       */
+      commitRef() {
+        if (this.model.last_deployment && this.model.last_deployment.ref) {
+          return this.model.last_deployment.ref;
+        }
+        return undefined;
+      },
+
+      /**
+       * If provided, returns the commit url.
+       *
+       * @returns {String|Undefined}
+       */
+      commitUrl() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.commit_path) {
+          return this.model.last_deployment.commit.commit_path;
+        }
+        return undefined;
+      },
+
+      /**
+       * If provided, returns the commit short sha.
+       *
+       * @returns {String|Undefined}
+       */
+      commitShortSha() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.short_id) {
+          return this.model.last_deployment.commit.short_id;
+        }
+        return undefined;
+      },
+
+      /**
+       * If provided, returns the commit title.
+       *
+       * @returns {String|Undefined}
+       */
+      commitTitle() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.title) {
+          return this.model.last_deployment.commit.title;
+        }
+        return undefined;
+      },
+
+      /**
+       * If provided, returns the commit tag.
+       *
+       * @returns {Object|Undefined}
+       */
+      commitAuthor() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.author) {
+          return this.model.last_deployment.commit.author;
+        }
+
+        return undefined;
+      },
+
+      /**
+       * Verifies if the `retry_path` key is present and returns its value.
+       *
+       * @returns {String|Undefined}
+       */
+      retryUrl() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable.retry_path) {
+          return this.model.last_deployment.deployable.retry_path;
+        }
+        return undefined;
+      },
+
+      /**
+       * Verifies if the `last?` key is present and returns its value.
+       *
+       * @returns {Boolean|Undefined}
+       */
+      isLastDeployment() {
+        return this.model.last_deployment && this.model.last_deployment['last?'];
+      },
+
+      /**
+       * Builds the name of the builds needed to display both the name and the id.
+       *
+       * @returns {String}
+       */
+      buildName() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.deployable) {
+          return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
+        }
+        return '';
+      },
+
+      /**
+       * Builds the needed string to show the internal id.
+       *
+       * @returns {String}
+       */
+      deploymentInternalId() {
+        if (this.model.last_deployment &&
+          this.model.last_deployment.iid) {
+          return `#${this.model.last_deployment.iid}`;
+        }
+        return '';
+      },
+
+      /**
+       * Verifies if the user object is present under last_deployment object.
+       *
+       * @returns {Boolean}
+       */
+      deploymentHasUser() {
+        return !this.$options.isObjectEmpty(this.model.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.last_deployment.user);
+      },
+
+      /**
+       * Returns the user object nested with the last_deployment object.
+       * Used to render the template.
+       *
+       * @returns {Object}
+       */
+      deploymentUser() {
+        if (!this.$options.isObjectEmpty(this.model.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.last_deployment.user)) {
+          return this.model.last_deployment.user;
+        }
+        return {};
+      },
+
+      /**
+       * Verifies if the build name column should be rendered by verifing
+       * if all the information needed is present
+       * and if the environment is not a folder.
+       *
+       * @returns {Boolean}
+       */
+      shouldRenderBuildName() {
+        return !this.isFolder &&
+          !this.$options.isObjectEmpty(this.model.last_deployment) &&
+          !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+      },
+
+      /**
+       * Verifies if deplyment internal ID should be rendered by verifing
+       * if all the information needed is present
+       * and if the environment is not a folder.
+       *
+       * @returns {Boolean}
+       */
+      shouldRenderDeploymentID() {
+        return !this.isFolder &&
+          !this.$options.isObjectEmpty(this.model.last_deployment) &&
+          this.model.last_deployment.iid !== undefined;
+      },
+    },
+
+    /**
+     * Helper to verify if certain given object are empty.
+     * Should be replaced by lodash _.isEmpty - https://lodash.com/docs/4.17.2#isEmpty
+     * @param  {Object} object
+     * @returns {Bollean}
+     */
+    isObjectEmpty(object) {
+      for (const key in object) { // eslint-disable-line
+        if (hasOwnProperty.call(object, key)) {
+          return false;
+        }
+      }
+      return true;
+    },
+
+    template: `
+      <tr>
+        <td v-bind:class="{ 'children-row': isChildren}">
+          <a v-if="!isFolder"
+            class="environment-name"
+            :href="model.environment_path">
+            {{model.name}}
+          </a>
+          <span v-else v-on:click="toggleRow(model)" class="folder-name">
+            <span class="folder-icon">
+              <i v-show="model.isOpen" class="fa fa-caret-down"></i>
+              <i v-show="!model.isOpen" class="fa fa-caret-right"></i>
+            </span>
+
+            <span>
+              {{model.name}}
+            </span>
+
+            <span class="badge">
+              {{childrenCounter}}
+            </span>
+          </span>
+        </td>
+
+        <td class="deployment-column">
+          <span v-if="shouldRenderDeploymentID">
+            {{deploymentInternalId}}
+          </span>
+
+          <span v-if="!isFolder && deploymentHasUser">
+            by
+            <a :href="deploymentUser.web_url" class="js-deploy-user-container">
+              <img class="avatar has-tooltip s20"
+                :src="deploymentUser.avatar_url"
+                :alt="userImageAltDescription"
+                :title="deploymentUser.username" />
+            </a>
+          </span>
+        </td>
+
+        <td>
+          <a v-if="shouldRenderBuildName"
+            class="build-link"
+            :href="model.last_deployment.deployable.build_path">
+            {{buildName}}
+          </a>
+        </td>
+
+        <td>
+          <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
+            <commit-component
+              :tag="commitTag"
+              :ref="commitRef"
+              :commit_url="commitUrl"
+              :short_sha="commitShortSha"
+              :title="commitTitle"
+              :author="commitAuthor">
+            </commit-component>
+          </div>
+          <p v-if="!isFolder && !hasLastDeploymentKey" class="commit-title">
+            No deployments yet
+          </p>
+        </td>
+
+        <td>
+          <span
+            v-if="!isFolder && model.last_deployment"
+            class="environment-created-date-timeago">
+            {{createdDate}}
+          </span>
+        </td>
+
+        <td class="hidden-xs">
+          <div v-if="!isFolder">
+            <div v-if="hasManualActions && canCreateDeployment"
+              class="inline js-manual-actions-container">
+              <actions-component
+                :actions="manualActions">
+              </actions-component>
+            </div>
+
+            <div v-if="model.external_url && canReadEnvironment"
+              class="inline js-external-url-container">
+              <external-url-component
+                :external_url="model.external_url">
+              </external_url-component>
+            </div>
+
+            <div v-if="isStoppable && canCreateDeployment"
+              class="inline js-stop-component-container">
+              <stop-component
+                :stop_url="model.stop_path">
+              </stop-component>
+            </div>
+
+            <div v-if="canRetry && canCreateDeployment"
+              class="inline js-rollback-component-container">
+              <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..55e5c826e07
--- /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..e6d66a0148c
--- /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"
+        data-confirm="Are you sure you want to stop this environment?"
+        data-method="post"
+        rel="nofollow">
+        <i class="fa fa-stop stop-env-icon"></i>
+      </a>
+    `,
+  });
+})();