UI: job badges, skeletons, cancel support + API route to cancel jobs\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

2026-05-16 14:56:22 +02:00
parent 424a2fc6d5
commit 1ae60635d3
4 changed files with 105 additions and 4 deletions
@@ -58,11 +58,37 @@ export default function JobDetail() {
          {job?.failedReason && (
            <div className="mb-3 text-red-600">Failed: {job.failedReason}</div>
          )}
+
+          <div className="flex items-center gap-3 mb-3">
+            {job?.state === 'waiting' || job?.state === 'queued' ? (
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await fetch(`/api/jobs/${job?.id}/cancel`, { method: 'POST' });
+                    if (res.ok) {
+                      const d = await res.json();
+                      if (d.cancelled) {
+                        setJob((prev: any) => ({ ...(prev || {}), state: 'failed', failedReason: 'cancelled' }));
+                      }
+                    }
+                  } catch (e) {
+                    // ignore
+                  }
+                }}
+                className="text-sm text-red-600 hover:underline"
+              >
+                Cancel Job
+              </button>
+            ) : null}
+
+            <a href={`/api/jobs/${job?.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">Open API</a>
+          </div>
+
          <div className="text-sm text-gray-700 mb-3">Data:</div>
          <pre className="bg-gray-50 p-3 rounded text-xs overflow-x-auto">{JSON.stringify(job?.data || job?.returnValue || job, null, 2)}</pre>

          <div className="mt-4">
-            <a href={`/api/jobs/${job?.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">Open API</a>
+            
          </div>
        </div>
      </div>