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

mtojek · web-flow · commit 3dbc96d597b8 · 2023-06-28T14:48:58.000+02:00
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/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,
diff --git a/site/src/components/Workspace/Workspace.tsx b/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,
+    },
   }
 })
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/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>
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/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 {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/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,
   }
diff --git a/site/src/testHelpers/entities.ts b/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",
diff --git a/site/src/utils/workspace.tsx b/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" }} />
 }

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export const WorkspaceStatusBadge: FC<`
`20`	`20`	`> = ({ workspace, className }) => {`
`21`	`21`	`const { text, icon, type } = getDisplayWorkspaceStatus(`
`22`	`22`	`workspace.latest_build.status,`
	`23`	`+ workspace.latest_build.job,`
`23`	`24`	`)`
`24`	`25`	`return (`
`25`	`26`	`<ChooseOne>`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,6 @@ const Language = {`
`13`	`13`	`template: "Template",`
`14`	`14`	`lastUsed: "Last Used",`
`15`	`15`	`status: "Status",`
`16`		`- lastBuiltBy: "Last Built By",`
`17`	`16`	`}`
`18`	`17`
`19`	`18`	`export interface WorkspacesTableProps {`
Original file line number	Diff line number	Diff line change
`@@ -310,6 +310,8 @@ export const MockRunningProvisionerJob: TypesGen.ProvisionerJob = {`
`310`	`310`	`export const MockPendingProvisionerJob: TypesGen.ProvisionerJob = {`
`311`	`311`	`...MockProvisionerJob,`
`312`	`312`	`status: "pending",`
	`313`	`+ queue_position: 2,`
	`314`	`+ queue_size: 4,`
`313`	`315`	`}`
`314`	`316`	`export const MockTemplateVersion: TypesGen.TemplateVersion = {`
`315`	`317`	`id: "test-template-version",`