+
+ );
+}
+
+function Toggle({
+ enabled,
+ onToggle,
+}: {
+ enabled: boolean;
+ onToggle: () => void;
+}) {
+ return (
+
+ );
+}
+
+type GuardrailCardProps = {
+ guardrail: TeamGuardrail;
+ isSelected: boolean;
+ isHeadersExpanded: boolean;
+ onSelect: () => void;
+ onToggleForwardKey: () => void;
+ onToggleHeaders: () => void;
+ onApprove: () => void;
+ onReject: () => void;
+};
+
+function GuardrailCard({
+ guardrail: g,
+ isSelected,
+ isHeadersExpanded,
+ onSelect,
+ onToggleForwardKey,
+ onToggleHeaders,
+ onApprove,
+ onReject,
+}: GuardrailCardProps) {
+ const status = STATUS_CONFIG[g.status];
+ const teamColor = TEAM_COLORS[g.team] ?? "bg-gray-100 text-gray-700";
+ return (
+ {value}
+ {label}
+
+
+ );
+}
+
+function ConfigRow({
+ label,
+ children,
+}: {
+ label: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+
+
+
+ Team: {g.team}
+
+
+
+ {status.label}
+
+
+ {g.name}
++ {g.description} +
+
+
+
+ {g.endpoint}
+
+
+
+ Model: {g.model}
+
+
+ Submitted:{" "}
+ {g.submittedAt}
+
+
+
+
+
+
+ Forward API Key
+
+
+
+
+ {g.status === "pending" && (
+ <>
+
+
+
+ )}
+
+
+
+ {isHeadersExpanded && (
+
+
+ {g.customHeaders.length === 0 ? (
+
+ )}
+ + No static headers configured. +
+ ) : ( +
+ {g.customHeaders.map((h, i) => (
+
+ )}
+
+
+ {h.key}
+
+ :
+
+ {h.value}
+
+
+ ))}
+
+
+ );
+}
+
+type DetailPanelProps = {
+ guardrail: TeamGuardrail;
+ onClose: () => void;
+ onApprove: () => void;
+ onReject: () => void;
+ onToggleForwardKey: () => void;
+ onUpdateCustomHeaders: (
+ customHeaders: { key: string; value: string }[]
+ ) => Promise{label}
+ {children}
+
+
+ );
+}
+
+type ConfirmDialogProps = {
+ action: "approve" | "reject";
+ guardrailName: string;
+ onConfirm: () => void;
+ onCancel: () => void;
+};
+
+function ConfirmDialog({
+ action,
+ guardrailName,
+ onConfirm,
+ onCancel,
+}: ConfirmDialogProps) {
+ const isApprove = action === "approve";
+ return (
+
+
+
+
+
+
+
+
+
+ Team: {g.team}
+
+
+
+ {status.label}
+
+
+ {g.name}
++ Submitted by {g.submittedBy} on {g.submittedAt} +
+{g.description}
+
+
+
+
+
+ {g.method}
+
+
+
+
+
+
+ {g.endpoint}
+
+
+
+
+
+
+
+
+
+ When enabled, the caller's LiteLLM API key is forwarded as an{" "}
+
+ Authorization
+ {" "}
+ header to your guardrail endpoint. This allows your guardrail to
+ authenticate model calls using the original caller's
+ credentials.
+
+
+
+
+ Static headers
+
+ {g.customHeaders.length > 0 && (
+
+ {g.customHeaders.length}
+
+ )}
+
+ + Sent with every request to the guardrail. +
+ {g.customHeaders.length === 0 ? ( ++ No static headers configured. +
+ ) : ( +-
+ {g.customHeaders.map((h, i) => (
+
- + + {h.key}: {h.value} + + + + ))} +
+ setNewStaticHeaderKey(e.target.value)}
+ placeholder="Header name (e.g. X-API-Key)"
+ className="flex-1 min-w-0 text-xs font-mono border border-gray-200 rounded px-2 py-1.5 text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ const key = newStaticHeaderKey.trim();
+ const value = newStaticHeaderValue.trim();
+ if (key && !g.customHeaders.some((h) => h.key.toLowerCase() === key.toLowerCase())) {
+ onUpdateCustomHeaders([...g.customHeaders, { key, value }]);
+ setNewStaticHeaderKey("");
+ setNewStaticHeaderValue("");
+ }
+ }
+ }}
+ />
+ setNewStaticHeaderValue(e.target.value)}
+ placeholder="Value"
+ className="flex-1 min-w-0 text-xs font-mono border border-gray-200 rounded px-2 py-1.5 text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ const key = newStaticHeaderKey.trim();
+ const value = newStaticHeaderValue.trim();
+ if (key && !g.customHeaders.some((h) => h.key.toLowerCase() === key.toLowerCase())) {
+ onUpdateCustomHeaders([...g.customHeaders, { key, value }]);
+ setNewStaticHeaderKey("");
+ setNewStaticHeaderValue("");
+ }
+ }
+ }}
+ />
+
+
+
+
+
+
+ Forward client headers
+
+ {g.extraHeaders.length > 0 && (
+
+ {g.extraHeaders.length}
+
+ )}
+
+ + Allowed header names to forward from the client request to the guardrail (e.g. x-request-id). +
+ {g.extraHeaders.length === 0 ? ( ++ No forward client headers configured. +
+ ) : ( +-
+ {g.extraHeaders.map((name, i) => (
+
- + {name} + + + ))} +
+ setNewExtraHeader(e.target.value)}
+ placeholder="e.g. x-request-id"
+ className="flex-1 min-w-0 text-xs font-mono border border-gray-200 rounded px-2 py-1.5 text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ const name = newExtraHeader.trim().toLowerCase();
+ if (name && !g.extraHeaders.map((h) => h.toLowerCase()).includes(name)) {
+ onUpdateExtraHeaders([...g.extraHeaders, name]);
+ setNewExtraHeader("");
+ }
+ }
+ }}
+ />
+
+
+
+
+ {configExpanded && (
+
+
+ {buildEquivalentConfigYaml(g)}
+
+ )}
+
+
+ + This guardrail runs on a separate instance. It receives the user + request and forwards the result to the next step in the pipeline. See{" "} + + LiteLLM Generic Guardrail API docs + {" "} + for configuration details. +
+
+
+ {g.status === "pending" && (
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+interface TeamGuardrailsTabProps {
+ accessToken: string | null;
+}
+
+export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) {
+ const [guardrails, setGuardrails] = useState
+
+
+ {isApprove ? (
+
+ + {isApprove ? "Approve Guardrail" : "Reject Guardrail"} +
++ Are you sure you want to {action}{" "} + "{guardrailName}"?{" "} + {isApprove + ? "This will make it active and available for use." + : "This will mark it as rejected and notify the team."} +
+
+
+
+
+
+ setSelectedId(null)}
+ onApprove={() =>
+ setConfirmAction({ id: selected.id, action: "approve" })
+ }
+ onReject={() =>
+ setConfirmAction({ id: selected.id, action: "reject" })
+ }
+ onToggleForwardKey={() => toggleForwardKey(selected.id)}
+ onUpdateCustomHeaders={(customHeaders) =>
+ updateCustomHeaders(selected.id, customHeaders)
+ }
+ onUpdateExtraHeaders={(extraHeaders) =>
+ updateExtraHeaders(selected.id, extraHeaders)
+ }
+ />
+ )}
+ {confirmAction && (
+ g.id === confirmAction.id)?.name ?? ""
+ }
+ onConfirm={() =>
+ confirmAction.action === "approve"
+ ? handleApprove(confirmAction.id)
+ : handleReject(confirmAction.id)
+ }
+ onCancel={() => setConfirmAction(null)}
+ />
+ )}
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx
index e2fc8caa21c..40c1a3a386a 100644
--- a/ui/litellm-dashboard/src/components/model_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/model_info_view.tsx
@@ -17,6 +17,7 @@ import {
Button as TremorButton,
} from "@tremor/react";
import { Button, Form, Input, Modal, Select, Tooltip } from "antd";
+import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { copyToClipboard as utilCopyToClipboard } from "../utils/dataUtils";
@@ -245,6 +246,11 @@ export default function ModelInfoView({
if (values.guardrails) {
updatedLitellmParams.guardrails = values.guardrails;
}
+ if (values.vector_store_ids !== undefined) {
+ updatedLitellmParams.vector_store_ids = Array.isArray(values.vector_store_ids)
+ ? values.vector_store_ids
+ : [];
+ }
// Handle cache control settings
if (values.cache_control && values.cache_control_injection_points?.length > 0) {
@@ -606,6 +612,9 @@ export default function ModelInfoView({
guardrails: Array.isArray(localModelData.litellm_params?.guardrails)
? localModelData.litellm_params.guardrails
: [],
+ vector_store_ids: Array.isArray(localModelData.litellm_params?.vector_store_ids)
+ ? localModelData.litellm_params.vector_store_ids
+ : [],
tags: Array.isArray(localModelData.litellm_params?.tags) ? localModelData.litellm_params.tags : [],
health_check_model: isWildcardModel ? localModelData.model_info?.health_check_model : null,
litellm_extra_params: JSON.stringify(localModelData.litellm_params || {}, null, 2),
@@ -883,6 +892,58 @@ export default function ModelInfoView({
)}
+
+
+ {selected && (
+
+
+
+
+
+
+
+
+
+ {isLoading && (
+ setSelectedId(selectedId === g.id ? null : g.id)}
+ onToggleForwardKey={() => toggleForwardKey(g.id)}
+ onToggleHeaders={() => toggleHeaders(g.id)}
+ onApprove={() => setConfirmAction({ id: g.id, action: "approve" })}
+ onReject={() => setConfirmAction({ id: g.id, action: "reject" })}
+ />
+ ))}
+
+
+ Loading submissions…
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+ {!isLoading && !error && filtered.length === 0 && (
+
+ No guardrails match your filters.
+
+ )}
+ {!isLoading && !error && filtered.map((g) => (
+
+
+ Attached Knowledge Bases (RAG)
+
+ e.stopPropagation()}
+ >
+
+
+ {isEditing ? (
+
+ {}}
+ accessToken={accessToken || ""}
+ placeholder="Select knowledge bases (optional)"
+ />
+
+ ) : (
+
+
+ {localModelData.litellm_params?.vector_store_ids ? (
+ Array.isArray(localModelData.litellm_params.vector_store_ids) ? (
+ localModelData.litellm_params.vector_store_ids.length > 0 ? (
+
+ )}
+
+ {localModelData.litellm_params.vector_store_ids.map(
+ (vsId: string, index: number) => (
+
+ {vsId}
+
+ )
+ )}
+
+ ) : (
+ "No knowledge bases attached"
+ )
+ ) : (
+ String(localModelData.litellm_params.vector_store_ids)
+ )
+ ) : (
+ "Not Set"
+ )}
+ + Reset spend for {currentKeyData?.key_alias || currentKeyData?.token_id || "this key"} to{" "} + $0? +
++ Current spend: ${formatNumberWithCommas(currentKeyData.spend, 4)}. Spend history is + preserved in logs. This resets the current period spend counter, the same as an automatic budget reset. +
+
+
+ );
+}
+
+function MetadataRow({ label, value }: { label: string; value: React.ReactNode }) {
+ return (
+
+ {label}
+
+
+
+ {JSON.stringify(value, null, 2)}
+
+
+ {label}
+ {value}
+
+ );
+}
+
+function DiffSection({ log }: { log: AuditLogEntry }) {
+ const { action, table_name, before_value, updated_values } = log;
+ const isKeyTable = table_name === "LiteLLM_VerificationToken";
+ const isUpdateAction = action === "updated" || action === "rotated";
+
+ let displayBefore = before_value;
+ let displayAfter = updated_values;
+
+ if (isUpdateAction && before_value && updated_values) {
+ const changedBefore: Record
+
+ );
+ }
+
+ // For key table updates, show only meaningful fields as plain text
+ if (isKeyTable && isUpdateAction) {
+ const knownKeyFields = ["token", "spend", "max_budget"];
+ const hasOnlyKnown = Object.keys(value).every((k) => knownKeyFields.includes(k));
+ if (hasOnlyKnown && !("note" in value)) {
+ return (
+
+ {label}
+
+ N/A
+
+
+ );
+ }
+ }
+
+ return
+ {label}
+
+
+ {value.token !== undefined && (
+
+ Token: {value.token ?? "N/A"}
+ )} + {value.spend !== undefined && ( +Spend: ${Number(value.spend).toFixed(6)}
+ )} + {value.max_budget !== undefined && ( +Max Budget: ${Number(value.max_budget).toFixed(6)}
+ )} +
+ {renderValue("Before", displayBefore)}
+ {renderValue("After", displayAfter)}
+
+ );
+}
+
+export function AuditLogDrawer({ open, onClose, log }: AuditLogDrawerProps) {
+ if (!log) return null;
+
+ const tableDisplay = TABLE_NAME_DISPLAY[log.table_name] ?? log.table_name;
+ const actionColor = ACTION_COLOR[log.action] ?? "default";
+
+ return (
+
+
+
+ {/* Body */}
+
+
+ {log.action}
+
+
+ {moment.utc(log.updated_at).local().format("MMM D, YYYY HH:mm:ss")}
+
+
+
+
+ {/* Metadata */}
+
+
+
+ {log.object_id}
+
+ }
+ />
+
+ {log.changed_by_api_key}
+
+ ) : (
+ "—"
+ )
+ }
+ />
+
+
+ {/* Diff */}
+ + Details +
+
-
- );
- };
-
- const renderSubComponent = useCallback(({ row }: { row: any }) => {
- const AuditLogRowExpansionPanel = ({ rowData }: { rowData: AuditLogEntry }) => {
- const { before_value, updated_values, table_name, action } = rowData;
-
- const renderValue = (value: Record
-
-
-
-
- Audit Logs Not Available
-- To enable audit logging, add the following configuration to your LiteLLM proxy configuration file: -
-
- {`litellm_settings:
- store_audit_logs: true`}
-
- - Note: This will only affect new requests after the configuration change and proxy restart. -
-
- {changedKeys.includes("token") && (
-
- );
- } else {
- if (
- value["No differing fields detected in 'before' state"] ||
- value["No differing fields detected in 'updated' state"] ||
- value["No fields changed"]
- ) {
- return - Token: {value.token || "N/A"} -
- )} - {changedKeys.includes("spend") && ( -- Spend:{" "} - {value.spend !== undefined ? `$${formatNumberWithCommas(value.spend, 6)}` : "N/A"} -
- )} - {changedKeys.includes("max_budget") && ( -- Max Budget:{" "} - {value.max_budget !== undefined ? `$${formatNumberWithCommas(value.max_budget, 6)}` : "N/A"} -
- )} -
- {JSON.stringify(value, null, 2)}
-
- );
- }
- }
-
- return (
-
- {JSON.stringify(value, null, 2)}
-
- );
- };
-
- let displayBeforeValue = before_value;
- let displayUpdatedValue = updated_values;
-
- if ((action === "updated" || action === "rotated") && before_value && updated_values) {
- if (
- table_name === "LiteLLM_TeamTable" ||
- table_name === "LiteLLM_UserTable" ||
- table_name === "LiteLLM_VerificationToken"
- ) {
- const changedBefore: Record
-
- );
- };
-
- return
-
- Before Value:
- {renderValue(displayBeforeValue, table_name === "LiteLLM_VerificationToken")} -
-
- Updated Value:
- {renderValue(displayUpdatedValue, table_name === "LiteLLM_VerificationToken")} -✨ Enterprise Feature.
-This is a LiteLLM Enterprise feature, and requires a valid key to use. -
Here's a preview of what Audit Logs offer: -
+ {/* Header */}
- setDrawerOpen(false)}
+ log={selectedLog}
+ />
);
}
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index ba50d26aa0e..ab70126a5a8 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -717,7 +717,6 @@ export default function SpendLogsTable({
accessToken={accessToken}
isActive={activeTab === "audit logs"}
premiumUser={premiumUser}
- allTeams={allTeams}
/>
Audit Logs
+
+
- {/* Show Audit Logs Info Message when no data */}
- Audit Logs
+
+ { setObjectId(val); resetPage(); }}
+ onChange={(e) => { if (!e.target.value) { setObjectId(""); resetPage(); } }}
+ />
+ { setChangedBy(val); resetPage(); }}
+ onChange={(e) => { if (!e.target.value) { setChangedBy(""); resetPage(); } }}
+ />
+ { setTeamId(val); resetPage(); }}
+ onChange={(e) => { if (!e.target.value) { setTeamId(""); resetPage(); } }}
+ />
+ { setKeyHash(val); resetPage(); }}
+ onChange={(e) => { if (!e.target.value) { setKeyHash(""); resetPage(); } }}
+ />
+
+
+