diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx index 75a33eaa8776f..ba80702137445 100644 --- a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx +++ b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx @@ -13,3 +13,20 @@ export const Example = Template.bind({}) Example.args = { build: MockWorkspaceBuild, } + +export const Autostart = Template.bind({}) +Autostart.args = { + build: { + ...MockWorkspaceBuild, + reason: "autostart", + }, +} + +export const Autostop = Template.bind({}) +Autostop.args = { + build: { + ...MockWorkspaceBuild, + transition: "stop", + reason: "autostop", + }, +} diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx index 33a9888b5cabd..5cc9596fe15a1 100644 --- a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx +++ b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx @@ -5,7 +5,11 @@ import { Link as RouterLink } from "react-router-dom" import { WorkspaceBuild } from "../../api/typesGenerated" import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../util/combineClasses" -import { displayWorkspaceBuildDuration, getDisplayWorkspaceBuildStatus } from "../../util/workspace" +import { + displayWorkspaceBuildDuration, + getDisplayWorkspaceBuildInitiatedBy, + getDisplayWorkspaceBuildStatus, +} from "../../util/workspace" export interface WorkspaceBuildStatsProps { build: WorkspaceBuild @@ -15,6 +19,7 @@ export const WorkspaceBuildStats: FC = ({ build }) => const styles = useStyles() const theme = useTheme() const status = getDisplayWorkspaceBuildStatus(theme, build) + const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(theme, build) return (
@@ -51,6 +56,13 @@ export const WorkspaceBuildStats: FC = ({ build }) => Action {build.transition}
+
+
+ Initiated by + + {initiatedBy.initiatedBy} + +
) } @@ -72,7 +84,7 @@ const useStyles = makeStyles((theme) => ({ }, statItem: { - minWidth: "16%", + minWidth: "13%", padding: theme.spacing(2), paddingTop: theme.spacing(1.75), }, diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts index 42c997f103f69..d1982b834da81 100644 --- a/site/src/util/workspace.ts +++ b/site/src/util/workspace.ts @@ -186,6 +186,37 @@ export const getDisplayWorkspaceBuildStatus = ( } } +export const DisplayWorkspaceBuildInitiatedByLanguage = { + autostart: "system/autostart", + autostop: "system/autostop", +} + +export const getDisplayWorkspaceBuildInitiatedBy = ( + theme: Theme, + build: TypesGen.WorkspaceBuild, +): { + color: string + initiatedBy: string +} => { + switch (build.reason) { + case "initiator": + return { + color: theme.palette.text.secondary, + initiatedBy: build.initiator_name, + } + case "autostart": + return { + color: theme.palette.secondary.dark, + initiatedBy: DisplayWorkspaceBuildInitiatedByLanguage.autostart, + } + case "autostop": + return { + color: theme.palette.secondary.dark, + initiatedBy: DisplayWorkspaceBuildInitiatedByLanguage.autostop, + } + } +} + export const getWorkspaceBuildDurationInSeconds = (build: TypesGen.WorkspaceBuild): number | undefined => { const isCompleted = build.job.started_at && build.job.completed_at