diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-05 17:36:35 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-05 17:36:35 +0000 |
commit | d5a223bdec686419c32072795eaebfc3f96a7c42 (patch) | |
tree | 4b0cb4ae9bb734abd0d1da4f6afe2690b05ddfbc /app/assets | |
parent | 2621ce5ca08445b365508cbd536c0ab6d0b69a25 (diff) | |
download | gitlab-ce-d5a223bdec686419c32072795eaebfc3f96a7c42.tar.gz |
Use webpack
Diffstat (limited to 'app/assets')
4 files changed, 55 insertions, 74 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 index b21d13842a4..3a06e41848b 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 @@ -1,9 +1,10 @@ /* eslint-disable no-new, no-param-reassign */ /* global Vue, CommitsPipelineStore, PipelinesService, Flash */ -//= require vue -//= require_tree . - +window.Vue = require('vue'); +require('./pipelines_store'); +require('./pipelines_service'); +require('./pipelines_table'); /** * Commits View > Pipelines Tab > Pipelines Table. * Merge Request View > Pipelines Tab > Pipelines Table. diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 index f4ed986b0c5..ef3902fba50 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 @@ -8,18 +8,8 @@ * Uses Vue.Resource */ 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(); - }); + constructor(endpoint) { + this.pipelines = Vue.resource(endpoint); } /** @@ -28,7 +18,7 @@ class PipelinesService { * * @return {Promise} */ - all() { + get() { return this.pipelines.get(); } } diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 index fe90e7bac0a..178e7bc9cd7 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 @@ -5,50 +5,43 @@ * Used to store the Pipelines rendered in the commit view in the pipelines table. */ -(() => { - window.gl = window.gl || {}; - gl.commits = gl.commits || {}; - gl.commits.pipelines = gl.commits.pipelines || {}; - - gl.commits.pipelines.PipelinesStore = { - state: {}, - - create() { - this.state.pipelines = []; - - return this; - }, - - store(pipelines = []) { - this.state.pipelines = pipelines; - - return pipelines; - }, - - /** - * Once the data is received we will start the time ago loops. - * - * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we - * update the time to show how long as passed. - * - */ - startTimeAgoLoops() { - const startTimeLoops = () => { - this.timeLoopInterval = setInterval(() => { - this.$children[0].$children.reduce((acc, component) => { - const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0]; - acc.push(timeAgoComponent); - return acc; - }, []).forEach(e => e.changeTime()); - }, 10000); - }; - - startTimeLoops(); - - const removeIntervals = () => clearInterval(this.timeLoopInterval); - const startIntervals = () => startTimeLoops(); - - gl.VueRealtimeListener(removeIntervals, startIntervals); - }, - }; -})(); +class PipelinesStore { + constructor() { + this.state = {}; + this.state.pipelines = []; + } + + storePipelines(pipelines = []) { + this.state.pipelines = pipelines; + + return pipelines; + } + + /** + * Once the data is received we will start the time ago loops. + * + * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we + * update the time to show how long as passed. + * + */ + startTimeAgoLoops() { + const startTimeLoops = () => { + this.timeLoopInterval = setInterval(() => { + this.$children[0].$children.reduce((acc, component) => { + const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0]; + acc.push(timeAgoComponent); + return acc; + }, []).forEach(e => e.changeTime()); + }, 10000); + }; + + startTimeLoops(); + + const removeIntervals = () => clearInterval(this.timeLoopInterval); + const startIntervals = () => startTimeLoops(); + + gl.VueRealtimeListener(removeIntervals, startIntervals); + } +} + +return PipelinesStore; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 index 18d57333f61..93fca933b0d 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 @@ -1,11 +1,11 @@ /* eslint-disable no-new, no-param-reassign */ /* global Vue, CommitsPipelineStore, PipelinesService, Flash */ -//= require vue -//= require vue-resource -//= require vue_shared/vue_resource_interceptor -//= require vue_shared/components/pipelines_table -//= require vue_realtime_listener/index +window.Vue = require('vue'); +window.Vue.use(require('vue-resource')); +require('../../vue_shared/vue_resource_interceptor'); +require('../../vue_shared/components/pipelines_table'); +require('../vue_realtime_listener/index'); /** * @@ -38,13 +38,10 @@ data() { const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset; const svgsData = document.querySelector('.pipeline-svgs').dataset; - const store = gl.commits.pipelines.PipelinesStore.create(); + const store = new gl.commits.pipelines.PipelinesStore(); // Transform svgs DOMStringMap to a plain Object. - const svgsObject = Object.keys(svgsData).reduce((acc, element) => { - acc[element] = svgsData[element]; - return acc; - }, {}); + const svgsObject = gl.utils.DOMStringMapToObject(svgsData); return { endpoint: pipelinesTableData.endpoint, @@ -71,7 +68,7 @@ return gl.pipelines.pipelinesService.all() .then(response => response.json()) .then((json) => { - this.store.store(json); + this.store.storePipelines(json); this.store.startTimeAgoLoops.call(this, Vue); this.isLoading = false; }) |