Add Storybook

kylecarbs · kylecarbs · commit 6e1032c631bf · 2023-03-23T03:47:05.000Z
diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
@@ -100,6 +100,18 @@ Starting.args = {
   workspace: MockWorkspace,
   applicationsHost: "",
   showApps: true,
+
+  storybookStartupLogs: [
+    "Cloning Git repository...",
+    "Starting Docker Daemon...",
+    "Adding some 🧙magic🧙...",
+    "Starting VS Code...",
+  ].map((line, index) => ({
+    id: index,
+    level: "info",
+    output: line,
+    time: "",
+  })),
 }
 
 export const StartTimeout = Template.bind({})
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -25,7 +25,10 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList as List, ListOnScrollProps } from "react-window"
-import { workspaceAgentLogsMachine } from "xServices/workspaceAgentLogs/workspaceAgentLogsXService"
+import {
+  LineWithID,
+  workspaceAgentLogsMachine,
+} from "xServices/workspaceAgentLogs/workspaceAgentLogsXService"
 import { Workspace, WorkspaceAgent } from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
@@ -44,6 +47,8 @@ export interface AgentRowProps {
   hideVSCodeDesktopButton?: boolean
   serverVersion: string
   onUpdateAgent: () => void
+
+  storybookStartupLogs?: LineWithID[]
 }
 
 export const AgentRow: FC<AgentRowProps> = ({
@@ -55,15 +60,28 @@ export const AgentRow: FC<AgentRowProps> = ({
   hideVSCodeDesktopButton,
   serverVersion,
   onUpdateAgent,
+  storybookStartupLogs,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("agent")
+
   const [logsMachine, sendLogsEvent] = useMachine(workspaceAgentLogsMachine, {
     context: { agentID: agent.id },
+    services: process.env.STORYBOOK
+      ? {
+          getStartupLogs: async () => {
+            return storybookStartupLogs || []
+          },
+          streamStartupLogs: () => async () => {
+            // noop
+          },
+        }
+      : undefined,
   })
   const theme = useTheme()
   const startupScriptAnchorRef = useRef<HTMLLinkElement>(null)
   const [startupScriptOpen, setStartupScriptOpen] = useState(false)
+
   const hasStartupFeatures =
     Boolean(agent.startup_script) ||
     Boolean(logsMachine.context.startupLogs?.length)
@@ -73,6 +91,14 @@ export const AgentRow: FC<AgentRowProps> = ({
   useEffect(() => {
     setShowStartupLogs(agent.lifecycle_state !== "ready" && hasStartupFeatures)
   }, [agent.lifecycle_state, hasStartupFeatures])
+  // External applications can provide startup logs for an agent during it's spawn.
+  // These could be Kubernetes logs, or other logs that are useful to the user.
+  // For this reason, we want to fetch these logs when the agent is starting.
+  useEffect(() => {
+    if (agent.lifecycle_state === "starting") {
+      sendLogsEvent("FETCH_STARTUP_LOGS")
+    }
+  }, [sendLogsEvent, agent.lifecycle_state])
   useEffect(() => {
     // We only want to fetch logs when they are actually shown,
     // otherwise we can make a lot of requests that aren't necessary.
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -122,13 +122,3 @@ CancellationError.args = {
     }),
   },
 }
-
-export const StartupLogsError = Template.bind({})
-StartupLogsError.args = {
-  StartupLogs: new Error("Unable to fetch startup logs"),
-}
-
-export const StartupLogs = Template.bind({})
-StartupLogs.args = {
-  StartupLogs: [{ agent_id: "agent", job_id: "job", output: "startup logs" }],
-}
diff --git a/site/src/xServices/workspaceAgentLogs/workspaceAgentLogsXService.ts b/site/src/xServices/workspaceAgentLogs/workspaceAgentLogsXService.ts
@@ -6,7 +6,7 @@ import { Line } from "components/Logs/Logs"
 // 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.
-interface LineWithID extends Line {
+export interface LineWithID extends Line {
   id: number
 }
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { Line } from "components/Logs/Logs"`
`6`	`6`	`// Logs are stored as the Line interface to make rendering`
`7`	`7`	`// much more efficient. Instead of mapping objects each time, we're`
`8`	`8`	`// able to just pass the array of logs to the component.`
`9`		`-interface LineWithID extends Line {`
	`9`	`+export interface LineWithID extends Line {`
`10`	`10`	`id: number`
`11`	`11`	`}`
`12`	`12`