Skip to content

Commit 4587928

Browse files
mpcgridmpcgrid
committed
UI fixes
Added ellipsis to logs loading text Changed log detail View full run variant to minimal Normalized Log level between table column and Logs detail view Fixed Logs table sidebar showing on the left of the header Fixed table header disappearing on scroll Removed search from logs filter Changed Icon to logs filter Side panel closes when the filters change Made the loading segment taller and stopped the resizing when it appears Showing a message when there are no more logs to show that includes the number of logs Fixed bug where logs from the previous search remained in the table
1 parent 6f26acb commit 4587928

File tree

8 files changed

+358
-252
lines changed

8 files changed

+358
-252
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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">Debug</Header3>
18+
</div>
19+
<Paragraph variant="small" className="text-text-dimmed">
20+
Detailed diagnostic information for development and debugging.
21+
</Paragraph>
22+
</div>
23+
<div>
24+
<div className="mb-0.5">
25+
<Header3 className="text-blue-400">Info</Header3>
26+
</div>
27+
<Paragraph variant="small" className="text-text-dimmed">
28+
General informational messages about task execution.
29+
</Paragraph>
30+
</div>
31+
<div>
32+
<div className="mb-0.5">
33+
<Header3 className="text-warning">Warn</Header3>
34+
</div>
35+
<Paragraph variant="small" className="text-text-dimmed">
36+
Warning messages indicating potential issues that don't prevent execution.
37+
</Paragraph>
38+
</div>
39+
<div>
40+
<div className="mb-0.5">
41+
<Header3 className="text-error">Error</Header3>
42+
</div>
43+
<Paragraph variant="small" className="text-text-dimmed">
44+
Error messages for failures and exceptions during task execution.
45+
</Paragraph>
46+
</div>
47+
<div>
48+
<div className="mb-0.5">
49+
<Header3 className="text-charcoal-400">Cancelled</Header3>
50+
</div>
51+
<Paragraph variant="small" className="text-text-dimmed">
52+
Messages logged when a task run is cancelled before completion.
53+
</Paragraph>
54+
</div>
55+
<div className="border-t border-charcoal-700 pt-4">
56+
<Header3>Tracing & Spans</Header3>
57+
<Paragraph variant="small" className="text-text-dimmed">
58+
Automatically track the flow of your code through task triggers, attempts, and HTTP requests.
59+
Create custom traces to monitor specific operations.
60+
</Paragraph>
61+
</div>
62+
<LinkButton
63+
to="https://trigger.dev/docs/logging#tracing-and-spans"
64+
variant="docs/small"
65+
LeadingIcon={BookOpenIcon}
66+
>
67+
Read docs
68+
</LinkButton>
69+
</div>
70+
);
71+
}

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

Lines changed: 12 additions & 22 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";
@@ -140,25 +140,15 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
140140
return (
141141
<div className="flex h-full flex-col overflow-hidden">
142142
{/* 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>
143+
<div className="flex items-center justify-between border-b border-grid-dimmed px-2 py-2">
144+
<span
145+
className={cn(
146+
"inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium uppercase tracking-wider",
147+
getLevelColor(log.level)
148+
)}
149+
>
150+
{log.level}
151+
</span>
162152
<Button variant="minimal/small" onClick={onClose} shortcut={{ key: "esc" }}>
163153
<XMarkIcon className="size-5" />
164154
</Button>
@@ -185,8 +175,8 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
185175
</TabButton>
186176
</TabContainer>
187177
<Link to={runPath} target="_blank" rel="noopener noreferrer">
188-
<Button variant="secondary/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
189-
View Full Run
178+
<Button variant="minimal/small" LeadingIcon={ArrowTopRightOnSquareIcon}>
179+
View full run
190180
</Button>
191181
</Link>
192182
</div>

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

Lines changed: 32 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as Ariakit from "@ariakit/react";
2-
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
3-
import { type ReactNode, useMemo } from "react";
2+
import { IconListTree } from "@tabler/icons-react";
3+
import { type ReactNode } from "react";
44
import { AppliedFilter } from "~/components/primitives/AppliedFilter";
55
import {
6-
ComboBox,
76
SelectItem,
87
SelectList,
98
SelectPopover,
@@ -12,7 +11,7 @@ import {
1211
shortcutFromIndex,
1312
} from "~/components/primitives/Select";
1413
import { useSearchParams } from "~/hooks/useSearchParam";
15-
import { FilterMenuProvider, appliedSummary } from "~/components/runs/v3/SharedFilters";
14+
import { appliedSummary } from "~/components/runs/v3/SharedFilters";
1615
import type { LogLevel } from "~/presenters/v3/LogsListPresenter.server";
1716
import { cn } from "~/utils/cn";
1817

@@ -63,71 +62,43 @@ export function LogsLevelFilter({ showDebug = false }: { showDebug?: boolean })
6362
}
6463

6564
return (
66-
<FilterMenuProvider>
67-
{(search, setSearch) => (
68-
<LevelDropdown
69-
trigger={
70-
<SelectTrigger
71-
icon={<ExclamationTriangleIcon className="size-4" />}
72-
variant="secondary/small"
73-
shortcut={shortcut}
74-
tooltipTitle="Filter by level"
75-
>
76-
Level
77-
</SelectTrigger>
78-
}
79-
searchValue={search}
80-
clearSearchValue={() => setSearch("")}
81-
showDebug={showDebug}
82-
/>
83-
)}
84-
</FilterMenuProvider>
65+
<LevelDropdown
66+
trigger={
67+
<SelectTrigger
68+
icon={<IconListTree className="size-4" />}
69+
variant="secondary/small"
70+
shortcut={shortcut}
71+
tooltipTitle="Filter by level"
72+
>
73+
Level
74+
</SelectTrigger>
75+
}
76+
showDebug={showDebug}
77+
/>
8578
);
8679
}
8780

8881
function LevelDropdown({
8982
trigger,
90-
clearSearchValue,
91-
searchValue,
92-
onClose,
9383
showDebug = false,
9484
}: {
9585
trigger: ReactNode;
96-
clearSearchValue: () => void;
97-
searchValue: string;
98-
onClose?: () => void;
9986
showDebug?: boolean;
10087
}) {
10188
const { values, replace } = useSearchParams();
10289

10390
const handleChange = (values: string[]) => {
104-
clearSearchValue();
10591
replace({ levels: values, cursor: undefined, direction: undefined });
10692
};
10793

10894
const availableLevels = getAvailableLevels(showDebug);
109-
const filtered = useMemo(() => {
110-
return availableLevels.filter((item) =>
111-
item.label.toLowerCase().includes(searchValue.toLowerCase())
112-
);
113-
}, [searchValue, availableLevels]);
11495

11596
return (
11697
<SelectProvider value={values("levels")} setValue={handleChange} virtualFocus={true}>
11798
{trigger}
118-
<SelectPopover
119-
className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
120-
hideOnEscape={() => {
121-
if (onClose) {
122-
onClose();
123-
return false;
124-
}
125-
return true;
126-
}}
127-
>
128-
<ComboBox placeholder="Filter by level..." value={searchValue} />
99+
<SelectPopover className="min-w-0 max-w-[min(240px,var(--popover-available-width))]">
129100
<SelectList>
130-
{filtered.map((item, index) => (
101+
{availableLevels.map((item, index) => (
131102
<SelectItem
132103
key={item.level}
133104
value={item.level}
@@ -158,25 +129,19 @@ function AppliedLevelFilter({ showDebug = false }: { showDebug?: boolean }) {
158129
}
159130

160131
return (
161-
<FilterMenuProvider>
162-
{(search, setSearch) => (
163-
<LevelDropdown
164-
trigger={
165-
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
166-
<AppliedFilter
167-
label="Level"
168-
icon={<ExclamationTriangleIcon className="size-4" />}
169-
value={appliedSummary(levels)}
170-
onRemove={() => del(["levels", "cursor", "direction"])}
171-
variant="secondary/small"
172-
/>
173-
</Ariakit.Select>
174-
}
175-
searchValue={search}
176-
clearSearchValue={() => setSearch("")}
177-
showDebug={showDebug}
178-
/>
179-
)}
180-
</FilterMenuProvider>
132+
<LevelDropdown
133+
trigger={
134+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
135+
<AppliedFilter
136+
label="Level"
137+
icon={<IconListTree className="size-4" />}
138+
value={appliedSummary(levels)}
139+
onRemove={() => del(["levels", "cursor", "direction"])}
140+
variant="secondary/small"
141+
/>
142+
</Ariakit.Select>
143+
}
144+
showDebug={showDebug}
145+
/>
181146
);
182147
}

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/20/solid";
22
import { useNavigate } from "@remix-run/react";
3+
import { motion } from "framer-motion";
34
import { useCallback, useEffect, useRef, useState } from "react";
45
import { Input } from "~/components/primitives/Input";
56
import { ShortcutKey } from "~/components/primitives/ShortcutKey";
@@ -52,7 +53,16 @@ export function LogsSearchInput() {
5253

5354
return (
5455
<div className="flex items-center gap-1">
55-
<div className="relative h-6 min-w-52">
56+
<motion.div
57+
initial={{ width: "auto" }}
58+
animate={{ width: isFocused && text.length > 0 ? "24rem" : "auto" }}
59+
transition={{
60+
type: "spring",
61+
stiffness: 300,
62+
damping: 30,
63+
}}
64+
className="relative h-6 min-w-52"
65+
>
5666
<Input
5767
type="text"
5868
ref={inputRef}
@@ -80,7 +90,7 @@ export function LogsSearchInput() {
8090
) : undefined
8191
}
8292
/>
83-
</div>
93+
</motion.div>
8494

8595
{text.length > 0 && (
8696
<button

0 commit comments

Comments
 (0)