Instance level Security Dashboard MVC

Quick links

• Implementation plan

Problem to solve

Security teams should be first class users in GitLab. Their main view should be a Security Dashboard to monitor and take actions for security issues affecting all the projects they are responsible for.

Further details

As a Security professional, I want to log into GitLab and see the security status of my projects. From there, I want to be able to figure out what is more important (based on its impact value) and take actions.

Proposal

Create an instance-wide security dashboard where security teams can access all the relevant information, grouped by vulnerability and ordered by impact.

Users should be able to figure out what is most important, and to take actions (open issues, dismiss, notify users, etc).

NOTE: The most affected projects feature will be implemented after this issue in https://gitlab.com/gitlab-org/gitlab-ee/issues/17969

Design

Overview

Dashboard w/projects added	Dashboard - empty state

• Clicking "Edit dashboard" takes the user to the dashboard management page where they can add/remove projects as they desire.

• Empty state text: "The security dashboard displays the latest security findings for projects you wish to monitor. Select "Edit dashboard" to add and remove projects. More information.

• More info links to the instance security dashboard documentation.

---

Adding a project

No projects	Project search	Project selection	Project added

Adding a project: Process

User wants to add a few projects to their dashboard

1. User navigates to the security dashboard using the global nav.
2. User selects "Edit dashboard"
3. User is taken to a new page
4. User is prompted to add a project. (no empty state design here)
5. User searches for a project
6. User selects the desired projects
7. User selects "Add projects" (Saving button state appears in the "Return to dashboard" button.)
8. User selects "Return to dashboard" after saving state of the button is complete.

Saving state

---

Removing a project

Initial "Edit" screen with projects	Removal icon hover state	Removal confirmation	Saving state example

Removing a project: Process

User wants to remove a project from their dashboard

1. User navigates to the security dashboard using the global nav.
2. User selects "Edit dashboard"
3. User is taken to a new page
4. User selects the "Remove" icon on the target project
5. User confirms the removal of the target project (Saving button state appears in the "Return to dashboard" button.)
6. User selects "Return to dashboard" after saving state of the button is complete.

🖍 Design Specs Here

---

Permissions

1. The projects on the instance security dashboard will follow the operation dashboard's logic - each user will have their own list of projects
2. Anyone who has an account on the instance has access to the dashboard, and can add any project for which they have access to read the project level security dashboard

Decision

---

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

Number of users that access the instance security dashboard.

---

Design Checklist

• Evaluate direction from initial MVC. Propose changes if necessary.
• Gather feedback on updated designs
• Adjust wireframes if necessary
• Create final deliverables
  • Account for edge cases and empty-status
  • Post designs and descripton updates
  • Link to design previews.

Implementation plan

• backend
  • Implement permissions scheme #33831 (closed) !17908 (merged)
  • Implement add projects feature #33896 (closed)
  • Add ApplicationInstance model, new vulnerabilities routes and controllers, and reuse vulnerabilities logic from group and project security dashboards #33899 (closed)
• frontend
  • Basic page entry point !15739 (merged), gitlab-foss!32548 (merged)
  • Hoist projects module out of the Security Dashboard store !17250 (merged)
  • [-] Security controller tests !17908 (merged)
  • Create app component wrapping Security Dashboard with placeholder for Project Selector !16496 (merged)
  • Project selector/new Vuex module !17918 (merged)
  • Add "Security" to dashboards dropdown !17389 (merged)
  • JS entry point + HAML dataset pass-through !18018 (closed)
    • requires endpoints
    • JS entry point needs to be moved to align with the new controller/action location in !17908 (merged)
  • Bring all of the above together/polish !18412 (merged)
  • Enable security_dashboard feature flag by default !18008 (merged)

Documentation

• Update this page: !18008 (merged)
  • Add a section with the anchor instance-security-dashboard, to be linked to from the app