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>
2026-01-24 21:13:19 +00:00
parent acdfed8044
commit 796f587c57
13 changed files with 1212 additions and 4 deletions
--- a/web/app/api/pipelines/[pipelineId]/dashboard/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/dashboard/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/[pipelineId]/execute/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/execute/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/[pipelineId]/executions/[executionId]/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/executions/[executionId]/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/[pipelineId]/executions/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/executions/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/[pipelineId]/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/[pipelineId]/widgets/[widgetId]/route.ts
+++ b/web/app/api/pipelines/[pipelineId]/widgets/[widgetId]/route.ts
@@ -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 }
+    );
+  }
+}
--- a/web/app/api/pipelines/route.ts
+++ b/web/app/api/pipelines/route.ts
@@ -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 }
+    );
+  }
+}