497 lines
17 KiB
TypeScript
497 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import {
|
|
ArrowLeft,
|
|
CheckCircle,
|
|
XCircle,
|
|
Clock,
|
|
Loader,
|
|
RefreshCw,
|
|
AlertCircle,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ExternalLink,
|
|
Timer,
|
|
ArrowRightLeft,
|
|
BarChart3,
|
|
} from 'lucide-react';
|
|
import type { ExecutionStatus, StageMetrics } from '@/lib/pipeline-types';
|
|
import { getExecution } from '@/lib/pipeline-api';
|
|
|
|
// Status badge component
|
|
function StatusBadge({ status }: { status: ExecutionStatus['status'] }) {
|
|
const config = {
|
|
pending: {
|
|
icon: Clock,
|
|
color: 'bg-gray-100 text-gray-600',
|
|
label: 'Pending',
|
|
},
|
|
running: {
|
|
icon: Loader,
|
|
color: 'bg-blue-100 text-blue-600',
|
|
label: 'Running',
|
|
},
|
|
completed: {
|
|
icon: CheckCircle,
|
|
color: 'bg-green-100 text-green-600',
|
|
label: 'Completed',
|
|
},
|
|
failed: {
|
|
icon: XCircle,
|
|
color: 'bg-red-100 text-red-600',
|
|
label: 'Failed',
|
|
},
|
|
cancelled: {
|
|
icon: AlertCircle,
|
|
color: 'bg-yellow-100 text-yellow-600',
|
|
label: 'Cancelled',
|
|
},
|
|
};
|
|
|
|
const { icon: Icon, color, label } = config[status] || config.pending;
|
|
|
|
return (
|
|
<span className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold ${color}`}>
|
|
<Icon className={`w-4 h-4 mr-2 ${status === 'running' ? 'animate-spin' : ''}`} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// Format date string
|
|
function formatDate(dateStr: string | undefined): string {
|
|
if (!dateStr) return '-';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
|
|
}
|
|
|
|
// Format duration from milliseconds
|
|
function formatDurationMs(ms: number | undefined): string {
|
|
if (!ms) return '-';
|
|
if (ms < 1000) return `${ms}ms`;
|
|
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
|
|
const minutes = Math.floor(ms / 60000);
|
|
const seconds = Math.floor((ms % 60000) / 1000);
|
|
return `${minutes}m ${seconds}s`;
|
|
}
|
|
|
|
// Calculate duration from timestamps
|
|
function formatDuration(start?: string, end?: string): string {
|
|
if (!start) return '-';
|
|
const startDate = new Date(start);
|
|
const endDate = end ? new Date(end) : new Date();
|
|
const ms = endDate.getTime() - startDate.getTime();
|
|
return formatDurationMs(ms);
|
|
}
|
|
|
|
// Stage metrics display component
|
|
function StageMetricsTable({
|
|
stages,
|
|
metrics,
|
|
completed,
|
|
}: {
|
|
stages: string[];
|
|
metrics: Record<string, StageMetrics> | undefined;
|
|
completed: string[];
|
|
}) {
|
|
if (!metrics || Object.keys(metrics).length === 0) {
|
|
return (
|
|
<div className="text-sm text-gray-500 italic">
|
|
No stage metrics available yet
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Calculate total duration
|
|
const totalDuration = Object.values(metrics).reduce(
|
|
(sum, m) => sum + (m.duration_ms || 0),
|
|
0
|
|
);
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
|
|
Stage
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
|
|
Status
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
|
|
Duration
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
|
|
% of Total
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
|
|
Records In
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
|
|
Records Out
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{stages.map((stage, index) => {
|
|
const stageMetrics = metrics[stage];
|
|
const isCompleted = completed.includes(stage);
|
|
const percentage = totalDuration > 0 && stageMetrics
|
|
? ((stageMetrics.duration_ms / totalDuration) * 100).toFixed(1)
|
|
: '0';
|
|
|
|
return (
|
|
<tr key={stage} className="hover:bg-gray-50">
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center">
|
|
<span className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold mr-2 bg-gray-100 text-gray-600">
|
|
{index + 1}
|
|
</span>
|
|
<span className="font-medium text-gray-900">{stage}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{stageMetrics ? (
|
|
stageMetrics.success ? (
|
|
<span className="inline-flex items-center text-green-600 text-sm">
|
|
<CheckCircle className="w-4 h-4 mr-1" />
|
|
Success
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center text-red-600 text-sm">
|
|
<XCircle className="w-4 h-4 mr-1" />
|
|
Failed
|
|
</span>
|
|
)
|
|
) : isCompleted ? (
|
|
<span className="text-gray-400 text-sm">-</span>
|
|
) : (
|
|
<span className="text-gray-400 text-sm">Pending</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<span className="font-mono text-sm text-gray-900">
|
|
{stageMetrics ? formatDurationMs(stageMetrics.duration_ms) : '-'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
{stageMetrics && totalDuration > 0 ? (
|
|
<div className="flex items-center justify-end">
|
|
<div className="w-16 h-2 bg-gray-200 rounded-full mr-2 overflow-hidden">
|
|
<div
|
|
className="h-full bg-blue-500 rounded-full"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-sm text-gray-600 w-12 text-right">
|
|
{percentage}%
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-gray-400 text-sm">-</span>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<span className="font-mono text-sm text-gray-900">
|
|
{stageMetrics?.records_in?.toLocaleString() || '-'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<span className="font-mono text-sm text-gray-900">
|
|
{stageMetrics?.records_out?.toLocaleString() || '-'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
<tfoot className="bg-gray-50">
|
|
<tr>
|
|
<td className="px-4 py-3 font-semibold text-gray-900">Total</td>
|
|
<td className="px-4 py-3"></td>
|
|
<td className="px-4 py-3 text-right font-mono font-semibold text-gray-900">
|
|
{formatDurationMs(totalDuration)}
|
|
</td>
|
|
<td className="px-4 py-3 text-right text-sm text-gray-600">100%</td>
|
|
<td className="px-4 py-3"></td>
|
|
<td className="px-4 py-3"></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// JSON viewer component
|
|
function JsonViewer({ data, title }: { data: unknown; title: string }) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<div className="bg-gray-50 rounded-lg border border-gray-200">
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="w-full flex items-center justify-between p-3 text-left hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<span className="font-medium text-gray-700">{title}</span>
|
|
{expanded ? (
|
|
<ChevronDown className="w-4 h-4 text-gray-500" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-gray-500" />
|
|
)}
|
|
</button>
|
|
{expanded && (
|
|
<div className="p-3 pt-0">
|
|
<pre className="text-xs text-gray-600 overflow-x-auto bg-white p-3 rounded border border-gray-200">
|
|
{JSON.stringify(data, null, 2)}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Execution detail page - shows results, status, and stage metrics.
|
|
*/
|
|
export default function ExecutionDetailPage() {
|
|
const params = useParams();
|
|
const pipelineId = params.pipelineId as string;
|
|
const executionId = params.executionId as string;
|
|
|
|
const [execution, setExecution] = useState<ExecutionStatus | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [autoRefresh, setAutoRefresh] = useState(true);
|
|
|
|
const fetchExecution = async () => {
|
|
try {
|
|
const data = await getExecution(pipelineId, executionId);
|
|
setExecution(data);
|
|
setError(null);
|
|
|
|
// Stop auto-refresh if execution is complete
|
|
if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
|
|
setAutoRefresh(false);
|
|
}
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Failed to load execution');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchExecution();
|
|
}, [pipelineId, executionId]);
|
|
|
|
// Auto-refresh while running
|
|
useEffect(() => {
|
|
if (!autoRefresh) return;
|
|
|
|
const interval = setInterval(fetchExecution, 3000);
|
|
return () => clearInterval(interval);
|
|
}, [autoRefresh, pipelineId, executionId]);
|
|
|
|
if (loading && !execution) {
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="animate-pulse">
|
|
<div className="h-8 w-64 bg-gray-200 rounded mb-4" />
|
|
<div className="h-4 w-96 bg-gray-200 rounded mb-8" />
|
|
<div className="h-48 bg-gray-200 rounded-xl mb-6" />
|
|
<div className="h-64 bg-gray-200 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !execution) {
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<Link
|
|
href={`/pipelines/${pipelineId}`}
|
|
className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6"
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-1" />
|
|
Back to Pipeline
|
|
</Link>
|
|
|
|
<div className="text-center py-12">
|
|
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
|
<p className="text-red-600 mb-4">{error}</p>
|
|
<button
|
|
onClick={fetchExecution}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isRunning = execution?.status === 'running' || execution?.status === 'pending';
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
{/* Navigation */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<Link
|
|
href={`/pipelines/${pipelineId}`}
|
|
className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
|
|
>
|
|
<ArrowLeft className="w-4 h-4 mr-1" />
|
|
Back to Pipeline
|
|
</Link>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
{isRunning && (
|
|
<span className="text-sm text-gray-500">
|
|
Auto-refreshing...
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={fetchExecution}
|
|
disabled={loading}
|
|
className="inline-flex items-center px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
Execution Details
|
|
</h1>
|
|
<code className="text-sm text-gray-500 mt-1">
|
|
{execution?.id}
|
|
</code>
|
|
</div>
|
|
<StatusBadge status={execution?.status || 'pending'} />
|
|
</div>
|
|
|
|
{/* Info Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div>
|
|
<span className="text-sm text-gray-500">Started</span>
|
|
<p className="font-medium text-gray-900">
|
|
{formatDate(execution?.started_at)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-gray-500">Completed</span>
|
|
<p className="font-medium text-gray-900">
|
|
{formatDate(execution?.completed_at)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-gray-500">Total Duration</span>
|
|
<p className="font-medium text-gray-900">
|
|
{execution?.total_duration_ms
|
|
? formatDurationMs(execution.total_duration_ms)
|
|
: formatDuration(execution?.started_at, execution?.completed_at)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-gray-500">Stages</span>
|
|
<p className="font-medium text-gray-900">
|
|
{execution?.stages_completed.length} / {execution?.stages_requested.length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Job/Business Link */}
|
|
{execution?.job_id && (
|
|
<div className="flex items-center text-sm mb-4">
|
|
<span className="text-gray-500 mr-2">Job:</span>
|
|
<Link
|
|
href={`/jobs/${execution.job_id}`}
|
|
className="text-blue-600 hover:underline font-medium inline-flex items-center"
|
|
>
|
|
{execution.job_id.slice(0, 12)}...
|
|
<ExternalLink className="w-3 h-3 ml-1" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{execution?.business_id && (
|
|
<div className="flex items-center text-sm mb-4">
|
|
<span className="text-gray-500 mr-2">Business:</span>
|
|
<span className="font-medium text-gray-900">
|
|
{execution.business_id}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* View Results Dashboard Button */}
|
|
{execution?.status === 'completed' && execution?.job_id && (
|
|
<div className="mt-6 pt-4 border-t border-gray-200">
|
|
<Link
|
|
href={`/pipelines/${pipelineId}/analytics?job_id=${execution.job_id}`}
|
|
className="inline-flex items-center px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
<BarChart3 className="w-5 h-5 mr-2" />
|
|
View Results Dashboard
|
|
</Link>
|
|
<p className="mt-2 text-sm text-gray-500">
|
|
See classification results, sentiment analysis, and identified issues
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{execution?.error_message && (
|
|
<div className="bg-red-50 rounded-xl border-2 border-red-200 p-6 mb-6">
|
|
<div className="flex items-start">
|
|
<XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
|
|
<div className="ml-3">
|
|
<h3 className="font-semibold text-red-800">Execution Failed</h3>
|
|
<p className="mt-1 text-sm text-red-700">{execution.error_message}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stage Metrics / Profiling */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
|
|
<div className="flex items-center mb-4">
|
|
<Timer className="w-5 h-5 text-gray-600 mr-2" />
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
Stage Performance
|
|
</h2>
|
|
</div>
|
|
|
|
<StageMetricsTable
|
|
stages={execution?.stages_requested || []}
|
|
metrics={execution?.stage_metrics}
|
|
completed={execution?.stages_completed || []}
|
|
/>
|
|
</div>
|
|
|
|
{/* Raw Data */}
|
|
<div className="bg-white rounded-xl border-2 border-gray-200 p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Execution Data
|
|
</h2>
|
|
|
|
<div className="space-y-3">
|
|
<JsonViewer data={execution?.input_summary} title="Input Summary" />
|
|
<JsonViewer data={execution?.result_summary} title="Result Summary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|