Added realtime prop and corrected specs

4 files changed, 35 insertions, 5 deletions

diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 55154cdddcb..0213b46eb7c 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import ShortcutsNavigation from '~/shortcuts_navigation';
 import NotificationsForm from '~/notifications_form';
 import UserCallout from '~/user_callout';
@@ -5,6 +6,7 @@ import TreeView from '~/tree';
 import BlobViewer from '~/blob/viewer/index';
 import Activities from '~/activities';
 import { ajaxGet } from '~/lib/utils/common_utils';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import Star from '../../../star';
 import notificationsDropdown from '../../../notifications_dropdown';
 
@@ -24,4 +26,21 @@ export default () => {
   $('#tree-slider').waitForImages(() => {
     ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
   });
+
+  const commitPipelineStatusEl = document.getElementById('commit-pipeline-status');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#commit-pipeline-status',
+    components: {
+      commitPipelineStatus,
+    },
+    render(createElement) {
+      return createElement('commit-pipeline-status', {
+        props: {
+          endpoint: commitPipelineStatusEl.dataset.endpoint,
+          realtime: false,
+        },
+      });
+    },
+  });
 };
diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js
index 7181d4dfd47..c0b3f98e66d 100644
--- a/app/assets/javascripts/pages/projects/tree/show/index.js
+++ b/app/assets/javascripts/pages/projects/tree/show/index.js
@@ -1,10 +1,10 @@
 import Vue from 'vue';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import TreeView from '../../../../tree';
 import ShortcutsNavigation from '../../../../shortcuts_navigation';
 import BlobViewer from '../../../../blob/viewer';
 import NewCommitForm from '../../../../new_commit_form';
 import { ajaxGet } from '../../../../lib/utils/common_utils';
-import commitPipelineStatus from '../components/commit_pipeline_status_component.vue';
 
 export default () => {
   new ShortcutsNavigation(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 2bd1e8e3266..e13acf8555a 100644
--- a/app/assets/javascripts/pages/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -18,22 +18,33 @@
         type: String,
         required: true,
       },
+      realtime: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
         ciStatus: {},
         isLoading: true,
         service: {},
+        stageTitle: '',
       };
     },
     mounted() {
       this.service = new CommitPipelineService(this.endpoint);
-      this.initPolling();
+      if (this.realtime) {
+        this.initPolling();
+      } else {
+        this.fetchPipelineCommitData();
+      }
     },
     methods: {
       successCallback(res) {
         if (res.data.pipelines.length > 0) {
-          this.ciStatus = res.data.pipelines[0].details.status;
+          this.ciStatus = res.data.pipelines[0].details.stages[0].status;
+          this.stageTitle = res.data.pipelines[0].details.stages[0].title;
           this.isLoading = false;
         } else {
           this.isLoading = true;
@@ -86,8 +97,8 @@
   >
     <ci-icon
       v-tooltip
-      :title="ciStatus.text"
-      :aria-label="ciStatus.text"
+      :title="stageTitle"
+      :aria-label="stageTitle"
       data-container="body"
       :status="ciStatus"
     />
diff --git a/app/assets/javascripts/pages/projects/tree/services/commit_pipeline_service.js b/app/assets/javascripts/projects/tree/services/commit_pipeline_service.js
index 4b4189bc2de..4b4189bc2de 100644
--- a/app/assets/javascripts/pages/projects/tree/services/commit_pipeline_service.js
+++ b/app/assets/javascripts/projects/tree/services/commit_pipeline_service.js