- {/* Step indicator */}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
+
- {/* Footer navigation */}
-
-
- {currentStep > 0 && currentStep < 4 && (
-
- )}
-
-
- {currentStep < 4 && (
-
- )}
- {currentStep === 0 && (
-
- )}
- {currentStep === 1 && (
-
- )}
- {currentStep === 2 && (
-
- )}
- {currentStep === 3 && (
-
- )}
- {currentStep === 4 && (
-
- )}
+
+
+ {currentStep > 0 && currentStep < 4 && (
+
+ ← Back
+
+ )}
+
+
+ {currentStep < 4 && (
+
+ )}
+ {currentStep < 3 && (
+
+ )}
+ {currentStep === 3 && (
+
+ )}
+ {currentStep === 4 && (
+
+ )}
+
-
+
);
};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_form_fields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_form_fields.tsx
index ff103218346..243da085cb7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_form_fields.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_form_fields.tsx
@@ -1,266 +1,400 @@
import React from "react";
-import { Form, Input, Switch, Collapse, Select, Space, Tooltip } from "antd";
-import { Button as AntButton } from "antd";
-import { PlusOutlined, MinusCircleOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Field, FieldGroup, FieldTitle } from "@/components/shared/form/field";
import { AGENT_FORM_CONFIG, SKILL_FIELD_CONFIG } from "./agent_config";
+import CostConfigFields, { COST_FIELD_NAMES } from "./cost_config_fields";
+import {
+ AgentFormField,
+ AgentFormPanel,
+ AgentFormValues,
+ AgentTagsInput,
+ CollapsiblePanelsState,
+ labelWithHint,
+} from "./AgentFormKit";
-import CostConfigFields from "./cost_config_fields";
+const AUTH_HEADERS_PANEL_KEY = "auth_headers";
-const { Panel } = Collapse;
+const namesOf = (fields: readonly { name: string }[]): readonly string[] => fields.map((field) => field.name);
+
+export const A2A_PANEL_FIELD_NAMES: Readonly
> = {
+ [AGENT_FORM_CONFIG.basic.key]: namesOf(AGENT_FORM_CONFIG.basic.fields),
+ [AGENT_FORM_CONFIG.skills.key]: ["skills"],
+ [AGENT_FORM_CONFIG.capabilities.key]: namesOf(AGENT_FORM_CONFIG.capabilities.fields),
+ [AGENT_FORM_CONFIG.optional.key]: namesOf(AGENT_FORM_CONFIG.optional.fields),
+ [AGENT_FORM_CONFIG.cost.key]: COST_FIELD_NAMES,
+ [AGENT_FORM_CONFIG.litellm.key]: namesOf(AGENT_FORM_CONFIG.litellm.fields),
+ [AUTH_HEADERS_PANEL_KEY]: ["static_headers", "extra_headers"],
+};
+
+export const unmountedA2AFieldNames = (mountedPanels: readonly string[]): readonly string[] =>
+ Object.entries(A2A_PANEL_FIELD_NAMES)
+ .filter(([panelKey]) => !mountedPanels.includes(panelKey))
+ .flatMap(([, fieldNames]) => fieldNames);
interface AgentFormFieldsProps {
+ panels: CollapsiblePanelsState;
showAgentName?: boolean;
visiblePanels?: string[];
}
-/**
- * Reusable form fields component for agent forms
- * Uses shared configuration from agent_config.ts
- */
-const AgentFormFields: React.FC = ({ showAgentName = true, visiblePanels }) => {
+const SkillsFieldArray = () => {
+ const { control } = useFormContext();
+ const { fields, append, remove } = useFieldArray({ control, name: "skills" });
+
+ return (
+ <>
+ {fields.map((item, index) => (
+
+
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+
+
+ {({ id, value, onChange }) => (
+
+ )}
+
+
+
+ {({ id, value, onChange }) => (
+
+ )}
+
+
+
+
+
{shouldShow(AGENT_FORM_CONFIG.basic.key) && (
-
+
{AGENT_FORM_CONFIG.basic.fields.map((field) => (
-
- {field.type === "textarea" ? (
-
- ) : field.type === "select" ? (
-
- ) : (
-
- )}
-
+ {({ value, onChange, ref, ...control }) => {
+ const text = typeof value === "string" ? value : "";
+ if (field.type === "textarea") {
+ return (
+
+ );
+ }
+ if (field.type === "select") {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }}
+
))}
-
+
)}
- {/* Skills */}
{shouldShow(AGENT_FORM_CONFIG.skills.key) && (
-
-
- {(fields, { add, remove }) => (
- <>
- {fields.map((field) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
remove(field.name)} icon={}>
- Remove Skill
-
-
+
+
+
)}
- {/* Capabilities */}
{shouldShow(AGENT_FORM_CONFIG.capabilities.key) && (
-
+
{AGENT_FORM_CONFIG.capabilities.fields.map((field) => (
-
-
-
- ))}
-
- )}
-
- {/* Optional Settings */}
- {shouldShow(AGENT_FORM_CONFIG.optional.key) && (
-
- {AGENT_FORM_CONFIG.optional.fields.map((field) => (
-
- {field.type === "switch" ? : }
-
- ))}
-
- )}
-
- {/* Cost Configuration */}
- {shouldShow(AGENT_FORM_CONFIG.cost.key) && (
-
-
-
- )}
-
- {/* LiteLLM Parameters */}
- {shouldShow(AGENT_FORM_CONFIG.litellm.key) && (
-
- {AGENT_FORM_CONFIG.litellm.fields.map((field) => (
-
- {field.type === "switch" ? : }
-
- ))}
-
- )}
-
- {/* Authentication Headers */}
- {shouldShow("auth_headers") && (
-
- {/* Static Headers */}
-
- Static Headers{" "}
-
-
-
-
- }
- >
-
- {(fields, { add, remove }) => (
- <>
- {fields.map(({ key, name, ...restField }) => (
-
-
-
-
-
-
-
- remove(name)} style={{ color: "#ff4d4f" }} />
-
- ))}
- add()} icon={} style={{ width: "100%" }}>
- Add Static Header
-
-
+
+ {({ value, onChange, ref, ...control }) => (
+
)}
-
-
-
- {/* Extra Headers (dynamic forwarding) */}
-
- Forward Client Headers{" "}
-
-
-
-
- }
- name="extra_headers"
- >
-
-
-
+
+ ))}
+
)}
-
+
+ {shouldShow(AGENT_FORM_CONFIG.optional.key) && (
+
+ {AGENT_FORM_CONFIG.optional.fields.map((field) => (
+
+ {({ value, onChange, ref, ...control }) =>
+ field.type === "switch" ? (
+
+ ) : (
+
+ )
+ }
+
+ ))}
+
+ )}
+
+ {shouldShow(AGENT_FORM_CONFIG.cost.key) && (
+
+
+
+ )}
+
+ {shouldShow(AGENT_FORM_CONFIG.litellm.key) && (
+
+ {AGENT_FORM_CONFIG.litellm.fields.map((field) => (
+
+ {({ value, onChange, ref, ...control }) =>
+ field.type === "switch" ? (
+
+ ) : (
+
+ )
+ }
+
+ ))}
+
+ )}
+
+ {shouldShow(AUTH_HEADERS_PANEL_KEY) && (
+
+
+
+ {labelWithHint(
+ "Static Headers",
+ "Headers always sent to the backend agent, regardless of the client request. Admin-configured, static wins on conflict.",
+ )}
+
+
+
+
+
+
+
+ {({ id, value, onChange }) => (
+
+ )}
+
+
+ )}
+
) : (
Click "Edit Settings" to modify agent configuration.
)}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/cost_config_fields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/cost_config_fields.tsx
index 6f31aac6530..192a23ba578 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/cost_config_fields.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/cost_config_fields.tsx
@@ -1,17 +1,32 @@
import React from "react";
-import { Form, Input } from "antd";
+import { Input } from "@/components/ui/input";
import { AGENT_FORM_CONFIG } from "./agent_config";
+import { AgentFormField, labelWithHint } from "./AgentFormKit";
-const CostConfigFields: React.FC = () => {
- return (
- <>
- {AGENT_FORM_CONFIG.cost.fields.map((field) => (
-
-
-
- ))}
-
- );
-};
+export const COST_FIELD_NAMES: readonly string[] = AGENT_FORM_CONFIG.cost.fields.map((field) => field.name);
+
+const CostConfigFields: React.FC = () => (
+ <>
+ {AGENT_FORM_CONFIG.cost.fields.map((field) => (
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+ ))}
+
+);
export default CostConfigFields;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx
index 435e628bfc0..85d066f4233 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/dynamic_agent_form_fields.tsx
@@ -1,83 +1,135 @@
import React from "react";
-import { Form, Input, Select, Collapse } from "antd";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { FieldGroup } from "@/components/shared/form/field";
import { AgentCreateInfo, AgentCredentialFieldMetadata } from "@/components/networking";
+import { PasswordInput } from "@/components/shared/PasswordInput";
import { AGENT_FORM_CONFIG } from "./agent_config";
-import CostConfigFields from "./cost_config_fields";
-
-const { Panel } = Collapse;
+import CostConfigFields, { COST_FIELD_NAMES } from "./cost_config_fields";
+import {
+ AgentFormField,
+ AgentFormPanel,
+ AgentRequestPayload,
+ AgentFormValues,
+ CollapsiblePanelsState,
+ labelWithHint,
+} from "./AgentFormKit";
interface DynamicAgentFormFieldsProps {
agentTypeInfo: AgentCreateInfo;
+ panels: CollapsiblePanelsState;
}
-/**
- * Form fields for dynamic agent types (e.g., LangGraph).
- * Renders common fields (agent name, display name, description) plus
- * credential fields defined by the agent type metadata.
- */
-const DynamicAgentFormFields: React.FC
= ({ agentTypeInfo }) => {
- return (
- <>
-
-
-
+export const unmountedDynamicFieldNames = (mountedPanels: readonly string[]): readonly string[] =>
+ mountedPanels.includes(AGENT_FORM_CONFIG.cost.key) ? [] : COST_FIELD_NAMES;
-
-
-
-
- {agentTypeInfo.credential_fields.map((field: AgentCredentialFieldMetadata) => (
-
- {field.field_type === "password" ? (
-
- ) : field.field_type === "textarea" ? (
-
- ) : field.field_type === "select" && field.options ? (
-
+
+
+ );
+ }
+ return ;
+ }}
+
+);
+
+const DynamicAgentFormFields: React.FC = ({ agentTypeInfo, panels }) => (
+ <>
+
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+
+
+ {({ value, onChange, ref, ...control }) => (
+
+ )}
+
+
+ {agentTypeInfo.credential_fields.map((field) => (
+
))}
+
-
-
-
-
-
-
- );
-};
+
+
+);
-/**
- * Builds agent data from form values for dynamic agent types.
- * Uses configuration from agentTypeInfo to determine which fields to include.
- */
-export const buildDynamicAgentData = (values: any, agentTypeInfo: AgentCreateInfo) => {
- // Build litellm_params from template
- const litellmParams: Record = {
+export const buildDynamicAgentData = (values: AgentFormValues, agentTypeInfo: AgentCreateInfo): AgentRequestPayload => {
+ const litellmParams: Record = {
...(agentTypeInfo.litellm_params_template || {}),
};
- // Add credential fields marked with include_in_litellm_params
for (const field of agentTypeInfo.credential_fields) {
const value = values[field.key];
if (value && field.include_in_litellm_params !== false) {
@@ -85,31 +137,25 @@ export const buildDynamicAgentData = (values: any, agentTypeInfo: AgentCreateInf
}
}
- // Add cost configuration
if (values.cost_per_query) {
- litellmParams.cost_per_query = parseFloat(values.cost_per_query);
+ litellmParams.cost_per_query = parseFloat(String(values.cost_per_query));
}
if (values.input_cost_per_token) {
- litellmParams.input_cost_per_token = parseFloat(values.input_cost_per_token);
+ litellmParams.input_cost_per_token = parseFloat(String(values.input_cost_per_token));
}
if (values.output_cost_per_token) {
- litellmParams.output_cost_per_token = parseFloat(values.output_cost_per_token);
+ litellmParams.output_cost_per_token = parseFloat(String(values.output_cost_per_token));
}
- // Apply model_template if defined (e.g., "bedrock/agentcore/{agent_runtime_arn}")
if (agentTypeInfo.model_template) {
- let model = agentTypeInfo.model_template;
- // Replace {field_key} placeholders with actual values
- for (const field of agentTypeInfo.credential_fields) {
+ litellmParams.model = agentTypeInfo.credential_fields.reduce((model, field) => {
const placeholder = `{${field.key}}`;
- if (model.includes(placeholder) && values[field.key]) {
- model = model.replace(placeholder, values[field.key]);
- }
- }
- litellmParams.model = model;
+ const value = values[field.key];
+ return model.includes(placeholder) && value ? model.replace(placeholder, String(value)) : model;
+ }, agentTypeInfo.model_template);
}
- const agentData: Record = {
+ const agentData: AgentRequestPayload = {
agent_name: values.agent_name,
agent_card_params: {
protocolVersion: "1.0",
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx
index efdd4c479ee..62c456b1b38 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx
@@ -1,7 +1,7 @@
import type { DateRangePickerValue } from "@/components/shared/date_picker_types";
import React, { useEffect, useState } from "react";
import { toast } from "@/lib/toast";
-import UsageDatePicker from "@/components/shared/usage_date_picker";
+import AdvancedDatePicker from "@/components/shared/advanced_date_picker";
import { BarChart } from "@/components/shared/charts";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -190,7 +190,7 @@ const CacheDashboard: React.FC = ({ accessToken, token, userRole
Metrics" on the Usage page or individual requests in the Logs page.
-
+
= ({ accessToken, token, userRole
-
{
setDateValue(value);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFieldSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFieldSection.tsx
index 96106869009..93ddc682134 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFieldSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFieldSection.tsx
@@ -31,7 +31,7 @@ const CacheFieldSection: React.FC = ({
return (
-
{title}
+
{title}
{fields.map((field) => (
{
- switch (field.type) {
- case "boolean":
- return ;
- case "password":
- return ;
- case "integer":
- case "float":
- return ;
- case "list":
- return ;
- case "model-select":
- return (
-
- );
- default:
- return ;
- }
+const CacheFormField: React.FC = ({ field, embeddingModels, isSecretConfigured = false }) => {
+ const form = useFormContext();
+ const placeholder = isSecretConfigured ? SECRET_ALREADY_SET_PLACEHOLDER : field.helpText;
+
+ return (
+
+ {({ ref, value, onChange, ...rest }) => {
+ if (field.type === "boolean") {
+ return onChange(checked)} />;
+ }
+ if (field.type === "password") {
+ return (
+
+ );
+ }
+ if (field.type === "list") {
+ return (
+
+ );
+ }
+ if (field.type === "model-select") {
+ const selected = embeddingModels.find((model) => model.value === value) ?? null;
+ return (
+ onChange(model?.value ?? "")}
+ itemToStringLabel={(model: EmbeddingModelOption) => model.label}
+ isItemEqualToValue={(model: EmbeddingModelOption, other: EmbeddingModelOption) =>
+ model.value === other.value
+ }
+ >
+
+
+
+
+ No models found
+
+ {(model: EmbeddingModelOption) => (
+
+ {model.label}
+
+ )}
+
+
+
+ );
+ }
+ return (
+
+ );
+ }}
+
+ );
};
-const CacheFormField: React.FC = ({ field, embeddingModels, isSecretConfigured = false }) => (
-
- {renderControl(field, embeddingModels, isSecretConfigured ? SECRET_ALREADY_SET_PLACEHOLDER : field.helpText)}
-
-);
-
export default CacheFormField;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsFields.ts b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsFields.ts
index e33b525c3ef..04dd6ff6038 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsFields.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsFields.ts
@@ -1,12 +1,10 @@
-import type { FormItemProps } from "antd";
-
export type CacheFieldType = "string" | "password" | "integer" | "float" | "boolean" | "list" | "model-select";
export type RedisType = "node" | "cluster" | "sentinel" | "semantic";
export type CacheSection = "connection" | "cluster" | "sentinel" | "semantic" | "ssl" | "cacheManagement" | "gcp";
-export type CacheFieldRule = NonNullable[number];
+export type CacheFieldRule = (value: unknown) => string | null;
// Marker the backend returns for a configured credential and maps back to the
// stored secret on save, so the plaintext never round-trips through the form.
@@ -35,60 +33,42 @@ export const REDIS_TYPE_DESCRIPTIONS: Readonly> = {
semantic: "Semantic caching that reuses responses for similar prompts",
};
-const portRule: CacheFieldRule = {
- validator: (_rule, value) => {
- if (value === undefined || value === null || String(value).trim() === "") {
- return Promise.resolve();
- }
- const port = Number(value);
- if (!Number.isInteger(port) || port < 1 || port > 65535) {
- return Promise.reject(new Error("Port must be an integer between 1 and 65535"));
- }
- return Promise.resolve();
- },
+const isBlank = (value: unknown): boolean => value === undefined || value === null || String(value).trim() === "";
+
+const portRule: CacheFieldRule = (value) => {
+ if (isBlank(value)) {
+ return null;
+ }
+ const port = Number(value);
+ return Number.isInteger(port) && port >= 1 && port <= 65535 ? null : "Port must be an integer between 1 and 65535";
};
-const jsonListRule: CacheFieldRule = {
- validator: (_rule, value) => {
- if (value === undefined || value === null || String(value).trim() === "") {
- return Promise.resolve();
- }
- let parsed: unknown;
- try {
- parsed = JSON.parse(String(value));
- } catch {
- return Promise.reject(new Error("Must be a valid JSON array (use double quotes)"));
- }
- if (!Array.isArray(parsed)) {
- return Promise.reject(new Error("Must be a JSON array"));
- }
- return Promise.resolve();
- },
+const jsonListRule: CacheFieldRule = (value) => {
+ if (isBlank(value)) {
+ return null;
+ }
+ let parsed: unknown;
+ try {
+ parsed = JSON.parse(String(value));
+ } catch {
+ return "Must be a valid JSON array (use double quotes)";
+ }
+ return Array.isArray(parsed) ? null : "Must be a JSON array";
};
-const nonNegativeIntegerRule: CacheFieldRule = {
- validator: (_rule, value) => {
- if (value === undefined || value === null || String(value).trim() === "") {
- return Promise.resolve();
- }
- const parsed = Number(value);
- if (!Number.isInteger(parsed) || parsed < 0) {
- return Promise.reject(new Error("Must be a non-negative integer"));
- }
- return Promise.resolve();
- },
+const nonNegativeIntegerRule: CacheFieldRule = (value) => {
+ if (isBlank(value)) {
+ return null;
+ }
+ const parsed = Number(value);
+ return Number.isInteger(parsed) && parsed >= 0 ? null : "Must be a non-negative integer";
};
-const numberRule: CacheFieldRule = {
- validator: (_rule, value) => {
- if (value === undefined || value === null || String(value).trim() === "") {
- return Promise.resolve();
- }
- if (Number.isNaN(Number(value))) {
- return Promise.reject(new Error("Must be a number"));
- }
- return Promise.resolve();
- },
+const numberRule: CacheFieldRule = (value) => {
+ if (isBlank(value)) {
+ return null;
+ }
+ return Number.isNaN(Number(value)) ? "Must be a number" : null;
};
export const CACHE_FIELDS: readonly CacheField[] = [
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx
new file mode 100644
index 00000000000..8029dff0c9e
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx
@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import CacheSettings from "./index";
+
+const { getCacheSettingsCall, testCacheConnectionCall, updateCacheSettingsCall } = vi.hoisted(() => ({
+ getCacheSettingsCall: vi.fn(),
+ testCacheConnectionCall: vi.fn(),
+ updateCacheSettingsCall: vi.fn(),
+}));
+
+vi.mock("@/components/networking", () => ({
+ getCacheSettingsCall,
+ testCacheConnectionCall,
+ updateCacheSettingsCall,
+}));
+
+vi.mock("@/components/llm_calls/fetch_models", () => ({
+ fetchAvailableModels: vi.fn().mockResolvedValue([]),
+}));
+
+const LOADED_WITH_ADVANCED = {
+ current_values: {
+ host: "redis.internal",
+ namespace: "prod-ns",
+ ttl: "300",
+ max_connections: "50",
+ ssl: true,
+ },
+};
+
+const renderSettings = () => render();
+
+const save = async (user: ReturnType) =>
+ user.click(screen.getByRole("button", { name: /save changes/i }));
+
+describe("CacheSettings advanced settings round-trip", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ getCacheSettingsCall.mockResolvedValue(LOADED_WITH_ADVANCED);
+ updateCacheSettingsCall.mockResolvedValue({ status: "success" });
+ testCacheConnectionCall.mockResolvedValue({ status: "success" });
+ });
+
+ it("keeps loaded advanced values in the payload when the section is never opened", async () => {
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+
+ expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument();
+ await save(user);
+
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1));
+ expect(updateCacheSettingsCall.mock.calls[0][1]).toEqual({
+ type: "redis",
+ host: "redis.internal",
+ port: "6379",
+ ssl: true,
+ ssl_check_hostname: false,
+ namespace: "prod-ns",
+ ttl: 300,
+ max_connections: 50,
+ });
+ });
+
+ it("reveals the advanced field sections only after the user expands them", async () => {
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+ expect(screen.queryByText("SSL Settings")).not.toBeInTheDocument();
+
+ await user.click(screen.getByRole("button", { name: "Advanced Settings" }));
+
+ expect(await screen.findByText("SSL Settings")).toBeInTheDocument();
+ expect(screen.getByText("Cache Management")).toBeInTheDocument();
+ expect(screen.getByText("GCP Authentication")).toBeInTheDocument();
+ });
+
+ it("sends the same payload whether or not the advanced section was expanded", async () => {
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+ await save(user);
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1));
+ const whileCollapsed = updateCacheSettingsCall.mock.calls[0][1];
+
+ await user.click(screen.getByText("Advanced Settings"));
+ await screen.findByLabelText("Namespace");
+ await save(user);
+
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(2));
+ expect(updateCacheSettingsCall.mock.calls[1][1]).toEqual(whileCollapsed);
+ });
+
+ it("preserves a value typed into the advanced section after it is collapsed again", async () => {
+ getCacheSettingsCall.mockResolvedValue({ current_values: { host: "redis.internal" } });
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+
+ await user.click(screen.getByText("Advanced Settings"));
+ await user.type(await screen.findByLabelText("Namespace"), "typed-ns");
+ await user.click(screen.getByText("Advanced Settings"));
+ await waitFor(() => expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument());
+
+ await save(user);
+
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1));
+ expect(updateCacheSettingsCall.mock.calls[0][1]).toMatchObject({ namespace: "typed-ns" });
+ });
+
+ it("restores a value typed into the advanced section when it is expanded again", async () => {
+ getCacheSettingsCall.mockResolvedValue({ current_values: { host: "redis.internal" } });
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+
+ await user.click(screen.getByText("Advanced Settings"));
+ await user.type(await screen.findByLabelText("Namespace"), "typed-ns");
+ await user.click(screen.getByText("Advanced Settings"));
+ await waitFor(() => expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument());
+ await user.click(screen.getByText("Advanced Settings"));
+
+ expect(await screen.findByLabelText("Namespace")).toHaveValue("typed-ns");
+ });
+
+ it("keeps a hidden section's fields out of the payload when the redis type does not use them", async () => {
+ getCacheSettingsCall.mockResolvedValue({
+ current_values: { redis_type: "sentinel", service_name: "mymaster", host: "redis.internal" },
+ });
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByLabelText("Service Name");
+ await save(user);
+
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1));
+ expect(updateCacheSettingsCall.mock.calls[0][1]).toMatchObject({ service_name: "mymaster" });
+ expect(updateCacheSettingsCall.mock.calls[0][1]).not.toHaveProperty("redis_startup_nodes");
+ });
+
+ it("does not block the save on a malformed value inside a collapsed advanced section", async () => {
+ getCacheSettingsCall.mockResolvedValue({ current_values: { host: "redis.internal" } });
+ const user = userEvent.setup();
+ renderSettings();
+ await screen.findByText("Connection Settings");
+
+ await user.click(screen.getByText("Advanced Settings"));
+ await user.type(await screen.findByLabelText("TTL (seconds)"), "not-a-number");
+ await user.click(screen.getByText("Advanced Settings"));
+ await waitFor(() => expect(screen.queryByLabelText("TTL (seconds)")).not.toBeInTheDocument());
+
+ await save(user);
+
+ await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1));
+ expect(updateCacheSettingsCall.mock.calls[0][1]).not.toHaveProperty("ttl");
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.tsx
index ad3341bc171..d26cc1b40f8 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.tsx
@@ -1,14 +1,24 @@
import React, { useState, useEffect, useCallback } from "react";
-import { Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react";
-import { Form } from "antd";
+import { ChevronRight } from "lucide-react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { getCacheSettingsCall, testCacheConnectionCall, updateCacheSettingsCall } from "@/components/networking";
import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
import { toast } from "@/lib/toast";
import RedisTypeSelector from "./RedisTypeSelector";
import CacheFieldSection from "./CacheFieldSection";
import { EmbeddingModelOption } from "./CacheFormField";
-import { REDIS_TYPES, REDIS_TYPE_DESCRIPTIONS, RedisType } from "./cacheSettingsFields";
-import { buildCachePayload, buildInitialValues, CacheFormValues, configuredSecretFields } from "./cacheSettingsUtils";
+import { CACHE_FIELDS, REDIS_TYPES, REDIS_TYPE_DESCRIPTIONS, RedisType } from "./cacheSettingsFields";
+import {
+ buildCachePayload,
+ buildInitialValues,
+ CacheFormValues,
+ configuredSecretFields,
+ isFieldVisible,
+} from "./cacheSettingsUtils";
+
+const ADVANCED_SECTIONS = ["ssl", "cacheManagement", "gcp"] as const;
interface CacheSettingsProps {
accessToken: string | null;
@@ -20,8 +30,9 @@ const toRedisType = (value: unknown): RedisType =>
REDIS_TYPES.includes(value as RedisType) ? (value as RedisType) : "node";
const CacheSettings: React.FC = ({ accessToken }) => {
- const [form] = Form.useForm();
+ const form = useForm({ defaultValues: buildInitialValues({}) });
const [redisType, setRedisType] = useState("node");
+ const [advancedOpen, setAdvancedOpen] = useState(false);
const [embeddingModels, setEmbeddingModels] = useState([]);
const [isTesting, setIsTesting] = useState(false);
const [isSaving, setIsSaving] = useState(false);
@@ -34,7 +45,7 @@ const CacheSettings: React.FC = ({ accessToken }) => {
try {
const data = (await getCacheSettingsCall(accessToken)) as { current_values?: Record };
const currentValues = data.current_values ?? {};
- form.setFieldsValue(buildInitialValues(currentValues));
+ form.reset(buildInitialValues(currentValues));
setConfiguredSecrets(configuredSecretFields(currentValues));
setRedisType(toRedisType(currentValues.redis_type));
} catch (error) {
@@ -62,19 +73,27 @@ const CacheSettings: React.FC = ({ accessToken }) => {
.catch((error) => console.error("Error fetching embedding models:", error));
}, [accessToken]);
- const validate = async (): Promise => {
- try {
- return await form.validateFields();
- } catch {
- return null;
- }
+ const validate = (): CacheFormValues | null => {
+ const values = form.getValues();
+ const failures = CACHE_FIELDS.filter(
+ (field) =>
+ isFieldVisible(field, redisType) &&
+ (advancedOpen || !ADVANCED_SECTIONS.some((section) => section === field.section)),
+ ).flatMap((field) => {
+ const message = field.rules?.map((rule) => rule(values[field.name])).find((result) => result !== null);
+ return message === undefined || message === null ? [] : [[field.name, message] as const];
+ });
+
+ form.clearErrors();
+ failures.forEach(([name, message]) => form.setError(name, { message }));
+ return failures.length > 0 ? null : values;
};
const handleTestConnection = async () => {
if (!accessToken) {
return;
}
- const values = await validate();
+ const values = validate();
if (values === null) {
return;
}
@@ -102,7 +121,7 @@ const CacheSettings: React.FC = ({ accessToken }) => {
if (!accessToken) {
return;
}
- const values = await validate();
+ const values = validate();
if (values === null) {
return;
}
@@ -126,96 +145,99 @@ const CacheSettings: React.FC = ({ accessToken }) => {
return (