GitLab Next

Problem

Today we show vulnerability counts, history and a list of vulnerabilities in the Group Dashboard. It would also be beneficial to know which projects we most affected / at risk so the user can go right to the project security dashboard and focus their efforts there.

Proposal

• Show a list of projects grouped by security status.
• Each status group will display a descending list of projects by highest severity vulnerability count

Security Status:

• A = 0 active vulnerabilities in a project known to have security tests set-up
• B = 1 Low active vulnerability
• C = 1 Medium active vulnerability
• D = 1 High or Unknown active vulnerabilities
• F = 1 Critical active vulnerability

User

As a Persona: Security Analyst I want to know which of my projects is at risk so I can focus on vulnerabilities from the project level dashboard and take action when necessary.

As a Security Directory, I want to know if I have high priority projects at risk so that I can assign resources as needed.

Experience

The main goal of this list (for the first implementation) is to create a read-only area and allow users to link into the project security dashboard when needing to dive deeper. Alternatively, the user can view the list and filter by a project to see the vulnerabilities if they choose to investigate at the group level.

Overview:

List in context	List expanded in context

We are going to go with a badge design for the letter grading since they are an existing component in our design system. We can explore another badge design at a later date if desired.

List design (list collapsed)	List design expanded (less than 10 projects)	List design expanded (more than 10 projects)

List detail:

Interaction:

Opening a list section	Hovering on the badge
	Additionally, users can hover on the badge to reveal information about how the list is aggregated

Users can open the list by:

• Click on the badge to expand the list
• Click on the [X] Projects label
• Click on the + icon
• Click on the entire list section area

Likewise, users can close this list by:

• Click on the badge to expand the list
• Click on the [X] Projects label
• Click on the + icon
• Click on the entire list section area (though this might not have a hover-state (will confirm with FE)

📖 Guideline: Only one list can be open at a time to ensure user focus.

Selecting a project
Users can select a project and they will be taken to the project security dashboard.

Scrolling

List with >10 projects	Scrolling detail
Lists that need to scroll to reveal more projects will always have their last entry peeking from the bottom of the list. This is to show the user that there are more items in the list to display.	When scrolling begins, the user will see the default scroll bar for their browser. Much like how we handle scrolling on vulnerability lists in the MR.

Information

List sub-header section detail	List item detail
The list subheader briefly explains to the user what the list is displaying in context.	The list item shows the project name and vulnerability count ONLY of the highest severity vulnerabilities in that list.

States

On page load	No findings for a list
We'll use skeleton loading while the page is loading	When no findings are available for a section, we will use the soft badge and secondary type styles for both the grade and [X] projects

📖 Guideline: Users cannot open lists with no entries

Badge details:

Each badge will have 2 main states and 2 hover states

• Default
  • Hover default
• Disabled
  • Disabled hover

Badge states

🖍 📐 Design Specs

Development log

Status

• UX design to render list
• backend MR to include Groups::Security::ProjectsController#index with top-by-vulnerabilities functionality !15317 (merged)
• frontend MR to render list

Decisions

• Group projects by security status in expandable lists
• Define security status by letter grades: https://gitlab.com/gitlab-org/gitlab-ee/issues/11190#note_204139822
• Projects can only have one status and appear in one list at a time.
• Lists longer than 10 items will scroll within their expanded area.
• Display top projects total_high_critical_or_unknown_vulnerability_count
• Limit list to either 10 projects or top 20% of total projects
• Do not limit to projects currently reporting vulnerabilities, include all projects in list Do not include projects that are not reporting any vulnerabilities