feat: Add pipeline execution UI, stage metrics, and API proxy routes
- Add run pipeline page with job selection UI - Add execution detail page with stage metrics visualization - Add stage_metrics and total_duration_ms to pipeline.executions table - Create Next.js API proxy routes for all pipeline endpoints - Fix trailing slash issues in pipeline-api.ts URLs - Add Docker volume mounts for pipeline packages - Add REVIEWIQ_DATABASE_URL and LLM API keys to docker-compose - Fix JSONB field parsing in execution detail endpoint Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
30
web/app/api/pipelines/[pipelineId]/dashboard/route.ts
Normal file
30
web/app/api/pipelines/[pipelineId]/dashboard/route.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId } = await params;
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/dashboard`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch dashboard config' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipeline dashboard API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch dashboard config' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
39
web/app/api/pipelines/[pipelineId]/execute/route.ts
Normal file
39
web/app/api/pipelines/[pipelineId]/execute/route.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function POST(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId } = await params;
|
||||
const body = await request.json();
|
||||
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/execute`;
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
|
||||
return NextResponse.json(
|
||||
{ error: error.detail || 'Failed to execute pipeline' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipeline execute API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to execute pipeline' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string; executionId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId, executionId } = await params;
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/executions/${executionId}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch execution' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipeline execution API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch execution' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
33
web/app/api/pipelines/[pipelineId]/executions/route.ts
Normal file
33
web/app/api/pipelines/[pipelineId]/executions/route.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId } = await params;
|
||||
const { searchParams } = new URL(request.url);
|
||||
const limit = searchParams.get('limit') || '50';
|
||||
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/executions?limit=${limit}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch executions' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipeline executions API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch executions' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
30
web/app/api/pipelines/[pipelineId]/route.ts
Normal file
30
web/app/api/pipelines/[pipelineId]/route.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId } = await params;
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch pipeline' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipeline API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch pipeline' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ pipelineId: string; widgetId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { pipelineId, widgetId } = await params;
|
||||
const { searchParams } = new URL(request.url);
|
||||
|
||||
// Forward query params
|
||||
const queryString = searchParams.toString();
|
||||
const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/widgets/${widgetId}${queryString ? `?${queryString}` : ''}`;
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch widget data' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Widget API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch widget data' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
29
web/app/api/pipelines/route.ts
Normal file
29
web/app/api/pipelines/route.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const enabledOnly = searchParams.get('enabled_only') !== 'false';
|
||||
|
||||
const url = `${API_BASE_URL}/api/pipelines/?enabled_only=${enabledOnly}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch pipelines' },
|
||||
{ status: response.status }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Pipelines API error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to fetch pipelines' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
479
web/app/pipelines/[pipelineId]/executions/[executionId]/page.tsx
Normal file
479
web/app/pipelines/[pipelineId]/executions/[executionId]/page.tsx
Normal file
@@ -0,0 +1,479 @@
|
||||
'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,
|
||||
} 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>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
288
web/app/pipelines/[pipelineId]/run/page.tsx
Normal file
288
web/app/pipelines/[pipelineId]/run/page.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Play,
|
||||
CheckCircle,
|
||||
Search,
|
||||
Loader,
|
||||
AlertCircle,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import type { PipelineDetail } from '@/lib/pipeline-types';
|
||||
import { getPipeline, executePipeline } from '@/lib/pipeline-api';
|
||||
|
||||
interface Job {
|
||||
job_id: string;
|
||||
business_name: string;
|
||||
place_id: string;
|
||||
status: string;
|
||||
total_reviews: number;
|
||||
created_at: string;
|
||||
completed_at?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Run Pipeline page - select a job to process through the pipeline.
|
||||
*/
|
||||
export default function RunPipelinePage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const pipelineId = params.pipelineId as string;
|
||||
|
||||
const [pipeline, setPipeline] = useState<PipelineDetail | null>(null);
|
||||
const [jobs, setJobs] = useState<Job[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedJob, setSelectedJob] = useState<Job | null>(null);
|
||||
const [executing, setExecuting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Fetch pipeline details
|
||||
const pipelineData = await getPipeline(pipelineId);
|
||||
setPipeline(pipelineData);
|
||||
|
||||
// Fetch completed jobs
|
||||
const response = await fetch('/api/jobs/?status=completed&limit=100');
|
||||
if (!response.ok) throw new Error('Failed to fetch jobs');
|
||||
const jobsData = await response.json();
|
||||
// API returns { jobs: [...] }
|
||||
setJobs(jobsData.jobs || []);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to load data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [pipelineId]);
|
||||
|
||||
const handleExecute = async () => {
|
||||
if (!selectedJob || !pipeline) return;
|
||||
|
||||
setExecuting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const execution = await executePipeline(pipelineId, {
|
||||
job_id: selectedJob.job_id,
|
||||
// Always run all stages - they're sequential and depend on each other
|
||||
stages: pipeline.stages,
|
||||
});
|
||||
|
||||
// Navigate to execution detail page
|
||||
router.push(`/pipelines/${pipelineId}/executions/${execution.execution_id}`);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to execute pipeline');
|
||||
setExecuting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter jobs by search query
|
||||
const filteredJobs = jobs.filter((job) =>
|
||||
job.business_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
job.place_id.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 w-48 bg-gray-200 rounded mb-4" />
|
||||
<div className="h-4 w-96 bg-gray-200 rounded mb-8" />
|
||||
<div className="h-96 bg-gray-200 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !pipeline) {
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
{/* Navigation */}
|
||||
<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>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Run Pipeline</h1>
|
||||
<p className="text-gray-600 mt-1">
|
||||
{pipeline?.name} - Select a completed job to process
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Job Selection */}
|
||||
<div className="lg:col-span-2 bg-white rounded-xl border-2 border-gray-200 p-5">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Select Job
|
||||
</h2>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative mb-4">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search jobs by business name..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Jobs List */}
|
||||
<div className="max-h-[500px] overflow-y-auto space-y-2">
|
||||
{filteredJobs.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500">No completed jobs found</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredJobs.map((job, index) => (
|
||||
<div
|
||||
key={job.job_id || `job-${index}`}
|
||||
onClick={() => setSelectedJob(job)}
|
||||
className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
|
||||
selectedJob?.job_id === job.job_id
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-gray-900 truncate">
|
||||
{job.business_name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 truncate mt-1">
|
||||
{job.place_id}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center text-xs text-gray-500 space-x-4">
|
||||
<span>{job.total_reviews} reviews</span>
|
||||
<span>
|
||||
{new Date(job.completed_at || job.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedJob?.job_id === job.job_id ? (
|
||||
<CheckCircle className="w-6 h-6 text-blue-600 flex-shrink-0 ml-4" />
|
||||
) : (
|
||||
<ChevronRight className="w-5 h-5 text-gray-300 flex-shrink-0 ml-4" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pipeline Info & Execute */}
|
||||
<div className="bg-white rounded-xl border-2 border-gray-200 p-5">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Pipeline Stages
|
||||
</h2>
|
||||
|
||||
{/* Stages (read-only, informational) */}
|
||||
<div className="space-y-2 mb-6">
|
||||
{pipeline?.stages.map((stage, index) => (
|
||||
<div
|
||||
key={stage}
|
||||
className="flex items-center p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold mr-3 bg-blue-100 text-blue-700">
|
||||
{index + 1}
|
||||
</div>
|
||||
<span className="font-medium text-gray-700">{stage}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 mb-6">
|
||||
All stages will run sequentially. Each stage depends on the output of the previous stage.
|
||||
</p>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-2">Summary</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Selected Job:</span>
|
||||
<span className="font-medium text-gray-900 truncate max-w-[150px]">
|
||||
{selectedJob?.business_name || 'None'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Reviews:</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{selectedJob?.total_reviews || '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Stages:</span>
|
||||
<span className="font-medium text-gray-900">
|
||||
{pipeline?.stages.length || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Execute Button */}
|
||||
<button
|
||||
onClick={handleExecute}
|
||||
disabled={!selectedJob || executing}
|
||||
className="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{executing ? (
|
||||
<>
|
||||
<Loader className="w-5 h-5 mr-2 animate-spin" />
|
||||
Starting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-5 h-5 mr-2" />
|
||||
Run Pipeline
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -166,6 +166,26 @@ export async function listExecutions(
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a specific execution by ID.
|
||||
*/
|
||||
export async function getExecution(
|
||||
pipelineId: string,
|
||||
executionId: string
|
||||
): Promise<ExecutionStatus> {
|
||||
const url = `${API_BASE}/api/pipelines/${pipelineId}/executions/${executionId}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw new Error(`Execution not found: ${executionId}`);
|
||||
}
|
||||
throw new Error(`Failed to fetch execution: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable a pipeline.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user