Skip to content

feat(ui): migrate models page to App Router path route#30677

Merged
ryan-crabbe-berri merged 2 commits into
litellm_internal_stagingfrom
litellm_migrate_models_page
Jun 18, 2026
Merged

feat(ui): migrate models page to App Router path route#30677
ryan-crabbe-berri merged 2 commits into
litellm_internal_stagingfrom
litellm_migrate_models_page

Conversation

@ryan-crabbe-berri

@ryan-crabbe-berri ryan-crabbe-berri commented Jun 17, 2026

Copy link
Copy Markdown
Collaborator

Relevant issues

Linear ticket

Refs LIT-3687

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

  • I have added meaningful tests
  • My PR passes all unit tests on make test-unit
  • My PR's scope is as isolated as possible; it only solves 1 specific problem
  • I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

CI (LiteLLM team)

  • Branch creation CI run
    Link:

  • CI run for the last commit
    Link:

  • Merge / cherry-pick CI run
    Links:

Screenshots / Proof of Fix

This is a UI routing change with no backend component, so the proof is the rendered page reachable at its new path plus the legacy redirect. To verify locally:

  1. Build and serve the dashboard, or run the proxy that serves it, then visit http://localhost:4000/ui/models-and-endpoints and confirm the Models + Endpoints page renders (Model Management header, the All Models / Add Model / Health Status tabs)
  2. Click "Models" in the left sidebar and confirm the URL becomes /ui/models-and-endpoints (not /ui/?page=models)
  3. Open an old bookmark http://localhost:4000/ui/?page=models and confirm it redirects to /ui/models-and-endpoints

Type

🧹 Refactoring

Changes

Continues the dashboard App Router migration by cutting the Models + Endpoints page over from the legacy ?page=models switch in (dashboard)/page.tsx to a path route at (dashboard)/models-and-endpoints/page.tsx. Adding the models -> models-and-endpoints entry to MIGRATED_PAGES is the single switch that repoints the sidebar link and redirects existing ?page=models deep links to /ui/models-and-endpoints, matching the mechanism every already-migrated page uses.

ModelsAndEndpointsView already pulled identity from useAuthorized() and its model data from useModelsInfo(), so the token, keys, modelData, and setModelData props it still declared were dead. I removed them from ModelDashboardProps (which also drops three anys), updated the view's test renders accordingly, and dropped the parent's now-unused setModelData state; modelData stays only because pass-through-settings still reads it (that page is the next migration). The new route's page.tsx supplies premiumUser from useAuthorized() and teams from useTeams(), the same pattern the agents route uses.

Added a unit test asserting MIGRATED_PAGES.models maps to models-and-endpoints and that migratedHref builds /ui/models-and-endpoints, and added the page to the e2e migration fixture so the sidebar/navigation smoke covers it.

Cut the Models + Endpoints page over from the legacy ?page=models switch
in (dashboard)/page.tsx to a path route at (dashboard)/models-and-endpoints.
Adding the MIGRATED_PAGES entry repoints the sidebar link and redirects old
?page=models bookmarks to /ui/models-and-endpoints.

ModelsAndEndpointsView already sourced identity from useAuthorized() and its
own data via useModelsInfo(), so the token/keys/modelData/setModelData props
were dead; drop them from ModelDashboardProps (and the parent's now-unused
setModelData state) to sever the last of the shared-state coupling.
@codecov

codecov Bot commented Jun 17, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@greptile-apps

greptile-apps Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR migrates the Models + Endpoints page from the legacy ?page=models query-param switch to a proper App Router path route at /ui/models-and-endpoints, following the same pattern used by every previously migrated page.

  • A single models: "models-and-endpoints" entry in MIGRATED_PAGES re-routes the sidebar link and redirects legacy ?page=models deep links; the new page.tsx derives premiumUser and teams from existing hooks (useAuthorized, useTeams) with no new data-fetching logic.
  • Four props that were declared on ModelDashboardProps but never read by the component (token, modelData, keys, setModelData) are removed; tests are updated to drop those arguments and inject model data through the useModelsInfo mock, which is the actual code path the component uses.

Confidence Score: 5/5

Purely a UI routing refactor with no backend changes; the new route reuses existing hooks and follows the established migration pattern exactly.

All changes are confined to the dashboard UI layer. The new page component is minimal and mirrors the agents route verbatim. Dead props are cleanly removed, the legacy redirect is wired through the single shared MIGRATED_PAGES mechanism, and the retained modelData stub in page.tsx is an acknowledged placeholder for the not-yet-migrated pass-through-settings consumer. No logic changes, no backend impact, tests updated correctly.

No files require special attention.

Important Files Changed

Filename Overview
ui/litellm-dashboard/src/utils/migratedPages.ts Added models: "models-and-endpoints" to MIGRATED_PAGES, wiring the sidebar link and legacy redirect in one place — consistent with every prior migration.
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx New App Router page component; derives premiumUser from useAuthorized() and teams from useTeams(), matching the pattern used by the agents route.
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx Removed four dead props (token, modelData, keys, setModelData) from ModelDashboardProps; component already sourced its data from useAuthorized() and useModelsInfo() internally.
ui/litellm-dashboard/src/app/(dashboard)/page.tsx Removed the page == "models" switch arm and dropped setModelData from state; modelData is retained as a { data: [] } stub for the not-yet-migrated pass-through-settings consumer.
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx Dropped dead prop arguments from all render calls; the one test that needed specific model data now injects it via mockUseModelsInfo, which is the real code path the component uses.
ui/litellm-dashboard/src/utils/migratedPages.test.ts Added a focused unit test asserting MIGRATED_PAGES.models maps to "models-and-endpoints" and that migratedHref builds the correct /ui/models-and-endpoints href.
ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts Added models: "models-and-endpoints" to the e2e fixture, keeping it in lockstep with the source-of-truth MIGRATED_PAGES.
ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts Tightened the legacyAnchor locator to getByRole("link", { name: "Virtual Keys", exact: true }) — more precise and avoids false positives from partial text matches.

Reviews (2): Last reviewed commit: "test(ui): scope migration smoke's shell ..." | Re-trigger Greptile

The migration smoke used a loose `locator("a", { hasText: "Virtual Keys" })`
to assert the dashboard shell rendered. The Models + Endpoints page content
itself links to the "Virtual Keys page", so on that route the substring filter
matched two anchors and tripped Playwright strict mode. Match the sidebar link
by its exact accessible name instead, which resolves to just the nav item.
@ryan-crabbe-berri

Copy link
Copy Markdown
Collaborator Author

@greptileai re review

@ryan-crabbe-berri ryan-crabbe-berri merged commit d97b17b into litellm_internal_staging Jun 18, 2026
128 of 132 checks passed
@ryan-crabbe-berri ryan-crabbe-berri deleted the litellm_migrate_models_page branch June 18, 2026 01:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants