From 036301dca98a2d972272bfbcddb8d93d85db74ee Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Mon, 3 Jul 2023 17:52:00 +0200 Subject: [PATCH 1/5] feat: delay build in queue banner --- site/src/components/Workspace/Workspace.tsx | 35 ++++++++++++++++----- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 4043ffa37039c..b01ff4209e0b2 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -7,7 +7,7 @@ import { ActiveTransition, WorkspaceBuildProgress, } from "components/WorkspaceBuildProgress/WorkspaceBuildProgress" -import { FC } from "react" +import { FC, useEffect, useState } from "react" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" @@ -32,6 +32,7 @@ import { useLocalStorage } from "hooks" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import AlertTitle from "@mui/material/AlertTitle" import { Maybe } from "components/Conditionals/Maybe" +import dayjs from "dayjs" export enum WorkspaceErrors { GET_BUILDS_ERROR = "getBuildsError", @@ -131,6 +132,31 @@ export const Workspace: FC> = ({ if (template !== undefined) { transitionStats = ActiveTransition(template, workspace) } + + const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false); + const now = dayjs() + useEffect(() => { + if (workspace.latest_build.status === "pending" && + workspace.latest_build.job.queue_size > 0 && + dayjs(workspace.latest_build.created_at).isBefore(now.subtract(5, 'seconds'))) { + setShowAlertPendingInQueue(true); + return + } + + if (workspace.latest_build.status === "pending" && + workspace.latest_build.job.queue_size > 0) { + const timer = setTimeout(() => { + if (workspace.latest_build.status !== "pending" || workspace.latest_build.job.queue_size === 0) { + return + } + setShowAlertPendingInQueue(true); + }, 5000) + + return () => { + clearTimeout(timer); + } + } + }, [workspace, now]) return ( <> @@ -208,12 +234,7 @@ export const Workspace: FC> = ({ - 0 - } - > + Workspace build is pending From 51734f68ffa4c27d6542ff53d01dd80716ace7bd Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Mon, 3 Jul 2023 18:17:35 +0200 Subject: [PATCH 2/5] fmt --- site/src/components/Workspace/Workspace.tsx | 39 +++++++++++++-------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index b01ff4209e0b2..9547f60d7100b 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -133,28 +133,37 @@ export const Workspace: FC> = ({ transitionStats = ActiveTransition(template, workspace) } - const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false); + const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false) const now = dayjs() useEffect(() => { - if (workspace.latest_build.status === "pending" && + if ( + workspace.latest_build.status === "pending" && workspace.latest_build.job.queue_size > 0 && - dayjs(workspace.latest_build.created_at).isBefore(now.subtract(5, 'seconds'))) { - setShowAlertPendingInQueue(true); + dayjs(workspace.latest_build.created_at).isBefore( + now.subtract(5, "seconds"), + ) + ) { + setShowAlertPendingInQueue(true) return } - if (workspace.latest_build.status === "pending" && - workspace.latest_build.job.queue_size > 0) { - const timer = setTimeout(() => { - if (workspace.latest_build.status !== "pending" || workspace.latest_build.job.queue_size === 0) { - return - } - setShowAlertPendingInQueue(true); - }, 5000) - - return () => { - clearTimeout(timer); + if ( + workspace.latest_build.status === "pending" && + workspace.latest_build.job.queue_size > 0 + ) { + const timer = setTimeout(() => { + if ( + workspace.latest_build.status !== "pending" || + workspace.latest_build.job.queue_size === 0 + ) { + return } + setShowAlertPendingInQueue(true) + }, 5000) + + return () => { + clearTimeout(timer) + } } }, [workspace, now]) return ( From 962453d4fe86db5ff6360e874790c749643e4c54 Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Tue, 4 Jul 2023 12:39:24 +0200 Subject: [PATCH 3/5] Early return --- site/src/components/Workspace/Workspace.tsx | 31 +++++++++------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 9547f60d7100b..53860e2c64811 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -137,8 +137,14 @@ export const Workspace: FC> = ({ const now = dayjs() useEffect(() => { if ( - workspace.latest_build.status === "pending" && - workspace.latest_build.job.queue_size > 0 && + workspace.latest_build.status !== "pending" || + workspace.latest_build.job.queue_size === 0 + ) { + setShowAlertPendingInQueue(false) + return + } + + if ( dayjs(workspace.latest_build.created_at).isBefore( now.subtract(5, "seconds"), ) @@ -147,23 +153,12 @@ export const Workspace: FC> = ({ return } - if ( - workspace.latest_build.status === "pending" && - workspace.latest_build.job.queue_size > 0 - ) { - const timer = setTimeout(() => { - if ( - workspace.latest_build.status !== "pending" || - workspace.latest_build.job.queue_size === 0 - ) { - return - } - setShowAlertPendingInQueue(true) - }, 5000) + const timer = setTimeout(() => { + setShowAlertPendingInQueue(true) + }, 5000) - return () => { - clearTimeout(timer) - } + return () => { + clearTimeout(timer) } }, [workspace, now]) return ( From 64244484fa6312fbe7cd88017e6fc019c5337c1f Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Tue, 4 Jul 2023 17:26:01 +0200 Subject: [PATCH 4/5] Consider 250ms to leave the banner --- site/src/components/Workspace/Workspace.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 53860e2c64811..78f30c995e31a 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -140,7 +140,14 @@ export const Workspace: FC> = ({ workspace.latest_build.status !== "pending" || workspace.latest_build.job.queue_size === 0 ) { - setShowAlertPendingInQueue(false) + if (!showAlertPendingInQueue) { + return + } + + // hideTimer + setTimeout(() => { + setShowAlertPendingInQueue(false) + }, 250) return } @@ -153,14 +160,15 @@ export const Workspace: FC> = ({ return } - const timer = setTimeout(() => { + const showTimer = setTimeout(() => { setShowAlertPendingInQueue(true) }, 5000) return () => { - clearTimeout(timer) + clearTimeout(showTimer) + // hideTimer must time out naturally, otherwise the banner will be hidden immediately } - }, [workspace, now]) + }, [workspace, now, showAlertPendingInQueue]) return ( <> From 6b8627d8c5243fdd037acf363bbf5c29ccc6011d Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Tue, 4 Jul 2023 18:47:04 +0200 Subject: [PATCH 5/5] More improvements --- site/src/components/Workspace/Workspace.tsx | 23 ++++++++------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 78f30c995e31a..2178ca34f2ca3 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -144,29 +144,24 @@ export const Workspace: FC> = ({ return } - // hideTimer - setTimeout(() => { + const hideTimer = setTimeout(() => { setShowAlertPendingInQueue(false) }, 250) - return - } - - if ( - dayjs(workspace.latest_build.created_at).isBefore( - now.subtract(5, "seconds"), - ) - ) { - setShowAlertPendingInQueue(true) - return + return () => { + clearTimeout(hideTimer) + } } + const t = Math.max( + 0, + 5000 - dayjs().diff(dayjs(workspace.latest_build.created_at)), + ) const showTimer = setTimeout(() => { setShowAlertPendingInQueue(true) - }, 5000) + }, t) return () => { clearTimeout(showTimer) - // hideTimer must time out naturally, otherwise the banner will be hidden immediately } }, [workspace, now, showAlertPendingInQueue]) return (