First iteration

Create shared folder for vue common files
Update paths

Second iteration - refactor main component to be 100% reusable between the 3 tables

3 files changed, 168 insertions, 0 deletions

diff --git a/app/assets/javascripts/commit/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines_bundle.js.es6
new file mode 100644
index 00000000000..d2547f0b4a8
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines_bundle.js.es6
@@ -0,0 +1,61 @@
+/* eslint-disable no-new */
+/* global Vue, VueResource */
+
+//= 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
+
+/**
+ * Commits View > Pipelines Tab > Pipelines Table.
+ *
+ * Renders Pipelines table in pipelines tab in the commits show view.
+ *
+ * Uses `pipelines-table-component` to render Pipelines table with an API call.
+ * Endpoint is provided in HTML and passed as scope.
+ * We need a store to make the request and store the received environemnts.
+ *
+ * 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 || {};
+
+  if (gl.Commits.PipelinesTableView) {
+    gl.Commits.PipelinesTableView.$destroy(true);
+  }
+
+  gl.Commits.PipelinesTableView = new Vue({
+
+    el: document.querySelector('#commit-pipeline-table-view'),
+
+    /**
+     * Accesses the DOM to provide the needed data.
+     * Returns the necessary props to render `pipelines-table-component` component.
+     *
+     * @return {Object} Props for `pipelines-table-component`
+     */
+    data() {
+      const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
+
+      return {
+        scope: pipelinesTableData.pipelinesData,
+        store: new CommitsPipelineStore(),
+        service: new PipelinesService(),
+        svgs: pipelinesTableData,
+      };
+    },
+
+    components: {
+      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+    },
+
+    template: `
+      <pipelines-table-component :scope='scope' :store='store' :svgs='svgs'></pipelines-table-component>
+    `,
+  });
+});
diff --git a/app/assets/javascripts/commit/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines_service.js.es6
new file mode 100644
index 00000000000..7d773e0d361
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines_service.js.es6
@@ -0,0 +1,77 @@
+/* globals Vue */
+/* eslint-disable no-unused-vars, no-param-reassign */
+
+/**
+ * Pipelines service.
+ *
+ * Used to fetch the data used to render the pipelines table.
+ * Used Vue.Resource
+ */
+
+window.gl = window.gl || {};
+gl.pipelines = gl.pipelines || {};
+
+class PipelinesService {
+  constructor(root) {
+    Vue.http.options.root = root;
+
+    this.pipelines = Vue.resource(root);
+
+    Vue.http.interceptors.push((request, next) => {
+      // needed in order to not break the tests.
+      if ($.rails) {
+        request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+      }
+      next();
+    });
+  }
+
+  /**
+   * Given the root param provided when the class is initialized, will
+   * make a GET request.
+   *
+   * @return {Promise}
+   */
+  all() {
+    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_store.js.es6 b/app/assets/javascripts/commit/pipelines_store.js.es6
new file mode 100644
index 00000000000..bc748bece5d
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines_store.js.es6
@@ -0,0 +1,30 @@
+/* global gl, Flash */
+/* eslint-disable no-param-reassign, no-underscore-dangle */
+/*= require vue_realtime_listener/index.js */
+
+/**
+ * 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 = {
+    state: {},
+
+    create() {
+      this.state.pipelines = [];
+
+      return this;
+    },
+
+    storePipelines(pipelines = []) {
+      this.state.pipelines = pipelines;
+      return pipelines;
+    },
+  };
+
+  return CommitPipelineStore;
+})();