824634aa76
This commit implements a plugin-like pipeline architecture with:
Pipeline Core Package (packages/pipeline-core/):
- BasePipeline abstract class all pipelines implement
- PipelineRegistry for database-backed discovery/management
- PipelineRunner for execution with status tracking
- DashboardConfig contracts for dynamic widget definitions
Database Migration (006_pipeline_registry.sql):
- pipeline.registry table for registered pipelines
- pipeline.executions table for execution history
- Views for execution stats and monitoring
ReviewIQ Pipeline Refactor:
- Implements BasePipeline interface
- Adds get_dashboard_config() with widget definitions
- Adds get_widget_data() methods for all dashboard widgets
- Maintains backward compatibility with Pipeline alias
Generic Pipeline API (api/routes/pipelines.py):
- GET /api/pipelines - List all registered pipelines
- GET /api/pipelines/{id} - Pipeline details
- POST /api/pipelines/{id}/execute - Execute pipeline
- GET /api/pipelines/{id}/dashboard - Dashboard config
- GET /api/pipelines/{id}/widgets/{w} - Widget data
- GET /api/pipelines/{id}/executions - Execution history
Frontend Dynamic Dashboard System:
- DynamicDashboard component renders from config
- WidgetRegistry maps types to components
- Widget components: StatCard, LineChart, BarChart,
PieChart, DataTable, Heatmap
- Pipeline API client library
Frontend Pipeline Pages:
- /pipelines - List all registered pipelines
- /pipelines/[id] - Dynamic dashboard for pipeline
- /pipelines/[id]/executions - Execution history
- Pipelines nav item in Sidebar
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { RefreshCw, AlertCircle } from 'lucide-react';
|
|
import type { WidgetConfig } from '@/lib/pipeline-types';
|
|
|
|
interface WidgetWrapperProps {
|
|
config: WidgetConfig;
|
|
loading: boolean;
|
|
error?: string;
|
|
onRefresh?: () => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Common wrapper for dashboard widgets.
|
|
* Handles loading, error states, and refresh functionality.
|
|
*/
|
|
export function WidgetWrapper({
|
|
config,
|
|
loading,
|
|
error,
|
|
onRefresh,
|
|
children,
|
|
}: WidgetWrapperProps) {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm h-full flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="font-medium text-gray-900 dark:text-gray-100 text-sm">
|
|
{config.title}
|
|
</h3>
|
|
{onRefresh && (
|
|
<button
|
|
onClick={onRefresh}
|
|
disabled={loading}
|
|
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-50"
|
|
title="Refresh"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 p-4 overflow-auto">
|
|
{error ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center">
|
|
<AlertCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
|
|
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
</div>
|
|
</div>
|
|
) : loading ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="animate-pulse flex flex-col items-center">
|
|
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
|
|
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|