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>
110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
LineChart as RechartsLineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import type { WidgetConfig, ChartData, ChartWidgetConfig } from '@/lib/pipeline-types';
|
|
import { WidgetWrapper } from './WidgetWrapper';
|
|
|
|
interface LineChartWidgetProps {
|
|
config: WidgetConfig;
|
|
data: ChartData | null;
|
|
loading: boolean;
|
|
error?: string;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
// Default colors for series
|
|
const DEFAULT_COLORS = [
|
|
'#3b82f6', // blue
|
|
'#22c55e', // green
|
|
'#ef4444', // red
|
|
'#eab308', // yellow
|
|
'#8b5cf6', // purple
|
|
'#ec4899', // pink
|
|
'#06b6d4', // cyan
|
|
];
|
|
|
|
/**
|
|
* Line chart widget using Recharts.
|
|
*/
|
|
export function LineChartWidget({
|
|
config,
|
|
data,
|
|
loading,
|
|
error,
|
|
onRefresh,
|
|
}: LineChartWidgetProps) {
|
|
const chartConfig = config.config as ChartWidgetConfig;
|
|
const chartData = data?.data || [];
|
|
|
|
return (
|
|
<WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
|
|
{chartData.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
No data available
|
|
</div>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RechartsLineChart
|
|
data={chartData}
|
|
margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
|
|
>
|
|
{chartConfig.show_grid !== false && (
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
)}
|
|
<XAxis
|
|
dataKey={chartConfig.x_axis?.key || 'x'}
|
|
tick={{ fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: '#e5e7eb' }}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: '#e5e7eb' }}
|
|
label={
|
|
chartConfig.y_axis?.label
|
|
? {
|
|
value: chartConfig.y_axis.label,
|
|
angle: -90,
|
|
position: 'insideLeft',
|
|
style: { fontSize: 12 },
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'white',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.375rem',
|
|
}}
|
|
/>
|
|
{chartConfig.show_legend !== false && <Legend />}
|
|
{chartConfig.series?.map((series, index) => (
|
|
<Line
|
|
key={series.key}
|
|
type="monotone"
|
|
dataKey={series.key}
|
|
name={series.name}
|
|
stroke={series.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4 }}
|
|
/>
|
|
))}
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</WidgetWrapper>
|
|
);
|
|
}
|