diff options
Diffstat (limited to 'app/assets/javascripts')
-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; - } -} |