WIP: Job's page in Vue to support realtime updates and UI improvements

What does this MR do?

This is the main MR of a series of MR to rewrite jobs show view in vue.js and improve UI. All smaller MR are going to be merged into this one first.

Architecture plan for this vue is: https://docs.google.com/document/d/13-gmGPbdkPZjHynwD44TPYj_6LJED9JW1ec6y_hVe0g/edit

We need to support real-time updates and we need to improve the UI at the same time. The plan is:

• Create a vue app following the documentation
• Divide the interface into components:
  1. Header Component
  2. CI Status Badge Component 1. [x] CI Icon Component - already exists, we can reuse it
  3. Description
  4. Author Component
  5. New issue Button
  6. Async Button - Retry job

1. Trace Log Component
2. Truncated information Component
3. Scroll Controls
4. Sidebar Component
5. Artifacts 1. [x] Buttons
6. Details 1. [x] Buttons
7. Commit
8. Tags 1. [x] Tag component
9. Stage 1. [x] Dropdown
10. Jobs List 1. [x] Arrow 1. [x] CI Icon Component 1. [x] Job Name 1. [x] Job action

• Include UI improvements
• Remove old code
• Write tests

This will also need changes in the API.

Screenshots

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #24339 (closed) Closes #30117 (closed) Closes #31397 (closed) Closes #30901 (closed) Closes #29948 (closed)

mentioned in merge request !10988 (merged)

mentioned in merge request !10718 (merged)

mentioned in issue #29948 (closed)

mentioned in issue #31718 (moved)

added 382 commits

• 31b87b8c...3441e60f - 382 commits from branch master

Compare with previous version

added 694 commits

• 3441e60f...2e92c5c4 - 694 commits from branch master

Compare with previous version

added 8 commits

• 4ca1a58a - Init vue app for builds
• ac75c954 - Moves loading icon into a separate component
• 78de92db - Add build bundle to webpack config file
• f0329ba9 - Fix broken path
• 863d8304 - Merge branch '24339-job-page' into 24339-job-page-step-1
• 4b431f91 - Merge branch '24339-job-page' into 24339-job-page-step-1
• d155f936 - Uses common loading icon
• 2e4fe6bb - Merge branch '24339-job-page-step-1' into '24339-job-page'

Compare with previous version

marked the checklist item CI Status Badge Component as completed

added 77 commits

• 2e4fe6bb...e012427c - 76 commits from branch master
• ce9cb6d1 - Merge branch 'master' into 24339-job-page

Compare with previous version

mentioned in merge request !11340 (merged)

added 5 commits

• 3970d97d - Adds header component for both job and pipeline show page
• 6e3960ab - Merge branch '24339-job-page' into 24339-job-page-header-step-2
• 418f5d3f - Adds reusable header component for job and pipeline
• 76dc5671 - Changes after review
• 7b0eee71 - Merge branch '24339-job-page-header-step-2' into '24339-job-page'

Compare with previous version

marked the checklist item Header Component as completed

added 129 commits

• 7b0eee71...709ce8a4 - 128 commits from branch master
• c49e2f85 - Merge branch 'master' into 24339-job-page

Compare with previous version

mentioned in merge request !11378 (merged)

added 8 commits

• 54b06ab4 - Creates sidebar component
• 1035ebff - Change mocked data
• 33b02387 - Rename to match new name
• bfa5c149 - Adds tags an related jobs
• 8af524d1 - Removes unused file
• 74333348 - [ci skip] Fix css classes
• 030a86a7 - Split up sidebar into smaller components
• 4d8f9869 - Merge branch '24339-job-page-sidebar-step-3' into '24339-job-page'

Compare with previous version

marked the checklist item Sidebar Component as completed

marked the checklist item Artifacts as completed

marked the checklist item Buttons as completed

marked the checklist item Buttons as completed

marked the checklist item Details as completed

marked the checklist item Commit as completed

marked the checklist item Tags as completed

marked the checklist item Tag component as completed

marked the checklist item Stage as completed

marked the checklist item Dropdown as completed

marked the checklist item Jobs List as completed

marked the checklist item Arrow as completed

marked the checklist item Description as completed

marked the checklist item New issue Button as completed

changed the description

marked the checklist item New issue Button as incomplete

added 326 commits

• 4d8f9869...60d5063d - 325 commits from branch master
• 4d9ad9f9 - Merge branch 'master' into 24339-job-page

Compare with previous version

added 326 commits

• 4d8f9869...60d5063d - 325 commits from branch master
• 4d9ad9f9 - Merge branch 'master' into 24339-job-page

Compare with previous version

added 326 commits

• 4d8f9869...60d5063d - 325 commits from branch master
• 4d9ad9f9 - Merge branch 'master' into 24339-job-page

Compare with previous version

added 326 commits

• 4d8f9869...60d5063d - 325 commits from branch master
• 4d9ad9f9 - Merge branch 'master' into 24339-job-page

Compare with previous version

@iamphill

After a meeting with @Kamil we discussed that we won't be able to have everything from backend for 9.3 so the plan is we make the header and the sidebar in vue and keep the trace in haml.

It is also important if we could merge smaller MRs into master for 2 reasons:

• some of the parts are needed for other issue
• if anything gets blocked we would be able to merge some of the things

So in conclusion the plan is:

• Make an MR with UI changes in the trace in HAML
• Make an MR with the header component
• Make an MR with the sidebar component

closed

mentioned in merge request !11848 (merged)