Added ability to clone an existing job in the ui

ui/src/app/jobs/new/page.tsx

@@ -26,6 +26,7 @@ export default function TrainingForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const runId = searchParams.get('id');
+  const cloneId = searchParams.get('cloneId');
   const [gpuIDs, setGpuIDs] = useState<string | null>(null);
   const { settings, isSettingsLoaded } = useSettings();
   const { gpuList, isGPUInfoLoaded } = useGPUInfo();
@@ -54,6 +55,23 @@ export default function TrainingForm() {
     }
   }, [datasets, settings, isSettingsLoaded, datasetFetchStatus]);
 
+  // clone existing job
+  useEffect(() => {
+    if (cloneId) {
+      apiClient
+        .get(`/api/jobs?id=${cloneId}`)
+        .then(res => res.data)
+        .then(data => {
+          console.log('Clone Training:', data);
+          setGpuIDs(data.gpu_ids);
+          const newJobConfig = migrateJobConfig(JSON.parse(data.job_config));
+          newJobConfig.config.name = `${newJobConfig.config.name}_copy`;
+          setJobConfig(newJobConfig);
+        })
+        .catch(error => console.error('Error fetching training:', error));
+    }
+  }, [cloneId]);
+
   useEffect(() => {
     if (runId) {
       apiClient

ui/src/components/JobActionBar.tsx

@@ -6,6 +6,7 @@ import { Job } from '@prisma/client';
 import { startJob, stopJob, deleteJob, getAvaliableJobActions, markJobAsStopped } from '@/utils/jobs';
 import { startQueue } from '@/utils/queue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { redirect } from 'next/navigation';
 
 interface JobActionBarProps {
   job: Job;
@@ -121,10 +122,15 @@ export default function JobActionBar({
         <MenuButton className={'ml-2'}>
           <Cog />
         </MenuButton>
-        <MenuItems anchor="bottom" className="bg-gray-900 border border-gray-700 rounded shadow-lg w-48 px-4 py-2 mt-4">
+        <MenuItems anchor="bottom" className="bg-gray-900 border border-gray-700 rounded shadow-lg w-48 px-2 py-2 mt-4">
+          <MenuItem>
+            <Link href={`/jobs/new?cloneId=${job.id}`} className="cursor-pointer px-4 py-1 hover:bg-gray-800 rounded block">
+              Clone Job
+            </Link>
+          </MenuItem>
           <MenuItem>
             <div
-              className="cursor-pointer"
+              className="cursor-pointer px-4 py-1 hover:bg-gray-800 rounded"
               onClick={() => {
                 let message = `Are you sure you want to mark this job as stopped? This will set the job status to 'stopped' if the status is hung. Only do this if you are 100% sure the job is stopped. This will NOT stop the job.`;
                 openConfirm({