From 51a243e3cef86e8e3a30456bb67a28ec77e45365 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Tue, 15 Sep 2026 21:44:19 -0700 Subject: [PATCH 1/4] fix(ui): keep untimed guardrail entries on the request lifecycle #39050 changed RequestLifecycle from sorting every entry with (a.start_time ?? 0) to filtering on isTimed, which drops any entry whose start_time/end_time are null. That was the right call for the not_run entries the PR introduced, but it also drops entries that DID run and simply carry no timing, and those are pre-existing: add_standard_logging_guardrail_information_to_request_data defaults start_time, end_time and duration to None, and the conduct guardrail passes none of them. One such entry used to draw the whole four-row lifecycle and now draws nothing, so an admin opening that log sees an empty Request Lifecycle panel. An entry now stays on the lifecycle when it is timed OR when it ran, so not_run keeps the exclusion #39050 wanted and every other shape comes back. Offsets are number | null and render as an em dash rather than a fabricated T+0ms, which is what a null minus a null used to produce on the base. Entries without timing sort after the timed ones and the base time comes from the timed entries, so real offsets are unchanged. The two new tests fail on the base component and pass here; #39050's own not_run tests keep passing untouched, which is what makes this additive rather than a revert. --- .../GuardrailViewer/GuardrailViewer.test.tsx | 33 ++++++++++++++ .../GuardrailViewer/GuardrailViewer.tsx | 45 +++++++++++-------- 2 files changed, 60 insertions(+), 18 deletions(-) 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`} + From 8bb496154a7b45c225cb4de5cbf62051ff3d950b Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Tue, 15 Sep 2026 22:18:42 -0700 Subject: [PATCH 2/4] test(ui): scope lifecycle assertions with within instead of parentElement The four .parentElement reads in the new lifecycle tests pushed testing-library/no-node-access to 712 against a 707 budget, failing frontend-lint. The rows now carry data-testid="lifecycle-row" and the test picks a row with within(), which keeps the assertion tied to the specific row rather than the whole panel and takes the count back to 707. --- .../GuardrailViewer/GuardrailViewer.test.tsx | 20 ++++++++++++------- .../GuardrailViewer/GuardrailViewer.tsx | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) 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 7d597fa13dd..0f4ad206b1d 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 @@ -1,7 +1,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders, screen, waitFor } from "../../../../tests/test-utils"; +import { renderWithProviders, screen, waitFor, within } from "../../../../tests/test-utils"; import { GuardrailInformation, makeBedrockResponse, @@ -122,13 +122,19 @@ describe("GuardrailViewer", () => { 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 lifecycleRow = (label: string | RegExp): HTMLElement => { + const row = screen.getAllByTestId("lifecycle-row").find((r) => within(r).queryByText(label) !== null); + if (row === undefined) throw new Error(`no lifecycle row labelled ${label}`); + return row; + }; - const untimedRow = screen.getByText(/Pre-call guardrail: conduct/).parentElement; - expect(untimedRow).toHaveTextContent("—"); - expect(untimedRow).not.toHaveTextContent(/T\+/); + expect(within(lifecycleRow("Request received")).getByText("T+0ms")).toBeInTheDocument(); + expect(within(lifecycleRow(/Post-call guardrail: ran-rail/)).getByText("T+250ms")).toBeInTheDocument(); + expect(within(lifecycleRow("Response returned")).getByText("T+251ms")).toBeInTheDocument(); + + const untimedRow = within(lifecycleRow(/Pre-call guardrail: conduct/)); + expect(untimedRow.getByText("—")).toBeInTheDocument(); + expect(untimedRow.queryByText(/^T\+/)).not.toBeInTheDocument(); }); it("calculates and displays masked entity totals", async () => { 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 cb1dc25b551..bf7b4355962 100644 --- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx @@ -454,7 +454,7 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => {

Request Lifecycle

{timeline.map((item, idx) => ( -
+
{/* Vertical line */}
From d67c7894ddb71a8a8fed4bcfd594a453c71ffd2e Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Tue, 15 Sep 2026 22:25:30 -0700 Subject: [PATCH 3/4] fix(ui): keep recorded order when an untimed guardrail shares a phase --- .../GuardrailViewer/GuardrailViewer.test.tsx | 24 +++++++++++++++++++ .../GuardrailViewer/GuardrailViewer.tsx | 9 ++++--- 2 files changed, 30 insertions(+), 3 deletions(-) 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 0f4ad206b1d..0948790f3a6 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 @@ -33,6 +33,15 @@ const untimedPreCall: Partial = { duration: null, }; +const timedPreCall: Partial = { + guardrail_name: "timed-pre-rail", + guardrail_status: "success", + guardrail_mode: "pre_call", + start_time: 1_700_000_000, + end_time: 1_700_000_000.1, + duration: 0.1, +}; + const ranPostCall: Partial = { guardrail_name: "ran-rail", guardrail_status: "success", @@ -117,6 +126,21 @@ describe("GuardrailViewer", () => { expect(screen.queryByText(/^T\+/)).not.toBeInTheDocument(); }); + it("keeps an untimed guardrail ahead of a timed one recorded after it in the same phase", () => { + const untimed = makeGuardrailInformation(untimedPreCall); + const timedPre = makeGuardrailInformation(timedPreCall); + renderWithProviders(); + + const rows = screen.getAllByTestId("lifecycle-row"); + const rowIndex = (label: RegExp): number => rows.findIndex((r) => within(r).queryByText(label) !== null); + const untimedIndex = rowIndex(/Pre-call guardrail: conduct/); + const timedIndex = rowIndex(/Pre-call guardrail: timed-pre-rail/); + + expect(untimedIndex).toBeGreaterThanOrEqual(0); + expect(timedIndex).toBeGreaterThanOrEqual(0); + expect(untimedIndex).toBeLessThan(timedIndex); + }); + it("anchors offsets on the timed entries and gives the untimed one no fabricated offset", () => { const untimed = makeGuardrailInformation(untimedPreCall); const ran = makeGuardrailInformation(ranPostCall); 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 bf7b4355962..996d9f734d4 100644 --- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx @@ -375,15 +375,18 @@ const belongsOnLifecycle = (e: GuardrailInformation): boolean => isTimed(e) || g const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { 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))]; + const byStart = onLifecycle.filter(isTimed).sort((a, b) => a.start_time - b.start_time); + const timedSlots = new Map( + onLifecycle.flatMap((e, i) => (isTimed(e) ? [i] : [])).map((slot, k) => [slot, byStart[k]]), + ); + return onLifecycle.map((e, i) => timedSlots.get(i) ?? e); }, [entries]); const timeline = useMemo(() => { if (sorted.length === 0) return []; const timed = sorted.filter(isTimed); - const baseTime = timed.length > 0 ? timed[0].start_time : null; + const baseTime = timed.length > 0 ? Math.min(...timed.map((e) => e.start_time)) : null; const offsetOf = (e: GuardrailInformation): number | null => baseTime === null || !isTimed(e) ? null : Math.round((e.end_time - baseTime) * 1000); const items: TimelineEntry[] = []; From 6544671a3114073a1460929054011ea6a00374a7 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 13:29:45 -0700 Subject: [PATCH 4/4] fix(ui): order each lifecycle phase on its own clock --- .../GuardrailViewer/GuardrailViewer.test.tsx | 34 +++++++++++++++++++ .../GuardrailViewer/GuardrailViewer.tsx | 26 +++++++------- 2 files changed, 48 insertions(+), 12 deletions(-) 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 0948790f3a6..ff5e736306a 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 @@ -42,6 +42,24 @@ const timedPreCall: Partial = { duration: 0.1, }; +const latePreCall: Partial = { + guardrail_name: "late-pre-rail", + guardrail_status: "success", + guardrail_mode: "pre_call", + start_time: 1_700_000_500, + end_time: 1_700_000_500.1, + duration: 0.1, +}; + +const untimedPostCall: Partial = { + guardrail_name: "untimed-post-rail", + guardrail_status: "success", + guardrail_mode: "post_call", + start_time: null, + end_time: null, + duration: null, +}; + const ranPostCall: Partial = { guardrail_name: "ran-rail", guardrail_status: "success", @@ -141,6 +159,22 @@ describe("GuardrailViewer", () => { expect(untimedIndex).toBeLessThan(timedIndex); }); + it("orders each phase on its own clock when a later pre-call outlives an earlier post-call", () => { + const latePre = makeGuardrailInformation(latePreCall); + const untimedPost = makeGuardrailInformation(untimedPostCall); + const earlyPost = makeGuardrailInformation(ranPostCall); + renderWithProviders(); + + const rows = screen.getAllByTestId("lifecycle-row"); + const rowIndex = (label: RegExp): number => rows.findIndex((r) => within(r).queryByText(label) !== null); + const untimedIndex = rowIndex(/Post-call guardrail: untimed-post-rail/); + const earlyIndex = rowIndex(/Post-call guardrail: ran-rail/); + + expect(untimedIndex).toBeGreaterThanOrEqual(0); + expect(earlyIndex).toBeGreaterThanOrEqual(0); + expect(untimedIndex).toBeLessThan(earlyIndex); + }); + it("anchors offsets on the timed entries and gives the untimed one no fabricated offset", () => { const untimed = makeGuardrailInformation(untimedPreCall); const ran = makeGuardrailInformation(ranPostCall); 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 996d9f734d4..58076ef6c00 100644 --- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx @@ -372,15 +372,17 @@ const isTimed = (e: GuardrailInformation): e is TimedGuardrailInformation => const belongsOnLifecycle = (e: GuardrailInformation): boolean => isTimed(e) || getEntryOutcome(e) !== "not_run"; +// Sorts a phase's timed entries by start time while leaving its untimed entries in the +// slots they were recorded in. Applied per phase, never globally: an entry can land in +// more than one phase bucket, so a global pass can reorder one phase by another's clock. +const orderWithinPhase = (group: GuardrailInformation[]): GuardrailInformation[] => { + const byStart = group.filter(isTimed).sort((a, b) => a.start_time - b.start_time); + const timedSlots = new Map(group.flatMap((e, i) => (isTimed(e) ? [i] : [])).map((slot, k) => [slot, byStart[k]])); + return group.map((e, i) => timedSlots.get(i) ?? e); +}; + const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { - const sorted = useMemo(() => { - const onLifecycle = entries.filter(belongsOnLifecycle); - const byStart = onLifecycle.filter(isTimed).sort((a, b) => a.start_time - b.start_time); - const timedSlots = new Map( - onLifecycle.flatMap((e, i) => (isTimed(e) ? [i] : [])).map((slot, k) => [slot, byStart[k]]), - ); - return onLifecycle.map((e, i) => timedSlots.get(i) ?? e); - }, [entries]); + const sorted = useMemo(() => entries.filter(belongsOnLifecycle), [entries]); const timeline = useMemo(() => { if (sorted.length === 0) return []; @@ -396,11 +398,11 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => { // Pre-call guardrails — use modeMatches so array modes (e.g. ["pre_call", "post_call"]) // place the entry in every matching bucket. - const preCalls = sorted.filter((e) => modeMatches(e.guardrail_mode, "pre_call")); - const postCalls = sorted.filter( - (e) => modeMatches(e.guardrail_mode, "post_call") || modeMatches(e.guardrail_mode, "logging_only"), + const preCalls = orderWithinPhase(sorted.filter((e) => modeMatches(e.guardrail_mode, "pre_call"))); + const postCalls = orderWithinPhase( + sorted.filter((e) => modeMatches(e.guardrail_mode, "post_call") || modeMatches(e.guardrail_mode, "logging_only")), ); - const duringCalls = sorted.filter((e) => modeMatches(e.guardrail_mode, "during_call")); + const duringCalls = orderWithinPhase(sorted.filter((e) => modeMatches(e.guardrail_mode, "during_call"))); for (const e of preCalls) { items.push({