refactor: change default to 10sec. show when last time state was checked

app/components/JobStatus.tsx

@@ -7,9 +7,10 @@ import { prefix } from "~/prefix";
 
 interface Props {
   job: SerializeFrom<JobModelDTO>;
+  lastStateCheckOn?: string;
 }
 
-export function JobStatus({ job }: Props) {
+export function JobStatus({ job, lastStateCheckOn }: Props) {
   return (
     <>
       <p>ID: {job.id}</p>
@@ -21,6 +22,9 @@ export function JobStatus({ job }: Props) {
       </p>
       <p>Created on: {new Date(job.created_on).toUTCString()}</p>
       <p>Updated on: {new Date(job.updated_on).toUTCString()}</p>
+      {lastStateCheckOn ? (
+        <p>Last checked on: {new Date(lastStateCheckOn).toUTCString()}</p>
+      ) : null}
       {CompletedJobs.has(job.state) && (
         <>
           <details>

app/models/job.server.ts

@@ -21,7 +21,7 @@ const BOOK_KEEPING_FILES = [
 export const HADDOCK3WEBAPP_REFRESH_RATE_MS = process.env
   .HADDOCK3WEBAPP_REFRESH_RATE_MS
   ? parseInt(process.env.HADDOCK3WEBAPP_REFRESH_RATE_MS)
-  : 5000;
+  : 10000;
 
 export function jobIdFromParams(params: Params) {
   const jobId = params.id;

app/routes/jobs.$id._index.tsx

@@ -35,6 +35,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
     job,
     // provide refresh rate from env or default of 5 sec.
     HADDOCK3WEBAPP_REFRESH_RATE_MS,
+    lastCheckedOn: new Date().toISOString(),
   });
 };
 
@@ -50,13 +51,10 @@ export const action = async ({ params, request }: ActionFunctionArgs) => {
 };
 
 export default function JobPage() {
-  const { job, HADDOCK3WEBAPP_REFRESH_RATE_MS } =
+  const { job, HADDOCK3WEBAPP_REFRESH_RATE_MS, lastCheckedOn } =
     useLoaderData<typeof loader>();
   const { revalidate } = useRevalidator();
 
-  // update value of updated_on
-  job.updated_on = new Date().toISOString();
-
   useEffect(() => {
     // set interval to refresh job status
     let id: NodeJS.Timeout;
@@ -85,7 +83,7 @@ export default function JobPage() {
   return (
     <main className="flex gap-16">
       <div>
-        <JobStatus job={job} />
+        <JobStatus job={job} lastStateCheckOn={lastCheckedOn} />
         {/* show dots loader indicating we monitor state change */}
         {job.state !== "error" && job.state !== "ok" ? (
           <DotsLoader

deploy/arq/.env

@@ -4,4 +4,4 @@
 # and https://github.com/i-VRESSE/haddock3-webapp/blob/main/docs/auth.md#social-logins
 # respectively for more information.
 
-HADDOCK3WEBAPP_REFRESH_RATE_MS=10000
+HADDOCK3WEBAPP_REFRESH_RATE_MS=30000