coder · BrunoQuaresma · May 19, 2022 · May 18, 2022 · May 19, 2022 · May 19, 2022
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"
 }
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -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/:buildId"
+          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. */}

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -248,3 +248,13 @@ 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 getWorkspaceBuild = async (workspaceId: string): Promise<TypesGen.WorkspaceBuild> => {
+  const response = await axios.get<TypesGen.WorkspaceBuild>(`/api/v2/workspacebuilds/${workspaceId}`)
+  return response.data
+}
+
+export const getWorkspaceBuildLogs = async (buildname: string): Promise<TypesGen.ProvisionerJobLog[]> => {
+  const response = await axios.get<TypesGen.ProvisionerJobLog[]>(`/api/v2/workspacebuilds/${buildname}/logs`)
+  return response.data
+}
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -1,23 +1,18 @@
 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"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
-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 { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableLoader } from "../TableLoader/TableLoader"
 
-dayjs.extend(relativeTime)
-dayjs.extend(duration)
-
 export const Language = {
   emptyMessage: "No builds found",
   inProgressLabel: "In progress",
@@ -27,19 +22,6 @@ export const Language = {
   statusLabel: "Status",
 }
 
-const getDurationInSeconds = (build: TypesGen.WorkspaceBuild) => {
-  let display = Language.inProgressLabel
-
-  if (build.job.started_at && build.job.completed_at) {
-    const startedAt = dayjs(build.job.started_at)
-    const completedAt = dayjs(build.job.completed_at)
-    const diff = completedAt.diff(startedAt, "seconds")
-    display = `${diff} seconds`
-  }
-
-  return display
-}
-
 export interface BuildsTableProps {
   builds?: TypesGen.WorkspaceBuild[]
   className?: string
@@ -48,6 +30,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}>
@@ -62,18 +46,35 @@ export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) =
       <TableBody>
         {isLoading && <TableLoader />}
         {builds &&
-          builds.map((b) => {
-            const status = getDisplayStatus(theme, b)
-            const duration = getDurationInSeconds(b)
+          builds.map((build) => {
+            const status = getDisplayStatus(theme, build)
+
+            const navigateToBuildPage = () => {
+              navigate(`/builds/${build.id}`)
+            }
 
             return (
-              <TableRow key={b.id} data-testid={`build-${b.id}`}>
-                <TableCell>{b.transition}</TableCell>
+              <TableRow
+                hover
+                key={build.id}
+                data-testid={`build-${build.id}`}
+                tabIndex={0}
+                onClick={navigateToBuildPage}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    navigateToBuildPage()
+                  }
+                }}
+                className={styles.clickableTableRow}
+              >
+                <TableCell>{build.transition}</TableCell>
                 <TableCell>
-                  <span style={{ color: theme.palette.text.secondary }}>{duration}</span>
+                  <span style={{ color: theme.palette.text.secondary }}>{displayWorkspaceBuildDuration(build)}</span>
                 </TableCell>
                 <TableCell>
-                  <span style={{ color: theme.palette.text.secondary }}>{new Date(b.created_at).toLocaleString()}</span>
+                  <span style={{ color: theme.palette.text.secondary }}>
+                    {new Date(build.created_at).toLocaleString()}
+                  </span>
                 </TableCell>
                 <TableCell>
                   <span style={{ color: status.color }}>{status.status}</span>
@@ -95,3 +96,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}`,
+    },
+  },
+}))
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
@@ -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} width="100%" display="flex" alignItems="center" justifyContent="center">
+      <CircularProgress size={size} />
+    </Box>
+  )
+}
diff --git a/site/src/components/Logs/Logs.stories.tsx b/site/src/components/Logs/Logs.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockWorkspaceBuildLogs } from "../../testHelpers/entities"
+import { Logs, LogsProps } from "./Logs"
+
+export default {
+  title: "components/Logs",
+  component: Logs,
+} as ComponentMeta<typeof Logs>
+
+const Template: Story<LogsProps> = (args) => <Logs {...args} />
+
+const lines = MockWorkspaceBuildLogs.map((log) => ({
+  time: log.created_at,
+  output: log.output,
+}))
+export const Example = Template.bind({})
+Example.args = {
+  lines,
+}
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
@@ -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,
+  },
+}))
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
@@ -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>
   )

diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockWorkspaceBuildLogs } from "../../testHelpers/entities"
+import { WorkspaceBuildLogs, WorkspaceBuildLogsProps } from "./WorkspaceBuildLogs"
+
+export default {
+  title: "components/WorkspaceBuildLogs",
+  component: WorkspaceBuildLogs,
+} as ComponentMeta<typeof WorkspaceBuildLogs>
+
+const Template: Story<WorkspaceBuildLogsProps> = (args) => <WorkspaceBuildLogs {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  logs: MockWorkspaceBuildLogs,
+}