Transform vue_pipelines index into a non-dependent table component.

3 files changed, 76 insertions, 66 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
index d2547f0b4a8..d42f2d15f19 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
@@ -1,11 +1,10 @@
 /* eslint-disable no-new */
-/* global Vue, VueResource */
+/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
 //= require vue
+//= require_tree .
+//= require vue
 //= require vue-resource
-//= require ./pipelines_store
-//= require ./pipelines_service
-//= require vue_shared/components/commit
 //= require vue_shared/vue_resource_interceptor
 //= require vue_shared/components/pipelines_table
 
@@ -21,18 +20,23 @@
  * Necessary SVG in the table are provided as props. This should be refactored
  * as soon as we have Webpack and can load them directly into JS files.
  */
-(() => {
+$(() => {
   window.gl = window.gl || {};
-  gl.Commits = gl.Commits || {};
+  gl.commits = gl.commits || {};
+  gl.commits.pipelines = gl.commits.pipelines || {};
 
-  if (gl.Commits.PipelinesTableView) {
-    gl.Commits.PipelinesTableView.$destroy(true);
+  if (gl.commits.PipelinesTableView) {
+    gl.commits.PipelinesTableView.$destroy(true);
   }
 
-  gl.Commits.PipelinesTableView = new Vue({
+  gl.commits.pipelines.PipelinesTableView = new Vue({
 
     el: document.querySelector('#commit-pipeline-table-view'),
 
+    components: {
+      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+    },
+
     /**
      * Accesses the DOM to provide the needed data.
      * Returns the necessary props to render `pipelines-table-component` component.
@@ -41,21 +45,70 @@
      */
     data() {
       const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
+      const svgsData = document.querySelector('.pipeline-svgs').dataset;
+      const store = gl.commits.pipelines.PipelinesStore.create();
+
+      // Transform svgs DOMStringMap to a plain Object.
+      const svgsObject = Object.keys(svgsData).reduce((acc, element) => {
+        acc[element] = svgsData[element];
+        return acc;
+      }, {});
 
       return {
-        scope: pipelinesTableData.pipelinesData,
-        store: new CommitsPipelineStore(),
-        service: new PipelinesService(),
-        svgs: pipelinesTableData,
+        endpoint: pipelinesTableData.pipelinesData,
+        svgs: svgsObject,
+        store,
+        state: store.state,
+        isLoading: false,
       };
     },
 
-    components: {
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+    /**
+     * When the component is created the service to fetch the data will be
+     * initialized with the correct endpoint.
+     *
+     * A request to fetch the pipelines will be made.
+     * In case of a successfull response we will store the data in the provided
+     * store, in case of a failed response we need to warn the user.
+     *
+     */
+    created() {
+      gl.pipelines.pipelinesService = new PipelinesService(this.endpoint);
+
+      this.isLoading = true;
+
+      return gl.pipelines.pipelinesService.all()
+        .then(response => response.json())
+        .then((json) => {
+          this.store.store(json);
+          this.isLoading = false;
+        }).catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the pipelines.', 'alert');
+        });
     },
 
     template: `
-      <pipelines-table-component :scope='scope' :store='store' :svgs='svgs'></pipelines-table-component>
+      <div>
+        <div class="pipelines realtime-loading" v-if='isLoading'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!isLoading && state.pipelines.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            You don't have any pipelines.
+          </h2>
+          Put get started with pipelines button here!!!
+        </div>
+
+        <div class="table-holder" v-if='!isLoading && state.pipelines.length > 0'>
+          <pipelines-table-component
+            :pipelines='state.pipelines'
+            :svgs='svgs'>
+          </pipelines-table-component>
+        </div>
+      </div>
     `,
   });
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
index 7d773e0d361..1e6aa73d9cf 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6
@@ -5,12 +5,8 @@
  * Pipelines service.
  *
  * Used to fetch the data used to render the pipelines table.
- * Used Vue.Resource
+ * Uses Vue.Resource
  */
-
-window.gl = window.gl || {};
-gl.pipelines = gl.pipelines || {};
-
 class PipelinesService {
   constructor(root) {
     Vue.http.options.root = root;
@@ -36,42 +32,3 @@ class PipelinesService {
     return this.pipelines.get();
   }
 }
-
-gl.pipelines.PipelinesService = PipelinesService;
-
-// const pageValues = (headers) => {
-//   const normalized = gl.utils.normalizeHeaders(headers);
-//
-//   const paginationInfo = {
-//     perPage: +normalized['X-PER-PAGE'],
-//     page: +normalized['X-PAGE'],
-//     total: +normalized['X-TOTAL'],
-//     totalPages: +normalized['X-TOTAL-PAGES'],
-//     nextPage: +normalized['X-NEXT-PAGE'],
-//     previousPage: +normalized['X-PREV-PAGE'],
-//   };
-//
-//   return paginationInfo;
-// };
-
-// gl.PipelineStore = class {
-//   fetchDataLoop(Vue, pageNum, url, apiScope) {
-//     const goFetch = () =>
-//       this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
-//         .then((response) => {
-//           const pageInfo = pageValues(response.headers);
-//           this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
-//
-//           const res = JSON.parse(response.body);
-//           this.count = Object.assign({}, this.count, res.count);
-//           this.pipelines = Object.assign([], this.pipelines, res);
-//
-//           this.pageRequest = false;
-//         }, () => {
-//           this.pageRequest = false;
-//           return new Flash('Something went wrong on our end.');
-//         });
-//
-//     goFetch();
-//   }
-// };
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
index bc748bece5d..5c2e1b33cd1 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
+++ b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6
@@ -6,12 +6,14 @@
  * Pipelines' Store for commits view.
  *
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
- *
- * TODO: take care of timeago instances in here
  */
 
 (() => {
-  const CommitPipelineStore = {
+  window.gl = window.gl || {};
+  gl.commits = gl.commits || {};
+  gl.commits.pipelines = gl.commits.pipelines || {};
+
+  gl.commits.pipelines.PipelinesStore = {
     state: {},
 
     create() {
@@ -20,11 +22,9 @@
       return this;
     },
 
-    storePipelines(pipelines = []) {
+    store(pipelines = []) {
       this.state.pipelines = pipelines;
       return pipelines;
     },
   };
-
-  return CommitPipelineStore;
 })();