Adds pagination to pipelines table in merge request page

1 files changed, 38 insertions, 0 deletions

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) {