Added queing system to the UI

ui/src/hooks/useJobsList.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { Job } from '@prisma/client';
 import { apiClient } from '@/utils/api';
 
-export default function useJobsList(onlyActive = false) {
+export default function useJobsList(onlyActive = false, reloadInterval: null | number = null) {
   const [jobs, setJobs] = useState<Job[]>([]);
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
 
@@ -20,19 +20,26 @@ export default function useJobsList(onlyActive = false) {
           setStatus('error');
         } else {
           if (onlyActive) {
-            data.jobs = data.jobs.filter((job: Job) => job.status === 'running');
+            data.jobs = data.jobs.filter((job: Job) => ['running', 'queued', 'stopping'].includes(job.status));
           }
           setJobs(data.jobs);
           setStatus('success');
         }
       })
       .catch(error => {
-        console.error('Error fetching datasets:', error);
+        console.error('Error fetching jobs:', error);
         setStatus('error');
       });
   };
   useEffect(() => {
     refreshJobs();
+
+    if (reloadInterval) {
+      const interval = setInterval(() => {
+        refreshJobs();
+      }, reloadInterval);
+      return () => clearInterval(interval);
+    }
   }, []);
 
   return { jobs, setJobs, status, refreshJobs };

ui/src/hooks/useQueueList.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Queue } from '@prisma/client';
+import { apiClient } from '@/utils/api';
+
+export default function useQueueList() {
+  const [queues, setQueues] = useState<Queue[]>([]);
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const refreshQueues = () => {
+    setStatus('loading');
+    apiClient
+      .get('/api/queue')
+      .then(res => res.data)
+      .then(data => {
+        console.log('Queues:', data);
+        if (data.error) {
+          console.log('Error fetching queues:', data.error);
+          setStatus('error');
+        } else {
+          setQueues(data.queues);
+          setStatus('success');
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching queues:', error);
+        setStatus('error');
+      });
+  };
+  useEffect(() => {
+    refreshQueues();
+  }, []);
+
+  return { queues, setQueues, status, refreshQueues };
+}