Skip to content

Show most affected projects in Group Security Dashboard

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
List-collapsed List-expanded

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-collapsed List-expanded-9-items frist-run

List detail:

Interaction:
Opening a list section Hovering on the badge
List-section 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
List-item
Users can select a project and they will be taken to the project security dashboard.
Scrolling
List with >10 projects Scrolling detail
frist-run scrolling
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
Screen_Shot_2019-08-19_at_5.27.59_PM Screen_Shot_2019-08-19_at_5.28.08_PM
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
On-page-load No-findings
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
Badge-details

🖍 📐 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

Edited by Avielle Wolfe