chore(site): add AgentLogs storybook (#12601)

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

@@ -3,6 +3,16 @@ import AnsiToHTML from "ansi-to-html";
 import { type FC, type ReactNode, useMemo } from "react";
 import { type Line, LogLine, LogLinePrefix } from "components/Logs/LogLine";
 
+// 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;
+
 const convert = new AnsiToHTML();
 
 interface AgentLogLineProps {

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AGENT_LOG_LINE_HEIGHT } from "./AgentLogLine";
+import { AgentLogs } from "./AgentLogs";
+import { MockLogs, MockSources } from "./mocks";
+
+const meta: Meta<typeof AgentLogs> = {
+  title: "modules/resources/AgentLogs",
+  component: AgentLogs,
+  args: {
+    sources: MockSources,
+    logs: MockLogs,
+    height: MockLogs.length * AGENT_LOG_LINE_HEIGHT,
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AgentLogs>;
+
+const Default: Story = {};
+
+export { Default as AgentLogs };

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

@@ -10,8 +10,11 @@ import {
 import { FixedSizeList as List } from "react-window";
 import * as API from "api/api";
 import type { WorkspaceAgentLogSource } from "api/typesGenerated";
-import { AgentLogLine } from "./AgentLogLine";
-import { AGENT_LOG_LINE_HEIGHT, type LineWithID } from "./AgentRow";
+import {
+  AGENT_LOG_LINE_HEIGHT,
+  AgentLogLine,
+  type LineWithID,
+} from "./AgentLogLine";
 
 type AgentLogsProps = Omit<
   ComponentProps<typeof List>,

site/src/modules/resources/AgentRow.stories.tsx

@@ -3,7 +3,8 @@ import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import { chromatic } from "testHelpers/chromatic";
 import * as M from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
-import { AgentRow, type LineWithID } from "./AgentRow";
+import type { LineWithID } from "./AgentLogs/AgentLogLine";
+import { AgentRow } from "./AgentRow";
 
 const defaultAgentMetadata = [
   {

site/src/modules/resources/AgentRow.tsx

@@ -21,11 +21,14 @@ 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 { AgentLatency } from "./AgentLatency";
-import { AgentLogs, useAgentLogs } from "./AgentLogs";
+import {
+  AGENT_LOG_LINE_HEIGHT,
+  type LineWithID,
+} from "./AgentLogs/AgentLogLine";
+import { AgentLogs, useAgentLogs } from "./AgentLogs/AgentLogs";
 import { AgentMetadata } from "./AgentMetadata";
 import { AgentStatus } from "./AgentStatus";
 import { AgentVersion } from "./AgentVersion";
@@ -36,16 +39,6 @@ import { TerminalLink } from "./TerminalLink/TerminalLink";
 import { VSCodeDesktopButton } from "./VSCodeDesktopButton/VSCodeDesktopButton";
 import { XRayScanAlert } from "./XRayScanAlert";
 
-// Approximate height of a log line. Used to control virtualized list height.
-export const AGENT_LOG_LINE_HEIGHT = 20;
-
-// 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;
-}
-
 export interface AgentRowProps {
   agent: WorkspaceAgent;
   workspace: Workspace;

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

@@ -19,7 +19,7 @@ import { Stats, StatsItem } from "components/Stats/Stats";
 import { TAB_PADDING_X, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
 import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
-import { AgentLogs, useAgentLogs } from "modules/resources/AgentLogs";
+import { AgentLogs, useAgentLogs } from "modules/resources/AgentLogs/AgentLogs";
 import {
   WorkspaceBuildData,
   WorkspaceBuildDataSkeleton,