diff options
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/index.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/pipelines.js | 59 |
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> |