coder · BrunoQuaresma · May 18, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -221,3 +221,8 @@ export const regenerateUserSSHKey = async (userId = "me"): Promise<TypesGen.GitS
   const response = await axios.put<TypesGen.GitSSHKey>(`/api/v2/users/${userId}/gitsshkey`)
   return response.data
 }
+
+export const getWorkspaceBuilds = async (workspaceId: string): Promise<TypesGen.WorkspaceBuild[]> => {
+  const response = await axios.get<TypesGen.WorkspaceBuild[]>(`/api/v2/workspaces/${workspaceId}/builds`)
+  return response.data
+}
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -0,0 +1,103 @@
+import Box from "@material-ui/core/Box"
+import { 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 * as TypesGen from "../../api/typesGenerated"
+import { getDisplayStatus } from "../../util/workspace"
+import { EmptyState } from "../EmptyState/EmptyState"
+import { TableLoader } from "../TableLoader/TableLoader"
+
+dayjs.extend(relativeTime)
+dayjs.extend(duration)
+
+export const Language = {
+  pageTitle: "Builds",
+  usersTitle: "All users",
+  emptyMessage: "No users found",
+  usernameLabel: "User",
+  suspendMenuItem: "Suspend",
+  resetPasswordMenuItem: "Reset password",
+  rolesLabel: "Roles",
+  inProgressLabel: "In progress",
+  actionLabel: "Action",
+  durationLabel: "Duration",
+  startedAtLabel: "Started at",
+  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
+}
+
+export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) => {
+  const isLoading = !builds
+  const theme: Theme = useTheme()
+
+  return (
+    <Table className={className}>
+      <TableHead>
+        <TableRow>
+          <TableCell width="20%">{Language.actionLabel}</TableCell>
+          <TableCell width="20%">{Language.durationLabel}</TableCell>
+          <TableCell width="40%">{Language.startedAtLabel}</TableCell>
+          <TableCell width="20%">{Language.statusLabel}</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {isLoading && <TableLoader />}
+        {builds &&
+          builds.map((b) => {
+            const status = getDisplayStatus(theme, b)
+            const duration = getDurationInSeconds(b)
+
+            return (
+              <TableRow key={b.id}>
+                <TableCell>{b.transition}</TableCell>
+                <TableCell>
+                  <span style={{ color: theme.palette.text.secondary }}>{duration}</span>
+                </TableCell>
+                <TableCell>
+                  <span style={{ color: theme.palette.text.secondary }}>{new Date(b.created_at).toLocaleString()}</span>
+                </TableCell>
+                <TableCell>
+                  <span style={{ color: status.color }}>{status.status}</span>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+
+        {builds && builds.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={999}>
+              <Box p={4}>
+                <EmptyState message="No builds for this workspace" />
+              </Box>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -3,6 +3,7 @@ import Typography from "@material-ui/core/Typography"
 import React from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { WorkspaceStatus } from "../../util/workspace"
+import { BuildsTable } from "../BuildsTable/BuildsTable"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
@@ -16,6 +17,7 @@ export interface WorkspaceProps {
   handleRetry: () => void
   handleUpdate: () => void
   workspaceStatus: WorkspaceStatus
+  builds?: TypesGen.WorkspaceBuild[]
 }
 
 /**
@@ -28,6 +30,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({
   handleRetry,
   handleUpdate,
   workspaceStatus,
+  builds,
 }) => {
   const styles = useStyles()
 
@@ -56,13 +59,8 @@ export const Workspace: React.FC<WorkspaceProps> = ({
             </WorkspaceSection>
           </div>
           <div className={styles.timelineContainer}>
-            <WorkspaceSection title="Timeline">
-              <div
-                className={styles.vertical}
-                style={{ justifyContent: "center", alignItems: "center", height: "300px" }}
-              >
-                <Placeholder />
-              </div>
+            <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
+              <BuildsTable builds={builds} className={styles.timelineTable} />
             </WorkspaceSection>
           </div>
         </div>
@@ -105,5 +103,11 @@ export const useStyles = makeStyles(() => {
     timelineContainer: {
       flex: 1,
     },
+    timelineContents: {
+      margin: 0,
+    },
+    timelineTable: {
+      border: 0,
+    },
   }
 })
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -1,14 +1,16 @@
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import React, { HTMLProps } from "react"
 import { CardPadding, CardRadius } from "../../theme/constants"
+import { combineClasses } from "../../util/combineClasses"
 
 export interface WorkspaceSectionProps {
   title?: string
+  contentsProps?: HTMLProps<HTMLDivElement>
 }
 
-export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
+export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children, contentsProps }) => {
   const styles = useStyles()
 
   return (
@@ -21,7 +23,9 @@ export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, child
         </div>
       )}
 
-      <div className={styles.contents}>{children}</div>
+      <div {...contentsProps} className={combineClasses([styles.contents, contentsProps?.className])}>
+        {children}
+      </div>
     </Paper>
   )
 }

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -16,7 +16,7 @@ export const WorkspacePage: React.FC = () => {
 
   const xServices = useContext(XServiceContext)
   const [workspaceState, workspaceSend] = useActor(xServices.workspaceXService)
-  const { workspace, getWorkspaceError, getTemplateError, getOrganizationError } = workspaceState.context
+  const { workspace, getWorkspaceError, getTemplateError, getOrganizationError, builds } = workspaceState.context
   const workspaceStatus = useSelector(xServices.workspaceXService, (state) => {
     return getWorkspaceStatus(state.context.workspace?.latest_build)
   })
@@ -44,6 +44,7 @@ export const WorkspacePage: React.FC = () => {
             handleRetry={() => workspaceSend("RETRY")}
             handleUpdate={() => workspaceSend("UPDATE")}
             workspaceStatus={workspaceStatus}
+            builds={builds}
           />
         </Stack>
       </Margins>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -14,11 +14,10 @@ import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
-import { WorkspaceBuild } from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { firstLetter } from "../../util/firstLetter"
-import { getWorkspaceStatus } from "../../util/workspace"
+import { getDisplayStatus } from "../../util/workspace"
 
 dayjs.extend(relativeTime)
 
@@ -68,7 +67,7 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
               </TableRow>
             )}
             {props.workspaces?.map((workspace) => {
-              const status = getStatus(theme, workspace.latest_build)
+              const status = getDisplayStatus(theme, workspace.latest_build)
               return (
                 <TableRow key={workspace.id} className={styles.workspaceRow}>
                   <TableCell>
@@ -108,74 +107,6 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
   )
 }
 
-const getStatus = (
-  theme: Theme,
-  build: WorkspaceBuild,
-): {
-  color: string
-  status: string
-} => {
-  const status = getWorkspaceStatus(build)
-  switch (status) {
-    case undefined:
-      return {
-        color: theme.palette.text.secondary,
-        status: "Loading...",
-      }
-    case "started":
-      return {
-        color: theme.palette.success.main,
-        status: "⦿ Running",
-      }
-    case "starting":
-      return {
-        color: theme.palette.success.main,
-        status: "⦿ Starting",
-      }
-    case "stopping":
-      return {
-        color: theme.palette.text.secondary,
-        status: "◍ Stopping",
-      }
-    case "stopped":
-      return {
-        color: theme.palette.text.secondary,
-        status: "◍ Stopped",
-      }
-    case "deleting":
-      return {
-        color: theme.palette.text.secondary,
-        status: "⦸ Deleting",
-      }
-    case "deleted":
-      return {
-        color: theme.palette.text.secondary,
-        status: "⦸ Deleted",
-      }
-    case "canceling":
-      return {
-        color: theme.palette.warning.light,
-        status: "◍ Canceling",
-      }
-    case "canceled":
-      return {
-        color: theme.palette.text.secondary,
-        status: "◍ Canceled",
-      }
-    case "error":
-      return {
-        color: theme.palette.error.main,
-        status: "ⓧ Failed",
-      }
-    case "queued":
-      return {
-        color: theme.palette.text.secondary,
-        status: "◍ Queued",
-      }
-  }
-  throw new Error("unknown status " + status)
-}
-
 const useStyles = makeStyles((theme) => ({
   actions: {
     marginTop: theme.spacing(3),

diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -1,3 +1,4 @@
+import { Theme } from "@material-ui/core/styles"
 import { WorkspaceBuildTransition } from "../api/types"
 import { WorkspaceBuild } from "../api/typesGenerated"
 
@@ -47,3 +48,71 @@ export const getWorkspaceStatus = (workspaceBuild?: WorkspaceBuild): WorkspaceSt
       return "error"
   }
 }
+
+export const getDisplayStatus = (
+  theme: Theme,
+  build: WorkspaceBuild,
+): {
+  color: string
+  status: string
+} => {
+  const status = getWorkspaceStatus(build)
+  switch (status) {
+    case undefined:
+      return {
+        color: theme.palette.text.secondary,
+        status: "Loading...",
+      }
+    case "started":
+      return {
+        color: theme.palette.success.main,
+        status: "⦿ Running",
+      }
+    case "starting":
+      return {
+        color: theme.palette.success.main,
+        status: "⦿ Starting",
+      }
+    case "stopping":
+      return {
+        color: theme.palette.text.secondary,
+        status: "◍ Stopping",
+      }
+    case "stopped":
+      return {
+        color: theme.palette.text.secondary,
+        status: "◍ Stopped",
+      }
+    case "deleting":
+      return {
+        color: theme.palette.text.secondary,
+        status: "⦸ Deleting",
+      }
+    case "deleted":
+      return {
+        color: theme.palette.text.secondary,
+        status: "⦸ Deleted",
+      }
+    case "canceling":
+      return {
+        color: theme.palette.warning.light,
+        status: "◍ Canceling",
+      }
+    case "canceled":
+      return {
+        color: theme.palette.text.secondary,
+        status: "◍ Canceled",
+      }
+    case "error":
+      return {
+        color: theme.palette.error.main,
+        status: "ⓧ Failed",
+      }
+    case "queued":
+      return {
+        color: theme.palette.text.secondary,
+        status: "◍ Queued",
+      }
+  }
+  throw new Error("unknown status " + status)
+}