style improvements

fixed multiple requests causing state to be emptied at wrong time

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

+<script>
+import Stage from './stage.vue';
+
+export default {
+  components: {
+    Stage,
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div style="overflow: auto;">
+    <stage
+      v-for="stage in stages"
+      :key="stage.id"
+      :stage="stage"
+    />
+  </div>
+</template>

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

+<script>
+import { mapActions } from 'vuex';
+import Icon from '../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    Icon,
+    CiIcon,
+    LoadingIcon,
+  },
+  props: {
+    stage: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    collapseIcon() {
+      return this.stage.isCollapsed ? 'angle-left' : 'angle-down';
+    },
+  },
+  created() {
+    this.fetchJobs(this.stage);
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobs']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="panel panel-default prepend-top-default"
+  >
+    <div
+      class="panel-heading"
+      @click="() => stage.isCollapsed = !stage.isCollapsed"
+    >
+      <ci-icon
+        :status="stage.status"
+      />
+      <span class="prepend-left-8">
+        {{ stage.title }}
+      </span>
+      <div>
+        <span class="badge">
+          {{ stage.jobs.length }}
+        </span>
+      </div>
+      <icon
+        :name="collapseIcon"
+        css-classes="pull-right"
+      />
+    </div>
+    <div
+      class="panel-body"
+      v-show="!stage.isCollapsed"
+    >
+      <loading-icon
+        v-if="stage.isLoading && !stage.jobs.length"
+      />
+      <template v-else>
+        <div
+          v-for="job in stage.jobs"
+          :key="job.id"
+        >
+          <ci-icon :status="job.status" />
+          {{ job.name }}
+          <a
+            :href="job.build_path"
+            target="_blank"
+          >#{{ job.id }}</a>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.panel-heading {
+  display: flex;
+  cursor: pointer;
+}
+.panel-heading .ci-status-icon {
+  display: flex;
+  align-items: center;
+}
+
+.panel-heading .pull-right {
+  margin: auto 0 auto auto;
+}
+</style>

app/assets/javascripts/ide/components/panes/right.vue

@@ -31,19 +31,20 @@ export default {
       class="multi-file-commit-panel-inner"
       v-if="rightPane"
     >
-      <keep-alive>
       <component :is="rightPane" />
-      </keep-alive>
     </div>
     <nav class="ide-activity-bar">
       <ul class="list-unstyled">
-        <li v-once>
+        <li>
           <button
             v-tooltip
             data-container="body"
             data-placement="left"
             :title="__('Pipelines')"
-            class="ide-sidebar-link"
+            class="ide-sidebar-link is-right"
+            :class="{
+              active: rightPane === $options.rightSidebarViews.pipelines
+            }"
             type="button"
             @click="setRightPane($options.rightSidebarViews.pipelines)"
           >

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

 <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"
+        <jobs-list
+          :stages="stages"
         />
-            </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">{{ failedJobsCount }}</span>
         </template>
-        List all failed jobs here
+        <jobs-list
+          :stages="failedStages"
+        />
       </tab>
     </tabs>
   </div>

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"
     />

app/assets/javascripts/ide/stores/modules/pipelines/actions.js

@@ -35,7 +35,6 @@ export const fetchStages = ({ dispatch, state, rootState }) => {
 
   Api.pipelineJobs(rootState.currentProjectId, state.latestPipeline.id)
     .then(({ data }) => dispatch('receiveStagesSuccess', data))
-    .then(() => state.stages.forEach(stage => dispatch('fetchJobs', stage)))
     .catch(() => dispatch('receiveStagesError'));
 };
 

app/assets/javascripts/ide/stores/modules/pipelines/getters.js

 export const hasLatestPipeline = state => !state.isLoadingPipeline && !!state.latestPipeline;
 
+export const failedStages = state => state.stages.filter(stage => stage.status.label === 'failed');
+
 export const failedJobsCount = state =>
   state.stages.reduce(
     (acc, stage) => acc + stage.jobs.filter(j => j.status.label === 'failed').length,

app/assets/javascripts/ide/stores/modules/pipelines/mutations.js

@@ -27,13 +27,16 @@ export default {
   [types.RECEIVE_STAGES_SUCCESS](state, stages) {
     state.isLoadingJobs = false;
 
-    state.stages = stages.map((stage, i) => ({
+    state.stages = stages.map((stage, i) => {
+      const foundStage = state.stages.find(s => s.id === i);
+      return {
         ...stage,
         id: i,
-      isCollapsed: false,
-      isLoading: false,
-      jobs: [],
-    }));
+        isCollapsed: foundStage ? foundStage.isCollapsed : false,
+        isLoading: foundStage ? foundStage.isLoading : false,
+        jobs: foundStage ? foundStage.jobs : [],
+      };
+    });
   },
   [types.REQUEST_JOBS](state, id) {
     state.stages = state.stages.reduce(

app/assets/javascripts/vue_shared/components/tabs/tabs.js

@@ -32,7 +32,9 @@ export default {
           h(
             'a',
             {
+              attrs: {
                 href: '#',
+              },
               on: {
                 click: () => this.setTab(i),
               },

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -189,6 +189,10 @@
     &.active {
       color: $color-700;
       box-shadow: inset 3px 0 $color-700;
+
+      &.is-right {
+        box-shadow: inset -3px 0 $color-700;
+      }
     }
   }
 }

app/assets/stylesheets/pages/repo.scss

@@ -903,6 +903,13 @@
       width: 1px;
       background: $white-light;
     }
+
+    &.is-right {
+      &::after {
+        right: auto;
+        left: -1px;
+      }
+    }
   }
 }