-
-
Notifications
You must be signed in to change notification settings - Fork 645
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* WIP on saving the resized state in a cookie * Progress on remembering the panel width * The resizable panel now remembers even when closed * Improvements to the span panel * Hide integrations in the v3 side menu * Added “UTC” to the times * WIP changing how styles work * Reference unflattenAttributes from the package * Unflatten now correctly unflattens arrays * Unflatten typecheck fix * Improvements to the spans and UI for them * Added the “events” to a span, including special styling for errors * Unflatten doesn’t work on an array of Attributes
- Loading branch information
1 parent
dd63fe6
commit 07efef4
Showing
19 changed files
with
504 additions
and
116 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 was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { CodeBlock } from "~/components/code/CodeBlock"; | ||
| import { Callout } from "~/components/primitives/Callout"; | ||
| import { DateTime } from "~/components/primitives/DateTime"; | ||
| import { Header2, Header3 } from "~/components/primitives/Headers"; | ||
| import { Paragraph } from "~/components/primitives/Paragraph"; | ||
| import type { OtelExceptionProperty, OtelSpanEvent } from "~/presenters/v3/SpanPresenter.server"; | ||
|
|
||
| type SpanEventsProps = { | ||
| spanEvents: OtelSpanEvent[]; | ||
| }; | ||
|
|
||
| export function SpanEvents({ spanEvents }: SpanEventsProps) { | ||
| return ( | ||
| <div className="flex flex-col gap-4"> | ||
| {spanEvents.map((event, index) => ( | ||
| <SpanEvent key={index} spanEvent={event} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SpanEventHeader({ | ||
| title, | ||
| titleClassName, | ||
| time, | ||
| }: { | ||
| title: string; | ||
| titleClassName?: string; | ||
| time: Date; | ||
| }) { | ||
| return ( | ||
| <div className="flex items-center justify-between"> | ||
| <Header2 className={titleClassName}>{title}</Header2> | ||
| <Paragraph variant="small"> | ||
| <DateTime date={time} /> | ||
| </Paragraph> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SpanEvent({ spanEvent }: { spanEvent: OtelSpanEvent }) { | ||
| if (spanEvent.properties?.exception) { | ||
| return <SpanEventError spanEvent={spanEvent} exception={spanEvent.properties.exception} />; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <SpanEventHeader title={spanEvent.name} time={spanEvent.time} /> | ||
| {spanEvent.properties && ( | ||
| <CodeBlock code={JSON.stringify(spanEvent.properties, null, 2)} maxLines={20} /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SpanEventError({ | ||
| spanEvent, | ||
| exception, | ||
| }: { | ||
| spanEvent: OtelSpanEvent; | ||
| exception: OtelExceptionProperty; | ||
| }) { | ||
| return ( | ||
| <div className="flex flex-col gap-2 rounded-sm border border-rose-500/50 p-3"> | ||
| <SpanEventHeader title={"Error"} time={spanEvent.time} titleClassName="text-rose-500" /> | ||
| {exception.message && <Callout variant="error">{exception.message}</Callout>} | ||
| {exception.stacktrace && <CodeBlock code={exception.stacktrace} maxLines={20} />} | ||
| </div> | ||
| ); | ||
| } |
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,129 @@ | ||
| import { ChevronRightIcon } from "@heroicons/react/20/solid"; | ||
| import { Span } from "@opentelemetry/sdk-trace-base"; | ||
| import { TaskEventStyle } from "@trigger.dev/core/v3"; | ||
| import { TaskEventLevel } from "@trigger.dev/database"; | ||
| import { Fragment } from "react"; | ||
| import { Paragraph } from "~/components/primitives/Paragraph"; | ||
| import { cn } from "~/utils/cn"; | ||
|
|
||
| type SpanTitleProps = { | ||
| message: string; | ||
| isError: boolean; | ||
| style: TaskEventStyle; | ||
| level: TaskEventLevel; | ||
| size: "small" | "large"; | ||
| }; | ||
|
|
||
| export function SpanTitle(event: SpanTitleProps) { | ||
| return ( | ||
| <span className={cn("inline-flex items-center gap-2", eventTextClassName(event))}> | ||
| {event.message} <SpanAccessory accessory={event.style.accessory} size={event.size} /> | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| function SpanAccessory({ | ||
| accessory, | ||
| size, | ||
| }: { | ||
| accessory: TaskEventStyle["accessory"]; | ||
| size: SpanTitleProps["size"]; | ||
| }) { | ||
| if (!accessory) { | ||
| return null; | ||
| } | ||
|
|
||
| switch (accessory.style) { | ||
| case "codepath": { | ||
| return ( | ||
| <SpanCodePathAccessory | ||
| accessory={accessory} | ||
| className={cn(size === "large" ? "text-sm" : "text-xs")} | ||
| /> | ||
| ); | ||
| } | ||
| default: { | ||
| return ( | ||
| <div className={cn("flex gap-1")}> | ||
| {accessory.items.map((item, index) => ( | ||
| <span key={index} className={cn("inline-flex items-center gap-1")}> | ||
| {item.text} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export function SpanCodePathAccessory({ | ||
| accessory, | ||
| className, | ||
| }: { | ||
| accessory: NonNullable<TaskEventStyle["accessory"]>; | ||
| className?: string; | ||
| }) { | ||
| return ( | ||
| <code | ||
| className={cn( | ||
| "inline-flex items-center gap-0.5 rounded border border-slate-800 bg-midnight-850 px-1.5 py-0.5 font-mono text-sky-200", | ||
| className | ||
| )} | ||
| > | ||
| {accessory.items.map((item, index) => ( | ||
| <Fragment key={index}> | ||
| <span | ||
| className={cn( | ||
| "inline-flex items-center", | ||
| index === accessory.items.length - 1 ? "text-yellow-200" : "text-dimmed" | ||
| )} | ||
| > | ||
| {item.text} | ||
| </span> | ||
| {index < accessory.items.length - 1 && ( | ||
| <span className="text-slate-500"> | ||
| <ChevronRightIcon className="h-4 w-4" /> | ||
| </span> | ||
| )} | ||
| </Fragment> | ||
| ))} | ||
| </code> | ||
| ); | ||
| } | ||
|
|
||
| function eventTextClassName(event: SpanTitleProps) { | ||
| if (event.isError) { | ||
| return "text-rose-500"; | ||
| } | ||
|
|
||
| switch (event.level) { | ||
| case "TRACE": { | ||
| return classNameForVariant(event.style.variant); | ||
| } | ||
| case "LOG": | ||
| case "INFO": | ||
| case "DEBUG": { | ||
| return classNameForVariant(event.style.variant); | ||
| } | ||
| case "WARN": { | ||
| return "text-amber-400"; | ||
| } | ||
| case "ERROR": { | ||
| return "text-rose-500"; | ||
| } | ||
| default: { | ||
| return classNameForVariant(event.style.variant); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function classNameForVariant(variant: TaskEventStyle["variant"]) { | ||
| switch (variant) { | ||
| case "primary": { | ||
| return "text-blue-500"; | ||
| } | ||
| default: { | ||
| return "text-dimmed"; | ||
| } | ||
| } | ||
| } |
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,18 @@ | ||
| import { SpanCodePathAccessory } from "./SpanTitle"; | ||
|
|
||
| type TaskPathProps = { | ||
| filePath: string; | ||
| functionName: string; | ||
| className?: string; | ||
| }; | ||
|
|
||
| export function TaskPath({ filePath, functionName, className }: TaskPathProps) { | ||
| return ( | ||
| <SpanCodePathAccessory | ||
| accessory={{ | ||
| items: [{ text: filePath }, { text: functionName }], | ||
| }} | ||
| className={className} | ||
| /> | ||
| ); | ||
| } |
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
Oops, something went wrong.