constant variable hardcoding

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

@@ -2,6 +2,14 @@
 /* eslint-disable no-param-reassign, no-plusplus */
 
 ((gl) => {
+  const PAGINATION_SIZE = 30;
+  const PAGINATION_UI_BUTTON_LIMIT = 4;
+  const SPREAD = '...';
+  const PREV = 'Prev';
+  const NEXT = 'Next';
+  const FIRST = '<< First';
+  const LAST = 'Last >>';
+
   gl.VueGlPagination = Vue.extend({
     props: [
       'changepage',
@@ -10,40 +18,42 @@
     ],
     computed: {
       last() {
-        return Math.ceil(+this.count / 30);
+        return Math.ceil(+this.count / PAGINATION_SIZE);
       },
       getItems() {
         const total = +this.last;
         const page = +this.pagenum;
         const items = [];
 
-        if (page > 1) items.push({ title: '<< First', where: 1 });
+        if (page > 1) items.push({ title: FIRST, where: 1 });
 
         if (page > 1) {
-          items.push({ title: 'Prev', where: page - 1 });
+          items.push({ title: PREV, where: page - 1 });
         } else {
-          items.push({ title: 'Prev', where: page - 1, disabled: true });
+          items.push({ title: PREV, where: page - 1, disabled: true });
         }
 
-        if (page > 6) items.push({ title: '...', separator: true });
+        if (page > 6) items.push({ title: SPREAD, separator: true });
 
-        const start = Math.max(page - 4, 1);
-        const end = Math.min(page + 4, total);
+        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
 
         for (let i = start; i <= end; i++) {
           const isActive = i === page;
           items.push({ title: i, active: isActive, where: i });
         }
 
-        if (total - page > 4) items.push({ title: '...', separator: true });
+        if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+          items.push({ title: SPREAD, separator: true });
+        }
 
         if (page === total) {
-          items.push({ title: 'Next', where: page + 1, disabled: true });
+          items.push({ title: NEXT, where: page + 1, disabled: true });
         } else if (total - page >= 1) {
-          items.push({ title: 'Next', where: page + 1 });
+          items.push({ title: NEXT, where: page + 1 });
         }
 
-        if (total - page >= 1) items.push({ title: 'Last >>', where: total });
+        if (total - page >= 1) items.push({ title: LAST, where: total });
 
         return items;
       },

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

@@ -29,7 +29,7 @@
       store: new gl.PipelineStore(),
     },
     components: {
-      'vue-pipelines': gl.VuePipeLines,
+      'vue-pipelines': gl.VuePipelines,
     },
     template: `
       <div>

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

@@ -2,7 +2,13 @@
 /* eslint-disable no-param-reassign, no-bitwise*/
 
 ((gl) => {
-  gl.VuePipeLines = Vue.extend({
+  const SPREAD = '...';
+  const PREV = 'Prev';
+  const NEXT = 'Next';
+  const FIRST = '<< First';
+  const LAST = 'Last >>';
+
+  gl.VuePipelines = Vue.extend({
     components: {
       runningPipeline: gl.VueRunningPipeline,
       pipelineActions: gl.VuePipelineActions,
@@ -41,12 +47,12 @@
     methods: {
       changepage(e, last) {
         const text = e.target.innerText;
-        if (text === '...') return;
+        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 === '<< First') this.pagenum = 1;
+        if (text === LAST) this.pagenum = last;
+        if (text === NEXT) this.pagenum = +this.pagenum + 1;
+        if (text === PREV) this.pagenum = +this.pagenum - 1;
+        if (text === FIRST) this.pagenum = 1;
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);

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

@@ -2,6 +2,9 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
+  const PAGINATION_LIMIT = 31;
+  const SLICE_LIMIT = 29;
+
   class PipelineUpdater {
     constructor(pipelines) {
       this.pipelines = pipelines;
@@ -11,8 +14,8 @@
         });
       };
       this.currentPageSlicer = (update) => {
-        if (update.length <= 30) return update;
-        return update.slice(0, 29);
+        if (update.length < PAGINATION_LIMIT) return update;
+        return update.slice(0, SLICE_LIMIT);
       };
     }