Fix job log auto-scroll to bottom on initial page load

What does this MR do and why?

On the CI/CD job details page, the job log used to scroll to the bottom on initial page load so the newest output was visible right away. This stopped working after the job details page was migrated to the design-system DetailLayout component.

The fetchJobLog action decided whether to auto-scroll by calling isScrolledToBottom() just before the log rendered. This relied on the scroll container being empty and non-overflowing at that moment, so the check returned true and the page scrolled to the bottom after render. Under DetailLayout, the log now shares the same scroll container (.js-static-panel-inner) as the new page header and description, so the container already overflows slightly before the log arrives. The check therefore returns false on first load and the auto-scroll is skipped, leaving the log pinned at the top.

This MR detects the initial log fetch using state.jobLogState === null (this value is only set after the first successful fetch, so null marks the first request). On that first fetch, it forces the log to scroll to the bottom, unless the URL contains a hash fragment (for example #L10), which means the user deep-linked to a specific line. In that case the existing line-scrolling logic in log.vue handles the scroll and we leave it alone. Subsequent polls keep the existing behavior of following the bottom only when the user was already there.

Screenshots

Before After
On page load
before after
With line anchor
before after

How to set up and validate locally

  1. Open any CI job with a long log (enough lines to overflow the viewport). A running or finished job both work, e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/389
  2. On page load, confirm the log is scrolled to the bottom (newest lines visible), not stuck at the top.
  3. Open the same job with a line anchor in the URL, for example append #L10. Confirm the page scrolls to that line near the top and does NOT jump to the bottom, e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/389#L1500

MR acceptance checklist

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

Edited by Sascha Eggenberger

Merge request reports

Loading
Loading