ability to start jobs individually

ui/src/views/jobs/Jobs.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import JobTable from '../../components/table/JobTable';
 import { useSelector, useActions } from '../../services/state/store';
-import { xhrDelete, xhrPut } from '../../services/xhr';
+import { xhrDelete, xhrPut, xhrPost } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
 import { Button, Toast } from '@douyinfe/semi-ui';
 import { IconPlusCircle } from '@douyinfe/semi-icons';
@@ -17,6 +17,47 @@ export default function Jobs() {
   const jobs = useSelector((state) => state.jobs.jobs);
   const navigate = useNavigate();
   const actions = useActions();
+  const pendingJobIdRef = React.useRef(null);
+  const evtSourceRef = React.useRef(null);
+
+  // SSE connection for live job status updates
+  React.useEffect(() => {
+    // establish SSE connection
+    const src = new EventSource('/api/jobs/events');
+    evtSourceRef.current = src;
+
+    const onJobStatus = (e) => {
+      try {
+        const data = JSON.parse(e.data || '{}');
+        if (data && data.jobId) {
+          actions.jobs.setJobRunning(data.jobId, !!data.running);
+          // notify finish if it was triggered by this view
+          if (pendingJobIdRef.current === data.jobId && data.running === false) {
+            Toast.success('Job finished');
+            pendingJobIdRef.current = null;
+          }
+        }
+      } catch {
+        // ignore malformed events
+      }
+    };
+
+    src.addEventListener('jobStatus', onJobStatus);
+    src.onerror = () => {
+      // Let browser auto-reconnect; optionally log
+    };
+
+    return () => {
+      try {
+        src.removeEventListener('jobStatus', onJobStatus);
+        src.close();
+      } catch {
+        //noop
+      }
+      evtSourceRef.current = null;
+      pendingJobIdRef.current = null;
+    };
+  }, [actions.jobs]);
 
   const onJobRemoval = async (jobId) => {
     try {
@@ -48,6 +89,31 @@ export default function Jobs() {
     }
   };
 
+  const onJobRun = async (jobId) => {
+    try {
+      const response = await xhrPost(`/api/jobs/${jobId}/run`);
+      if (response.status === 202) {
+        Toast.success('Job run started');
+      } else {
+        Toast.info('Job run requested');
+      }
+      // remember so we can show a finish toast when SSE says it's done
+      pendingJobIdRef.current = jobId;
+      // optional: one initial refresh in case SSE arrives late
+      await actions.jobs.getJobs();
+    } catch (error) {
+      if (error?.status === 409) {
+        Toast.warning(error?.json?.message || 'Job is already running');
+      } else if (error?.status === 403) {
+        Toast.error('You are not allowed to run this job');
+      } else if (error?.status === 404) {
+        Toast.error('Job not found');
+      } else {
+        Toast.error('Failed to trigger job');
+      }
+    }
+  };
+
   return (
     <div>
       <div>
@@ -66,6 +132,7 @@ export default function Jobs() {
         onJobRemoval={onJobRemoval}
         onListingRemoval={onListingRemoval}
         onJobStatusChanged={onJobStatusChanged}
+        onJobRun={onJobRun}
         onJobEdit={(jobId) => navigate(`/jobs/edit/${jobId}`)}
       />
     </div>