Merge remote-tracking branch 'origin/feature/tri-6738-show-aggregated-logs-in-main-page' into feature/tri-6738-show-aggregated-logs-in-main-page

mpcgrid · mpcgrid · commit 54ba468fe44c · 2026-01-02T02:30:38.000+02:00
diff --git a/apps/webapp/app/assets/icons/LogsIcon.tsx b/apps/webapp/app/assets/icons/LogsIcon.tsx
@@ -0,0 +1,66 @@
+export function LogsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="4" cy="10" r="1" fill="currentColor" />
+      <circle cx="4" cy="5" r="1" fill="currentColor" />
+      <circle cx="4" cy="14" r="1" fill="currentColor" />
+      <circle cx="4" cy="19" r="1" fill="currentColor" />
+      <path
+        d="M7 9.75L10 9.75"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 5L10 5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 14.25H10"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 19H10"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 5H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 9.75H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 14.25H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 19H20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -1,4 +1,5 @@
-import { ArrowPathIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { Link } from "@remix-run/react";
 import { formatDurationNanoseconds } from "@trigger.dev/core/v3";
 import { type ReactNode, useEffect, useRef } from "react";
 import { cn } from "~/utils/cn";
@@ -11,6 +12,7 @@ import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { DateTime } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
 import { Spinner } from "../primitives/Spinner";
+import { SimpleTooltip } from "../primitives/Tooltip";
 import {
   Table,
   TableBlankRow,
@@ -84,15 +86,12 @@ function getLevelBorderColor(level: LogEntry["level"]): string {
     case "TRACE":
     case "LOG":
     default:
-      return "border-l-transparent";
+      return "border-l-transparent hover:border-l-charcoal-800";
   }
 }
 
 // Case-insensitive text highlighting
-function highlightText(
-  text: string,
-  searchTerm: string | undefined
-): ReactNode {
+function highlightText(text: string, searchTerm: string | undefined): ReactNode {
   if (!searchTerm || searchTerm.trim() === "") {
     return text;
   }
@@ -161,7 +160,7 @@ export function LogsTable({
 
   return (
     <div className="relative h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-      <Table variant={variant}>
+      <Table variant="compact/mono">
         <TableHeader>
           <TableRow>
             <TableHeaderCell>Time</TableHeaderCell>
@@ -197,11 +196,9 @@ export function LogsTable({
                 <TableRow
                   key={log.id}
                   className={cn(
-                    "cursor-pointer transition-colors border-l-2",
+                    "cursor-pointer border-l-2 transition-colors",
                     getLevelBorderColor(log.level),
-                    isSelected
-                      ? "bg-charcoal-750"
-                      : "hover:bg-charcoal-850"
+                    isSelected ? "bg-charcoal-750" : "hover:bg-charcoal-850"
                   )}
                   isSelected={isSelected}
                 >
@@ -213,22 +210,26 @@ export function LogsTable({
                     <DateTime date={log.startTime} />
                   </TableCell>
                   <TableCell>
-                    <a
-                      href={runPath}
-                      className="flex items-center gap-1 text-blue-500 hover:underline"
-                      title="View run"
-                    >
-                      <span className="font-mono text-xs">{log.runId.slice(0, 12)}...</span>
-                      <ArrowTopRightOnSquareIcon className="size-3" />
-                    </a>
+                    <SimpleTooltip
+                      content="Jump to run"
+                      disableHoverableContent
+                      button={
+                        <Link
+                          to={runPath}
+                          className="flex items-center gap-1 text-blue-500 hover:text-blue-400"
+                        >
+                          {log.runId.slice(0, 12)}…
+                        </Link>
+                      }
+                    />
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>
                     <span
                       className={cn(
-                        "inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase",
+                        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
                         getLevelColor(log.level)
                       )}
                     >
@@ -238,7 +239,7 @@ export function LogsTable({
                   <TableCell onClick={handleRowClick} hasAction>
                     <span
                       className={cn(
-                        "inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium",
+                        "inline-flex items-center rounded border px-1 py-0.5 text-xxs font-medium uppercase tracking-wider",
                         getStatusColor(log.status)
                       )}
                     >
@@ -255,10 +256,7 @@ export function LogsTable({
                       : "–"}
                   </TableCell>
                   <TableCell className="max-w-0 truncate" onClick={handleRowClick} hasAction>
-                    <span
-                      className="block truncate font-mono text-xs"
-                      title={log.message}
-                    >
+                    <span className="block truncate font-mono text-xs" title={log.message}>
                       {highlightText(log.message, searchTerm)}
                     </span>
                   </TableCell>
@@ -270,10 +268,7 @@ export function LogsTable({
       </Table>
       {/* Infinite scroll trigger */}
       {hasMore && logs.length > 0 && (
-        <div
-          ref={loadMoreRef}
-          className="flex items-center justify-center py-4"
-        >
+        <div ref={loadMoreRef} className="flex items-center justify-center py-4">
           {isLoadingMore && (
             <div className="flex items-center gap-2">
               <Spinner /> <span className="text-text-dimmed">Loading more…</span>
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -8,7 +8,6 @@ import {
   ClockIcon,
   Cog8ToothIcon,
   CogIcon,
-  DocumentTextIcon,
   FolderIcon,
   FolderOpenIcon,
   GlobeAmericasIcon,
@@ -24,9 +23,10 @@ import {
 import { Link, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
-import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
+import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
+import { LogsIcon } from "~/assets/icons/LogsIcon";
 import { RunsIconExtraSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
@@ -57,10 +57,10 @@ import {
   v3BatchesPath,
   v3BillingPath,
   v3BulkActionsPath,
-  v3LogsPath,
   v3DeploymentsPath,
   v3EnvironmentPath,
   v3EnvironmentVariablesPath,
+  v3LogsPath,
   v3ProjectAlertsPath,
   v3ProjectPath,
   v3ProjectSettingsPath,
@@ -264,8 +264,8 @@ export function SideMenu({
             />
             <SideMenuItem
               name="Logs"
-              icon={DocumentTextIcon}
-              activeIconColor="text-deployments"
+              icon={LogsIcon}
+              activeIconColor="text-logs"
               to={v3LogsPath(organization, project, environment)}
               data-action="logs"
             />
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
@@ -8,7 +8,10 @@ import { InfoIconTooltip } from "./Tooltip";
 const variants = {
   bright: {
     header: "bg-background-bright",
+    headerCell: "px-3 py-2.5 pb-3 text-sm",
     cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
+    cellSize: "px-3 py-3",
+    cellText: "text-xs group-hover/table-row:text-text-bright",
     stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
     menuButton:
       "bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
@@ -17,7 +20,22 @@ const variants = {
   },
   dimmed: {
     header: "bg-background-dimmed",
+    headerCell: "px-3 py-2.5 pb-3 text-sm",
     cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cellSize: "px-3 py-3",
+    cellText: "text-xs group-hover/table-row:text-text-bright",
+    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    menuButton:
+      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    menuButtonDivider: "group-hover/table-row:border-grid-bright",
+    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+  },
+  "compact/mono": {
+    header: "bg-background-dimmed",
+    headerCell: "px-2 py-1.5 text-sm",
+    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cellSize: "px-2 py-1.5",
+    cellText: "text-xs font-mono group-hover/table-row:text-text-bright",
     stickyCell: "group-hover/table-row:bg-charcoal-800",
     menuButton:
       "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
@@ -136,6 +154,7 @@ type TableHeaderCellProps = TableCellBasicProps & {
 
 export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
   ({ className, alignment = "left", children, colSpan, hiddenLabel = false, tooltip }, ref) => {
+    const { variant } = useContext(TableContext);
     let alignmentClassName = "text-left";
     switch (alignment) {
       case "center":
@@ -151,7 +170,8 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         ref={ref}
         scope="col"
         className={cn(
-          "px-3 py-2.5 pb-3 align-middle text-sm font-medium text-text-bright",
+          "align-middle font-medium text-text-bright",
+          variants[variant].headerCell,
           alignmentClassName,
           className
         )}
@@ -217,23 +237,28 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
         break;
     }
 
+    const { variant } = useContext(TableContext);
     const flexClasses = cn(
-      "flex w-full whitespace-nowrap px-3 py-3 items-center text-xs text-text-dimmed",
+      "flex w-full whitespace-nowrap items-center text-text-dimmed",
+      variants[variant].cellSize,
+      variants[variant].cellText,
       alignment === "left"
         ? "justify-start text-left"
         : alignment === "center"
         ? "justify-center text-center"
         : "justify-end text-right"
     );
-    const { variant } = useContext(TableContext);
 
     return (
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
+          "text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
+          variants[variant].cellText,
           variants[variant].cell,
-          to || onClick || hasAction ? "cursor-pointer" : "cursor-default px-3 py-3 align-middle",
+          to || onClick || hasAction
+            ? "cursor-pointer"
+            : cn("cursor-default align-middle", variants[variant].cellSize),
           !to && !onClick && alignmentClassName,
           isSticky &&
             "[&:has(.group-hover/table-row:block)]:w-auto sticky right-0 bg-background-dimmed",
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -5,8 +5,8 @@ import { cn } from "~/utils/cn";
 
 const variantClasses = {
   basic:
-    "bg-background-bright border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
-  dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50"
+    "bg-background-bright border border-grid-bright rounded px-2 py-1.5 text-xs text-text-bright shadow-md fade-in-50",
+  dark: "bg-background-dimmed border border-grid-bright rounded px-2 py-1.5 text-xs text-text-bright shadow-md fade-in-50",
 };
 
 type Variant = keyof typeof variantClasses;
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
@@ -160,6 +160,7 @@ const batches = colors.pink[500];
 const schedules = colors.yellow[500];
 const queues = colors.purple[500];
 const deployments = colors.green[500];
+const logs = colors.blue[500];
 const tests = colors.lime[500];
 const apiKeys = colors.amber[500];
 const environmentVariables = colors.pink[500];
@@ -236,6 +237,7 @@ module.exports = {
         schedules,
         queues,
         deployments,
+        logs,
         tests,
         apiKeys,
         environmentVariables,
