Adds pagination to pipelines table in merge request page28249-add-pagination

4 files changed, 64 insertions, 40 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index a2aa3d197e3..82532539c9c 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -2,9 +2,15 @@
 import PipelinesService from '../../pipelines/services/pipelines_service';
 import PipelineStore from '../../pipelines/stores/pipelines_store';
 import pipelinesMixin from '../../pipelines/mixins/pipelines';
+import TablePagination from '../../vue_shared/components/table_pagination.vue';
+import { getParameterByName } from '../../lib/utils/common_utils';
+import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
 export default {
-  mixins: [pipelinesMixin],
+  components: {
+    TablePagination,
+  },
+  mixins: [pipelinesMixin, CIPaginationMixin],
   props: {
     endpoint: {
       type: String,
@@ -35,6 +41,8 @@ export default {
     return {
       store,
       state: store.state,
+      page: getParameterByName('page') || '1',
+      requestData: {},
     };
   },
 
@@ -48,11 +56,14 @@ export default {
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
+    this.requestData = { page: this.page };
   },
   methods: {
     successCallback(resp) {
       // depending of the endpoint the response can either bring a `pipelines` key or not.
       const pipelines = resp.data.pipelines || resp.data;
+
+      this.store.storePagination(resp.headers);
       this.setCommonData(pipelines);
 
       const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
@@ -97,5 +108,11 @@ export default {
         :view-type="viewType"
       />
     </div>
+
+    <table-pagination
+      v-if="shouldRenderPagination"
+      :change="onChangePage"
+      :page-info="state.pageInfo"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index ea526cf1309..fcd8a54c9c1 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -155,14 +155,6 @@ export default {
       );
     },
 
-    shouldRenderPagination() {
-      return (
-        !this.isLoading &&
-        this.state.pipelines.length &&
-        this.state.pageInfo.total > this.state.pageInfo.perPage
-      );
-    },
-
     emptyTabMessage() {
       const { scopes } = this.$options;
       const possibleScopes = [scopes.pending, scopes.running, scopes.finished];
@@ -232,36 +224,6 @@ export default {
         this.setCommonData(resp.data.pipelines);
       }
     },
-    /**
-     * Handles URL and query parameter changes.
-     * When the user uses the pagination or the tabs,
-     *  - update URL
-     *  - Make API request to the server with new parameters
-     *  - Update the polling function
-     *  - Update the internal state
-     */
-    updateContent(parameters) {
-      this.updateInternalState(parameters);
-
-      // fetch new data
-      return this.service
-        .getPipelines(this.requestData)
-        .then(response => {
-          this.isLoading = false;
-          this.successCallback(response);
-
-          // restart polling
-          this.poll.restart({ data: this.requestData });
-        })
-        .catch(() => {
-          this.isLoading = false;
-          this.errorCallback();
-
-          // restart polling
-          this.poll.restart({ data: this.requestData });
-        });
-    },
-
     handleResetRunnersCache(endpoint) {
       this.isResetCacheButtonLoading = true;
 
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 8929b397f6c..85781f548c6 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -23,6 +23,15 @@ export default {
       hasMadeRequest: false,
     };
   },
+  computed: {
+    shouldRenderPagination() {
+      return (
+        !this.isLoading &&
+        this.state.pipelines.length &&
+        this.state.pageInfo.total > this.state.pageInfo.perPage
+      );
+    },
+  },
   beforeMount() {
     this.poll = new Poll({
       resource: this.service,
@@ -65,6 +74,35 @@ export default {
     this.poll.stop();
   },
   methods: {
+    /**
+     * Handles URL and query parameter changes.
+     * When the user uses the pagination or the tabs,
+     *  - update URL
+     *  - Make API request to the server with new parameters
+     *  - Update the polling function
+     *  - Update the internal state
+     */
+    updateContent(parameters) {
+      this.updateInternalState(parameters);
+
+      // fetch new data
+      return this.service
+        .getPipelines(this.requestData)
+        .then(response => {
+          this.isLoading = false;
+          this.successCallback(response);
+
+          // restart polling
+          this.poll.restart({ data: this.requestData });
+        })
+        .catch(() => {
+          this.isLoading = false;
+          this.errorCallback();
+
+          // restart polling
+          this.poll.restart({ data: this.requestData });
+        });
+    },
     updateTable() {
       // Cancel ongoing request
       if (this.isMakingRequest) {
diff --git a/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js b/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
index 67a1632269e..f9e3f3df0cc 100644
--- a/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
+++ b/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
@@ -14,7 +14,14 @@ export default {
 
     onChangePage(page) {
       /* URLS parameters are strings, we need to parse to match types */
-      this.updateContent({ scope: this.scope, page: Number(page).toString() });
+      const params = {
+        page: Number(page).toString(),
+      };
+
+      if (this.scope) {
+        params.scope = this.scope;
+      }
+      this.updateContent(params);
     },
 
     updateInternalState(parameters) {