cleaned LogDetails view

mpcgrid · mpcgrid · commit 9663a05b82f2 · 2026-01-11T01:57:25.000+02:00
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -1,7 +1,6 @@
 import { XMarkIcon, ArrowTopRightOnSquareIcon, CheckIcon, ClockIcon } from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
 import {
-  formatDurationNanoseconds,
   type MachinePresetName,
   formatDurationMilliseconds,
 } from "@trigger.dev/core/v3";
@@ -267,16 +266,14 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
           >
             {log.level}
           </span>
-          <span className="text-text-dimmed">·</span>
-          <DateTime date={log.startTime} />
         </div>
         <Button variant="minimal/small" onClick={onClose} shortcut={{ key: "esc" }}>
           <XMarkIcon className="size-5" />
         </Button>
       </div>
 
       {/* Tabs */}
-      <div className="border-b border-grid-dimmed px-4">
+      <div className="flex items-center justify-between border-b border-grid-dimmed px-4">
         <TabContainer>
           <TabButton
             isActive={activeTab === "details"}
@@ -295,6 +292,11 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
             Run
           </TabButton>
         </TabContainer>
+        <Link to={runPath} target="_blank" rel="noopener noreferrer">
+          <Button variant="secondary/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
+            View Full Run
+          </Button>
+        </Link>
       </div>
 
       {/* Content */}
@@ -323,87 +325,35 @@ function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: stri
     beautifiedAttributes = formatStringJSON(beautifiedAttributes);
   }
 
-  // const showMetadata = beautifiedMetadata && beautifiedMetadata !== "{}";
   const showAttributes = beautifiedAttributes && beautifiedAttributes !== "{}";
 
+  // Determine message to show
+  let message = log.message;
+
+  if (log.status === 'ERROR'){
+   message = (logWithExtras?.attributes?.error as any)?.message;
+  }
+
   return (
     <>
+      {/* Time */}
+      <div className="mb-6">
+        <Header3 className="mb-2">Time</Header3>
+        <div className="text-sm text-text-dimmed">
+          <DateTime date={log.startTime} />
+        </div>
+      </div>
+
       {/* Message */}
       <div className="mb-6">
         <Header3 className="mb-2">Message</Header3>
         <div className="rounded-md border border-grid-dimmed bg-charcoal-850 p-3">
           <div className="whitespace-pre-wrap break-words font-mono text-sm text-text-bright">
-            {highlightJsonWithSearch(log.message, searchTerm)}
+            {highlightJsonWithSearch(message, searchTerm)}
           </div>
         </div>
       </div>
 
-      {/* Run Link */}
-      <div className="mb-6">
-        <Header3 className="mb-2">Run</Header3>
-        <div className="flex items-center gap-3">
-          <span className="font-mono text-sm text-text-bright">{log.runId}</span>
-          <Link to={runPath} target="_blank" rel="noopener noreferrer">
-            <Button variant="tertiary/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
-              View in Run
-            </Button>
-          </Link>
-        </div>
-      </div>
-
-      {/* Details */}
-      <div className="mb-6">
-        <Header3 className="mb-2">Details</Header3>
-        <Property.Table>
-          <Property.Item>
-            <Property.Label>Task</Property.Label>
-            <Property.Value>
-              <span className="font-mono">{log.taskIdentifier}</span>
-            </Property.Value>
-          </Property.Item>
-
-          <Property.Item>
-            <Property.Label>Kind</Property.Label>
-            <Property.Value>{log.kind}</Property.Value>
-          </Property.Item>
-
-          <Property.Item>
-            <Property.Label>Duration</Property.Label>
-            <Property.Value className="flex items-center gap-1">
-              <ClockIcon className="size-4 text-text-dimmed" />
-              <span>
-                {log.duration > 0
-                  ? formatDurationNanoseconds(log.duration, { style: "short" })
-                  : "–"}
-              </span>
-            </Property.Value>
-          </Property.Item>
-
-          <Property.Item>
-            <Property.Label>Trace ID</Property.Label>
-            <Property.Value>
-              <span className="font-mono text-xs">{log.traceId}</span>
-            </Property.Value>
-          </Property.Item>
-
-          <Property.Item>
-            <Property.Label>Span ID</Property.Label>
-            <Property.Value>
-              <span className="font-mono text-xs">{log.spanId}</span>
-            </Property.Value>
-          </Property.Item>
-
-          {log.parentSpanId && (
-            <Property.Item>
-              <Property.Label>Parent Span ID</Property.Label>
-              <Property.Value>
-                <span className="font-mono text-xs">{log.parentSpanId}</span>
-              </Property.Value>
-            </Property.Item>
-          )}
-        </Property.Table>
-      </div>
-
       {/* Attributes - only available in full log detail */}
       {showAttributes && beautifiedAttributes && (
         <div className="mb-6">
@@ -463,6 +413,13 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
   return (
     <div className="flex flex-col gap-4 py-3">
       <Property.Table>
+        <Property.Item>
+          <Property.Label>Run ID</Property.Label>
+          <Property.Value>
+            <CopyableText value={runData.friendlyId} copyValue={runData.friendlyId} asChild />
+          </Property.Value>
+        </Property.Item>
+
         <Property.Item>
           <Property.Label>Status</Property.Label>
           <Property.Value>
@@ -477,22 +434,10 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
         <Property.Item>
           <Property.Label>Task</Property.Label>
           <Property.Value>
-            <SimpleTooltip
-              button={
-                <TextLink
-                  to={v3RunsPath(organization, project, environment, {
-                    tasks: [runData.taskIdentifier],
-                  })}
-                >
-                  <CopyableText
-                    value={runData.taskIdentifier}
-                    copyValue={runData.taskIdentifier}
-                    asChild
-                  />
-                </TextLink>
-              }
-              content={`View runs filtered by ${runData.taskIdentifier}`}
-              disableHoverableContent
+            <CopyableText
+              value={runData.taskIdentifier}
+              copyValue={runData.taskIdentifier}
+              asChild
             />
           </Property.Value>
         </Property.Item>
@@ -673,22 +618,7 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
               : "–"}
           </Property.Value>
         </Property.Item>
-
-        <Property.Item>
-          <Property.Label>Run ID</Property.Label>
-          <Property.Value>
-            <CopyableText value={runData.friendlyId} copyValue={runData.friendlyId} asChild />
-          </Property.Value>
-        </Property.Item>
       </Property.Table>
-
-      <div className="flex justify-end gap-2 pt-2">
-        <Link to={runPath} target="_blank" rel="noopener noreferrer">
-          <Button variant="secondary/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
-            View Full Run
-          </Button>
-        </Link>
-      </div>
     </div>
   );
 }
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -1,4 +1,4 @@
-import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 import { formatDurationNanoseconds } from "@trigger.dev/core/v3";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "~/utils/cn";
@@ -17,11 +17,13 @@ import {
   TableBlankRow,
   TableBody,
   TableCell,
+  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
   type TableVariant,
 } from "../primitives/Table";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
 
 type LogsTableProps = {
   logs: LogEntry[];
@@ -161,10 +163,10 @@ export function LogsTable({
       <Table variant="compact/mono" containerClassName="overflow-visible">
         <TableHeader className="sticky top-0 z-10">
           <TableRow>
-            <TableHeaderCell className="w-48 whitespace-nowrap">Time</TableHeaderCell>
-            <TableHeaderCell className="w-24 whitespace-nowrap">Run</TableHeaderCell>
-            <TableHeaderCell className="w-32 whitespace-nowrap">Task</TableHeaderCell>
-            <TableHeaderCell className="whitespace-nowrap">Level</TableHeaderCell>
+            <TableHeaderCell className="min-w-48 whitespace-nowrap">Time</TableHeaderCell>
+            <TableHeaderCell className="min-w-24 whitespace-nowrap">Run</TableHeaderCell>
+            <TableHeaderCell className="min-w-32 whitespace-nowrap">Task</TableHeaderCell>
+            <TableHeaderCell className="min-w-24 whitespace-nowrap">Level</TableHeaderCell>
             <TableHeaderCell className="w-full min-w-0">Message</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -208,7 +210,7 @@ export function LogsTable({
                   <TableCell className="min-w-24">
                     <TruncatedCopyableValue value={log.runId} />
                   </TableCell>
-                  <TableCell className="min-w-32"  onClick={handleRowClick} hasAction>
+                  <TableCell className="min-w-32" onClick={handleRowClick} hasAction>
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>
@@ -226,6 +228,17 @@ export function LogsTable({
                       {highlightText(log.message, searchTerm)}
                     </span>
                   </TableCell>
+                  <TableCellMenu
+                    className="pl-32"
+                    hiddenButtons={
+                      <PopoverMenuItem
+                        openInNewTab={true}
+                        to={runPath}
+                        icon={ArrowTopRightOnSquareIcon}
+                        title="View Run"
+                      />
+                    }
+                  />
                 </TableRow>
               );
             })
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
@@ -65,6 +65,7 @@ const PopoverMenuItem = React.forwardRef<
     className?: string;
     onClick?: React.MouseEventHandler;
     disabled?: boolean;
+    openInNewTab?: boolean;
   }
 >(
   (
@@ -78,6 +79,7 @@ const PopoverMenuItem = React.forwardRef<
       className,
       onClick,
       disabled,
+      openInNewTab = false,
     },
     ref
   ) => {
@@ -102,6 +104,8 @@ const PopoverMenuItem = React.forwardRef<
           ref={ref as React.Ref<HTMLAnchorElement>}
           className={cn("group/button focus-custom", contentProps.fullWidth ? "w-full" : "")}
           onClick={onClick as any}
+          target={openInNewTab ? "_blank" : undefined}
+          rel={openInNewTab ? "noopener noreferrer" : undefined}
         >
           <ButtonContent {...contentProps}>{title}</ButtonContent>
         </Link>
