reduced duplication of job details

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

 <script>
 import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
-import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
+import ScrollButton from './detail/scroll_button.vue';
+import JobDescription from './detail/description.vue';
 
 const scrollPositions = {
   top: 0,
@@ -15,8 +16,9 @@ export default {
     tooltip,
   },
   components: {
-    CiIcon,
     Icon,
+    ScrollButton,
+    JobDescription,
   },
   data() {
     return {
@@ -46,7 +48,7 @@ export default {
     scrollUp() {
       this.$refs.buildTrace.scrollTo(0, 0);
     },
-    scrollBuildLog: _.throttle(function scrollDebounce() {
+    scrollBuildLog: _.throttle(function buildLogScrollDebounce() {
       const scrollTop = this.$refs.buildTrace.scrollTop;
       const offsetHeight = this.$refs.buildTrace.offsetHeight;
       const scrollHeight = this.$refs.buildTrace.scrollHeight;
@@ -80,28 +82,9 @@ export default {
       </button>
     </header>
     <div class="top-bar d-flex">
-      <div class="ide-job-details d-flex align-items-center">
-        <ci-icon
-          class="append-right-4 d-flex"
-          :status="detailJob.status"
-          :borderless="true"
-          :size="24"
-        />
-        <span>
-          {{ detailJob.name }}
-          <a
-            :href="detailJob.path"
-            target="_blank"
-            class="ide-external-link"
-          >
-            {{ jobId }}
-            <icon
-              name="external-link"
-              :size="12"
-            />
-          </a>
-        </span>
-      </div>
+      <job-description
+        :job="detailJob"
+      />
       <div class="controllers ml-auto">
         <a
           v-tooltip
@@ -117,38 +100,16 @@ export default {
             class="fa fa-file-text-o"
           ></i>
         </a>
-        <div
-          v-tooltip
-          class="controllers-buttons"
-          data-container="body"
-          data-placement="top"
-          :title="__('Scroll to top')"
-        >
-          <button
-            class="btn-scroll btn-transparent btn-blank"
-            type="button"
-            :disabled="isScrolledToTop"
-            @click="scrollUp"
-          >
-            <icon name="scroll_up" />
-          </button>
-        </div>
-        <div
-          v-tooltip
-          class="controllers-buttons"
-          data-container="body"
-          data-placement="top"
-          :title="__('Scroll to bottom')"
-        >
-          <button
-            class="btn-scroll btn-transparent btn-blank"
-            type="button"
-            :disabled="isScrolledToBottom"
-            @click="scrollDown"
-          >
-            <icon name="scroll_down" />
-          </button>
-        </div>
+        <scroll-button
+          direction="up"
+          :disabled="isScrolledToTop"
+          @click="scrollUp"
+        />
+        <scroll-button
+          direction="down"
+          :disabled="isScrolledToBottom"
+          @click="scrollDown"
+        />
       </div>
     </div>
     <pre

app/assets/javascripts/ide/components/jobs/detail/description.vue

+<script>
+import Icon from '../../../../vue_shared/components/icon.vue';
+import CiIcon from '../../../../vue_shared/components/ci_icon.vue';
+
+export default {
+  components: {
+    Icon,
+    CiIcon,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    jobId() {
+      return `#${this.job.id}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-center">
+    <ci-icon
+      class="d-flex"
+      :status="job.status"
+      :borderless="true"
+      :size="24"
+    />
+    <span class="prepend-left-8">
+      {{ job.name }}
+      <a
+        :href="job.path"
+        target="_blank"
+        class="ide-external-link"
+      >
+        {{ jobId }}
+        <icon
+          name="external-link"
+          :size="12"
+        />
+      </a>
+    </span>
+  </div>
+</template>

app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue

+<script>
+import { __ } from '../../../../locale';
+import Icon from '../../../../vue_shared/components/icon.vue';
+import tooltip from '../../../../vue_shared/directives/tooltip';
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+  },
+  props: {
+    direction: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['up', 'down'].includes(value);
+      },
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipTitle() {
+      return this.direction === 'up' ? __('Scroll to top') : __('Scroll to bottom');
+    },
+    iconName() {
+      return `scroll_${this.direction}`;
+    },
+  },
+  methods: {
+    clickedScroll() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-tooltip
+    class="controllers-buttons"
+    data-container="body"
+    data-placement="top"
+    :title="tooltipTitle"
+  >
+    <button
+      class="btn-scroll btn-transparent btn-blank"
+      type="button"
+      :disabled="disabled"
+      @click="clickedScroll"
+    >
+      <icon
+        :name="iconName"
+      />
+    </button>
+  </div>
+</template>

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

 <script>
-import Icon from '../../../vue_shared/components/icon.vue';
-import CiIcon from '../../../vue_shared/components/ci_icon.vue';
+import JobDescription from './detail/description.vue';
 
 export default {
   components: {
-    Icon,
-    CiIcon,
+    JobDescription,
   },
   props: {
     job: {
@@ -28,25 +26,9 @@ export default {
 
 <template>
   <div class="ide-job-item">
-    <ci-icon
-      :status="job.status"
-      :borderless="true"
-      :size="24"
+    <job-description
+      :job="job"
     />
-    <span class="prepend-left-8">
-      {{ job.name }}
-      <a
-        :href="job.path"
-        target="_blank"
-        class="ide-external-link"
-      >
-        {{ jobId }}
-        <icon
-          name="external-link"
-          :size="12"
-        />
-      </a>
-    </span>
     <button
       class="btn btn-default btn-sm ml-auto"
       @click="clickViewLog"

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

@@ -86,7 +86,10 @@ export const setDetailJob = ({ commit, dispatch }, job) => {
 };
 
 export const requestJobTrace = ({ commit }) => commit(types.REQUEST_JOB_TRACE);
-export const receiveJobTraceError = ({ commit }) => commit(types.RECEIVE_JOB_TRACE_ERROR);
+export const receiveJobTraceError = ({ commit }) => {
+  flash(__('Error fetching job trace'));
+  commit(types.RECEIVE_JOB_TRACE_ERROR);
+};
 export const receiveJobTraceSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_JOB_TRACE_SUCCESS, data);