diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx index 9081219d5be..f0f4041531c 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx @@ -66,6 +66,9 @@ export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails = const hasGuardrailData = guardrailEntries.length > 0; const totalMaskedEntities = calculateTotalMaskedEntities(guardrailEntries); const primaryGuardrailLabel = getGuardrailLabel(guardrailEntries); + const guardrailPolicyNames = Array.from( + new Set(guardrailEntries.map((e: any) => e?.policy_template).filter(Boolean)) + ) as string[]; // Vector store data const hasVectorStoreData = checkHasVectorStoreData(metadata); @@ -124,7 +127,7 @@ export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails = )} {hasGuardrailData && ( - + )} @@ -164,7 +167,11 @@ export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails = )} {/* Guardrail Data */} - {hasGuardrailData && } + {hasGuardrailData && ( +
+ +
+ )} {/* Vector Store Data */} {hasVectorStoreData && } @@ -218,15 +225,23 @@ function TagsSection({ tags }: { tags: Record }) { ); } -function GuardrailLabel({ label, maskedCount }: { label: string; maskedCount: number }) { +function GuardrailLabel({ label, maskedCount, policyNames }: { label: string; maskedCount: number; policyNames: string[] }) { + const handleClick = () => { + const el = document.getElementById("guardrail-section"); + if (el) el.scrollIntoView({ behavior: "smooth" }); + }; + return ( - {label} + {label} {maskedCount > 0 && ( {maskedCount} masked )} + {policyNames.map((name) => ( + {name} + ))} ); }