Improve latency of the job list endpoint

ui/src/app/api/jobs/route.ts

@@ -9,6 +9,7 @@ export async function GET(request: Request) {
   const id = searchParams.get('id');
   const job_ref = searchParams.get('job_ref');
   const job_type = searchParams.get('job_type');
+  const only_active = searchParams.get('only_active');
 
   try {
     if (id) {
@@ -25,8 +26,16 @@ export async function GET(request: Request) {
       return NextResponse.json(job);
     }
 
+    const where: any = {};
+    if (job_type) {
+      where.job_type = job_type;
+    }
+    if (only_active === 'true') {
+      where.status = { in: ['running', 'queued', 'stopping'] };
+    }
+
     const jobs = await prisma.job.findMany({
-      where: job_type ? { job_type } : undefined,
+      where,
       orderBy: { created_at: 'desc' },
     });
     return NextResponse.json({ jobs: jobs });

ui/src/hooks/useJobsList.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Job } from '@prisma/client';
 import { apiClient } from '@/utils/api';
 
@@ -10,14 +10,28 @@ type UseJobsListProps = {
   job_type?: string | null;
 };
 
-export default function useJobsList({ onlyActive = false, reloadInterval = null, job_type=null }: UseJobsListProps = {}) {
+export default function useJobsList({
+  onlyActive = false,
+  reloadInterval = null,
+  job_type = null,
+}: UseJobsListProps = {}) {
   const [jobs, setJobs] = useState<Job[]>([]);
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const isFetchingRef = useRef(false);
 
   const refreshJobs = () => {
+    if (isFetchingRef.current) return;
+    isFetchingRef.current = true;
     setStatus('loading');
+    const params: Record<string, string> = {};
+    if (job_type) {
+      params.job_type = job_type;
+    }
+    if (onlyActive) {
+      params.only_active = 'true';
+    }
     apiClient
-      .get('/api/jobs', { params: job_type ? { job_type } : undefined })
+      .get('/api/jobs', { params })
       .then(res => res.data)
       .then(data => {
         console.log('Jobs:', data);
@@ -25,9 +39,6 @@ export default function useJobsList({ onlyActive = false, reloadInterval = null,
           console.log('Error fetching jobs:', data.error);
           setStatus('error');
         } else {
-          if (onlyActive) {
-            data.jobs = data.jobs.filter((job: Job) => ['running', 'queued', 'stopping'].includes(job.status));
-          }
           setJobs(data.jobs);
           setStatus('success');
         }
@@ -35,6 +46,9 @@ export default function useJobsList({ onlyActive = false, reloadInterval = null,
       .catch(error => {
         console.error('Error fetching jobs:', error);
         setStatus('error');
+      })
+      .finally(() => {
+        isFetchingRef.current = false;
       });
   };
   useEffect(() => {