Resolve "Integrate new vue+vuex code base with new API and remove old haml code"

5ed91cf8 · Filipa Lacerda · Phil Hughes · 712f41e1 · 712f41e1 · 5ed91cf8
Commit 5ed91cf8 authored Oct 17, 2018 by Filipa Lacerda Committed by Phil Hughes Oct 17, 2018
34 changed files
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
-import $ from 'jquery';
-import _ from 'underscore';
-import { polyfillSticky } from './lib/utils/sticky';
-import axios from './lib/utils/axios_utils';
-import { visitUrl } from './lib/utils/url_utility';
-import bp from './breakpoints';
-import { numberToHumanSize } from './lib/utils/number_utils';
-import { setCiStatusFavicon } from './lib/utils/common_utils';
-import { isScrolledToBottom, scrollDown, scrollUp } from './lib/utils/scroll_utils';
-import LogOutputBehaviours from './lib/utils/logoutput_behaviours';
-export default class Job extends LogOutputBehaviours {
-  constructor(options) {
-    super();
-    this.timeout = null;
-    this.state = null;
-    this.fetchingStatusFavicon = false;
-    this.options = options || $('.js-build-options').data();
-    this.pagePath = this.options.pagePath;
-    this.buildStatus = this.options.buildStatus;
-    this.state = this.options.logState;
-    this.buildStage = this.options.buildStage;
-    this.$document = $(document);
-    this.$window = $(window);
-    this.logBytes = 0;
-    this.$buildTrace = $('#build-trace');
-    this.$buildRefreshAnimation = $('.js-build-refresh');
-    this.$truncatedInfo = $('.js-truncated-info');
-    this.$buildTraceOutput = $('.js-build-output');
-    this.$topBar = $('.js-top-bar');
-    clearTimeout(this.timeout);
-    this.initSidebar();
-    this.sidebarOnResize();
-    this.$document
-      .off('click', '.js-sidebar-build-toggle')
-      .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
-    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
-    this.$window.off('scroll').on('scroll', () => {
-      if (!isScrolledToBottom()) {
-        this.toggleScrollAnimation(false);
-      } else if (isScrolledToBottom() && !this.isLogComplete) {
-        this.toggleScrollAnimation(true);
-      }
-      this.scrollThrottled();
-    });
-    this.$window
-      .off('resize.build')
-      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
-    this.initAffixTopArea();
-    this.getBuildTrace();
-  }
-  initAffixTopArea() {
-    polyfillSticky(this.$topBar);
-  }
-  scrollToBottom() {
-    scrollDown();
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  }
-  scrollToTop() {
-    scrollUp();
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  }
-  toggleScrollAnimation(toggle) {
-    this.$scrollBottomBtn.toggleClass('animate', toggle);
-  }
-  initSidebar() {
-    this.$sidebar = $('.js-build-sidebar');
-  }
-  getBuildTrace() {
-    return axios
-      .get(`${this.pagePath}/trace.json`, {
-        params: { state: this.state },
-      })
-      .then(res => {
-        const log = res.data;
-        if (!this.fetchingStatusFavicon) {
-          this.fetchingStatusFavicon = true;
-          setCiStatusFavicon(`${this.pagePath}/status.json`)
-            .then(() => {
-              this.fetchingStatusFavicon = false;
-            })
-            .catch(() => {
-              this.fetchingStatusFavicon = false;
-            });
-        }
-        if (log.state) {
-          this.state = log.state;
-        }
-        this.isScrollInBottom = isScrolledToBottom();
-        if (log.append) {
-          this.$buildTraceOutput.append(log.html);
-          this.logBytes += log.size;
-        } else {
-          this.$buildTraceOutput.html(log.html);
-          this.logBytes = log.size;
-        }
-        // if the incremental sum of logBytes we received is less than the total
-        // we need to show a message warning the user about that.
-        if (this.logBytes < log.total) {
-          // size is in bytes, we need to calculate KiB
-          const size = numberToHumanSize(this.logBytes);
-          $('.js-truncated-info-size').html(`${size}`);
-          this.$truncatedInfo.removeClass('hidden');
-        } else {
-          this.$truncatedInfo.addClass('hidden');
-        }
-        this.isLogComplete = log.complete;
-        if (log.complete === false) {
-          this.timeout = setTimeout(() => {
-            this.getBuildTrace();
-          }, 4000);
-        } else {
-          this.$buildRefreshAnimation.remove();
-          this.toggleScrollAnimation(false);
-        }
-        if (log.status !== this.buildStatus) {
-          visitUrl(this.pagePath);
-        }
-      })
-      .catch(() => {
-        this.$buildRefreshAnimation.remove();
-      })
-      .then(() => {
-        if (this.isScrollInBottom) {
-          scrollDown();
-        }
-      })
-      .then(() => this.toggleScroll());
-  }
-  // eslint-disable-next-line class-methods-use-this
-  shouldHideSidebarForViewport() {
-    const bootstrapBreakpoint = bp.getBreakpointSize();
-    return bootstrapBreakpoint === 'xs';
-  }
-  toggleSidebar(shouldHide) {
-    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
-    const $toggleButton = $('.js-sidebar-build-toggle-header');
-    this.$sidebar
-      .toggleClass('right-sidebar-expanded', shouldShow)
-      .toggleClass('right-sidebar-collapsed', shouldHide);
-    this.$topBar
-      .toggleClass('sidebar-expanded', shouldShow)
-      .toggleClass('sidebar-collapsed', shouldHide);
-    if (this.$sidebar.hasClass('right-sidebar-expanded')) {
-      $toggleButton.addClass('hidden');
-    } else {
-      $toggleButton.removeClass('hidden');
-    }
-  }
-  sidebarOnResize() {
-    this.toggleSidebar(this.shouldHideSidebarForViewport());
-  }
-  sidebarOnClick() {
-    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
-  }
-}
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
 <script>
-  import { mapGetters, mapState } from 'vuex';
+  import _ from 'underscore';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+  import bp from '~/breakpoints';
  import CiHeader from '~/vue_shared/components/header_ci_component.vue';
  import Callout from '~/vue_shared/components/callout.vue';
+  import createStore from '../store';
  import EmptyState from './empty_state.vue';
  import EnvironmentsBlock from './environments_block.vue';
  import ErasedBlock from './erased_block.vue';
+  import Log from './job_log.vue';
+  import LogTopBar from './job_log_controllers.vue';
  import StuckBlock from './stuck_block.vue';
+  import Sidebar from './sidebar.vue';
  export default {
    name: 'JobPageApp',
+    store: createStore(),
    components: {
      CiHeader,
      Callout,
      EmptyState,
      EnvironmentsBlock,
      ErasedBlock,
+      Log,
+      LogTopBar,
      StuckBlock,
+      Sidebar,
    },
    props: {
      runnerSettingsUrl: {
@@ -23,9 +34,43 @@
        required: false,
        default: null,
      },
+      runnerHelpUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      endpoint: {
+        type: String,
+        required: true,
+      },
+      terminalPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      pagePath: {
+        type: String,
+        required: true,
+      },
+      logState: {
+        type: String,
+        required: true,
+      },
    },
    computed: {
-      ...mapState(['isLoading', 'job']),
+      ...mapState([
+        'isLoading',
+        'job',
+        'isSidebarOpen',
+        'trace',
+        'isTraceComplete',
+        'traceSize',
+        'isTraceSizeVisible',
+        'isScrollBottomDisabled',
+        'isScrollTopDisabled',
+        'isScrolledToBottomBeforeReceivingTrace',
+        'hasError',
+      ]),
      ...mapGetters([
        'headerActions',
        'headerTime',
@@ -35,7 +80,83 @@
        'isJobStuck',
        'hasTrace',
        'emptyStateIllustration',
+        'isScrollingDown',
+        'emptyStateAction',
      ]),
+      shouldRenderContent() {
+        return !this.isLoading && !this.hasError;
+      }
+    },
+    watch: {
+      // Once the job log is loaded,
+      // fetch the stages for the dropdown on the sidebar
+      job(newVal, oldVal) {
+        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+          this.fetchStages();
+        }
+      },
+    },
+    created() {
+      this.throttled = _.throttle(this.toggleScrollButtons, 100);
+      this.setJobEndpoint(this.endpoint);
+      this.setTraceOptions({
+        logState: this.logState,
+        pagePath: this.pagePath,
+      });
+      this.fetchJob();
+      this.fetchTrace();
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('scroll', this.updateScroll);
+    },
+    mounted() {
+      this.updateSidebar();
+    },
+    destroyed() {
+      window.removeEventListener('resize', this.onResize);
+      window.removeEventListener('scroll', this.updateScroll);
+    },
+    methods: {
+      ...mapActions([
+        'setJobEndpoint',
+        'setTraceOptions',
+        'fetchJob',
+        'fetchStages',
+        'hideSidebar',
+        'showSidebar',
+        'toggleSidebar',
+        'fetchTrace',
+        'scrollBottom',
+        'scrollTop',
+        'toggleScrollButtons',
+        'toggleScrollAnimation',
+      ]),
+      onResize() {
+        this.updateSidebar();
+        this.updateScroll();
+      },
+      updateSidebar() {
+        if (bp.getBreakpointSize() === 'xs') {
+          this.hideSidebar();
+        } else if (!this.isSidebarOpen) {
+          this.showSidebar();
+        }
+      },
+      updateScroll() {
+        if (!isScrolledToBottom()) {
+          this.toggleScrollAnimation(false);
+        } else if (this.isScrollingDown) {
+          this.toggleScrollAnimation(true);
+        }
+        this.throttled();
+      },
    },
  };
 </script>
@@ -44,71 +165,107 @@
    <gl-loading-icon
      v-if="isLoading"
      :size="2"
-      class="prepend-top-20"
+      class="js-job-loading prepend-top-20"
    />
-    <template v-else>
+    <template v-else-if="shouldRenderContent">
-      <!-- Header Section -->
+      <div class="js-job-content build-page">
-      <header>
+        <!-- Header Section -->
-        <div class="js-build-header build-header top-area">
+        <header>
-          <ci-header
+          <div class="js-build-header build-header top-area">
-            :status="job.status"
+            <ci-header
-            :item-id="job.id"
+              :status="job.status"
-            :time="headerTime"
+              :item-id="job.id"
-            :user="job.user"
+              :time="headerTime"
-            :actions="headerActions"
+              :user="job.user"
-            :has-sidebar-button="true"
+              :actions="headerActions"
-            :should-render-triggered-label="shouldRenderTriggeredLabel"
+              :has-sidebar-button="true"
-            :item-name="__('Job')"
+              :should-render-triggered-label="shouldRenderTriggeredLabel"
+              :item-name="__('Job')"
+              @clickedSidebarButton="toggleSidebar"
+            />
+          </div>
+          <callout
+            v-if="shouldRenderCalloutMessage"
+            :message="job.callout_message"
+          />
+        </header>
+        <!-- EO Header Section -->
+        <!-- Body Section -->
+        <stuck-block
+          v-if="isJobStuck"
+          class="js-job-stuck"
+          :has-no-runners-for-project="job.runners.available"
+          :tags="job.tags"
+          :runners-path="runnerSettingsUrl"
+        />
+        <environments-block
+          v-if="hasEnvironment"
+          class="js-job-environment"
+          :deployment-status="job.deployment_status"
+          :icon-status="job.status"
+        />
+        <erased-block
+          v-if="job.erased_at"
+          class="js-job-erased-block"
+          :user="job.erased_by"
+          :erased-at="job.erased_at"
+        />
+        <!--job log -->
+        <div 
+          v-if="hasTrace" 
+          class="build-trace-container prepend-top-default">
+          <log-top-bar
+            :class="{
+              'sidebar-expanded': isSidebarOpen,
+              'sidebar-collapsed': !isSidebarOpen
+            }"
+            :erase-path="job.erase_path"
+            :size="traceSize"
+            :raw-path="job.raw_path"
+            :is-scroll-bottom-disabled="isScrollBottomDisabled"
+            :is-scroll-top-disabled="isScrollTopDisabled"
+            :is-trace-size-visible="isTraceSizeVisible"
+            :is-scrolling-down="isScrollingDown"
+            @scrollJobLogTop="scrollTop"
+            @scrollJobLogBottom="scrollBottom"
+          />
+          <log
+            :trace="trace"
+            :is-complete="isTraceComplete"
          />
        </div>
+        <!-- EO job log -->
-        <callout
+        <!--empty state -->
-          v-if="shouldRenderCalloutMessage"
+        <empty-state
-          :message="job.callout_message"
+          v-if="!hasTrace"
+          class="js-job-empty-state"
+          :illustration-path="emptyStateIllustration.image"
+          :illustration-size-class="emptyStateIllustration.size"
+          :title="emptyStateIllustration.title"
+          :content="emptyStateIllustration.content"
+          :action="emptyStateAction"
        />
-      </header>
-      <!-- EO Header Section -->
-      <!-- Body Section -->
-      <stuck-block
-        v-if="isJobStuck"
-        class="js-job-stuck"
-        :has-no-runners-for-project="job.runners.available"
-        :tags="job.tags"
-        :runners-path="runnerSettingsUrl"
-      />
-      <environments-block
-        v-if="hasEnvironment"
-        class="js-job-environment"
-        :deployment-status="job.deployment_status"
-        :icon-status="job.status"
-      />
-      <erased-block
-        v-if="job.erased_at"
-        class="js-job-erased-block"
-        :user="job.erased_by"
-        :erased-at="job.erased_at"
-      />
-      <!--job log -->
-      <!-- EO job log -->
-      <!--empty state -->
-      <empty-state
-        v-if="!hasTrace"
-        class="js-job-empty-state"
-        :illustration-path="emptyStateIllustration.image"
-        :illustration-size-class="emptyStateIllustration.size"
-        :title="emptyStateIllustration.title"
-        :content="emptyStateIllustration.content"
-        :action="job.status.action"
-      />
      <!-- EO empty state -->
      <!-- EO Body Section -->
+      </div>
    </template>
+    <sidebar
+      v-if="shouldRenderContent"
+      class="js-job-sidebar"
+      :class="{
+        'right-sidebar-expanded': isSidebarOpen,
+        'right-sidebar-collapsed': !isSidebarOpen
+      }"
+      :runner-help-url="runnerHelpUrl"
+    />
  </div>
 </template>
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
 <script>
-export default {
+  import { mapState, mapActions } from 'vuex';
-  name: 'JobLog',
-  props: {
+  export default {
-    trace: {
+    name: 'JobLog',
-      type: String,
+    props: {
-      required: true,
+      trace: {
+        type: String,
+        required: true,
+      },
+      isComplete: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState(['isScrolledToBottomBeforeReceivingTrace']),
+    },
+    updated() {
+      this.$nextTick(() => this.handleScrollDown());
+    },
+    mounted() {
+      this.$nextTick(() => this.handleScrollDown());
    },
-    isComplete: {
+    methods: {
-      type: Boolean,
+      ...mapActions(['scrollBottom']),
-      required: true,
+      /**
+       * The job log is sent in HTML, which means we need to use `v-html` to render it
+       * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated
+       * in this case because it runs before `v-html` has finished running, since there's no
+       * Vue binding.
+       * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
+       */
+      handleScrollDown() {
+        if (this.isScrolledToBottomBeforeReceivingTrace) {
+          setTimeout(() => {
+            this.scrollBottom();
+          }, 0);
+        }
+      },
    },
-  },
+  };
-};
 </script>
 <template>
-  <pre class="build-trace">
+  <pre class="js-build-trace build-trace">
    <code
      class="bash"
      v-html="trace"
@@ -22,7 +50,7 @@ export default {
    </code>
    <div
-      v-if="isComplete"
+      v-if="!isComplete"
      class="js-log-animation build-loader-animation"
    >
      <div class="dot"></div>

--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -4,6 +4,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { sprintf } from '~/locale';
+import scrollDown from '../svg/scroll_down.svg';
 export default {
  components: {
@@ -12,6 +13,7 @@ export default {
  directives: {
    tooltip,
  },
+  scrollDown,
  props: {
    erasePath: {
      type: String,
@@ -65,7 +67,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-bar affix js-top-bar">
+  <div class="top-bar affix">
    <!-- truncate information -->
    <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
      <template v-if="isTraceSizeVisible">
@@ -100,7 +102,7 @@ export default {
        v-tooltip
        :title="s__('Job|Erase job log')"
        :href="erasePath"
-        data-confirm="__('Are you sure you want to erase this build?')"
+        :data-confirm="__('Are you sure you want to erase this build?')"
        class="js-erase-link controllers-buttons"
        data-container="body"
        data-method="post"
@@ -138,8 +140,8 @@ export default {
          class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
          :class="{ animate: isScrollingDown }"
          @click="handleScrollToBottom"
+          v-html="$options.scrollDown"
        >
-          <icon name="scroll_down"/>
        </button>
      </div>
      <!-- eo scroll buttons -->

--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
--- a/app/assets/javascripts/jobs/index.js
+++ b/app/assets/javascripts/jobs/index.js
+import Vue from 'vue';
+import JobApp from './components/job_app.vue';
+export default () => {
+  const element = document.getElementById('js-job-vue-app');
+  return new Vue({
+    el: element,
+    components: {
+      JobApp,
+    },
+    render(createElement) {
+      return createElement('job-app', {
+        props: {
+          runnerHelpUrl: element.dataset.runnerHelpUrl,
+          runnerSettingsUrl: element.dataset.runnerSettingsUrl,
+          endpoint: element.dataset.endpoint,
+          pagePath: element.dataset.buildOptionsPagePath,
+          logState: element.dataset.buildOptionsLogState,
+          buildStatus: element.dataset.buildOptionsBuildStatus,
+        },
+      });
+    },
+  });
+};
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
-import _ from 'underscore';
-import { mapState, mapActions } from 'vuex';
-import Vue from 'vue';
-import Job from '../job';
-import JobApp from './components/job_app.vue';
-import Sidebar from './components/sidebar.vue';
-import createStore from './store';
-export default () => {
-  const { dataset } = document.getElementById('js-job-details-vue');
-  const store = createStore();
-  store.dispatch('setJobEndpoint', dataset.endpoint);
-  store.dispatch('fetchJob');
-  // Header
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#js-build-header-vue',
-    components: {
-      JobApp,
-    },
-    store,
-    computed: {
-      ...mapState(['job', 'isLoading']),
-    },
-    render(createElement) {
-      return createElement('job-app', {
-        props: {
-          isLoading: this.isLoading,
-          job: this.job,
-          runnerSettingsUrl: dataset.runnerSettingsUrl,
-        },
-      });
-    },
-  });
-  // Sidebar information block
-  const detailsBlockElement = document.getElementById('js-details-block-vue');
-  const detailsBlockDataset = detailsBlockElement.dataset;
-  // eslint-disable-next-line
-  new Vue({
-    el: detailsBlockElement,
-    components: {
-      Sidebar,
-    },
-    computed: {
-      ...mapState(['job']),
-    },
-    watch: {
-      job(newVal, oldVal) {
-        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
-          this.fetchStages();
-        }
-      },
-    },
-    methods: {
-      ...mapActions(['fetchStages']),
-    },
-    store,
-    render(createElement) {
-      return createElement('sidebar', {
-        props: {
-          runnerHelpUrl: dataset.runnerHelpUrl,
-          terminalPath: detailsBlockDataset.terminalPath,
-        },
-      });
-    },
-  });
-  // eslint-disable-next-line no-new
-  new Job();
-};
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
 import Visibility from 'visibilityjs';
 import * as types from './mutation_types';
-import axios from '../../lib/utils/axios_utils';
+import axios from '~/lib/utils/axios_utils';
-import Poll from '../../lib/utils/poll';
+import Poll from '~/lib/utils/poll';
-import { setCiStatusFavicon } from '../../lib/utils/common_utils';
+import { setFaviconOverlay, resetFavicon } from '~/lib/utils/common_utils';
-import flash from '../../flash';
+import flash from '~/flash';
-import { __ } from '../../locale';
+import { __ } from '~/locale';
+import {
+  canScroll,
+  isScrolledToBottom,
+  isScrolledToTop,
+  isScrolledToMiddle,
+  scrollDown,
+  scrollUp,
+} from '~/lib/utils/scroll_utils';
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
-export const setTraceEndpoint = ({ commit }, endpoint) =>
+export const setTraceOptions = ({ commit }, options) => commit(types.SET_TRACE_OPTIONS, options);
-  commit(types.SET_TRACE_ENDPOINT, endpoint);
-export const setStagesEndpoint = ({ commit }, endpoint) =>
+export const hideSidebar = ({ commit }) => commit(types.HIDE_SIDEBAR);
-  commit(types.SET_STAGES_ENDPOINT, endpoint);
+export const showSidebar = ({ commit }) => commit(types.SHOW_SIDEBAR);
-export const setJobsEndpoint = ({ commit }, endpoint) => commit(types.SET_JOBS_ENDPOINT, endpoint);
+export const toggleSidebar = ({ dispatch, state }) => {
+  if (state.isSidebarOpen) {
+    dispatch('hideSidebar');
+  } else {
+    dispatch('showSidebar');
+  }
+};
 let eTagPoll;
@@ -62,41 +77,84 @@ export const fetchJob = ({ state, dispatch }) => {
  });
 };
-export const receiveJobSuccess = ({ commit }, data) => {
+export const receiveJobSuccess = ({ commit }, data = {}) => {
  commit(types.RECEIVE_JOB_SUCCESS, data);
+  if (data.favicon) {
+    setFaviconOverlay(data.favicon);
+  } else {
+    resetFavicon();
+  }
 };
 export const receiveJobError = ({ commit }) => {
  commit(types.RECEIVE_JOB_ERROR);
  flash(__('An error occurred while fetching the job.'));
+  resetFavicon();
 };
 /**
 * Job's Trace
 */
-export const scrollTop = ({ commit }) => {
+export const scrollTop = ({ dispatch }) => {
-  commit(types.SCROLL_TO_TOP);
+  scrollUp();
-  window.scrollTo({ top: 0 });
+  dispatch('toggleScrollButtons');
 };
-export const scrollBottom = ({ commit }) => {
+export const scrollBottom = ({ dispatch }) => {
-  commit(types.SCROLL_TO_BOTTOM);
+  scrollDown();
-  window.scrollTo({ top: document.height });
+  dispatch('toggleScrollButtons');
+};
+/**
+ * Responsible for toggling the disabled state of the scroll buttons
+ */
+export const toggleScrollButtons = ({ dispatch }) => {
+  if (canScroll()) {
+    if (isScrolledToMiddle()) {
+      dispatch('enableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToTop()) {
+      dispatch('disableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToBottom()) {
+      dispatch('disableScrollBottom');
+      dispatch('enableScrollTop');
+    }
+  } else {
+    dispatch('disableScrollBottom');
+    dispatch('disableScrollTop');
+  }
+};
+export const disableScrollBottom = ({ commit }) => commit(types.DISABLE_SCROLL_BOTTOM);
+export const disableScrollTop = ({ commit }) => commit(types.DISABLE_SCROLL_TOP);
+export const enableScrollBottom = ({ commit }) => commit(types.ENABLE_SCROLL_BOTTOM);
+export const enableScrollTop = ({ commit }) => commit(types.ENABLE_SCROLL_TOP);
+/**
+ * While the automatic scroll down is active,
+ * we show the scroll down button with an animation
+ */
+export const toggleScrollAnimation = ({ commit }, toggle) =>
+  commit(types.TOGGLE_SCROLL_ANIMATION, toggle);
+/**
+ * Responsible to handle automatic scroll
+ */
+export const toggleScrollisInBottom = ({ commit }, toggle) => {
+  commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE, toggle);
 };
 export const requestTrace = ({ commit }) => commit(types.REQUEST_TRACE);
 let traceTimeout;
-export const fetchTrace = ({ dispatch, state }) => {
+export const fetchTrace = ({ dispatch, state }) =>
-  dispatch('requestTrace');
  axios
    .get(`${state.traceEndpoint}/trace.json`, {
      params: { state: state.traceState },
    })
    .then(({ data }) => {
-      if (!state.fetchingStatusFavicon) {
+      dispatch('toggleScrollisInBottom', isScrolledToBottom());
-        dispatch('fetchFavicon');
-      }
      dispatch('receiveTraceSuccess', data);
      if (!data.complete) {
@@ -108,7 +166,7 @@ export const fetchTrace = ({ dispatch, state }) => {
      }
    })
    .catch(() => dispatch('receiveTraceError'));
-};
 export const stopPollingTrace = ({ commit }) => {
  commit(types.STOP_POLLING_TRACE);
  clearTimeout(traceTimeout);
@@ -120,17 +178,6 @@ export const receiveTraceError = ({ commit }) => {
  flash(__('An error occurred while fetching the job log.'));
 };
-export const fetchFavicon = ({ state, dispatch }) => {
-  dispatch('requestStatusFavicon');
-  setCiStatusFavicon(`${state.pagePath}/status.json`)
-    .then(() => dispatch('receiveStatusFaviconSuccess'))
-    .catch(() => dispatch('requestStatusFaviconError'));
-};
-export const requestStatusFavicon = ({ commit }) => commit(types.REQUEST_STATUS_FAVICON);
-export const receiveStatusFaviconSuccess = ({ commit }) =>
-  commit(types.RECEIVE_STATUS_FAVICON_SUCCESS);
-export const requestStatusFaviconError = ({ commit }) => commit(types.RECEIVE_STATUS_FAVICON_ERROR);
 /**
 * Stages dropdown on sidebar
 */

--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
 import _ from 'underscore';
 import { __ } from '~/locale';
+import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 export const headerActions = state => {
  if (state.job.new_issue_path) {
@@ -34,11 +35,12 @@ export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
 * Used to check if it should render the job log or the empty state
 * @returns {Boolean}
 */
-export const hasTrace = state => state.job.has_trace || state.job.status.group === 'running';
+export const hasTrace = state => state.job.has_trace || (!_.isEmpty(state.job.status) && state.job.status.group === 'running');
 export const emptyStateIllustration = state =>
  (state.job && state.job.status && state.job.status.illustration) || {};
+export const emptyStateAction = state =>  (state.job && state.job.status && state.job.status.action) || {};
 /**
 * When the job is pending and there are no available runners
 * we need to render the stuck block;
@@ -46,8 +48,10 @@ export const emptyStateIllustration = state =>
 * @returns {Boolean}
 */
 export const isJobStuck = state =>
-  state.job.status.group === 'pending' &&
+  (!_.isEmpty(state.job.status) && state.job.status.group === 'pending') &&
  (!_.isEmpty(state.job.runners) && state.job.runners.available === false);
+export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
--- a/app/assets/javascripts/jobs/store/mutation_types.js
+++ b/app/assets/javascripts/jobs/store/mutation_types.js
 export const SET_JOB_ENDPOINT = 'SET_JOB_ENDPOINT';
-export const SET_TRACE_ENDPOINT = 'SET_TRACE_ENDPOINT';
+export const SET_TRACE_OPTIONS = 'SET_TRACE_OPTIONS';
-export const SET_STAGES_ENDPOINT = 'SET_STAGES_ENDPOINT';
-export const SET_JOBS_ENDPOINT = 'SET_JOBS_ENDPOINT';
+export const HIDE_SIDEBAR = 'HIDE_SIDEBAR';
+export const SHOW_SIDEBAR = 'SHOW_SIDEBAR';
 export const SCROLL_TO_TOP = 'SCROLL_TO_TOP';
 export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM';
+export const DISABLE_SCROLL_BOTTOM = 'DISABLE_SCROLL_BOTTOM';
+export const DISABLE_SCROLL_TOP = 'DISABLE_SCROLL_TOP';
+export const ENABLE_SCROLL_BOTTOM = 'ENABLE_SCROLL_BOTTOM';
+export const ENABLE_SCROLL_TOP = 'ENABLE_SCROLL_TOP';
+// TODO
+export const TOGGLE_SCROLL_ANIMATION = 'TOGGLE_SCROLL_ANIMATION';
+export const TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
 export const REQUEST_JOB = 'REQUEST_JOB';
 export const RECEIVE_JOB_SUCCESS = 'RECEIVE_JOB_SUCCESS';
@@ -15,10 +24,6 @@ export const STOP_POLLING_TRACE = 'STOP_POLLING_TRACE';
 export const RECEIVE_TRACE_SUCCESS = 'RECEIVE_TRACE_SUCCESS';
 export const RECEIVE_TRACE_ERROR = 'RECEIVE_TRACE_ERROR';
-export const REQUEST_STATUS_FAVICON = 'REQUEST_STATUS_FAVICON';
-export const RECEIVE_STATUS_FAVICON_SUCCESS = 'RECEIVE_STATUS_FAVICON_SUCCESS';
-export const RECEIVE_STATUS_FAVICON_ERROR = 'RECEIVE_STATUS_FAVICON_ERROR';
 export const REQUEST_STAGES = 'REQUEST_STAGES';
 export const RECEIVE_STAGES_SUCCESS = 'RECEIVE_STAGES_SUCCESS';
 export const RECEIVE_STAGES_ERROR = 'RECEIVE_STAGES_ERROR';

--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -4,14 +4,17 @@ export default {
  [types.SET_JOB_ENDPOINT](state, endpoint) {
    state.jobEndpoint = endpoint;
  },
-  [types.REQUEST_STATUS_FAVICON](state) {
-    state.fetchingStatusFavicon = true;
+  [types.SET_TRACE_OPTIONS](state, options = {}) {
+    state.traceEndpoint = options.pagePath;
+    state.traceState = options.logState;
  },
-  [types.RECEIVE_STATUS_FAVICON_SUCCESS](state) {
-    state.fetchingStatusFavicon = false;
+  [types.HIDE_SIDEBAR](state) {
+    state.isSidebarOpen = false;
  },
-  [types.RECEIVE_STATUS_FAVICON_ERROR](state) {
+  [types.SHOW_SIDEBAR](state) {
-    state.fetchingStatusFavicon = false;
+    state.isSidebarOpen = true;
  },
  [types.RECEIVE_TRACE_SUCCESS](state, log) {
@@ -23,8 +26,12 @@ export default {
      state.trace += log.html;
      state.traceSize += log.size;
    } else {
-      state.trace = log.html;
+      // When the job still does not have a trace
-      state.traceSize = log.size;
+      // the trace response will not have a defined
+      // html or size. We keep the old value otherwise these
+      // will be set to `undefined`
+      state.trace = log.html || state.trace;
+      state.traceSize = log.size || state.traceSize;
    }
    if (state.traceSize < log.total) {
@@ -33,25 +40,29 @@ export default {
      state.isTraceSizeVisible = false;
    }
-    state.isTraceComplete = log.complete;
+    state.isTraceComplete = log.complete || state.isTraceComplete;
-    state.hasTraceError = false;
  },
+  /**
+   * Will remove loading animation
+   */
  [types.STOP_POLLING_TRACE](state) {
    state.isTraceComplete = true;
  },
-  // todo_fl: check this.
+  /**
+   * Will remove loading animation
+   */
  [types.RECEIVE_TRACE_ERROR](state) {
-    state.isLoadingTrace = false;
    state.isTraceComplete = true;
-    state.hasTraceError = true;
  },
  [types.REQUEST_JOB](state) {
    state.isLoading = true;
  },
  [types.RECEIVE_JOB_SUCCESS](state, job) {
-    state.isLoading = false;
    state.hasError = false;
+    state.isLoading = false;
    state.job = job;
    /**
@@ -66,17 +77,28 @@ export default {
  },
  [types.RECEIVE_JOB_ERROR](state) {
    state.isLoading = false;
-    state.hasError = true;
    state.job = {};
+    state.hasError = true;
  },
-  [types.SCROLL_TO_TOP](state) {
+  [types.ENABLE_SCROLL_TOP](state) {
-    state.isTraceScrolledToBottom = false;
+    state.isScrollTopDisabled = false;
-    state.hasBeenScrolled = true;
+  },
+  [types.DISABLE_SCROLL_TOP](state) {
+    state.isScrollTopDisabled = true;
+  },
+  [types.ENABLE_SCROLL_BOTTOM](state) {
+    state.isScrollBottomDisabled = false;
  },
-  [types.SCROLL_TO_BOTTOM](state) {
+  [types.DISABLE_SCROLL_BOTTOM](state) {
-    state.isTraceScrolledToBottom = true;
+    state.isScrollBottomDisabled = true;
-    state.hasBeenScrolled = true;
+  },
+  [types.TOGGLE_SCROLL_ANIMATION](state, toggle) {
+    state.isScrollingDown = toggle;
+  },
+  [types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE](state, toggle) {
+    state.isScrolledToBottomBeforeReceivingTrace = toggle;
  },
  [types.REQUEST_STAGES](state) {

--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -4,36 +4,29 @@ export default () => ({
  jobEndpoint: null,
  traceEndpoint: null,
-  // dropdown options
+  // sidebar
-  stagesEndpoint: null,
+  isSidebarOpen: true,
-  // list of jobs on sidebard
-  stageJobsEndpoint: null,
-  // job log
  isLoading: false,
  hasError: false,
  job: {},
-  // trace
+  // scroll buttons state
-  isLoadingTrace: false,
+  isScrollBottomDisabled: true,
-  hasTraceError: false,
+  isScrollTopDisabled: true,
-  trace: '',
+  // Used to check if we should keep the automatic scroll
+  isScrolledToBottomBeforeReceivingTrace: true,
-  isTraceScrolledToBottom: false,
-  hasBeenScrolled: false,
+  trace: '',
  isTraceComplete: false,
-  traceSize: 0, // todo_fl: needs to be converted into human readable format in components
+  traceSize: 0,
  isTraceSizeVisible: false,
-  fetchingStatusFavicon: false,
+  // used as a query parameter to fetch the trace
-  // used as a query parameter
  traceState: null,
-  // used to check if we need to redirect the user - todo_fl:  check if actually needed
-  traceStatus: null,
-  // sidebar dropdown
+  // sidebar dropdown & list of jobs
  isLoadingStages: false,
  isLoadingJobs: false,
  selectedStage: __('More'),

--- a/app/assets/javascripts/jobs/svg/scroll_down.svg
+++ b/app/assets/javascripts/jobs/svg/scroll_down.svg
+<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+  <path class="first-triangle" d="M1.048 14.155a.508.508 0 0 0-.32.105c-.091.07-.136.154-.136.25v.71c0 .095.045.178.135.249.09.07.197.105.321.105h10.043c.124 0 .23-.035.321-.105.09-.07.136-.154.136-.25v-.71c0-.095-.045-.178-.136-.249a.508.508 0 0 0-.32-.105"/>
+  <path class="second-triangle" d="M.687 8.027c-.09-.087-.122-.16-.093-.22.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 12.91a.458.458 0 0 1-.136.089h-.37a.626.626 0 0 1-.136-.09"/>
+  <path class="third-triangle" d="M.687 1.027C.597.94.565.867.594.807c.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 5.91A.458.458 0 0 1 6.257 6h-.37a.626.626 0 0 1-.136-.09"/>
+</svg>
--- a/app/assets/javascripts/pages/projects/jobs/show/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/show/index.js
-import initJobDetails from '~/jobs/job_details_bundle';
+import initJobDetails from '~/jobs';
 document.addEventListener('DOMContentLoaded', initJobDetails);
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -69,6 +69,9 @@ export default {
    onClickAction(action) {
      this.$emit('actionClicked', action);
    },
+    onClickSidebarButton() {
+      this.$emit('clickedSidebarButton');
+    },
  },
 };
 </script>
@@ -161,21 +164,21 @@ export default {
          </i>
        </button>
      </template>
-      <button
+    </section>
-        v-if="hasSidebarButton"
+    <button
-        id="toggleSidebar"
+      v-if="hasSidebarButton"
-        type="button"
+      id="toggleSidebar"
-        class="btn btn-default d-block d-sm-none d-md-none
+      type="button"
+      class="btn btn-default d-block d-sm-none
 sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
-        aria-label="Toggle Sidebar"
+      @click="onClickSidebarButton"
+    >
+      <i
+        class="fa fa-angle-double-left"
+        aria-hidden="true"
+        aria-labelledby="toggleSidebar"
      >
-        <i
+      </i>
-          class="fa fa-angle-double-left"
+    </button>
-          aria-hidden="true"
-          aria-labelledby="toggleSidebar"
-        >
-        </i>
-      </button>
-    </section>
  </header>
 </template>
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -117,7 +117,6 @@
    .controllers {
      display: flex;
-      font-size: 15px;
      justify-content: center;
      align-items: center;
@@ -179,6 +178,7 @@
  .build-loader-animation {
    @include build-loader-animation;
+    float: left;
  }
 }

--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
 - breadcrumb_title _('Artifacts')
 - page_title @path.presence, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
-= render "projects/jobs/header", show_controls: false
+= render "projects/jobs/header"
 - add_to_breadcrumbs(s_('CICD|Jobs'), project_jobs_path(@project))
 - add_to_breadcrumbs("##{@build.id}", project_jobs_path(@project))

--- a/app/views/projects/artifacts/file.html.haml
+++ b/app/views/projects/artifacts/file.html.haml
 - page_title @path, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
-= render "projects/jobs/header", show_controls: false
+= render "projects/jobs/header"
 .tree-holder
  .nav-block

--- a/app/views/projects/jobs/_header.html.haml
+++ b/app/views/projects/jobs/_header.html.haml
- show_controls = local_assigns.fetch(:show_controls, true)
 - pipeline = @build.pipeline
 .content-block.build-header.top-area.page-content-header
@@ -20,12 +19,3 @@
    = render "projects/jobs/user" if @build.user
    = time_ago_with_tooltip(@build.created_at)
-  - if show_controls
-    .nav-controls
-      - if can?(current_user, :create_issue, @project) && @build.failed?
-        = link_to "New issue", new_project_issue_path(@project, issue: build_failed_issue_options), class: 'btn btn-success btn-inverted'
-      - if can?(current_user, :update_build, @build) && @build.retryable?
-        = link_to "Retry job", retry_project_job_path(@project, @build), class: 'btn btn-inverted-secondary', method: :post
-    %button.btn.btn-default.float-right.d-block.d-sm-none.d-md-none.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
-      = icon('angle-double-left')
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
 - @no_container = true
- add_to_breadcrumbs "Jobs", project_jobs_path(@project)
+- add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
 - breadcrumb_title "##{@build.id}"
- page_title "#{@build.name} (##{@build.id})", "Jobs"
+- page_title "#{@build.name} (##{@build.id})", _("Jobs")
 - content_for :page_specific_javascripts do
  = stylesheet_link_tag 'page_bundles/xterm'
 %div{ class: container_class }
-  .build-page.js-build-page
+  #js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json),
-    #js-build-header-vue
+    runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
+    runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),
-    - if @build.running? || @build.has_trace?
+    build_options: javascript_build_options } }
-      .build-trace-container.prepend-top-default
-        .top-bar.js-top-bar
-          .js-truncated-info.truncated-info.d-none.d-sm-block.float-left.hidden<
-            Showing last
-            %span.js-truncated-info-size.truncated-info-size><
-            of log -
-            %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw
-          .controllers.float-right
-            - if @build.has_trace?
-              = link_to raw_project_job_path(@project, @build),
-                      title: 'Show complete raw',
-                      data: { placement: 'top', container: 'body' },
-                      class: 'js-raw-link-controller has-tooltip controllers-buttons' do
-                = icon('file-text-o')
-            - if @build.erasable? && can?(current_user, :erase_build, @build)
-              = link_to erase_project_job_path(@project, @build),
-                        method: :post,
-                        data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
-                        title: 'Erase job log',
-                        class: 'has-tooltip js-erase-link controllers-buttons' do
-                = icon('trash')
-            .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
-              %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-                = custom_icon('scroll_up')
-            .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
-              %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-                = custom_icon('scroll_down')
-        = render 'shared/builds/build_output'
-  #js-details-block-vue{ data: { terminal_path: can?(current_user, :create_build_terminal, @build) && @build.has_terminal? ? terminal_project_job_path(@project, @build) : nil } }
-.js-build-options{ data: javascript_build_options }
-#js-job-details-vue{ data: { endpoint: project_job_path(@project, @build, format: :json),
-  runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
-  runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings') } }
--- a/changelogs/unreleased/50904-job-log.yml
+++ b/changelogs/unreleased/50904-job-log.yml
+---
+title: Transform job page into a single Vue+Vuex application
+merge_request:
+author:
+type: other
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -627,6 +627,9 @@ msgstr ""
 msgid "Are you sure you want to delete this pipeline schedule?"
 msgstr ""
+msgid "Are you sure you want to erase this build?"
+msgstr ""
 msgid "Are you sure you want to lose unsaved changes?"
 msgstr ""

--- a/spec/features/projects/jobs/permissions_spec.rb
+++ b/spec/features/projects/jobs/permissions_spec.rb
@@ -67,7 +67,7 @@ describe 'Project Jobs Permissions' do
        it_behaves_like 'recent job page details responds with status', 200 do
          it 'renders job details', :js do
            expect(page).to have_content "Job ##{job.id}"
-            expect(page).to have_css '#build-trace'
+            expect(page).to have_css '.js-build-trace'
          end
        end

--- a/spec/features/projects/jobs/user_browses_job_spec.rb
+++ b/spec/features/projects/jobs/user_browses_job_spec.rb
@@ -20,7 +20,7 @@ describe 'User browses a job', :js do
    wait_for_requests
    expect(page).to have_content("Job ##{build.id}")
-    expect(page).to have_css('#build-trace')
+    expect(page).to have_css('.js-build-trace')
    # scroll to the top of the page first
    execute_script "window.scrollTo(0,0)"

--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -294,7 +294,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
      end
    end
-    describe 'Raw trace' do
+    describe 'Raw trace', :js do
      before do
        job.run!
@@ -302,7 +302,8 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
      end
      it do
-        expect(page).to have_css('.js-raw-link')
+        wait_for_all_requests
+        expect(page).to have_css('.js-raw-link-controller')
      end
    end
@@ -636,7 +637,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
      end
    end
-    context 'Canceled job' do
+    context 'Canceled job', :js do
      context 'with log' do
        let(:job) { create(:ci_build, :canceled, :trace_artifact, pipeline: pipeline) }
@@ -645,7 +646,8 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
        end
        it 'renders job log' do
-          expect(page).to have_selector('.js-build-output')
+          wait_for_all_requests
+          expect(page).to have_selector('.js-build-trace')
        end
      end
@@ -658,7 +660,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
        it 'renders empty state' do
          expect(page).to have_content(job.detailed_status(user).illustration[:title])
-          expect(page).not_to have_selector('.js-build-output')
+          expect(page).not_to have_selector('.js-build-trace')
          expect(page).to have_content('This job has been canceled')
        end
      end
@@ -673,7 +675,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
      it 'renders empty state' do
        expect(page).to have_content(job.detailed_status(user).illustration[:title])
-        expect(page).not_to have_selector('.js-build-output')
+        expect(page).not_to have_selector('.js-build-trace')
        expect(page).to have_content('This job has been skipped')
      end
    end
@@ -722,8 +724,8 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
        visit project_job_path(project, job)
        wait_for_requests
-        expect(page).to have_css('.js-build-sidebar.right-sidebar-collapsed', visible: false)
+        expect(page).to have_css('.js-job-sidebar.right-sidebar-collapsed', visible: false)
-        expect(page).not_to have_css('.js-build-sidebar.right-sidebar-expanded', visible: false)
+        expect(page).not_to have_css('.js-job-sidebar.right-sidebar-expanded', visible: false)
      end
    end
@@ -734,8 +736,8 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
        visit project_job_path(project, job)
        wait_for_requests
-        expect(page).to have_css('.js-build-sidebar.right-sidebar-expanded')
+        expect(page).to have_css('.js-job-sidebar.right-sidebar-expanded')
-        expect(page).not_to have_css('.js-build-sidebar.right-sidebar-collpased')
+        expect(page).not_to have_css('.js-job-sidebar.right-sidebar-collpased')
      end
    end
  end

--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
--- a/spec/javascripts/jobs/components/job_log_spec.js
+++ b/spec/javascripts/jobs/components/job_log_spec.js
 import Vue from 'vue';
 import component from '~/jobs/components/job_log.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import createStore from '~/jobs/store';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { resetStore } from '../store/helpers';
 describe('Job Log', () => {
  const Component = Vue.extend(component);
+  let store;
  let vm;
  const trace = 'Running with gitlab-runner 11.1.0 (081978aa)<br>  on docker-auto-scale-com d5ae8d25<br>Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.4.4-golang-1.9-git-2.18-chrome-67.0-node-8.x-yarn-1.2-postgresql-9.6-graphicsmagick-1.3.29 ...<br>';
+  beforeEach(() => {
+    store = createStore();
+  });
  afterEach(() => {
+    resetStore(store);
    vm.$destroy();
  });
  it('renders provided trace', () => {
-    vm = mountComponent(Component, {
+    vm = mountComponentWithStore(Component, {
-      trace,
+      props: {
-      isComplete: true,
+        trace,
+        isComplete: true,
+      },
+      store,
    });
    expect(vm.$el.querySelector('code').textContent).toContain('Running with gitlab-runner 11.1.0 (081978aa)');
@@ -23,9 +34,12 @@ describe('Job Log', () => {
  describe('while receiving trace', () => {
    it('renders animation', () => {
-      vm = mountComponent(Component, {
+      vm = mountComponentWithStore(Component, {
-        trace,
+        props: {
-        isComplete: true,
+          trace,
+          isComplete: false,
+        },
+        store,
      });
      expect(vm.$el.querySelector('.js-log-animation')).not.toBeNull();
@@ -34,9 +48,12 @@ describe('Job Log', () => {
  describe('when build trace has finishes', () => {
    it('does not render animation', () => {
-      vm = mountComponent(Component, {
+      vm = mountComponentWithStore(Component, {
-        trace,
+        props: {
-        isComplete: false,
+          trace,
+          isComplete: true,
+        },
+        store,
      });
      expect(vm.$el.querySelector('.js-log-animation')).toBeNull();

--- a/spec/javascripts/jobs/components/sidebar_spec.js
+++ b/spec/javascripts/jobs/components/sidebar_spec.js
@@ -18,15 +18,6 @@ describe('Sidebar details block', () => {
    vm.$destroy();
  });
-  describe('when it is loading', () => {
-    it('should render a loading spinner', () => {
-      store.dispatch('requestJob');
-      vm = mountComponentWithStore(SidebarComponent, { store });
-      expect(vm.$el.querySelector('.fa-spinner')).toBeDefined();
-    });
-  });
  describe('when there is no retry path retry', () => {
    it('should not render a retry button', () => {
      const copy = Object.assign({}, job);
@@ -52,12 +43,12 @@ describe('Sidebar details block', () => {
  describe('with terminal path', () => {
    it('renders terminal link', () => {
-      store.dispatch('receiveJobSuccess', job);
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, { terminal_path: 'job/43123/terminal' }),
+      );
      vm = mountComponentWithStore(SidebarComponent, {
        store,
-        props: {
-          terminalPath: 'job/43123/terminal',
-        },
      });
      expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull();

--- a/spec/javascripts/jobs/mock_data.js
+++ b/spec/javascripts/jobs/mock_data.js
@@ -31,6 +31,7 @@ export default {
  },
  coverage: 20,
  erased_at: threeWeeksAgo.toISOString(),
+  erased: false,
  duration: 6.785563,
  tags: ['tag'],
  user: {
@@ -131,6 +132,7 @@ export default {
    path: '/root/ci-mock/merge_requests/2',
  },
  raw_path: '/root/ci-mock/builds/4757/raw',
+  has_trace: true,
 };
 export const stages = [

--- a/spec/javascripts/jobs/store/actions_spec.js
+++ b/spec/javascripts/jobs/store/actions_spec.js
@@ -2,9 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import {
  setJobEndpoint,
-  setTraceEndpoint,
+  setTraceOptions,
-  setStagesEndpoint,
-  setJobsEndpoint,
  clearEtagPoll,
  stopPolling,
  requestJob,
@@ -18,10 +16,6 @@ import {
  stopPollingTrace,
  receiveTraceSuccess,
  receiveTraceError,
-  fetchFavicon,
-  requestStatusFavicon,
-  receiveStatusFaviconSuccess,
-  requestStatusFaviconError,
  requestStages,
  fetchStages,
  receiveStagesSuccess,
@@ -30,6 +24,9 @@ import {
  fetchJobsForStage,
  receiveJobsForStageSuccess,
  receiveJobsForStageError,
+  hideSidebar,
+  showSidebar,
+  toggleSidebar,
 } from '~/jobs/store/actions';
 import state from '~/jobs/store/state';
 import * as types from '~/jobs/store/mutation_types';
@@ -56,45 +53,75 @@ describe('Job State actions', () => {
    });
  });
-  describe('setTraceEndpoint', () => {
+  describe('setTraceOptions', () => {
-    it('should commit SET_TRACE_ENDPOINT mutation', done => {
+    it('should commit SET_TRACE_OPTIONS mutation', done => {
      testAction(
-        setTraceEndpoint,
+        setTraceOptions,
-        'job/872324/trace.json',
+        { pagePath: 'job/872324/trace.json' },
        mockedState,
-        [{ type: types.SET_TRACE_ENDPOINT, payload: 'job/872324/trace.json' }],
+        [{ type: types.SET_TRACE_OPTIONS, payload: { pagePath: 'job/872324/trace.json' } }],
        [],
        done,
      );
    });
  });
-  describe('setStagesEndpoint', () => {
+  describe('hideSidebar', () => {
-    it('should commit SET_STAGES_ENDPOINT mutation', done => {
+    it('should commit HIDE_SIDEBAR mutation', done => {
      testAction(
-        setStagesEndpoint,
+        hideSidebar,
-        'job/872324/stages.json',
+        null,
        mockedState,
-        [{ type: types.SET_STAGES_ENDPOINT, payload: 'job/872324/stages.json' }],
+        [{ type: types.HIDE_SIDEBAR }],
        [],
        done,
      );
    });
  });
-  describe('setJobsEndpoint', () => {
+  describe('showSidebar', () => {
-    it('should commit SET_JOBS_ENDPOINT mutation', done => {
+    it('should commit HIDE_SIDEBAR mutation', done => {
      testAction(
-        setJobsEndpoint,
+        showSidebar,
-        'job/872324/stages/build.json',
+        null,
        mockedState,
-        [{ type: types.SET_JOBS_ENDPOINT, payload: 'job/872324/stages/build.json' }],
+        [{ type: types.SHOW_SIDEBAR }],
        [],
        done,
      );
    });
  });
+  describe('toggleSidebar', () => {
+    describe('when isSidebarOpen is true', () => {
+      it('should dispatch hideSidebar', done => {
+        testAction(
+          toggleSidebar,
+          null,
+          mockedState,
+          [],
+          [{ type: 'hideSidebar' }],
+          done,
+        );
+      });
+    });
+    describe('when isSidebarOpen is false', () => {
+      it('should dispatch showSidebar', done => {
+        mockedState.isSidebarOpen = false;
+        testAction(
+          toggleSidebar,
+          null,
+          mockedState,
+          [],
+          [{ type: 'showSidebar' }],
+          done,
+        );
+      });
+    });
+  });
  describe('requestJob', () => {
    it('should commit REQUEST_JOB mutation', done => {
      testAction(requestJob, null, mockedState, [{ type: types.REQUEST_JOB }], [], done);
@@ -183,14 +210,14 @@ describe('Job State actions', () => {
  });
  describe('scrollTop', () => {
-    it('should commit SCROLL_TO_TOP mutation', done => {
+    it('should dispatch toggleScrollButtons action', done => {
-      testAction(scrollTop, null, mockedState, [{ type: types.SCROLL_TO_TOP }], [], done);
+      testAction(scrollTop, null, mockedState, [], [{ type: 'toggleScrollButtons' }], done);
    });
  });
  describe('scrollBottom', () => {
-    it('should commit SCROLL_TO_BOTTOM mutation', done => {
+    it('should dispatch toggleScrollButtons action', done => {
-      testAction(scrollBottom, null, mockedState, [{ type: types.SCROLL_TO_BOTTOM }], [], done);
+      testAction(scrollBottom, null, mockedState, [], [{ type: 'toggleScrollButtons' }], done);
    });
  });
@@ -215,7 +242,7 @@ describe('Job State actions', () => {
    });
    describe('success', () => {
-      it('dispatches requestTrace, fetchFavicon, receiveTraceSuccess and stopPollingTrace when job is complete', done => {
+      it('dispatches requestTrace, receiveTraceSuccess and stopPollingTrace when job is complete', done => {
        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, {
          html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
          complete: true,
@@ -228,10 +255,8 @@ describe('Job State actions', () => {
          [],
          [
            {
-              type: 'requestTrace',
+              type: 'toggleScrollisInBottom',
-            },
+              payload: true,
-            {
-              type: 'fetchFavicon',
            },
            {
              payload: {
@@ -261,9 +286,6 @@ describe('Job State actions', () => {
          mockedState,
          [],
          [
-            {
-              type: 'requestTrace',
-            },
            {
              type: 'receiveTraceError',
            },
@@ -313,104 +335,6 @@ describe('Job State actions', () => {
    });
  });
-  describe('fetchFavicon', () => {
-    let mock;
-    beforeEach(() => {
-      mockedState.pagePath = `${TEST_HOST}/endpoint`;
-      mock = new MockAdapter(axios);
-    });
-    afterEach(() => {
-      mock.restore();
-    });
-    describe('success', () => {
-      it('dispatches requestStatusFavicon and receiveStatusFaviconSuccess ', done => {
-        mock.onGet(`${TEST_HOST}/endpoint/status.json`).replyOnce(200);
-        testAction(
-          fetchFavicon,
-          null,
-          mockedState,
-          [],
-          [
-            {
-              type: 'requestStatusFavicon',
-            },
-            {
-              type: 'receiveStatusFaviconSuccess',
-            },
-          ],
-          done,
-        );
-      });
-    });
-    describe('error', () => {
-      beforeEach(() => {
-        mock.onGet(`${TEST_HOST}/endpoint/status.json`).replyOnce(500);
-      });
-      it('dispatches requestStatusFavicon and requestStatusFaviconError ', done => {
-        testAction(
-          fetchFavicon,
-          null,
-          mockedState,
-          [],
-          [
-            {
-              type: 'requestStatusFavicon',
-            },
-            {
-              type: 'requestStatusFaviconError',
-            },
-          ],
-          done,
-        );
-      });
-    });
-  });
-  describe('requestStatusFavicon', () => {
-    it('should commit REQUEST_STATUS_FAVICON mutation ', done => {
-      testAction(
-        requestStatusFavicon,
-        null,
-        mockedState,
-        [{ type: types.REQUEST_STATUS_FAVICON }],
-        [],
-        done,
-      );
-    });
-  });
-  describe('receiveStatusFaviconSuccess', () => {
-    it('should commit RECEIVE_STATUS_FAVICON_SUCCESS mutation ', done => {
-      testAction(
-        receiveStatusFaviconSuccess,
-        null,
-        mockedState,
-        [{ type: types.RECEIVE_STATUS_FAVICON_SUCCESS }],
-        [],
-        done,
-      );
-    });
-  });
-  describe('requestStatusFaviconError', () => {
-    it('should commit RECEIVE_STATUS_FAVICON_ERROR mutation ', done => {
-      testAction(
-        requestStatusFaviconError,
-        null,
-        mockedState,
-        [{ type: types.RECEIVE_STATUS_FAVICON_ERROR }],
-        [],
-        done,
-      );
-    });
-  });
  describe('requestStages', () => {
    it('should commit REQUEST_STAGES mutation ', done => {
      testAction(requestStages, null, mockedState, [{ type: types.REQUEST_STAGES }], [], done);

--- a/spec/javascripts/jobs/store/helpers.js
+++ b/spec/javascripts/jobs/store/helpers.js
+import state from '~/jobs/store/state';
+// eslint-disable-next-line import/prefer-default-export
+export const resetStore = store => {
+  store.replaceState(state());
+};
--- a/spec/javascripts/jobs/store/mutations_spec.js
+++ b/spec/javascripts/jobs/store/mutations_spec.js
@@ -20,27 +20,19 @@ describe('Jobs Store Mutations', () => {
    });
  });
-  describe('REQUEST_STATUS_FAVICON', () => {
+  describe('HIDE_SIDEBAR', () => {
-    it('should set fetchingStatusFavicon to true', () => {
+    it('should set isSidebarOpen to false', () => {
-      mutations[types.REQUEST_STATUS_FAVICON](stateCopy);
+      mutations[types.HIDE_SIDEBAR](stateCopy);
-      expect(stateCopy.fetchingStatusFavicon).toEqual(true);
+      expect(stateCopy.isSidebarOpen).toEqual(false);
    });
  });
-  describe('RECEIVE_STATUS_FAVICON_SUCCESS', () => {
+  describe('SHOW_SIDEBAR', () => {
-    it('should set fetchingStatusFavicon to false', () => {
+    it('should set isSidebarOpen to true', () => {
-      mutations[types.RECEIVE_STATUS_FAVICON_SUCCESS](stateCopy);
+      mutations[types.SHOW_SIDEBAR](stateCopy);
-      expect(stateCopy.fetchingStatusFavicon).toEqual(false);
+      expect(stateCopy.isSidebarOpen).toEqual(true);
-    });
-  });
-  describe('RECEIVE_STATUS_FAVICON_ERROR', () => {
-    it('should set fetchingStatusFavicon to false', () => {
-      mutations[types.RECEIVE_STATUS_FAVICON_ERROR](stateCopy);
-      expect(stateCopy.fetchingStatusFavicon).toEqual(false);
    });
  });
@@ -101,9 +93,7 @@ describe('Jobs Store Mutations', () => {
    it('resets trace state and sets error to true', () => {
      mutations[types.RECEIVE_TRACE_ERROR](stateCopy);
-      expect(stateCopy.isLoadingTrace).toEqual(false);
      expect(stateCopy.isTraceComplete).toEqual(true);
-      expect(stateCopy.hasTraceError).toEqual(true);
    });
  });
@@ -156,39 +146,10 @@ describe('Jobs Store Mutations', () => {
      mutations[types.RECEIVE_JOB_ERROR](stateCopy);
      expect(stateCopy.isLoading).toEqual(false);
-      expect(stateCopy.hasError).toEqual(true);
      expect(stateCopy.job).toEqual({});
    });
  });
-  describe('SCROLL_TO_TOP', () => {
-    beforeEach(() => {
-      mutations[types.SCROLL_TO_TOP](stateCopy);
-    });
-    it('sets isTraceScrolledToBottom to false', () => {
-      expect(stateCopy.isTraceScrolledToBottom).toEqual(false);
-    });
-    it('sets hasBeenScrolled to true', () => {
-      expect(stateCopy.hasBeenScrolled).toEqual(true);
-    });
-  });
-  describe('SCROLL_TO_BOTTOM', () => {
-    beforeEach(() => {
-      mutations[types.SCROLL_TO_BOTTOM](stateCopy);
-    });
-    it('sets isTraceScrolledToBottom to true', () => {
-      expect(stateCopy.isTraceScrolledToBottom).toEqual(true);
-    });
-    it('sets hasBeenScrolled to true', () => {
-      expect(stateCopy.hasBeenScrolled).toEqual(true);
-    });
-  });
  describe('REQUEST_STAGES', () => {
    it('sets isLoadingStages to true', () => {
      mutations[types.REQUEST_STAGES](stateCopy);

--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -94,7 +94,7 @@ describe('Header CI Component', () => {
    });
    it('should render sidebar toggle button', () => {
-      expect(vm.$el.querySelector('.js-sidebar-build-toggle')).toBeDefined();
+      expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull();
    });
  });