[TM-1531] add job connection

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 (
     <Show
       title={<ShowTitle moduleName="Site" getTitle={record => record?.name} />}
@@ -30,13 +26,7 @@ const SiteShow: FC = () => {
           <InformationTab type="sites" />
           <TabbedShowLayout.Tab label="Polygon Review">
             <MapAreaProvider>
-              <PolygonReviewTab
-                label=""
-                type={"sites"}
-                setIsLoadingDelayedJob={setIsLoadingDelayedJob!}
-                isLoadingDelayedJob={isLoadingDelayedJob!}
-                setAlertTitle={setAlertTitle!}
-              />
+              <PolygonReviewTab label="" type={"sites"} />
             </MapAreaProvider>
           </TabbedShowLayout.Tab>
           <GalleryTab label="Site Gallery" entity="sites" />
@@ -46,11 +36,6 @@ const SiteShow: FC = () => {
           <AuditLogTab entity={AuditLogButtonStates.SITE} />
         </TabbedShowLayout>
       </RecordFrameworkProvider>
-      <DelayedJobsProgressAlert
-        show={isLoadingDelayedJob}
-        title={alertTitle}
-        setIsLoadingDelayedJob={setIsLoadingDelayedJob!}
-      />
     </Show>
   );
 };

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 (
     <div className="fixed bottom-10 right-10 z-50">
       <div className="relative">
@@ -78,14 +84,30 @@ const FloatNotification = () => {
                       Site: <b>{item.entityName}</b>
                     </Text>
                     <div className="mt-2 flex items-center gap-2">
-                      <LinearProgressBar
-                        value={((item.processedContent ?? 0) / (item.totalContent ?? 1)) * 100}
-                        className="h-2 bg-success-40"
-                        color="success-600"
-                      />
-                      <Text variant="text-12-semibold" className="text-black">
-                        {(item.processedContent ?? 0) / (item.totalContent ?? 1)}%
-                      </Text>
+                      {item.name === "Polygon Upload" &&
+                      (item.processedContent === null || item.totalContent === null) &&
+                      item.status === "pending" ? (
+                        <div style={{ width: "100%" }}>
+                          <LinearProgress className="h-2 rounded-full" />
+                        </div>
+                      ) : (
+                        <LinearProgressBar
+                          value={
+                            item.status === "succeeded"
+                              ? 100
+                              : ((item.processedContent ?? 0) / (item.totalContent ?? 1)) * 100
+                          }
+                          className="h-2 bg-success-40"
+                          color="success-600"
+                        />
+                      )}
+                      {item.name !== "Polygon Upload" && (
+                        <Text variant="text-12-semibold" className="text-black">
+                          {item.status === "succeeded"
+                            ? "100%"
+                            : `${Math.round(((item.processedContent ?? 0) / (item.totalContent ?? 1)) * 100)}%`}
+                        </Text>
+                      )}
                     </div>
                   </div>
                 ))}
@@ -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
             }
           )}
         >

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<DelayedJobsConnection> = {
   )
 };
 
+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);

src/generated/apiFetcher.ts

@@ -180,32 +180,21 @@ async function loadJob(signal: AbortSignal | undefined, delayedJobId: string, re
     throw error;
   }
 }
-
 async function processDelayedJob<TData>(signal: AbortSignal | undefined, delayedJobId: string): Promise<TData> {
   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;
 }