Tracking the status of a running pipeline involves significant context switching. One has to go to the pipeline page to view the pipeline run. Currently, the pipeline editor only show the overall pipeline status and provides the "View pipeline" link. In this release, we are adding to the pipeline editor the pipeline mini graph to make it easy for you to navigate to individual jobs and track their status from the pipeline editor.
🧩 Problem
Tracking the status of a running pipeline involves significant context switching. One has to go to the pipeline page to view the pipeline run.
Currently, we only show the overall pipeline status and provide the "View pipeline" link.
Add the mini pipeline graph to the pipeline editor to make it easy to navigate to individual jobs and track their status from the pipeline editor.
Add the mini pipeline graph (with the linked pipeline) to the pipeline editor pipeline status section.
The mini pipeline graph can take up the space between the status text and the "View pipeline" button, with 16px space on both sides. When there's no more space left, it should wrap as it does in the pipelines list view. When the graph wraps on the second line, it should be vertically centered inside the pipeline status section.
Remove the link from the pipeline ID in the pipeline status text (it's no longer needed with the clear "View pipeline" CTA and the mini pipeline graph).
@dhershkovitch Also just want to note we should add ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue as well so users have the ability to navigate to linked pipelines as well. Like we are doing in #36118 (closed)
We would need to use the pipeline_mini_graph component in app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue along with the linked_pipelines_mini_list.vue component.
We also would need to edit the app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql query or create a new one to provide the new components with stage data and triggered or trigger_by data.
We might run into a problem thought since app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue uses REST and looks to fetch the jobs for a stage based on a REST path. And it seems that the pipeline editor is strictly using GraphQL. We could get around this by passing the stages from HAML down to the component for the time being but that might introduce technical debt the team does not want.
The main concern is what @pburdette brought up when weighting this:
We might run into a problem thought since app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue uses REST and looks to fetch the jobs for a stage based on a REST path. And it seems that the pipeline editor is strictly using GraphQL. We could get around this by passing the stages from HAML down to the component for the time being but that might introduce technical debt the team does not want.
Given our reduced capacity, if we do run into this problem this issue will definitely slip. I'll keep an eye on it though
I was able to get most of the stage data needed for the mini pipeline graph by updating our graphql query for fetching the pipeline data. There are still some missing (like the dropdown_path) which I'm still figuring out where it comes from and how to fetch.
I'm also investigating still on how to get the data needed to show the upstream / downstream pipelines. It looks like we might be able to get them through graphql as well. I'll just post another update here if I run into any problems though.
Of course this is still a WIP. I'll fix the layout / css later on since I'm just focusing on figuring out how to fetch all the necessary data first. 😅
tl;dr my remaining todos:
get the dropdown_path for the mini pipeline graph; check dropdown works
fix layout / css
get triggered data and whatever else is needed to show upstream / downstream pipelines
It looks like we're already using a graphql query to fetch linked pipelines in get_linked_pipelines.query.graphql so I think we can repurpose that for the pipeline editor.
The only data we're missing is the dropdown_path. For now I'm just building it manually on the frontend, but ideally I think we should expose it so it can be fetched from graphql. This can be done as a follow-up but will need some help from backend🙏
The only data we're missing is the dropdown_path. For now I'm just building it manually on the frontend, but ideally I think we should expose it so it can be fetched from graphql
The MR for adding the mini pipeline graph (!71622 (merged)) is merged! I'm keeping the feature flag disabled for now until we have the linked pipelines added in.
The MR for adding the upstream/downstream pipelines is in draft in !72255 (merged). Just need to fix some tests and CSS. Will get back this when I'm back from PTO, but it most likely won't make it in this milestone 🙇
There were some UX debt issues that surfaced from these MRs, such as:
#343434 (closed): Align the upstream and downstream pipelines vertically in the mini pipeline graph
#342841 (closed): Resolve mini pipeline graph accessibility issues
I'm looking into them now. Should we wait for these UX debt issues to be resolved before I turn on the feature flag on dot com?
For now I'll add the workflowverification label since technically the only work left for this issue is to flip the feature flag. The rollout issue can be found here: #342217 (closed).
@dhershkovitch Okay thanks! I'm enabling it globally now. If there are no incidents over the next few days, I'll move on to cleaning up the feature flag next week.