Frontend implementation

mtojek · mtojek · commit a952148e10ce · 2023-06-28T13:19:35.000+02:00
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,28 @@ 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 build job is waiting for a provisioner to become
+                  available. If you have been waiting for an extended period,
+                  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 +342,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>
@@ -42,6 +43,8 @@ export const WorkspaceStatusText: FC<
     workspace.latest_build.status,
   )
 
+  workspace.latest_build.job.queue_size
+
   return (
     <ChooseOne>
       {/* <ImpendingDeletionText/> determines its own visibility */}
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/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 === undefined || provisionerJob.queue_size === 0) {
+    return t("workspaceStatus.pending", { ns: "common" })
+  }
+  return "Pending in queue: " + provisionerJob.queue_position
+}
+
 const LoadingIcon = () => {
   return <CircularProgress size={10} style={{ color: "#FFF" }} />
 }

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 {`