From 40301820e7d5df289bf3112929d1d6dacac84f46 Mon Sep 17 00:00:00 2001 From: ryan-crabbe-berri Date: Fri, 12 Jun 2026 15:35:15 -0700 Subject: [PATCH] feat(ui): migrate caching, cost-tracking, transform-request, ui-theme, and logs to path routes (#30267) * feat(ui): cut caching, cost-tracking, transform-request, ui-theme, and logs over to path routes Completes the simple-leaf portion of the page-by-page App Router migration. All five legacy switch arms passed only identity props (accessToken/userRole/userID, plus token/premiumUser for caching and logs), all of which useAuthorized() provides, so each route wrapper is a thin useAuthorized() + render. MIGRATED_PAGES routes the sidebar and redirects the legacy ?page= URLs; the e2e fixture picks all five up in the migration smoke and sidebar specs automatically. * refactor(ui): colocate caching, cost-tracking, transform-request, and ui-theme components Each had the legacy switch as its only importer. caching takes its whole closure (cache_dashboard, cache_health, cache_settings, response_time_indicator); CostTrackingSettings moves as the cost-tracking components folder; the transform-request and ui-theme single-file panels move under their routes. view_logs stays at src/components: six other pages (guardrails monitor, tool policies, pass-through, MCP toolsets, usage) import it. Suppressions re-keyed. * chore: retrigger ci e2e_ui_testing failed on three specs unrelated to this PR's pages (team-info tabs, MCP create form) and local_testing_part1 on test_batch_completions; all pass on the pre-merge commit and none touch files in this diff. --- .../e2e_tests/fixtures/migratedPages.ts | 9 +++- ui/litellm-dashboard/eslint-suppressions.json | 44 +++++++++---------- .../caching}/components/cache_dashboard.tsx | 6 +-- .../caching}/components/cache_health.tsx | 0 .../cache_settings/CacheFieldGroup.test.tsx | 0 .../cache_settings/CacheFieldGroup.tsx | 0 .../CacheFieldRenderer.test.tsx | 0 .../cache_settings/CacheFieldRenderer.tsx | 2 +- .../cache_settings/RedisTypeSelector.test.tsx | 0 .../cache_settings/RedisTypeSelector.tsx | 0 .../cache_settings/cacheSettingsUtils.ts | 0 .../components/cache_settings/index.tsx | 4 +- .../components/response_time_indicator.tsx | 0 .../src/app/(dashboard)/caching/page.tsx | 17 +++++++ .../components}/add_margin_form.test.tsx | 4 +- .../components}/add_margin_form.tsx | 2 +- .../components}/add_provider_form.test.tsx | 4 +- .../components}/add_provider_form.tsx | 2 +- .../cost_tracking_settings.test.tsx | 6 +-- .../components}/cost_tracking_settings.tsx | 2 +- .../components}/how_it_works.test.tsx | 2 +- .../components}/how_it_works.tsx | 0 .../cost-tracking/components}/index.ts | 0 .../pricing_calculator/index.test.tsx | 2 +- .../components}/pricing_calculator/index.tsx | 0 .../multi_cost_results.test.tsx | 2 +- .../pricing_calculator/multi_cost_results.tsx | 0 .../multi_export_dropdown.test.tsx | 2 +- .../multi_export_dropdown.tsx | 0 .../multi_export_utils.test.ts | 0 .../pricing_calculator/multi_export_utils.ts | 0 .../components}/pricing_calculator/types.ts | 0 .../use_multi_cost_estimate.test.ts | 0 .../use_multi_cost_estimate.ts | 0 .../provider_discount_table.test.tsx | 2 +- .../components}/provider_discount_table.tsx | 2 +- .../provider_display_helpers.test.ts | 2 +- .../components}/provider_display_helpers.ts | 2 +- .../provider_margin_table.test.tsx | 2 +- .../components}/provider_margin_table.tsx | 2 +- .../cost-tracking/components}/types.ts | 0 .../components}/use_discount_config.test.ts | 2 +- .../components}/use_discount_config.ts | 4 +- .../components}/use_margin_config.test.ts | 2 +- .../components}/use_margin_config.ts | 4 +- .../app/(dashboard)/cost-tracking/page.tsx | 9 ++++ .../src/app/(dashboard)/logs/page.tsx | 17 +++++++ .../src/app/(dashboard)/page.tsx | 27 ------------ .../TransformRequestPanel.tsx} | 4 +- .../(dashboard)/transform-request/page.tsx | 9 ++++ .../(dashboard)/ui-theme/UIThemeSettings.tsx} | 2 +- .../src/app/(dashboard)/ui-theme/page.tsx | 9 ++++ .../src/utils/migratedPages.test.ts | 11 +++++ .../src/utils/migratedPages.ts | 5 +++ 54 files changed, 141 insertions(+), 86 deletions(-) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_dashboard.tsx (98%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_health.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/CacheFieldGroup.test.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/CacheFieldGroup.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/CacheFieldRenderer.test.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/CacheFieldRenderer.tsx (98%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/RedisTypeSelector.test.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/RedisTypeSelector.tsx (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/cacheSettingsUtils.ts (100%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/cache_settings/index.tsx (98%) rename ui/litellm-dashboard/src/{ => app/(dashboard)/caching}/components/response_time_indicator.tsx (100%) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/caching/page.tsx rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/add_margin_form.test.tsx (97%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/add_margin_form.tsx (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/add_provider_form.test.tsx (96%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/add_provider_form.tsx (97%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/cost_tracking_settings.test.tsx (97%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/cost_tracking_settings.tsx (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/how_it_works.test.tsx (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/how_it_works.tsx (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/index.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/index.test.tsx (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/index.tsx (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_cost_results.test.tsx (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_cost_results.tsx (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_export_dropdown.test.tsx (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_export_dropdown.tsx (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_export_utils.test.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/multi_export_utils.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/types.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/use_multi_cost_estimate.test.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/pricing_calculator/use_multi_cost_estimate.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_discount_table.test.tsx (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_discount_table.tsx (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_display_helpers.test.ts (98%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_display_helpers.ts (93%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_margin_table.test.tsx (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/provider_margin_table.tsx (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/types.ts (100%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/use_discount_config.test.ts (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/use_discount_config.ts (97%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/use_margin_config.test.ts (99%) rename ui/litellm-dashboard/src/{components/CostTrackingSettings => app/(dashboard)/cost-tracking/components}/use_margin_config.ts (97%) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/page.tsx create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx rename ui/litellm-dashboard/src/{components/transform_request.tsx => app/(dashboard)/transform-request/TransformRequestPanel.tsx} (98%) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/transform-request/page.tsx rename ui/litellm-dashboard/src/{components/ui_theme_settings.tsx => app/(dashboard)/ui-theme/UIThemeSettings.tsx} (98%) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/ui-theme/page.tsx diff --git a/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts b/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts index 17a27d451df..19b90848e60 100644 --- a/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts +++ b/ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts @@ -9,8 +9,8 @@ * - navigation specs that assert per-page URLs (tests/navigation/sidebar.spec.ts) * * Keep this in lockstep with MIGRATED_PAGES in src/utils/migratedPages.ts. - * Pending (add as each PR lands): the leaf-pages batch - * (caching, cost-tracking, logs, transform-request, ui-theme). + * Pending (add as each PR lands): admin-panel, logging-and-alerts, + * model-hub-table, and usage (#30268). */ export const MIGRATED_E2E_PAGES: Record = { api_ref: "api-reference", @@ -30,6 +30,11 @@ export const MIGRATED_E2E_PAGES: Record = { prompts: "prompts", "tool-policies": "tool-policies", skills: "skills", + caching: "caching", + "cost-tracking": "cost-tracking", + "transform-request": "transform-request", + "ui-theme": "ui-theme", + logs: "logs", }; export const MIGRATED_E2E_SEGMENTS: string[] = [...new Set(Object.values(MIGRATED_E2E_PAGES))]; diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index 53dde4d28a4..6dc9be0fc90 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -293,77 +293,77 @@ "count": 1 } }, - "src/components/CostTrackingSettings/add_margin_form.tsx": { + "src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/add_provider_form.tsx": { + "src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/cost_tracking_settings.tsx": { + "src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/how_it_works.tsx": { + "src/app/(dashboard)/cost-tracking/components/how_it_works.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.test.tsx": { + "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx": { "unused-imports/no-unused-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.tsx": { + "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.test.tsx": { + "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx": { "unused-imports/no-unused-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.tsx": { + "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/pricing_calculator/use_multi_cost_estimate.ts": { + "src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.ts": { "no-restricted-syntax": { "count": 1 } }, - "src/components/CostTrackingSettings/provider_discount_table.test.tsx": { + "src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx": { "unused-imports/no-unused-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/provider_discount_table.tsx": { + "src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/provider_display_helpers.test.ts": { + "src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts": { "unused-imports/no-unused-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/provider_margin_table.tsx": { + "src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/CostTrackingSettings/use_discount_config.ts": { + "src/app/(dashboard)/cost-tracking/components/use_discount_config.ts": { "no-restricted-syntax": { "count": 2 } }, - "src/components/CostTrackingSettings/use_margin_config.ts": { + "src/app/(dashboard)/cost-tracking/components/use_margin_config.ts": { "no-restricted-syntax": { "count": 2 } @@ -826,7 +826,7 @@ "count": 1 } }, - "src/components/cache_dashboard.tsx": { + "src/app/(dashboard)/caching/components/cache_dashboard.tsx": { "no-restricted-imports": { "count": 1 }, @@ -837,22 +837,22 @@ "count": 2 } }, - "src/components/cache_health.tsx": { + "src/app/(dashboard)/caching/components/cache_health.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/cache_settings/CacheFieldRenderer.tsx": { + "src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/cache_settings/RedisTypeSelector.tsx": { + "src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/cache_settings/index.tsx": { + "src/app/(dashboard)/caching/components/cache_settings/index.tsx": { "no-restricted-imports": { "count": 1 }, @@ -1993,12 +1993,12 @@ "count": 1 } }, - "src/components/transform_request.tsx": { + "src/app/(dashboard)/transform-request/TransformRequestPanel.tsx": { "no-restricted-imports": { "count": 1 } }, - "src/components/ui_theme_settings.tsx": { + "src/app/(dashboard)/ui-theme/UIThemeSettings.tsx": { "no-restricted-imports": { "count": 1 }, diff --git a/ui/litellm-dashboard/src/components/cache_dashboard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_dashboard.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/cache_dashboard.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_dashboard.tsx index 874cb43276e..99656f0db4a 100644 --- a/ui/litellm-dashboard/src/components/cache_dashboard.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_dashboard.tsx @@ -16,11 +16,11 @@ import { Text, } from "@tremor/react"; import React, { useEffect, useState } from "react"; -import NotificationsManager from "./molecules/notifications_manager"; -import UsageDatePicker from "./shared/usage_date_picker"; +import NotificationsManager from "@/components/molecules/notifications_manager"; +import UsageDatePicker from "@/components/shared/usage_date_picker"; import { RefreshIcon } from "@heroicons/react/outline"; -import { adminGlobalCacheActivity, cachingHealthCheckCall } from "./networking"; +import { adminGlobalCacheActivity, cachingHealthCheckCall } from "@/components/networking"; // Import the new component import { CacheHealthTab } from "./cache_health"; diff --git a/ui/litellm-dashboard/src/components/cache_health.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_health.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_health.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_health.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldGroup.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldGroup.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/CacheFieldGroup.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldGroup.test.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldGroup.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldGroup.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/CacheFieldGroup.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldGroup.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.test.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx index 6608b09d261..27d9fc57200 100644 --- a/ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx @@ -5,7 +5,7 @@ import { NumberInput, TextInput } from "@tremor/react"; import { Select } from "antd"; import React, { useEffect, useState } from "react"; import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; -import NumericalInput from "../shared/numerical_input"; +import NumericalInput from "@/components/shared/numerical_input"; interface CacheFieldRendererProps { field: any; diff --git a/ui/litellm-dashboard/src/components/cache_settings/RedisTypeSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.test.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/RedisTypeSelector.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.test.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/RedisTypeSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/RedisTypeSelector.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.tsx diff --git a/ui/litellm-dashboard/src/components/cache_settings/cacheSettingsUtils.ts b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/cacheSettingsUtils.ts similarity index 100% rename from ui/litellm-dashboard/src/components/cache_settings/cacheSettingsUtils.ts rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/cacheSettingsUtils.ts diff --git a/ui/litellm-dashboard/src/components/cache_settings/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/index.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/cache_settings/index.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/index.tsx index c7d8c579af3..7de49e08ace 100644 --- a/ui/litellm-dashboard/src/components/cache_settings/index.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/cache_settings/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useCallback } from "react"; import { Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react"; -import { getCacheSettingsCall, testCacheConnectionCall, updateCacheSettingsCall } from "../networking"; -import NotificationsManager from "../molecules/notifications_manager"; +import { getCacheSettingsCall, testCacheConnectionCall, updateCacheSettingsCall } from "@/components/networking"; +import NotificationsManager from "@/components/molecules/notifications_manager"; import RedisTypeSelector from "./RedisTypeSelector"; import CacheFieldRenderer from "./CacheFieldRenderer"; import { gatherFormValues, groupFieldsByCategory } from "./cacheSettingsUtils"; diff --git a/ui/litellm-dashboard/src/components/response_time_indicator.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/components/response_time_indicator.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/response_time_indicator.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/caching/components/response_time_indicator.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/page.tsx new file mode 100644 index 00000000000..0ef88ec9eb5 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/page.tsx @@ -0,0 +1,17 @@ +"use client"; + +import CacheDashboard from "./components/cache_dashboard"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; + +export default function Caching() { + const { accessToken, userRole, userId, token, premiumUser } = useAuthorized(); + return ( + + ); +} diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.test.tsx similarity index 97% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.test.tsx index 9d261e1b686..21ee41936c1 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.test.tsx @@ -2,11 +2,11 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import AddMarginForm from "./add_margin_form"; import { MarginConfig } from "./types"; -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI", Anthropic: "Anthropic", diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx index a3900eab257..56b34d6a68b 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx @@ -2,7 +2,7 @@ import React from "react"; import { TextInput, Button } from "@tremor/react"; import { Select as AntdSelect, Form, Tooltip, Radio } from "antd"; import { InfoCircleOutlined } from "@ant-design/icons"; -import { Providers, provider_map, providerLogoMap } from "../provider_info_helpers"; +import { Providers, provider_map, providerLogoMap } from "@/components/provider_info_helpers"; import { MarginConfig } from "./types"; import { handleImageError } from "./provider_display_helpers"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.test.tsx similarity index 96% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.test.tsx index e0e5600126b..48d23d4645d 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.test.tsx @@ -2,11 +2,11 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import AddProviderForm from "./add_provider_form"; import { DiscountConfig } from "./types"; -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI", Anthropic: "Anthropic", diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx similarity index 97% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx index bb11acb83aa..61ba3194607 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx @@ -2,7 +2,7 @@ import React from "react"; import { TextInput, Button } from "@tremor/react"; import { Select as AntdSelect, Form, Tooltip } from "antd"; import { InfoCircleOutlined } from "@ant-design/icons"; -import { Providers, provider_map, providerLogoMap } from "../provider_info_helpers"; +import { Providers, provider_map, providerLogoMap } from "@/components/provider_info_helpers"; import { DiscountConfig } from "./types"; import { handleImageError } from "./provider_display_helpers"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.test.tsx similarity index 97% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.test.tsx index 89711a098fe..0e1c7da92ba 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import CostTrackingSettings from "./cost_tracking_settings"; // Mock sub-hooks so we can control their state without network calls @@ -37,7 +37,7 @@ vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([]), })); -vi.mock("../HelpLink", () => ({ +vi.mock("@/components/HelpLink", () => ({ DocsMenu: () => null, })); @@ -45,7 +45,7 @@ vi.mock("./how_it_works", () => ({ default: () =>
How It Works
, })); -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI" }, provider_map: { OpenAI: "openai" }, providerLogoMap: {}, diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx index d9cca4d3c23..22ea8d8d517 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx @@ -20,7 +20,7 @@ import ProviderMarginTable from "./provider_margin_table"; import AddMarginForm from "./add_margin_form"; import PricingCalculator from "./pricing_calculator/index"; import { ExclamationCircleOutlined } from "@ant-design/icons"; -import { DocsMenu } from "../HelpLink"; +import { DocsMenu } from "@/components/HelpLink"; import HowItWorks from "./how_it_works"; import { useDiscountConfig } from "./use_discount_config"; import { useMarginConfig } from "./use_margin_config"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/how_it_works.test.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/how_it_works.test.tsx index fa608f555ce..711a8795f15 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/how_it_works.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import HowItWorks from "./how_it_works"; vi.mock("@/app/(dashboard)/api-reference/components/CodeBlock", () => ({ diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/how_it_works.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/how_it_works.tsx diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/index.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/index.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/index.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/index.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/index.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/index.test.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/index.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/index.test.tsx index 3e39e87a4b1..e7a858196c0 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/index.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/index.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../../tests/test-utils"; import PricingCalculator from "./index"; import type { ModelEntry } from "./types"; import type { MultiModelResult } from "./types"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/index.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/index.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/index.tsx diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx index a4ca0b01e79..6dc9309b5e3 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../../tests/test-utils"; import MultiCostResults from "./multi_cost_results"; import type { MultiModelResult } from "./types"; import type { CostEstimateResponse } from "../types"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.tsx diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx index 20495c44311..02940dd1325 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../../tests/test-utils"; import MultiExportDropdown from "./multi_export_dropdown"; import type { MultiModelResult } from "./types"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_dropdown.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.tsx diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_utils.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_utils.test.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_utils.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_utils.test.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_utils.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_utils.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_export_utils.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_utils.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/types.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/types.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/types.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/types.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/use_multi_cost_estimate.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.test.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/use_multi_cost_estimate.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.test.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/use_multi_cost_estimate.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/use_multi_cost_estimate.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx index 130b7adffe4..c1c43ebdb4f 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import ProviderDiscountTable from "./provider_discount_table"; vi.mock("@heroicons/react/outline", () => ({ diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx index 43c052b9e5c..d802f6d83dd 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { TextInput, Icon, Text } from "@tremor/react"; import { TrashIcon, PencilAltIcon, CheckIcon, XIcon } from "@heroicons/react/outline"; -import { SimpleTable } from "../common_components/simple_table"; +import { SimpleTable } from "@/components/common_components/simple_table"; import { DiscountConfig } from "./types"; import { getProviderDisplayInfo, handleImageError } from "./provider_display_helpers"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts similarity index 98% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts index 9668f07c2c5..c7b93c6f825 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts @@ -1,7 +1,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; import { getProviderDisplayInfo, getProviderBackendValue, handleImageError } from "./provider_display_helpers"; -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI", Anthropic: "Anthropic", diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.ts similarity index 93% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.ts index dc61a9d6218..cd088da09da 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_display_helpers.ts @@ -1,4 +1,4 @@ -import { Providers, provider_map, providerLogoMap } from "../provider_info_helpers"; +import { Providers, provider_map, providerLogoMap } from "@/components/provider_info_helpers"; export interface ProviderDisplayInfo { displayName: string; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.test.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.test.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.test.tsx index 3f0ab4ae16b..e1b17dea23d 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../tests/test-utils"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import ProviderMarginTable from "./provider_margin_table"; vi.mock("@heroicons/react/outline", () => ({ diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx index bee7a1219d2..b2baccc510f 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { TextInput, Icon, Text } from "@tremor/react"; import { TrashIcon, PencilAltIcon, CheckIcon, XIcon } from "@heroicons/react/outline"; -import { SimpleTable } from "../common_components/simple_table"; +import { SimpleTable } from "@/components/common_components/simple_table"; import { MarginConfig } from "./types"; import { getProviderDisplayInfo, handleImageError } from "./provider_display_helpers"; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/types.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/types.ts similarity index 100% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/types.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/types.ts diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.test.ts similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.test.ts index 967be542a81..d0ebb8ee7c7 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.test.ts @@ -18,7 +18,7 @@ vi.mock("./provider_display_helpers", () => ({ }), })); -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI", Anthropic: "Anthropic", diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.ts similarity index 97% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.ts index 5ed00ce1cbc..c9b4f47a7b8 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_discount_config.ts @@ -1,9 +1,9 @@ import { useState, useCallback } from "react"; import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking"; -import NotificationsManager from "../molecules/notifications_manager"; +import NotificationsManager from "@/components/molecules/notifications_manager"; import { DiscountConfig } from "./types"; import { getProviderBackendValue } from "./provider_display_helpers"; -import { Providers } from "../provider_info_helpers"; +import { Providers } from "@/components/provider_info_helpers"; export interface UseDiscountConfigProps { accessToken: string | null; diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.test.ts similarity index 99% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.test.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.test.ts index 8f9085de539..88a865e4fa2 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.test.ts @@ -18,7 +18,7 @@ vi.mock("./provider_display_helpers", () => ({ }), })); -vi.mock("../provider_info_helpers", () => ({ +vi.mock("@/components/provider_info_helpers", () => ({ Providers: { OpenAI: "OpenAI", Anthropic: "Anthropic", diff --git a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.ts similarity index 97% rename from ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.ts rename to ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.ts index 0af70b070d5..4994e9e6678 100644 --- a/ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/components/use_margin_config.ts @@ -1,9 +1,9 @@ import { useState, useCallback } from "react"; import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking"; -import NotificationsManager from "../molecules/notifications_manager"; +import NotificationsManager from "@/components/molecules/notifications_manager"; import { MarginConfig } from "./types"; import { getProviderBackendValue } from "./provider_display_helpers"; -import { Providers } from "../provider_info_helpers"; +import { Providers } from "@/components/provider_info_helpers"; export interface UseMarginConfigProps { accessToken: string | null; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/page.tsx new file mode 100644 index 00000000000..c72fed4c594 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/page.tsx @@ -0,0 +1,9 @@ +"use client"; + +import { CostTrackingSettings } from "./components"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; + +export default function CostTracking() { + const { accessToken, userRole, userId } = useAuthorized(); + return ; +} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx new file mode 100644 index 00000000000..88909e3b87f --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx @@ -0,0 +1,17 @@ +"use client"; + +import SpendLogsTable from "@/components/view_logs"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; + +export default function Logs() { + const { accessToken, userRole, userId, token, premiumUser } = useAuthorized(); + return ( + + ); +} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx index 9318bc1b332..864007b4fe8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/page.tsx @@ -3,12 +3,10 @@ import ModelsAndEndpointsView from "@/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView"; import AdminPanel from "@/components/AdminPanel"; import AgentsPanel from "@/components/agents"; -import CacheDashboard from "@/components/cache_dashboard"; import { teamListCall as v2TeamListCall } from "@/app/(dashboard)/hooks/teams/useTeams"; import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings"; import useProxySettings from "@/app/(dashboard)/hooks/proxySettings/useProxySettings"; import LoadingScreen from "@/components/common_components/LoadingScreen"; -import { CostTrackingSettings } from "@/components/CostTrackingSettings"; import GeneralSettings from "@/components/general_settings"; import { Team } from "@/components/key_team_helpers/key_list"; import ModelHubTable from "@/components/AIHub/ModelHubTable"; @@ -21,11 +19,8 @@ import PassThroughSettings from "@/components/pass_through_settings"; import PublicModelHub from "@/components/public_model_hub"; import Settings from "@/components/settings"; import { SurveyPrompt, SurveyModal, ClaudeCodePrompt, ClaudeCodeModal } from "@/components/survey"; -import TransformRequestPanel from "@/components/transform_request"; -import UIThemeSettings from "@/components/ui_theme_settings"; import Usage from "@/components/usage"; import UserDashboard from "@/components/user_dashboard"; -import SpendLogsTable from "@/components/view_logs"; import ViewUserDashboard from "@/components/view_users"; import { useAuth } from "@/contexts/AuthContext"; import { @@ -374,14 +369,8 @@ function CreateKeyPageContent() { ) : page == "agents" ? ( - ) : page == "transform-request" ? ( - ) : page == "router-settings" ? ( - ) : page == "ui-theme" ? ( - - ) : page == "cost-tracking" ? ( - ) : page == "model-hub-table" ? ( isAdminRole(userRole) ? ( ) - ) : page == "caching" ? ( - ) : page == "pass-through-settings" ? ( - ) : page == "logs" ? ( - ) : page == "new_usage" ? ( ) : ( diff --git a/ui/litellm-dashboard/src/components/transform_request.tsx b/ui/litellm-dashboard/src/app/(dashboard)/transform-request/TransformRequestPanel.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/transform_request.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/transform-request/TransformRequestPanel.tsx index cc68972d009..04d1701de3f 100644 --- a/ui/litellm-dashboard/src/components/transform_request.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/transform-request/TransformRequestPanel.tsx @@ -2,8 +2,8 @@ import React, { useState } from "react"; import { Button } from "antd"; import { CopyOutlined } from "@ant-design/icons"; import { Title } from "@tremor/react"; -import { transformRequestCall } from "./networking"; -import NotificationsManager from "./molecules/notifications_manager"; +import { transformRequestCall } from "@/components/networking"; +import NotificationsManager from "@/components/molecules/notifications_manager"; interface TransformRequestPanelProps { accessToken: string | null; } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/transform-request/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/transform-request/page.tsx new file mode 100644 index 00000000000..55289af3e43 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/transform-request/page.tsx @@ -0,0 +1,9 @@ +"use client"; + +import TransformRequestPanel from "./TransformRequestPanel"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; + +export default function TransformRequest() { + const { accessToken } = useAuthorized(); + return ; +} diff --git a/ui/litellm-dashboard/src/components/ui_theme_settings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/ui_theme_settings.tsx rename to ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.tsx index b68b0aeb1a6..2b70a0e8c96 100644 --- a/ui/litellm-dashboard/src/components/ui_theme_settings.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { Card, Title, Text, TextInput, Button } from "@tremor/react"; import { useTheme } from "@/contexts/ThemeContext"; import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking"; -import NotificationsManager from "./molecules/notifications_manager"; +import NotificationsManager from "@/components/molecules/notifications_manager"; interface UIThemeSettingsProps { userID: string | null; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/page.tsx new file mode 100644 index 00000000000..e80caa22c74 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/page.tsx @@ -0,0 +1,9 @@ +"use client"; + +import UIThemeSettings from "./UIThemeSettings"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; + +export default function UITheme() { + const { accessToken, userRole, userId } = useAuthorized(); + return ; +} diff --git a/ui/litellm-dashboard/src/utils/migratedPages.test.ts b/ui/litellm-dashboard/src/utils/migratedPages.test.ts index 8471c8a2567..1183c81d05f 100644 --- a/ui/litellm-dashboard/src/utils/migratedPages.test.ts +++ b/ui/litellm-dashboard/src/utils/migratedPages.test.ts @@ -88,6 +88,17 @@ describe("migratedHref / legacyPageHref", () => { // Old bookmarks used ?page=claude-code-plugins for the same panel. expect(MIGRATED_PAGES["claude-code-plugins"]).toBe("skills"); }); + + it("maps the caching, cost-tracking, transform-request, ui-theme, and logs ids to their routes", async () => { + vi.doMock("@/components/networking", () => ({ serverRootPath: "/" })); + const { MIGRATED_PAGES } = await import("./migratedPages"); + + expect(MIGRATED_PAGES.caching).toBe("caching"); + expect(MIGRATED_PAGES["cost-tracking"]).toBe("cost-tracking"); + expect(MIGRATED_PAGES["transform-request"]).toBe("transform-request"); + expect(MIGRATED_PAGES["ui-theme"]).toBe("ui-theme"); + expect(MIGRATED_PAGES.logs).toBe("logs"); + }); }); describe("dev server (NODE_ENV=development)", () => { diff --git a/ui/litellm-dashboard/src/utils/migratedPages.ts b/ui/litellm-dashboard/src/utils/migratedPages.ts index f51a7af73c2..c54b0473c02 100644 --- a/ui/litellm-dashboard/src/utils/migratedPages.ts +++ b/ui/litellm-dashboard/src/utils/migratedPages.ts @@ -30,6 +30,11 @@ export const MIGRATED_PAGES: Record = { skills: "skills", // Legacy alias: the old switch matched ?page=claude-code-plugins for the same panel. "claude-code-plugins": "skills", + caching: "caching", + "cost-tracking": "cost-tracking", + "transform-request": "transform-request", + "ui-theme": "ui-theme", + logs: "logs", }; function uiBase(): string {