Make environments picker dropdown not load all environments at once
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
Summary
The threat_monitoring/components/environment_picker works by its parent component/s calling fetchEnvironments, which retrieves ALL of the environments.
This can be a problem for projects with many environments because the environment picker will take a long time to load
Steps to reproduce
Usage #1: Policies List
- Navigate to a project with many environments
- Navigate to
Security & Compliance=>Policies - Look at network request for environments
- Look at environment filter loading for a long time
Usage #2: Policies Editor
- Navigate to a project with many environments
- Navigate to
Security & Compliance=>Policies - Click 'Create New Policy` button
- Look at network request for environments picker
- Look at environment selector loading for a long time
Usage #3: Statistics tab
- Navigate to a project with many environments
- Navigate to
Security & Compliance=>Threat Monitoring=>Statisticstab - Look at network request for environments picker
- Look at environment selector loading for a long time
Example Project
https://gitlab.com/gitlab-com/www-gitlab-com/-/security/policies
https://gitlab.com/gitlab-org/gitlab/-/security/policies
What is the current bug behavior?
The environment picker does take a long time to load ALL the environments
What is the expected correct behavior?
The environment picker does NOT take a long time to load the first 20 environments. The dropdown works with infinite scrolling, where when a user scrolls to the bottom of the first 20 environments, another 20 are retrieved
Design
Possible fixes
-
frontend update the environment picker/request to only request 20 policies at a time and implement infinite scrolling
Related to #340339 (closed).