1 files changed, 44 insertions, 6 deletions

diff --git a/app/assets/javascripts/ide/components/pipelines/jobs.vue b/app/assets/javascripts/ide/components/pipelines/jobs.vue
index d69945b617c..a3a99ad457c 100644
--- a/app/assets/javascripts/ide/components/pipelines/jobs.vue
+++ b/app/assets/javascripts/ide/components/pipelines/jobs.vue
@@ -1,5 +1,7 @@
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
 
@@ -7,15 +9,18 @@ export default {
   components: {
     Tabs,
     Tab,
+    Icon,
+    CiIcon,
   },
   computed: {
-    ...mapGetters('pipelines', ['jobsCount', 'failedJobs']),
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount']),
+    ...mapState('pipelines', ['stages']),
   },
   mounted() {
-    this.fetchJobs();
+    this.fetchStages();
   },
   methods: {
-    ...mapActions('pipelines', ['fetchJobs']),
+    ...mapActions('pipelines', ['fetchStages']),
   },
 };
 </script>
@@ -27,11 +32,44 @@ export default {
         <template slot="title">
           Jobs <span class="badge">{{ jobsCount }}</span>
         </template>
-        List all jobs here
+        <div style="overflow: auto;">
+          <div
+            v-for="stage in stages"
+            :key="stage.id"
+            class="panel panel-default"
+          >
+            <div
+              class="panel-heading"
+              @click="() => stage.isCollapsed = !stage.isCollapsed"
+            >
+              <ci-icon :status="stage.status" />
+              {{ stage.title }}
+              <span class="badge">
+                {{ stage.jobs.length }}
+              </span>
+              <icon
+                :name="stage.isCollapsed ? 'angle-left' : 'angle-down'"
+                css-classes="pull-right"
+              />
+            </div>
+            <div
+              class="panel-body"
+              v-show="!stage.isCollapsed"
+            >
+              <div
+                v-for="job in stage.jobs"
+                :key="job.id"
+              >
+                <ci-icon :status="job.status" />
+                {{ job.name }} #{{ job.id }}
+              </div>
+            </div>
+          </div>
+        </div>
       </tab>
       <tab>
         <template slot="title">
-          Failed Jobs <span class="badge">{{ failedJobs.length }}</span>
+          Failed Jobs <span class="badge">{{ failedJobsCount }}</span>
         </template>
         List all failed jobs here
       </tab>