Skip to content

Commit 90f221f

Browse files
committed
fix: prevent invalid render input for build logs
1 parent e8b7ce8 commit 90f221f

File tree

9 files changed

+163
-166
lines changed

9 files changed

+163
-166
lines changed

site/src/components/Logs/LogLine.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants";
66
export const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
77

88
export interface Line {
9+
id: string;
910
time: string;
1011
output: string;
1112
level: LogLevel;

site/src/components/Logs/Logs.stories.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { chromatic } from "testHelpers/chromatic";
33
import { MockWorkspaceBuildLogs } from "testHelpers/entities";
4+
import type { Line } from "./LogLine";
45
import { Logs } from "./Logs";
56

67
const meta: Meta<typeof Logs> = {
78
title: "components/Logs",
89
parameters: { chromatic },
910
component: Logs,
1011
args: {
11-
lines: MockWorkspaceBuildLogs.map((log) => ({
12+
lines: MockWorkspaceBuildLogs.map<Line>((log) => ({
13+
id: String(log.id),
1214
level: log.log_level,
1315
time: log.created_at,
1416
output: log.output,

site/src/components/Logs/Logs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Logs: FC<LogsProps> = ({
2020
<div css={styles.root} className={`${className} logs-container`}>
2121
<div css={{ minWidth: "fit-content" }}>
2222
{lines.map((line) => (
23-
<LogLine key={line.output} level={line.level}>
23+
<LogLine key={line.id} level={line.level}>
2424
{!hideTimestamps && (
2525
<LogLinePrefix>
2626
{dayjs(line.time).format("HH:mm:ss.SSS")}

site/src/modules/resources/AgentLogs/AgentLogLine.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,6 @@ import AnsiToHTML from "ansi-to-html";
33
import { type Line, LogLine, LogLinePrefix } from "components/Logs/LogLine";
44
import { type FC, type ReactNode, useMemo } from "react";
55

6-
// Logs are stored as the Line interface to make rendering
7-
// much more efficient. Instead of mapping objects each time, we're
8-
// able to just pass the array of logs to the component.
9-
export interface LineWithID extends Line {
10-
id: number;
11-
}
12-
136
// Approximate height of a log line. Used to control virtualized list height.
147
export const AGENT_LOG_LINE_HEIGHT = 20;
158

site/src/modules/resources/AgentLogs/AgentLogs.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import Tooltip from "@mui/material/Tooltip";
33
import type { WorkspaceAgentLogSource } from "api/typesGenerated";
4+
import type { Line } from "components/Logs/LogLine";
45
import { type ComponentProps, forwardRef, useMemo } from "react";
56
import { FixedSizeList as List } from "react-window";
6-
import {
7-
AGENT_LOG_LINE_HEIGHT,
8-
AgentLogLine,
9-
type LineWithID,
10-
} from "./AgentLogLine";
7+
import { AGENT_LOG_LINE_HEIGHT, AgentLogLine } from "./AgentLogLine";
118

129
type AgentLogsProps = Omit<
1310
ComponentProps<typeof List>,
1411
"children" | "itemSize" | "itemCount"
1512
> & {
16-
logs: readonly LineWithID[];
13+
logs: readonly Line[];
1714
sources: readonly WorkspaceAgentLogSource[];
1815
};
1916

0 commit comments

Comments
 (0)