GitLab Next

Problem to solve

We want to provide a Security Dashboard to support Security people that are using GitLab.

The first iteration should be a new view at project level (e.g., Project > Security Dashboard), that will show the security status for the app.

The reports should be actionable in order to dismiss/create issues, like we already have in MR widget and at pipeline level.

Proposal

Create a new top-level entity in the project menu sidebar to access the Security Dashboard.

The dashboard will list security vulnerabilities from the latest pipeline run on the default branch (e.g., master).

Data can be fetched and displayed on the frontend like we already do for the MR/pipeline views. In the same way, items will allow to be expanded to see additional details, dismiss or create an issue.

Design

• Default:

• It only has a pipeline.
• The security reports are always expanded.
• The security reports are not collapsible.
• It has a question mark icon after the name of security test as it is in MR widget.

• Outdated:

• It has a flash message "New pipeline is running, and the security reports will be updated soon" when a new pipeline is running.
• It has a label "Reports are outdated" at the end of the header.

• Empty state:

• Headline: Monitor vulnerabilities of your app and fix'em all!
• Description: The security dashboard displays the latest security report. Use it to find and fix vulnerabilities.
• Button: Learn more (https://docs.gitlab.com/ee/user/project/security_dashboard/)
• SVG: `security-dashboard_empty" in gitlab-svgs

Default	Outdated	Empty state

Old Designs

• It has 7 projects on the list at most per page.
• You can add the projects to the list by clicking "Add project" button.
  • If you click the projects in the dropdown menu, the projects will be added to the list immediately.
• You can remove the projects by clicking "Remove" button.
• The projects order alphabetically as default.

Copy for the vulnerability detection:

• If there are no security vulnerabilities, it shows "[Category name] detected no security vulnerabilities".
  • e.g. Dependency scanning detected no security vulnerabilities
• If it detects the security vulnerabilities, it shows "[Category name] detected 146 vulnerabilities".
  • e.g. Dependency scanning detected 146 vulnerabilities

Note: We don't show the DAST and Container scanning until #6168 and #6169 are implemented.

Empty state

Copy:

• Header: "There are no projects in the list"
• Description: "Security dashboard help you overview project security without effort"
• SVG: `security-dashboard_empty" in gitlab-svgs

Security dashboard	Dropdown menu	Empty state

• It has 7 projects on the list at most per page.
• You can add the projects to the list by clicking "Add project" button.

• If you click the projects in the dropdown menu, the projects will be added to the list immediately.

• You can remove the projects by clicking "Remove" button.
• The projects order alphabetically as default.

Copy for the vulnerability detection:

• If there are no security vulnerabilities, it shows "[Category name] detected no security vulnerabilities".

• e.g. Dependency scanning detected no security vulnerabilities

• If it detects the security vulnerabilities, it shows "[Category name] detected 146 vulnerabilities".

• e.g. Dependency scanning detected 146 vulnerabilities

Note: We don't show the DAST and Container scanning until https://gitlab.com/gitlab-org/gitlab-ee/issues/6168 and https://gitlab.com/gitlab-org/gitlab-ee/issues/6169 are implemented.

Empty state

Copy:

• Header: "There are no projects in the list"
• Description: "Security dashboard help you overview project security without effort"
• SVG: `security-dashboard_empty" in gitlab-svgs

Security dashboard	Dropdown menu	Empty state