feat(ui): migrate old usage report to App Router path route

[ryan-crabbe-berri]

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

UI routing change, no backend component. To verify locally against the built dashboard or the proxy that serves it:

1. Click "Old Usage" in the left sidebar (under Experimental) and confirm the URL becomes /ui/old-usage (not /ui/?page=usage) and the usage report renders
2. Reload /ui/old-usage directly and confirm it still renders (no 404)
3. Open an old bookmark /ui/?page=usage and confirm it redirects to /ui/old-usage
4. Confirm the modern "Usage" dashboard is unaffected at /ui/usage

Type

🧹 Refactoring

Changes

Continues the App Router migration by cutting the legacy "Old Usage" report (?page=usage, the item under the Experimental section of the sidebar) over from the ?page= switch in (dashboard)/page.tsx to a path route at (dashboard)/old-usage/page.tsx. The segment is old-usage rather than usage because the modern usage dashboard (new_usage) already owns /usage. Adding the usage -> old-usage entry to MIGRATED_PAGES repoints the sidebar item and redirects existing ?page=usage deep links, the same mechanism every migrated page uses.

The report was the switch's catch-all else branch, so migrating it out requires choosing a new fallback. I collapsed the now-redundant explicit api-keys arm into the else, making the main dashboard (UserDashboard) the default branch. Behavior for ?page=api-keys is unchanged; the only difference is that unrecognized ?page= values now land on the dashboard instead of the Old Usage report, which is the sensible default.

The new route sources identity from useAuthorized() and passes keys={null}. The Usage page uses keys only to populate a key-filter dropdown, and the legacy page read the parent's keys state, which was already empty on direct navigation to ?page=usage; this preserves that behavior rather than wiring a paginated key fetch into a deprecated report. Added a unit test asserting the usage -> old-usage mapping and its redirect href, and the e2e migration fixture entry so the navigation smoke covers it.

Note for sequencing: this touches the same page.tsx switch as the in-flight models (#30677) and pass-through (#30692) PRs, so whichever merges later will need a small conflict resolution in that block.

[greptile-apps]

Greptile Summary

Migrates the legacy "Old Usage" report (?page=usage) from the page.tsx switch to a dedicated App Router route at (dashboard)/old-usage/page.tsx, following the same pattern every other migrated page uses.

• MIGRATED_PAGES gains usage → "old-usage" so the sidebar links and existing ?page=usage deep links redirect to /ui/old-usage; the api-keys arm in the switch is collapsed into the default else branch, which now renders UserDashboard instead of Usage.
• The new old-usage/page.tsx sources identity from useAuthorized() and passes keys={null} — safe because Usage's prop type is any[] | null and all access goes through optional chaining.
• Tests are updated (the old toBeUndefined() assertion on MIGRATED_PAGES.usage correctly becomes a positive mapping assertion) and the e2e fixture is kept in sync.

Confidence Score: 5/5

Safe to merge — pure UI routing refactor with no backend changes and no behaviour regressions on existing pages.

All five changed files follow the established App Router migration pattern. The Usage component already accepts null for the keys prop via optional chaining; the test update replaces a now-stale 'is undefined' guard with an equivalent positive assertion; and the e2e fixture is kept in sync. No logic paths are broken or left untested.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/utils/migratedPages.ts	Adds usage: "old-usage" to MIGRATED_PAGES; comment updated to document the two-entry usage split. No issues.
ui/litellm-dashboard/src/app/(dashboard)/old-usage/page.tsx	New App Router route for the legacy Usage report. Uses useAuthorized() consistently with other migrated pages. Passes keys={null}, which is safe — the Usage component's prop type is `any[]
ui/litellm-dashboard/src/app/(dashboard)/page.tsx	Removes the Usage import and explicit api-keys arm; makes UserDashboard the default else branch. Unrecognized ?page= values now fall to the dashboard, which is the sensible default.
ui/litellm-dashboard/src/utils/migratedPages.test.ts	Correctly replaces the old toBeUndefined() assertion with new test verifying usage→old-usage mapping and its redirect href. Coverage is maintained, not weakened.
ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts	Adds usage→old-usage entry to the e2e fixture, keeping it in sync with the source MIGRATED_PAGES map.

_{Reviews (1): Last reviewed commit: "feat(ui): migrate old usage report to Ap..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!