diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx index 7f343211596..7d597fa13dd 100644 --- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.test.tsx @@ -24,6 +24,15 @@ const skippedPreCall: Partial = { duration: null, }; +const untimedPreCall: Partial = { + guardrail_name: "conduct", + guardrail_status: "success", + guardrail_mode: "pre_call", + start_time: null, + end_time: null, + duration: null, +}; + const ranPostCall: Partial = { guardrail_name: "ran-rail", guardrail_status: "success", @@ -98,6 +107,30 @@ describe("GuardrailViewer", () => { expect(screen.getByText("—")).toBeInTheDocument(); }); + it("keeps a guardrail that ran without any timing on the lifecycle", () => { + renderWithProviders(); + + expect(screen.getByText("Request received")).toBeInTheDocument(); + expect(screen.getByText(/Pre-call guardrail: conduct/)).toBeInTheDocument(); + expect(screen.getByText("LLM call")).toBeInTheDocument(); + expect(screen.getByText("Response returned")).toBeInTheDocument(); + expect(screen.queryByText(/^T\+/)).not.toBeInTheDocument(); + }); + + it("anchors offsets on the timed entries and gives the untimed one no fabricated offset", () => { + const untimed = makeGuardrailInformation(untimedPreCall); + const ran = makeGuardrailInformation(ranPostCall); + renderWithProviders(); + + expect(screen.getByText("Request received").parentElement).toHaveTextContent("T+0ms"); + expect(screen.getByText(/Post-call guardrail: ran-rail/).parentElement).toHaveTextContent("T+250ms"); + expect(screen.getByText("Response returned").parentElement).toHaveTextContent("T+251ms"); + + const untimedRow = screen.getByText(/Pre-call guardrail: conduct/).parentElement; + expect(untimedRow).toHaveTextContent("—"); + expect(untimedRow).not.toHaveTextContent(/T\+/); + }); + it("calculates and displays masked entity totals", async () => { const user = userEvent.setup(); const data = makeGuardrailInformation({ diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx index 1de0e3878b2..cb1dc25b551 100644 --- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx @@ -361,7 +361,7 @@ const GenericGuardrailResponse = ({ response }: { response: any }) => { interface TimelineEntry { type: "request" | "guardrail" | "llm" | "response"; label: string; - offsetMs: number; + offsetMs: number | null; outcome?: EntryOutcome; } @@ -370,17 +370,26 @@ type TimedGuardrailInformation = GuardrailInformation & { start_time: number; en const isTimed = (e: GuardrailInformation): e is TimedGuardrailInformation => typeof e.start_time === "number" && typeof e.end_time === "number"; +const belongsOnLifecycle = (e: GuardrailInformation): boolean => isTimed(e) || getEntryOutcome(e) !== "not_run"; + const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { - const sorted = useMemo(() => entries.filter(isTimed).sort((a, b) => a.start_time - b.start_time), [entries]); + const sorted = useMemo(() => { + const onLifecycle = entries.filter(belongsOnLifecycle); + const timed = onLifecycle.filter(isTimed).sort((a, b) => a.start_time - b.start_time); + return [...timed, ...onLifecycle.filter((e) => !isTimed(e))]; + }, [entries]); const timeline = useMemo(() => { if (sorted.length === 0) return []; - const baseTime = sorted[0].start_time; + const timed = sorted.filter(isTimed); + const baseTime = timed.length > 0 ? timed[0].start_time : null; + const offsetOf = (e: GuardrailInformation): number | null => + baseTime === null || !isTimed(e) ? null : Math.round((e.end_time - baseTime) * 1000); const items: TimelineEntry[] = []; // Request received - items.push({ type: "request", label: "Request received", offsetMs: 0 }); + items.push({ type: "request", label: "Request received", offsetMs: baseTime === null ? null : 0 }); // Pre-call guardrails — use modeMatches so array modes (e.g. ["pre_call", "post_call"]) // place the entry in every matching bucket. @@ -391,52 +400,50 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { const duringCalls = sorted.filter((e) => modeMatches(e.guardrail_mode, "during_call")); for (const e of preCalls) { - const offsetMs = Math.round((e.end_time - baseTime) * 1000); items.push({ type: "guardrail", label: `Pre-call guardrail: ${getDisplayName(e)}`, - offsetMs, + offsetMs: offsetOf(e), outcome: getEntryOutcome(e), }); } // LLM call — infer from gap between pre-call end and post-call start - const lastPreEnd = preCalls.length > 0 ? Math.max(...preCalls.map((e) => e.end_time)) : baseTime; - const firstPostStart = postCalls.length > 0 ? Math.min(...postCalls.map((e) => e.start_time)) : undefined; - const llmEndTime = firstPostStart ?? lastPreEnd + 1; - const llmOffsetMs = Math.round((llmEndTime - baseTime) * 1000); + const timedPre = preCalls.filter(isTimed); + const timedPost = postCalls.filter(isTimed); + const lastPreEnd = timedPre.length > 0 ? Math.max(...timedPre.map((e) => e.end_time)) : baseTime; + const firstPostStart = timedPost.length > 0 ? Math.min(...timedPost.map((e) => e.start_time)) : undefined; + const llmEndTime = firstPostStart ?? (lastPreEnd === null ? null : lastPreEnd + 1); items.push({ type: "llm", label: "LLM call", - offsetMs: llmOffsetMs, + offsetMs: llmEndTime === null || baseTime === null ? null : Math.round((llmEndTime - baseTime) * 1000), }); // During-call guardrails (rare) for (const e of duringCalls) { - const offsetMs = Math.round((e.end_time - baseTime) * 1000); items.push({ type: "guardrail", label: `During-call guardrail: ${getDisplayName(e)}`, - offsetMs, + offsetMs: offsetOf(e), outcome: getEntryOutcome(e), }); } // Post-call guardrails for (const e of postCalls) { - const offsetMs = Math.round((e.end_time - baseTime) * 1000); items.push({ type: "guardrail", label: `Post-call guardrail: ${getDisplayName(e)}`, - offsetMs, + offsetMs: offsetOf(e), outcome: getEntryOutcome(e), }); } // Response returned - const maxEnd = Math.max(...sorted.map((e) => e.end_time)); - const responseOffsetMs = Math.round((maxEnd - baseTime) * 1000) + 1; + const maxEnd = timed.length > 0 ? Math.max(...timed.map((e) => e.end_time)) : null; + const responseOffsetMs = maxEnd === null || baseTime === null ? null : Math.round((maxEnd - baseTime) * 1000) + 1; items.push({ type: "response", label: "Response returned", offsetMs: responseOffsetMs }); return items; @@ -475,7 +482,9 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { {OUTCOME_LABEL[item.outcome]} )} - T+{item.offsetMs}ms + + {item.offsetMs === null ? "—" : `T+${item.offsetMs}ms`} +