coder · BrunoQuaresma · Oct 25, 2022 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx
@@ -0,0 +1,71 @@
+import Avatar from "@material-ui/core/Avatar"
+import Badge from "@material-ui/core/Badge"
+import { Theme, useTheme, withStyles } from "@material-ui/core/styles"
+import { FC } from "react"
+import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
+import PauseOutlined from "@material-ui/icons/PauseOutlined"
+import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
+import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
+import { getDisplayWorkspaceBuildStatus } from "util/workspace"
+import { PaletteIndex } from "theme/palettes"
+
+interface StylesBadgeProps {
+  type: PaletteIndex
+}
+
+const StyledBadge = withStyles((theme) => ({
+  badge: {
+    backgroundColor: ({ type }: StylesBadgeProps) => theme.palette[type].light,
+    borderRadius: "100%",
+    width: 8,
+    minWidth: 8,
+    height: 8,
+    display: "block",
+    padding: 0,
+  },
+}))(Badge)
+
+const StyledAvatar = withStyles((theme) => ({
+  root: {
+    background: theme.palette.background.paperLight,
+    color: theme.palette.text.primary,
+    border: `2px solid ${theme.palette.divider}`,
+
+    "& svg": {
+      width: 24,
+      height: 24,
+    },
+  },
+}))(Avatar)
+
+export type BuildAvatarProps = {
+  build: WorkspaceBuild
+}
+
+const iconByTransition: Record<WorkspaceTransition, JSX.Element> = {
+  start: <PlayArrowOutlined />,
+  stop: <PauseOutlined />,
+  delete: <DeleteOutlined />,
+}
+
+export const BuildAvatar: FC<BuildAvatarProps> = ({ build }) => {
+  const theme = useTheme<Theme>()
+  const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build)
+
+  return (
+    <StyledBadge
+      role="status"
+      type={displayBuildStatus.type}
+      arial-label={displayBuildStatus.status}
+      title={displayBuildStatus.status}
+      overlap="circular"
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+      badgeContent={<div></div>}
+    >
+      <StyledAvatar>{iconByTransition[build.transition]}</StyledAvatar>
+    </StyledBadge>
+  )
+}
diff --git a/site/src/components/BuildsTable/BuildDateRow.tsx b/site/src/components/BuildsTable/BuildDateRow.tsx
@@ -0,0 +1,46 @@
+import { makeStyles } from "@material-ui/core/styles"
+import TableCell from "@material-ui/core/TableCell"
+import TableRow from "@material-ui/core/TableRow"
+import formatRelative from "date-fns/formatRelative"
+import { FC } from "react"
+
+export interface BuildDateRow {
+  date: Date
+}
+
+export const BuildDateRow: FC<BuildDateRow> = ({ date }) => {
+  const styles = useStyles()
+  // We only want the message related to the date since the time is displayed
+  // inside of the build row
+  const displayDate = formatRelative(date, new Date()).split("at")[0]
+
+  return (
+    <TableRow className={styles.buildDateRow}>
+      <TableCell
+        className={styles.buildDateCell}
+        title={date.toLocaleDateString()}
+      >
+        {displayDate}
+      </TableCell>
+    </TableRow>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  buildDateRow: {
+    background: theme.palette.background.paper,
+
+    "&:not(:first-child) td": {
+      borderTop: `1px solid ${theme.palette.divider}`,
+    },
+  },
+
+  buildDateCell: {
+    padding: `${theme.spacing(1, 4)} !important`,
+    background: `${theme.palette.background.paperLight} !important`,
+    fontSize: 12,
+    position: "relative",
+    color: theme.palette.text.secondary,
+    textTransform: "capitalize",
+  },
+}))
diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx
@@ -0,0 +1,144 @@
+import { makeStyles } from "@material-ui/core/styles"
+import TableCell from "@material-ui/core/TableCell"
+import TableRow from "@material-ui/core/TableRow"
+import { WorkspaceBuild } from "api/typesGenerated"
+import { Stack } from "components/Stack/Stack"
+import { useClickable } from "hooks/useClickable"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+import {
+  displayWorkspaceBuildDuration,
+  getDisplayWorkspaceBuildInitiatedBy,
+} from "util/workspace"
+import { BuildAvatar } from "./BuildAvatar"
+
+export interface BuildRowProps {
+  build: WorkspaceBuild
+}
+
+export const BuildRow: React.FC<BuildRowProps> = ({ build }) => {
+  const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
+  const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(build)
+  const navigate = useNavigate()
+  const clickableProps = useClickable(() =>
+    navigate(`builds/${build.build_number}`),
+  )
+
+  return (
+    <TableRow
+      hover
+      data-testid={`build-${build.id}`}
+      className={styles.buildRow}
+      {...clickableProps}
+    >
+      <TableCell className={styles.buildCell}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          className={styles.buildWrapper}
+        >
+          <Stack direction="row" alignItems="center">
+            <BuildAvatar build={build} />
+            <div>
+              <Stack
+                className={styles.buildResume}
+                direction="row"
+                alignItems="center"
+                spacing={1}
+              >
+                <span>
+                  <strong>{initiatedBy}</strong>{" "}
+                  {build.reason !== "initiator"
+                    ? t("buildMessage.automatically")
+                    : ""}
+                  <strong>{t(`buildMessage.${build.transition}`)}</strong>{" "}
+                  {t("buildMessage.theWorkspace")}
+                </span>
+
+                <span className={styles.buildTime}>
+                  {new Date(build.created_at).toLocaleTimeString()}
+                </span>
+              </Stack>
+
+              <Stack direction="row" spacing={1}>
+                <span className={styles.buildInfo}>
+                  {t("buildData.reason")}: <strong>{build.reason}</strong>
+                </span>
+
+                <span className={styles.buildInfo}>
+                  {t("buildData.duration")}:{" "}
+                  <strong>{displayWorkspaceBuildDuration(build)}</strong>
+                </span>
+              </Stack>
+            </div>
+          </Stack>
+        </Stack>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  buildRow: {
+    cursor: "pointer",
+
+    "&:focus": {
+      outlineStyle: "solid",
+      outlineOffset: -1,
+      outlineWidth: 2,
+      outlineColor: theme.palette.secondary.dark,
+    },
+
+    "&:not(:last-child) td:before": {
+      position: "absolute",
+      top: 20,
+      left: 50,
+      display: "block",
+      content: "''",
+      height: "100%",
+      width: 2,
+      background: theme.palette.divider,
+    },
+  },
+
+  buildWrapper: {
+    padding: theme.spacing(2, 4),
+  },
+
+  buildCell: {
+    padding: "0 !important",
+    position: "relative",
+    borderBottom: 0,
+  },
+
+  buildResume: {
+    ...theme.typography.body1,
+    fontFamily: "inherit",
+  },
+
+  buildInfo: {
+    ...theme.typography.body2,
+    fontSize: 12,
+    fontFamily: "inherit",
+    color: theme.palette.text.secondary,
+    display: "block",
+  },
+
+  buildTime: {
+    color: theme.palette.text.secondary,
+    fontSize: 12,
+  },
+
+  buildRight: {
+    width: "auto",
+  },
+
+  buildExtraInfo: {
+    ...theme.typography.body2,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    color: theme.palette.text.secondary,
+    whiteSpace: "nowrap",
+  },
+}))