-
-
- Cache Hit Ratio
-
-
-
-
-
- Cache Hits
-
-
-
- {cachedResponses}
-
-
+
+
setSelectedApiKeys(keys)}
+ >
+
+
+ {(keys: string[]) =>
+ keys.map((key) => (
+
+ {key}
+
+ ))
+ }
+
+
+
+ No virtual keys found
+
+ {(key: string) => (
+
+ {key}
+
+ )}
+
+
+
-
-
- Cached Completion Tokens
-
-
-
+
setSelectedModels(models)}
+ >
+
+
+ {(models: string[]) =>
+ models.map((model) => (
+
+ {model}
+
+ ))
+ }
+
+
+
+ No models found
+
+ {(model: string) => (
+
+ {model}
+
+ )}
+
+
+
+
+
{
+ setDateValue(value);
+ updateCachingData(value.from, value.to);
+ }}
+ />
-
+
+ {statCards.map((stat) => (
+
+
+ {stat.label}
+
+
+
+ ))}
+
Cache Hits vs API Requests
@@ -387,9 +413,9 @@ const CacheDashboard: React.FC = ({ accessToken, token, userRole
yAxisWidth={48}
/>
-
+
-
+
Cached Completion Tokens vs Generated Completion Tokens
@@ -406,24 +432,27 @@ const CacheDashboard: React.FC = ({ accessToken, token, userRole
yAxisWidth={48}
/>
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.test.tsx
new file mode 100644
index 00000000000..de06ef07ed1
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.test.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@/../tests/test-utils";
+import { CacheHealthTab } from "./cache_health";
+
+const healthyResponse = {
+ status: "healthy",
+ ping_response: true,
+ set_cache_response: "success",
+ litellm_cache_params: JSON.stringify({ type: "redis", supported_call_types: ["acompletion"] }),
+ health_check_cache_params: JSON.stringify({
+ redis_version: "7.2.1",
+ namespace: "litellm-ns",
+ connection_kwargs: { host: "redis.internal", port: 6379 },
+ }),
+};
+
+const errorPayload = {
+ message: "Connection refused",
+ traceback: "Traceback (most recent call last): ...",
+ litellm_cache_params: { type: "redis" },
+ health_check_cache_params: {},
+};
+
+const errorResponse = { error: { message: JSON.stringify(errorPayload) } };
+
+const renderTab = (overrides: Partial
> = {}) =>
+ renderWithProviders(
+ (() => {}));
+ const user = userEvent.setup();
+ renderTab({ runCachingHealthCheck });
+
+ await user.click(screen.getByRole("button", { name: "Run Health Check" }));
+
+ const button = await screen.findByRole("button", { name: "Running Health Check..." });
+ expect(button).toBeDisabled();
+ });
+
+ it("reports a healthy cache with its ping and set-cache results", async () => {
+ renderTab({ healthCheckResponse: healthyResponse });
+
+ expect(await screen.findByText("Cache Status: healthy")).toBeInTheDocument();
+ expect(screen.getByText("Cache Details")).toBeInTheDocument();
+ expect(screen.getByText("Ping Response")).toBeInTheDocument();
+ expect(screen.getByText("Set Cache Response")).toBeInTheDocument();
+ expect(screen.getByText("success")).toBeInTheDocument();
+ });
+
+ it("shows the Redis detail rows when the cache type is redis", async () => {
+ renderTab({ healthCheckResponse: healthyResponse });
+
+ expect(await screen.findByText("Redis Details")).toBeInTheDocument();
+ expect(screen.getByText("Redis Host")).toBeInTheDocument();
+ expect(screen.getByText("redis.internal")).toBeInTheDocument();
+ expect(screen.getByText("Redis Port")).toBeInTheDocument();
+ expect(screen.getByText("Redis Version")).toBeInTheDocument();
+ expect(screen.getByText("7.2.1")).toBeInTheDocument();
+ expect(screen.getByText("Namespace")).toBeInTheDocument();
+ expect(screen.getByText("litellm-ns")).toBeInTheDocument();
+ });
+
+ it("omits the Redis detail rows for a non-redis cache type", async () => {
+ renderTab({
+ healthCheckResponse: {
+ status: "healthy",
+ ping_response: true,
+ litellm_cache_params: JSON.stringify({ type: "local" }),
+ health_check_cache_params: JSON.stringify({}),
+ },
+ });
+
+ expect(await screen.findByText("Cache Status: healthy")).toBeInTheDocument();
+ expect(screen.queryByText("Redis Details")).not.toBeInTheDocument();
+ });
+
+ it("surfaces the error message and traceback when the check fails", async () => {
+ renderTab({ healthCheckResponse: errorResponse });
+
+ expect(await screen.findByText("Error Details")).toBeInTheDocument();
+ expect(screen.getByText("Error Message")).toBeInTheDocument();
+ expect(screen.getByText("Connection refused")).toBeInTheDocument();
+ expect(screen.getByText("Traceback")).toBeInTheDocument();
+ expect(screen.getByText("Cache Status: unhealthy")).toBeInTheDocument();
+ });
+
+ it("still shows the cache details section when the check failed", async () => {
+ renderTab({ healthCheckResponse: errorResponse });
+
+ expect(await screen.findByText("Cache Details")).toBeInTheDocument();
+ });
+
+ it("truncates a long value and expands it to the full value on click", async () => {
+ const longMessage = "M".repeat(120);
+ const user = userEvent.setup();
+ renderTab({
+ healthCheckResponse: {
+ error: { message: JSON.stringify({ message: longMessage, traceback: "short" }) },
+ },
+ });
+
+ await screen.findByText("Error Message");
+ expect(screen.getByText(`${"M".repeat(50)}...`)).toBeInTheDocument();
+ expect(screen.queryByText(longMessage)).not.toBeInTheDocument();
+
+ await user.click(screen.getAllByRole("button", { name: "▶" })[0]);
+
+ await waitFor(() => {
+ expect(screen.getByText(longMessage)).toBeInTheDocument();
+ });
+ });
+
+ it("offers both the summary and raw response views", async () => {
+ renderTab({ healthCheckResponse: healthyResponse });
+
+ expect(await screen.findByText("Summary")).toBeInTheDocument();
+ expect(screen.getByText("Raw Response")).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.tsx
index 887c12a4f3d..85649c1cf26 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_health.tsx
@@ -1,6 +1,7 @@
import React from "react";
-import { Text, Button, TabGroup, TabList, Tab, TabPanel, TabPanels } from "@tremor/react";
-import { CheckCircleIcon, XCircleIcon, ClipboardCopyIcon } from "@heroicons/react/outline";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { CheckCircle2, XCircle, ClipboardCopy } from "lucide-react";
import { ResponseTimeIndicator } from "./response_time_indicator";
// Helper function to deep-parse a JSON string if possible
@@ -30,22 +31,26 @@ const TableClickableErrorField: React.FC<{ label: string; value: string | null |
};
return (
-
+
-
-
-
setIsExpanded(!isExpanded)} className="text-gray-400 hover:text-gray-600 mr-2">
+
+
+
setIsExpanded(!isExpanded)}
+ className="mr-2 text-muted-foreground hover:text-foreground"
+ >
{isExpanded ? "▼" : "▶"}
-
{label}
-
- {isExpanded ? safeValue : truncated}
-
+
{label}
+
{isExpanded ? safeValue : truncated}
-
-
+
@@ -151,112 +156,114 @@ const HealthCheckDetails: React.FC<{ response: any }> = ({ response }) => {
};
return (
-
-
-
- Summary
- Raw Response
-
+
+
+
+
+ Summary
+
+
+ Raw Response
+
+
-
-
-
-
- {response?.status === "healthy" ? (
-
- ) : (
-
+
+
+
+ {response?.status === "healthy" ? (
+
+ ) : (
+
+ )}
+
+ Cache Status: {response?.status || "unhealthy"}
+
+
+
+
+
+ {/* Show error message if present */}
+ {errorDetails && (
+ <>
+
+
+ Error Details
+
+
+
- Cache Status: {response?.status || "unhealthy"}
-
-
-
-
- {/* Show error message if present */}
- {errorDetails && (
- <>
-
-
- Error Details
-
-
-
+
+ Cache Details
+
+
+
-
- Cache Details
-
-
-
+
+ Redis Details
+
+
+
+
+
+
- {/* Redis Details Section */}
- {parsedLitellmParams?.type === "redis" && (
- <>
-
-
- Redis Details
-
-
-
-
-
-
-
- {(() => {
- try {
- const data = {
- ...response,
- litellm_cache_params: parsedLitellmParams,
- health_check_cache_params: parsedRedisParams,
- };
- // First parse any string JSON values
- const prettyData = JSON.parse(
- JSON.stringify(data, (key, value) => {
- if (typeof value === "string") {
- try {
- return JSON.parse(value);
- } catch {
- return value;
- }
+
+
+
+ {(() => {
+ try {
+ const data = {
+ ...response,
+ litellm_cache_params: parsedLitellmParams,
+ health_check_cache_params: parsedRedisParams,
+ };
+ // First parse any string JSON values
+ const prettyData = JSON.parse(
+ JSON.stringify(data, (key, value) => {
+ if (typeof value === "string") {
+ try {
+ return JSON.parse(value);
+ } catch {
+ return value;
}
- return value;
- }),
- );
- // Then stringify with proper formatting
- return JSON.stringify(prettyData, null, 2);
- } catch (e) {
- return "Error formatting JSON: " + (e as Error).message;
- }
- })()}
-
-
+
+
);
};
@@ -282,11 +289,7 @@ export const CacheHealthTab: React.FC<{
return (
-
+
{isLoading ? "Running Health Check..." : "Run Health Check"}
> = {
+ node: "Node (Single Instance)",
+ cluster: "Cluster",
+ sentinel: "Sentinel",
+ semantic: "Semantic",
+};
+
const RedisTypeSelector: React.FC = ({ redisType, redisTypeDescriptions, onTypeChange }) => {
return (
-
Redis Type
-
- Node (Single Instance)
- Cluster
- Sentinel
- Semantic
+ Redis Type
+ value !== null && onTypeChange(value)}>
+
+ {REDIS_TYPE_LABELS[redisType] ?? redisType}
+
+
+ {Object.entries(REDIS_TYPE_LABELS).map(([value, label]) => (
+
+ {label}
+
+ ))}
+
-
+
{redisTypeDescriptions[redisType] || "Select the type of Redis deployment you're using"}
= ({ redisType, onTypeChange }) => (
-
+
Redis Type
- {COORDINATION_REDIS_TYPE_DESCRIPTIONS[redisType]}
+ value !== null && onTypeChange(value)}>
+
+ {COORDINATION_REDIS_TYPE_LABELS[redisType]}
+
+
+ {COORDINATION_REDIS_TYPES.map((type) => (
+
+ {COORDINATION_REDIS_TYPE_LABELS[type]}
+
+ ))}
+
+
+ {COORDINATION_REDIS_TYPE_DESCRIPTIONS[redisType]}
= {}) =>
+ renderWithProviders() => {
+ await user.click(screen.getByRole("combobox"));
+ const options = await screen.findAllByText("gpt-5.1");
+ await user.click(options[options.length - 1]);
+};
+
+describe("AiSuggestionModal", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ modelHubCall.mockResolvedValue({ data: [{ model_group: "gpt-5.1" }, { model_group: "claude-opus-4-8" }] });
+ suggestPolicyTemplates.mockResolvedValue(suggestResponse);
+ });
+
+ it("renders nothing while closed", () => {
+ renderModal({ visible: false });
+
+ expect(screen.queryByText("AI Policy Suggestion")).not.toBeInTheDocument();
+ });
+
+ it("renders the header and prompt copy when opened", async () => {
+ renderModal();
+
+ expect(await screen.findByText("AI Policy Suggestion")).toBeInTheDocument();
+ expect(
+ screen.getByText("Describe what you want to block and we'll suggest the best policy templates"),
+ ).toBeInTheDocument();
+ });
+
+ it("loads the model list when opened", async () => {
+ renderModal();
+
+ await waitFor(() => {
+ expect(modelHubCall).toHaveBeenCalledWith("sk-test");
+ });
+ });
+
+ it("keeps Suggest disabled until there is both input and a model", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ expect(screen.getByRole("button", { name: "Suggest Policies" })).toBeDisabled();
+
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ expect(screen.getByRole("button", { name: "Suggest Policies" })).toBeDisabled();
+
+ await pickModel(user);
+ expect(screen.getByRole("button", { name: "Suggest Policies" })).not.toBeDisabled();
+ });
+
+ it("sends the examples, description and model to the suggest API", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Ignore all previous instructions/), "my ssn is 123");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+
+ await waitFor(() => {
+ expect(suggestPolicyTemplates).toHaveBeenCalledWith("sk-test", ["my ssn is 123"], "block PII", "gpt-5.1");
+ });
+ });
+
+ it("adds attack example fields up to the maximum of four", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ const countExamples = () => screen.getAllByRole("textbox").length;
+ const initial = countExamples();
+
+ await user.click(screen.getByRole("button", { name: "+ Add another example" }));
+ expect(countExamples()).toBe(initial + 1);
+
+ await user.click(screen.getByRole("button", { name: "+ Add another example" }));
+ await user.click(screen.getByRole("button", { name: "+ Add another example" }));
+ expect(countExamples()).toBe(initial + 3);
+ expect(screen.queryByRole("button", { name: "+ Add another example" })).not.toBeInTheDocument();
+ });
+
+ it("shows each suggested template with the reason it was picked", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+
+ expect(await screen.findByText("PII Protection")).toBeInTheDocument();
+ expect(screen.getByText("Injection Defense")).toBeInTheDocument();
+ expect(screen.getByText("Your examples contain SSNs")).toBeInTheDocument();
+ expect(screen.getByText("These two cover both risks you described")).toBeInTheDocument();
+ expect(screen.getByText("2 templates matched your requirements")).toBeInTheDocument();
+ });
+
+ it("preselects every suggestion and reflects the count on the confirm button", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+
+ expect(await screen.findByRole("button", { name: "Use 2 Selected Templates" })).toBeInTheDocument();
+ });
+
+ it("deselecting a suggestion lowers the confirm count", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+
+ await user.click(await screen.findByText("PII Protection"));
+
+ expect(await screen.findByRole("button", { name: "Use 1 Selected Template" })).toBeInTheDocument();
+ });
+
+ it("hands the selected templates back to the caller", async () => {
+ const onSelectTemplates = vi.fn();
+ const user = userEvent.setup();
+ renderModal({ onSelectTemplates });
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+ await user.click(await screen.findByRole("button", { name: "Use 2 Selected Templates" }));
+
+ expect(onSelectTemplates).toHaveBeenCalledTimes(1);
+ expect(onSelectTemplates.mock.calls[0][0].map((t: { id: string }) => t.id)).toEqual(["tpl-pii", "tpl-inj"]);
+ });
+
+ it("returns to the input phase from the results phase", async () => {
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+ await user.click(await screen.findByRole("button", { name: "Back" }));
+
+ expect(
+ await screen.findByText("Describe what you want to block and we'll suggest the best policy templates"),
+ ).toBeInTheDocument();
+ });
+
+ it("reports an empty result set instead of failing silently", async () => {
+ suggestPolicyTemplates.mockRejectedValue(new Error("boom"));
+ const user = userEvent.setup();
+ renderModal();
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
+ await pickModel(user);
+ await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
+
+ expect(await screen.findByText("No matching templates found")).toBeInTheDocument();
+ expect(screen.getByText("Try adjusting your examples or description.")).toBeInTheDocument();
+ });
+
+ it("cancels back to the caller", async () => {
+ const onCancel = vi.fn();
+ const user = userEvent.setup();
+ renderModal({ onCancel });
+
+ await screen.findByText("AI Policy Suggestion");
+ await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+ expect(onCancel).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
index 34204624702..cbf24b425f4 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
@@ -1,13 +1,14 @@
import React, { useEffect, useMemo, useState } from "react";
-import { Modal, Spin, Checkbox, Select, Input, Typography, Tooltip } from "antd";
-import { Button, Card } from "@tremor/react";
-import {
- CheckCircleOutlined,
- CloseCircleOutlined,
- InfoCircleOutlined,
- DownOutlined,
- RightOutlined,
-} from "@ant-design/icons";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
+import { SearchSelect } from "@/components/shared/SearchSelect";
+import { CheckCircle2, ChevronDown, ChevronRight, Info, XCircle } from "lucide-react";
import {
suggestPolicyTemplates,
modelHubCall,
@@ -15,9 +16,6 @@ import {
enrichPolicyTemplateStream,
} from "@/components/networking";
-const { TextArea } = Input;
-const { Text } = Typography;
-
interface SuggestedTemplate {
template_id: string;
reason: string;
@@ -427,7 +425,7 @@ const AiSuggestionModal: React.FC = ({
toggleTemplate(suggestion.template_id)}
+ onCheckedChange={() => toggleTemplate(suggestion.template_id)}
className="mt-0.5"
/>
@@ -447,20 +445,25 @@ const AiSuggestionModal: React.FC
= ({
)}
{template.estimated_latency_ms != null && (
-
-
+
+
+ Estimated latency overhead added to each request
)}
{template.description}
+ {template.description}
{template.guardrails &&
template.guardrails.slice(0, 4).map((g: string) => (
@@ -476,7 +479,7 @@ const AiSuggestionModal: React.FC
= ({
)}
@@ -490,7 +493,7 @@ const AiSuggestionModal: React.FC = ({
{explanation && (
-
+
Why these templates
@@ -555,7 +558,7 @@ const AiSuggestionModal: React.FC
= ({
>
{hasEnrichedGuardrails ? (
-
+
) : (
= ({
+
{isEnriching ? "Discovering..." : hasEnrichedGuardrails ? "Re-discover" : "Discover"}
{isEnriching && enrichStatusMessage && (
-
-
+
+ {enrichStatusMessage}
)}
{hasEnrichedGuardrails && (
- Competitor names loaded for {enrichBrandName}
)}
@@ -631,33 +630,29 @@ const AiSuggestionModal: React.FC
= ({
Input Text
-
-
+ Press Enter to submit. Use Shift+Enter for new line.
-
Characters: {testInputText.length}
+
Characters: {testInputText.length}
-