diff options
Diffstat (limited to 'app/assets/javascripts/vue_pipelines_index/pipelines.js')
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/pipelines.js | 59 |
1 files changed, 44 insertions, 15 deletions
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> |