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
(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