1 files changed, 87 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
new file mode 100644
index 00000000000..601ef41e917
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -0,0 +1,87 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+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({
+
+    components: {
+      'gl-pagination': gl.VueGlPagination,
+      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+    },
+
+    data() {
+      return {
+        pipelines: [],
+        timeLoopInterval: '',
+        intervalId: '',
+        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.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+    },
+
+    beforeUpdate() {
+      if (this.pipelines.length && this.$children) {
+        CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
+    methods: {
+      /**
+       * Will change the page number and update the URL.
+       *
+       * @param  {Number} pageNumber desired page to go to.
+       */
+      change(pageNumber) {
+        const param = gl.utils.setParamInURL('page', pageNumber);
+
+        gl.utils.visitUrl(param);
+        return param;
+      },
+    },
+    template: `
+      <div>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!pageRequest && pipelines.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            No pipelines to show
+          </h2>
+        </div>
+
+        <div class="table-holder" v-if='!pageRequest && pipelines.length'>
+          <pipelines-table-component :pipelines='pipelines'/>
+        </div>
+
+        <gl-pagination
+          v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
+          :pagenum='pagenum'
+          :change='change'
+          :count='count.all'
+          :pageInfo='pageInfo'
+        >
+        </gl-pagination>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));