Resolve "Show CI pipeline status in Web IDE"

6 files changed, 126 insertions, 25 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 1ec69adce09..0aaf5a112cb 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -123,8 +123,6 @@ export default {
         </template>
       </div>
     </div>
-    <ide-status-bar
-      :file="activeFile"
-    />
+    <ide-status-bar :file="activeFile"/>
   </article>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 70c6d53c3ab..6f60cfbf184 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,14 +1,16 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
+import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 export default {
   components: {
     icon,
     userAvatarImage,
+    CiIcon,
   },
   directives: {
     tooltip,
@@ -27,8 +29,16 @@ export default {
     };
   },
   computed: {
+    ...mapState(['currentBranchId', 'currentProjectId']),
     ...mapGetters(['currentProject', 'lastCommit']),
   },
+  watch: {
+    lastCommit() {
+      if (!this.isPollingInitialized) {
+        this.initPipelinePolling();
+      }
+    },
+  },
   mounted() {
     this.startTimer();
   },
@@ -36,13 +46,21 @@ export default {
     if (this.intervalId) {
       clearInterval(this.intervalId);
     }
+    if (this.isPollingInitialized) {
+      this.stopPipelinePolling();
+    }
   },
   methods: {
+    ...mapActions(['pipelinePoll', 'stopPipelinePolling']),
     startTimer() {
       this.intervalId = setInterval(() => {
         this.commitAgeUpdate();
       }, 1000);
     },
+    initPipelinePolling() {
+      this.pipelinePoll();
+      this.isPollingInitialized = true;
+    },
     commitAgeUpdate() {
       if (this.lastCommit) {
         this.lastCommitFormatedAge = this.timeFormated(this.lastCommit.committed_date);
@@ -61,6 +79,23 @@ export default {
       class="ide-status-branch"
       v-if="lastCommit && lastCommitFormatedAge"
     >
+      <span
+        class="ide-status-pipeline"
+        v-if="lastCommit.pipeline && lastCommit.pipeline.details"
+      >
+        <ci-icon
+          :status="lastCommit.pipeline.details.status"
+          v-tooltip
+          :title="lastCommit.pipeline.details.status.text"
+        />
+        Pipeline
+        <a
+          class="monospace"
+          :href="lastCommit.pipeline.details.status.details_path">#{{ lastCommit.pipeline.id }}</a>
+        {{ lastCommit.pipeline.details.status.text }}
+        for
+      </span>
+
       <icon
         name="commit"
       />
diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index a12e637616a..e8b51f2b516 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -75,4 +75,8 @@ export default {
       },
     });
   },
+  lastCommitPipelines({ getters }) {
+    const commitSha = getters.lastCommit.id;
+    return Api.commitPipelines(getters.currentProject.path_with_namespace, commitSha);
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index eff9bc03651..cece9154c82 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -1,6 +1,11 @@
+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 },
@@ -21,7 +26,7 @@ export const getProjectData = (
         })
         .catch(() => {
           flash(
-            'Error loading project data. Please try again.',
+            __('Error loading project data. Please try again.'),
             'alert',
             document,
             null,
@@ -59,7 +64,7 @@ export const getBranchData = (
         })
         .catch(() => {
           flash(
-            'Error loading branch data. Please try again.',
+            __('Error loading branch data. Please try again.'),
             'alert',
             document,
             null,
@@ -73,25 +78,74 @@ export const getBranchData = (
     }
   });
 
-export const refreshLastCommitData = (
-  { commit, state, dispatch },
-  { projectId, branchId } = {},
-) => service
-  .getBranchData(projectId, branchId)
-  .then(({ data }) => {
-    commit(types.SET_BRANCH_COMMIT, {
-      projectId,
-      branchId,
-      commit: data.commit,
+export const refreshLastCommitData = ({ commit, state, dispatch }, { projectId, branchId } = {}) =>
+  service
+    .getBranchData(projectId, branchId)
+    .then(({ data }) => {
+      commit(types.SET_BRANCH_COMMIT, {
+        projectId,
+        branchId,
+        commit: data.commit,
+      });
+    })
+    .catch(() => {
+      flash(__('Error loading last commit.'), 'alert', document, null, false, true);
     });
-  })
-  .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();
+};
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index a3fb3232f1d..0a3f8d031c4 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -23,6 +23,7 @@ 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';
diff --git a/app/assets/javascripts/ide/stores/mutations/branch.js b/app/assets/javascripts/ide/stores/mutations/branch.js
index e09f88878f4..f17ec4da308 100644
--- a/app/assets/javascripts/ide/stores/mutations/branch.js
+++ b/app/assets/javascripts/ide/stores/mutations/branch.js
@@ -14,6 +14,10 @@ export default {
           treeId: `${projectPath}/${branchName}`,
           active: true,
           workingReference: '',
+          commit: {
+            ...branch.commit,
+            pipeline: {},
+          },
         },
       },
     });
@@ -28,4 +32,9 @@ export default {
       commit,
     });
   },
+  [types.SET_LAST_COMMIT_PIPELINE](state, { projectId, branchId, pipeline }) {
+    Object.assign(state.projects[projectId].branches[branchId].commit, {
+      pipeline,
+    });
+  },
 };