Update Security Dashboard layout for improved usability
Problem
Following up on gitlab-design#460 (closed). This is an MVC proposal for implementation.
| Problem A | Problem B | Problem C |
|---|---|---|
 |
 |
 |
| Table view vulnerabilities are pushed down the page below the summary and large chart. The user needs to scroll up and down to adjust filters then view the table data. Example from a 1440x900px display (common laptop) | When the user adjusts the severity filters, for example to "high" only, the summary view still displays “0” for the non-selected criticality levels (chart displays only the filtered object). This occupies space and displays non-relevant data. | It’s unclear what time frame the table vulnerabilities are displaying (here is what it shows: recent security scan on default branch). Need layout to accommodate additional data points, upcoming: https://gitlab.com/gitlab-org/gitlab-ee/issues/11190 and https://gitlab.com/gitlab-org/gitlab-ee/issues/7521 |
Solution Proposal
| Layout MVC | Visual | New Data |
|---|---|---|
 |
 |
 |
| 1. Header: filters, 2. Main: table data, 3. Aside: summary severity count and chart | Display with FE layout change | Additional space in asside for new data (https://gitlab.com/gitlab-org/gitlab-ee/issues/11190 and https://gitlab.com/gitlab-org/gitlab-ee/issues/7521) |
Post-implementation: conduct user-testing for feedback ux-research#240 (closed)
Edited by Kyle Mann