root friendlyId works

Author: samejr

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

@@ -61,6 +61,14 @@ export class RunPresenter {
             createdAt: true,
           },
         },
+        parentTaskRun: {
+          select: {
+            friendlyId: true,
+            taskIdentifier: true,
+            spanId: true,
+            createdAt: true,
+          },
+        },
         runtimeEnvironment: {
           select: {
             id: true,
@@ -109,6 +117,7 @@ export class RunPresenter {
       completedAt: run.completedAt,
       logsDeletedAt: showDeletedLogs ? null : run.logsDeletedAt,
       rootTaskRun: run.rootTaskRun,
+      parentTaskRun: run.parentTaskRun,
       environment: {
         id: run.runtimeEnvironment.id,
         organizationId: run.runtimeEnvironment.organizationId,
@@ -199,8 +208,6 @@ export class RunPresenter {
       trace: {
         rootSpanStatus,
         events: events,
-        parentRunFriendlyId:
-          tree?.id === traceSummary.rootSpan.id ? undefined : traceSummary.rootSpan.runId,
         duration: totalDuration,
         rootStartedAt: tree?.data.startTime,
         startedAt: run.startedAt,

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

@@ -11,7 +11,7 @@ import {
   MagnifyingGlassPlusIcon,
   StopCircleIcon,
 } from "@heroicons/react/20/solid";
-import { useLoaderData, useParams, useRevalidator } from "@remix-run/react";
+import { useLoaderData, useRevalidator } from "@remix-run/react";
 import { type LoaderFunctionArgs, type SerializeFrom, json } from "@remix-run/server-runtime";
 import { type Virtualizer } from "@tanstack/react-virtual";
 import {
@@ -25,7 +25,8 @@ import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { redirect } from "remix-typedjson";
-import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
+import { MoveToTopIcon } from "~/assets/icons/MoveToTopIcon";
+import { MoveUpIcon } from "~/assets/icons/MoveUpIcon";
 import tileBgPath from "~/assets/images/[email protected]";
 import { DevDisconnectedBanner, useCrossEngineIsConnected } from "~/components/DevPresence";
 import { WarmStartIconWithTooltip } from "~/components/WarmStarts";
@@ -87,15 +88,13 @@ import {
   docsPath,
   v3BillingPath,
   v3RunParamsSchema,
-  v3RunPath,
   v3RunRedirectPath,
   v3RunSpanPath,
   v3RunStreamingPath,
   v3RunsPath,
 } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
-import { TextLink } from "~/components/primitives/TextLink";
 
 const resizableSettings = {
   parent: {
@@ -297,8 +296,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
     return <></>;
   }
 
-  const { events, parentRunFriendlyId, duration, rootSpanStatus, rootStartedAt, queuedDuration } =
-    trace;
+  const { events, duration, rootSpanStatus, rootStartedAt, queuedDuration } = trace;
   const shouldLiveReload = events.length <= maximumLiveReloadingSetting;
 
   const changeToSpan = useDebounce((selectedSpan: string) => {
@@ -335,7 +333,6 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
             selectedId={selectedSpanId}
             key={events[0]?.id ?? "-"}
             events={events}
-            parentRunFriendlyId={parentRunFriendlyId}
             onSelectedIdChanged={(selectedSpan) => {
               //instantly close the panel if no span is selected
               if (!selectedSpan) {
@@ -353,6 +350,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
             shouldLiveReload={shouldLiveReload}
             maximumLiveReloadingSetting={maximumLiveReloadingSetting}
             rootRun={run.rootTaskRun}
+            parentRun={run.parentTaskRun}
             isCompleted={run.completedAt !== null}
           />
         </ResizablePanel>
@@ -471,7 +469,6 @@ function NoLogsView({ run, resizable }: LoaderData) {
 type TasksTreeViewProps = {
   events: TraceEvent[];
   selectedId?: string;
-  parentRunFriendlyId?: string;
   onSelectedIdChanged: (selectedId: string | undefined) => void;
   totalDuration: number;
   rootSpanStatus: "executing" | "completed" | "failed";
@@ -485,13 +482,17 @@ type TasksTreeViewProps = {
     taskIdentifier: string;
     spanId: string;
   } | null;
+  parentRun: {
+    friendlyId: string;
+    taskIdentifier: string;
+    spanId: string;
+  } | null;
   isCompleted: boolean;
 };
 
 function TasksTreeView({
   events,
   selectedId,
-  parentRunFriendlyId,
   onSelectedIdChanged,
   totalDuration,
   rootSpanStatus,
@@ -501,6 +502,7 @@ function TasksTreeView({
   shouldLiveReload,
   maximumLiveReloadingSetting,
   rootRun,
+  parentRun,
   isCompleted,
 }: TasksTreeViewProps) {
   const isAdmin = useHasAdminAccess();
@@ -584,35 +586,32 @@ function TasksTreeView({
           id={resizableSettings.tree.tree.id}
           default={resizableSettings.tree.tree.default}
           min={resizableSettings.tree.tree.min}
-          className="pl-3"
         >
           <div className="grid h-full grid-rows-[2rem_1fr] overflow-hidden">
-            <div className="flex items-center pr-2">
-              {rootRun || parentRunFriendlyId ? (
+            <div className="flex items-center pl-1 pr-2">
+              {rootRun || parentRun ? (
                 <ShowParentOrRootLinks
                   relationships={{
                     root: rootRun
                       ? {
                           friendlyId: rootRun.friendlyId,
                           taskIdentifier: rootRun.taskIdentifier,
                           spanId: rootRun.spanId,
-                          isParent: parentRunFriendlyId
-                            ? rootRun.friendlyId === parentRunFriendlyId
-                            : true,
+                          isParent: parentRun ? rootRun.friendlyId === parentRun.friendlyId : true,
                         }
                       : undefined,
                     parent:
-                      parentRunFriendlyId && rootRun?.friendlyId !== parentRunFriendlyId
+                      parentRun && rootRun?.friendlyId !== parentRun.friendlyId
                         ? {
-                            friendlyId: parentRunFriendlyId,
+                            friendlyId: parentRun.friendlyId,
                             taskIdentifier: "",
                             spanId: "",
                           }
                         : undefined,
                   }}
                 />
               ) : (
-                <Paragraph variant="extra-small" className="flex-1 text-charcoal-500">
+                <Paragraph variant="extra-small" className="flex-1 pl-3 text-charcoal-500">
                   This is the root task
                 </Paragraph>
               )}
@@ -631,6 +630,7 @@ function TasksTreeView({
               nodes={nodes}
               getNodeProps={getNodeProps}
               getTreeProps={getTreeProps}
+              parentClassName="pl-3"
               renderNode={({ node, state, index }) => (
                 <>
                   <div
@@ -1166,54 +1166,81 @@ function ShowParentOrRootLinks({
   // Case 1: Root is also the parent
   if (relationships.root?.isParent === true) {
     return (
-      <TextLink
+      <LinkButton
+        variant="minimal/small"
         to={v3RunSpanPath(
           organization,
           project,
           environment,
           { friendlyId: relationships.root.friendlyId },
           { spanId: relationships.root.spanId }
         )}
+        LeadingIcon={MoveToTopIcon}
         shortcut={{ key: "t" }}
+        hideShortcutKey
+        tooltip={
+          <div className="-mr-1 flex items-center gap-1">
+            <Paragraph variant="extra-small">Jump to root/parent run</Paragraph>
+            <ShortcutKey shortcut={{ key: "t" }} variant="small" />
+          </div>
+        }
         className="text-xs"
       >
-        Jump to Root & Parent
-      </TextLink>
+        Root/parent
+      </LinkButton>
     );
   }
 
   // Case 2: Root and Parent are different runs
   return (
-    <div className="flex flex-1 items-center gap-2">
+    <div className="flex items-center">
       {relationships.root && (
-        <TextLink
+        <LinkButton
+          variant="minimal/small"
           to={v3RunSpanPath(
             organization,
             project,
             environment,
             { friendlyId: relationships.root.friendlyId },
             { spanId: relationships.root.spanId }
           )}
+          LeadingIcon={MoveToTopIcon}
           shortcut={{ key: "t" }}
+          hideShortcutKey
+          tooltip={
+            <div className="-mr-1 flex items-center gap-1">
+              <Paragraph variant="extra-small">Jump to root run</Paragraph>
+              <ShortcutKey shortcut={{ key: "t" }} variant="small" />
+            </div>
+          }
           className="text-xs"
         >
-          Jump to Root
-        </TextLink>
+          Root
+        </LinkButton>
       )}
       {relationships.parent && (
-        <TextLink
+        <LinkButton
+          variant="minimal/small"
           to={v3RunSpanPath(
             organization,
             project,
             environment,
             { friendlyId: relationships.parent.friendlyId },
             { spanId: relationships.parent.spanId }
           )}
+          LeadingIcon={MoveUpIcon}
           shortcut={{ key: "p" }}
+          hideShortcutKey
+          tooltip={
+            <div className="-mr-1 flex items-center gap-1">
+              <Paragraph variant="extra-small">Jump to parent run</Paragraph>
+              <ShortcutKey shortcut={{ key: "p" }} variant="small" />
+            </div>
+          }
           className="text-xs"
         >
-          Jump to Parent
-        </TextLink>
+          Parent
+        </LinkButton>
       )}
     </div>
   );