Test report job page slow and unresponsive

Summary

When attempting to view a test report job with thousands of suite entries, the page responds like so:

• Browser CPU and memory usage are high
• Page is super slow
• Scrolling might be jumpy and the page appears to be unresponsive

For example, if a test report job has 1000 suites, GitLab will load 1000 suites on the page. There is no pagination at all. Test report jobs with tens of thousands of suites just struggle to load at all.

The problem is more severe if the user has a less powerful workstation.

The problem was observed on Chrome, IE and Firefox, but it likely affects all browsers.

Steps to reproduce

1. View the test report jobs in any pipeline with thousands or tens of thousands of suite entries https://gitlab.com/gitlab-org/gitlab/-/pipelines/213414266/test_report

2. For larger jobs, the browser will eventually give up:

   

Example Project

What is the current bug behavior?

Viewing test results jobs with thousands of suite entries is slow and causes the browser to become unresponsive.

What is the expected correct behavior?

Viewing test results jobs with thousands of suite entries should be fast and not cause the browser to become unresponsive.

Relevant logs and/or screenshots

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check

(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)
(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)
(we will only investigate if the tests are passing)

Possible fixes

Maybe some form of pagination is required on the page?

Workarounds

1. Split up the unit test artifacts into smaller suites in the pipeline. i.e. If you have one big unit test job that creates one big Junit report, instead break that out into ~2-3 smaller jobs with 2-3 smaller junit reports. This would allow you to view these test report jobs in the GitLab UI.

2. Expose the report via the artifacts:expose_as keyword in the respective job in your .gitlab-ci.yml file, and then you would be able to view the raw XML generated in the merge request, as shown in this blog post here. If you were using Ruby for example, you can modify the Ruby example to the below:

   ## Use https://github.com/sj26/rspec_junit_formatter to generate a JUnit report format XML file with rspec
   ruby:
     stage: test
     script:
       - bundle install
       - bundle exec rspec --format progress --format RspecJunitFormatter --out rspec.xml
     artifacts:
       when: always
       paths:
         - rspec.xml
       expose_as: 'rspec.xml'
       reports:
         junit: rspec.xml