Improve performance of rendering large reports

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

2 files changed, 3 insertions, 3 deletions

diff --git a/spec/javascripts/reports/components/grouped_test_reports_app_spec.js b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js
index f58515daa4f..69767d9cf1c 100644
--- a/spec/javascripts/reports/components/grouped_test_reports_app_spec.js
+++ b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js
@@ -151,11 +151,11 @@ describe('Grouped Test Reports App', () => {
 
     it('renders resolved failures', done => {
       setTimeout(() => {
-        expect(vm.$el.querySelector('.js-mr-code-resolved-issues').textContent).toContain(
+        expect(vm.$el.querySelector('.report-block-container').textContent).toContain(
           resolvedFailures.suites[0].resolved_failures[0].name,
         );
 
-        expect(vm.$el.querySelector('.js-mr-code-resolved-issues').textContent).toContain(
+        expect(vm.$el.querySelector('.report-block-container').textContent).toContain(
           resolvedFailures.suites[0].resolved_failures[1].name,
         );
         done();
diff --git a/spec/javascripts/reports/components/report_section_spec.js b/spec/javascripts/reports/components/report_section_spec.js
index eb7307605d7..b02af8baaec 100644
--- a/spec/javascripts/reports/components/report_section_spec.js
+++ b/spec/javascripts/reports/components/report_section_spec.js
@@ -120,7 +120,7 @@ describe('Report section', () => {
         'Code quality improved on 1 point and degraded on 1 point',
       );
 
-      expect(vm.$el.querySelectorAll('.js-mr-code-resolved-issues li').length).toEqual(
+      expect(vm.$el.querySelectorAll('.report-block-container li').length).toEqual(
         resolvedIssues.length,
       );
     });