Skip to content

Commit e29e1c8

Browse files
mpcgridmpcgrid
authored
Fix/tri 7032 logs page feedback (#2947)
## ✨ Changes ### UI & UX - Normalized log level display across table and detail view - Fixed table header scroll behavior and sidebar positioning - Improved loading state with taller segment and disabled resizing - Added "no more logs" message with count - Enhanced keyboard shortcuts ### Filtering & Search - Streamlined filters: RunId and Task only (removed run filters) - Side panel closes when filters change - Fixed logs from previous search remaining in table - Fixed table scroll position when changing filters ### Backend - Added performance indexes on message and attributes (`014_add_task_runs_v2_search_indexes.sql`) - Added DEBUG level logging by default - Removed internal logs from display - Fixed ServiceValidationError forwarding to frontend - Removed v1 logs API support
1 parent 34203d6 commit e29e1c8

File tree

20 files changed

+875
-633
lines changed

20 files changed

+875
-633
lines changed

‎apps/webapp/app/components/LogLevelTooltipInfo.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { BookOpenIcon } from "@heroicons/react/20/solid";
2+
import { LinkButton } from "./primitives/Buttons";
3+
import { Header3 } from "./primitives/Headers";
4+
import { Paragraph } from "./primitives/Paragraph";
5+
6+
export function LogLevelTooltipInfo() {
7+
return (
8+
<div className="flex max-w-xs flex-col gap-4 p-1 pb-2">
9+
<div>
10+
<Header3>Log Levels</Header3>
11+
<Paragraph variant="small" className="text-text-dimmed">
12+
Structured logging helps you debug and monitor your tasks.
13+
</Paragraph>
14+
</div>
15+
<div>
16+
<div className="mb-0.5">
17+
<Header3 className="text-blue-400">Info</Header3>
18+
</div>
19+
<Paragraph variant="small" className="text-text-dimmed">
20+
General informational messages about task execution.
21+
</Paragraph>
22+
</div>
23+
<div>
24+
<div className="mb-0.5">
25+
<Header3 className="text-warning">Warn</Header3>
26+
</div>
27+
<Paragraph variant="small" className="text-text-dimmed">
28+
Warning messages indicating potential issues that don't prevent execution.
29+
</Paragraph>
30+
</div>
31+
<div>
32+
<div className="mb-0.5">
33+
<Header3 className="text-error">Error</Header3>
34+
</div>
35+
<Paragraph variant="small" className="text-text-dimmed">
36+
Error messages for failures and exceptions during task execution.
37+
</Paragraph>
38+
</div>
39+
<div>
40+
<div className="mb-0.5">
41+
<Header3 className="text-charcoal-400">Debug</Header3>
42+
</div>
43+
<Paragraph variant="small" className="text-text-dimmed">
44+
Detailed diagnostic information for development and debugging.
45+
</Paragraph>
46+
</div>
47+
<div className="border-t border-charcoal-700 pt-4">
48+
<Header3>Tracing & Spans</Header3>
49+
<Paragraph variant="small" className="text-text-dimmed">
50+
Automatically track the flow of your code through task triggers, attempts, and HTTP
51+
requests. Create custom traces to monitor specific operations.
52+
</Paragraph>
53+
</div>
54+
<LinkButton
55+
to="https://trigger.dev/docs/logging#tracing-and-spans"
56+
variant="docs/small"
57+
LeadingIcon={BookOpenIcon}
58+
>
59+
Read docs
60+
</LinkButton>
61+
</div>
62+
);
63+
}

‎apps/webapp/app/components/Shortcuts.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,37 @@ function ShortcutContent() {
161161
<ShortcutKey shortcut={{ key: "p" }} variant="medium/bright" />
162162
</Shortcut>
163163
</div>
164+
<div className="space-y-3">
165+
<Header3>Logs page</Header3>
166+
<Shortcut name="Filter by task">
167+
<ShortcutKey shortcut={{ key: "t" }} variant="medium/bright" />
168+
</Shortcut>
169+
<Shortcut name="Filter by run ID">
170+
<ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
171+
</Shortcut>
172+
<Shortcut name="Filter by level">
173+
<ShortcutKey shortcut={{ key: "l" }} variant="medium/bright" />
174+
</Shortcut>
175+
<Shortcut name="Select log level">
176+
<ShortcutKey shortcut={{ key: "1" }} variant="medium/bright" />
177+
<Paragraph variant="small" className="ml-1.5">
178+
to
179+
</Paragraph>
180+
<ShortcutKey shortcut={{ key: "4" }} variant="medium/bright" />
181+
</Shortcut>
182+
<Shortcut name="Close detail panel">
183+
<ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
184+
</Shortcut>
185+
<Shortcut name="Details tab">
186+
<ShortcutKey shortcut={{ key: "d" }} variant="medium/bright" />
187+
</Shortcut>
188+
<Shortcut name="Run tab">
189+
<ShortcutKey shortcut={{ key: "r" }} variant="medium/bright" />
190+
</Shortcut>
191+
<Shortcut name="View full run">
192+
<ShortcutKey shortcut={{ key: "v" }} variant="medium/bright" />
193+
</Shortcut>
194+
</div>
164195
<div className="space-y-3">
165196
<Header3>Schedules page</Header3>
166197
<Shortcut name="New schedule">

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { useEnvironment } from "~/hooks/useEnvironment";
2121
import { useOrganization } from "~/hooks/useOrganizations";
2222
import { useProject } from "~/hooks/useProject";
2323
import type { LogEntry } from "~/presenters/v3/LogsListPresenter.server";
24-
import { getLevelColor, getKindColor, getKindLabel } from "~/utils/logUtils";
24+
import { getLevelColor } from "~/utils/logUtils";
2525
import { v3RunSpanPath, v3RunsPath, v3DeploymentVersionPath } from "~/utils/pathBuilder";
2626
import type { loader as logDetailLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.$logId";
2727
import { TaskRunStatusCombo, descriptionForTaskRunStatus } from "~/components/runs/v3/TaskRunStatus";
@@ -94,16 +94,34 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
9494
const isLoading = fetcher.state === "loading";
9595
const log = fetcher.data ?? initialLog;
9696

97-
// Handle Escape key to close panel
97+
const runPath = v3RunSpanPath(
98+
organization,
99+
project,
100+
environment,
101+
{ friendlyId: log?.runId ?? "" },
102+
{ spanId: log?.spanId ?? "" }
103+
);
104+
105+
// Handle keyboard shortcuts
98106
useEffect(() => {
99107
const handleKeyDown = (e: KeyboardEvent) => {
108+
const target = e.target as HTMLElement;
109+
if (target && (
110+
target.tagName === "INPUT" ||
111+
target.tagName === "TEXTAREA" ||
112+
target.tagName === "SELECT" ||
113+
target.contentEditable === "true"
114+
)) {
115+
return;
116+
}
117+
100118
if (e.key === "Escape") {
101119
onClose();
102120
}
103121
};
104122
window.addEventListener("keydown", handleKeyDown);
105123
return () => window.removeEventListener("keydown", handleKeyDown);
106-
}, [onClose]);
124+
}, [onClose, log, runPath, isLoading]);
107125

108126
if (isLoading && !log) {
109127
return (
@@ -129,36 +147,18 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
129147
);
130148
}
131149

132-
const runPath = v3RunSpanPath(
133-
organization,
134-
project,
135-
environment,
136-
{ friendlyId: log.runId },
137-
{ spanId: log.spanId }
138-
);
139-
140150
return (
141151
<div className="flex h-full flex-col overflow-hidden">
142152
{/* Header */}
143-
<div className="flex items-center justify-between border-b border-grid-dimmed px-4 py-3">
144-
<div className="flex items-center gap-2">
145-
<span
146-
className={cn(
147-
"inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium",
148-
getKindColor(log.kind)
149-
)}
150-
>
151-
{getKindLabel(log.kind)}
152-
</span>
153-
<span
154-
className={cn(
155-
"inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase",
156-
getLevelColor(log.level)
157-
)}
158-
>
159-
{log.level}
160-
</span>
161-
</div>
153+
<div className="flex items-center justify-between border-b border-grid-dimmed px-2 py-2">
154+
<span
155+
className={cn(
156+
"inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase tracking-wider",
157+
getLevelColor(log.level)
158+
)}
159+
>
160+
{log.level}
161+
</span>
162162
<Button variant="minimal/small" onClick={onClose} shortcut={{ key: "esc" }}>
163163
<XMarkIcon className="size-5" />
164164
</Button>
@@ -185,8 +185,8 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
185185
</TabButton>
186186
</TabContainer>
187187
<Link to={runPath} target="_blank" rel="noopener noreferrer">
188-
<Button variant="secondary/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
189-
View Full Run
188+
<Button variant="minimal/small" LeadingIcon={ArrowTopRightOnSquareIcon} shortcut={{ key: "v" }}>
189+
View full run
190190
</Button>
191191
</Link>
192192
</div>

0 commit comments

Comments
 (0)