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:
Alejandro Gutiérrez
148
web/components/dashboard/DashboardSection.tsx
Normal file
148
web/components/dashboard/DashboardSection.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import type { DashboardSection as DashboardSectionType, WidgetData } from '@/lib/pipeline-types';
|
||||
import { getWidgetData } from '@/lib/pipeline-api';
|
||||
import { renderWidget } from './WidgetRegistry';
|
||||
|
||||
interface DashboardSectionProps {
|
||||
section: DashboardSectionType;
|
||||
pipelineId: string;
|
||||
businessId?: string;
|
||||
timeRange?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a dashboard section with its widgets.
|
||||
*/
|
||||
export function DashboardSection({
|
||||
section,
|
||||
pipelineId,
|
||||
businessId,
|
||||
timeRange = '30d',
|
||||
}: DashboardSectionProps) {
|
||||
const [collapsed, setCollapsed] = useState(section.collapsed ?? false);
|
||||
const [widgetData, setWidgetData] = useState<Record<string, WidgetData | null>>({});
|
||||
const [widgetLoading, setWidgetLoading] = useState<Record<string, boolean>>({});
|
||||
const [widgetErrors, setWidgetErrors] = useState<Record<string, string | undefined>>({});
|
||||
const [tablePagination, setTablePagination] = useState<Record<string, number>>({});
|
||||
|
||||
// Fetch data for a single widget
|
||||
const fetchWidgetData = useCallback(
|
||||
async (widgetId: string, page?: number) => {
|
||||
setWidgetLoading((prev) => ({ ...prev, [widgetId]: true }));
|
||||
setWidgetErrors((prev) => ({ ...prev, [widgetId]: undefined }));
|
||||
|
||||
try {
|
||||
const data = await getWidgetData(pipelineId, widgetId, {
|
||||
business_id: businessId,
|
||||
time_range: timeRange,
|
||||
page: page || tablePagination[widgetId] || 1,
|
||||
});
|
||||
setWidgetData((prev) => ({ ...prev, [widgetId]: data }));
|
||||
} catch (error) {
|
||||
setWidgetErrors((prev) => ({
|
||||
...prev,
|
||||
[widgetId]: error instanceof Error ? error.message : 'Failed to load',
|
||||
}));
|
||||
} finally {
|
||||
setWidgetLoading((prev) => ({ ...prev, [widgetId]: false }));
|
||||
}
|
||||
},
|
||||
[pipelineId, businessId, timeRange, tablePagination]
|
||||
);
|
||||
|
||||
// Fetch all widget data on mount and when params change
|
||||
useEffect(() => {
|
||||
if (!collapsed) {
|
||||
section.widgets.forEach((widget) => {
|
||||
fetchWidgetData(widget.id);
|
||||
});
|
||||
}
|
||||
}, [section.widgets, collapsed, pipelineId, businessId, timeRange]);
|
||||
|
||||
// Handle page change for tables
|
||||
const handlePageChange = (widgetId: string, page: number) => {
|
||||
setTablePagination((prev) => ({ ...prev, [widgetId]: page }));
|
||||
fetchWidgetData(widgetId, page);
|
||||
};
|
||||
|
||||
// Calculate grid layout
|
||||
// Using a 12-column grid
|
||||
const getGridClass = (widget: typeof section.widgets[0]) => {
|
||||
const { grid } = widget;
|
||||
// Map grid units to Tailwind classes
|
||||
const colSpanClasses: Record<number, string> = {
|
||||
1: 'col-span-1',
|
||||
2: 'col-span-2',
|
||||
3: 'col-span-3',
|
||||
4: 'col-span-4',
|
||||
5: 'col-span-5',
|
||||
6: 'col-span-6',
|
||||
7: 'col-span-7',
|
||||
8: 'col-span-8',
|
||||
9: 'col-span-9',
|
||||
10: 'col-span-10',
|
||||
11: 'col-span-11',
|
||||
12: 'col-span-12',
|
||||
};
|
||||
const rowSpanClasses: Record<number, string> = {
|
||||
1: 'row-span-1',
|
||||
2: 'row-span-2',
|
||||
3: 'row-span-3',
|
||||
4: 'row-span-4',
|
||||
};
|
||||
return `${colSpanClasses[grid.w] || 'col-span-4'} ${rowSpanClasses[grid.h] || 'row-span-1'}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
{/* Section Header */}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="flex items-center w-full text-left mb-4 group"
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="w-5 h-5 text-gray-500 mr-2" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-gray-500 mr-2" />
|
||||
)}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600">
|
||||
{section.title}
|
||||
</h2>
|
||||
{section.description && (
|
||||
<p className="text-sm text-gray-500">{section.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Widgets Grid */}
|
||||
{!collapsed && (
|
||||
<div
|
||||
className="grid grid-cols-12 gap-4"
|
||||
style={{
|
||||
gridAutoRows: '140px', // Base row height
|
||||
}}
|
||||
>
|
||||
{section.widgets.map((widget) => (
|
||||
<div key={widget.id} className={getGridClass(widget)}>
|
||||
{renderWidget(
|
||||
widget,
|
||||
widgetData[widget.id] || null,
|
||||
widgetLoading[widget.id] ?? true,
|
||||
widgetErrors[widget.id],
|
||||
() => fetchWidgetData(widget.id),
|
||||
widget.type === 'table'
|
||||
? (page) => handlePageChange(widget.id, page)
|
||||
: undefined,
|
||||
tablePagination[widget.id] || 1
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user