Move job page into vue and vuex

Move job page into vue and vuex

This issue was going to be the ~backstage frontend part needed to get https://gitlab.com/gitlab-org/gitlab-ce/issues/25990 done, but that is no longer an MVC requirement. Instead this is a ~backstage refactoring work for the jobs page for other potential improvements in the future.

Frontend

Job_components (Green is already vue, red needs to be ported into vue)

Vue

New components

Area Component Description Props MR
show.html.haml Stuck Job Plan Renders warning about job being stuck with our without tags {runnersOnline: Boolean, tags: Array, runnersPath: String} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21114
show.html.haml Shared runner limit Renders the quota used and the limit quota {quotaUsed: StringNumber, quotaLimit: StringNumber, runnersPath: String} https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/6858
show.html.haml Environments block information {outdatedDeployment: Boolean, buildStatus: String, lastDeploymentPresent: Boolean, isLastDeployment: Boolean, isComplete: Boolean, isSuccess: Boolean,} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21279
show.html.haml Erased build block {erasedByUser:Boolean, username: String, userPath: String, erased_at: String} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21158
show.html.haml Top job log controllers bar {isErasable: Boolean, eraseProjectPath: String, hasTrace: Boolean, rawProjectPath: String} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21164
show.html.haml Job Log {log: String // will be HTML, isRunning: Boolean} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21167
_empty_state.html.haml Empty State { illustrationPath: String, illustrationSize: Number, title: String, content: String, actionPath: String} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21195
_sidebar.html.haml Artifacts Block {hasArtifacts: Boolean, areExpired: Boolean, expireAt, keepArtifactsPath: Boolean, downloadArtifactsPath: Boolean, browseArtifactsPath: Boolean, has_expiring_artifacts: Boolean} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21198
_sidebar.html.haml Trigger Block {triggerShortToken: String, variables: [{key: value}]} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21244
_sidebar.html.haml Commit Block {commitShaLink: String, shortSha: String, mergeRequestId: Number, mergeRequestPath: String, commitTitle: String} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21249
_sidebar.html.haml Stages Block {pipelineStatus: String, pipelineID: Number, pipelinePath: String, pipelineRef: String, refPath: String, legacyStages: Array} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21255
_sidebar.html.haml Builds Dropdown {builds: [{tooltip_message.dup: String, buildClass, Stage, linkToJobPath, build.status, build.name, build.id, build.retried? }]} https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21255

Existing code

  • Use one app only, instead of 2
  • Move mediator to Vuex
  • Remove loading state from existing components, they must be dumb
  • Job log topbar must be fixed to the top

Vuex

Actions:

  • Load job log
    • polling
    • will be adding into the existing content
    • must update truncate size
    • while receiving log
  • Update setCiStatusFavicon
  • Load page info - pooling, will be replacing the existing content
  • User retries job log - content must show new job details with new job id
  • User cancels job log
  • User opens terminal
  • User drags terminal and changes content height
  • User toggles sidebar - only possible in big screens
  • User clicks on stage dropdown and must populate the dropdown
  • On window resize:
    • Sidebar must be resized
  • On window scroll
    • depending on scroll position+log completed, toggle the scroll animation

Job log scroll behavior

  • While running, must be scrolled to the bottom when we get more log
  • While running, if user scrolls to the middle, stop scrolling to the bottom - double check this
  • When page loads, scroll to the bottom

Backend

API Needs cc @ayufan @SteveAzz

Based on all variables used on haml

Variable in haml JSON key Status
stuck: Boolean status.pending && !runners.online !21618 (merged)
any_runners_online: Boolean runners.online !21618 (merged)
no_runners_for_project: Boolean runners.available !21618 (merged)
tags: Array, tags present
shared_runners_minutes_used: Boolean Compare runner.quota.used & runner.quota.limit in FE gitlab-org/gitlab-ee!7233
shared_runners_limit_namespace.shared_runners_minutes: Number runner.quota.used gitlab-org/gitlab-ee!7233
shared_runners_limit_namespace.actual_shared_runners_minutes_limit: Number runner.quota.limit gitlab-org/gitlab-ee!7233
starts_environment: Boolean deployment_status omittable !21307 (merged)
outdated_deployment: Boolean deployment_status.icon !21307 (merged)
status: String deployment_status.icon !21307 (merged)
success?: Boolean deployment_status.status !21307 (merged)
last_deployment.present?: Boolean deployment_status.status !21307 (merged)
build.last_deployment.last?: Boolean deployment_status.status !21307 (merged)
complete?: Boolean deployment_status.status !21307 (merged)
environment.try(:last_deployment): Boolean deployment_status.enviorment !21307 (merged)
erased?: Boolean erased_at when not null present
erased_by_user?: Boolean erased_by present
erased_by_name: String, erased_by.name present
user_path(@build.erased_by): String, erased_by. web_url present
erased_at: String, erased_at present
running?: Boolean status.label present
erasable? erase_path will be present present
illustration: String (empty_state) status.illuestration.image !21532 (merged)
illustration_size: Number (empty_state) status.illuestration.size !21532 (merged)
title: String (empty_state) status.illuestration.title !21532 (merged)
content: String (empty_state) status.illuestration.content !21532 (merged)
action: String, (empty_state) status.action.path present
retryable?: Boolean retry_path present
artifacts?: Boolean artifact key is present and not null !21328 (merged)
artifacts_expired?: Boolean, artifact.expires_at key is presnet (compare time) !21328 (merged)
artifacts_expire_at: Number, `artifact.expires_at !21328 (merged)
has_expiring_artifacts?: Boolean artifact.expires_at key is presnet !21328 (merged)
trigger_request trigger should be present !21495 (merged)
trigger_request&.trigger&.short_token trigger.token !21495 (merged)
trigger_variables trigger.variables as an array !21495 (merged)
pipeline.short_sha commit.short_id present
build.merge_request.to_reference merge_request.iid present
build.pipeline.git_commit_title pipeline.commit.title present
pipeline.stages_count pipeline.stages.length > 0 present
pipeline.status: pipeline.details.status present
pipeline.id pipeline.details.id present
pipeline.ref pipeline.ref present
pipeline.legacy_stages: Array, pipeline.last_status present
HasStatus::ORDERED_STATUSES latest_statuses in pipelines/:id/stage(.:format) present
tooltip_message.dup latest_statuses[].status.tooltip present
stage You have in the request query string present
status latest_statuses[].status present
name latest_statuses[].name present
id latest_statuses[].id present
retried? retried !21558 (merged)
deployment_link(environment.last_deployment, text: 'latest deployment') deployment_status.environment.last_deployment.path !21307 (merged)
environment_link_for_build(build.project, @build) deployment_status.environment.path !21307 (merged)
project_runners_path(build.project, anchor: 'js-runners-settings') runner.edit_path present
raw_project_job_path(project, build) raw_path present
terminal_project_job_path(project, build) terminal_path !21537 (merged)
keep_project_job_artifacts_path(project, build) artifact.keep_path !21328 (merged)
download_project_job_artifacts_path(project, build) artifact.download_path !21328 (merged)
browse_project_job_artifacts_path(project, build) artifact.browse_path !21328 (merged)
link_to(build.pipeline.short_sha, project_commit_path(project, build.pipeline.sha)) Where is this used?
merge_request_path(build.merge_request) merge_request.path present
link_to("#{build.pipeline.ref}", project_ref_path(project, build.pipeline.ref)) Where is this used?
link_to("##{build.pipeline.id}", project_pipeline_path(project, build.pipeline) Where is this used?
Edited by Steve Xuereb - Out of Office back 2026-01-05