1 files changed, 18 insertions, 8 deletions
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index 0136ec4d194..ae40f4cdf3b 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -1,8 +1,9 @@
-import { mapState } from 'vuex';
+import _ from 'underscore';
+import { mapState, mapActions } from 'vuex';
 import Vue from 'vue';
 import Job from '../job';
 import JobHeader from './components/header.vue';
-import DetailsBlock from './components/sidebar_details_block.vue';
+import Sidebar from './components/sidebar.vue';
 import createStore from './store';
 
 export default () => {
@@ -13,6 +14,7 @@ export default () => {
 
   const store = createStore();
   store.dispatch('setJobEndpoint', dataset.endpoint);
+
   store.dispatch('fetchJob');
 
   // Header
@@ -43,17 +45,25 @@ export default () => {
   new Vue({
     el: detailsBlockElement,
     components: {
-      DetailsBlock,
+      Sidebar,
     },
-    store,
     computed: {
-      ...mapState(['job', 'isLoading']),
+      ...mapState(['job']),
+    },
+    watch: {
+      job(newVal, oldVal) {
+        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+          this.fetchStages();
+        }
+      },
     },
+    methods: {
+      ...mapActions(['fetchStages']),
+    },
+    store,
     render(createElement) {
-      return createElement('details-block', {
+      return createElement('sidebar', {
         props: {
-          isLoading: this.isLoading,
-          job: this.job,
           runnerHelpUrl: dataset.runnerHelpUrl,
           terminalPath: detailsBlockDataset.terminalPath,
         },