Skip to content

Job scrolls to bottom even when a line is highlighted

Miguel Rincon requested to merge 409350-change-autoscroll-when-job-updates into master

What does this MR do and why?

Job scrolls to bottom when a line is highlighted

This change auto scrolls to the bottom of a job even when a line has been selected.

Changelog: changed

Technical reason

In the original version of this implementation we used Vue's update() hook to trigger an automatic scroll to bottom.

This approach works if the only way we update the log component is by adding more log lines to it as it loads, but that may not always be the case.

In !136186 (merged), I plan to change how we hide/show lines in the log component and triggering a scroll on update() does not work anymore.

Screenshots or screen recordings

The log loads like before, by keeping the user at the bottom of the page:

2023-11-30_11.27.51

The difference comes when a line has been clicked on:

before after
2023-11-30_11.31.38 2023-11-30_11.29.57

How to set up and validate locally

  1. Visit a long running job, I used the following .gitlab-ci.yml pipeline:
stages:
  - build

slow-job:
  stage: build
  script:
    - while sleep 1; do date; done
  1. After starting the job, scroll to the bottom
  2. Ensure the job keeps showing you the bottom lines as it progresses. (auto scroll)
  3. Scroll to the middle or top of the job
  4. Ensure the scroll position does not change as the job progresses. (manual scroll)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #409350 (closed)

Edited by Miguel Rincon

Merge request reports