Moved isAdmin to a higher level

Author: samejr

apps/webapp/app/components/run/RunTimeline.tsx

@@ -594,7 +594,6 @@ export type SpanTimelineProps = {
   inProgress: boolean;
   isError: boolean;
   events?: TimelineSpanEvent[];
-  showAdminOnlyEvents?: boolean;
 };
 
 export type SpanTimelineState = "error" | "pending" | "complete";
@@ -605,12 +604,10 @@ export function SpanTimeline({
   inProgress,
   isError,
   events,
-  showAdminOnlyEvents,
 }: SpanTimelineProps) {
   const state = isError ? "error" : inProgress ? "inprogress" : undefined;
 
-  // Filter events if needed
-  const visibleEvents = events?.filter((event) => !event.adminOnly || showAdminOnlyEvents) ?? [];
+  const visibleEvents = events ?? [];
 
   return (
     <>
@@ -697,13 +694,13 @@ export type TimelineSpanEvent = {
   timestamp: Date;
   duration?: number;
   helpText?: string;
-  adminOnly: boolean;
   markerVariant: TimelineEventVariant;
   lineVariant: TimelineLineVariant;
 };
 
 export function createTimelineSpanEventsFromSpanEvents(
   spanEvents: SpanEvent[],
+  isAdmin: boolean,
   relativeStartTime?: number
 ): Array<TimelineSpanEvent> {
   // Rest of function remains the same
@@ -730,14 +727,28 @@ export function createTimelineSpanEventsFromSpanEvents(
     return aTime.getTime() - bTime.getTime();
   });
 
+  const visibleSpanEvents = sortedSpanEvents.filter(
+    (spanEvent) =>
+      isAdmin ||
+      !getAdminOnlyForEvent(
+        "event" in spanEvent.properties && typeof spanEvent.properties.event === "string"
+          ? spanEvent.properties.event
+          : spanEvent.name
+      )
+  );
+
+  if (visibleSpanEvents.length === 0) {
+    return [];
+  }
+
   const firstEventTime =
-    typeof sortedSpanEvents[0].time === "string"
-      ? new Date(sortedSpanEvents[0].time)
-      : sortedSpanEvents[0].time;
+    typeof visibleSpanEvents[0].time === "string"
+      ? new Date(visibleSpanEvents[0].time)
+      : visibleSpanEvents[0].time;
 
   const $relativeStartTime = relativeStartTime ?? firstEventTime.getTime();
 
-  const events = matchingSpanEvents.map((spanEvent, index) => {
+  const events = visibleSpanEvents.map((spanEvent, index) => {
     const timestamp =
       typeof spanEvent.time === "string" ? new Date(spanEvent.time) : spanEvent.time;
 
@@ -767,7 +778,6 @@ export function createTimelineSpanEventsFromSpanEvents(
       timestamp,
       duration,
       properties: spanEvent.properties,
-      adminOnly: getAdminOnlyForEvent(name),
       helpText: getHelpTextForEvent(name),
       markerVariant,
       lineVariant: "light" as const,
@@ -835,13 +845,13 @@ function getAdminOnlyForEvent(event: string): boolean {
 function getHelpTextForEvent(event: string): string | undefined {
   switch (event) {
     case "dequeue": {
-      return "The task was dequeued from the queue";
+      return "The run was dequeued from the queue";
     }
     case "fork": {
       return "The process was created to run the task";
     }
     case "create_attempt": {
-      return "An attempt was created for the task";
+      return "An attempt was created for the run";
     }
     case "import": {
       return "A task file was imported";
@@ -850,22 +860,22 @@ function getHelpTextForEvent(event: string): string | undefined {
       return "The payload was initialized lazily";
     }
     case "pod_scheduled": {
-      return "The Kubernetes pod was scheduled to run the task";
+      return "The Kubernetes pod was scheduled to run";
     }
     case "Triggered": {
-      return "When the run was initially triggered";
+      return "The run was triggered";
     }
     case "Dequeued": {
-      return "When the run is taken from the queue for processing";
+      return "The run was dequeued from the queue";
     }
     case "Started": {
-      return "When the run begins executing";
+      return "The run began executing";
     }
     case "Finished": {
-      return "When the run completes execution";
+      return "The run completed execution";
     }
     case "Expired": {
-      return "When the run expires before it can be processed";
+      return "The run expired before it could be started";
     }
     default: {
       return undefined;

apps/webapp/app/components/runs/v3/SpanTitle.tsx

@@ -144,6 +144,36 @@ export function eventBackgroundClassName(event: RunEvent) {
   }
 }
 
+export function eventBorderClassName(event: RunEvent) {
+  if (event.isError) {
+    return "border-error";
+  }
+
+  if (event.isCancelled) {
+    return "border-charcoal-600";
+  }
+
+  switch (event.level) {
+    case "TRACE": {
+      return backgroundClassNameForVariant(event.style.variant, event.isPartial);
+    }
+    case "LOG":
+    case "INFO":
+    case "DEBUG": {
+      return backgroundClassNameForVariant(event.style.variant, event.isPartial);
+    }
+    case "WARN": {
+      return "border-amber-400";
+    }
+    case "ERROR": {
+      return "border-error";
+    }
+    default: {
+      return backgroundClassNameForVariant(event.style.variant, event.isPartial);
+    }
+  }
+}
+
 function textClassNameForVariant(variant: TaskEventStyle["variant"]) {
   switch (variant) {
     case "primary": {
@@ -168,3 +198,17 @@ function backgroundClassNameForVariant(variant: TaskEventStyle["variant"], isPar
     }
   }
 }
+
+function borderClassNameForVariant(variant: TaskEventStyle["variant"], isPartial: boolean) {
+  switch (variant) {
+    case "primary": {
+      if (isPartial) {
+        return "border-blue-500";
+      }
+      return "border-success";
+    }
+    default: {
+      return "border-charcoal-500";
+    }
+  }
+}

apps/webapp/app/presenters/v3/RunPresenter.server.ts

@@ -123,6 +123,15 @@ export class RunPresenter {
       };
     }
 
+    const user = await this.#prismaClient.user.findFirst({
+      where: {
+        id: userId,
+      },
+      select: {
+        admin: true,
+      },
+    });
+
     //this tree starts at the passed in span (hides parent elements if there are any)
     const tree = createTreeFromFlatItems(traceSummary.spans, run.spanId);
 
@@ -141,6 +150,7 @@ export class RunPresenter {
               ...n.data,
               timelineEvents: createTimelineSpanEventsFromSpanEvents(
                 n.data.events,
+                user?.admin ?? false,
                 treeRootStartTimeMs
               ),
               //set partial nodes to null duration

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -55,7 +55,11 @@ import { NodesState } from "~/components/primitives/TreeView/reducer";
 import { CancelRunDialog } from "~/components/runs/v3/CancelRunDialog";
 import { ReplayRunDialog } from "~/components/runs/v3/ReplayRunDialog";
 import { RunIcon } from "~/components/runs/v3/RunIcon";
-import { SpanTitle, eventBackgroundClassName } from "~/components/runs/v3/SpanTitle";
+import {
+  SpanTitle,
+  eventBackgroundClassName,
+  eventBorderClassName,
+} from "~/components/runs/v3/SpanTitle";
 import { TaskRunStatusIcon, runStatusClassNameColor } from "~/components/runs/v3/TaskRunStatus";
 import { env } from "~/env.server";
 import { useDebounce } from "~/hooks/useDebounce";
@@ -911,7 +915,10 @@ function TimelineView({
                               >
                                 {(ms) => (
                                   <motion.div
-                                    className="-ml-[0.5px] h-[0.5625rem] w-px rounded-none bg-text-dimmed"
+                                    className={cn(
+                                      "-ml-[0.5px] h-[0.5625rem] w-px rounded-none",
+                                      eventBackgroundClassName(node.data)
+                                    )}
                                     layoutId={`${node.id}-${event.name}`}
                                   />
                                 )}
@@ -924,7 +931,10 @@ function TimelineView({
                               >
                                 {(ms) => (
                                   <motion.div
-                                    className="-ml-1 size-[0.3125rem] rounded-full border border-text-dimmed bg-background-bright"
+                                    className={cn(
+                                      "-ml-1 size-[0.3125rem] rounded-full border bg-background-bright",
+                                      eventBorderClassName(node.data)
+                                    )}
                                     layoutId={`${node.id}-${event.name}`}
                                   />
                                 )}
@@ -941,7 +951,7 @@ function TimelineView({
                             )}
                           >
                             <motion.div
-                              className="h-[1px] w-full rounded-none bg-text-dimmed"
+                              className={cn("h-px w-full", eventBackgroundClassName(node.data))}
                               layoutId={`mark-${node.id}`}
                             />
                           </Timeline.Span>
@@ -962,7 +972,7 @@ function TimelineView({
                         {(ms) => (
                           <motion.div
                             className={cn(
-                              "-ml-1 h-3 w-3 rounded-full border-2 border-background-bright",
+                              "-ml-1 size-3 rounded-full border-2 border-background-bright",
                               eventBackgroundClassName(node.data)
                             )}
                             layoutId={node.id}
@@ -1120,11 +1130,11 @@ function LiveReloadingStatus({
 
 function PulsingDot() {
   return (
-    <span className="relative flex h-2 w-2">
+    <span className="relative flex size-2">
       <span
         className={`absolute h-full w-full animate-ping rounded-full border border-blue-500 opacity-100 duration-1000`}
       />
-      <span className={`h-2 w-2 rounded-full bg-blue-500`} />
+      <span className={`size-2 rounded-full bg-blue-500`} />
     </span>
   );
 }

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -310,8 +310,7 @@ function SpanBody({
                     duration={span.duration}
                     inProgress={span.isPartial}
                     isError={span.isError}
-                    showAdminOnlyEvents={isAdmin}
-                    events={createTimelineSpanEventsFromSpanEvents(span.events)}
+                    events={createTimelineSpanEventsFromSpanEvents(span.events, isAdmin)}
                   />
                 </>
               ) : (