extracted log utils for duplicated logic

Author: mpcgrid

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

@@ -21,6 +21,7 @@ import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
+import { getLevelColor } from "~/utils/logUtils";
 import { v3RunSpanPath, v3RunsPath, v3BatchPath, v3RunPath, v3DeploymentVersionPath } from "~/utils/pathBuilder";
 import type { loader as logDetailLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId";
 import { TaskRunStatusCombo, descriptionForTaskRunStatus } from "~/components/runs/v3/TaskRunStatus";
@@ -68,26 +69,6 @@ type LogDetailViewProps = {
 
 type TabType = "details" | "run";
 
-// Level badge color styles
-function getLevelColor(level: string): string {
-  switch (level) {
-    case "ERROR":
-      return "text-error bg-error/10 border-error/20";
-    case "WARN":
-      return "text-warning bg-warning/10 border-warning/20";
-    case "DEBUG":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
-    case "INFO":
-      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
-    case "TRACE":
-      return "text-charcoal-500 bg-charcoal-800 border-charcoal-700";
-    case "CANCELLED":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
-    default:
-      return "text-text-dimmed bg-charcoal-750 border-charcoal-700";
-  }
-}
-
 // Event kind badge color styles
 function getKindColor(kind: string): string {
   if (kind === "SPAN") {

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

@@ -7,6 +7,7 @@ import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import type { LogEntry, LogsListAppliedFilters } from "~/presenters/v3/LogsListPresenter.server";
+import { getLevelColor } from "~/utils/logUtils";
 import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { DateTime } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
@@ -39,26 +40,6 @@ type LogsTableProps = {
   onLogSelect?: (logId: string) => void;
 };
 
-// Level badge color styles
-function getLevelColor(level: LogEntry["level"]): string {
-  switch (level) {
-    case "ERROR":
-      return "text-error bg-error/10 border-error/20";
-    case "WARN":
-      return "text-warning bg-warning/10 border-warning/20";
-    case "DEBUG":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
-    case "INFO":
-      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
-    case "TRACE":
-      return "text-charcoal-500 bg-charcoal-800 border-charcoal-700";
-    case "CANCELLED":
-      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
-    default:
-      return "text-text-dimmed bg-charcoal-750 border-charcoal-700";
-  }
-}
-
 // Left border color for error highlighting
 function getLevelBorderColor(level: LogEntry["level"]): string {
   switch (level) {

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

@@ -1,6 +1,7 @@
 import { type ClickHouse } from "@internal/clickhouse";
 import { type PrismaClientOrTransaction } from "@trigger.dev/database";
 import { convertClickhouseDateTime64ToJsDate } from "~/v3/eventRepository/clickhouseEventRepository.server";
+import { kindToLevel } from "~/utils/logUtils";
 
 export type LogDetailOptions = {
   environmentId: string;
@@ -14,38 +15,6 @@ export type LogDetailOptions = {
 
 export type LogDetail = Awaited<ReturnType<LogDetailPresenter["call"]>>;
 
-// Convert ClickHouse kind to display level
-type LogLevel = "TRACE" | "DEBUG" | "INFO" | "WARN" | "ERROR" | "CANCELLED";
-
-function kindToLevel(kind: string, status: string): LogLevel {
-  // CANCELLED status takes precedence
-  if (status === "CANCELLED") {
-    return "CANCELLED";
-  }
-
-  // ERROR can come from either kind or status
-  if (kind === "LOG_ERROR" || status === "ERROR") {
-    return "ERROR";
-  }
-
-  switch (kind) {
-    case "DEBUG_EVENT":
-    case "LOG_DEBUG":
-      return "DEBUG";
-    case "LOG_INFO":
-      return "INFO";
-    case "LOG_WARN":
-      return "WARN";
-    case "LOG_LOG":
-      return "INFO"; // Changed from "LOG"
-    case "SPAN":
-    case "ANCESTOR_OVERRIDE":
-    case "SPAN_EVENT":
-    default:
-      return "TRACE";
-  }
-}
-
 export class LogDetailPresenter {
   constructor(
     private readonly replica: PrismaClientOrTransaction,

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

@@ -17,8 +17,9 @@ import {
   convertDateToClickhouseDateTime,
   convertClickhouseDateTime64ToJsDate,
 } from "~/v3/eventRepository/clickhouseEventRepository.server";
+import { kindToLevel, type LogLevel } from "~/utils/logUtils";
 
-export type LogLevel = "TRACE" | "DEBUG" | "INFO" | "WARN" | "ERROR" | "CANCELLED";
+export type { LogLevel };
 
 export type LogsListOptions = {
   userId?: string;
@@ -77,35 +78,6 @@ function decodeCursor(cursor: string): LogCursor | null {
   }
 }
 
-// Convert ClickHouse kind to display level
-function kindToLevel(kind: string, status: string): LogLevel {
-  if (status === "CANCELLED") {
-    return "CANCELLED";
-  }
-
-  // ERROR can come from either kind or status
-  if (kind === "LOG_ERROR" || status === "ERROR") {
-    return "ERROR";
-  }
-
-  switch (kind) {
-    case "DEBUG_EVENT":
-    case "LOG_DEBUG":
-      return "DEBUG";
-    case "LOG_INFO":
-      return "INFO";
-    case "LOG_WARN":
-      return "WARN";
-    case "LOG_LOG":
-      return "INFO"; // Changed from "LOG"
-    case "SPAN":
-    case "ANCESTOR_OVERRIDE":
-    case "SPAN_EVENT":
-    default:
-      return "TRACE";
-  }
-}
-
 // Convert display level to ClickHouse kinds and statuses
 function levelToKindsAndStatuses(
   level: LogLevel

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

@@ -12,7 +12,8 @@ import { EnvironmentParamSchema } from "~/utils/pathBuilder";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { getRunFiltersFromRequest } from "~/presenters/RunFilters.server";
-import { LogsListPresenter, type LogLevel } from "~/presenters/v3/LogsListPresenter.server";
+import { LogsListPresenter } from "~/presenters/v3/LogsListPresenter.server";
+import type { LogLevel } from "~/utils/logUtils";
 import { $replica } from "~/db.server";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
 import {
@@ -153,7 +154,6 @@ export default function Page() {
                 <LogsList
                   list={list}
                   rootOnlyDefault={rootOnlyDefault}
-                  filters={filters}
                   isAdmin={isAdmin}
                   showDebug={showDebug}
                 />
@@ -174,7 +174,6 @@ function LogsList({
 }: {
   list: Awaited<UseDataFunctionReturn<typeof loader>["data"]>;
   rootOnlyDefault: boolean;
-  filters: TaskRunListSearchFilters;
   isAdmin: boolean;
   showDebug: boolean;
 }) {
@@ -213,17 +212,17 @@ function LogsList({
     setNextCursor(list.pagination.next);
   }, [list.logs, list.pagination.next]);
 
+  // Memoize existing IDs to avoid creating a new Set on every render
+  const existingIds = useMemo(() => new Set(accumulatedLogs.map((log) => log.id)), [accumulatedLogs]);
+
   // Append new logs when fetcher completes (with deduplication)
   useEffect(() => {
     if (fetcher.data && fetcher.state === "idle") {
-      setAccumulatedLogs((prev) => {
-        const existingIds = new Set(prev.map((log) => log.id));
-        const newLogs = fetcher.data!.logs.filter((log) => !existingIds.has(log.id));
-        return [...prev, ...newLogs];
-      });
+      const newLogs = fetcher.data.logs.filter((log) => !existingIds.has(log.id));
+      setAccumulatedLogs((prev) => [...prev, ...newLogs]);
       setNextCursor(fetcher.data.pagination.next);
     }
-  }, [fetcher.data, fetcher.state]);
+  }, [fetcher.data, fetcher.state, existingIds]);
 
   // Build resource URL for loading more
   const loadMoreUrl = useMemo(() => {

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

@@ -0,0 +1,50 @@
+export type LogLevel = "TRACE" | "DEBUG" | "INFO" | "WARN" | "ERROR" | "CANCELLED";
+
+// Convert ClickHouse kind to display level
+export function kindToLevel(kind: string, status: string): LogLevel {
+  if (status === "CANCELLED") {
+    return "CANCELLED";
+  }
+
+  // ERROR can come from either kind or status
+  if (kind === "LOG_ERROR" || status === "ERROR") {
+    return "ERROR";
+  }
+
+  switch (kind) {
+    case "DEBUG_EVENT":
+    case "LOG_DEBUG":
+      return "DEBUG";
+    case "LOG_INFO":
+      return "INFO";
+    case "LOG_WARN":
+      return "WARN";
+    case "LOG_LOG":
+      return "INFO"; // Changed from "LOG"
+    case "SPAN":
+    case "ANCESTOR_OVERRIDE":
+    case "SPAN_EVENT":
+    default:
+      return "TRACE";
+  }
+}
+
+// Level badge color styles
+export function getLevelColor(level: LogLevel): string {
+  switch (level) {
+    case "ERROR":
+      return "text-error bg-error/10 border-error/20";
+    case "WARN":
+      return "text-warning bg-warning/10 border-warning/20";
+    case "DEBUG":
+      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
+    case "INFO":
+      return "text-blue-400 bg-blue-500/10 border-blue-500/20";
+    case "TRACE":
+      return "text-charcoal-500 bg-charcoal-800 border-charcoal-700";
+    case "CANCELLED":
+      return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
+    default:
+      return "text-text-dimmed bg-charcoal-750 border-charcoal-700";
+  }
+}