Refactor Jobs table on pipeline page to Vue/GraphQL
Problem to solve
In order to use vue tabs for the pipeline page we need to move the jobs table on this page to be rendered using Vue / GraphQL instead of the current HAML implementation.
Proposal
Update to match the layout of the Jobs Page on the Jobs Tab of the pipeline page.
There's some similar work been done on moving the jobs table on the jobs page which should help us with this effort, though it won't be as simple as a plug-and-play approach.
The data for the two tables is re-usable so we shouldn't need any backend work, but the designs are a little different.
jobs page | pipeline page |
---|---|
![]() |
![]() |
This first thing we should do is work out if we want to be consistent with the current design, re-use the design from the jobs page, or do something different entirely. Note: there's some ongoing design work that may affect this too #340029 (closed) - Update 2021-11-24 - We will use the design from the jobs page to move this forward.
This issue crosses the boundaries of both grouppipeline authoring and grouppipeline execution and would be a good opportunity for collaboration across the groups.
Implementation
We should inject the jobs table here in the code.
We will need to edit and create a new app in app/assets/javascripts/pipelines/pipeline_details_bundle.js
. Probably update some Rspec tests as well.
Then we will need to dynamically hide the pipeline cell from the table just for this use case. Probably pass some data through the app and check in the table component.
User experience goal
The user should be able to see their jobs on the pipeline page as before, with the added performance gains this migration will unlock.
Documentation
Depending on the UX approach we take, this may not need additional documentation. If we change the designs though, we should update the documentation accordingly.
Availability & Testing
We should add appropriate Jest testing as standard, but should also work with our SETs to make sure the integration and E2E tests are robust enough to ensure feature parity. See the work in #340069 (closed) for an example.
See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning
Implementation Plan
Work Type | Description | Issue link |
---|---|---|
frontend | Refactor Failed jobs table on pipeline page to Vue/GraphQL | #341498 |
frontend | Refactor Jobs table on pipeline page to Vue/GraphQL |
|
frontend | Refactor jobs view to Vue/GraphQL | &5604 |