feat: show queue position of pending workspace build (#8244)

site/src/components/Workspace/Workspace.stories.tsx

@@ -98,6 +98,13 @@ export const WithoutUpdateAccess: Story = {
   },
 }
 
+export const PendingInQueue: Story = {
+  args: {
+    ...Running.args,
+    workspace: Mocks.MockPendingWorkspace,
+  },
+}
+
 export const Starting: Story = {
   args: {
     ...Running.args,

site/src/components/Workspace/Workspace.tsx

@@ -31,6 +31,7 @@ import { ImpendingDeletionBanner } from "components/WorkspaceDeletion"
 import { useLocalStorage } from "hooks"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import AlertTitle from "@mui/material/AlertTitle"
+import { Maybe } from "components/Conditionals/Maybe"
 
 export enum WorkspaceErrors {
   GET_BUILDS_ERROR = "getBuildsError",
@@ -207,6 +208,29 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
 
           <TemplateVersionWarnings warnings={templateWarnings} />
 
+          <Maybe
+            condition={
+              workspace.latest_build.status === "pending" &&
+              workspace.latest_build.job.queue_size > 0
+            }
+          >
+            <Alert severity="info">
+              <AlertTitle>Workspace build is pending</AlertTitle>
+              <AlertDetail>
+                <div className={styles.alertPendingInQueue}>
+                  This workspace build job is waiting for a provisioner to
+                  become available. If you have been waiting for an extended
+                  period of time, please contact your administrator for
+                  assistance.
+                </div>
+                <div>
+                  Position in queue:{" "}
+                  <strong>{workspace.latest_build.job.queue_position}</strong>
+                </div>
+              </AlertDetail>
+            </Alert>
+          </Maybe>
+
           {failedBuildLogs && (
             <Stack>
               <Alert
@@ -319,5 +343,9 @@ export const useStyles = makeStyles((theme) => {
     fullWidth: {
       width: "100%",
     },
+
+    alertPendingInQueue: {
+      marginBottom: 12,
+    },
   }
 })

site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -20,6 +20,7 @@ export const WorkspaceStatusBadge: FC<
 > = ({ workspace, className }) => {
   const { text, icon, type } = getDisplayWorkspaceStatus(
     workspace.latest_build.status,
+    workspace.latest_build.job,
   )
   return (
     <ChooseOne>

site/src/components/WorkspacesTable/WorkspacesTable.tsx

@@ -13,7 +13,6 @@ const Language = {
   template: "Template",
   lastUsed: "Last Used",
   status: "Status",
-  lastBuiltBy: "Last Built By",
 }
 
 export interface WorkspacesTableProps {

site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx

@@ -15,6 +15,7 @@ import {
   MockExperiments,
   mockApiError,
   MockUser,
+  MockPendingProvisionerJob,
 } from "testHelpers/entities"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 import { DashboardProviderContext } from "components/Dashboard/DashboardProvider"
@@ -33,6 +34,10 @@ const createWorkspace = (
     latest_build: {
       ...MockWorkspace.latest_build,
       status,
+      job:
+        status === "pending"
+          ? MockPendingProvisionerJob
+          : MockWorkspace.latest_build.job,
     },
     last_used_at: lastUsedAt,
   }

site/src/testHelpers/entities.ts

@@ -310,6 +310,8 @@ export const MockRunningProvisionerJob: TypesGen.ProvisionerJob = {
 export const MockPendingProvisionerJob: TypesGen.ProvisionerJob = {
   ...MockProvisionerJob,
   status: "pending",
+  queue_position: 2,
+  queue_size: 4,
 }
 export const MockTemplateVersion: TypesGen.TemplateVersion = {
   id: "test-template-version",

site/src/utils/workspace.tsx

@@ -194,6 +194,7 @@ export const getDisplayWorkspaceTemplateName = (
 
 export const getDisplayWorkspaceStatus = (
   workspaceStatus: TypesGen.WorkspaceStatus,
+  provisionerJob?: TypesGen.ProvisionerJob,
 ) => {
   const { t } = i18next
 
@@ -260,12 +261,23 @@ export const getDisplayWorkspaceStatus = (
     case "pending":
       return {
         type: "info",
-        text: t("workspaceStatus.pending", { ns: "common" }),
+        text: getPendingWorkspaceStatusText(provisionerJob),
         icon: <QueuedIcon />,
       } as const
   }
 }
 
+const getPendingWorkspaceStatusText = (
+  provisionerJob?: TypesGen.ProvisionerJob,
+): string => {
+  const { t } = i18next
+
+  if (!provisionerJob || provisionerJob.queue_size === 0) {
+    return t("workspaceStatus.pending", { ns: "common" })
+  }
+  return "Position in queue: " + provisionerJob.queue_position
+}
+
 const LoadingIcon = () => {
   return <CircularProgress size={10} style={{ color: "#FFF" }} />
 }