style improvements

fixed multiple requests causing state to be emptied at wrong time

2 files changed, 12 insertions, 43 deletions

diff --git a/app/assets/javascripts/ide/components/pipelines/jobs.vue b/app/assets/javascripts/ide/components/pipelines/jobs.vue
index a3a99ad457c..ffe8a9e1696 100644
--- a/app/assets/javascripts/ide/components/pipelines/jobs.vue
+++ b/app/assets/javascripts/ide/components/pipelines/jobs.vue
@@ -1,22 +1,20 @@
 <script>
 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';
+import JobsList from '../jobs/list.vue';
 
 export default {
   components: {
     Tabs,
     Tab,
-    Icon,
-    CiIcon,
+    JobsList,
   },
   computed: {
-    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount']),
+    ...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages']),
     ...mapState('pipelines', ['stages']),
   },
-  mounted() {
+  created() {
     this.fetchStages();
   },
   methods: {
@@ -32,46 +30,17 @@ export default {
         <template slot="title">
           Jobs <span class="badge">{{ jobsCount }}</span>
         </template>
-        <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>
+        <jobs-list
+          :stages="stages"
+        />
       </tab>
       <tab>
         <template slot="title">
           Failed Jobs <span class="badge">{{ failedJobsCount }}</span>
         </template>
-        List all failed jobs here
+        <jobs-list
+          :stages="failedStages"
+        />
       </tab>
     </tabs>
   </div>
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index e76ea0b50af..74ff51c7fad 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -20,7 +20,7 @@ export default {
       };
     },
   },
-  mounted() {
+  created() {
     this.fetchLatestPipeline();
   },
   methods: {
@@ -32,7 +32,7 @@ export default {
 <template>
   <div>
     <loading-icon
-      v-if="isLoadingPipeline"
+      v-if="isLoadingPipeline && !latestPipeline"
       class="prepend-top-default"
       size="2"
     />