feat(frontend): polish job detail timeline
This commit is contained in:
@@ -10,6 +10,40 @@ import { EmptyState } from "../components/EmptyState";
|
||||
import { StatusBadge } from "../components/StatusBadge";
|
||||
import type { Job, JobEvent } from "../types";
|
||||
|
||||
type TimelineEvent = JobEvent & {
|
||||
firstId: number;
|
||||
lastId: number;
|
||||
repeatCount: number;
|
||||
};
|
||||
|
||||
function buildTimeline(events: JobEvent[]) {
|
||||
const grouped: TimelineEvent[] = [];
|
||||
|
||||
[...events]
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.forEach((event) => {
|
||||
const previous = grouped.at(-1);
|
||||
const isSameRun =
|
||||
previous &&
|
||||
previous.type === event.type &&
|
||||
previous.attempt === event.attempt &&
|
||||
previous.worker_id === event.worker_id;
|
||||
|
||||
if (isSameRun) {
|
||||
previous.lastId = event.id;
|
||||
previous.repeatCount += 1;
|
||||
previous.created_at = event.created_at;
|
||||
previous.message = event.message;
|
||||
previous.data = event.data;
|
||||
return;
|
||||
}
|
||||
|
||||
grouped.push({ ...event, firstId: event.id, lastId: event.id, repeatCount: 1 });
|
||||
});
|
||||
|
||||
return grouped.reverse();
|
||||
}
|
||||
|
||||
export function JobDetailPage() {
|
||||
const { jobId } = useParams();
|
||||
const [job, setJob] = useState<Job | null>(null);
|
||||
@@ -28,7 +62,7 @@ export function JobDetailPage() {
|
||||
return () => window.clearInterval(id);
|
||||
}, [refresh]);
|
||||
|
||||
const sortedEvents = useMemo(() => [...events].sort((a, b) => b.id - a.id), [events]);
|
||||
const timelineEvents = useMemo(() => buildTimeline(events), [events]);
|
||||
|
||||
async function retry() {
|
||||
if (!job) return;
|
||||
@@ -54,7 +88,9 @@ export function JobDetailPage() {
|
||||
<header className="page-header">
|
||||
<div>
|
||||
<span className="eyebrow">Job detail</span>
|
||||
<h2>{job.type}</h2>
|
||||
<h2>
|
||||
<code className="inline-code">{job.type}</code>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row-actions">
|
||||
<Link className="secondary-button" to="/jobs">
|
||||
@@ -83,69 +119,79 @@ export function JobDetailPage() {
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span>Locked by</span>
|
||||
<code>{job.locked_by ?? "-"}</code>
|
||||
<code className="code-token wrap">{job.locked_by ?? "-"}</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="dashboard-grid">
|
||||
<section className="detail-grid">
|
||||
<section className="panel">
|
||||
<div className="section-title">
|
||||
<h3>Metadata</h3>
|
||||
</div>
|
||||
<div className="compact-list">
|
||||
<div className="compact-row">
|
||||
<strong>ID</strong>
|
||||
<code>{job.id}</code>
|
||||
<span />
|
||||
<div className="detail-fields">
|
||||
<div className="detail-field">
|
||||
<span>ID</span>
|
||||
<code className="code-token wrap">{job.id}</code>
|
||||
</div>
|
||||
<div className="compact-row">
|
||||
<strong>Available</strong>
|
||||
<span />
|
||||
<div className="detail-field">
|
||||
<span>Available</span>
|
||||
<DateTime value={job.available_at} />
|
||||
</div>
|
||||
<div className="compact-row">
|
||||
<strong>Locked until</strong>
|
||||
<span />
|
||||
<div className="detail-field">
|
||||
<span>Locked until</span>
|
||||
<DateTime value={job.locked_until} />
|
||||
</div>
|
||||
<div className="compact-row">
|
||||
<strong>Finished</strong>
|
||||
<span />
|
||||
<div className="detail-field">
|
||||
<span>Finished</span>
|
||||
<DateTime value={job.finished_at} />
|
||||
</div>
|
||||
<div className="compact-row">
|
||||
<strong>Idempotency</strong>
|
||||
<code>{job.idempotency_key ?? "-"}</code>
|
||||
<span />
|
||||
<div className="detail-field">
|
||||
<span>Idempotency</span>
|
||||
<code className="code-token wrap">{job.idempotency_key ?? "-"}</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="panel">
|
||||
<div className="json-stack">
|
||||
<div>
|
||||
<div className="section-title">
|
||||
<h3>Payload</h3>
|
||||
</div>
|
||||
<pre>{JSON.stringify(job.payload, null, 2)}</pre>
|
||||
<div className="section-title result-title">
|
||||
<pre className="json-block">{JSON.stringify(job.payload, null, 2)}</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="section-title">
|
||||
<h3>Result</h3>
|
||||
</div>
|
||||
<pre>{JSON.stringify(job.result ?? null, null, 2)}</pre>
|
||||
{job.last_error && <p className="error">{job.last_error}</p>}
|
||||
<pre className="json-block">{JSON.stringify(job.result ?? null, null, 2)}</pre>
|
||||
</div>
|
||||
{job.last_error && <p className="error error-block">{job.last_error}</p>}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="panel">
|
||||
<section className="panel detail-wide">
|
||||
<div className="section-title">
|
||||
<h3>Event Timeline</h3>
|
||||
</div>
|
||||
<div className="compact-list">
|
||||
{sortedEvents.map((event) => (
|
||||
<div className="compact-row" key={event.id}>
|
||||
<div className="timeline-list">
|
||||
{timelineEvents.map((event) => (
|
||||
<article className="timeline-item" key={`${event.firstId}-${event.lastId}`}>
|
||||
<span className="timeline-dot" aria-hidden="true" />
|
||||
<div className="timeline-card">
|
||||
<div className="timeline-heading">
|
||||
<strong>{eventTitle(event.type)}</strong>
|
||||
{event.repeatCount > 1 && <span className="timeline-count">{event.repeatCount} events</span>}
|
||||
</div>
|
||||
<div className="timeline-meta">
|
||||
<span>{event.worker_id ?? `attempt ${event.attempt}`}</span>
|
||||
<DateTime value={event.created_at} />
|
||||
</div>
|
||||
{event.message && <p>{event.message}</p>}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
{!sortedEvents.length && <EmptyState title="No events for this job" />}
|
||||
{!timelineEvents.length && <EmptyState title="No events for this job" />}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -357,7 +357,7 @@ label {
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
@@ -442,6 +442,16 @@ label {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
|
||||
}
|
||||
|
||||
.detail-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.circle-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -807,6 +817,141 @@ label {
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.detail-fields,
|
||||
.json-stack,
|
||||
.timeline-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-field {
|
||||
background: var(--panel-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.detail-field > span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.code-token {
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.code-token.wrap {
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.json-block {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.error-block {
|
||||
background: color-mix(in srgb, var(--red) 10%, var(--panel-raised));
|
||||
border: 1px solid color-mix(in srgb, var(--red) 34%, var(--border));
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 18px minmax(0, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
background: var(--border);
|
||||
bottom: -10px;
|
||||
content: "";
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
background: var(--cyan);
|
||||
border: 3px solid var(--panel);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
display: block;
|
||||
height: 16px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-card {
|
||||
background: var(--panel-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.timeline-heading,
|
||||
.timeline-meta {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.timeline-meta,
|
||||
.timeline-card p {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.timeline-meta > span,
|
||||
.timeline-card p {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.timeline-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline-count {
|
||||
background: var(--subtle);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
color: var(--ink);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.toolbar,
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
@@ -1223,6 +1368,7 @@ code {
|
||||
}
|
||||
|
||||
.dashboard-grid,
|
||||
.detail-grid,
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@@ -1321,9 +1467,11 @@ code {
|
||||
}
|
||||
|
||||
.dashboard-grid,
|
||||
.detail-grid,
|
||||
.stats-grid,
|
||||
.circle-grid,
|
||||
.filter-grid,
|
||||
.preset-grid,
|
||||
.toolbar,
|
||||
.compact-row,
|
||||
.dot-chart-row {
|
||||
|
||||
Reference in New Issue
Block a user