Skip to content

Commit a288a90

Browse files
bharathkumar39293bharathkumar39293
authored
Merge branch 'main' into fix/replay-payload-2813-clean
2 parents ccd8648 + 5e049cd commit a288a90

79 files changed

Lines changed: 6068 additions & 2124 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎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/code/QueryResultsChart.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { Chart } from "~/components/primitives/charts/ChartCompound";
55
import { Paragraph } from "../primitives/Paragraph";
66
import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
77

8-
// Color palette for chart series
8+
// Color palette for chart series - 30 distinct colors for large datasets
99
const CHART_COLORS = [
10-
"#7655fd", // Primary purple
10+
// Primary colors
11+
"#7655fd", // Purple
1112
"#22c55e", // Green
1213
"#f59e0b", // Amber
1314
"#ef4444", // Red
@@ -17,6 +18,28 @@ const CHART_COLORS = [
1718
"#14b8a6", // Teal
1819
"#f97316", // Orange
1920
"#6366f1", // Indigo
21+
// Extended palette
22+
"#84cc16", // Lime
23+
"#0ea5e9", // Sky
24+
"#f43f5e", // Rose
25+
"#a855f7", // Fuchsia
26+
"#eab308", // Yellow
27+
"#10b981", // Emerald
28+
"#3b82f6", // Blue
29+
"#d946ef", // Magenta
30+
"#78716c", // Stone
31+
"#facc15", // Gold
32+
// Additional distinct colors
33+
"#2dd4bf", // Turquoise
34+
"#fb923c", // Light orange
35+
"#a3e635", // Yellow-green
36+
"#38bdf8", // Light blue
37+
"#c084fc", // Light purple
38+
"#4ade80", // Light green
39+
"#fbbf24", // Light amber
40+
"#f472b6", // Light pink
41+
"#67e8f9", // Light cyan
42+
"#818cf8", // Light indigo
2043
];
2144

2245
function getSeriesColor(index: number): string {
@@ -30,6 +53,8 @@ interface QueryResultsChartProps {
3053
fullLegend?: boolean;
3154
/** Callback when "View all" legend button is clicked */
3255
onViewAllLegendItems?: () => void;
56+
/** When true, constrains legend to max 50% height with scrolling */
57+
legendScrollable?: boolean;
3358
}
3459

3560
interface TransformedData {
@@ -702,6 +727,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
702727
config,
703728
fullLegend = false,
704729
onViewAllLegendItems,
730+
legendScrollable = false,
705731
}: QueryResultsChartProps) {
706732
const {
707733
xAxisColumn,
@@ -872,6 +898,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
872898
minHeight="300px"
873899
fillContainer
874900
onViewAllLegendItems={onViewAllLegendItems}
901+
legendScrollable={legendScrollable}
875902
>
876903
<Chart.Bar
877904
xAxisProps={xAxisPropsForBar}
@@ -896,6 +923,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
896923
minHeight="300px"
897924
fillContainer
898925
onViewAllLegendItems={onViewAllLegendItems}
926+
legendScrollable={legendScrollable}
899927
>
900928
<Chart.Line
901929
xAxisProps={xAxisPropsForLine}

‎apps/webapp/app/components/code/TSQLResultsTable.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,9 @@ function EnvironmentCellValue({ value }: { value: string }) {
672672
}
673673

674674
function JSONCellValue({ value }: { value: unknown }) {
675-
const jsonString = JSON.stringify(value);
675+
// If the value is already a string (e.g., from a textColumn optimization),
676+
// use it directly without double-stringifying
677+
const jsonString = typeof value === "string" ? value : JSON.stringify(value);
676678
const isTruncated = jsonString.length > MAX_STRING_DISPLAY_LENGTH;
677679

678680
if (isTruncated) {
@@ -1137,6 +1139,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
11371139
height: `${rowVirtualizer.getTotalSize()}px`,
11381140
position: "relative",
11391141
}}
1142+
className="bg-background-dimmed divide-y divide-charcoal-700"
11401143
>
11411144
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
11421145
const row = tableRows[virtualRow.index];

‎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)