amiirkhl/tabdeal-job-queue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): streamline job creation actions

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-21 02:19:30 +03:30
parent 55d8ef8290
commit 97eb42f3dc
2 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/pages/JobsPage.tsx
View File

@@ -1,4 +1,4 @@
import { Plus, RotateCcw } from "lucide-react";
import { Eye, Plus, RotateCcw } from "lucide-react";
import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "sonner";
@@ -93,6 +93,7 @@ export function JobsPage() {
max_attempts: nextMaxAttempts
});
await refresh();
setCreateOpen(false);
toast.success("Demo job created.");
} catch (caught) {
toast.error(caught instanceof Error ? caught.message : String(caught));
@@ -115,6 +116,7 @@ export function JobsPage() {
try {
await Promise.all(batch.map(([type, nextPriority]) => api.createJob({ type, payload: demoPayload(type), priority: nextPriority, max_attempts: 3 })));
await refresh();
setCreateOpen(false);
toast.success("Batch created.");
} catch (caught) {
toast.error(caught instanceof Error ? caught.message : String(caught));
@@ -135,29 +137,6 @@ export function JobsPage() {
</button>
</header>
<section className="panel">
<div className="row-actions">
<button type="button" onClick={() => void createDemo("demo.success", 60)}>
Success
</button>
<button type="button" onClick={() => void createDemo("demo.fail", 50, 2)}>
Failing
</button>
<button type="button" onClick={() => void createDemo("demo.slow", 80)}>
Slow
</button>
<button type="button" onClick={() => void createDemo("demo.timeout", 70, 2)}>
Timeout
</button>
<button type="button" onClick={() => void createDemo("demo.flaky", 75, 3)}>
Flaky Retry
</button>
<button type="button" onClick={() => void createBatch()}>
<RotateCcw size={16} /> 10 Mixed
</button>
</div>
</section>
<section className="panel">
<div className="toolbar">
<SelectField value={statusFilter} options={statusOptions} onChange={(value) => setStatusFilter(value as JobStatus | "all")} />
@@ -182,7 +161,9 @@ export function JobsPage() {
<td>
<StatusBadge status={job.status} />
</td>
<td>{job.type}</td>
<td>
<code className="inline-code">{job.type}</code>
</td>
<td>{job.priority}</td>
<td>
{job.attempts}/{job.max_attempts}
@@ -192,8 +173,8 @@ export function JobsPage() {
</td>
<td>{job.locked_by ?? "-"}</td>
<td>
<Link className="secondary-button" to={`/jobs/${job.id}`}>
Detail
<Link className="icon-button" aria-label={`view ${job.type}`} title="View job" to={`/jobs/${job.id}`}>
<Eye size={18} />
</Link>
</td>
</tr>
@@ -207,6 +188,26 @@ export function JobsPage() {
{createOpen && (
<Modal title="Create Job" onClose={() => setCreateOpen(false)}>
<form className="modal-form" onSubmit={createJob}>
<div className="preset-grid">
<button className="secondary-button" type="button" onClick={() => setType("demo.success")}>
Success
</button>
<button className="secondary-button" type="button" onClick={() => setType("demo.fail")}>
Failing
</button>
<button className="secondary-button" type="button" onClick={() => setType("demo.slow")}>
Slow
</button>
<button className="secondary-button" type="button" onClick={() => setType("demo.timeout")}>
Timeout
</button>
<button className="secondary-button" type="button" onClick={() => setType("demo.flaky")}>
Flaky Retry
</button>
<button className="secondary-button" type="button" onClick={() => void createBatch()}>
<RotateCcw size={16} /> 10 Mixed
</button>
</div>
<SelectField label="Job type" value={jobType} options={jobTypeOptions} onChange={setType} />
<JsonField label="Payload JSON" value={payload} onChange={setPayload} />
<label>
@@ -226,6 +227,9 @@ export function JobsPage() {
<input value={idempotencyKey} onChange={(event) => setIdempotencyKey(event.target.value)} />
</label>
<div className="modal-actions">
<button className="secondary-button" type="button" onClick={() => void createDemo(jobType, priority, maxAttempts)}>
Quick Create
</button>
<button className="secondary-button" type="button" onClick={() => setCreateOpen(false)}>
Cancel
</button>