[ci skip] Renders job log size

8 files changed, 70 insertions, 19 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 571ca9b58d1..819e880ff88 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -107,7 +107,6 @@
         'toggleScrollAnimation',
       ]),
       onScroll() {
-        debugger;
         if (!isScrolledToBottom()) {
           this.toggleScrollAnimation(false);
         } else if (isScrolledToBottom() && !this.isLogComplete) {
@@ -116,12 +115,19 @@
 
         _.throttle(this.toggleScrollButtons(), 100);
       },
+      // TODO: Handle page resize: Not on current codebase
+      onResize() {
+      }
     },
   };
 </script>
 <template>
   <div class="build-page">
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon
+      v-if="isLoading"
+      :size="3"
+      class="prepend-top-20"
+      />
 
     <template v-else>
       <!-- Header Section -->
@@ -185,6 +191,7 @@
         <log-block
           :trace="trace"
           :is-complete="isTraceComplete"
+          class="float-left"
         />
       </div>
       <!-- EO job log -->
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 3150ffbc4ce..81335fd1ef9 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -45,9 +45,7 @@
     },
     computed: {
       jobLogSize() {
-        return sprintf('Showing last %{startSpanTag} %{size} %{endSpanTag} of log -', {
-          startSpanTag: '<span class="s-truncated-info-size truncated-info-size">',
-          endSpanTag: '</span>',
+        return sprintf('Showing last %{size} of log -', {
           size: numberToHumanSize(this.size),
         });
       },
@@ -67,7 +65,7 @@
     <!-- truncate information -->
     <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
       <template v-if="isTraceSizeVisible">
-        <p v-html="jobLogSize"></p>
+        <div class="float-left" v-html="jobLogSize"></div>
 
         <a
           v-if="rawPath"
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index b2965579f14..6e598d602d6 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -7,6 +7,7 @@ import {
   isScrolledToBottom,
   isScrolledToTop,
   isScrolledToMiddle,
+  scrollDown,
 } from '../../lib/utils/scroll_utils';
 
 import { setCiStatusFavicon } from '../../lib/utils/common_utils';
@@ -47,7 +48,7 @@ export const fetchJob = ({ state, dispatch }) => {
     data: state.jobEndpoint,
     method: 'getJob',
     successCallback: ({ data }) => dispatch('receiveJobSuccess', data),
-    errorCallback: () => dispatch('receiveJobError'),
+    errorCallback: (error) => dispatch('receiveJobError', error),
   });
 
   if (!Visibility.hidden()) {
@@ -56,7 +57,7 @@ export const fetchJob = ({ state, dispatch }) => {
     axios
       .get(state.jobEndpoint)
       .then(({ data }) => dispatch('receiveJobSuccess', data))
-      .catch(() => dispatch('receiveJobError'));
+      .catch((error) => dispatch('receiveJobError', error));
   }
 
   Visibility.change(() => {
@@ -69,7 +70,9 @@ export const fetchJob = ({ state, dispatch }) => {
 };
 
 export const receiveJobSuccess = ({ commit }, data) => commit(types.RECEIVE_JOB_SUCCESS, data);
-export const receiveJobError = ({ commit }) => {
+export const receiveJobError = ({ commit }, error) => {
+  debugger;
+  console.log(error)
   commit(types.RECEIVE_JOB_ERROR);
   flash(__('An error occurred while fetching the job.'));
 };
@@ -79,19 +82,25 @@ export const receiveJobError = ({ commit }) => {
  */
 export const scrollTop = ({ commit, dispatch }) => {
   commit(types.SCROLL_TO_TOP);
-  window.scrollTo({ top: 0 });
+  scrollUp();
   dispatch('toggleScrollButtons');
 };
 
+/**
+ * Scrolls page to the bottom
+ * Commits SCROLL_TO_BOTTOM mutation to toggle the hasBeenScrolled flag
+ * Dispatches `toggleScrollButtons` to handle the disabled state of the scroll buttons
+ */
 export const scrollBottom = ({ commit, dispatch }) => {
   commit(types.SCROLL_TO_BOTTOM);
-  window.scrollTo({ top: document.height });
+  scrollDown();
   dispatch('toggleScrollButtons');
 };
 
+/**
+ * Responsible for toggling the disabled state of the scroll buttons
+ */
 export const toggleScrollButtons = ({ dispatch }) => {
-  console.log('yo!');
-
   if (canScroll()) {
     if (isScrolledToMiddle()) {
       dispatch('enableScrollTop');
@@ -113,6 +122,11 @@ export const disableScrollBottom = ({ commit }) => commit(types.DISABLE_SCROLL_B
 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);
 
@@ -127,11 +141,27 @@ 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,
+      };
+
       if (!state.fetchingStatusFavicon) {
         dispatch('fetchFavicon');
       }
 
       dispatch('receiveTraceSuccess', data);
+      commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM, isScrolledToBottom())
 
       if (!data.complete) {
         traceTimeout = setTimeout(() => {
@@ -144,7 +174,7 @@ export const fetchTrace = ({ dispatch, state }) => {
     })
     .catch(() => dispatch('receiveTraceError'))
     .then(() => {
-      if (isScrolledToBottom()) {
+      if (state.isScrollInBottom) {
         dispatch('scrollBottom');
       }
     })
diff --git a/app/assets/javascripts/jobs/store/mutation_types.js b/app/assets/javascripts/jobs/store/mutation_types.js
index d97b0d48ae2..86f6b0d1e9b 100644
--- a/app/assets/javascripts/jobs/store/mutation_types.js
+++ b/app/assets/javascripts/jobs/store/mutation_types.js
@@ -10,6 +10,7 @@ export const DISABLE_SCROLL_TOP = 'DISABLE_SCROLL_TOP';
 export const ENABLE_SCROLL_BOTTOM = 'ENABLE_SCROLL_BOTTOM';
 export const ENABLE_SCROLL_TOP = 'ENABLE_SCROLL_TOP'
 export const TOGGLE_SCROLL_ANIMATION = 'TOGGLE_SCROLL_ANIMATION';
+export const TOGGLE_IS_SCROLL_IN_BOTTOM = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
 
 export const REQUEST_JOB = 'REQUEST_JOB';
 export const RECEIVE_JOB_SUCCESS = 'RECEIVE_JOB_SUCCESS';
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index c97e690045d..e4dc0dd2ec4 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -69,10 +69,13 @@ export default {
     state.job = {};
   },
 
+  [types.TOGGLE_IS_SCROLL_IN_BOTTOM](state, toggle) {
+    state.isScrollInBottom = toggle;
+  },
+
   [types.SCROLL_TO_TOP](state) {
     state.hasBeenScrolled = true;
   },
-
   [types.SCROLL_TO_BOTTOM](state) {
     state.hasBeenScrolled = true;
   },
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index c70052f178a..39fc59b9d84 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -19,6 +19,7 @@ export default () => ({
   trace: '',
 
   isScrollingDown: false,
+  isScrollInBottom: false,
   hasBeenScrolled: false,
 
   isScrollTopDisabled: true,
diff --git a/app/assets/javascripts/lib/utils/scroll_utils.js b/app/assets/javascripts/lib/utils/scroll_utils.js
index dd565e05369..24708242fae 100644
--- a/app/assets/javascripts/lib/utils/scroll_utils.js
+++ b/app/assets/javascripts/lib/utils/scroll_utils.js
@@ -4,6 +4,7 @@ export const canScroll = () => $(document).height() > $(window).height();
 
 /**
  * Checks if the entire page is scrolled down all the way to the bottom
+ * @returns {Boolean}
  */
 export const isScrolledToBottom = () => {
   const $document = $(document);
@@ -21,16 +22,30 @@ export const scrollDown = () => {
   $document.scrollTop($document.height());
 };
 
+export const scrollUp = () => {
+  $(document).scrollTop(0);
+}
+
 export const toggleDisableButton = ($button, disable) => {
   if (disable && $button.prop('disabled')) return;
   $button.prop('disabled', disable);
 };
 
+/**
+ * Checks if page is scrolled to the top
+ * @returns {Boolean}
+ */
 export const isScrolledToTop = () => $(document).scrollTop() === 0;
+
+/**
+ * Checks if scroll position is in the middle of the page
+ * @returns {Boolean}
+ */
 export const isScrolledToMiddle = () => {
   const $document = $(document);
   const currentPosition = $document.scrollTop();
   const scrollHeight = $document.height();
+  const windowHeight = $(window).height();
 
   return currentPosition > 0 && scrollHeight - currentPosition !== windowHeight;
 }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 14ba8b1df83..67254e237bc 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -104,10 +104,6 @@
     }
 
     .truncated-info {
-      .truncated-info-size {
-        margin: 0 5px;
-      }
-
       .raw-link {
         color: $gl-text-color;
         margin-left: 5px;