removed need for jobs component

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

 <script>
-import { mapState } from 'vuex';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Stage from './stage.vue';
 
@@ -13,9 +12,10 @@ export default {
       type: Array,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: true,
     },
-  computed: {
-    ...mapState('pipelines', ['isLoadingJobs']),
   },
 };
 </script>
@@ -23,7 +23,7 @@ export default {
 <template>
   <div>
     <loading-icon
-      v-if="isLoadingJobs && !stages.length"
+      v-if="loading && !stages.length"
       class="prepend-top-default"
       size="2"
     />

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

@@ -31,6 +31,12 @@ export default {
     collapseIcon() {
       return this.stage.isCollapsed ? 'angle-left' : 'angle-down';
     },
+    showLoadingIcon() {
+      return this.stage.isLoading && !this.stage.jobs.length;
+    },
+    jobsCount() {
+      return this.stage.jobs.length;
+    },
   },
   created() {
     this.fetchJobs(this.stage);
@@ -69,7 +75,7 @@ export default {
       </strong>
       <div class="append-right-8">
         <span class="badge">
-          {{ stage.jobs.length }}
+          {{ jobsCount }}
         </span>
       </div>
       <icon
@@ -82,7 +88,7 @@ export default {
       v-show="!stage.isCollapsed"
     >
       <loading-icon
-        v-if="stage.isLoading && !stage.jobs.length"
+        v-if="showLoadingIcon"
       />
       <template v-else>
         <item

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

-<script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import Tabs from '../../../vue_shared/components/tabs/tabs';
-import Tab from '../../../vue_shared/components/tabs/tab.vue';
-import JobsList from '../jobs/list.vue';
-
-export default {
-  components: {
-    Tabs,
-    Tab,
-    JobsList,
-  },
-  computed: {
-    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
-    ...mapState('pipelines', ['stages', 'isLoadingJobs']),
-  },
-  created() {
-    this.fetchStages();
-  },
-  methods: {
-    ...mapActions('pipelines', ['fetchStages']),
-  },
-};
-</script>
-
-<template>
-  <div>
-    <tabs>
-      <tab active>
-        <template slot="title">
-          Jobs
-          <span
-            v-if="!isLoadingJobs || jobsCount"
-            class="badge"
-          >
-            {{ jobsCount }}
-          </span>
-        </template>
-        <jobs-list
-          :stages="stages"
-        />
-      </tab>
-      <tab>
-        <template slot="title">
-          Failed Jobs
-          <span
-            v-if="!isLoadingJobs || failedJobsCount"
-            class="badge"
-          >
-            {{ failedJobsCount }}
-          </span>
-        </template>
-        <jobs-list
-          :stages="failedStages"
-        />
-      </tab>
-    </tabs>
-  </div>
-</template>

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

@@ -2,17 +2,22 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
-import JobsList from './jobs.vue';
+import Tabs from '../../../vue_shared/components/tabs/tabs';
+import Tab from '../../../vue_shared/components/tabs/tab.vue';
+import JobsList from '../jobs/list.vue';
 
 export default {
   components: {
     LoadingIcon,
     CiIcon,
+    Tabs,
+    Tab,
     JobsList,
   },
   computed: {
     ...mapGetters(['currentProject']),
-    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline']),
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
+    ...mapState('pipelines', ['isLoadingPipeline', 'latestPipeline', 'stages', 'isLoadingJobs']),
     statusIcon() {
       return {
         group: this.latestPipeline.status,
@@ -21,10 +26,10 @@ export default {
     },
   },
   created() {
-    this.fetchLatestPipeline();
+    return this.fetchLatestPipeline().then(() => this.fetchStages());
   },
   methods: {
-    ...mapActions('pipelines', ['fetchLatestPipeline']),
+    ...mapActions('pipelines', ['fetchLatestPipeline', 'fetchStages']),
   },
 };
 </script>
@@ -56,7 +61,38 @@ export default {
           </a>
         </span>
       </header>
-      <jobs-list />
+      <tabs>
+        <tab active>
+          <template slot="title">
+            Jobs
+            <span
+              v-if="!isLoadingJobs || jobsCount"
+              class="badge"
+            >
+              {{ jobsCount }}
+            </span>
+          </template>
+          <jobs-list
+            :loading="isLoadingJobs"
+            :stages="stages"
+          />
+        </tab>
+        <tab>
+          <template slot="title">
+            Failed Jobs
+            <span
+              v-if="!isLoadingJobs || failedJobsCount"
+              class="badge"
+            >
+              {{ failedJobsCount }}
+            </span>
+          </template>
+          <jobs-list
+            :loading="isLoadingJobs"
+            :stages="failedStages"
+          />
+        </tab>
+      </tabs>
     </template>
   </div>
 </template>