use API values for pagination

app/assets/javascripts/vue_pagination/index.js.es6

@@ -2,7 +2,6 @@
 /* eslint-disable no-param-reassign, no-plusplus */
 
 ((gl) => {
-  const PAGINATION_SIZE = 30;
   const PAGINATION_UI_BUTTON_LIMIT = 4;
   const SPREAD = '...';
   const PREV = 'Prev';
@@ -13,24 +12,26 @@
   gl.VueGlPagination = Vue.extend({
     props: [
       'changepage',
-      'count',
-      'pagenum',
+      'pageInfo',
     ],
     computed: {
-      last() {
-        return Math.ceil(+this.count / PAGINATION_SIZE);
+      prev() {
+        return this.pageInfo.previousPage;
+      },
+      next() {
+        return this.pageInfo.nextPage;
       },
       getItems() {
-        const total = +this.last;
-        const page = +this.pagenum;
+        const total = this.pageInfo.totalPages;
+        const page = this.pageInfo.page;
         const items = [];
 
-        if (page > 1) items.push({ title: FIRST, where: 1 });
+        if (page > 1) items.push({ title: FIRST });
 
         if (page > 1) {
-          items.push({ title: PREV, where: page - 1 });
+          items.push({ title: PREV });
         } else {
-          items.push({ title: PREV, where: page - 1, disabled: true });
+          items.push({ title: PREV, disabled: true });
         }
 
         if (page > 6) items.push({ title: SPREAD, separator: true });
@@ -40,7 +41,7 @@
 
         for (let i = start; i <= end; i++) {
           const isActive = i === page;
-          items.push({ title: i, active: isActive, where: i });
+          items.push({ title: i, active: isActive });
         }
 
         if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
@@ -48,12 +49,12 @@
         }
 
         if (page === total) {
-          items.push({ title: NEXT, where: page + 1, disabled: true });
+          items.push({ title: NEXT, disabled: true });
         } else if (total - page >= 1) {
-          items.push({ title: NEXT, where: page + 1 });
+          items.push({ title: NEXT });
         }
 
-        if (total - page >= 1) items.push({ title: LAST, where: total });
+        if (total - page >= 1) items.push({ title: LAST });
 
         return items;
       },
@@ -69,7 +70,7 @@
             }'
           >
             <span
-              @click="changepage($event, item.where)"
+              @click="changepage($event)"
             >
               {{item.title}}
             </span>

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -35,8 +35,8 @@
         pipelines: [],
         timeLoopInterval: '',
         intervalId: '',
-        pagenum: 1,
         apiScope: 'all',
+        pageInfo: {},
         count: {
           all: 0,
           running_or_pending: 0,
@@ -64,13 +64,14 @@
       );
     },
     methods: {
-      changepage(e, last) {
+      changepage(e) {
         const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
         if (text === SPREAD) return;
         if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
-        if (text === LAST) this.pagenum = last;
-        if (text === NEXT) this.pagenum = +this.pagenum + 1;
-        if (text === PREV) this.pagenum = +this.pagenum - 1;
+        if (text === LAST) this.pagenum = totalPages;
+        if (text === NEXT) this.pagenum = nextPage;
+        if (text === PREV) this.pagenum = previousPage;
         if (text === FIRST) this.pagenum = 1;
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
@@ -141,10 +142,11 @@
           <i class="fa fa-spinner fa-spin"></i>
         </div>
         <gl-pagination
-          v-if='count.all > 30'
+          v-if='pageInfo.total > 30'
           :pagenum='pagenum'
           :changepage='changepage'
           :count='count.all'
+          :pageInfo='pageInfo'
         >
         </gl-pagination>
       </div>

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -2,6 +2,17 @@
 /* eslint-disable no-param-reassign, no-underscore-dangle */
 
 ((gl) => {
+  const pageValues = (headers) => {
+    const values = {};
+    values.perPage = +headers['X-Per-Page'];
+    values.page = +headers['X-Page'];
+    values.total = +headers['X-Total'];
+    values.totalPages = +headers['X-Total-Pages'];
+    values.nextPage = +headers['X-Next-Page'];
+    values.previousPage = +headers['X-Prev-Page'];
+    return values;
+  };
+
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
       const updatePipelineNums = (count) => {
@@ -14,9 +25,13 @@
       const goFetch = () =>
         this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
           .then((response) => {
+            const pageInfo = pageValues(response.headers);
+            Vue.set(this, 'pageInfo', pageInfo);
+
             const res = JSON.parse(response.body);
             Vue.set(this, 'pipelines', res.pipelines);
             Vue.set(this, 'count', res.count);
+
             updatePipelineNums(this.count);
             this.pageRequest = false;
           }, () => new Flash(