Jun 20, 2022 · Jun 16, 2022 · Jun 16, 2022 · Jun 17, 2022
diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx
 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
 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
  const styles = useStyles()
  const theme = useTheme()
  const status = getDisplayWorkspaceBuildStatus(theme, build)
  const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(theme, build)

  return (
    <div className={styles.stats}>
        <span className={styles.statsLabel}>Action</span>
        <span className={combineClasses([styles.statsValue, styles.capitalize])}>{build.transition}</span>
      </div>
      <div className={styles.statsDivider} />
      <div className={styles.statItem}>
        <span className={styles.statsLabel}>Initiated by</span>
        <span className={styles.statsValue}>
          <span style={{ color: initiatedBy.color }}>{initiatedBy.initiatedBy}</span>
        </span>
      </div>
    </div>
  )
 }
  },

  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
  }
 }

 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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
		},
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand All		@@ -15,6 +19,7 @@ export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) =>
		const styles = useStyles()
		const theme = useTheme()
		const status = getDisplayWorkspaceBuildStatus(theme, build)
		const initiatedBy = getDisplayWorkspaceBuildInitiatedBy(theme, build)

		return (
		<div className={styles.stats}>
Expand DownExpand Up		@@ -51,6 +56,13 @@ export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) =>
		<span className={styles.statsLabel}>Action</span>
		<span className={combineClasses([styles.statsValue, styles.capitalize])}>{build.transition}</span>
		</div>
		<div className={styles.statsDivider} />
		<div className={styles.statItem}>
		<span className={styles.statsLabel}>Initiated by</span>
		<span className={styles.statsValue}>
		<span style={{ color: initiatedBy.color }}>{initiatedBy.initiatedBy}</span>
		</span>
		</div>
		</div>
		)
		}
Expand All		@@ -72,7 +84,7 @@ const useStyles = makeStyles((theme) => ({
		},

		statItem: {
		minWidth: "16%",
		minWidth: "13%",
		padding: theme.spacing(2),
		paddingTop: theme.spacing(1.75),
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
		}
Copy link Member Kira-PilotJun 17, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. My feeling (and I know this is boring of me) is that we probably don't need to highlight these values in purple. I am concerned we will be drawing too much attention to information that, while important, is not particularly actionable. That being said, I love that you tried a different design! Maybe post this in the dev-ux channel to get more opinions - I'm not a designer by any stretch of the imagination haha. AbhineetJain reacted with thumbs up emoji
		}
		}

		export const getWorkspaceBuildDurationInSeconds = (build: TypesGen.WorkspaceBuild): number \| undefined => {
		const isCompleted = build.job.started_at && build.job.completed_at

Expand Down