Merge branch '50904-use-vuex-store-job' into 'master'

Uses new Vuex store in job log page

See merge request gitlab-org/gitlab-ce!21961

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;
-  }
-}