1 files changed, 69 insertions, 16 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>
     `,
   });
 });