@oronts/vendure-data-hub-plugin 0.1.0 → 0.1.2

package/dist/dashboard/routes/logs/components/LogsOverviewTab.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+    Button,
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@vendure/dashboard';
+import {
+    Activity,
+    AlertCircle,
+    AlertTriangle,
+    Clock,
+    RefreshCw,
+    TrendingUp,
+} from 'lucide-react';
+import {
+    useLogStats,
+    usePipelines,
+    useLoadMore,
+} from '../../../hooks';
+import { useOptionValues } from '../../../hooks/api/use-config-options';
+import { ErrorState, LoadingState, StatCard, LoadMoreButton } from '../../../components/shared';
+import { QUERY_LIMITS, UI_DEFAULTS } from '../../../constants';
+import { LevelBadge } from './LogLevelBadge';
+import type { DataHubPipeline } from '../../../types';
+
+/**
+ * Pipeline statistics card showing log counts and performance metrics
+ */
+const PipelineStatCard = React.memo(function PipelineStatCard({ pipeline }: { pipeline: Pick<DataHubPipeline, 'id' | 'code' | 'name'> }) {
+    const { data: stats, isLoading } = useLogStats(pipeline.id);
+
+    return (
+        <div className="border rounded-lg p-3">
+            <div className="flex items-center justify-between mb-2">
+                <div className="font-medium">{pipeline.name}</div>
+                <code className="text-xs text-muted-foreground">{pipeline.code}</code>
+            </div>
+            <div className="flex gap-3 text-sm">
+                <span className="text-muted-foreground">
+                    <span className="font-medium text-foreground">{isLoading ? '\u2014' : (stats?.total ?? 0)}</span> logs
+                </span>
+                {!isLoading && (stats?.errorsToday ?? 0) > 0 && (
+                    <span className="text-red-600">
+                        {stats?.errorsToday} errors today
+                    </span>
+                )}
+                {!isLoading && (stats?.avgDurationMs ?? 0) > 0 && (
+                    <span className="text-muted-foreground">
+                        avg {stats?.avgDurationMs}ms
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+});
+
+const PIPELINE_HEALTH_PAGE_SIZE = 6;
+
+/**
+ * Overview tab displaying analytics dashboard with log statistics and pipeline health.
+ * Shows total logs, errors, warnings, average duration, and per-pipeline metrics.
+ */
+export function LogsOverviewTab() {
+    const { options: logLevels } = useOptionValues('logLevels');
+    const statsQuery = useLogStats();
+    const pipelinesQuery = usePipelines({ take: QUERY_LIMITS.ALL_ITEMS });
+    const stats = statsQuery.data;
+    const pipelines = pipelinesQuery.data?.items ?? [];
+
+    const { displayed: displayedPipelines, hasMore: hasMorePipelines, remaining, loadMore } = useLoadMore(pipelines, { pageSize: PIPELINE_HEALTH_PAGE_SIZE });
+
+    const handleRefetch = React.useCallback(() => statsQuery.refetch(), [statsQuery.refetch]);
+
+    if (statsQuery.isError) {
+        return (
+            <ErrorState
+                title="Failed to load log statistics"
+                message={statsQuery.error?.message || 'An unexpected error occurred'}
+                onRetry={handleRefetch}
+            />
+        );
+    }
+
+    if (statsQuery.isLoading) {
+        return <LoadingState type="card" rows={2} message="Loading analytics..." />;
+    }
+
+    return (
+        <div className="space-y-6">
+            <Card>
+                <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <Activity className="w-5 h-5 text-primary" />
+                            <CardTitle>Analytics Dashboard</CardTitle>
+                        </div>
+                        <Button variant="ghost" size="sm" onClick={handleRefetch} disabled={statsQuery.isLoading}>
+                            <RefreshCw className={`w-4 h-4 mr-2 ${statsQuery.isLoading ? 'animate-spin' : ''}`} />
+                            Refresh
+                        </Button>
+                    </div>
+                    <CardDescription>
+                        Pipeline execution metrics and log statistics
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+                        <StatCard
+                            title="Total Logs"
+                            value={stats?.total ?? 0}
+                            icon={<TrendingUp className="w-4 h-4" />}
+                            variant="info"
+                        />
+                        <StatCard
+                            title="Errors Today"
+                            value={stats?.errorsToday ?? 0}
+                            icon={<AlertCircle className="w-4 h-4" />}
+                            variant="error"
+                        />
+                        <StatCard
+                            title="Warnings Today"
+                            value={stats?.warningsToday ?? 0}
+                            icon={<AlertTriangle className="w-4 h-4" />}
+                            variant="warning"
+                        />
+                        <StatCard
+                            title="Avg Duration"
+                            value={`${stats?.avgDurationMs ?? 0}ms`}
+                            icon={<Clock className="w-4 h-4" />}
+                            variant="success"
+                        />
+                        <div className="border rounded-lg p-3 bg-muted/30">
+                            <div className="text-xs text-muted-foreground mb-2">By Level</div>
+                            <div className="flex gap-2">
+                                {logLevels.map(level => (
+                                    <LevelBadge
+                                        key={level.value}
+                                        level={level.value}
+                                        count={(stats?.byLevel as Record<string, number> | undefined)?.[level.value] ?? 0}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <CardTitle className="text-base">Pipeline Health</CardTitle>
+                            <CardDescription>
+                                Log statistics for each pipeline ({pipelines.length} total)
+                            </CardDescription>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className="grid grid-cols-2 gap-4">
+                        {displayedPipelines.map((p) => (
+                            <PipelineStatCard key={p.id} pipeline={p} />
+                        ))}
+                    </div>
+                    {hasMorePipelines && <LoadMoreButton remaining={remaining} onClick={loadMore} />}
+                    {pipelines.length === 0 && (
+                        <div className="text-center py-8 text-muted-foreground">
+                            No pipelines found
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

package/dist/dashboard/routes/logs/components/RealtimeLogTab.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import {
+    Button,
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@vendure/dashboard';
+import {
+    RefreshCw,
+    Zap,
+} from 'lucide-react';
+import { useRecentLogs } from '../../../hooks';
+import { ErrorState } from '../../../components/shared';
+import { formatSmartDateTime } from '../../../utils';
+import { LogLevelBadge } from './LogLevelBadge';
+import { UI_LIMITS, SCROLL_HEIGHTS, POLLING_INTERVALS } from '../../../constants';
+
+/**
+ * Real-time log feed tab that auto-refreshes every 3 seconds.
+ * Displays the latest 50 log entries across all pipelines.
+ */
+export function RealtimeLogTab() {
+    const recentLogsQuery = useRecentLogs(UI_LIMITS.REALTIME_LOG_LIMIT);
+    const logs = recentLogsQuery.data ?? [];
+
+    const handleRefetch = React.useCallback(() => recentLogsQuery.refetch(), [recentLogsQuery.refetch]);
+
+    if (recentLogsQuery.isError) {
+        return (
+            <ErrorState
+                title="Failed to load real-time logs"
+                message={recentLogsQuery.error?.message || 'An unexpected error occurred'}
+                onRetry={handleRefetch}
+            />
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <Zap className="w-5 h-5 text-primary" />
+                        <CardTitle>Real-time Log Feed</CardTitle>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <div
+                            className={`w-2 h-2 rounded-full ${recentLogsQuery.isLoading ? 'bg-amber-500 animate-pulse' : 'bg-green-500'}`}
+                            aria-label={recentLogsQuery.isLoading ? 'Loading logs' : 'Connected and receiving logs'}
+                            role="status"
+                        />
+                        <span className="text-sm text-muted-foreground">
+                            {recentLogsQuery.isLoading ? 'Loading...' : `Auto-refreshing every ${POLLING_INTERVALS.LIVE_LOGS / 1000}s`}
+                        </span>
+                        <Button variant="ghost" size="sm" onClick={handleRefetch} disabled={recentLogsQuery.isLoading} data-testid="datahub-realtime-log-refresh-button" aria-label="Refresh real-time logs">
+                            <RefreshCw className={`w-4 h-4 ${recentLogsQuery.isLoading ? 'animate-spin' : ''}`} />
+                        </Button>
+                    </div>
+                </div>
+                <CardDescription>
+                    Latest log entries across all pipelines
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div className={`space-y-2 ${SCROLL_HEIGHTS.REALTIME_LOGS} overflow-y-auto`} role="list" aria-label="Real-time log entries">
+                    {logs.map((log) => (
+                        <div
+                            key={log.id}
+                            className="flex items-start gap-3 p-3 border rounded-lg hover:bg-muted/30"
+                            role="listitem"
+                        >
+                            <LogLevelBadge level={log.level} />
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                    <span className="font-mono text-xs text-muted-foreground">
+                                        {log.pipeline?.code ?? 'system'}
+                                    </span>
+                                    {log.stepKey && (
+                                        <>
+                                            <span className="text-muted-foreground">-&gt;</span>
+                                            <span className="font-mono text-xs text-muted-foreground">
+                                                {log.stepKey}
+                                            </span>
+                                        </>
+                                    )}
+                                    <span className="text-muted-foreground text-xs ml-auto">
+                                        {formatSmartDateTime(log.createdAt)}
+                                    </span>
+                                </div>
+                                <div className="text-sm">{log.message}</div>
+                                {(log.recordsProcessed != null || log.durationMs != null) && (
+                                    <div className="flex gap-3 mt-1 text-xs text-muted-foreground">
+                                        {log.durationMs != null && (
+                                            <span>{log.durationMs}ms</span>
+                                        )}
+                                        {log.recordsProcessed != null && (
+                                            <span>
+                                                {log.recordsProcessed} records
+                                                {log.recordsFailed > 0 && (
+                                                    <span className="text-red-600 ml-1">
+                                                        ({log.recordsFailed} failed)
+                                                    </span>
+                                                )}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                    {logs.length === 0 && (
+                        <div className="text-center py-8 text-muted-foreground">
+                            No recent logs. Pipeline activity will appear here.
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

package/dist/dashboard/routes/logs/index.ts

@@ -0,0 +1 @@
+export { logsPage } from './Logs';

package/dist/dashboard/routes/pipelines/ErrorAuditList.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Json } from '@vendure/dashboard';
+import { useErrorAudits } from '../../hooks';
+import { formatDateTime } from '../../utils';
+
+export function ErrorAuditList({ errorId }: { errorId: string }) {
+    const { data: audits } = useErrorAudits(errorId);
+
+    if (!audits?.length) return null;
+
+    return (
+        <div className="mt-2 border rounded p-2">
+            <div className="text-xs font-medium mb-1">Retry audit trail</div>
+            <div className="space-y-2">
+                {audits.map(a => (
+                    <div key={a.id} className="text-xs">
+                        <div className="text-muted-foreground">
+                            {formatDateTime(String(a.createdAt))} · user {a.userId ?? '—'}
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+                            <div>
+                                <div className="font-medium">Previous</div>
+                                <Json value={a.previousPayload} />
+                            </div>
+                            <div>
+                                <div className="font-medium">Patch</div>
+                                <Json value={a.patch} />
+                            </div>
+                            <div>
+                                <div className="font-medium">Resulting</div>
+                                <Json value={a.resultingPayload} />
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/dist/dashboard/routes/pipelines/ExportWizardPage.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import {
+    DashboardRouteDefinition,
+    Page,
+    PageTitle,
+    PermissionGuard,
+    api,
+} from '@vendure/dashboard';
+import { useNavigate } from '@tanstack/react-router';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { DATAHUB_PERMISSIONS, ROUTES, TOAST_WIZARD } from '../../constants';
+import { ExportWizard } from '../../components/wizards';
+import type { ExportConfiguration } from '../../components/wizards';
+import { createPipelineDocument, pipelineKeys, useAdapterCodeMappings, useAdaptersByType } from '../../hooks';
+import { useDestinationSchemas, useTriggerTypeSchemas } from '../../hooks/api/use-config-options';
+import { generatePipelineCode, exportConfigToPipelineDefinition } from '../../utils';
+import type { AdapterResolver } from '../../utils/wizard-to-pipeline';
+import { getErrorMessage } from '../../../shared';
+
+export const exportWizardPage: DashboardRouteDefinition = {
+    path: `${ROUTES.PIPELINES}/export-wizard`,
+    loader: () => ({
+        breadcrumb: [
+            { path: ROUTES.PIPELINES, label: 'Data Hub' },
+            'Export Wizard',
+        ],
+    }),
+    component: () => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.CREATE_PIPELINE]}>
+            <ExportWizardPageContent />
+        </PermissionGuard>
+    ),
+};
+
+function ExportWizardPageContent() {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const { mappings: exportMappings } = useAdapterCodeMappings('exportAdapterCodes');
+    const { mappings: feedMappings } = useAdapterCodeMappings('feedAdapterCodes');
+    const { data: exporterAdapters } = useAdaptersByType('EXPORTER');
+    const { data: feedAdapters } = useAdaptersByType('FEED');
+    const { schemas: destinationSchemas } = useDestinationSchemas();
+    const { schemas: triggerSchemas } = useTriggerTypeSchemas();
+
+    const resolver = React.useMemo<AdapterResolver>(() => ({
+        getLoaderAdapterCode: () => undefined,
+        getExportAdapterCode: (formatType) =>
+            exportMappings.find(m => m.value === formatType)?.adapterCode
+            ?? exporterAdapters?.find(a => a.formatType === formatType)?.code,
+        getFeedAdapterCode: (formatType) =>
+            feedMappings.find(m => m.value === formatType)?.adapterCode
+            ?? feedAdapters?.find(a => a.formatType === formatType)?.code,
+    }), [exportMappings, feedMappings, exporterAdapters, feedAdapters]);
+
+    const createMutation = useMutation({
+        mutationFn: (config: ExportConfiguration) => {
+            const definition = exportConfigToPipelineDefinition(config, resolver, triggerSchemas, destinationSchemas);
+            return api.mutate(createPipelineDocument, {
+                input: {
+                    code: generatePipelineCode(config.name),
+                    name: config.name,
+                    definition,
+                    enabled: false,
+                },
+            }).then(res => res.createDataHubPipeline);
+        },
+        onSuccess: async (data) => {
+            await queryClient.invalidateQueries({ queryKey: pipelineKeys.lists() });
+            toast.success(TOAST_WIZARD.EXPORT_CREATED);
+            void navigate({ to: `${ROUTES.PIPELINES}/${data.id}` });
+        },
+        onError: (err) => {
+            toast.error(TOAST_WIZARD.CREATE_FAILED, {
+                description: getErrorMessage(err),
+            });
+        },
+    });
+
+    const handleComplete = React.useCallback((config: ExportConfiguration) => {
+        createMutation.mutate(config);
+    }, [createMutation.mutate]);
+
+    const handleCancel = React.useCallback(() => {
+        void navigate({ to: ROUTES.PIPELINES });
+    }, [navigate]);
+
+    return (
+        <Page>
+            <PageTitle title="Export Wizard" />
+            <div className="p-6">
+                <ExportWizard onComplete={handleComplete} onCancel={handleCancel} isSubmitting={createMutation.isPending} />
+            </div>
+        </Page>
+    );
+}

package/dist/dashboard/routes/pipelines/ImportWizardPage.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import {
+    DashboardRouteDefinition,
+    Page,
+    PageTitle,
+    PermissionGuard,
+    api,
+} from '@vendure/dashboard';
+import { useNavigate } from '@tanstack/react-router';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { DATAHUB_PERMISSIONS, ROUTES, TOAST_WIZARD } from '../../constants';
+import { ImportWizard } from '../../components/wizards';
+import type { ImportConfiguration } from '../../components/wizards';
+import { createPipelineDocument, pipelineKeys, useAdapterCodeMappings, useAdaptersByType, useWizardStrategyMappings } from '../../hooks';
+import { useEntityLoaders } from '../../hooks/api/use-entity-loaders';
+import { useTriggerTypeSchemas } from '../../hooks/api/use-config-options';
+import { generatePipelineCode, importConfigToPipelineDefinition } from '../../utils';
+import type { AdapterResolver, LoaderAdapterInfo } from '../../utils/wizard-to-pipeline';
+import { getErrorMessage } from '../../../shared';
+
+export const importWizardPage: DashboardRouteDefinition = {
+    path: `${ROUTES.PIPELINES}/import-wizard`,
+    loader: () => ({
+        breadcrumb: [
+            { path: ROUTES.PIPELINES, label: 'Data Hub' },
+            'Import Wizard',
+        ],
+    }),
+    component: () => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.CREATE_PIPELINE]}>
+            <ImportWizardPageContent />
+        </PermissionGuard>
+    ),
+};
+
+function ImportWizardPageContent() {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const { getLoaderAdapterCode } = useEntityLoaders();
+    const { data: loaderAdapters } = useAdaptersByType('LOADER');
+    const { mappings: exportMappings } = useAdapterCodeMappings('exportAdapterCodes');
+    const { mappings: feedMappings } = useAdapterCodeMappings('feedAdapterCodes');
+    const { mappings: strategyMappings } = useWizardStrategyMappings();
+    const { schemas: triggerSchemas } = useTriggerTypeSchemas();
+
+    const resolver = React.useMemo<AdapterResolver>(() => ({
+        getLoaderAdapterCode,
+        getExportAdapterCode: (formatType) =>
+            exportMappings.find(m => m.value === formatType)?.adapterCode,
+        getFeedAdapterCode: (formatType) =>
+            feedMappings.find(m => m.value === formatType)?.adapterCode,
+    }), [getLoaderAdapterCode, exportMappings, feedMappings]);
+
+    const loaderAdapterInfos = React.useMemo<LoaderAdapterInfo[] | undefined>(
+        () => loaderAdapters?.map(a => ({
+            code: a.code,
+            entityType: a.entityType,
+            schema: a.schema ? { fields: a.schema.fields.map(f => ({ key: f.key })) } : undefined,
+        })),
+        [loaderAdapters],
+    );
+
+    const createMutation = useMutation({
+        mutationFn: (config: ImportConfiguration) => {
+            const definition = importConfigToPipelineDefinition(config, resolver, loaderAdapterInfos, triggerSchemas, strategyMappings);
+            return api.mutate(createPipelineDocument, {
+                input: {
+                    code: generatePipelineCode(config.name),
+                    name: config.name,
+                    definition,
+                    enabled: false,
+                },
+            }).then(res => res.createDataHubPipeline);
+        },
+        onSuccess: async (data) => {
+            await queryClient.invalidateQueries({ queryKey: pipelineKeys.lists() });
+            toast.success(TOAST_WIZARD.IMPORT_CREATED);
+            void navigate({ to: `${ROUTES.PIPELINES}/${data.id}` });
+        },
+        onError: (err) => {
+            toast.error(TOAST_WIZARD.CREATE_FAILED, {
+                description: getErrorMessage(err),
+            });
+        },
+    });
+
+    const handleComplete = React.useCallback((config: ImportConfiguration) => {
+        createMutation.mutate(config);
+    }, [createMutation.mutate]);
+
+    const handleCancel = React.useCallback(() => {
+        void navigate({ to: ROUTES.PIPELINES });
+    }, [navigate]);
+
+    return (
+        <Page>
+            <PageTitle title="Import Wizard" />
+            <div className="p-6">
+                <ImportWizard onComplete={handleComplete} onCancel={handleCancel} isSubmitting={createMutation.isPending} />
+            </div>
+        </Page>
+    );
+}