Add advanced menu on job to allow user to do things like make a job as stopped if the status ever gets hung

ui/src/components/JobActionBar.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
-import { Eye, Trash2, Pen, Play, Pause } from 'lucide-react';
+import { Eye, Trash2, Pen, Play, Pause, Cog, NotebookPen } from 'lucide-react';
 import { Button } from '@headlessui/react';
 import { openConfirm } from '@/components/ConfirmModal';
 import { Job } from '@prisma/client';
-import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
+import { startJob, stopJob, deleteJob, getAvaliableJobActions, markJobAsStopped } from '@/utils/jobs';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 
 interface JobActionBarProps {
   job: Job;
@@ -90,6 +91,34 @@ export default function JobActionBar({ job, onRefresh, afterDelete, className, h
       >
         <Trash2 />
       </Button>
+      <div className="border-r border-1 border-gray-700 ml-2 inline"></div>
+      <Menu>
+        <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">
+          <MenuItem>
+            <div
+              className="cursor-pointer"
+              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({
+                  title: 'Mark Job as Stopped',
+                  message: message,
+                  type: 'warning',
+                  confirmText: 'Mark as Stopped',
+                  onConfirm: async () => {
+                    await markJobAsStopped(job.id);
+                    onRefresh && onRefresh();
+                  },
+                });
+              }}
+            >
+              Mark as Stopped
+            </div>
+          </MenuItem>
+        </MenuItems>
+      </Menu>
     </div>
   );
 }