1 files changed, 57 insertions, 64 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index 11a965fcddf..0cbf952ea5c 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -4,18 +4,21 @@
 const Vue = require('vue');
 Vue.use(require('vue-resource'));
 const EnvironmentsService = require('../services/environments_service');
-const EnvironmentItem = require('./environment_item');
-const Store = require('../stores/environments_store');
+const EnvironmentTable = require('./environments_table');
+const EnvironmentsStore = require('../stores/environments_store');
+require('../../vue_shared/components/table_pagination');
+require('../../lib/utils/common_utils');
 
 module.exports = Vue.component('environment-component', {
 
   components: {
-    'environment-item': EnvironmentItem,
+    'environment-table': EnvironmentTable,
+    'table-pagination': gl.VueGlPagination,
   },
 
   data() {
     const environmentsData = document.querySelector('#environments-list-view').dataset;
-    const store = new Store();
+    const store = new EnvironmentsStore();
 
     return {
       store,
@@ -34,25 +37,30 @@ module.exports = Vue.component('environment-component', {
       commitIconSvg: environmentsData.commitIconSvg,
       playIconSvg: environmentsData.playIconSvg,
       terminalIconSvg: environmentsData.terminalIconSvg,
+
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
     };
   },
 
   computed: {
     scope() {
-      return this.$options.getQueryParameter('scope');
+      return gl.utils.getParameterByName('scope');
     },
 
     canReadEnvironmentParsed() {
-      return this.$options.convertPermissionToBoolean(this.canReadEnvironment);
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
     },
 
     canCreateDeploymentParsed() {
-      return this.$options.convertPermissionToBoolean(this.canCreateDeployment);
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
     },
 
     canCreateEnvironmentParsed() {
-      return this.$options.convertPermissionToBoolean(this.canCreateEnvironment);
+      return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
     },
+
   },
 
   /**
@@ -60,19 +68,25 @@ module.exports = Vue.component('environment-component', {
    * Toggles loading property.
    */
   created() {
-    const scope = this.$options.getQueryParameter('scope') || this.visibility;
-    const endpoint = `${this.endpoint}?scope=${scope}`;
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
 
     const service = new EnvironmentsService(endpoint);
 
     this.isLoading = true;
 
     return service.all()
-      .then(resp => resp.json())
-      .then((json) => {
-        this.store.storeAvailableCount(json.available_count);
-        this.store.storeStoppedCount(json.stopped_count);
-        this.store.storeEnvironments(json.environments);
+      .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;
@@ -83,41 +97,30 @@ module.exports = Vue.component('environment-component', {
       });
   },
 
-  /**
-   * Transforms the url parameter into an object and
-   * returns the one requested.
-   *
-   * @param  {String} param
-   * @returns {String}       The value of the requested parameter.
-   */
-  getQueryParameter(parameter) {
-    return window.location.search.substring(1).split('&').reduce((acc, param) => {
-      const paramSplited = param.split('=');
-      acc[paramSplited[0]] = paramSplited[1];
-      return acc;
-    }, {})[parameter];
-  },
-
-  /**
-   * Converts permission provided as strings to booleans.
-   * @param  {String} string
-   * @returns {Boolean}
-   */
-  convertPermissionToBoolean(string) {
-    return string === 'true';
-  },
-
   methods: {
     toggleRow(model) {
       return this.store.toggleFolder(model.name);
     },
+
+    /**
+     * 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;
+    },
   },
 
   template: `
     <div :class="cssContainerClass">
       <div class="top-area">
         <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === undefined }">
+          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
             <a :href="projectEnvironmentsPath">
               Available
               <span class="badge js-available-environments-count">
@@ -168,30 +171,20 @@ module.exports = Vue.component('environment-component', {
 
         <div class="table-holder"
           v-if="!isLoading && state.environments.length > 0">
-          <table class="table ci-table environments">
-            <thead>
-              <tr>
-                <th class="environments-name">Environment</th>
-                <th class="environments-deploy">Last deployment</th>
-                <th class="environments-build">Job</th>
-                <th class="environments-commit">Commit</th>
-                <th class="environments-date">Updated</th>
-                <th class="hidden-xs environments-actions"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <template v-for="model in state.environments"
-                v-bind:model="model">
-                <tr is="environment-item"
-                  :model="model"
-                  :can-create-deployment="canCreateDeploymentParsed"
-                  :can-read-environment="canReadEnvironmentParsed"
-                  :play-icon-svg="playIconSvg"
-                  :terminal-icon-svg="terminalIconSvg"
-                  :commit-icon-svg="commitIconSvg"></tr>
-              </template>
-            </tbody>
-          </table>
+
+          <environment-table
+            :environments="state.environments"
+            :can-create-deployment="canCreateDeploymentParsed"
+            :can-read-environment="canReadEnvironmentParsed"
+            :play-icon-svg="playIconSvg"
+            :terminal-icon-svg="terminalIconSvg"
+            :commit-icon-svg="commitIconSvg">
+          </environment-table>
+
+          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+            :change="changePage"
+            :pageInfo="state.paginationInformation">
+          </table-pagination>
         </div>
       </div>
     </div>