Show DAG relationships in the pipeline graph
<!-- The first four sections: "Problem to solve", "Intended users", "User experience goal", and "Proposal", are strongly recommended, while the rest of the sections can be filled out during the problem validation or breakdown phase. However, keep in mind that providing complete and relevant information early helps our product team validate the problem and start working on a solution. -->
### Release notes
Our CI/CD pipeline view provides a visual representation of your pipeline jobs order by different stages, this visualization helps you understand the order of your jobs execution, tracks jobs progress, and understands the job dependencies. With the introduction of the directed acyclic graph which allows you to build a relationship between jobs (using the `needs:` keyword) in order for them to run in the quickest possible manner, regardless how stages may be set up, however this creates an ambiguity knowing the order of the job execution when looking at the pipeline view. In this release we've added the ability to visualize the view by job dependencies which group jobs in the pipeline view based on which jobs are configured to run first, (if you use the needs: keyword). This way it would be easier for you to track and understand jobs progress and dependatncies when using the needs: keyword
### Problem to solve
GitLab CI/CD users want to track the progress of their jobs and understand dependencies easily when using the pipeline view. This could be achieved by bringing in some capabilities from the Needs view into the pipeline graph.
### Intended users
* [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer)
* [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer)
* [Simone (Software Engineer in Test)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#simone-software-engineer-in-test)
* [Allison (Application Ops)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#allison-application-ops)
### User experience goal
Improve DAG experience based on feedback gathered from the beta in the issue https://gitlab.com/gitlab-org/gitlab/-/issues/220368. and [research issue](https://gitlab.com/groups/gitlab-org/-/epics/2224)
## Proposal
### MVC proposal
- [Stage view in the pipeline graph](https://gitlab.com/gitlab-org/gitlab/-/issues/298973)
- [Add drop-down between stage view and job dependencies view](https://gitlab.com/gitlab-org/gitlab/-/issues/298956)
- [Job dependencies view in the pipeline graph](https://gitlab.com/gitlab-org/gitlab/-/issues/298930) (MVC version without the dependency links)
- [When the new pipeline graph view rolls out, show a banner to notify users and gather feedback on the feature](https://gitlab.com/gitlab-org/gitlab/-/issues/322014)
#### General behavior
- The default view for the graph will be the "Stage" view.
- You can switch to order jobs by "Job Depednencies".
- In that view you can toggle the job links on and off and see full job trail of dependencies on hover. Using a keyboard shortcut you can "freeze" the job trail to inspect it closer. (2nd iteration)
- Once you switch to a specific view, it should persist per user even after you close the page in the browser.
- In the absence of `:needs` the option to order jobs by "Job Depednencies" and the toggle component would not be available.
| Group by stage | Group by job dependencies | See dependency links | Highlight job trail |
| ------ | ------ | ------ | ------ |
|  |  |  | |
### Further details
- [Internal solution validation issue](https://gitlab.com/gitlab-org/gitlab/-/issues/323150/)
- [Slack thread with a discussion around this feature, the designs, and implementation context.](https://gitlab.slack.com/archives/C019R5JD44E/p1613651516176700)
- [Slack thread about the hover highlight.](https://gitlab.slack.com/archives/C01CUV6QMPW/p1613660140003000)
- [Initial designs explorations and related discussions by Veethika can be found in the original design issue.](https://gitlab.com/gitlab-org/gitlab/-/issues/232946)
<!-- Include use cases, benefits, goals, or any other details that will help us understand the problem better. -->
### Permissions and Security
<!-- What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)?
Consider adding checkboxes and expectations of users with certain levels of membership https://docs.gitlab.com/ee/user/permissions.html
* [ ] Add expected impact to members with no access (0)
* [ ] Add expected impact to Guest (10) members
* [ ] Add expected impact to Reporter (20) members
* [ ] Add expected impact to Developer (30) members
* [ ] Add expected impact to Maintainer (40) members
* [ ] Add expected impact to Owner (50) members -->
### Links / references
### Insights
- [Show the status of the jobs along with the dependencies](https://dovetailapp.com/projects/0ccbf843-2047-4378-be31-d4b4ad0932d7/insights/present/2657cf19-c076-4b0d-9392-3b0dcd8059a3)
- [Also show job that are not dependent on other jobs in the DAG visualization](https://dovetailapp.com/projects/0ccbf843-2047-4378-be31-d4b4ad0932d7/insights/present/3db5005a-8b5a-44d4-b0be-4cce51e84005)
- [Bring DAG capabilities into the existing pipeline visualization](https://dovetailapp.com/projects/0ccbf843-2047-4378-be31-d4b4ad0932d7/insights/f26aa74f-835d-4af3-96b8-7e2764743591)
epic