refactor: move notifications to popover and simplify task timeline
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { format } from 'date-fns';
|
||||
import { LoaderCircle, X } from 'lucide-react';
|
||||
import { ChevronDown, LoaderCircle, X } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useTaskTimelineQuery } from '@/hooks/use-api-queries';
|
||||
import { buildStageTimeline, stageLabel, taskTypeLabel } from '@/components/notifications/task-stage-helpers';
|
||||
import { StatusPill } from '@/components/ui/status-pill';
|
||||
@@ -28,15 +29,50 @@ type TaskDetailModalProps = {
|
||||
|
||||
export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProps) {
|
||||
const { data, isLoading, error } = useTaskTimelineQuery(taskId ?? '', isOpen && Boolean(taskId));
|
||||
const task = data?.task ?? null;
|
||||
const events = data?.events ?? [];
|
||||
const timeline = task ? buildStageTimeline(task, events) : [];
|
||||
const [expandedStage, setExpandedStage] = useState<string | null>(null);
|
||||
|
||||
const defaultExpandedStage = useMemo(() => {
|
||||
if (task?.status === 'completed' || task?.status === 'failed') {
|
||||
return null;
|
||||
}
|
||||
|
||||
for (const item of timeline) {
|
||||
if (item.state === 'active') {
|
||||
return item.stage;
|
||||
}
|
||||
}
|
||||
|
||||
for (let index = timeline.length - 1; index >= 0; index -= 1) {
|
||||
if (timeline[index]?.state === 'completed') {
|
||||
return timeline[index].stage;
|
||||
}
|
||||
}
|
||||
|
||||
return timeline[0]?.stage ?? null;
|
||||
}, [timeline]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setExpandedStage(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setExpandedStage((current) => {
|
||||
if (current && timeline.some((item) => item.stage === current)) {
|
||||
return current;
|
||||
}
|
||||
|
||||
return defaultExpandedStage;
|
||||
});
|
||||
}, [defaultExpandedStage, isOpen, timeline]);
|
||||
|
||||
if (!isOpen || !taskId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const task = data?.task ?? null;
|
||||
const events = data?.events ?? [];
|
||||
const timeline = task ? buildStageTimeline(task, events) : [];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60]">
|
||||
<button
|
||||
@@ -46,7 +82,7 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
<div className="absolute left-1/2 top-1/2 w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
|
||||
<div className="absolute left-1/2 top-1/2 flex max-h-[88vh] w-[95vw] max-w-4xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_25px_70px_rgba(0,0,0,0.55)]">
|
||||
<header className="mb-4 flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Job details</p>
|
||||
@@ -67,66 +103,93 @@ export function TaskDetailModal({ isOpen, taskId, onClose }: TaskDetailModalProp
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
|
||||
<LoaderCircle className="size-4 animate-spin" />
|
||||
Loading task timeline...
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<p className="text-sm text-[#ffb5b5]">Unable to load task timeline.</p>
|
||||
) : null}
|
||||
|
||||
{task ? (
|
||||
<>
|
||||
<div className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3 md:grid-cols-2">
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Stage: <span className="text-[color:var(--terminal-bright)]">{stageLabel(task.stage)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Workflow run: <span className="text-[color:var(--terminal-bright)]">{task.workflow_run_id ?? 'n/a'}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Created: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.created_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Finished: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.finished_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Updated: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.updated_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Attempts: <span className="text-[color:var(--terminal-bright)]">{task.attempts}/{task.max_attempts}</span></p>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
|
||||
<p className="mb-2 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Stage timeline</p>
|
||||
<ol className="space-y-2">
|
||||
{timeline.map((item) => (
|
||||
<li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] px-3 py-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
|
||||
<span className={item.state === 'active'
|
||||
? 'text-xs uppercase tracking-[0.12em] text-[#9fffcf]'
|
||||
: item.state === 'completed'
|
||||
? 'text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
|
||||
: 'text-xs uppercase tracking-[0.12em] text-[#6f8791]'}
|
||||
>
|
||||
{item.state}
|
||||
</span>
|
||||
</div>
|
||||
{item.detail ? <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{item.detail}</p> : null}
|
||||
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
|
||||
</li>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto pr-1">
|
||||
{isLoading ? (
|
||||
<div className="mb-4 space-y-2 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
|
||||
<div className="flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
|
||||
<LoaderCircle className="size-4 animate-spin" />
|
||||
Loading task timeline...
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<div key={index} className="animate-pulse rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2">
|
||||
<div className="h-3 w-2/5 rounded bg-[color:var(--panel-bright)]" />
|
||||
<div className="mt-2 h-2 w-3/5 rounded bg-[color:var(--panel-bright)]" />
|
||||
</div>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{task.error ? (
|
||||
<div className="mb-3 rounded-lg border border-[#6f2f2f] bg-[color:rgba(70,20,20,0.45)] p-3">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-[#ffbbbb]">Error</p>
|
||||
<p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
|
||||
</div>
|
||||
) : null}
|
||||
{error ? (
|
||||
<p className="text-sm text-[#ffb5b5]">Unable to load task timeline.</p>
|
||||
) : null}
|
||||
|
||||
{task.result ? (
|
||||
<div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result summary</p>
|
||||
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
|
||||
{task ? (
|
||||
<>
|
||||
<div className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3 md:grid-cols-2">
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Stage: <span className="text-[color:var(--terminal-bright)]">{stageLabel(task.stage)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Workflow run: <span className="text-[color:var(--terminal-bright)]">{task.workflow_run_id ?? 'n/a'}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Created: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.created_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Finished: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.finished_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Updated: <span className="text-[color:var(--terminal-bright)]">{formatTimestamp(task.updated_at)}</span></p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">Attempts: <span className="text-[color:var(--terminal-bright)]">{task.attempts}/{task.max_attempts}</span></p>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<div className="mb-4 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-3">
|
||||
<p className="mb-2 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Stage timeline</p>
|
||||
<ol className="max-h-72 space-y-1.5 overflow-y-auto pr-1">
|
||||
{timeline.map((item) => (
|
||||
<li key={item.stage} className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel)]">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
|
||||
onClick={() => {
|
||||
setExpandedStage((current) => (current === item.stage ? null : item.stage));
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{item.label}</p>
|
||||
<p className="mt-0.5 text-[11px] text-[color:var(--terminal-muted)]">{formatTimestamp(item.timestamp)}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={item.state === 'active'
|
||||
? 'text-[11px] uppercase tracking-[0.12em] text-[#9fffcf]'
|
||||
: item.state === 'completed'
|
||||
? 'text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]'
|
||||
: 'text-[11px] uppercase tracking-[0.12em] text-[#6f8791]'}
|
||||
>
|
||||
{item.state}
|
||||
</span>
|
||||
<ChevronDown className={expandedStage === item.stage ? 'size-3.5 rotate-180 text-[color:var(--terminal-muted)] transition' : 'size-3.5 text-[color:var(--terminal-muted)] transition'} />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{expandedStage === item.stage ? (
|
||||
<div className="border-t border-[color:var(--line-weak)] px-3 py-2">
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">{item.detail ?? 'No additional detail for this step.'}</p>
|
||||
{item.stage === 'completed' && task.result ? (
|
||||
<div className="mt-2 rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-2">
|
||||
<p className="text-[11px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Result detail</p>
|
||||
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs text-[color:var(--terminal-bright)]">{JSON.stringify(task.result, null, 2)}</pre>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{task.error ? (
|
||||
<div className="mb-3 rounded-lg border border-[#6f2f2f] bg-[color:rgba(70,20,20,0.45)] p-3">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-[#ffbbbb]">Error</p>
|
||||
<p className="mt-1 text-sm text-[#ffd6d6]">{task.error}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<Button variant="ghost" onClick={onClose}>Close</Button>
|
||||
|
||||
Reference in New Issue
Block a user