diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.test.tsx
new file mode 100644
index 00000000000..f4b149c9667
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.test.tsx
@@ -0,0 +1,56 @@
+/* @vitest-environment jsdom */
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockPush } = vi.hoisted(() => ({ mockPush: vi.fn() }));
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: mockPush }) }));
+vi.mock("@/components/networking", () => ({ serverRootPath: "" }));
+
+import { createTabRoutes } from "@/utils/tabRoutes";
+import { TabRouteBar } from "./TabRouteBar";
+
+const routes = createTabRoutes("caching", ["health", "settings"] as const);
+const TABS = [
+ { key: "analytics", label: "Cache Analytics" },
+ { key: "health", label: "Cache Health" },
+ { key: "settings", label: "Cache Settings" },
+];
+
+const renderBar = (activeKey = "analytics") =>
+ render();
+
+describe("TabRouteBar", () => {
+ beforeEach(() => {
+ mockPush.mockClear();
+ });
+
+ it("renders each tab as an anchor with its trailing-slash href (base tab maps to the root)", () => {
+ const { getByRole } = renderBar();
+ expect(getByRole("tab", { name: "Cache Analytics" })).toHaveAttribute("href", "/ui/caching/");
+ expect(getByRole("tab", { name: "Cache Health" })).toHaveAttribute("href", "/ui/caching/health/");
+ expect(getByRole("tab", { name: "Cache Settings" })).toHaveAttribute("href", "/ui/caching/settings/");
+ });
+
+ it("marks the active tab selected from activeKey", () => {
+ const { getByRole } = renderBar("health");
+ expect(getByRole("tab", { name: "Cache Health" })).toHaveAttribute("aria-selected", "true");
+ expect(getByRole("tab", { name: "Cache Analytics" })).toHaveAttribute("aria-selected", "false");
+ });
+
+ it("soft-navigates on a plain left click (preventing the full-page anchor load)", async () => {
+ const user = userEvent.setup();
+ const { getByRole } = renderBar();
+ await user.click(getByRole("tab", { name: "Cache Health" }));
+ expect(mockPush).toHaveBeenCalledWith("/ui/caching/health/");
+ });
+
+ it("lets the browser handle a modifier-click so open-in-new-tab works", async () => {
+ const user = userEvent.setup();
+ const { getByRole } = renderBar();
+ await user.keyboard("[ControlLeft>]");
+ await user.click(getByRole("tab", { name: "Cache Health" }));
+ await user.keyboard("[/ControlLeft]");
+ expect(mockPush).not.toHaveBeenCalled();
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.tsx
new file mode 100644
index 00000000000..60cbe53e326
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/TabRouteBar.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import type { MouseEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { TabRoutes } from "@/utils/tabRoutes";
+
+export interface TabRouteItem {
+ key: string;
+ label: string;
+}
+
+interface TabRouteBarProps {
+ routes: Pick, "tabHref">;
+ baseTabKey: string;
+ activeKey: string;
+ tabs: readonly TabRouteItem[];
+ className?: string;
+}
+
+export function TabRouteBar({ routes, baseTabKey, activeKey, tabs, className }: TabRouteBarProps) {
+ const router = useRouter();
+
+ const navigate = (href: string) => (event: MouseEvent) => {
+ const commandModifier = event.metaKey || event.ctrlKey;
+ const otherModifier = event.shiftKey || event.altKey;
+ if (commandModifier || otherModifier) {
+ return;
+ }
+ event.preventDefault();
+ router.push(href);
+ };
+
+ return (
+
+
+ {tabs.map(({ key, label }) => {
+ const href = routes.tabHref(key === baseTabKey ? "" : key);
+ return (
+ }>
+ {label}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.test.tsx
index 30e71487609..149a5d6a040 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.test.tsx
@@ -39,7 +39,7 @@ describe("LogsLayout", () => {
};
});
- it("renders the four log tabs and the active tab's page content", () => {
+ it("renders the four tabs and the active tab's page content", () => {
const { getByRole, getByTestId } = renderLayout();
for (const name of ["Request Logs", "Audit Logs", "Deleted Keys", "Deleted Teams"]) {
expect(getByRole("tab", { name })).toBeInTheDocument();
@@ -50,24 +50,13 @@ describe("LogsLayout", () => {
it("marks the base route's Request Logs tab active", () => {
const { getByRole } = renderLayout();
expect(getByRole("tab", { name: "Request Logs" })).toHaveAttribute("aria-selected", "true");
- expect(getByRole("tab", { name: "Audit Logs" })).toHaveAttribute("aria-selected", "false");
});
- it("navigates to a tab's path when its tab is clicked", async () => {
+ it("derives the active tab from a nested pathname", () => {
+ navState.pathname = "/ui/logs/audit";
const { getByRole } = renderLayout();
- await act(async () => {
- getByRole("tab", { name: "Audit Logs" }).click();
- });
- expect(mockPush).toHaveBeenCalledWith(expect.stringMatching(/\/logs\/audit\/$/));
- });
-
- it("routes the base tab back to the logs root (no slug)", async () => {
- navState.pathname = "/logs/audit";
- const { getByRole } = renderLayout();
- await act(async () => {
- getByRole("tab", { name: "Request Logs" }).click();
- });
- expect(mockPush).toHaveBeenCalledWith(expect.stringMatching(/\/logs\/$/));
+ expect(getByRole("tab", { name: "Audit Logs" })).toHaveAttribute("aria-selected", "true");
+ expect(getByRole("tab", { name: "Request Logs" })).toHaveAttribute("aria-selected", "false");
});
it("redirects to the base logs path when the tab slug is unknown", async () => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.tsx
index a31368d6623..58ef88802b5 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/logs/layout.tsx
@@ -1,38 +1,28 @@
"use client";
import type { ReactNode } from "react";
-import { useEffect } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AntDLoadingSpinner } from "@/components/ui/AntDLoadingSpinner";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import { logsTabHref, slugFromPathname, type LogsTabSlug } from "@/app/(dashboard)/logs/tabRoutes";
+import { logsRoutes } from "@/app/(dashboard)/logs/tabRoutes";
+import { useTabRouting } from "@/app/(dashboard)/hooks/useTabRouting";
+import { TabRouteBar } from "@/app/(dashboard)/components/TabRouteBar";
const BASE_TAB_KEY = "request-logs";
-const ORDERED_KEYS: Array<"" | LogsTabSlug> = ["", "audit", "deleted-keys", "deleted-teams"];
-
-const TAB_LABELS: Record<"" | LogsTabSlug, string> = {
- "": "Request Logs",
- audit: "Audit Logs",
- "deleted-keys": "Deleted Keys",
- "deleted-teams": "Deleted Teams",
-};
+const TABS = [
+ { key: BASE_TAB_KEY, label: "Request Logs" },
+ { key: "audit", label: "Audit Logs" },
+ { key: "deleted-keys", label: "Deleted Keys" },
+ { key: "deleted-teams", label: "Deleted Teams" },
+] as const;
export default function LogsLayout({ children }: { children: ReactNode }) {
const { accessToken, token, userRole, userId } = useAuthorized();
- const pathname = usePathname();
- const router = useRouter();
-
- const activeSlug = slugFromPathname(pathname);
- const isKnownSlug = ORDERED_KEYS.some((slug) => slug === activeSlug);
- const activeKey = isKnownSlug ? activeSlug || BASE_TAB_KEY : BASE_TAB_KEY;
-
- useEffect(() => {
- if (activeSlug !== "" && !isKnownSlug) {
- window.location.replace(logsTabHref(""));
- }
- }, [activeSlug, isKnownSlug]);
+ const { activeKey } = useTabRouting({
+ routes: logsRoutes,
+ baseTabKey: BASE_TAB_KEY,
+ visibleKeys: logsRoutes.slugs,
+ });
const hasCredentials = Boolean(accessToken && token);
const hasIdentity = Boolean(userRole && userId);
@@ -47,16 +37,7 @@ export default function LogsLayout({ children }: { children: ReactNode }) {
return (
-
router.push(logsTabHref(key === BASE_TAB_KEY ? "" : key))}>
-
- {ORDERED_KEYS.map((slug) => (
-
- {TAB_LABELS[slug]}
-
- ))}
-
-
-
+
{children}