Added controls to the jobs table

ui/src/components/JobsTable.tsx

@@ -2,6 +2,10 @@ import useJobsList from '@/hooks/useJobsList';
 import Link from 'next/link';
 import UniversalTable, { TableColumn } from '@/components/UniversalTable';
 import { JobConfig } from '@/types';
+import { Eye, Trash2, Pen, Play, Pause } from 'lucide-react';
+import { Button } from '@headlessui/react';
+import { openConfirm } from '@/components/ConfirmModal';
+import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
 
 interface JobsTableProps {}
 
@@ -62,6 +66,78 @@ export default function JobsTable(props: JobsTableProps) {
       key: 'info',
       className: 'truncate max-w-xs',
     },
+    {
+      title: 'Actions',
+      key: 'actions',
+      className: 'text-right',
+      render: row => {
+        const { canDelete, canEdit, canStop, canStart } = getAvaliableJobActions(row);
+        return (
+          <div>
+            {canStart && (
+              <Button
+                onClick={async () => {
+                  if (!canStart) return;
+                  await startJob(row.id);
+                  refreshJobs();
+                }}
+                className={`ml-2 opacity-100`}
+              >
+                <Play />
+              </Button>
+            )}
+            {canStop && (
+              <Button
+                onClick={() => {
+                  if (!canStop) return;
+                  openConfirm({
+                    title: 'Stop Job',
+                    message: `Are you sure you want to stop the job "${row.name}"? You CAN resume later.`,
+                    type: 'info',
+                    confirmText: 'Stop',
+                    onConfirm: async () => {
+                      await stopJob(row.id);
+                      refreshJobs();
+                    },
+                  });
+                }}
+                className={`ml-2 opacity-100`}
+              >
+                <Pause />
+              </Button>
+            )}
+            <Link href={`/jobs/${row.id}`} className="ml-2 text-gray-200 hover:text-gray-100 inline-block">
+              <Eye />
+            </Link>
+            {canEdit && (
+              <Link href={`/jobs/new?id=${row.id}`} className="ml-2 hover:text-gray-100 inline-block">
+                <Pen />
+              </Link>
+            )}
+            {canDelete && (
+              <Button
+                onClick={() => {
+                  if (!canDelete) return;
+                  openConfirm({
+                    title: 'Delete Job',
+                    message: `Are you sure you want to delete the job "${row.name}"? This will also permanently remove it from your disk.`,
+                    type: 'warning',
+                    confirmText: 'Delete',
+                    onConfirm: async () => {
+                      await deleteJob(row.id);
+                      refreshJobs();
+                    },
+                  });
+                }}
+                className={`ml-2 opacity-100`}
+              >
+                <Trash2 />
+              </Button>
+            )}
+          </div>
+        );
+      },
+    },
   ];
 
   return <UniversalTable columns={columns} rows={jobs} isLoading={isLoading} onRefresh={refreshJobs} />;