[1fanwang]

TL;DR

The Select Project page renders every project row at once, which gets slower as the project count grows.

This change paginates the table client-side so the page renders one slice at a time instead of mounting the full project list.

Type

• Bug Fix
• Feature
• Plugin

Are all requirements met?

• Code completed
• Smoke tested
• Unit tests added
• Code documentation added. Not needed for this UI-only fix.
• Any pending items have an associated Issue

Complete description

The Select Project page mapped every project row directly into the table body. On a large installation that means the browser mounts every row, every button, and every text node before the page becomes usable.

This patch paginates the existing table with 25, 50, and 100 row options, and it resets to page 1 when the filtered result set changes.

Tracking Issue

N/A

Follow-up issue

N/A

Testing Done

Seed 60 extra projects into Flyte demo, then compare the published console with the local branch.

export FLYTECTL_CONFIG=/Users/stewang/.flyte/config-sandbox.yaml
for i in $(seq -w 1 60); do
  flytectl create project --id project-$i --name project-$i --description "project $i" >/dev/null
  echo created project-$i
 done
python3 - <<'PY'
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch(executable_path='/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless=True)
    for label, url in [('before', 'http://localhost:30080/console'), ('after', 'http://localhost:8081/console')]:
        page = browser.new_page(viewport={'width': 1440, 'height': 1600})
        page.goto(url, wait_until='networkidle', timeout=120000)
        page.wait_for_timeout(3000)
        names = page.locator('[data-cy="project-name"]')
        print(label, 'count', names.count())
        print(label, 'has project-25', page.get_by_text('project-25').count())
        print(label, 'has next page', page.get_by_label('Go to next page').count())
        page.close()

    page = browser.new_page(viewport={'width': 1440, 'height': 1600})
    page.goto('http://localhost:8081/console', wait_until='networkidle', timeout=120000)
    page.wait_for_timeout(3000)
    print('page1_count', page.locator('[data-cy="project-name"]').count())
    print('page1_has_project25', page.get_by_text('project-25').count())
    page.get_by_label('Go to next page').click()
    page.wait_for_timeout(1000)
    print('page2_count', page.locator('[data-cy="project-name"]').count())
    print('page2_has_project25', page.get_by_text('project-25').count())
    browser.close()
PY

created project-01
created project-02
created project-03
created project-04
created project-05
created project-06
created project-07
created project-08
created project-09
created project-10
created project-11
created project-12
created project-13
created project-14
created project-15
created project-16
created project-17
created project-18
created project-19
created project-20
created project-21
created project-22
created project-23
created project-24
created project-25
created project-26
created project-27
created project-28
created project-29
created project-30
created project-31
created project-32
created project-33
created project-34
created project-35
created project-36
created project-37
created project-38
created project-39
created project-40
created project-41
created project-42
created project-43
created project-44
created project-45
created project-46
created project-47
created project-48
created project-49
created project-50
created project-51
created project-52
created project-53
created project-54
created project-55
created project-56
created project-57
created project-58
created project-59
created project-60
before count 61
before has project-25 1
before has next page 0
after count 25
after has project-25 0
after has next page 1
page1_count 25
page1_has_project25 0
page2_count 25
page2_has_project25 1

[flyte-bot]

🎉 This PR is included in version 1.22.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀