Skip to content

Commit 17ecf0e

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Move pending in queue notification
1 parent 9ec5952 commit 17ecf0e

File tree

2 files changed

+57
-62
lines changed

2 files changed

+57
-62
lines changed

‎site/src/pages/WorkspacePage/Workspace.tsx

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Button from "@mui/material/Button";
33
import AlertTitle from "@mui/material/AlertTitle";
4-
import { type FC, useEffect, useState } from "react";
4+
import { type FC, useEffect } from "react";
55
import { useNavigate } from "react-router-dom";
6-
import dayjs from "dayjs";
76
import type * as TypesGen from "api/typesGenerated";
87
import { Alert, AlertDetail } from "components/Alert/Alert";
98
import { Stack } from "components/Stack/Stack";
@@ -86,43 +85,6 @@ export const Workspace: FC<WorkspaceProps> = ({
8685
const navigate = useNavigate();
8786
const theme = useTheme();
8887

89-
const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false);
90-
91-
// 2023-11-15 - MES - This effect will be called every single render because
92-
// "now" will always change and invalidate the dependency array. Need to
93-
// figure out if this effect really should run every render (possibly meaning
94-
// no dependency array at all), or how to get the array stabilized (ideal)
95-
const now = dayjs();
96-
useEffect(() => {
97-
if (
98-
workspace.latest_build.status !== "pending" ||
99-
workspace.latest_build.job.queue_size === 0
100-
) {
101-
if (!showAlertPendingInQueue) {
102-
return;
103-
}
104-
105-
const hideTimer = setTimeout(() => {
106-
setShowAlertPendingInQueue(false);
107-
}, 250);
108-
return () => {
109-
clearTimeout(hideTimer);
110-
};
111-
}
112-
113-
const t = Math.max(
114-
0,
115-
5000 - dayjs().diff(dayjs(workspace.latest_build.created_at)),
116-
);
117-
const showTimer = setTimeout(() => {
118-
setShowAlertPendingInQueue(true);
119-
}, t);
120-
121-
return () => {
122-
clearTimeout(showTimer);
123-
};
124-
}, [workspace, now, showAlertPendingInQueue]);
125-
12688
const transitionStats =
12789
template !== undefined ? ActiveTransition(template, workspace) : undefined;
12890

@@ -238,24 +200,6 @@ export const Workspace: FC<WorkspaceProps> = ({
238200
/>
239201
)}
240202

241-
{showAlertPendingInQueue && (
242-
<Alert severity="info">
243-
<AlertTitle>Workspace build is pending</AlertTitle>
244-
<AlertDetail>
245-
<div css={styles.alertPendingInQueue}>
246-
This workspace build job is waiting for a provisioner to
247-
become available. If you have been waiting for an extended
248-
period of time, please contact your administrator for
249-
assistance.
250-
</div>
251-
<div>
252-
Position in queue:{" "}
253-
<strong>{workspace.latest_build.job.queue_position}</strong>
254-
</div>
255-
</AlertDetail>
256-
</Alert>
257-
)}
258-
259203
{workspace.latest_build.job.error && (
260204
<Alert
261205
severity="error"
@@ -358,8 +302,4 @@ const styles = {
358302
firstColumnSpacer: {
359303
flex: 2,
360304
},
361-
362-
alertPendingInQueue: {
363-
marginBottom: 12,
364-
},
365305
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/WorkspacePage/WorkspaceNotifications.tsx

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import Button from "@mui/material/Button";
33
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
44
import { TemplateVersion, Workspace } from "api/typesGenerated";
55
import { Alert, AlertDetail } from "components/Alert/Alert";
6-
import { FC } from "react";
6+
import { FC, useEffect, useState } from "react";
77
import { useQuery } from "react-query";
88
import { WorkspacePermissions } from "./permissions";
99
import { DormantWorkspaceBanner } from "./DormantWorkspaceBanner";
10+
import dayjs from "dayjs";
1011

1112
type WorkspaceNotificationsProps = {
1213
workspace: Workspace;
@@ -32,6 +33,43 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = (
3233
const autoStartFailing = workspace.autostart_schedule && !canAutostart;
3334
const requiresManualUpdate = updateRequired && autoStartFailing;
3435

36+
// Pending in Queue
37+
const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false);
38+
// 2023-11-15 - MES - This effect will be called every single render because
39+
// "now" will always change and invalidate the dependency array. Need to
40+
// figure out if this effect really should run every render (possibly meaning
41+
// no dependency array at all), or how to get the array stabilized (ideal)
42+
const now = dayjs();
43+
useEffect(() => {
44+
if (
45+
workspace.latest_build.status !== "pending" ||
46+
workspace.latest_build.job.queue_size === 0
47+
) {
48+
if (!showAlertPendingInQueue) {
49+
return;
50+
}
51+
52+
const hideTimer = setTimeout(() => {
53+
setShowAlertPendingInQueue(false);
54+
}, 250);
55+
return () => {
56+
clearTimeout(hideTimer);
57+
};
58+
}
59+
60+
const t = Math.max(
61+
0,
62+
5000 - dayjs().diff(dayjs(workspace.latest_build.created_at)),
63+
);
64+
const showTimer = setTimeout(() => {
65+
setShowAlertPendingInQueue(true);
66+
}, t);
67+
68+
return () => {
69+
clearTimeout(showTimer);
70+
};
71+
}, [workspace, now, showAlertPendingInQueue]);
72+
3573
return (
3674
<>
3775
{workspace.outdated &&
@@ -81,6 +119,23 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = (
81119
)}
82120

83121
<DormantWorkspaceBanner workspace={workspace} />
122+
123+
{showAlertPendingInQueue && (
124+
<Alert severity="info">
125+
<AlertTitle>Workspace build is pending</AlertTitle>
126+
<AlertDetail>
127+
<div css={{ marginBottom: 12 }}>
128+
This workspace build job is waiting for a provisioner to become
129+
available. If you have been waiting for an extended period of
130+
time, please contact your administrator for assistance.
131+
</div>
132+
<div>
133+
Position in queue:{" "}
134+
<strong>{workspace.latest_build.job.queue_position}</strong>
135+
</div>
136+
</AlertDetail>
137+
</Alert>
138+
)}
84139
</>
85140
);
86141
};

0 commit comments

Comments
 (0)