Group-level Security Dashboard

Problem to solve

We have Security Dashboard MVC (https://gitlab.com/gitlab-org/gitlab-ee/issues/6709) for a single project, but Security teams normally want to have a wider view of Security for multiple projects at the same time, for example all the projects in a specific group.

Proposal

Implement the Security Dashboard as a group level feature. It is accessible at Overview > Security Dashboard.

The Dashboard is organized into three sections:

1. a summary with a set of colored boxes, one for each severity level (Critical, High, Medium, Low, Unknown)
2. each box has a different color
3. each box contains the total number of vulnerabilities across all the projects in the group for the given severity
4. these counters are not updated when results are filtered
5. in this iteration, numbers are not clickable
6. a filter bar
7. users can filter by different properties (Severity, Project, Confidence)
8. a list of vulnerabilities
9. the list is organized into tabs (All, SAST, Dependency Scanning, Container Scanning, DAST) 1. TBD what about tabs where no data is available (missing feature/report) 1. clicking a tab "filters" by that source type only 1. tabs titles have numbers showing total
10. for each row, information for the given vulnerability is shown 1. first line: vulnerability name (clickable, brings to details window) 1. second line: project name (TBD clickable, brings to the project-level security dashboard)
11. action items are present 1. create an issue 1. dismiss vulnerability
12. items are sorted by severity, TBD secondary value
13. lists are paginated

The details window is the same used for security reports, but it contains also an additional entry with the link to the project.

Dashboard MVC Design

Dashboard
global changes: vulnerability count headers now sentence case. Labels added above dropdowns. List horizontal lines extended to full-width of list.
Empty state
change: left aligning paragraph text, change to button text
Loading state:
We will use skeleton loading ☠
Hover state
Undo state
More information Modal
Issue created state:
how do we indicate to the user that they have created an issue on this vulnerability? the issue flag should stay with the vulnerabiltiy until it has been dismissed.
Issue created hover state:
The issue icon now replaces the create new issue icon. The hover state on this new button is the newly created issue name, and the button takes the user to the issue
Popover state for analyzers
We need a way to inform users that we are currently just showing SAST and that the other tools will be available soon. Clicking the question mark icon will reveal the popover, at this time the question mark icon is replaced by the close icon for the user to dismiss the popover.
In-line hover states for icon_buttons

What does success look like, and how can we measure that?

People use the Security Dashboard to manage security of their projects. Measure the number of page views for the Group Security Dashboard.