From 4fe43e43bd30e63064942390dd2747c9c34bb016 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 19 Apr 2017 14:43:20 +0100
Subject: Convert vue components into vue files

---
 .../environments/components/environment.js         | 215 --------
 .../environments/components/environment.vue        | 226 ++++++++
 .../environments/components/environment_actions.js |  97 ----
 .../components/environment_actions.vue             | 100 ++++
 .../components/environment_external_url.js         |  30 --
 .../components/environment_external_url.vue        |  37 ++
 .../environments/components/environment_item.js    | 550 --------------------
 .../environments/components/environment_item.vue   | 574 +++++++++++++++++++++
 .../components/environment_monitoring.js           |  31 --
 .../components/environment_monitoring.vue          |  38 ++
 .../components/environment_rollback.js             |  67 ---
 .../components/environment_rollback.vue            |  72 +++
 .../environments/components/environment_stop.js    |  64 ---
 .../environments/components/environment_stop.vue   |  73 +++
 .../components/environment_terminal_button.js      |  37 --
 .../components/environment_terminal_button.vue     |  43 ++
 .../environments/components/environments_table.js  |  97 ----
 .../environments/components/environments_table.vue | 120 +++++
 .../environments/environments_bundle.js            |  17 +-
 .../folder/environments_folder_bundle.js           |  17 +-
 .../folder/environments_folder_view.js             | 169 ------
 .../folder/environments_folder_view.vue            | 169 ++++++
 app/views/projects/environments/folder.html.haml   |   2 +-
 app/views/projects/environments/index.html.haml    |   2 +-
 .../environments/environment_actions_spec.js       |   2 +-
 .../environments/environment_external_url_spec.js  |   2 +-
 .../environments/environment_item_spec.js          |   2 +-
 .../environments/environment_monitoring_spec.js    |   2 +-
 .../environments/environment_rollback_spec.js      |   2 +-
 spec/javascripts/environments/environment_spec.js  |  16 +-
 .../environments/environment_stop_spec.js          |   2 +-
 .../environments/environment_table_spec.js         |   2 +-
 .../environment_terminal_button_spec.js            |   2 +-
 .../folder/environments_folder_view_spec.js        |   8 +-
 .../fixtures/environments/environments.html.haml   |   2 +-
 .../environments_folder_view.html.haml             |   2 +-
 36 files changed, 1494 insertions(+), 1397 deletions(-)
 delete mode 100644 app/assets/javascripts/environments/components/environment.js
 create mode 100644 app/assets/javascripts/environments/components/environment.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_actions.js
 create mode 100644 app/assets/javascripts/environments/components/environment_actions.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_external_url.js
 create mode 100644 app/assets/javascripts/environments/components/environment_external_url.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_item.js
 create mode 100644 app/assets/javascripts/environments/components/environment_item.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_monitoring.js
 create mode 100644 app/assets/javascripts/environments/components/environment_monitoring.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_rollback.js
 create mode 100644 app/assets/javascripts/environments/components/environment_rollback.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_stop.js
 create mode 100644 app/assets/javascripts/environments/components/environment_stop.vue
 delete mode 100644 app/assets/javascripts/environments/components/environment_terminal_button.js
 create mode 100644 app/assets/javascripts/environments/components/environment_terminal_button.vue
 delete mode 100644 app/assets/javascripts/environments/components/environments_table.js
 create mode 100644 app/assets/javascripts/environments/components/environments_table.vue
 delete mode 100644 app/assets/javascripts/environments/folder/environments_folder_view.js
 create mode 100644 app/assets/javascripts/environments/folder/environments_folder_view.vue

diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
deleted file mode 100644
index 0518422e475..00000000000
--- a/app/assets/javascripts/environments/components/environment.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/* eslint-disable no-new */
-/* global Flash */
-import Vue from 'vue';
-import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table';
-import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
-import '../../lib/utils/common_utils';
-import eventHub from '../event_hub';
-
-export default Vue.component('environment-component', {
-
-  components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
-  },
-
-  data() {
-    const environmentsData = document.querySelector('#environments-list-view').dataset;
-    const store = new EnvironmentsStore();
-
-    return {
-      store,
-      state: store.state,
-      visibility: 'available',
-      isLoading: false,
-      isLoadingFolderContent: 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,
-
-      // Pagination Properties,
-      paginationInformation: {},
-      pageNumber: 1,
-    };
-  },
-
-  computed: {
-    scope() {
-      return gl.utils.getParameterByName('scope');
-    },
-
-    canReadEnvironmentParsed() {
-      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
-    },
-
-    canCreateDeploymentParsed() {
-      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
-    },
-
-    canCreateEnvironmentParsed() {
-      return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
-    },
-  },
-
-  /**
-   * Fetches all the environments and stores them.
-   * Toggles loading property.
-   */
-  created() {
-    this.service = new EnvironmentsService(this.endpoint);
-
-    this.fetchEnvironments();
-
-    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
-    eventHub.$on('toggleFolder', this.toggleFolder);
-  },
-
-  beforeDestroyed() {
-    eventHub.$off('refreshEnvironments');
-    eventHub.$off('toggleFolder');
-  },
-
-  methods: {
-    toggleFolder(folder, folderUrl) {
-      this.store.toggleFolder(folder);
-
-      if (!folder.isOpen) {
-        this.fetchChildEnvironments(folder, folderUrl);
-      }
-    },
-
-    /**
-     * Will change the page number and update the URL.
-     *
-     * @param  {Number} pageNumber desired page to go to.
-     * @return {String}
-     */
-    changePage(pageNumber) {
-      const param = gl.utils.setParamInURL('page', pageNumber);
-
-      gl.utils.visitUrl(param);
-      return param;
-    },
-
-    fetchEnvironments() {
-      const scope = gl.utils.getParameterByName('scope') || this.visibility;
-      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-      this.isLoading = true;
-
-      return this.service.get(scope, pageNumber)
-        .then(resp => ({
-          headers: resp.headers,
-          body: resp.json(),
-        }))
-        .then((response) => {
-          this.store.storeAvailableCount(response.body.available_count);
-          this.store.storeStoppedCount(response.body.stopped_count);
-          this.store.storeEnvironments(response.body.environments);
-          this.store.setPagination(response.headers);
-        })
-        .then(() => {
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          new Flash('An error occurred while fetching the environments.');
-        });
-    },
-
-    fetchChildEnvironments(folder, folderUrl) {
-      this.isLoadingFolderContent = true;
-
-      this.service.getFolderContent(folderUrl)
-        .then(resp => resp.json())
-        .then((response) => {
-          this.store.setfolderContent(folder, response.environments);
-          this.isLoadingFolderContent = false;
-        })
-        .catch(() => {
-          this.isLoadingFolderContent = false;
-          new Flash('An error occurred while fetching the environments.');
-        });
-    },
-  },
-
-  template: `
-    <div :class="cssContainerClass">
-      <div class="top-area">
-        <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
-            <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="content-list environments-container">
-        <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-        </div>
-
-        <div class="blank-state blank-state-no-icon"
-          v-if="!isLoading && state.environments.length === 0">
-          <h2 class="blank-state-title js-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 js-new-environment-button">
-            New Environment
-          </a>
-        </div>
-
-        <div class="table-holder"
-          v-if="!isLoading && state.environments.length > 0">
-
-          <environment-table
-            :environments="state.environments"
-            :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :service="service"
-            :is-loading-folder-content="isLoadingFolderContent" />
-        </div>
-
-        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
-          :change="changePage"
-          :pageInfo="state.paginationInformation">
-        </table-pagination>
-      </div>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
new file mode 100644
index 00000000000..37468ed0d6d
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -0,0 +1,226 @@
+<script>
+/* eslint-disable no-new */
+/* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table.vue';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+import eventHub from '../event_hub';
+
+export default {
+  components: {
+    'environment-table': EnvironmentTable,
+    'table-pagination': TablePaginationComponent,
+  },
+
+  data() {
+    const environmentsData = document.querySelector('#js-environments-list-view').dataset;
+    const store = new EnvironmentsStore();
+
+    return {
+      store,
+      state: store.state,
+      visibility: 'available',
+      isLoading: false,
+      isLoadingFolderContent: 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,
+
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
+    };
+  },
+
+  computed: {
+    scope() {
+      return gl.utils.getParameterByName('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    canCreateEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
+    },
+  },
+
+  /**
+   * Fetches all the environments and stores them.
+   * Toggles loading property.
+   */
+  created() {
+    this.service = new EnvironmentsService(this.endpoint);
+
+    this.fetchEnvironments();
+
+    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+    eventHub.$on('toggleFolder', this.toggleFolder);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshEnvironments');
+    eventHub.$off('toggleFolder');
+  },
+
+  methods: {
+    toggleFolder(folder, folderUrl) {
+      this.store.toggleFolder(folder);
+
+      if (!folder.isOpen) {
+        this.fetchChildEnvironments(folder, folderUrl);
+      }
+    },
+
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     * @return {String}
+     */
+    changePage(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeAvailableCount(response.body.available_count);
+          this.store.storeStoppedCount(response.body.stopped_count);
+          this.store.storeEnvironments(response.body.environments);
+          this.store.setPagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
+
+    fetchChildEnvironments(folder, folderUrl) {
+      this.isLoadingFolderContent = true;
+
+      this.service.getFolderContent(folderUrl)
+        .then(resp => resp.json())
+        .then((response) => {
+          this.store.setfolderContent(folder, response.environments);
+          this.isLoadingFolderContent = false;
+        })
+        .catch(() => {
+          this.isLoadingFolderContent = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
+  },
+};
+</script>
+<template>
+  <div :class="cssContainerClass">
+    <div class="top-area">
+      <ul v-if="!isLoading"
+        class="nav-links">
+        <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+          <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="content-list environments-container">
+      <div
+        class="environments-list-loading text-center"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
+      </div>
+
+      <div
+        class="blank-state blank-state-no-icon"
+        v-if="!isLoading && state.environments.length === 0">
+        <h2 class="blank-state-title js-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 js-new-environment-button">
+          New Environment
+        </a>
+      </div>
+
+      <div
+        class="table-holder"
+        v-if="!isLoading && state.environments.length > 0">
+
+        <environment-table
+          :environments="state.environments"
+          :can-create-deployment="canCreateDeploymentParsed"
+          :can-read-environment="canReadEnvironmentParsed"
+          :service="service"
+          :is-loading-folder-content="isLoadingFolderContent" />
+      </div>
+
+      <table-pagination
+        v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+        :change="changePage"
+        :pageInfo="state.paginationInformation" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
deleted file mode 100644
index 1418e8d86ee..00000000000
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/* global Flash */
-/* eslint-disable no-new */
-
-import playIconSvg from 'icons/_icon_play.svg';
-import eventHub from '../event_hub';
-
-export default {
-  props: {
-    actions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      playIconSvg,
-      isLoading: false,
-    };
-  },
-
-  computed: {
-    title() {
-      return 'Deploy to...';
-    },
-  },
-
-  methods: {
-    onClickAction(endpoint) {
-      this.isLoading = true;
-
-      this.service.postAction(endpoint)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshEnvironments');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
-    },
-
-    isActionDisabled(action) {
-      if (action.playable === undefined) {
-        return false;
-      }
-
-      return !action.playable;
-    },
-  },
-
-  template: `
-    <div class="btn-group" role="group">
-      <button
-        type="button"
-        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
-        data-container="body"
-        data-toggle="dropdown"
-        :title="title"
-        :aria-label="title"
-        :disabled="isLoading">
-        <span>
-          <span v-html="playIconSvg"></span>
-          <i
-            class="fa fa-caret-down"
-            aria-hidden="true"/>
-          <i
-            v-if="isLoading"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true"/>
-        </span>
-      </button>
-
-      <ul class="dropdown-menu dropdown-menu-align-right">
-        <li v-for="action in actions">
-          <button
-            type="button"
-            class="js-manual-action-link no-btn btn"
-            @click="onClickAction(action.play_path)"
-            :class="{ 'disabled': isActionDisabled(action) }"
-            :disabled="isActionDisabled(action)">
-            ${playIconSvg}
-            <span>
-              {{action.name}}
-            </span>
-          </button>
-        </li>
-      </ul>
-  </div>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
new file mode 100644
index 00000000000..7d381f59d6f
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -0,0 +1,100 @@
+<script>
+/* global Flash */
+/* eslint-disable no-new */
+
+import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      playIconSvg,
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Deploy to...';
+    },
+  },
+
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
+
+      this.service.postAction(endpoint)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
+
+      return !action.playable;
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="btn-group"
+    role="group">
+    <button
+      type="button"
+      class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
+      data-container="body"
+      data-toggle="dropdown"
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading">
+      <span>
+        <span v-html="playIconSvg"></span>
+        <i
+          class="fa fa-caret-down"
+          aria-hidden="true"/>
+        <i
+          v-if="isLoading"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true"/>
+      </span>
+    </button>
+
+    <ul class="dropdown-menu dropdown-menu-align-right">
+      <li v-for="action in actions">
+        <button
+          type="button"
+          class="js-manual-action-link no-btn btn"
+          @click="onClickAction(action.play_path)"
+          :class="{ 'disabled': isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)">
+          ${playIconSvg}
+          <span>
+            {{action.name}}
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
deleted file mode 100644
index d79b916c360..00000000000
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Renders the external url link in environments table.
- */
-export default {
-  props: {
-    externalUrl: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    title() {
-      return 'Open';
-    },
-  },
-
-  template: `
-    <a
-      class="btn external-url has-tooltip"
-      data-container="body"
-      :href="externalUrl"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      :title="title"
-      :aria-label="title">
-      <i class="fa fa-external-link" aria-hidden="true"></i>
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
new file mode 100644
index 00000000000..b8b0d4178b9
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -0,0 +1,37 @@
+<script>
+/**
+ * Renders the external url link in environments table.
+ */
+export default {
+  props: {
+    externalUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Open';
+    },
+  },
+
+  destroyed() {
+    $(this.$el).tooltip('destroy');
+  },
+};
+</script>
+<template>
+  <a
+    class="btn external-url has-tooltip"
+    data-container="body"
+    target="_blank"
+    rel="noopener noreferrer nofollow"
+    :title="title"
+    :aria-label="title"
+    :href="externalUrl">
+    <i
+      class="fa fa-external-link"
+      aria-hidden="true" />
+  </a>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
deleted file mode 100644
index d9b49287dec..00000000000
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ /dev/null
@@ -1,550 +0,0 @@
-import Timeago from 'timeago.js';
-import '../../lib/utils/text_utility';
-import ActionsComponent from './environment_actions';
-import ExternalUrlComponent from './environment_external_url';
-import StopComponent from './environment_stop';
-import RollbackComponent from './environment_rollback';
-import TerminalButtonComponent from './environment_terminal_button';
-import MonitoringButtonComponent from './environment_monitoring';
-import CommitComponent from '../../vue_shared/components/commit';
-import eventHub from '../event_hub';
-
-/**
- * Envrionment Item Component
- *
- * Renders a table row for each environment.
- */
-const timeagoInstance = new Timeago();
-
-export default {
-  components: {
-    'commit-component': CommitComponent,
-    'actions-component': ActionsComponent,
-    'external-url-component': ExternalUrlComponent,
-    'stop-component': StopComponent,
-    'rollback-component': RollbackComponent,
-    'terminal-button-component': TerminalButtonComponent,
-    'monitoring-button-component': MonitoringButtonComponent,
-  },
-
-  props: {
-    model: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-
-    canCreateDeployment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  computed: {
-    /**
-     * 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 &&
-        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 &&
-        this.model.last_deployment &&
-        this.model.last_deployment.manual_actions &&
-        this.model.last_deployment.manual_actions.length > 0;
-    },
-
-    /**
-     * Returns the value of the `stop_action?` key provided in the response.
-     *
-     * @returns {Boolean}
-     */
-    hasStopAction() {
-      return this.model && this.model['stop_action?'];
-    },
-
-    /**
-     * 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.model &&
-        this.hasLastDeploymentKey &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable;
-    },
-
-    /**
-     * Verifies if the date to be shown is present.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    canShowDate() {
-      return this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable !== undefined;
-    },
-
-    /**
-     * Human readable date.
-     *
-     * @returns {String}
-     */
-    createdDate() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.created_at) {
-        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
-      }
-      return '';
-    },
-
-    /**
-     * 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,
-            playable: action.playable,
-          };
-          return parsedAction;
-        });
-      }
-      return [];
-    },
-
-    /**
-     * Builds the string used in the user image alt attribute.
-     *
-     * @returns {String}
-     */
-    userImageAltDescription() {
-      if (this.model &&
-        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 &&
-        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 &&
-        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 &&
-        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 &&
-        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 &&
-        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 &&
-        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 &&
-        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 && 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 &&
-        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 &&
-        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.model &&
-        !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.model &&
-        !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.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
-    },
-
-    /**
-     * Verifies the presence of all the keys needed to render the buil_path.
-     *
-     * @return {String}
-     */
-    buildPath() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.build_path) {
-        return this.model.last_deployment.deployable.build_path;
-      }
-
-      return '';
-    },
-
-    /**
-     * Verifies the presence of all the keys needed to render the external_url.
-     *
-     * @return {String}
-     */
-    externalURL() {
-      if (this.model && this.model.external_url) {
-        return this.model.external_url;
-      }
-
-      return '';
-    },
-
-    /**
-     * 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.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        this.model.last_deployment.iid !== undefined;
-    },
-
-    environmentPath() {
-      if (this.model && this.model.environment_path) {
-        return this.model.environment_path;
-      }
-
-      return '';
-    },
-
-    monitoringUrl() {
-      if (this.model && this.model.metrics_path) {
-        return this.model.metrics_path;
-      }
-
-      return '';
-    },
-
-    /**
-     * Constructs folder URL based on the current location and the folder id.
-     *
-     * @return {String}
-     */
-    folderUrl() {
-      return `${window.location.pathname}/folders/${this.model.folderName}`;
-    },
-  },
-
-  /**
-   * 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;
-  },
-
-  methods: {
-    onClickFolder() {
-      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
-    },
-  },
-
-  template: `
-    <tr :class="{ 'js-child-row': model.isChildren }">
-      <td>
-        <a v-if="!model.isFolder"
-          class="environment-name"
-          :class="{ 'prepend-left-default': model.isChildren }"
-          :href="environmentPath">
-          {{model.name}}
-        </a>
-        <span v-else
-          class="folder-name"
-          @click="onClickFolder"
-          role="button">
-
-          <span class="folder-icon">
-            <i
-              v-show="model.isOpen"
-              class="fa fa-caret-down"
-              aria-hidden="true" />
-            <i
-              v-show="!model.isOpen"
-              class="fa fa-caret-right"
-              aria-hidden="true"/>
-          </span>
-
-          <span class="folder-icon">
-            <i class="fa fa-folder" aria-hidden="true"></i>
-          </span>
-
-          <span>
-            {{model.folderName}}
-          </span>
-
-          <span class="badge">
-            {{model.size}}
-          </span>
-        </span>
-      </td>
-
-      <td class="deployment-column">
-        <span v-if="shouldRenderDeploymentID">
-          {{deploymentInternalId}}
-        </span>
-
-        <span v-if="!model.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 class="environments-build-cell">
-        <a v-if="shouldRenderBuildName"
-          class="build-link"
-          :href="buildPath">
-          {{buildName}}
-        </a>
-      </td>
-
-      <td>
-        <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
-          <commit-component
-            :tag="commitTag"
-            :commit-ref="commitRef"
-            :commit-url="commitUrl"
-            :short-sha="commitShortSha"
-            :title="commitTitle"
-            :author="commitAuthor"/>
-        </div>
-        <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
-          No deployments yet
-        </p>
-      </td>
-
-      <td>
-        <span v-if="!model.isFolder && canShowDate"
-          class="environment-created-date-timeago">
-          {{createdDate}}
-        </span>
-      </td>
-
-      <td class="environments-actions">
-        <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
-          <actions-component v-if="hasManualActions && canCreateDeployment"
-            :service="service"
-            :actions="manualActions"/>
-
-          <external-url-component v-if="externalURL && canReadEnvironment"
-            :external-url="externalURL"/>
-
-          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
-            :monitoring-url="monitoringUrl"/>
-
-          <terminal-button-component v-if="model && model.terminal_path"
-            :terminal-path="model.terminal_path"/>
-
-          <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"
-            :service="service"/>
-
-          <rollback-component v-if="canRetry && canCreateDeployment"
-            :is-last-deployment="isLastDeployment"
-            :retry-url="retryUrl"
-            :service="service"/>
-        </div>
-      </td>
-    </tr>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
new file mode 100644
index 00000000000..73679de6039
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -0,0 +1,574 @@
+<script>
+import Timeago from 'timeago.js';
+import '../../lib/utils/text_utility';
+import ActionsComponent from './environment_actions.vue';
+import ExternalUrlComponent from './environment_external_url.vue';
+import StopComponent from './environment_stop.vue';
+import RollbackComponent from './environment_rollback.vue';
+import TerminalButtonComponent from './environment_terminal_button.vue';
+import MonitoringButtonComponent from './environment_monitoring.vue';
+import CommitComponent from '../../vue_shared/components/commit';
+import eventHub from '../event_hub';
+
+/**
+ * Envrionment Item Component
+ *
+ * Renders a table row for each environment.
+ */
+const timeagoInstance = new Timeago();
+
+export default {
+  components: {
+    'commit-component': CommitComponent,
+    'actions-component': ActionsComponent,
+    'external-url-component': ExternalUrlComponent,
+    'stop-component': StopComponent,
+    'rollback-component': RollbackComponent,
+    'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
+  },
+
+  props: {
+    model: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    /**
+     * 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 &&
+        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 &&
+        this.model.last_deployment &&
+        this.model.last_deployment.manual_actions &&
+        this.model.last_deployment.manual_actions.length > 0;
+    },
+
+    /**
+     * Returns the value of the `stop_action?` key provided in the response.
+     *
+     * @returns {Boolean}
+     */
+    hasStopAction() {
+      return this.model && this.model['stop_action?'];
+    },
+
+    /**
+     * 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.model &&
+        this.hasLastDeploymentKey &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable;
+    },
+
+    /**
+     * Verifies if the date to be shown is present.
+     *
+     * @returns {Boolean|Undefined}
+     */
+    canShowDate() {
+      return this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable !== undefined;
+    },
+
+    /**
+     * Human readable date.
+     *
+     * @returns {String}
+     */
+    createdDate() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable.created_at) {
+        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
+      }
+      return '';
+    },
+
+    /**
+     * 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,
+            playable: action.playable,
+          };
+          return parsedAction;
+        });
+      }
+      return [];
+    },
+
+    /**
+     * Builds the string used in the user image alt attribute.
+     *
+     * @returns {String}
+     */
+    userImageAltDescription() {
+      if (this.model &&
+        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 &&
+        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 &&
+        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 &&
+        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 &&
+        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 &&
+        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 &&
+        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 &&
+        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 && 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 &&
+        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 &&
+        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.model &&
+        !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.model &&
+        !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.model.isFolder &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+    },
+
+    /**
+     * Verifies the presence of all the keys needed to render the buil_path.
+     *
+     * @return {String}
+     */
+    buildPath() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable.build_path) {
+        return this.model.last_deployment.deployable.build_path;
+      }
+
+      return '';
+    },
+
+    /**
+     * Verifies the presence of all the keys needed to render the external_url.
+     *
+     * @return {String}
+     */
+    externalURL() {
+      if (this.model && this.model.external_url) {
+        return this.model.external_url;
+      }
+
+      return '';
+    },
+
+    /**
+     * 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.model.isFolder &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        this.model.last_deployment.iid !== undefined;
+    },
+
+    environmentPath() {
+      if (this.model && this.model.environment_path) {
+        return this.model.environment_path;
+      }
+
+      return '';
+    },
+
+    monitoringUrl() {
+      if (this.model && this.model.metrics_path) {
+        return this.model.metrics_path;
+      }
+
+      return '';
+    },
+
+    /**
+     * Constructs folder URL based on the current location and the folder id.
+     *
+     * @return {String}
+     */
+    folderUrl() {
+      return `${window.location.pathname}/folders/${this.model.folderName}`;
+    },
+  },
+
+  /**
+   * 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;
+  },
+
+  methods: {
+    onClickFolder() {
+      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
+    },
+  },
+};
+</script>
+<template>
+  <tr :class="{ 'js-child-row': model.isChildren }">
+    <td>
+      <a
+        v-if="!model.isFolder"
+        class="environment-name"
+        :class="{ 'prepend-left-default': model.isChildren }"
+        :href="environmentPath">
+        {{model.name}}
+      </a>
+      <span
+        v-else
+        class="folder-name"
+        @click="onClickFolder"
+        role="button">
+
+        <span class="folder-icon">
+          <i
+            v-show="model.isOpen"
+            class="fa fa-caret-down"
+            aria-hidden="true" />
+          <i
+            v-show="!model.isOpen"
+            class="fa fa-caret-right"
+            aria-hidden="true"/>
+        </span>
+
+        <span class="folder-icon">
+          <i
+            class="fa fa-folder"
+            aria-hidden="true" />
+        </span>
+
+        <span>
+          {{model.folderName}}
+        </span>
+
+        <span class="badge">
+          {{model.size}}
+        </span>
+      </span>
+    </td>
+
+    <td class="deployment-column">
+      <span v-if="shouldRenderDeploymentID">
+        {{deploymentInternalId}}
+      </span>
+
+      <span v-if="!model.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 class="environments-build-cell">
+      <a
+        v-if="shouldRenderBuildName"
+        class="build-link"
+        :href="buildPath">
+        {{buildName}}
+      </a>
+    </td>
+
+    <td>
+      <div
+        v-if="!model.isFolder && hasLastDeploymentKey"
+        class="js-commit-component">
+        <commit-component
+          :tag="commitTag"
+          :commit-ref="commitRef"
+          :commit-url="commitUrl"
+          :short-sha="commitShortSha"
+          :title="commitTitle"
+          :author="commitAuthor"/>
+      </div>
+      <p
+        v-if="!model.isFolder && !hasLastDeploymentKey"
+        class="commit-title">
+        No deployments yet
+      </p>
+    </td>
+
+    <td>
+      <span
+        v-if="!model.isFolder && canShowDate"
+        class="environment-created-date-timeago">
+        {{createdDate}}
+      </span>
+    </td>
+
+    <td class="environments-actions">
+      <div
+        v-if="!model.isFolder"
+        class="btn-group pull-right"
+        role="group">
+
+        <actions-component
+          v-if="hasManualActions && canCreateDeployment"
+          :service="service"
+          :actions="manualActions"/>
+
+        <external-url-component
+          v-if="externalURL && canReadEnvironment"
+          :external-url="externalURL"/>
+
+        <monitoring-button-component
+          v-if="monitoringUrl && canReadEnvironment"
+          :monitoring-url="monitoringUrl"/>
+
+        <terminal-button-component
+          v-if="model && model.terminal_path"
+          :terminal-path="model.terminal_path"/>
+
+        <stop-component
+          v-if="hasStopAction && canCreateDeployment"
+          :stop-url="model.stop_path"
+          :service="service"/>
+
+        <rollback-component
+          v-if="canRetry && canCreateDeployment"
+          :is-last-deployment="isLastDeployment"
+          :retry-url="retryUrl"
+          :service="service"/>
+      </div>
+    </td>
+  </tr>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.js b/app/assets/javascripts/environments/components/environment_monitoring.js
deleted file mode 100644
index 064e2fc7434..00000000000
--- a/app/assets/javascripts/environments/components/environment_monitoring.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Renders the Monitoring (Metrics) link in environments table.
- */
-export default {
-  props: {
-    monitoringUrl: {
-      type: String,
-      default: '',
-      required: true,
-    },
-  },
-
-  computed: {
-    title() {
-      return 'Monitoring';
-    },
-  },
-
-  template: `
-    <a
-      class="btn monitoring-url has-tooltip"
-      data-container="body"
-      :href="monitoringUrl"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      :title="title"
-      :aria-label="title">
-      <i class="fa fa-area-chart" aria-hidden="true"></i>
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
new file mode 100644
index 00000000000..e94b1f15338
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -0,0 +1,38 @@
+<script>
+/**
+ * Renders the Monitoring (Metrics) link in environments table.
+ */
+
+export default {
+  props: {
+    monitoringUrl: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Monitoring';
+    },
+  },
+
+  destroyed() {
+    $(this.$el).tooltip('destroy');
+  },
+};
+</script>
+<template>
+  <a
+    :href="monitoringUrl"
+    :title="title"
+    :aria-label="title"
+    class="btn monitoring-url has-tooltip"
+    data-container="body"
+    target="_blank"
+    rel="noopener noreferrer nofollow">
+    <i
+      class="fa fa-area-chart"
+      aria-hidden="true" />
+  </a>
+</template
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
deleted file mode 100644
index baa15d9e5b5..00000000000
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/* global Flash */
-/* eslint-disable no-new */
-/**
- * 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';
-
-export default {
-  props: {
-    retryUrl: {
-      type: String,
-      default: '',
-    },
-
-    isLastDeployment: {
-      type: Boolean,
-      default: true,
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  methods: {
-    onClick() {
-      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.');
-      });
-    },
-  },
-
-  template: `
-    <button type="button"
-      class="btn"
-      @click="onClick"
-      :disabled="isLoading">
-
-      <span v-if="isLastDeployment">
-        Re-deploy
-      </span>
-      <span v-else>
-        Rollback
-      </span>
-
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-    </button>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
new file mode 100644
index 00000000000..8dbb2de858e
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -0,0 +1,72 @@
+<script>
+/* global Flash */
+/* eslint-disable no-new */
+/**
+ * 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';
+
+export default {
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
+    },
+
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      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.');
+      });
+    },
+  },
+};
+</script>
+<template>
+  <button
+    type="button"
+    class="btn"
+    @click="onClick"
+    :disabled="isLoading">
+
+    <span v-if="isLastDeployment">
+      Re-deploy
+    </span>
+    <span v-else>
+      Rollback
+    </span>
+
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
+  </button>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
deleted file mode 100644
index 47102692024..00000000000
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/* global Flash */
-/* eslint-disable no-new, no-alert */
-/**
- * Renders the stop "button" that allows stop an environment.
- * Used in environments table.
- */
-import eventHub from '../event_hub';
-
-export default {
-  props: {
-    stopUrl: {
-      type: String,
-      default: '',
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-
-  computed: {
-    title() {
-      return 'Stop';
-    },
-  },
-
-  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: `
-    <button type="button"
-      class="btn stop-env-link has-tooltip"
-      data-container="body"
-      @click="onClick"
-      :disabled="isLoading"
-      :title="title"
-      :aria-label="title">
-      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
-      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-    </button>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
new file mode 100644
index 00000000000..3c64c7526c8
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -0,0 +1,73 @@
+<script>
+/* global Flash */
+/* eslint-disable no-new, no-alert */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    stopUrl: {
+      type: String,
+      default: '',
+      required: false,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Stop';
+    },
+  },
+
+  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');
+        });
+      }
+    },
+  },
+};
+</script>
+<template>
+  <button
+    type="button"
+    class="btn stop-env-link has-tooltip"
+    data-container="body"
+    @click="onClick"
+    :disabled="isLoading"
+    :title="title"
+    :aria-label="title">
+
+    <i
+      class="fa fa-stop stop-env-icon"
+      aria-hidden="true" />
+    <i
+      v-if="isLoading"
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true" />
+  </button>
+</template>
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
deleted file mode 100644
index 092a50a0d6f..00000000000
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Renders a terminal button to open a web terminal.
- * Used in environments table.
- */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
-
-export default {
-  props: {
-    terminalPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      terminalIconSvg,
-    };
-  },
-
-  computed: {
-    title() {
-      return 'Terminal';
-    },
-  },
-
-  template: `
-    <a class="btn terminal-button has-tooltip"
-      data-container="body"
-      :title="title"
-      :aria-label="title"
-      :href="terminalPath">
-      ${terminalIconSvg}
-    </a>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
new file mode 100644
index 00000000000..f2796c471c9
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -0,0 +1,43 @@
+<script>
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+import terminalIconSvg from 'icons/_icon_terminal.svg';
+
+export default {
+  props: {
+    terminalPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      terminalIconSvg,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Terminal';
+    },
+  },
+
+  destroyed() {
+    $(this.el).tooltip('destroy');
+  },
+};
+</script>
+<template>
+  <a
+    class="btn terminal-button has-tooltip"
+    data-container="body"
+    :title="title"
+    :aria-label="title"
+    :href="terminalPath">
+    ${terminalIconSvg}
+  </a>
+</template>
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
deleted file mode 100644
index 5e6af3a1d45..00000000000
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Render environments table.
- */
-import EnvironmentTableRowComponent from './environment_item';
-
-export default {
-  components: {
-    'environment-item': EnvironmentTableRowComponent,
-  },
-
-  props: {
-    environments: {
-      type: Array,
-      required: true,
-      default: () => ([]),
-    },
-
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    canCreateDeployment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    service: {
-      type: Object,
-      required: true,
-    },
-
-    isLoadingFolderContent: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  methods: {
-    folderUrl(model) {
-      return `${window.location.pathname}/folders/${model.folderName}`;
-    },
-  },
-
-  template: `
-    <table class="table ci-table">
-      <thead>
-        <tr>
-          <th class="environments-name">Environment</th>
-          <th class="environments-deploy">Last deployment</th>
-          <th class="environments-build">Job</th>
-          <th class="environments-commit">Commit</th>
-          <th class="environments-date">Updated</th>
-          <th class="environments-actions"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-for="model in environments"
-          v-bind:model="model">
-          <tr is="environment-item"
-            :model="model"
-            :can-create-deployment="canCreateDeployment"
-            :can-read-environment="canReadEnvironment"
-            :service="service"></tr>
-
-          <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-            <tr v-if="isLoadingFolderContent">
-              <td colspan="6" class="text-center">
-                <i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/>
-              </td>
-            </tr>
-
-            <template v-else>
-              <tr is="environment-item"
-                v-for="children in model.children"
-                :model="children"
-                :can-create-deployment="canCreateDeployment"
-                :can-read-environment="canReadEnvironment"
-                :service="service"></tr>
-
-              <tr>
-                <td colspan="6" class="text-center">
-                  <a :href="folderUrl(model)" class="btn btn-default">
-                    Show all
-                  </a>
-                </td>
-              </tr>
-            </template>
-          </template>
-        </template>
-      </tbody>
-    </table>
-  `,
-};
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
new file mode 100644
index 00000000000..53d90e3292d
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -0,0 +1,120 @@
+<script>
+/**
+ * Render environments table.
+ */
+import EnvironmentTableRowComponent from './environment_item.vue';
+
+export default {
+  components: {
+    'environment-item': EnvironmentTableRowComponent,
+  },
+
+  props: {
+    environments: {
+      type: Array,
+      required: true,
+      default: () => ([]),
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+
+    isLoadingFolderContent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    folderUrl(model) {
+      return `${window.location.pathname}/folders/${model.folderName}`;
+    },
+  },
+};
+</script>
+<template>
+  <table class="table ci-table">
+    <thead>
+      <tr>
+        <th class="environments-name">
+          Environment
+        </th>
+        <th class="environments-deploy">
+          Last deployment
+        </th>
+        <th class="environments-build">
+          Job
+        </th>
+        <th class="environments-commit">
+          Commit
+        </th>
+        <th class="environments-date">
+          Updated
+        </th>
+        <th class="environments-actions"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <template
+        v-for="model in environments"
+        v-bind:model="model">
+        <tr
+          is="environment-item"
+          :model="model"
+          :can-create-deployment="canCreateDeployment"
+          :can-read-environment="canReadEnvironment"
+          :service="service" />
+
+        <template
+          v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
+          <tr v-if="isLoadingFolderContent">
+            <td
+              colspan="6"
+              class="text-center">
+              <i
+                class="fa fa-spin fa-spinner fa-2x"
+                aria-hidden="true"/>
+            </td>
+          </tr>
+
+          <template v-else>
+            <tr
+              is="environment-item"
+              v-for="children in model.children"
+              :model="children"
+              :can-create-deployment="canCreateDeployment"
+              :can-read-environment="canReadEnvironment"
+              :service="service" />
+
+            <tr>
+              <td
+                colspan="6"
+                class="text-center">
+                <a
+                  :href="folderUrl(model)"
+                  class="btn btn-default">
+                  Show all
+                </a>
+              </td>
+            </tr>
+          </template>
+        </template>
+      </template>
+    </tbody>
+  </table>
+</template>
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
index 8d963b335cf..6b906776236 100644
--- a/app/assets/javascripts/environments/environments_bundle.js
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -1,13 +1,12 @@
-import EnvironmentsComponent from './components/environment';
+import Vue from 'vue';
+import EnvironmentsComponent from './components/environment.vue';
 
 $(() => {
-  window.gl = window.gl || {};
-
-  if (gl.EnvironmentsListApp) {
-    gl.EnvironmentsListApp.$destroy(true);
-  }
-
-  gl.EnvironmentsListApp = new EnvironmentsComponent({
-    el: document.querySelector('#environments-list-view'),
+  new Vue({ // eslint-disable-line
+    el: '#js-environments-list-view',
+    components: {
+      'environments-component': EnvironmentsComponent,
+    },
+    render: createElement => createElement('environments-component'),
   });
 });
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index f939eccf246..35b263c83aa 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,13 +1,12 @@
-import EnvironmentsFolderComponent from './environments_folder_view';
+import Vue from 'vue';
+import EnvironmentsFolderComponent from './environments_folder_view.vue';
 
 $(() => {
-  window.gl = window.gl || {};
-
-  if (gl.EnvironmentsListFolderApp) {
-    gl.EnvironmentsListFolderApp.$destroy(true);
-  }
-
-  gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
-    el: document.querySelector('#environments-folder-list-view'),
+  new Vue({ // eslint-disable-line
+    el: '#js-environments-folder-list-view',
+    components: {
+      'environments-list-folder-component': EnvironmentsFolderComponent,
+    },
+    render: createElement => createElement('environments-list-folder-component'),
   });
 });
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
deleted file mode 100644
index d2514593e3a..00000000000
--- a/app/assets/javascripts/environments/folder/environments_folder_view.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/* eslint-disable no-new */
-/* global Flash */
-import Vue from 'vue';
-import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table';
-import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
-import '../../lib/utils/common_utils';
-import '../../vue_shared/vue_resource_interceptor';
-
-export default Vue.component('environment-folder-view', {
-  components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
-  },
-
-  data() {
-    const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
-    const store = new EnvironmentsStore();
-    const pathname = window.location.pathname;
-    const endpoint = `${pathname}.json`;
-    const folderName = pathname.substr(pathname.lastIndexOf('/') + 1);
-
-    return {
-      store,
-      folderName,
-      endpoint,
-      state: store.state,
-      visibility: 'available',
-      isLoading: false,
-      cssContainerClass: environmentsData.cssClass,
-      canCreateDeployment: environmentsData.canCreateDeployment,
-      canReadEnvironment: environmentsData.canReadEnvironment,
-      // Pagination Properties,
-      paginationInformation: {},
-      pageNumber: 1,
-    };
-  },
-
-  computed: {
-    scope() {
-      return gl.utils.getParameterByName('scope');
-    },
-
-    canReadEnvironmentParsed() {
-      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
-    },
-
-    canCreateDeploymentParsed() {
-      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
-    },
-
-    /**
-     * URL to link in the stopped tab.
-     *
-     * @return {String}
-     */
-    stoppedPath() {
-      return `${window.location.pathname}?scope=stopped`;
-    },
-
-    /**
-     * URL to link in the available tab.
-     *
-     * @return {String}
-     */
-    availablePath() {
-      return window.location.pathname;
-    },
-  },
-
-  /**
-   * Fetches all the environments and stores them.
-   * Toggles loading property.
-   */
-  created() {
-    const scope = gl.utils.getParameterByName('scope') || this.visibility;
-    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
-
-    this.service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return this.service.get()
-      .then(resp => ({
-        headers: resp.headers,
-        body: resp.json(),
-      }))
-      .then((response) => {
-        this.store.storeAvailableCount(response.body.available_count);
-        this.store.storeStoppedCount(response.body.stopped_count);
-        this.store.storeEnvironments(response.body.environments);
-        this.store.setPagination(response.headers);
-      })
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
-  },
-
-  methods: {
-    /**
-     * Will change the page number and update the URL.
-     *
-     * @param  {Number} pageNumber desired page to go to.
-     */
-    changePage(pageNumber) {
-      const param = gl.utils.setParamInURL('page', pageNumber);
-
-      gl.utils.visitUrl(param);
-      return param;
-    },
-  },
-
-  template: `
-    <div :class="cssContainerClass">
-      <div class="top-area" v-if="!isLoading">
-
-        <h4 class="js-folder-name environments-folder-name">
-          Environments / <b>{{folderName}}</b>
-        </h4>
-
-        <ul class="nav-links">
-          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
-            <a :href="availablePath" class="js-available-environments-folder-tab">
-              Available
-              <span class="badge js-available-environments-count">
-                {{state.availableCounter}}
-              </span>
-            </a>
-          </li>
-          <li v-bind:class="{ 'active' : scope === 'stopped' }">
-            <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
-              Stopped
-              <span class="badge js-stopped-environments-count">
-                {{state.stoppedCounter}}
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div class="environments-container">
-        <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
-
-        <div class="table-holder"
-          v-if="!isLoading && state.environments.length > 0">
-
-          <environment-table
-            :environments="state.environments"
-            :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :service="service"/>
-
-          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
-            :change="changePage"
-            :pageInfo="state.paginationInformation"/>
-        </div>
-      </div>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
new file mode 100644
index 00000000000..17d77673f21
--- /dev/null
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -0,0 +1,169 @@
+<script>
+/* eslint-disable no-new */
+/* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from '../components/environments_table.vue';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
+
+export default {
+  components: {
+    'environment-table': EnvironmentTable,
+    'table-pagination': TablePaginationComponent,
+  },
+
+  data() {
+    const environmentsData = document.querySelector('#js-environments-folder-list-view').dataset;
+    const store = new EnvironmentsStore();
+    const pathname = window.location.pathname;
+    const endpoint = `${pathname}.json`;
+    const folderName = pathname.substr(pathname.lastIndexOf('/') + 1);
+
+    return {
+      store,
+      folderName,
+      endpoint,
+      state: store.state,
+      visibility: 'available',
+      isLoading: false,
+      cssContainerClass: environmentsData.cssClass,
+      canCreateDeployment: environmentsData.canCreateDeployment,
+      canReadEnvironment: environmentsData.canReadEnvironment,
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
+    };
+  },
+
+  computed: {
+    scope() {
+      return gl.utils.getParameterByName('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    /**
+     * URL to link in the stopped tab.
+     *
+     * @return {String}
+     */
+    stoppedPath() {
+      return `${window.location.pathname}?scope=stopped`;
+    },
+
+    /**
+     * URL to link in the available tab.
+     *
+     * @return {String}
+     */
+    availablePath() {
+      return window.location.pathname;
+    },
+  },
+
+  /**
+   * Fetches all the environments and stores them.
+   * Toggles loading property.
+   */
+  created() {
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
+
+    this.service = new EnvironmentsService(endpoint);
+
+    this.isLoading = true;
+
+    return this.service.get()
+      .then(resp => ({
+        headers: resp.headers,
+        body: resp.json(),
+      }))
+      .then((response) => {
+        this.store.storeAvailableCount(response.body.available_count);
+        this.store.storeStoppedCount(response.body.stopped_count);
+        this.store.storeEnvironments(response.body.environments);
+        this.store.setPagination(response.headers);
+      })
+      .then(() => {
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the environments.', 'alert');
+      });
+  },
+
+  methods: {
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     */
+    changePage(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+  },
+};
+</script>
+<template>
+  <div :class="cssContainerClass">
+    <div class="top-area" v-if="!isLoading">
+
+      <h4 class="js-folder-name environments-folder-name">
+        Environments / <b>{{folderName}}</b>
+      </h4>
+
+      <ul class="nav-links">
+        <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+          <a :href="availablePath" class="js-available-environments-folder-tab">
+            Available
+            <span class="badge js-available-environments-count">
+              {{state.availableCounter}}
+            </span>
+          </a>
+        </li>
+        <li v-bind:class="{ 'active' : scope === 'stopped' }">
+          <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
+            Stopped
+            <span class="badge js-stopped-environments-count">
+              {{state.stoppedCounter}}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="environments-container">
+      <div class="environments-list-loading text-center" v-if="isLoading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
+
+      <div class="table-holder"
+        v-if="!isLoading && state.environments.length > 0">
+
+        <environment-table
+          :environments="state.environments"
+          :can-create-deployment="canCreateDeploymentParsed"
+          :can-read-environment="canReadEnvironmentParsed"
+          :service="service"/>
+
+        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+          :change="changePage"
+          :pageInfo="state.paginationInformation"/>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/views/projects/environments/folder.html.haml b/app/views/projects/environments/folder.html.haml
index f7e3733ba0b..4ebe93cc88d 100644
--- a/app/views/projects/environments/folder.html.haml
+++ b/app/views/projects/environments/folder.html.haml
@@ -6,6 +6,6 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag("environments_folder")
 
-#environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
+#js-environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
   "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
   "css-class" => container_class } }
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 80d2b6f5d95..274467a341f 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -6,7 +6,7 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag("environments")
 
-#environments-list-view{ data: { environments_data: environments_list_data,
+#js-environments-list-view{ data: { environments_data: environments_list_data,
   "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
   "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index 6348d97b0a5..676bf61cfd9 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import actionsComp from '~/environments/components/environment_actions';
+import actionsComp from '~/environments/components/environment_actions.vue';
 
 describe('Actions Component', () => {
   let ActionsComponent;
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 9af218a27ff..056d68a26e9 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import externalUrlComp from '~/environments/components/environment_external_url';
+import externalUrlComp from '~/environments/components/environment_external_url.vue';
 
 describe('External URL Component', () => {
   let ExternalUrlComponent;
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 4d42de4d549..0e141adb628 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,6 +1,6 @@
 import 'timeago.js';
 import Vue from 'vue';
-import environmentItemComp from '~/environments/components/environment_item';
+import environmentItemComp from '~/environments/components/environment_item.vue';
 
 describe('Environment item', () => {
   let EnvironmentItem;
diff --git a/spec/javascripts/environments/environment_monitoring_spec.js b/spec/javascripts/environments/environment_monitoring_spec.js
index fc451cce641..0f3dba66230 100644
--- a/spec/javascripts/environments/environment_monitoring_spec.js
+++ b/spec/javascripts/environments/environment_monitoring_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import monitoringComp from '~/environments/components/environment_monitoring';
+import monitoringComp from '~/environments/components/environment_monitoring.vue';
 
 describe('Monitoring Component', () => {
   let MonitoringComponent;
diff --git a/spec/javascripts/environments/environment_rollback_spec.js b/spec/javascripts/environments/environment_rollback_spec.js
index 7cb39d9df03..25397714a76 100644
--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import rollbackComp from '~/environments/components/environment_rollback';
+import rollbackComp from '~/environments/components/environment_rollback.vue';
 
 describe('Rollback Component', () => {
   const retryURL = 'https://gitlab.com/retry';
diff --git a/spec/javascripts/environments/environment_spec.js b/spec/javascripts/environments/environment_spec.js
index 9762688af1a..d32578f0385 100644
--- a/spec/javascripts/environments/environment_spec.js
+++ b/spec/javascripts/environments/environment_spec.js
@@ -1,14 +1,16 @@
 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsComponent from '~/environments/components/environment';
+import environmentsComponent from '~/environments/components/environment.vue';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
-
+  let EnvironmentsComponent;
   let component;
 
   beforeEach(() => {
+    EnvironmentsComponent = Vue.extend(environmentsComponent);
+
     loadFixtures('static/environments/environments.html.raw');
   });
 
@@ -32,7 +34,7 @@ describe('Environment', () => {
 
       it('should render the empty state', (done) => {
         component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
+          el: document.querySelector('#js-environments-list-view'),
         });
 
         setTimeout(() => {
@@ -71,8 +73,8 @@ describe('Environment', () => {
       beforeEach(() => {
         Vue.http.interceptors.push(environmentsResponseInterceptor);
         component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
-        });
+          el: document.querySelector('#js-environments-list-view'),
+        }).$mount();
       });
 
       afterEach(() => {
@@ -169,7 +171,7 @@ describe('Environment', () => {
 
     it('should render empty state', (done) => {
       component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
+        el: document.querySelector('#js-environments-list-view'),
       });
 
       setTimeout(() => {
@@ -203,7 +205,7 @@ describe('Environment', () => {
     beforeEach(() => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
       component = new EnvironmentsComponent({
-        el: document.querySelector('#environments-list-view'),
+        el: document.querySelector('#js-environments-list-view'),
       });
     });
 
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 01055e3f255..942e4aaabd4 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+import stopComp from '~/environments/components/environment_stop.vue';
 
 describe('Stop Component', () => {
   let StopComponent;
diff --git a/spec/javascripts/environments/environment_table_spec.js b/spec/javascripts/environments/environment_table_spec.js
index 3df967848a7..effbc6c3ee1 100644
--- a/spec/javascripts/environments/environment_table_spec.js
+++ b/spec/javascripts/environments/environment_table_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import environmentTableComp from '~/environments/components/environments_table';
+import environmentTableComp from '~/environments/components/environments_table.vue';
 
 describe('Environment item', () => {
   preloadFixtures('static/environments/element.html.raw');
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
index be2289edc2b..858472af4b6 100644
--- a/spec/javascripts/environments/environment_terminal_button_spec.js
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button';
+import terminalComp from '~/environments/components/environment_terminal_button.vue';
 
 describe('Stop Component', () => {
   let TerminalComponent;
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index 72f3db29a66..909f85fbc25 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
+import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');
+  let EnvironmentsFolderViewComponent;
 
   beforeEach(() => {
+    EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
     loadFixtures('static/environments/environments_folder_view.html.raw');
     window.history.pushState({}, null, 'environments/folders/build');
   });
@@ -35,7 +37,7 @@ describe('Environments Folder View', () => {
     beforeEach(() => {
       Vue.http.interceptors.push(environmentsResponseInterceptor);
       component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
+        el: document.querySelector('#js-environments-folder-list-view'),
       });
     });
 
@@ -163,7 +165,7 @@ describe('Environments Folder View', () => {
 
     it('should not render a table', (done) => {
       component = new EnvironmentsFolderViewComponent({
-        el: document.querySelector('#environments-folder-list-view'),
+        el: document.querySelector('#js-environments-folder-list-view'),
       });
 
       setTimeout(() => {
diff --git a/spec/javascripts/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
index e6000fbb553..d9599587f14 100644
--- a/spec/javascripts/fixtures/environments/environments.html.haml
+++ b/spec/javascripts/fixtures/environments/environments.html.haml
@@ -1,5 +1,5 @@
 %div
-  #environments-list-view{ data: { environments_data: "foo/environments",
+  #js-environments-list-view{ data: { environments_data: "foo/environments",
     "can-create-deployment" => "true",
     "can-read-environment" => "true",
     "can-create-environment" => "true",
diff --git a/spec/javascripts/fixtures/environments/environments_folder_view.html.haml b/spec/javascripts/fixtures/environments/environments_folder_view.html.haml
index aceec139730..c43cbebf610 100644
--- a/spec/javascripts/fixtures/environments/environments_folder_view.html.haml
+++ b/spec/javascripts/fixtures/environments/environments_folder_view.html.haml
@@ -1,5 +1,5 @@
 %div
-  #environments-folder-list-view{ data: { "can-create-deployment" => "true",
+  #js-environments-folder-list-view{ data: { "can-create-deployment" => "true",
     "can-read-environment" => "true",
     "css-class" => "",
     "commit-icon-svg" => custom_icon("icon_commit"),
-- 
cgit v1.2.1