[Feature] UI - Paginated Key Alias Select

[yuneng-jiang]

Summary

Replace the non-paginated Key Alias filter with a PaginatedKeyAliasSelect component that mirrors the existing PaginatedModelSelect pattern. This aligns the UI with the paginated /key/aliases endpoint from PR #22137, fixing the issue where the UI was fetching all key aliases upfront and causing performance problems with large key sets.

Changes

• Added useInfiniteKeyAliases hook for paginated key alias fetching with search support
• Created PaginatedKeyAliasSelect component with 80% scroll threshold for infinite loading
• Updated keyAliasesCall in networking to accept page, size, search query parameters
• Replaced Key Alias filters in Request Logs and Virtual Keys tables to use customComponent: PaginatedKeyAliasSelect
• Removed fetchAllKeyAliases helper function and related upfront fetching logic from filter hooks
• All 22 new tests pass; all 54 existing tests in modified files pass

Testing

• Created PaginatedKeyAliasSelect.test.tsx with 14 tests
• Created useKeyAliases.test.ts with 8 tests
• Updated existing test mocks to remove references to removed fetchAllKeyAliases
• All TypeScript types check without errors

Type

🆕 New Feature
✅ Test

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 26, 2026 8:08pm

[greptile-apps]

Greptile Summary

Replaces the non-paginated Key Alias filter with a new PaginatedKeyAliasSelect component that uses infinite scrolling and server-side search, mirroring the existing PaginatedModelSelect pattern. This removes the fetchAllKeyAliases upfront fetch from both the Virtual Keys and Request Logs filter hooks, delegating pagination to the component itself.

• New useInfiniteKeyAliases hook and PaginatedKeyAliasSelect component follow established patterns (useInfiniteModelInfo / PaginatedModelSelect)
• Clean removal of fetchAllKeyAliases with no stale references remaining
• 22 new tests added (14 component, 8 hook); existing tests updated to remove old mocks
• Key concern: The frontend now expects a paginated response shape (total_count, current_page, total_pages, size) from /key/aliases, but the current backend endpoint returns only {"aliases": [...]} with no pagination support. The PR description references backend PR [Fix] /key/aliases: Add pagination and search to prevent OOMs #22137 for this — ensure it is merged first or alongside this PR to avoid a broken Key Alias filter in production

Confidence Score: 3/5

• Safe to merge only if the companion backend PR [Fix] /key/aliases: Add pagination and search to prevent OOMs #22137 (paginated /key/aliases endpoint) is merged first or simultaneously
• The UI code itself is well-structured, follows existing patterns, includes comprehensive tests, and cleanly removes old code. However, the frontend now depends on a paginated backend response shape that the current main branch does not provide — merging this alone would result in a non-functional Key Alias filter (pagination and search silently broken).
• Pay close attention to ui/litellm-dashboard/src/components/networking.tsx — the PaginatedKeyAliasResponse type must match the backend response from the not-yet-merged PR [Fix] /key/aliases: Add pagination and search to prevent OOMs #22137

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/networking.tsx	Updated keyAliasesCall to accept pagination params (page, size, search) and return PaginatedKeyAliasResponse. The new response type does not match the current backend /key/aliases endpoint (which has no pagination) — this depends on unmerged PR #22137.
ui/litellm-dashboard/src/app/(dashboard)/hooks/keys/useKeyAliases.ts	New useInfiniteKeyAliases hook using @tanstack/react-query infinite query pattern, mirrors existing useInfiniteModelInfo. Clean implementation with proper getNextPageParam logic.
ui/litellm-dashboard/src/components/KeyAliasSelect/PaginatedKeyAliasSelect/PaginatedKeyAliasSelect.tsx	New paginated select component that mirrors PaginatedModelSelect. Implements debounced search, scroll-based infinite loading at 80% threshold, and deduplication of aliases. Props are compatible with FilterOptionCustomComponentProps.
ui/litellm-dashboard/src/components/key_team_helpers/filter_helpers.ts	Removed fetchAllKeyAliases helper and its keyAliasesCall import. Clean removal with no stale references left behind.
ui/litellm-dashboard/src/components/key_team_helpers/filter_logic.tsx	Removed the useQuery call for fetchAllKeyAliases and the allKeyAliases return value. Key alias filtering is now handled by the PaginatedKeyAliasSelect custom component in the filter UI.
ui/litellm-dashboard/src/components/view_logs/index.tsx	Replaced old searchable Key Alias filter (with searchFn calling fetchAllKeyAliases) with customComponent: PaginatedKeyAliasSelect. Clean integration with FilterComponent.
ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx	Replaced old searchable Key Alias filter with customComponent: PaginatedKeyAliasSelect. Removed allKeyAliases destructuring from useFilterLogic return.

Sequence Diagram

sequenceDiagram
    participant User
    participant PaginatedKeyAliasSelect
    participant useInfiniteKeyAliases
    participant keyAliasesCall
    participant Backend as /key/aliases

    User->>PaginatedKeyAliasSelect: Opens filter dropdown
    PaginatedKeyAliasSelect->>useInfiniteKeyAliases: Hook initializes (page=1, size=50)
    useInfiniteKeyAliases->>keyAliasesCall: Fetch page 1
    keyAliasesCall->>Backend: GET /key/aliases?page=1&size=50
    Backend-->>keyAliasesCall: { aliases, total_count, current_page, total_pages, size }
    keyAliasesCall-->>useInfiniteKeyAliases: PaginatedKeyAliasResponse
    useInfiniteKeyAliases-->>PaginatedKeyAliasSelect: data.pages[0]
    PaginatedKeyAliasSelect-->>User: Renders alias options

    User->>PaginatedKeyAliasSelect: Scrolls past 80% threshold
    PaginatedKeyAliasSelect->>useInfiniteKeyAliases: fetchNextPage()
    useInfiniteKeyAliases->>keyAliasesCall: Fetch page 2
    keyAliasesCall->>Backend: GET /key/aliases?page=2&size=50
    Backend-->>keyAliasesCall: Next page data
    keyAliasesCall-->>useInfiniteKeyAliases: PaginatedKeyAliasResponse
    useInfiniteKeyAliases-->>PaginatedKeyAliasSelect: data.pages[0..1]
    PaginatedKeyAliasSelect-->>User: Appends new options

    User->>PaginatedKeyAliasSelect: Types search text
    PaginatedKeyAliasSelect->>PaginatedKeyAliasSelect: Debounce 300ms
    PaginatedKeyAliasSelect->>useInfiniteKeyAliases: search="text" (resets to page 1)
    useInfiniteKeyAliases->>keyAliasesCall: Fetch with search
    keyAliasesCall->>Backend: GET /key/aliases?page=1&size=50&search=text
    Backend-->>keyAliasesCall: Filtered results
    keyAliasesCall-->>useInfiniteKeyAliases: PaginatedKeyAliasResponse
    useInfiniteKeyAliases-->>PaginatedKeyAliasSelect: Filtered data
    PaginatedKeyAliasSelect-->>User: Shows filtered aliases

Loading

_{Last reviewed commit: 701ec62}

[greptile-apps]

_{15 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Backend endpoint mismatch with PaginatedKeyAliasResponse

The current backend /key/aliases endpoint (in key_management_endpoints.py:4110) accepts no query parameters and returns a flat {"aliases": List[str]} — it does not support page, size, or search, and does not return total_count, current_page, total_pages, or size fields.

This PR's description mentions aligning with a paginated endpoint from PR #22137, but that backend change does not appear to be merged into main yet. If this UI PR is merged before #22137, the useInfiniteKeyAliases hook will receive a response missing current_page and total_pages, causing getNextPageParam to always return undefined (since undefined < undefined is false). The component will still render the first page of aliases, but pagination and search will silently not work.

Please ensure PR #22137 (the backend pagination support) is merged first, or merge both together to avoid a broken intermediate state.