feat: Add extensible multi-pipeline integration system
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>
This commit is contained in:
98
web/components/dashboard/WidgetRegistry.tsx
Normal file
98
web/components/dashboard/WidgetRegistry.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentType } from 'react';
|
||||
import type { WidgetConfig, WidgetType, WidgetData } from '@/lib/pipeline-types';
|
||||
import { StatCard } from './widgets/StatCard';
|
||||
import { LineChartWidget } from './widgets/LineChart';
|
||||
import { BarChartWidget } from './widgets/BarChart';
|
||||
import { PieChartWidget } from './widgets/PieChart';
|
||||
import { DataTableWidget } from './widgets/DataTable';
|
||||
import { HeatmapWidget } from './widgets/Heatmap';
|
||||
|
||||
// Common widget props
|
||||
export interface WidgetComponentProps {
|
||||
config: WidgetConfig;
|
||||
data: WidgetData | null;
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
onRefresh?: () => void;
|
||||
onPageChange?: (page: number) => void;
|
||||
currentPage?: number;
|
||||
}
|
||||
|
||||
// Widget component type
|
||||
type WidgetComponent = ComponentType<WidgetComponentProps>;
|
||||
|
||||
/**
|
||||
* Registry mapping widget types to their React components.
|
||||
*/
|
||||
const WIDGET_COMPONENTS: Record<WidgetType, WidgetComponent> = {
|
||||
stat_card: StatCard as WidgetComponent,
|
||||
line_chart: LineChartWidget as WidgetComponent,
|
||||
bar_chart: BarChartWidget as WidgetComponent,
|
||||
pie_chart: PieChartWidget as WidgetComponent,
|
||||
table: DataTableWidget as WidgetComponent,
|
||||
heatmap: HeatmapWidget as WidgetComponent,
|
||||
// Placeholder for unimplemented types
|
||||
area_chart: LineChartWidget as WidgetComponent, // Use line chart as fallback
|
||||
gauge: StatCard as WidgetComponent, // Use stat card as fallback
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the component for a widget type.
|
||||
*/
|
||||
export function getWidgetComponent(type: WidgetType): WidgetComponent | null {
|
||||
return WIDGET_COMPONENTS[type] || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a widget type is supported.
|
||||
*/
|
||||
export function isWidgetTypeSupported(type: string): type is WidgetType {
|
||||
return type in WIDGET_COMPONENTS;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a widget based on its configuration.
|
||||
*/
|
||||
export function renderWidget(
|
||||
config: WidgetConfig,
|
||||
data: WidgetData | null,
|
||||
loading: boolean,
|
||||
error?: string,
|
||||
onRefresh?: () => void,
|
||||
onPageChange?: (page: number) => void,
|
||||
currentPage?: number
|
||||
): React.ReactNode {
|
||||
const Component = WIDGET_COMPONENTS[config.type];
|
||||
|
||||
if (!Component) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
||||
<p className="text-red-500">Unknown widget type: {config.type}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
config={config}
|
||||
data={data}
|
||||
loading={loading}
|
||||
error={error}
|
||||
onRefresh={onRefresh}
|
||||
onPageChange={onPageChange}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Export widget components for direct use
|
||||
export {
|
||||
StatCard,
|
||||
LineChartWidget,
|
||||
BarChartWidget,
|
||||
PieChartWidget,
|
||||
DataTableWidget,
|
||||
HeatmapWidget,
|
||||
};
|
||||
Reference in New Issue
Block a user