Skip to content

Load refs for the "Run Pipeline" form on demand, limit to 100 results per ref type

Miguel Rincon requested to merge 321790-load-refs-on-demand into master

What does this MR do?

Improve performance of the "Run pipeline" page for projects with many branches or tags (refs).

Fix for: #322170 (closed) and #321790 (closed)

Background

In the original implementation of this page, we loaded all the tags and branches in the HTML payload.

Even though this was not ideal, this was cleverly done by adding the data to an inline javascript which loaded fast enough, although I has the potential to create a large amount of DOM elements in projects with a large amount of refs.

During the migration to Vue this problem was exacerbated as refs data was made reactive by Vue, and the number of DOM elements became higher, as the Vue dropdowns generate more DOM elements than the plain Javascript version.

Solution

Use the same JSON endpoint as the Repository page (e.g. in https://gitlab.com/gitlab-org/gitlab/-/tree/master) to load a limited number of refs and allow the user to filter by searching with a search box, as in the repository pages.

Screenshots (strongly suggested)

Using an example with 200 tags and 200 branches.

Before:

All refs are loaded to the page:

2021-03-02_09.45.13

After

Only 100 tags and 100 branches are loaded, and they are loaded only after the user opens the dropdown, additionally the search works by requesting the data to the backend instead of filtering in the frontend:

2021-03-02_09.47.47

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to #321790 (closed)

Edited by Miguel Rincon

Merge request reports

Loading