diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-09-27 14:13:17 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-09-27 14:13:17 +0100 |
commit | 49bd01cf2413011a834de7a53bf738597d1f7533 (patch) | |
tree | c1576c9b5166ba1481773f4a5a0982149666bec8 /app | |
parent | d5bce06df1ec36371db208d0aaf42d849eb63bcf (diff) | |
download | gitlab-ce-49bd01cf2413011a834de7a53bf738597d1f7533.tar.gz |
Uses new Vuex store in job log page
Removes old mediator and service pattern and uses the new store.
Middle step before moving everything into one single vue app
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/jobs/job_details_bundle.js | 45 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/job_details_mediator.js | 65 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/services/job_service.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/store/mutations.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/stores/job_store.js | 11 |
5 files changed, 26 insertions, 109 deletions
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js index a84324f14b2..0136ec4d194 100644 --- a/app/assets/javascripts/jobs/job_details_bundle.js +++ b/app/assets/javascripts/jobs/job_details_bundle.js @@ -1,34 +1,36 @@ +import { mapState } from 'vuex'; import Vue from 'vue'; -import JobMediator from './job_details_mediator'; -import jobHeader from './components/header.vue'; -import detailsBlock from './components/sidebar_details_block.vue'; +import Job from '../job'; +import JobHeader from './components/header.vue'; +import DetailsBlock from './components/sidebar_details_block.vue'; +import createStore from './store'; export default () => { const { dataset } = document.getElementById('js-job-details-vue'); - const mediator = new JobMediator({ endpoint: dataset.endpoint }); - mediator.fetchJob(); + // eslint-disable-next-line no-new + new Job(); + + const store = createStore(); + store.dispatch('setJobEndpoint', dataset.endpoint); + store.dispatch('fetchJob'); // Header // eslint-disable-next-line no-new new Vue({ el: '#js-build-header-vue', components: { - jobHeader, - }, - data() { - return { - mediator, - }; + JobHeader, }, - mounted() { - this.mediator.initBuildClass(); + store, + computed: { + ...mapState(['job', 'isLoading']), }, render(createElement) { return createElement('job-header', { props: { - isLoading: this.mediator.state.isLoading, - job: this.mediator.store.state.job, + isLoading: this.isLoading, + job: this.job, }, }); }, @@ -41,18 +43,17 @@ export default () => { new Vue({ el: detailsBlockElement, components: { - detailsBlock, + DetailsBlock, }, - data() { - return { - mediator, - }; + store, + computed: { + ...mapState(['job', 'isLoading']), }, render(createElement) { return createElement('details-block', { props: { - isLoading: this.mediator.state.isLoading, - job: this.mediator.store.state.job, + isLoading: this.isLoading, + job: this.job, runnerHelpUrl: dataset.runnerHelpUrl, terminalPath: detailsBlockDataset.terminalPath, }, diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js deleted file mode 100644 index 073e518baa0..00000000000 --- a/app/assets/javascripts/jobs/job_details_mediator.js +++ /dev/null @@ -1,65 +0,0 @@ -import Visibility from 'visibilityjs'; -import Flash from '../flash'; -import Poll from '../lib/utils/poll'; -import JobStore from './stores/job_store'; -import JobService from './services/job_service'; -import Job from '../job'; - -export default class JobMediator { - constructor(options = {}) { - this.options = options; - - this.store = new JobStore(); - this.service = new JobService(options.endpoint); - - this.state = { - isLoading: false, - }; - } - - initBuildClass() { - this.build = new Job(); - } - - fetchJob() { - this.poll = new Poll({ - resource: this.service, - method: 'getJob', - successCallback: response => this.successCallback(response), - errorCallback: () => this.errorCallback(), - }); - - if (!Visibility.hidden()) { - this.state.isLoading = true; - this.poll.makeRequest(); - } else { - this.getJob(); - } - - Visibility.change(() => { - if (!Visibility.hidden()) { - this.poll.restart(); - } else { - this.poll.stop(); - } - }); - } - - getJob() { - return this.service - .getJob() - .then(response => this.successCallback(response)) - .catch(() => this.errorCallback()); - } - - successCallback(response) { - this.state.isLoading = false; - return this.store.storeJob(response.data); - } - - errorCallback() { - this.state.isLoading = false; - - return new Flash('An error occurred while fetching the job.'); - } -} diff --git a/app/assets/javascripts/jobs/services/job_service.js b/app/assets/javascripts/jobs/services/job_service.js deleted file mode 100644 index b746489c45c..00000000000 --- a/app/assets/javascripts/jobs/services/job_service.js +++ /dev/null @@ -1,11 +0,0 @@ -import axios from '../../lib/utils/axios_utils'; - -export default class JobService { - constructor(endpoint) { - this.job = endpoint; - } - - getJob() { - return axios.get(this.job); - } -} diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js index cd12ef87d40..c3f2359fa4d 100644 --- a/app/assets/javascripts/jobs/store/mutations.js +++ b/app/assets/javascripts/jobs/store/mutations.js @@ -1,6 +1,9 @@ import * as types from './mutation_types'; export default { + [types.SET_JOB_ENDPOINT](state, endpoint) { + state.jobEndpoint = endpoint; + }, [types.REQUEST_STATUS_FAVICON](state) { state.fetchingStatusFavicon = true; }, diff --git a/app/assets/javascripts/jobs/stores/job_store.js b/app/assets/javascripts/jobs/stores/job_store.js deleted file mode 100644 index 766194b8387..00000000000 --- a/app/assets/javascripts/jobs/stores/job_store.js +++ /dev/null @@ -1,11 +0,0 @@ -export default class JobStore { - constructor() { - this.state = { - job: {}, - }; - } - - storeJob(job = {}) { - this.state.job = job; - } -} |