diff options
8 files changed, 68 insertions, 46 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js index 1a091f5265f..3c5b6f21edf 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js @@ -55,19 +55,7 @@ export default { beforeMount() { this.pipelinesService = new PipelinesService(this.endpoint); - this.isLoading = true; - return this.pipelinesService.getPipelines() - .then(response => response.json()) - .then((json) => { - // depending of the endpoint the response can either bring a `pipelines` key or not. - const pipelines = json.pipelines || json; - this.store.storePipelines(pipelines); - this.isLoading = false; - }) - .catch(() => { - this.isLoading = false; - new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert'); - }); + this.fetchPipelines(); }, beforeUpdate() { @@ -76,6 +64,24 @@ export default { } }, + methods: { + fetchPipelines() { + this.isLoading = true; + return this.pipelinesService.getPipelines() + .then(response => response.json()) + .then((json) => { + // depending of the endpoint the response can either bring a `pipelines` key or not. + const pipelines = json.pipelines || json; + this.store.storePipelines(pipelines); + this.isLoading = false; + }) + .catch(() => { + this.isLoading = false; + new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert'); + }); + }, + }, + template: ` <div class="pipelines"> <div class="realtime-loading" v-if="isLoading"> @@ -93,7 +99,8 @@ export default { v-if="!isLoading && state.pipelines.length > 0"> <pipelines-table-component :pipelines="state.pipelines" - :service="pipelinesService"/> + :service="pipelinesService" + v-on:refreshPipelines="fetchPipelines"/> </div> </div> `, diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.js b/app/assets/javascripts/pipelines/components/pipelines_actions.js index bd0e3a123a2..5556265820c 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.js +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.js @@ -2,6 +2,7 @@ /* global Flash */ import '~/flash'; import playIconSvg from 'icons/_icon_play.svg'; +import eventHub from '../event_hub'; export default { props: { @@ -30,6 +31,7 @@ export default { this.service.postAction(endpoint) .then(() => { this.isLoading = false; + eventHub.$emit('refreshPipelines'); }) .catch(() => { this.isLoading = false; diff --git a/app/assets/javascripts/pipelines/components/pipelines_cancel_button.js b/app/assets/javascripts/pipelines/components/pipelines_cancel_button.js index 81ce9526143..f3e13b8d395 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_cancel_button.js +++ b/app/assets/javascripts/pipelines/components/pipelines_cancel_button.js @@ -1,6 +1,7 @@ /* eslint-disable no-new */ /* global Flash */ import '~/flash'; +import eventHub from '../event_hub'; export default { props: { @@ -28,6 +29,7 @@ export default { this.service.postAction(this.cancel_path) .then(() => { this.isLoading = false; + eventHub.$emit('refreshPipelines'); }) .catch(() => { this.isLoading = false; diff --git a/app/assets/javascripts/pipelines/components/pipelines_retry_button.js b/app/assets/javascripts/pipelines/components/pipelines_retry_button.js index 915188c0913..d3d4e11afd6 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_retry_button.js +++ b/app/assets/javascripts/pipelines/components/pipelines_retry_button.js @@ -1,6 +1,7 @@ /* eslint-disable no-new */ /* global Flash */ import '~/flash'; +import eventHub from '../event_hub'; export default { props: { @@ -28,6 +29,7 @@ export default { this.service.postAction(this.retry_path) .then(() => { this.isLoading = false; + eventHub.$emit('refreshPipelines'); }) .catch(() => { this.isLoading = false; diff --git a/app/assets/javascripts/pipelines/event_hub.js b/app/assets/javascripts/pipelines/event_hub.js new file mode 100644 index 00000000000..dd66933494a --- /dev/null +++ b/app/assets/javascripts/pipelines/event_hub.js @@ -0,0 +1,5 @@ +import Vue from 'vue'; + +const eventHub = new Vue(); + +export default eventHub; diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js index c259bd45c95..2b8ec25f1e1 100644 --- a/app/assets/javascripts/pipelines/pipelines.js +++ b/app/assets/javascripts/pipelines/pipelines.js @@ -1,10 +1,11 @@ /* eslint-disable no-new */ /* global Flash */ - +import Vue from 'vue'; import PipelinesService from './services/pipelines_service'; import PipelinesStore from './stores/pipelines_store'; import PipelinesTable from '../vue_shared/components/pipelines_table'; import TablePagination from '../vue_shared/components/table_pagination'; +import eventHub from './event_hub'; export default { @@ -33,31 +34,11 @@ export default { }, created() { - const pageNumber = gl.utils.getParameterByName('page') || this.pagenum; - const scope = gl.utils.getParameterByName('scope') || this.apiScope; - - const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`; - - this.service = new PipelinesService(endpoint); - - this.pageRequest = true; - return this.service.getPipelines(endpoint) - .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.'); - }); + this.service = new PipelinesService(this.endpoint); + + this.fetchPipelines(); + + eventHub.$on('refreshPipelines', this.fetchPipelines); }, beforeUpdate() { @@ -78,6 +59,30 @@ export default { 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> @@ -95,7 +100,7 @@ export default { <div class="table-holder" v-if="!pageRequest && state.pipelines.length"> <pipelines-table-component :pipelines="state.pipelines" - :service="service"/> + :service="service" /> </div> <gl-pagination @@ -103,7 +108,7 @@ export default { :pagenum="pagenum" :change="change" :count="state.count.all" - :pageInfo="state.pageInfo"/> + :pageInfo="state.pageInfo" /> </div> `, }; diff --git a/app/assets/javascripts/pipelines/services/pipelines_service.js b/app/assets/javascripts/pipelines/services/pipelines_service.js index c5f6d46f946..72fd4d591b9 100644 --- a/app/assets/javascripts/pipelines/services/pipelines_service.js +++ b/app/assets/javascripts/pipelines/services/pipelines_service.js @@ -20,8 +20,8 @@ export default class PipelinesService { this.pipelines = Vue.resource(endpoint); } - getPipelines() { - return this.pipelines.get(); + getPipelines(scope, page) { + return this.pipelines.get({ scope, page }); } /** diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js index 7a2a408908e..2e38c4caed2 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js +++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js @@ -206,8 +206,7 @@ export default { <pipeline-artifacts v-if="pipeline.details.artifacts.length" - :artifacts="pipeline.details.artifacts" - :service="service" /> + :artifacts="pipeline.details.artifacts" /> <pipeline-retry-button v-if="pipeline.flags.retryable" |