refactored to use data we already have

this required moving some data store actions & mutations around

app/assets/javascripts/api.js

@@ -24,8 +24,6 @@ const Api = {
   commitPipelinesPath: '/:project_id/commit/:sha/pipelines',
   branchSinglePath: '/api/:version/projects/:id/repository/branches/:branch',
   createBranchPath: '/api/:version/projects/:id/repository/branches',
-  pipelinesPath: '/api/:version/projects/:id/pipelines',
-  pipelineJobsPath: '/:project_path/pipelines/:id/builds.json',
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath).replace(':id', groupId);
@@ -238,20 +236,6 @@ const Api = {
     });
   },
-  pipelines(projectPath, params = {}) {
-    const url = Api.buildUrl(this.pipelinesPath).replace(':id', encodeURIComponent(projectPath));
-
-    return axios.get(url, { params });
-  },
-
-  pipelineJobs(projectPath, pipelineId, params = {}) {
-    const url = Api.buildUrl(this.pipelineJobsPath)
-      .replace(':project_path', projectPath)
-      .replace(':id', pipelineId);
-
-    return axios.get(url, { params });
-  },
-
   buildUrl(url) {
     let urlRoot = '';
     if (gon.relative_url_root != null) {

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -31,6 +31,7 @@ export default {
   computed: {
     ...mapState(['currentBranchId', 'currentProjectId']),
     ...mapGetters(['currentProject', 'lastCommit']),
+    ...mapState('pipelines', ['latestPipeline']),
   },
   watch: {
     lastCommit() {
@@ -51,14 +52,14 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['pipelinePoll', 'stopPipelinePolling']),
+    ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
     startTimer() {
       this.intervalId = setInterval(() => {
         this.commitAgeUpdate();
       }, 1000);
     },
     initPipelinePolling() {
-      this.pipelinePoll();
+      this.fetchLatestPipeline();
       this.isPollingInitialized = true;
     },
     commitAgeUpdate() {
@@ -81,18 +82,18 @@ export default {
     >
       <span
         class="ide-status-pipeline"
-        v-if="lastCommit.pipeline && lastCommit.pipeline.details"
+        v-if="latestPipeline && latestPipeline.details"
       >
         <ci-icon
-          :status="lastCommit.pipeline.details.status"
+          :status="latestPipeline.details.status"
           v-tooltip
-          :title="lastCommit.pipeline.details.status.text"
+          :title="latestPipeline.details.status.text"
         />
         Pipeline
         <a
           class="monospace"
-          :href="lastCommit.pipeline.details.status.details_path">#{{ lastCommit.pipeline.id }}</a>
-        {{ lastCommit.pipeline.details.status.text }}
+          :href="latestPipeline.details.status.details_path">#{{ latestPipeline.id }}</a>
+        {{ latestPipeline.details.status.text }}
         for
       </span>

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -73,7 +73,10 @@ export default {
       >
         {{ stage.name }}
       </strong>
-      <div class="append-right-8">
+      <div
+        v-if="!stage.isLoading || stage.jobs.length"
+        class="append-right-8"
+      >
         <span class="badge">
           {{ jobsCount }}
         </span>

app/assets/javascripts/ide/components/pipelines/list.vue

@@ -15,21 +15,14 @@ export default {
     JobsList,
   },
   computed: {
-    ...mapGetters(['currentProject']),
     ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
     ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
-    statusIcon() {
-      return {
-        group: this.latestPipeline.status,
-        icon: `status_${this.latestPipeline.status}`,
-      };
-    },
   },
   created() {
-    return this.fetchLatestPipeline().then(() => this.fetchStages());
+    this.fetchLatestPipeline();
   },
   methods: {
-    ...mapActions('pipelines', ['fetchLatestPipeline', 'fetchStages']),
+    ...mapActions('pipelines', ['fetchLatestPipeline']),
   },
 };
 </script>
@@ -46,7 +39,7 @@ export default {
         class="ide-tree-header ide-pipeline-header"
       >
         <ci-icon
-          :status="statusIcon"
+          :status="latestPipeline.details.status"
           :size="24"
         />
         <span class="prepend-left-8">
@@ -54,7 +47,7 @@ export default {
             Pipeline
           </strong>
           <a
-            :href="currentProject.web_url + '/pipelines/' + latestPipeline.id"
+            :href="latestPipeline.details.status.details_path"
             target="_blank"
           >
             #{{ latestPipeline.id }}
@@ -66,7 +59,7 @@ export default {
           <template slot="title">
             Jobs
             <span
-              v-if="!isLoadingJobs || jobsCount"
+              v-if="jobsCount"
               class="badge"
             >
               {{ jobsCount }}
@@ -81,7 +74,7 @@ export default {
           <template slot="title">
             Failed Jobs
             <span
-              v-if="!isLoadingJobs || failedJobsCount"
+              v-if="failedJobsCount"
               class="badge"
             >
               {{ failedJobsCount }}

app/assets/javascripts/ide/stores/actions/project.js

-import Visibility from 'visibilityjs';
 import flash from '~/flash';
 import { __ } from '~/locale';
 import service from '../../services';
 import * as types from '../mutation_types';
-import Poll from '../../../lib/utils/poll';
-
-let eTagPoll;
 export const getProjectData = (
   { commit, state, dispatch },
@@ -91,61 +87,3 @@ export const refreshLastCommitData = ({ commit, state, dispatch }, { projectId,
     .catch(() => {
       flash(__('Error loading last commit.'), 'alert', document, null, false, true);
     });
-
-export const pollSuccessCallBack = ({ commit, state, dispatch }, { data }) => {
-  if (data.pipelines && data.pipelines.length) {
-    const lastCommitHash =
-      state.projects[state.currentProjectId].branches[state.currentBranchId].commit.id;
-    const lastCommitPipeline = data.pipelines.find(
-      pipeline => pipeline.commit.id === lastCommitHash,
-    );
-    commit(types.SET_LAST_COMMIT_PIPELINE, {
-      projectId: state.currentProjectId,
-      branchId: state.currentBranchId,
-      pipeline: lastCommitPipeline || {},
-    });
-  }
-
-  return data;
-};
-
-export const pipelinePoll = ({ getters, dispatch }) => {
-  eTagPoll = new Poll({
-    resource: service,
-    method: 'lastCommitPipelines',
-    data: {
-      getters,
-    },
-    successCallback: ({ data }) => dispatch('pollSuccessCallBack', { data }),
-    errorCallback: () => {
-      flash(
-        __('Something went wrong while fetching the latest pipeline status.'),
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      );
-    },
-  });
-
-  if (!Visibility.hidden()) {
-    eTagPoll.makeRequest();
-  }
-
-  Visibility.change(() => {
-    if (!Visibility.hidden()) {
-      eTagPoll.restart();
-    } else {
-      eTagPoll.stop();
-    }
-  });
-};
-
-export const stopPipelinePolling = () => {
-  eTagPoll.stop();
-};
-
-export const restartPipelinePolling = () => {
-  eTagPoll.restart();
-};

app/assets/javascripts/ide/stores/modules/pipelines/actions.js

+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');
-  return Api.pipelines(rootState.currentProjectId, { sha, per_page: '1' })
-    .then(({ data }) => {
-      dispatch('receiveLatestPipelineSuccess', data.pop());
-    })
-    .catch(() => dispatch('receiveLatestPipelineError'));
+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);
+    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 fetchStages = ({ dispatch, state, rootState }) => {
-  dispatch('requestStages');
-  Api.pipelineJobs(rootState.currentProjectId, state.latestPipeline.id)
-    .then(({ data }) => dispatch('receiveStagesSuccess', data))
-    .catch(() => dispatch('receiveStagesError'));
+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'),
+  });
+  if (!Visibility.hidden()) {
+    eTagPoll.makeRequest();
+  }
+  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));
 };

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

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) =>

app/assets/javascripts/ide/stores/mutation_types.js

@@ -23,7 +23,6 @@ export const SET_BRANCH = 'SET_BRANCH';
 export const SET_BRANCH_COMMIT = 'SET_BRANCH_COMMIT';
 export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE';
 export const TOGGLE_BRANCH_OPEN = 'TOGGLE_BRANCH_OPEN';
-export const SET_LAST_COMMIT_PIPELINE = 'SET_LAST_COMMIT_PIPELINE';
 // Tree mutation types
 export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';

app/assets/javascripts/ide/stores/mutations/branch.js

@@ -14,10 +14,6 @@ export default {
           treeId: `${projectPath}/${branchName}`,
           active: true,
           workingReference: '',
-          commit: {
-            ...branch.commit,
-            pipeline: {},
-          },
         },
       },
     });
@@ -32,9 +28,4 @@ export default {
       commit,
     });
   },
-  [types.SET_LAST_COMMIT_PIPELINE](state, { projectId, branchId, pipeline }) {
-    Object.assign(state.projects[projectId].branches[branchId].commit, {
-      pipeline,
-    });
-  },
 };

app/controllers/projects/pipelines_controller.rb

@@ -76,16 +76,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
   def builds
-    respond_to do |format|
-      format.html do
-        render_show
-      end
-      format.json do
-        render json: PipelineSerializer
-          .new(project: @project, current_user: @current_user)
-          .represent_stages(@pipeline)
-      end
-    end
+    render_show
   end
   def failures