[ci skip] Try to solve empty states and sticky sidebar50904-vuex-job-page

7 files changed, 137 insertions, 118 deletions

diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index ff45a5b05f8..8a41230ff3a 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -1,4 +1,5 @@
 <script>
+import { placeholderImage } from '~/lazy_loader';
   export default {
     props: {
       illustrationPath: {
@@ -32,6 +33,7 @@
         },
       },
     },
+    placeholderImage: placeholderImage,
   };
 </script>
 <template>
@@ -41,7 +43,12 @@
         :class="illustrationSizeClass"
         class="svg-content"
       >
-        <img :src="illustrationPath" />
+        <img
+          :data-src="illustrationPath"
+          class="lazy"
+          :src="$options.placeholderImage"
+        />
+
       </div>
     </div>
 
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 819e880ff88..13a159f5d87 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -65,6 +65,7 @@
         'isTraceSizeVisible',
         'isScrollTopDisabled',
         'isScrollBottomDisabled',
+        'isScrollInBottom',
       ]),
       ...mapGetters(['headerActions', 'headerTime', 'shouldRenderCalloutMessage', 'jobHasTrace']),
       /**
@@ -78,6 +79,14 @@
         return this.job.deployment_status && !_.isEmpty(this.job.deployment_status);
       },
     },
+    watch: {
+      trace() {
+        this.$nextTick()
+          .then(() => {
+            debugger;
+          });
+      }
+    },
     created() {
       this.setJobEndpoint(this.jobEndpoint);
 
@@ -86,7 +95,12 @@
       // set traceState
       this.fetchJob();
 
-      this.fetchTrace();
+      this.fetchTrace()
+        .then(() => {
+            this.scrollBottom();
+        })
+        .then(() => this.toggleScrollButtons());
+
     },
     mounted() {
       window.addEventListener('scroll', this.onScroll);
@@ -122,99 +136,100 @@
   };
 </script>
 <template>
-  <div class="build-page">
-    <gl-loading-icon
-      v-if="isLoading"
-      :size="3"
-      class="prepend-top-20"
-      />
-
-    <template v-else>
-      <!-- Header Section -->
-      <header>
-        <div class="js-build-header build-header top-area">
-          <ci-header
-            :status="job.status"
-            :item-id="job.id"
-            :time="headerTime"
-            :user="job.user"
-            :actions="headerActions"
-            :has-sidebar-button="true"
-            :should-render-triggered-label="jobStarted"
-            :item-name="__('Job')"
-          />
-        </div>
-
-        <callout
-          v-if="shouldRenderCalloutMessage"
-          :message="job.callout_message"
+  <div>
+    <div class="build-page">
+      <gl-loading-icon
+        v-if="isLoading"
+        :size="3"
+        class="prepend-top-20"
         />
-      </header>
-      <!-- EO Header Section -->
 
-      <!-- Body Section -->
-      <stuck-block
-        v-if="job.runners.available"
-        :has-no-runners-for-project="job.runners.available"
-        :tags="job.tag_list"
-        :runners-path="runnersPath"
-      />
+      <template v-else>
+        <!-- Header Section -->
+        <header>
+          <div class="js-build-header build-header top-area">
+            <ci-header
+              :status="job.status"
+              :item-id="job.id"
+              :time="headerTime"
+              :user="job.user"
+              :actions="headerActions"
+              :has-sidebar-button="true"
+              :should-render-triggered-label="jobStarted"
+              :item-name="__('Job')"
+            />
+          </div>
 
-      <environments-block
-        v-if="hasEnvironment"
-        :deployment-status="job.deployment_status"
-      />
+          <callout
+            v-if="shouldRenderCalloutMessage"
+            :message="job.callout_message"
+          />
+        </header>
+        <!-- EO Header Section -->
 
-      <erased-block
-        v-if="job.erased"
-        :user="job.erased_by"
-        :erased-at="job.erased_at"
-      />
+        <!-- Body Section -->
+        <stuck-block
+          v-if="job.runners.available"
+          :has-no-runners-for-project="job.runners.available"
+          :tags="job.tag_list"
+          :runners-path="runnersPath"
+        />
 
-      <!--job log -->
-      <div
-        v-if="jobHasTrace"
-        class="build-trace-container prepend-top-default"
-      >
-        <log-controllers
-          :erase-path="job.erase_path"
-          :raw-path="job.raw_path"
-          :size="traceSize"
-          :is-scroll-bottom-disabled="isScrollBottomDisabled"
-          :is-scroll-top-disabled="isScrollTopDisabled"
-          :is-trace-size-visible="isTraceSizeVisible"
-          :is-scrolling-down="isScrollingDown"
-          @scrollJobLogTop="scrollTop"
-          @scrollJobLogBottom="scrollBottom"
+        <environments-block
+          v-if="hasEnvironment"
+          :deployment-status="job.deployment_status"
         />
 
-        <log-block
-          :trace="trace"
-          :is-complete="isTraceComplete"
-          class="float-left"
+        <erased-block
+          v-if="job.erased"
+          :user="job.erased_by"
+          :erased-at="job.erased_at"
         />
-      </div>
-      <!-- EO job log -->
 
-      <!-- fl todo, check the illustrations not loading -->
-      <empty-state
-        v-else
-        :illustration-path="job.status.illustration.image"
-        :illustration-size-class="job.status.illustration.size"
-        :title="job.status.illustration.title"
-        :content="job.status.illustration.content"
-        :action="job.status.action"
-      />
-      <!-- EO Body Section -->
+        <!--job log -->
+        <div
+          v-if="jobHasTrace"
+          class="build-trace-container prepend-top-default"
+        >
+          <log-controllers
+            :erase-path="job.erase_path"
+            :raw-path="job.raw_path"
+            :size="traceSize"
+            :is-scroll-bottom-disabled="isScrollBottomDisabled"
+            :is-scroll-top-disabled="isScrollTopDisabled"
+            :is-trace-size-visible="isTraceSizeVisible"
+            :is-scrolling-down="isScrollingDown"
+            @scrollJobLogTop="scrollTop"
+            @scrollJobLogBottom="scrollBottom"
+          />
 
-      <!-- Sidebar Section -->
-      <sidebar
-        :job="job"
-        :runner-help-url="runnerHelpUrl"
-        :terminal-path="terminalPath"
-      />
-      <!-- EO Sidebar Section -->
+          <log-block
+            :trace="trace"
+            :is-complete="isTraceComplete"
+            class="float-left"
+          />
+        </div>
+        <!-- EO job log -->
 
-    </template>
+        <!-- fl todo, check the illustrations not loading -->
+        <empty-state
+          v-else
+          :illustration-path="job.status.illustration.image"
+          :illustration-size-class="job.status.illustration.size"
+          :title="job.status.illustration.title"
+          :content="job.status.illustration.content"
+          :action="job.status.action"
+        />
+        <!-- EO Body Section -->
+      </template>
+    </div>
+    <!-- Sidebar Section -->
+    <sidebar
+      v-if="!isLoading"
+      :job="job"
+      :runner-help-url="runnerHelpUrl"
+      :terminal-path="terminalPath"
+    />
+    <!-- EO Sidebar Section -->
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 81335fd1ef9..d5cdb277784 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,4 +1,5 @@
 <script>
+  import { polyfillSticky } from '~/lib/utils/sticky';
   import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
   import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -58,6 +59,9 @@
         this.$emit('scrollJobLogBottom');
       },
     },
+    mounted() {
+      polyfillSticky(this.$el);
+    },
   };
 </script>
 <template>
@@ -133,7 +137,7 @@
           type="button"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
           @click="handleScrollToBottom"
-          :class="{ animate: isScrollingDown }"
+          :class="{ animate: true }"
         >
           <icon name="scroll_down"/>
         </button>
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 6e598d602d6..79251d9de78 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -48,7 +48,7 @@ export const fetchJob = ({ state, dispatch }) => {
     data: state.jobEndpoint,
     method: 'getJob',
     successCallback: ({ data }) => dispatch('receiveJobSuccess', data),
-    errorCallback: (error) => dispatch('receiveJobError', error),
+    errorCallback: () => dispatch('receiveJobError'),
   });
 
   if (!Visibility.hidden()) {
@@ -57,7 +57,7 @@ export const fetchJob = ({ state, dispatch }) => {
     axios
       .get(state.jobEndpoint)
       .then(({ data }) => dispatch('receiveJobSuccess', data))
-      .catch((error) => dispatch('receiveJobError', error));
+      .catch(() => dispatch('receiveJobError'));
   }
 
   Visibility.change(() => {
@@ -70,9 +70,7 @@ export const fetchJob = ({ state, dispatch }) => {
 };
 
 export const receiveJobSuccess = ({ commit }, data) => commit(types.RECEIVE_JOB_SUCCESS, data);
-export const receiveJobError = ({ commit }, error) => {
-  debugger;
-  console.log(error)
+export const receiveJobError = ({ commit }) => {
   commit(types.RECEIVE_JOB_ERROR);
   flash(__('An error occurred while fetching the job.'));
 };
@@ -133,7 +131,7 @@ export const toggleScrollAnimation = ({ commit }, toggle) =>
 export const requestTrace = ({ commit }) => commit(types.REQUEST_TRACE);
 
 let traceTimeout;
-export const fetchTrace = ({ dispatch, state }) => {
+export const fetchTrace = ({ dispatch, state, commit }) => {
   dispatch('requestTrace');
 
   axios
@@ -141,20 +139,20 @@ export const fetchTrace = ({ dispatch, state }) => {
       params: { state: state.traceState },
     })
     .then(({ data }) => {
-      data = {
-        id: 101741835,
-        status: 'running',
-        complete: false,
-        html:
-          'Running with gitlab-runner 11.4.0~beta.748.gcde4a2d1 (cde4a2d1)\u003cbr\u003e  on docker-auto-scale ed2dce3a\u003cbr\u003eUsing Docker executor with image docker:stable ...\u003cbr\u003eStarting service docker:stable-dind ...\u003cbr\u003ePulling docker image docker:stable-dind ...\u003cbr\u003eUsing docker image sha256:943cc2194c118472a134b2fee0bb7144c1c62ca415ff030d0cc00d43b81e29f7 for docker:stable-dind ...\u003cbr\u003eWaiting for services to be up and running...\u003cbr\u003ePulling docker image docker:stable ...\u003cbr\u003eUsing docker image sha256:321f2cfcc3432bf7c18ee541c4cc4402d48156c1c7150f76026a2d3772369e89 for docker:stable ...\u003cbr\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960287" data-section="prepare_script"\u003esection_start:1537960287:prepare_script\u003c/div\u003eRunning on runner-ed2dce3a-project-13083-concurrent-0 via runner-ed2dce3a-srm-1537960221-ff03f02a...\u003cbr\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960289" data-section="prepare_script"\u003esection_end:1537960289:prepare_script\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960289" data-section="get_sources"\u003esection_start:1537960289:get_sources\u003c/div\u003e\u003cspan class="term-fg-l-green term-bold"\u003eCloning repository for master with git depth set to 20...\u003c/span\u003e\u003cbr\u003eCloning into \'/builds/gitlab-org/gitlab-ce\'...\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003eChecking out 6c3c76af as master...\u003c/span\u003e\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003eSkipping Git submodules setup\u003c/span\u003e\u003cbr\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960301" data-section="get_sources"\u003esection_end:1537960301:get_sources\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960301" data-section="restore_cache"\u003esection_start:1537960301:restore_cache\u003c/div\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960303" data-section="restore_cache"\u003esection_end:1537960303:restore_cache\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960303" data-section="download_artifacts"\u003esection_start:1537960303:download_artifacts\u003c/div\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960304" data-section="download_artifacts"\u003esection_end:1537960304:download_artifacts\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960304" data-section="build_script"\u003esection_start:1537960304:build_script\u003c/div\u003e\u003cspan class="term-fg-l-green term-bold"\u003e$ export SP_VERSION=$(echo "$CI_SERVER_VERSION" | sed \'s/^\\([0-9]*\\)\\.\\([0-9]*\\).*/\\1-\\2-stable/\')\u003c/span\u003e\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003e$ docker run --env SOURCE_CODE="$PWD" --volume "$PWD":/code --volume /var/run/docker.sock:/var/run/docker.sock "registry.gitlab.com/gitlab-org/security-products/codequality:$SP_VERSION" /code\u003c/span\u003e\u003cbr\u003eUnable to find image \'registry.gitlab.com/gitlab-org/security-products/codequality:11-3-stable\' locally\u003cbr\u003e11-3-stable: Pulling from gitlab-org/security-products/codequality\u003cbr\u003e911c6d0c7995: Pulling fs layer\u003cbr\u003eaff9b9c51076: Pulling fs layer\u003cbr\u003e9500841639b7: Pulling fs layer\u003cbr\u003ece7d9f10a155: Pulling fs layer\u003cbr\u003e0348d20deefe: Pulling fs layer\u003cbr\u003e1349cf012439: Pulling fs layer\u003cbr\u003e80d35bc2fcb0: Pulling fs layer\u003cbr\u003e32785dd38a36: Pulling fs layer\u003cbr\u003e5b14ec8e4612: Pulling fs layer\u003cbr\u003ece7d9f10a155: Waiting\u003cbr\u003e0348d20deefe: Waiting\u003cbr\u003e1349cf012439: Waiting\u003cbr\u003e80d35bc2fcb0: Waiting\u003cbr\u003e32785dd38a36: Waiting\u003cbr\u003e5b14ec8e4612: Waiting\u003cbr\u003e9500841639b7: Verifying Checksum\u003cbr\u003e9500841639b7: Download complete\u003cbr\u003eaff9b9c51076: Verifying Checksum\u003cbr\u003eaff9b9c51076: Download complete\u003cbr\u003e0348d20deefe: Verifying Checksum\u003cbr\u003e0348d20deefe: Download complete\u003cbr\u003e1349cf012439: Verifying Checksum\u003cbr\u003e1349cf012439: Download complete\u003cbr\u003e911c6d0c7995: Verifying Checksum\u003cbr\u003e911c6d0c7995: Download complete\u003cbr\u003e80d35bc2fcb0: Verifying Checksum\u003cbr\u003e80d35bc2fcb0: Download complete\u003cbr\u003e32785dd38a36: Verifying Checksum\u003cbr\u003e32785dd38a36: Download complete\u003cbr\u003e911c6d0c7995: Pull complete\u003cbr\u003eaff9b9c51076: Pull complete\u003cbr\u003e5b14ec8e4612: Verifying Checksum\u003cbr\u003e5b14ec8e4612: Download complete\u003cbr\u003e9500841639b7: Pull complete\u003cbr\u003ece7d9f10a155: Verifying Checksum\u003cbr\u003ece7d9f10a155: Download complete\u003cbr\u003ece7d9f10a155: Pull complete\u003cbr\u003e0348d20deefe: Pull complete\u003cbr\u003e1349cf012439: Pull complete\u003cbr\u003e80d35bc2fcb0: Pull complete\u003cbr\u003e32785dd38a36: Pull complete\u003cbr\u003e5b14ec8e4612: Pull complete\u003cbr\u003eDigest: sha256:140e9a52a1700dae0aef504b3daf9854de98588ac6a9e733c0fe6938f65220ad\u003cbr\u003eStatus: Downloaded newer image for registry.gitlab.com/gitlab-org/security-products/codequality:11-3-stable\u003cbr\u003eUnable to find image \'codeclimate/codeclimate:0.72.0\' locally\u003cbr\u003e0.72.0: Pulling from codeclimate/codeclimate\u003cbr\u003e2f3f3e5e133b: Pulling fs layer\u003cbr\u003e2654c654a6e7: Pulling fs layer\u003cbr\u003e412e64056adf: Pulling fs layer\u003cbr\u003ea3ed95caeb02: Pulling fs layer\u003cbr\u003eb34d109380af: Pulling fs layer\u003cbr\u003eef84039c747a: Pulling fs layer\u003cbr\u003e0b64161d56c4: Pulling fs layer\u003cbr\u003e532d14be51e6: Pulling fs layer\u003cbr\u003e8210184098e2: Pulling fs layer\u003cbr\u003ebd15a272ee53: Pulling fs layer\u003cbr\u003ed25d7915b947: Pulling fs layer\u003cbr\u003e4e198ced2ee0: Pulling fs layer\u003cbr\u003e5bcf14160dfc: Pulling fs layer\u003cbr\u003ef47a75dcba39: Pulling fs layer\u003cbr\u003ea3ed95caeb02: Waiting\u003cbr\u003eb34d109380af: Waiting\u003cbr\u003eef84039c747a: Waiting\u003cbr\u003e0b64161d56c4: Waiting\u003cbr\u003e532d14be51e6: Waiting\u003cbr\u003e8210184098e2: Waiting\u003cbr\u003ebd15a272ee53: Waiting\u003cbr\u003ed25d7915b947: Waiting\u003cbr\u003e4e198ced2ee0: Waiting\u003cbr\u003e5bcf14160dfc: Waiting\u003cbr\u003ef47a75dcba39: Waiting\u003cbr\u003e412e64056adf: Verifying Checksum\u003cbr\u003e412e64056adf: Download complete\u003cbr\u003e2f3f3e5e133b: Verifying Checksum\u003cbr\u003e2f3f3e5e133b: Download complete\u003cbr\u003e2654c654a6e7: Verifying Checksum\u003cbr\u003e2654c654a6e7: Download complete\u003cbr\u003ea3ed95caeb02: Verifying Checksum\u003cbr\u003ea3ed95caeb02: Download complete\u003cbr\u003eb34d109380af: Verifying Checksum\u003cbr\u003eb34d109380af: Download complete\u003cbr\u003e2f3f3e5e133b: Pull complete\u003cbr\u003eef84039c747a: Verifying Checksum\u003cbr\u003eef84039c747a: Download complete\u003cbr\u003e0b64161d56c4: Verifying Checksum\u003cbr\u003e0b64161d56c4: Download complete\u003cbr\u003e532d14be51e6: Verifying Checksum\u003cbr\u003e532d14be51e6: Download complete\u003cbr\u003e8210184098e2: Verifying Checksum\u003cbr\u003e8210184098e2: Download complete\u003cbr\u003ebd15a272ee53: Verifying Checksum\u003cbr\u003ebd15a272ee53: Download complete\u003cbr\u003ed25d7915b947: Verifying Checksum\u003cbr\u003ed25d7915b947: Download complete\u003cbr\u003e4e198ced2ee0: Verifying Checksum\u003cbr\u003e4e198ced2ee0: Download complete\u003cbr\u003ef47a75dcba39: Verifying Checksum\u003cbr\u003ef47a75dcba39: Download complete\u003cbr\u003e5bcf14160dfc: Verifying Checksum\u003cbr\u003e5bcf14160dfc: Download complete\u003cbr\u003e2654c654a6e7: Pull complete\u003cbr\u003e412e64056adf: Pull complete\u003cbr\u003ea3ed95caeb02: Pull complete\u003cbr\u003eb34d109380af: Pull complete\u003cbr\u003eef84039c747a: Pull complete\u003cbr\u003e0b64161d56c4: Pull complete\u003cbr\u003e532d14be51e6: Pull complete\u003cbr\u003e8210184098e2: Pull complete\u003cbr\u003ebd15a272ee53: Pull complete\u003cbr\u003ed25d7915b947: Pull complete\u003cbr\u003e4e198ced2ee0: Pull complete\u003cbr\u003e5bcf14160dfc: Pull complete\u003cbr\u003ef47a75dcba39: Pull complete\u003cbr\u003eDigest: sha256:c8afb8c2037f7b9c5c9ae198aff00b1cf80db11d3591fbe89dfb3c69192663f1\u003cbr\u003eStatus: Downloaded newer image for codeclimate/codeclimate:0.72.0\u003cbr\u003eWARNING: A new version (v0.78.1) is available. Upgrade instructions are available at: https://github.com/codeclimate/codeclimate#packages\u003cbr\u003e',
-        state:
-          'eyJvZmZzZXQiOjU2MTEsIm5fb3Blbl90YWdzIjowLCJmZ19jb2xvciI6bnVsbCwiYmdfY29sb3IiOm51bGwsInN0eWxlX21hc2siOjB9',
-        append: false,
-        truncated: false,
-        offset: 0,
-        size: 5611,
-        total: 56110,
-      };
+      // data = {
+      //   id: 101741835,
+      //   status: 'running',
+      //   complete: false,
+      //   html:
+      //     'Running with gitlab-runner 11.4.0~beta.748.gcde4a2d1 (cde4a2d1)\u003cbr\u003e  on docker-auto-scale ed2dce3a\u003cbr\u003eUsing Docker executor with image docker:stable ...\u003cbr\u003eStarting service docker:stable-dind ...\u003cbr\u003ePulling docker image docker:stable-dind ...\u003cbr\u003eUsing docker image sha256:943cc2194c118472a134b2fee0bb7144c1c62ca415ff030d0cc00d43b81e29f7 for docker:stable-dind ...\u003cbr\u003eWaiting for services to be up and running...\u003cbr\u003ePulling docker image docker:stable ...\u003cbr\u003eUsing docker image sha256:321f2cfcc3432bf7c18ee541c4cc4402d48156c1c7150f76026a2d3772369e89 for docker:stable ...\u003cbr\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960287" data-section="prepare_script"\u003esection_start:1537960287:prepare_script\u003c/div\u003eRunning on runner-ed2dce3a-project-13083-concurrent-0 via runner-ed2dce3a-srm-1537960221-ff03f02a...\u003cbr\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960289" data-section="prepare_script"\u003esection_end:1537960289:prepare_script\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960289" data-section="get_sources"\u003esection_start:1537960289:get_sources\u003c/div\u003e\u003cspan class="term-fg-l-green term-bold"\u003eCloning repository for master with git depth set to 20...\u003c/span\u003e\u003cbr\u003eCloning into \'/builds/gitlab-org/gitlab-ce\'...\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003eChecking out 6c3c76af as master...\u003c/span\u003e\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003eSkipping Git submodules setup\u003c/span\u003e\u003cbr\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960301" data-section="get_sources"\u003esection_end:1537960301:get_sources\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960301" data-section="restore_cache"\u003esection_start:1537960301:restore_cache\u003c/div\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960303" data-section="restore_cache"\u003esection_end:1537960303:restore_cache\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960303" data-section="download_artifacts"\u003esection_start:1537960303:download_artifacts\u003c/div\u003e\u003cdiv class="hidden" data-action="end" data-timestamp="1537960304" data-section="download_artifacts"\u003esection_end:1537960304:download_artifacts\u003c/div\u003e\u003cdiv class="hidden" data-action="start" data-timestamp="1537960304" data-section="build_script"\u003esection_start:1537960304:build_script\u003c/div\u003e\u003cspan class="term-fg-l-green term-bold"\u003e$ export SP_VERSION=$(echo "$CI_SERVER_VERSION" | sed \'s/^\\([0-9]*\\)\\.\\([0-9]*\\).*/\\1-\\2-stable/\')\u003c/span\u003e\u003cbr\u003e\u003cspan class="term-fg-l-green term-bold"\u003e$ docker run --env SOURCE_CODE="$PWD" --volume "$PWD":/code --volume /var/run/docker.sock:/var/run/docker.sock "registry.gitlab.com/gitlab-org/security-products/codequality:$SP_VERSION" /code\u003c/span\u003e\u003cbr\u003eUnable to find image \'registry.gitlab.com/gitlab-org/security-products/codequality:11-3-stable\' locally\u003cbr\u003e11-3-stable: Pulling from gitlab-org/security-products/codequality\u003cbr\u003e911c6d0c7995: Pulling fs layer\u003cbr\u003eaff9b9c51076: Pulling fs layer\u003cbr\u003e9500841639b7: Pulling fs layer\u003cbr\u003ece7d9f10a155: Pulling fs layer\u003cbr\u003e0348d20deefe: Pulling fs layer\u003cbr\u003e1349cf012439: Pulling fs layer\u003cbr\u003e80d35bc2fcb0: Pulling fs layer\u003cbr\u003e32785dd38a36: Pulling fs layer\u003cbr\u003e5b14ec8e4612: Pulling fs layer\u003cbr\u003ece7d9f10a155: Waiting\u003cbr\u003e0348d20deefe: Waiting\u003cbr\u003e1349cf012439: Waiting\u003cbr\u003e80d35bc2fcb0: Waiting\u003cbr\u003e32785dd38a36: Waiting\u003cbr\u003e5b14ec8e4612: Waiting\u003cbr\u003e9500841639b7: Verifying Checksum\u003cbr\u003e9500841639b7: Download complete\u003cbr\u003eaff9b9c51076: Verifying Checksum\u003cbr\u003eaff9b9c51076: Download complete\u003cbr\u003e0348d20deefe: Verifying Checksum\u003cbr\u003e0348d20deefe: Download complete\u003cbr\u003e1349cf012439: Verifying Checksum\u003cbr\u003e1349cf012439: Download complete\u003cbr\u003e911c6d0c7995: Verifying Checksum\u003cbr\u003e911c6d0c7995: Download complete\u003cbr\u003e80d35bc2fcb0: Verifying Checksum\u003cbr\u003e80d35bc2fcb0: Download complete\u003cbr\u003e32785dd38a36: Verifying Checksum\u003cbr\u003e32785dd38a36: Download complete\u003cbr\u003e911c6d0c7995: Pull complete\u003cbr\u003eaff9b9c51076: Pull complete\u003cbr\u003e5b14ec8e4612: Verifying Checksum\u003cbr\u003e5b14ec8e4612: Download complete\u003cbr\u003e9500841639b7: Pull complete\u003cbr\u003ece7d9f10a155: Verifying Checksum\u003cbr\u003ece7d9f10a155: Download complete\u003cbr\u003ece7d9f10a155: Pull complete\u003cbr\u003e0348d20deefe: Pull complete\u003cbr\u003e1349cf012439: Pull complete\u003cbr\u003e80d35bc2fcb0: Pull complete\u003cbr\u003e32785dd38a36: Pull complete\u003cbr\u003e5b14ec8e4612: Pull complete\u003cbr\u003eDigest: sha256:140e9a52a1700dae0aef504b3daf9854de98588ac6a9e733c0fe6938f65220ad\u003cbr\u003eStatus: Downloaded newer image for registry.gitlab.com/gitlab-org/security-products/codequality:11-3-stable\u003cbr\u003eUnable to find image \'codeclimate/codeclimate:0.72.0\' locally\u003cbr\u003e0.72.0: Pulling from codeclimate/codeclimate\u003cbr\u003e2f3f3e5e133b: Pulling fs layer\u003cbr\u003e2654c654a6e7: Pulling fs layer\u003cbr\u003e412e64056adf: Pulling fs layer\u003cbr\u003ea3ed95caeb02: Pulling fs layer\u003cbr\u003eb34d109380af: Pulling fs layer\u003cbr\u003eef84039c747a: Pulling fs layer\u003cbr\u003e0b64161d56c4: Pulling fs layer\u003cbr\u003e532d14be51e6: Pulling fs layer\u003cbr\u003e8210184098e2: Pulling fs layer\u003cbr\u003ebd15a272ee53: Pulling fs layer\u003cbr\u003ed25d7915b947: Pulling fs layer\u003cbr\u003e4e198ced2ee0: Pulling fs layer\u003cbr\u003e5bcf14160dfc: Pulling fs layer\u003cbr\u003ef47a75dcba39: Pulling fs layer\u003cbr\u003ea3ed95caeb02: Waiting\u003cbr\u003eb34d109380af: Waiting\u003cbr\u003eef84039c747a: Waiting\u003cbr\u003e0b64161d56c4: Waiting\u003cbr\u003e532d14be51e6: Waiting\u003cbr\u003e8210184098e2: Waiting\u003cbr\u003ebd15a272ee53: Waiting\u003cbr\u003ed25d7915b947: Waiting\u003cbr\u003e4e198ced2ee0: Waiting\u003cbr\u003e5bcf14160dfc: Waiting\u003cbr\u003ef47a75dcba39: Waiting\u003cbr\u003e412e64056adf: Verifying Checksum\u003cbr\u003e412e64056adf: Download complete\u003cbr\u003e2f3f3e5e133b: Verifying Checksum\u003cbr\u003e2f3f3e5e133b: Download complete\u003cbr\u003e2654c654a6e7: Verifying Checksum\u003cbr\u003e2654c654a6e7: Download complete\u003cbr\u003ea3ed95caeb02: Verifying Checksum\u003cbr\u003ea3ed95caeb02: Download complete\u003cbr\u003eb34d109380af: Verifying Checksum\u003cbr\u003eb34d109380af: Download complete\u003cbr\u003e2f3f3e5e133b: Pull complete\u003cbr\u003eef84039c747a: Verifying Checksum\u003cbr\u003eef84039c747a: Download complete\u003cbr\u003e0b64161d56c4: Verifying Checksum\u003cbr\u003e0b64161d56c4: Download complete\u003cbr\u003e532d14be51e6: Verifying Checksum\u003cbr\u003e532d14be51e6: Download complete\u003cbr\u003e8210184098e2: Verifying Checksum\u003cbr\u003e8210184098e2: Download complete\u003cbr\u003ebd15a272ee53: Verifying Checksum\u003cbr\u003ebd15a272ee53: Download complete\u003cbr\u003ed25d7915b947: Verifying Checksum\u003cbr\u003ed25d7915b947: Download complete\u003cbr\u003e4e198ced2ee0: Verifying Checksum\u003cbr\u003e4e198ced2ee0: Download complete\u003cbr\u003ef47a75dcba39: Verifying Checksum\u003cbr\u003ef47a75dcba39: Download complete\u003cbr\u003e5bcf14160dfc: Verifying Checksum\u003cbr\u003e5bcf14160dfc: Download complete\u003cbr\u003e2654c654a6e7: Pull complete\u003cbr\u003e412e64056adf: Pull complete\u003cbr\u003ea3ed95caeb02: Pull complete\u003cbr\u003eb34d109380af: Pull complete\u003cbr\u003eef84039c747a: Pull complete\u003cbr\u003e0b64161d56c4: Pull complete\u003cbr\u003e532d14be51e6: Pull complete\u003cbr\u003e8210184098e2: Pull complete\u003cbr\u003ebd15a272ee53: Pull complete\u003cbr\u003ed25d7915b947: Pull complete\u003cbr\u003e4e198ced2ee0: Pull complete\u003cbr\u003e5bcf14160dfc: Pull complete\u003cbr\u003ef47a75dcba39: Pull complete\u003cbr\u003eDigest: sha256:c8afb8c2037f7b9c5c9ae198aff00b1cf80db11d3591fbe89dfb3c69192663f1\u003cbr\u003eStatus: Downloaded newer image for codeclimate/codeclimate:0.72.0\u003cbr\u003eWARNING: A new version (v0.78.1) is available. Upgrade instructions are available at: https://github.com/codeclimate/codeclimate#packages\u003cbr\u003e',
+      //   state:
+      //     'eyJvZmZzZXQiOjU2MTEsIm5fb3Blbl90YWdzIjowLCJmZ19jb2xvciI6bnVsbCwiYmdfY29sb3IiOm51bGwsInN0eWxlX21hc2siOjB9',
+      //   append: false,
+      //   truncated: false,
+      //   offset: 0,
+      //   size: 5611,
+      //   total: 56110,
+      // };
 
       if (!state.fetchingStatusFavicon) {
         dispatch('fetchFavicon');
@@ -172,14 +170,8 @@ export const fetchTrace = ({ dispatch, state }) => {
         dispatch('toggleScrollAnimation', false);
       }
     })
-    .catch(() => dispatch('receiveTraceError'))
-    .then(() => {
-      if (state.isScrollInBottom) {
-        dispatch('scrollBottom');
-      }
-    })
-    .then(() => {
-      dispatch('toggleScrollButtons');
+    .catch(() => {
+      dispatch('receiveTraceError')
     });
 };
 
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 454b9354d82..c737b744f40 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -20,7 +20,7 @@ export const headerTime = state => (state.job.started ? state.job.started : stat
 export const shouldRenderCalloutMessage = state =>
   !!(state.job.status && state.job.callout_message);
 
-export const jobHasTrace = state => state.job.trace !== '';
+export const jobHasTrace = state => state.job.trace !== '' && state.job.trace !== undefined;
 
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index 15a4dd62012..4b8d2548d70 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -8,6 +8,7 @@ export const createPlaceholder = () => {
 };
 
 export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
+  debugger;
   const top = Math.floor(el.offsetTop - scrollY);
 
   if (top <= stickyTop && !el.classList.contains('is-stuck')) {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 67254e237bc..25b41e42130 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -133,17 +133,17 @@
       }
 
       .btn-scroll.animate {
-        .first-triangle {
+        .gqfirst-triangle {
           animation: blinking-scroll-button 1s ease infinite;
           animation-delay: 0.3s;
         }
 
-        .second-triangle {
+        .gqsecond-triangle {
           animation: blinking-scroll-button 1s ease infinite;
           animation-delay: 0.2s;
         }
 
-        .third-triangle {
+        .gqthird-triangle {
           animation: blinking-scroll-button 1s ease infinite;
         }