Job scrolls to bottom even when a line is highlighted
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:
![]() |
The difference comes when a line has been clicked on:
before | after |
---|---|
![]() |
![]() |
How to set up and validate locally
- 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
- After starting the job, scroll to the bottom
- Ensure the job keeps showing you the bottom lines as it progresses. (auto scroll)
- Scroll to the middle or top of the job
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #409350 (closed)