diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx index fa12a2ce67d98..1f047bbcd93cd 100644 --- a/site/src/components/Logs/LogLine.tsx +++ b/site/src/components/Logs/LogLine.tsx @@ -6,6 +6,7 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants"; export const DEFAULT_LOG_LINE_SIDE_PADDING = 24; export interface Line { + id: number; time: string; output: string; level: LogLevel; diff --git a/site/src/components/Logs/Logs.stories.tsx b/site/src/components/Logs/Logs.stories.tsx index fedd2c67c004b..93ef23671bf84 100644 --- a/site/src/components/Logs/Logs.stories.tsx +++ b/site/src/components/Logs/Logs.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { chromatic } from "testHelpers/chromatic"; import { MockWorkspaceBuildLogs } from "testHelpers/entities"; +import type { Line } from "./LogLine"; import { Logs } from "./Logs"; const meta: Meta = { @@ -8,7 +9,8 @@ const meta: Meta = { parameters: { chromatic }, component: Logs, args: { - lines: MockWorkspaceBuildLogs.map((log) => ({ + lines: MockWorkspaceBuildLogs.map((log) => ({ + id: log.id, level: log.log_level, time: log.created_at, output: log.output, diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx index b38abaf087879..5ba9a2cbe16d2 100644 --- a/site/src/components/Logs/Logs.tsx +++ b/site/src/components/Logs/Logs.tsx @@ -20,7 +20,7 @@ export const Logs: FC = ({
{lines.map((line) => ( - + {!hideTimestamps && ( {dayjs(line.time).format("HH:mm:ss.SSS")} diff --git a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx index 768fe315dae2e..fb962fe560063 100644 --- a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx +++ b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx @@ -3,13 +3,6 @@ import AnsiToHTML from "ansi-to-html"; import { type Line, LogLine, LogLinePrefix } from "components/Logs/LogLine"; import { type FC, type ReactNode, useMemo } from "react"; -// Logs are stored as the Line interface to make rendering -// much more efficient. Instead of mapping objects each time, we're -// able to just pass the array of logs to the component. -export interface LineWithID extends Line { - id: number; -} - // Approximate height of a log line. Used to control virtualized list height. export const AGENT_LOG_LINE_HEIGHT = 20; diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx index 9c7c1fd08c553..e46dabdb7ca83 100644 --- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx +++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx @@ -1,19 +1,16 @@ import type { Interpolation, Theme } from "@emotion/react"; import Tooltip from "@mui/material/Tooltip"; import type { WorkspaceAgentLogSource } from "api/typesGenerated"; +import type { Line } from "components/Logs/LogLine"; import { type ComponentProps, forwardRef, useMemo } from "react"; import { FixedSizeList as List } from "react-window"; -import { - AGENT_LOG_LINE_HEIGHT, - AgentLogLine, - type LineWithID, -} from "./AgentLogLine"; +import { AGENT_LOG_LINE_HEIGHT, AgentLogLine } from "./AgentLogLine"; type AgentLogsProps = Omit< ComponentProps, "children" | "itemSize" | "itemCount" > & { - logs: readonly LineWithID[]; + logs: readonly Line[]; sources: readonly WorkspaceAgentLogSource[]; }; diff --git a/site/src/modules/resources/AgentLogs/mocks.tsx b/site/src/modules/resources/AgentLogs/mocks.tsx index 1e9b7e1f54307..059e01fdbad64 100644 --- a/site/src/modules/resources/AgentLogs/mocks.tsx +++ b/site/src/modules/resources/AgentLogs/mocks.tsx @@ -1,6 +1,6 @@ // Those mocks are fetched from the Coder API in dev.coder.com -import type { LineWithID } from "./AgentLogLine"; +import type { Line } from "components/Logs/LogLine"; export const MockSources = [ { @@ -1128,4 +1128,4 @@ export const MockLogs = [ time: "2024-03-14T11:31:10.859531Z", sourceId: "d9475581-8a42-4bce-b4d0-e4d2791d5c98", }, -] satisfies LineWithID[]; +] satisfies Line[]; diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx index 1b9761f28ea40..ec45a8eec7c0a 100644 --- a/site/src/modules/resources/AgentRow.tsx +++ b/site/src/modules/resources/AgentRow.tsx @@ -12,6 +12,7 @@ import type { WorkspaceAgentMetadata, } from "api/typesGenerated"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; +import type { Line } from "components/Logs/LogLine"; import { Stack } from "components/Stack/Stack"; import { useProxy } from "contexts/ProxyContext"; import { @@ -318,7 +319,7 @@ export const AgentRow: FC = ({ width={width} css={styles.startupLogs} onScroll={handleLogScroll} - logs={startupLogs.map((l) => ({ + logs={startupLogs.map((l) => ({ id: l.id, level: l.level, output: l.output, diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index 004cf9716a44f..c6ca2c0db922c 100644 --- a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -1,5 +1,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import type { ProvisionerJobLog } from "api/typesGenerated"; +import type { Line } from "components/Logs/LogLine"; import { DEFAULT_LOG_LINE_SIDE_PADDING, Logs } from "components/Logs/Logs"; import dayjs from "dayjs"; import { type FC, Fragment, type HTMLAttributes } from "react"; @@ -63,7 +64,8 @@ export const WorkspaceBuildLogs: FC = ({ > {Object.entries(groupedLogsByStage).map(([stage, logs]) => { const isEmpty = logs.every((log) => log.output === ""); - const lines = logs.map((log) => ({ + const lines = logs.map((log) => ({ + id: log.id, time: log.created_at, output: log.output, level: log.log_level, diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx index 9e6decaf7fc44..e291497a58fe0 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx @@ -7,6 +7,7 @@ import type { import { Alert } from "components/Alert/Alert"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Loader } from "components/Loader/Loader"; +import type { Line } from "components/Logs/LogLine"; import { Margins } from "components/Margins/Margins"; import { FullWidthPageHeader, @@ -302,7 +303,7 @@ const AgentLogsContent: FC<{ workspaceId: string; agent: WorkspaceAgent }> = ({ return ( ({ + logs={logs.map((l) => ({ id: l.id, output: l.output, time: l.created_at,