Update dependencies table UI
Quick link to Implementation plan.
Our current dependencies table is difficult to read and cluttered.
Pain points:
- At first glance, difficult to see any vulnerabilities; as they are secondary: 1) behind a tab, 2) behind a expand/collapse in
<tr>
- Status is confusing (and possibly not accurate?); redundant
Safe
; takes a lot of space and is unclear communication - No way to see latest version
- Cluttered/lots of info not organized well; poor readability
- Vulns do not link to information modal and/or object page (This will be addressed by #214094 (closed).)
Proposal
Implementation plan
-
frontend
-
Default sort order to Severity
order to make sure vulnerable components show up first !28654 (merged) -
Restructure table UI !28796 (merged) -
Combine component name and version columns -
Add warning label with # of vulns detected on vulnerable component rows gitlab-ui!1248 (merged) -
Add doc icon to location column -
Extract DependencyVulnerabilities component !28671 (merged) - [-]
Expand vulnerable component rows by defaultIt turns out that this can make the initial view very cluttered, so we're not changing this (yet).
-
-
Refactor Vuex store !29055 (merged) - The Vuex store is written in such a way as to accommodate two lists (
All
andVulnerable components
). Reverting back to one list means some complexity can probably be removed. This might instead be done in #212867 (closed)
- The Vuex store is written in such a way as to accommodate two lists (
-
Change pipeline subtext to Based on the latest successful scan • <time stamp>
!28665 (merged)
-
-
documentation !29593 (merged)
-
Update the Dependency List's screenshot and table column description
-
Edited by Mark Florian