-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Remove ai summaries * Factor out hooks for orphan logs waterfall and add timeline to debug * Make prettier error messages * Bump api package json * Fix linting * Stylize env vars and use keyvalue table for them * Disable goToCode link for now * Implement better secret detection in env var table * Fix timeline styles * Fix styles on sensitive value cells in keyvalue table * Format * Update pnpm lock * Bump package.json * Remove dead code
- Loading branch information
Showing
14 changed files
with
374 additions
and
483 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
frontend/src/pages/RequestDetailsPage/RequestDetailsPageV2/useOrphanLogs.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { MizuOrphanLog, OtelSpan, isMizuOrphanLog } from "@/queries"; | ||
| import { OtelEvent } from "@/queries/traces-otel"; | ||
| import { safeParseJson } from "@/utils"; | ||
| import { useMemo } from "react"; | ||
| import { getString } from "../v2/otel-helpers"; | ||
|
|
||
| export function useOrphanLogs(traceId: string, spans: Array<OtelSpan>) { | ||
| // NOTE - Flatten out events into orphan logs to allow the UI to render them | ||
| const orphanLogs = useMemo(() => { | ||
| const orphans: MizuOrphanLog[] = []; | ||
| for (const span of spans ?? []) { | ||
| if (span.events) { | ||
| for (const event of span.events) { | ||
| // TODO - Visualize other types of events on the timeline? | ||
| if (event.name === "log") { | ||
| let args = | ||
| safeParseJson(getString(event.attributes.arguments)) || []; | ||
| if (!Array.isArray(args)) { | ||
| args = [args]; | ||
| } | ||
| // TODO - Use a more deterministic ID - preferably string that includes the trace+span+event_index | ||
| const logId = Math.floor(Math.random() * 1000000); | ||
| const orphanLog = convertEventToOrphanLog(traceId, logId, event); | ||
| // HACK - We want to be sure that we construct a valid orphan log, otherwise the UI will break | ||
| if (isMizuOrphanLog(orphanLog)) { | ||
| orphans.push(orphanLog); | ||
| } else { | ||
| console.error("Constructed invalid orphan log", orphanLog); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return orphans; | ||
| }, [spans, traceId]); | ||
|
|
||
| return orphanLogs; | ||
| } | ||
|
|
||
| /** | ||
| * Converts an Otel event to a so-called Orphan Log to maintain backwards compatibility with the old Mizu data format | ||
| */ | ||
| function convertEventToOrphanLog( | ||
| traceId: string, | ||
| logId: number, | ||
| event: OtelEvent, | ||
| ) { | ||
| const argsAsString = getString(event.attributes.arguments); | ||
| const parsedArgs = argsAsString ? safeParseJson(argsAsString) : []; | ||
|
|
||
| return { | ||
| id: logId, | ||
| traceId, | ||
| level: getString(event.attributes.level), | ||
| args: parsedArgs || [], | ||
| timestamp: event.timestamp, | ||
| message: getString(event.attributes.message), | ||
| createdAt: event.timestamp, | ||
| updatedAt: event.timestamp, | ||
| }; | ||
| } |
47 changes: 47 additions & 0 deletions
47
frontend/src/pages/RequestDetailsPage/RequestDetailsPageV2/useRequestWaterfall.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { MizuOrphanLog, OtelSpan } from "@/queries"; | ||
| import { useMemo } from "react"; | ||
| import { getVendorInfo } from "../v2/vendorify-traces"; | ||
| import { SpanWithVendorInfo, Waterfall } from "./RequestDetailsPageV2Content"; | ||
|
|
||
| export function useRequestWaterfall( | ||
| spans: Array<OtelSpan>, | ||
| orphanLogs: Array<MizuOrphanLog>, | ||
| ) { | ||
| const spansWithVendorInfo: Array<SpanWithVendorInfo> = useMemo( | ||
| () => | ||
| spans.map((span) => ({ | ||
| span, | ||
| vendorInfo: getVendorInfo(span), | ||
| })), | ||
| [spans], | ||
| ); | ||
|
|
||
| // HACK - normally we'd look for the root span by trying to find the span with the parent_span_id === null | ||
| // but we set a fake parent_span_id for the root span in the middleware for now | ||
| const rootSpan = spansWithVendorInfo.find( | ||
| // (item) => item.span.parent_span_id === null, | ||
| (item) => item.span.name === "request", | ||
| ); | ||
|
|
||
| const waterfall = useMemo((): Waterfall => { | ||
| return [...spansWithVendorInfo, ...orphanLogs].sort((a, b) => { | ||
| const timeA = "span" in a ? a.span.start_time : a.timestamp; | ||
| const timeB = "span" in b ? b.span.start_time : b.timestamp; | ||
| if (timeA === timeB) { | ||
| // If the times are the same, we need to sort giving the priority to the root span | ||
| if ("span" in a && a?.span?.name === "request") { | ||
| return -1; | ||
| } | ||
| if ("span" in b && b?.span?.name === "request") { | ||
| return 1; | ||
| } | ||
| } | ||
| return new Date(timeA).getTime() - new Date(timeB).getTime(); | ||
| }); | ||
| }, [spansWithVendorInfo, orphanLogs]); | ||
|
|
||
| return { | ||
| rootSpan, | ||
| waterfall, | ||
| }; | ||
| } |
Oops, something went wrong.