Use new store and service

2 files changed, 46 insertions, 23 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/index.js b/app/assets/javascripts/vue_pipelines_index/index.js
index a90bd1518e9..79541765891 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js
+++ b/app/assets/javascripts/vue_pipelines_index/index.js
@@ -1,8 +1,6 @@
-/* eslint-disable no-param-reassign */
 /* global Vue, VueResource, gl */
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-require('../lib/utils/common_utils');
 require('../vue_shared/vue_resource_interceptor');
 require('./pipelines');
 
@@ -13,17 +11,13 @@ $(() => new Vue({
     const project = document.querySelector('.pipelines');
 
     return {
-      scope: project.dataset.url,
-      store: new gl.PipelineStore(),
+      endpoint: project.dataset.url,
     };
   },
   components: {
     'vue-pipelines': gl.VuePipelines,
   },
   template: `
-    <vue-pipelines
-      :scope="scope"
-      :store="store">
-    </vue-pipelines>
+    <vue-pipelines :endpoint="endpoint" />
   `,
 }));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 601ef41e917..57be58f0950 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -1,40 +1,45 @@
-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
+/* global Vue, gl, Flash */
+/* eslint-disable no-param-reassign, no-new */
+import '~/flash';
+import CommitPipelinesStoreWithTimeAgo from '../commit/pipelines/pipelines_store';
+import PipelinesService from './services/pipelines_service';
+import PipelinesStore from './stores/pipelines_store';
 
 window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
-require('./store');
 require('../vue_shared/components/pipelines_table');
-const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
 
+    props: {
+      endpoint: {
+        type: String,
+        required: true,
+      },
+    },
+
     components: {
       'gl-pagination': gl.VueGlPagination,
       'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
     },
 
     data() {
+      const store = new PipelinesStore();
+
       return {
-        pipelines: [],
-        timeLoopInterval: '',
-        intervalId: '',
+        store,
+        state: store.state,
         apiScope: 'all',
-        pageInfo: {},
         pagenum: 1,
-        count: {},
         pageRequest: false,
       };
     },
-    props: ['scope', 'store'],
+
     created() {
-      const pagenum = gl.utils.getParameterByName('page');
-      const scope = gl.utils.getParameterByName('scope');
-      if (pagenum) this.pagenum = pagenum;
-      if (scope) this.apiScope = scope;
+      this.service = new PipelinesService(this.endpoint);
 
-      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+      this.fetchPipelines();
     },
 
     beforeUpdate() {
@@ -55,6 +60,30 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         gl.utils.visitUrl(param);
         return param;
       },
+
+      fetchPipelines() {
+        const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
+        const scope = gl.utils.getParameterByName('scope') || this.apiScope;
+
+        this.pageRequest = true;
+        return this.service.getPipelines(scope, pageNumber)
+          .then(resp => ({
+            headers: resp.headers,
+            body: resp.json(),
+          }))
+          .then((response) => {
+            this.store.storeCount(response.body.count);
+            this.store.storePipelines(response.body.pipelines);
+            this.store.storePagination(response.headers);
+          })
+          .then(() => {
+            this.pageRequest = false;
+          })
+          .catch(() => {
+            this.pageRequest = false;
+            new Flash('An error occurred while fetching the pipelines, please reload the page again.');
+          });
+      },
     },
     template: `
       <div>