initial state: muzick music player + recommendation engine
This commit is contained in:
kami
@@ -0,0 +1,478 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Play,
|
||||
Pause,
|
||||
RotateCcw,
|
||||
Terminal,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Clock,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Copy,
|
||||
Filter,
|
||||
X,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
jobsService,
|
||||
JobHistoryEntry,
|
||||
JobStatus,
|
||||
JOB_LABELS,
|
||||
getJobDataSummary,
|
||||
getJobDataDetails,
|
||||
getJobStatus,
|
||||
} from '../services/jobsService';
|
||||
import { formatDistanceToNow, format } from 'date-fns';
|
||||
|
||||
/* ─────────────────────────────────────────── Filter state ─────────────────────────────────────────── */
|
||||
|
||||
interface Filters {
|
||||
status: JobStatus | 'all';
|
||||
type: string;
|
||||
}
|
||||
|
||||
const INITIAL_FILTERS: Filters = { status: 'all', type: 'all' };
|
||||
|
||||
/* ─────────────────────────────────────────── Helpers ─────────────────────────────────────────────── */
|
||||
|
||||
const JOB_TYPES = Object.keys(JOB_LABELS);
|
||||
|
||||
function statusBgColor(status: JobStatus): string {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return 'bg-accent/10 border-accent/25';
|
||||
case 'failed':
|
||||
return 'bg-red-400/10 border-red-400/25';
|
||||
case 'completed':
|
||||
return 'bg-green-400/10 border-green-400/25';
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(ms: number): string {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainSec = seconds % 60;
|
||||
return `${minutes}m ${remainSec}s`;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────── Sub-components ──────────────────────────────────────── */
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color }: { icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>; label: string; value: number; color: string }) {
|
||||
return (
|
||||
<div className="bg-surface0 border border-border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-muted uppercase tracking-wide">{label}</p>
|
||||
<p className="text-3xl font-bold mt-1" style={{ color }}>{value.toLocaleString()}</p>
|
||||
</div>
|
||||
<Icon className="w-8 h-8 opacity-30" style={{ color }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: JobStatus }) {
|
||||
const dotColor = status === 'running' ? 'bg-accent' : status === 'failed' ? 'bg-red-400' : 'bg-green-400';
|
||||
const label = status === 'running' ? 'Running' : status === 'failed' ? 'Failed' : 'Completed';
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium ${statusBgColor(status)}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${dotColor} ${status === 'running' ? 'animate-pulse' : ''}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ExpandedDetail({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-start gap-2 text-xs">
|
||||
<span className="text-muted shrink-0 w-28">{label}</span>
|
||||
<span className="text-text font-mono break-all">{value || '—'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────── Job row ─────────────────────────────────────────────── */
|
||||
|
||||
function JobRow({
|
||||
job,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
job: JobHistoryEntry;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const status = getJobStatus(job);
|
||||
const summary = getJobDataSummary(job.name, job.data);
|
||||
const details = useMemo(() => getJobDataDetails(job.name, job.data), [job.name, job.data]);
|
||||
const duration = job.finishedOn && job.timestamp ? job.finishedOn - job.timestamp : null;
|
||||
const hasReturnValue = job.returnvalue !== undefined && job.returnvalue !== null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-surface0 border border-border rounded-lg transition-colors ${
|
||||
isExpanded ? 'border-accent/40' : 'hover:border-accent/30'
|
||||
}`}
|
||||
>
|
||||
{/* ── collapsed row ── */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 text-left"
|
||||
>
|
||||
{/* status icon */}
|
||||
<div className="shrink-0">
|
||||
{status === 'running' && <Activity className="w-4 h-4 text-accent animate-spin" />}
|
||||
{status === 'failed' && <AlertCircle className="w-4 h-4 text-red-400" />}
|
||||
{status === 'completed' && <CheckCircle className="w-4 h-4 text-green-400" />}
|
||||
</div>
|
||||
|
||||
{/* job name + summary */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm">{JOB_LABELS[job.name] || job.name}</span>
|
||||
<StatusBadge status={status} />
|
||||
</div>
|
||||
{summary && (
|
||||
<p className="text-xs text-muted mt-0.5 truncate max-w-md">{summary}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* timestamp + duration */}
|
||||
<div className="hidden sm:flex flex-col items-end text-xs text-muted shrink-0">
|
||||
<span>{formatDistanceToNow(new Date(job.timestamp), { addSuffix: true })}</span>
|
||||
{duration !== null && (
|
||||
<span className="opacity-60">{formatDuration(duration)}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* expand icon */}
|
||||
<div className="shrink-0 text-muted">
|
||||
{isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* ── expanded detail ── */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-border px-4 py-3 space-y-3">
|
||||
{/* Job metadata */}
|
||||
<div className="space-y-1">
|
||||
<ExpandedDetail label="Job ID" value={job.id} />
|
||||
<ExpandedDetail label="Created" value={format(new Date(job.timestamp), 'PPpp')} />
|
||||
{job.finishedOn && (
|
||||
<ExpandedDetail label="Finished" value={format(new Date(job.finishedOn), 'PPpp')} />
|
||||
)}
|
||||
{duration !== null && (
|
||||
<ExpandedDetail label="Duration" value={formatDuration(duration)} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Job-specific payload */}
|
||||
{details.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-muted mb-1 uppercase tracking-wider">Payload</p>
|
||||
<div className="space-y-1">
|
||||
{details.map((d) => (
|
||||
<ExpandedDetail key={d.label} label={d.label} value={d.value} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Raw data (collapsible) */}
|
||||
{Object.keys(job.data).length > 0 && (
|
||||
<RawDataBlock label="Raw Payload" data={job.data} />
|
||||
)}
|
||||
|
||||
{/* Return value */}
|
||||
{hasReturnValue && <RawDataBlock label="Return Value" data={job.returnvalue} />}
|
||||
|
||||
{/* Failed reason */}
|
||||
{job.failedReason && (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-red-400 mb-1 uppercase tracking-wider">Error</p>
|
||||
<div className="bg-red-400/5 border border-red-400/20 rounded p-2">
|
||||
<pre className="text-xs text-red-300 whitespace-pre-wrap font-mono">{job.failedReason}</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Raw JSON expandable block ── */
|
||||
|
||||
function RawDataBlock({ label, data }: { label: string; data: unknown }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const text = JSON.stringify(data, null, 2);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setOpen((p) => !p)}
|
||||
className="flex items-center gap-1 text-xs font-medium text-muted uppercase tracking-wider hover:text-text transition-colors"
|
||||
>
|
||||
{open ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
{label}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="relative mt-1">
|
||||
<pre className="text-xs text-muted bg-bg1/50 border border-border/70 rounded p-2 overflow-x-auto max-h-48 font-mono">
|
||||
{text}
|
||||
</pre>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(text)}
|
||||
className="absolute top-1 right-1 p-1 rounded text-muted hover:text-text hover:bg-surface0 transition-colors"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────── Filter bar ──────────────────────────────────────────── */
|
||||
|
||||
function FilterBar({
|
||||
filters,
|
||||
onChange,
|
||||
totalCount,
|
||||
filteredCount,
|
||||
}: {
|
||||
filters: Filters;
|
||||
onChange: (f: Filters) => void;
|
||||
totalCount: number;
|
||||
filteredCount: number;
|
||||
}) {
|
||||
const setStatus = (status: Filters['status']) => onChange({ ...filters, status });
|
||||
const setType = (type: string) => onChange({ ...filters, type });
|
||||
|
||||
const hasActiveFilters = filters.status !== 'all' || filters.type !== 'all';
|
||||
const statusOptions: { value: Filters['status']; label: string }[] = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'completed', label: 'Completed' },
|
||||
{ value: 'failed', label: 'Failed' },
|
||||
{ value: 'running', label: 'Running' },
|
||||
];
|
||||
const typeOptions = JOB_TYPES;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{/* Status pills */}
|
||||
<div className="flex items-center gap-1 bg-surface0 border border-border rounded-lg p-0.5">
|
||||
{statusOptions.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setStatus(opt.value)}
|
||||
className={`px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${
|
||||
filters.status === opt.value
|
||||
? 'bg-accent/15 text-accent'
|
||||
: 'text-muted hover:text-text'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Type dropdown */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={filters.type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="appearance-none bg-surface0 border border-border rounded-lg px-3 py-1.5 pr-8 text-xs font-medium text-text cursor-pointer focus:outline-none focus:border-accent/50"
|
||||
>
|
||||
<option value="all">All Types</option>
|
||||
{typeOptions.map((t) => (
|
||||
<option key={t} value={t}>{JOB_LABELS[t] || t}</option>
|
||||
))}
|
||||
</select>
|
||||
<Filter className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted" />
|
||||
</div>
|
||||
|
||||
{/* Result count */}
|
||||
<span className="text-xs text-muted">
|
||||
{filteredCount} / {totalCount} jobs
|
||||
</span>
|
||||
|
||||
{/* Clear filters */}
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={() => onChange(INITIAL_FILTERS)}
|
||||
className="flex items-center gap-1 text-xs text-muted hover:text-text transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────── Page ────────────────────────────────────────────────── */
|
||||
|
||||
export default function JobsPage() {
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
const [selectedTab, setSelectedTab] = useState<'overview' | 'history'>('overview');
|
||||
const [filters, setFilters] = useState<Filters>(INITIAL_FILTERS);
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
|
||||
const { data: stats, refetch: refetchStats } = useQuery({
|
||||
queryKey: ['queueStats'],
|
||||
queryFn: () => jobsService.getQueueStats(),
|
||||
refetchInterval: autoRefresh ? 3000 : false,
|
||||
staleTime: 1000,
|
||||
});
|
||||
|
||||
const { data: history, refetch: refetchHistory } = useQuery({
|
||||
queryKey: ['jobHistory'],
|
||||
queryFn: () => jobsService.getJobHistory(200),
|
||||
refetchInterval: autoRefresh ? 5000 : false,
|
||||
staleTime: 2000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTab === 'overview') refetchStats();
|
||||
else refetchHistory();
|
||||
}, [selectedTab, refetchStats, refetchHistory]);
|
||||
|
||||
const toggleExpanded = useCallback((id: string) => {
|
||||
setExpandedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Filtered & sorted history
|
||||
const filteredHistory = useMemo(() => {
|
||||
if (!history) return [];
|
||||
return history
|
||||
.filter((job) => {
|
||||
if (filters.status !== 'all' && getJobStatus(job) !== filters.status) return false;
|
||||
if (filters.type !== 'all' && job.name !== filters.type) return false;
|
||||
return true;
|
||||
});
|
||||
}, [history, filters]);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* ── Header ── */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Jobs</h1>
|
||||
<p className="text-sm text-muted">Background task queue monitoring</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => { refetchStats(); refetchHistory(); }}
|
||||
className="flex items-center gap-1.5 text-xs text-muted hover:text-text transition-colors"
|
||||
title="Refresh now"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
Refresh
|
||||
</button>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRefresh}
|
||||
onChange={(e) => setAutoRefresh(e.target.checked)}
|
||||
className="w-4 h-4 accent-accent"
|
||||
/>
|
||||
Auto-refresh
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Tabs ── */}
|
||||
<div className="flex border-b border-border px-4">
|
||||
<button
|
||||
onClick={() => setSelectedTab('overview')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
selectedTab === 'overview' ? 'border-accent text-text' : 'border-transparent text-muted hover:text-text'
|
||||
}`}
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedTab('history')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
selectedTab === 'history' ? 'border-accent text-text' : 'border-transparent text-muted hover:text-text'
|
||||
}`}
|
||||
>
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{/* ── Overview tab ── */}
|
||||
{selectedTab === 'overview' && stats && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<StatCard icon={Clock} label="Waiting" value={stats.waiting} color="#eab308" />
|
||||
<StatCard icon={Play} label="Active" value={stats.active} color="#a78bfa" />
|
||||
<StatCard icon={CheckCircle} label="Completed" value={stats.completed} color="#22c55e" />
|
||||
<StatCard icon={AlertCircle} label="Failed" value={stats.failed} color="#f87171" />
|
||||
<StatCard icon={RotateCcw} label="Delayed" value={stats.delayed} color="#60a5fa" />
|
||||
<StatCard icon={Pause} label="Paused" value={stats.paused} color="#6b7280" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── History tab ── */}
|
||||
{selectedTab === 'history' && (
|
||||
<>
|
||||
{/* Filter bar */}
|
||||
{history && history.length > 0 && (
|
||||
<FilterBar
|
||||
filters={filters}
|
||||
onChange={setFilters}
|
||||
totalCount={history.length}
|
||||
filteredCount={filteredHistory.length}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Job list */}
|
||||
{filteredHistory.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted">
|
||||
<Terminal className="w-12 h-12 mx-auto mb-4 opacity-30" />
|
||||
<p className="text-sm font-medium">
|
||||
{history && history.length > 0
|
||||
? 'No jobs match the current filters'
|
||||
: 'No job history yet'}
|
||||
</p>
|
||||
{(history && history.length > 0) && (
|
||||
<button
|
||||
onClick={() => setFilters(INITIAL_FILTERS)}
|
||||
className="mt-2 text-xs text-accent hover:underline"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filteredHistory.map((job) => (
|
||||
<JobRow
|
||||
key={job.id}
|
||||
job={job}
|
||||
isExpanded={expandedIds.has(job.id)}
|
||||
onToggle={() => toggleExpanded(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user