in run page added timestamp filtering when jumping to view logs

reduced spinner delay
removed execution time column
removed metadata from side panel

Author: mpcgrid

apps/webapp/app/components/logs/LogDetailView.tsx

@@ -312,26 +312,18 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
 
 function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: string; searchTerm?: string }) {
   const logWithExtras = log as LogEntry & {
-    metadata?: Record<string, unknown>;
     attributes?: Record<string, unknown>;
   };
 
 
-  let metadata: Record<string, unknown> | null = null;
-  let beautifiedMetadata: string | null = null;
   let beautifiedAttributes: string | null = null;
 
-  if (logWithExtras.metadata) {
-    beautifiedMetadata = JSON.stringify(logWithExtras.metadata, null, 2);
-    beautifiedMetadata = formatStringJSON(beautifiedMetadata);
-  }
-
   if (logWithExtras.attributes) {
     beautifiedAttributes = JSON.stringify(logWithExtras.attributes, null, 2);
     beautifiedAttributes = formatStringJSON(beautifiedAttributes);
   }
 
-  const showMetadata = beautifiedMetadata && beautifiedMetadata !== "{}";
+  // const showMetadata = beautifiedMetadata && beautifiedMetadata !== "{}";
   const showAttributes = beautifiedAttributes && beautifiedAttributes !== "{}";
 
   return (
@@ -412,18 +404,6 @@ function DetailsTab({ log, runPath, searchTerm }: { log: LogEntry; runPath: stri
         </Property.Table>
       </div>
 
-      {/* Metadata - only available in full log detail */}
-      {showMetadata && beautifiedMetadata && (
-        <div className="mb-6">
-          <PacketDisplay
-            data={beautifiedMetadata}
-            dataType="application/json"
-            title="Metadata"
-            searchTerm={searchTerm}
-          />
-        </div>
-      )}
-
       {/* Attributes - only available in full log detail */}
       {showAttributes && beautifiedAttributes && (
         <div className="mb-6">
@@ -519,7 +499,7 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
 
         {runData.rootRun && (
           <Property.Item>
-            <Property.Label>Root run</Property.Label>
+            <Property.Label>Root and parent run</Property.Label>
             <Property.Value>
               <SimpleTooltip
                 button={
@@ -550,39 +530,6 @@ function RunTab({ log, runPath }: { log: LogEntry; runPath: string }) {
           </Property.Item>
         )}
 
-        {runData.parentRun && (
-          <Property.Item>
-            <Property.Label>Parent run</Property.Label>
-            <Property.Value>
-              <SimpleTooltip
-                button={
-                  <TextLink
-                    to={v3RunPath(organization, project, environment, {
-                      friendlyId: runData.parentRun.friendlyId,
-                    })}
-                    className="group flex flex-wrap items-center gap-x-1 gap-y-0"
-                  >
-                    <CopyableText
-                      value={runData.parentRun.taskIdentifier}
-                      copyValue={runData.parentRun.taskIdentifier}
-                      asChild
-                    />
-                    <span className="break-all text-text-dimmed transition-colors group-hover:text-text-bright/80">
-                      <CopyableText
-                        value={runData.parentRun.friendlyId}
-                        copyValue={runData.parentRun.friendlyId}
-                        asChild
-                      />
-                    </span>
-                  </TextLink>
-                }
-                content={`Jump to parent run`}
-                disableHoverableContent
-              />
-            </Property.Value>
-          </Property.Item>
-        )}
-
         {runData.batch && (
           <Property.Item>
             <Property.Label>Batch</Property.Label>

apps/webapp/app/components/logs/LogsTable.tsx

@@ -117,7 +117,7 @@ export function LogsTable({
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [showLoadMoreSpinner, setShowLoadMoreSpinner] = useState(false);
 
-  // Show load more spinner only after 0.5 seconds of loading time
+  // Show load more spinner only after 0.2 seconds of loading time
   useEffect(() => {
     if (!isLoadingMore) {
       setShowLoadMoreSpinner(false);
@@ -126,7 +126,7 @@ export function LogsTable({
 
     const timer = setTimeout(() => {
       setShowLoadMoreSpinner(true);
-    }, 500);
+    }, 200);
 
     return () => clearTimeout(timer);
   }, [isLoadingMore]);
@@ -165,7 +165,6 @@ export function LogsTable({
             <TableHeaderCell className="w-24 whitespace-nowrap">Run</TableHeaderCell>
             <TableHeaderCell className="w-32 whitespace-nowrap">Task</TableHeaderCell>
             <TableHeaderCell className="whitespace-nowrap">Level</TableHeaderCell>
-            <TableHeaderCell className="whitespace-nowrap">Duration</TableHeaderCell>
             <TableHeaderCell className="w-full min-w-0">Message</TableHeaderCell>
           </TableRow>
         </TableHeader>
@@ -222,15 +221,6 @@ export function LogsTable({
                       {log.level}
                     </span>
                   </TableCell>
-                  <TableCell
-                    className="whitespace-nowrap tabular-nums text-text-dimmed"
-                    onClick={handleRowClick}
-                    hasAction
-                  >
-                    {log.duration > 0
-                      ? formatDurationNanoseconds(log.duration, { style: "short" })
-                      : "–"}
-                  </TableCell>
                   <TableCell className="max-w-0 truncate" onClick={handleRowClick} hasAction>
                     <span className="block truncate font-mono text-xs" title={log.message}>
                       {highlightText(log.message, searchTerm)}

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

@@ -71,6 +71,7 @@ import {
   docsPath,
   v3BatchPath,
   v3DeploymentVersionPath,
+  v3LogsPath,
   v3RunDownloadLogsPath,
   v3RunIdempotencyKeyResetPath,
   v3RunPath,
@@ -572,7 +573,9 @@ function RunBody({
                   <Property.Value>
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="break-all">{run.idempotencyKey ? run.idempotencyKey : "–"}</div>
+                        <div className="break-all">
+                          {run.idempotencyKey ? run.idempotencyKey : "–"}
+                        </div>
                         {run.idempotencyKey && (
                           <div>
                             Expires:{" "}
@@ -587,7 +590,9 @@ function RunBody({
                       {run.idempotencyKey && (
                         <resetFetcher.Form
                           method="post"
-                          action={v3RunIdempotencyKeyResetPath(organization, project, environment, { friendlyId: runParam })}
+                          action={v3RunIdempotencyKeyResetPath(organization, project, environment, {
+                            friendlyId: runParam,
+                          })}
                         >
                           <input type="hidden" name="taskIdentifier" value={run.taskIdentifier} />
                           <Button
@@ -942,17 +947,27 @@ function RunBody({
         </div>
         <div className="flex items-center gap-4">
           {run.logsDeletedAt === null ? (
-            <LinkButton
-              to={v3RunDownloadLogsPath({ friendlyId: runParam })}
-              LeadingIcon={CloudArrowDownIcon}
-              leadingIconClassName="text-indigo-400"
-              variant="secondary/medium"
-              target="_blank"
-              download
-            >
-              Download logs
-            </LinkButton>
+            <>
+              <LinkButton
+                to={`${v3LogsPath(organization, project, environment)}?runId=${runParam}&from=${new Date(run.createdAt).getTime() - 60000}`}
+                variant="secondary/medium"
+              >
+                View logs
+              </LinkButton>
+              <LinkButton
+                to={v3RunDownloadLogsPath({ friendlyId: runParam })}
+                LeadingIcon={CloudArrowDownIcon}
+                leadingIconClassName="text-indigo-400"
+                variant="secondary/medium"
+                target="_blank"
+                download
+              >
+                Download logs
+              </LinkButton>
+            </>
           ) : null}
+
+
         </div>
       </div>
     </div>