1 files changed, 36 insertions, 1 deletions
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"
       />