From 07e2d56efbc0576d969b11986d46612a803cf087 Mon Sep 17 00:00:00 2001 From: JORGE Date: Wed, 18 Dec 2024 12:57:21 -0400 Subject: [PATCH] [TM-1531] remove from apifetcher call and add continous call for delayed jobs --- .../modules/sites/components/SiteShow.tsx | 19 +-------- .../Notification/FloatNotification.tsx | 42 ++++++++++++++----- src/connections/DelayedJob.ts | 18 +++++++- src/generated/apiFetcher.ts | 25 ++++------- 4 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/admin/modules/sites/components/SiteShow.tsx b/src/admin/modules/sites/components/SiteShow.tsx index fb0bef090..7662bf547 100644 --- a/src/admin/modules/sites/components/SiteShow.tsx +++ b/src/admin/modules/sites/components/SiteShow.tsx @@ -1,8 +1,7 @@ -import { FC, useState } from "react"; +import { FC } from "react"; import { Show, TabbedShowLayout } from "react-admin"; import ShowActions from "@/admin/components/Actions/ShowActions"; -import DelayedJobsProgressAlert from "@/admin/components/Alerts/DelayedJobsProgressAlert"; import AuditLogTab from "@/admin/components/ResourceTabs/AuditLogTab/AuditLogTab"; import { AuditLogButtonStates } from "@/admin/components/ResourceTabs/AuditLogTab/constants/enum"; import ChangeRequestsTab from "@/admin/components/ResourceTabs/ChangeRequestsTab/ChangeRequestsTab"; @@ -16,9 +15,6 @@ import { RecordFrameworkProvider } from "@/context/framework.provider"; import { MapAreaProvider } from "@/context/mapArea.provider"; const SiteShow: FC = () => { - const [isLoadingDelayedJob, setIsLoadingDelayedJob] = useState(false); - const [alertTitle, setAlertTitle] = useState(""); - return ( record?.name} />} @@ -30,13 +26,7 @@ const SiteShow: FC = () => { - + @@ -46,11 +36,6 @@ const SiteShow: FC = () => { - ); }; diff --git a/src/components/elements/Notification/FloatNotification.tsx b/src/components/elements/Notification/FloatNotification.tsx index 2f0480bfa..63c6be0a8 100644 --- a/src/components/elements/Notification/FloatNotification.tsx +++ b/src/components/elements/Notification/FloatNotification.tsx @@ -1,3 +1,4 @@ +import { LinearProgress } from "@mui/material"; import classNames from "classnames"; import { useEffect, useState } from "react"; import { When } from "react-if"; @@ -41,6 +42,11 @@ const FloatNotification = () => { const notAcknowledgedJobs = delayedJobs.filter((job: DelayedJobDto) => !job.isAcknowledged); setNotAcknowledgedJobs(notAcknowledgedJobs); }, [delayedJobs]); + useEffect(() => { + if (!notAcknowledgedJobs.length) { + setOpenModalNotification(false); + } + }, [notAcknowledgedJobs]); return (
@@ -78,14 +84,30 @@ const FloatNotification = () => { Site: {item.entityName}
- - - {(item.processedContent ?? 0) / (item.totalContent ?? 1)}% - + {item.name === "Polygon Upload" && + (item.processedContent === null || item.totalContent === null) && + item.status === "pending" ? ( +
+ +
+ ) : ( + + )} + {item.name !== "Polygon Upload" && ( + + {item.status === "succeeded" + ? "100%" + : `${Math.round(((item.processedContent ?? 0) / (item.totalContent ?? 1)) * 100)}%`} + + )}
))} @@ -104,8 +126,8 @@ const FloatNotification = () => { className={classNames( "z-10 flex h-15 w-15 items-center justify-center rounded-full border border-grey-950 bg-primary duration-300 hover:scale-105", { - hidden: (notAcknowledgedJobs?.length ?? 0) < 1 && isLoaded, - visible: (notAcknowledgedJobs?.length ?? 0) > 0 && isLoaded + hidden: (notAcknowledgedJobs?.length ?? 0) === 0, + visible: (notAcknowledgedJobs?.length ?? 0) > 0 } )} > diff --git a/src/connections/DelayedJob.ts b/src/connections/DelayedJob.ts index c06084233..198456782 100644 --- a/src/connections/DelayedJob.ts +++ b/src/connections/DelayedJob.ts @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import { createSelector } from "reselect"; import { bulkUpdateJobs, listDelayedJobs } from "@/generated/v3/jobService/jobServiceComponents"; @@ -49,6 +50,22 @@ const delayedJobsConnection: Connection = { ) }; +export const useDelayedJobs = () => { + const connection = connectionHook(delayedJobsConnection)(); + + useEffect(() => { + const intervalId = setInterval(() => { + listDelayedJobs(); + }, 1500); + + return () => { + clearInterval(intervalId); + }; + }, []); + + return connection; +}; + export const triggerBulkUpdate = (jobs: DelayedJobData[]) => { return bulkUpdateJobs({ body: { data: jobs } }); }; @@ -83,5 +100,4 @@ const connectionBulkUpdateIsLoaded = ({ isLoading, hasLoadFailed }: { isLoading: return !isLoading && !hasLoadFailed; }; -export const useDelayedJobs = connectionHook(delayedJobsConnection); export const useBulkUpdateJobs = connectionLoader(bulkUpdateJobsConnection); diff --git a/src/generated/apiFetcher.ts b/src/generated/apiFetcher.ts index 9c489d679..72e332396 100644 --- a/src/generated/apiFetcher.ts +++ b/src/generated/apiFetcher.ts @@ -180,32 +180,21 @@ async function loadJob(signal: AbortSignal | undefined, delayedJobId: string, re throw error; } } - async function processDelayedJob(signal: AbortSignal | undefined, delayedJobId: string): Promise { const headers: HeadersInit = { "Content-Type": "application/json" }; const accessToken = typeof window !== "undefined" && getAccessToken(); if (accessToken != null) headers.Authorization = `Bearer ${accessToken}`; + const jobResult = await loadJob(signal, delayedJobId); - let jobResult; - for ( - jobResult = await loadJob(signal, delayedJobId); - jobResult.data?.attributes?.status === "pending"; - jobResult = await loadJob(signal, delayedJobId) - ) { - //@ts-ignore - const { total_content, processed_content, progress_message } = jobResult.data?.attributes; - if (total_content != null) { - ApiSlice.addTotalContent(total_content); - ApiSlice.addProgressContent(processed_content); - ApiSlice.addProgressMessage(progress_message); - } + const { status, statusCode, payload } = jobResult.data!.attributes; - if (signal?.aborted || ApiSlice.apiDataStore.abort_delayed_job) throw new Error("Aborted"); - await new Promise(resolve => setTimeout(resolve, JOB_POLL_TIMEOUT)); + if (status === "failed") { + throw { statusCode, ...payload }; } - const { status, statusCode, payload } = jobResult.data!.attributes; - if (status === "failed") throw { statusCode, ...payload }; + if (status === "pending") { + throw new Error("Job is still pending. Handle pending jobs appropriately."); + } return payload as TData; }