refactored to use data we already have

this required moving some data store actions & mutations around

3 files changed, 50 insertions, 55 deletions

diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index b5d78b381ea..35b7be4d866 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -1,41 +1,55 @@
+import Visibility from 'visibilityjs';
 import axios from 'axios';
 import { __ } from '../../../../locale';
-import Api from '../../../../api';
 import flash from '../../../../flash';
+import Poll from '../../../../lib/utils/poll';
+import service from '../../../services';
 import * as types from './mutation_types';
 
+let eTagPoll;
+
+export const stopPipelinePolling = () => eTagPoll.stop();
+export const restartPipelinePolling = () => eTagPoll.restart();
+
 export const requestLatestPipeline = ({ commit }) => commit(types.REQUEST_LATEST_PIPELINE);
-export const receiveLatestPipelineError = ({ commit }) => {
+export const receiveLatestPipelineError = ({ commit, dispatch }) => {
   flash(__('There was an error loading latest pipeline'));
   commit(types.RECEIVE_LASTEST_PIPELINE_ERROR);
+  dispatch('stopPipelinePolling');
 };
-export const receiveLatestPipelineSuccess = ({ commit }, pipeline) =>
-  commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, pipeline);
-
-export const fetchLatestPipeline = ({ dispatch, rootState }, sha) => {
-  dispatch('requestLatestPipeline');
+export const receiveLatestPipelineSuccess = ({ rootGetters, commit }, { pipelines }) => {
+  if (pipelines && pipelines.length) {
+    const lastCommitHash = rootGetters.lastCommit && rootGetters.lastCommit.id;
+    const lastCommitPipeline = pipelines.find(pipeline => pipeline.commit.id === lastCommitHash);
 
-  return Api.pipelines(rootState.currentProjectId, { sha, per_page: '1' })
-    .then(({ data }) => {
-      dispatch('receiveLatestPipelineSuccess', data.pop());
-    })
-    .catch(() => dispatch('receiveLatestPipelineError'));
+    commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, lastCommitPipeline);
+  }
 };
 
-export const requestStages = ({ commit }) => commit(types.REQUEST_STAGES);
-export const receiveStagesError = ({ commit }) => {
-  flash(__('There was an error loading job stages'));
-  commit(types.RECEIVE_STAGES_ERROR);
-};
-export const receiveStagesSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_STAGES_SUCCESS, data);
+export const fetchLatestPipeline = ({ dispatch, rootGetters }) => {
+  if (eTagPoll) return;
+
+  dispatch('requestLatestPipeline');
+
+  eTagPoll = new Poll({
+    resource: service,
+    method: 'lastCommitPipelines',
+    data: { getters: rootGetters },
+    successCallback: ({ data }) => dispatch('receiveLatestPipelineSuccess', data),
+    errorCallback: () => dispatch('receiveLatestPipelineError'),
+  });
 
-export const fetchStages = ({ dispatch, state, rootState }) => {
-  dispatch('requestStages');
+  if (!Visibility.hidden()) {
+    eTagPoll.makeRequest();
+  }
 
-  Api.pipelineJobs(rootState.currentProjectId, state.latestPipeline.id)
-    .then(({ data }) => dispatch('receiveStagesSuccess', data))
-    .catch(() => dispatch('receiveStagesError'));
+  Visibility.change(() => {
+    if (!Visibility.hidden()) {
+      eTagPoll.restart();
+    } else {
+      eTagPoll.stop();
+    }
+  });
 };
 
 export const requestJobs = ({ commit }, id) => commit(types.REQUEST_JOBS, id);
@@ -51,9 +65,7 @@ export const fetchJobs = ({ dispatch }, stage) => {
 
   axios
     .get(stage.dropdown_path)
-    .then(({ data }) => {
-      dispatch('receiveJobsSuccess', { id: stage.id, data });
-    })
+    .then(({ data }) => dispatch('receiveJobsSuccess', { id: stage.id, data }))
     .catch(() => dispatch('receiveJobsError', stage.id));
 };
 
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js
index 0911b8ee6fb..6b5701670a6 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutation_types.js
@@ -2,10 +2,6 @@ export const REQUEST_LATEST_PIPELINE = 'REQUEST_LATEST_PIPELINE';
 export const RECEIVE_LASTEST_PIPELINE_ERROR = 'RECEIVE_LASTEST_PIPELINE_ERROR';
 export const RECEIVE_LASTEST_PIPELINE_SUCCESS = 'RECEIVE_LASTEST_PIPELINE_SUCCESS';
 
-export const REQUEST_STAGES = 'REQUEST_STAGES';
-export const RECEIVE_STAGES_ERROR = 'RECEIVE_STAGES_ERROR';
-export const RECEIVE_STAGES_SUCCESS = 'RECEIVE_STAGES_SUCCESS';
-
 export const REQUEST_JOBS = 'REQUEST_JOBS';
 export const RECEIVE_JOBS_ERROR = 'RECEIVE_JOBS_ERROR';
 export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
index 0713aa4a3f5..9f418069db4 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js
@@ -12,32 +12,19 @@ export default {
     state.isLoadingPipeline = false;
 
     if (pipeline) {
-      state.latestPipeline = {
-        id: pipeline.id,
-        status: pipeline.status,
-      };
+      state.latestPipeline = pipeline;
+      state.stages = pipeline.details.stages.map((stage, i) => {
+        const foundStage = state.stages.find(s => s.id === i);
+        return {
+          ...stage,
+          id: i,
+          isCollapsed: foundStage ? foundStage.isCollapsed : false,
+          isLoading: foundStage ? foundStage.isLoading : false,
+          jobs: foundStage ? foundStage.jobs : [],
+        };
+      });
     }
   },
-  [types.REQUEST_STAGES](state) {
-    state.isLoadingJobs = true;
-  },
-  [types.RECEIVE_STAGES_ERROR](state) {
-    state.isLoadingJobs = false;
-  },
-  [types.RECEIVE_STAGES_SUCCESS](state, stages) {
-    state.isLoadingJobs = false;
-
-    state.stages = stages.map((stage, i) => {
-      const foundStage = state.stages.find(s => s.id === i);
-      return {
-        ...stage,
-        id: i,
-        isCollapsed: foundStage ? foundStage.isCollapsed : false,
-        isLoading: foundStage ? foundStage.isLoading : false,
-        jobs: foundStage ? foundStage.jobs : [],
-      };
-    });
-  },
   [types.REQUEST_JOBS](state, id) {
     state.stages = state.stages.reduce(
       (acc, stage) =>