scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-08 03:08:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 114

feat: add clickable guardrail link in metrics + show policy names

Browse source
This commit is contained in:
Ishaan Jaffer 2026-02-16 18:09:36 -08:00
parent 07bab6dc34
commit be2824e0e1
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx
View file

@ -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 && (
<Descriptions.Item label="Guardrail">
<GuardrailLabel label={primaryGuardrailLabel} maskedCount={totalMaskedEntities} />
<GuardrailLabel label={primaryGuardrailLabel} maskedCount={totalMaskedEntities} policyNames={guardrailPolicyNames} />
</Descriptions.Item>
)}
</Descriptions>
@ -164,7 +167,11 @@ export function LogDetailContent({ logEntry, onOpenSettings, isLoadingDetails =
)}
{/* Guardrail Data */}
{hasGuardrailData && <GuardrailViewer data={guardrailInfo} />}
{hasGuardrailData && (
<div id="guardrail-section">
<GuardrailViewer data={guardrailInfo} />
</div>
)}
{/* Vector Store Data */}
{hasVectorStoreData && <VectorStoreViewer data={metadata.vector_store_request_metadata} />}
@ -218,15 +225,23 @@ function TagsSection({ tags }: { tags: Record<string, any> }) {
);
}
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 (
<Space size={SPACING_MEDIUM}>
<span>{label}</span>
<a onClick={handleClick} style={{ cursor: "pointer" }}>{label}</a>
{maskedCount > 0 && (
<Tag color="blue">
{maskedCount} masked
</Tag>
)}
{policyNames.map((name) => (
<Tag key={name} color="purple">{name}</Tag>
))}
</Space>
);
}