display logs

coder · BrunoQuaresma · May 19, 2022 · May 18, 2022 · May 19, 2022 · May 19, 2022
commit 5af1e02f9d252197540fa0dca2bbe96e38e72cda
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "buildname",
     "circbuf",
     "cliflag",
     "cliui",
@@ -55,6 +56,7 @@
     "TCGETS",
     "tcpip",
     "TCSETS",
+    "testid",
     "tfexec",
     "tfjson",
     "tfstate",
@@ -76,7 +78,7 @@
       },
       {
         "match": "provisionerd/proto/provisionerd.proto",
-        "cmd": "make provisionerd/proto/provisionerd.pb.go",
+        "cmd": "make provisionerd/proto/provisionerd.pb.go"
       }
     ]
   },
@@ -104,5 +106,5 @@
   },
   // We often use a version of TypeScript that's ahead of the version shipped
   // with VS Code.
-  "typescript.tsdk": "./site/node_modules/typescript/lib",
+  "typescript.tsdk": "./site/node_modules/typescript/lib"
 }
@@ -15,6 +15,7 @@ import { SSHKeysPage } from "./pages/SettingsPages/SSHKeysPage/SSHKeysPage"
 import TemplatesPage from "./pages/TemplatesPage/TemplatesPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
+import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
 
@@ -138,6 +139,15 @@ export const AppRouter: React.FC = () => (
           </Route>
         </Route>
 
+        <Route
+          path="builds/:buildname"
+          element={
+            <AuthAndFrame>
+              <WorkspaceBuildPage />
+            </AuthAndFrame>
+          }
+        />
+
         {/* Using path="*"" means "match anything", so this route
         acts like a catch-all for URLs that we don't have explicit
         routes for. */}

@@ -1,6 +1,6 @@
 import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
-import { WorkspaceBuildTransition } from "./types"
+import { ProvisionerJobLog, WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
 
 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
@@ -233,3 +233,8 @@ export const getWorkspaceBuilds = async (workspaceId: string): Promise<TypesGen.
   const response = await axios.get<TypesGen.WorkspaceBuild[]>(`/api/v2/workspaces/${workspaceId}/builds`)
   return response.data
 }
+
+export const getBuildLogs = async (buildname: string): Promise<ProvisionerJobLog[]> => {
+  const response = await axios.get<ProvisionerJobLog[]>(`/api/v2/workspacebuilds/${buildname}/logs`)
+  return response.data
+}
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
@@ -1,3 +1,5 @@
+import * as TypesGen from "./typesGenerated"
+
 export interface UserAgent {
   readonly browser: string
   readonly device: string
@@ -12,3 +14,10 @@ export interface ReconnectingPTYRequest {
 }
 
 export type WorkspaceBuildTransition = "start" | "stop" | "delete"
+
+// The generated type for ProvisionerJobLog is different than the one returned
+// by the API.
+export interface ProvisionerJobLog extends TypesGen.ProvisionerJobLog {
+  readonly source: string
+  readonly level: string
+}
@@ -1,5 +1,5 @@
 import Box from "@material-ui/core/Box"
-import { Theme } from "@material-ui/core/styles"
+import { makeStyles, Theme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
@@ -10,6 +10,7 @@ import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
 import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
+import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { getDisplayStatus } from "../../util/workspace"
 import { EmptyState } from "../EmptyState/EmptyState"
@@ -48,6 +49,8 @@ export interface BuildsTableProps {
 export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) => {
   const isLoading = !builds
   const theme: Theme = useTheme()
+  const navigate = useNavigate()
+  const styles = useStyles()
 
   return (
     <Table className={className}>
@@ -66,8 +69,24 @@ export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) =
             const status = getDisplayStatus(theme, b)
             const duration = getDurationInSeconds(b)
 
+            const navigateToBuildPage = () => {
+              navigate(`/builds/${b.id}`)
+            }
+
             return (
-              <TableRow key={b.id} data-testid={`build-${b.id}`}>
+              <TableRow
+                hover
+                key={b.id}
+                data-testid={`build-${b.id}`}
+                tabIndex={0}
+                onClick={navigateToBuildPage}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    navigateToBuildPage()
+                  }
+                }}
+                className={styles.clickableTableRow}
+              >
                 <TableCell>{b.transition}</TableCell>
                 <TableCell>
                   <span style={{ color: theme.palette.text.secondary }}>{duration}</span>
@@ -95,3 +114,17 @@ export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) =
     </Table>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  clickableTableRow: {
+    cursor: "pointer",
+
+    "&:hover td": {
+      backgroundColor: theme.palette.background.default,
+    },
+
+    "&:focus": {
+      outline: `1px solid ${theme.palette.primary.dark}`,
+    },
+  },
+}))
@@ -0,0 +1,11 @@
+import Box from "@material-ui/core/Box"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import React from "react"
+
+export const Loader: React.FC<{ size?: number }> = ({ size = 26 }) => {
+  return (
+    <Box p={4}>
+      <CircularProgress size={size} />
+    </Box>
+  )
+}
@@ -0,0 +1,53 @@
+import { makeStyles } from "@material-ui/core/styles"
+import dayjs from "dayjs"
+import React from "react"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { combineClasses } from "../../util/combineClasses"
+
+interface Line {
+  time: string
+  output: string
+}
+
+export interface LogsProps {
+  lines: Line[]
+  className?: string
+}
+
+export const Logs: React.FC<LogsProps> = ({ lines, className = "" }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={combineClasses([className, styles.root])}>
+      {lines.map((line, idx) => (
+        <div className={styles.line} key={idx}>
+          <div className={styles.time}>{dayjs(line.time).format(`HH:mm:ss.SSS`)}</div>
+          <div>{line.output}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    minHeight: 156,
+    background: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    wordBreak: "break-all",
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+    overflowX: "auto",
+  },
+  line: {
+    display: "flex",
+    alignItems: "baseline",
+  },
+  time: {
+    width: theme.spacing(12.5),
+    marginRight: theme.spacing(3),
+    flexShrink: 0,
+  },
+}))
@@ -1,19 +1,16 @@
-import Box from "@material-ui/core/Box"
-import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
 import React from "react"
+import { Loader } from "../Loader/Loader"
 
 export const TableLoader: React.FC = () => {
   const styles = useStyles()

   return (
     <TableRow>
       <TableCell colSpan={999} className={styles.cell}>
-        <Box p={4}>
-          <CircularProgress size={26} />
-        </Box>
+        <Loader />
       </TableCell>
     </TableRow>
   )

@@ -0,0 +1,123 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { useMachine } from "@xstate/react"
+import dayjs from "dayjs"
+import React from "react"
+import { useParams } from "react-router-dom"
+import { ProvisionerJobLog } from "../../api/types"
+import { Loader } from "../../components/Loader/Loader"
+import { Logs } from "../../components/Logs/Logs"
+import { Margins } from "../../components/Margins/Margins"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+import { logsMachine } from "../../xServices/logs/logsXService"
+
+type Stage = ProvisionerJobLog["stage"]
+
+const groupLogsByStage = (logs: ProvisionerJobLog[]) => {
+  const logsByStage: Record<Stage, ProvisionerJobLog[]> = {}
+  let latestStage: Stage = logs[0].stage
+
+  for (const log of logs) {
+    if (log.stage !== "") {
+      latestStage = log.stage
+
+      // If there is no log in the stage record, add an empty array
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (logsByStage[latestStage] === undefined) {
+        logsByStage[latestStage] = []
+      }
+    }
+
+    logsByStage[latestStage].push(log)
+  }
+
+  return logsByStage
+}
+
+const useBuildname = () => {
+  const { buildname } = useParams()
+
+  if (!buildname) {
+    throw new Error("buildname param is required.")
+  }
+
+  return buildname
+}
+
+const getStageDurationInSeconds = (logs: ProvisionerJobLog[]) => {
+  if (logs.length < 2) {
+    return
+  }
+
+  const startedAt = dayjs(logs[0].created_at)
+  const completedAt = dayjs(logs[logs.length - 1].created_at)
+  return completedAt.diff(startedAt, "seconds")
+}
+
+export const WorkspaceBuildPage: React.FC = () => {
+  const buildname = useBuildname()
+  const [logsState] = useMachine(logsMachine, { context: { buildname } })
+  const { logs } = logsState.context
+  const groupedLogsByStage = logs ? groupLogsByStage(logs) : undefined
+  const stages = groupedLogsByStage ? Object.keys(groupedLogsByStage) : undefined
+  const styles = useStyles()
+
+  return (
+    <Margins>
+      {!groupedLogsByStage && <Loader />}
+
+      <div className={styles.logs}>
+        {groupedLogsByStage &&
+          stages &&
+          stages.map((stage) => {
+            const logs = groupedLogsByStage[stage]
+            const isEmpty = logs.every((l) => l.output === "")
+            const lines = logs.map((l) => ({
+              time: l.created_at,
+              output: l.output,
+            }))
+            const duration = getStageDurationInSeconds(logs)
+
+            return (
+              <div key={stage}>
+                <div className={styles.header}>
+                  <div>{stage}</div>
+                  {duration && <div className={styles.duration}>{duration} seconds</div>}
+                </div>
+                {!isEmpty && <Logs lines={lines} className={styles.codeBlock} />}
+              </div>
+            )
+          })}
+      </div>
+    </Margins>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  logs: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 2,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    marginTop: theme.spacing(4),
+  },
+
+  header: {
+    fontSize: theme.typography.body1.fontSize,
+    padding: theme.spacing(2),
+    paddingLeft: theme.spacing(4),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    display: "flex",
+    alignItems: "center",
+  },
+
+  duration: {
+    marginLeft: "auto",
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.body2.fontSize,
+  },
+
+  codeBlock: {
+    padding: theme.spacing(2),
+    paddingLeft: theme.spacing(4),
+  },
+}))