Instead of rendering all report items in 4 big lists, we make use of
vue-virtual-scroll-list and render only few dozens at once. This
improves the performance in several metrics:
- Initial load time
- Memory Pressure
- CPU Load
- DOM node count
In an example with around 11k reported security vulnerabilities:
- Initial load time: 27s -> 4.1s
- Memory Pressure: ~750 MB -> ~270 MB
- CPU Load (time spent on executing JS/Rendering): 22s -> 2.5s
- DOM node count: 430k -> 7k up to 30k while scrolling
- Cleans up CSS to use common classes
- Removes getters to use mapState instead
- Makes the first request even when tab is not visible
- Show loading state in 204
Creates an app to render grouped test reports in the MR widget
Ports CSS from EE into CE
Creates a reusable code component
Adds getters and utils to the existing reports store
