Instance level Security Dashboard MVC (#6953) · Issues · GitLab.org / GitLab

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

User navigates to the security dashboard using the global nav.
User selects "Edit dashboard"
User is taken to a new page
User is prompted to add a project. (no empty state design here)
User searches for a project
User selects the desired projects
User selects "Add projects" (Saving button state appears in the "Return to dashboard" button.)
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

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

🖍 Design Specs Here

Permissions

The projects on the instance security dashboard will follow the operation dashboard's logic - each user will have their own list of projects
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

Documentation

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

### Quick links

*  [Implementation plan](#implementation-plan)

### Problem to solve

### Further details

### 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 |
| ------ | ------ |
| ![With-projects](/uploads/e04e40a91c8cf9800544b97d49033612/With-projects.png) | ![Empty](/uploads/ac2d286cf67e0be021f0043b517e9bf1/Empty.png) |

- 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 | 
| ------ | ------ | ------ | ------ |
| ![Empty](/uploads/4c82eea76aa78705e4e3bb31281bad62/Empty.png)  | ![Project-search](/uploads/81325925c0eb662b0f22a9cf8bfa538b/Project-search.png) | ![Projects-selected](/uploads/b09830a2a2894703e2a384c5ea89d48f/Projects-selected.png)  | ![Projects-added](/uploads/01453809a521b4cd8f636cae0467ad80/Projects-added.png) |

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. 
1. User selects "Edit dashboard"
1. User is taken to a new page 
1. User is prompted to add a project. (no empty state design here)
1. User searches for a project
1. User selects the desired projects
1. User selects "Add projects" (*Saving button state appears in the "Return to dashboard" button.*) 
1. User selects "Return to dashboard" after saving state of the button is complete.

| Saving state | 
| ------ | 
| ![Screen_Shot_2019-08-21_at_5.47.20_PM](/uploads/0898d3c55b85b9249ae629a27904a803/Screen_Shot_2019-08-21_at_5.47.20_PM.png) |

___

#### Removing a project

| Initial "Edit" screen with projects | Removal icon hover state | Removal confirmation | Saving state example | 
| ---- | ---- | ---- | ---- | 
| ![Projects-added](/uploads/5b3bcf0b3c084ee032ad13973b79d70d/Projects-added.png) | ![Removing-projects](/uploads/6836edbc12174fbd68caabcd40c38840/Removing-projects.png) | ![Removing-projects-confirm](/uploads/310725e1c8d220992d5cc2173763ba2d/Removing-projects-confirm.png) | ![saving](/uploads/3c71479c9d00ae90be5714d977569010/saving.png) |

Removing a project: Process

User wants to remove a project from their dashboard

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

:crayon: [*Design Specs Here*](https://gitlab-org.gitlab.io/gitlab-design/hosted/andy/ee%236953-Instance-level-dashboard-mvc-spec-previews/)

___

### 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
1. 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](https://gitlab.com/gitlab-org/gitlab/issues/6953#note_219029782)

---

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

Number of users that access the instance security dashboard.

_____

### Design Checklist

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

### Implementation plan

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

### Documentation
* [x] Update [this](https://docs.gitlab.com/ee/user/application_security/security_dashboard/) page:  !18008
  * [x] Add a section with the anchor `instance-security-dashboard`, to be linked to from the app

Edited Jan 16, 2020 by Avielle Wolfe