diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx index 2ace2d0b903b8..75a35f6839657 100644 --- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx +++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx @@ -9,6 +9,10 @@ import { ImpendingDeletionText, } from "components/WorkspaceDeletion" import { getDisplayWorkspaceStatus } from "utils/workspace" +import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip" +import { styled } from "@mui/material/styles" +import Box from "@mui/material/Box" +import ErrorOutline from "@mui/icons-material/ErrorOutline" export type WorkspaceStatusBadgeProps = { workspace: Workspace @@ -28,6 +32,27 @@ export const WorkspaceStatusBadge: FC< + + + theme.palette.error.light, + }} + /> + {workspace.latest_build.job.error} + + } + placement="top" + > +
+ +
+
+
@@ -66,6 +91,17 @@ export const WorkspaceStatusText: FC< ) } +const FailureTooltip = styled(({ className, ...props }: TooltipProps) => ( + +))(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: theme.palette.background.paperLight, + border: `1px solid ${theme.palette.divider}`, + fontSize: 12, + padding: theme.spacing(1, 1.25), + }, +})) + const useStyles = makeStyles((theme) => ({ root: { fontWeight: 600 }, "type-error": {