@oronts/vendure-data-hub-plugin 0.1.1 → 0.1.3

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Input } from '@vendure/dashboard';
+
+export function RetryPatchHelper({ onChange }: { onChange: (p: Record<string, unknown>) => void }) {
+    const [values, setValues] = React.useState<Record<string, unknown>>({});
+
+    const handleFieldChange = React.useCallback((key: string, value: string) => {
+        setValues(prev => {
+            const next = { ...prev, [key]: value };
+            onChange(next);
+            return next;
+        });
+    }, [onChange]);
+
+    const handleSlugChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFieldChange('slug', e.target.value);
+    }, [handleFieldChange]);
+
+    const handleSkuChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFieldChange('sku', e.target.value);
+    }, [handleFieldChange]);
+
+    const handleCodeChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFieldChange('code', e.target.value);
+    }, [handleFieldChange]);
+
+    const handleNameChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        handleFieldChange('name', e.target.value);
+    }, [handleFieldChange]);
+
+    return (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+            <div>
+                <label htmlFor="retry-slug" className="text-xs text-muted-foreground">slug</label>
+                <Input id="retry-slug" value={String(values.slug ?? '')} onChange={handleSlugChange} />
+            </div>
+            <div>
+                <label htmlFor="retry-sku" className="text-xs text-muted-foreground">sku</label>
+                <Input id="retry-sku" value={String(values.sku ?? '')} onChange={handleSkuChange} />
+            </div>
+            <div>
+                <label htmlFor="retry-code" className="text-xs text-muted-foreground">code</label>
+                <Input id="retry-code" value={String(values.code ?? '')} onChange={handleCodeChange} />
+            </div>
+            <div>
+                <label htmlFor="retry-name" className="text-xs text-muted-foreground">name</label>
+                <Input id="retry-name" value={String(values.name ?? '')} onChange={handleNameChange} />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    PermissionGuard,
+    Json,
+} from '@vendure/dashboard';
+import { Link } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { ScrollText } from 'lucide-react';
+import { formatDateTime } from '../../utils';
+import { DATAHUB_PERMISSIONS, RUN_STATUS, ROUTES, TOAST_PIPELINE } from '../../constants';
+import {
+    usePipelineRun,
+    useRunErrors,
+    useRetryError,
+    useApproveGate,
+    useRejectGate,
+    handleMutationError,
+} from '../../hooks';
+import { StepCounters } from './StepCounters';
+import { StepSummaryTable } from './StepSummaryTable';
+import { RunErrorsList } from './RunErrorsList';
+import type {
+    IndividualRunMetrics,
+    StepMetricsDetail,
+    RunDetailsPanelProps,
+} from '../../types';
+
+function findPausedGateStep(metrics: IndividualRunMetrics): string | undefined {
+    const details = metrics.details;
+    if (!Array.isArray(details)) return undefined;
+    const gateStep = details.find(
+        (d: StepMetricsDetail) => d.type === 'GATE' && (d as Record<string, unknown>).paused === true,
+    );
+    return gateStep?.stepKey;
+}
+
+export function RunDetailsPanel({ runId, initialData, onCancel, onRerun, isCancelling }: RunDetailsPanelProps) {
+    const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
+    const { data: runData, refetch, isFetching } = usePipelineRun(runId);
+    const { data: errors } = useRunErrors(runId);
+    const retryError = useRetryError();
+    const approveGate = useApproveGate();
+    const rejectGate = useRejectGate();
+
+    const run = runData;
+    const status = run?.status ?? initialData.status;
+    const metrics: IndividualRunMetrics = (run?.metrics as IndividualRunMetrics) ?? initialData.metrics ?? {};
+    const processed = Number(metrics.processed ?? 0);
+    const succeeded = Number(metrics.succeeded ?? 0);
+    const failed = Number(metrics.failed ?? 0);
+    const summary = `${processed} processed • ${succeeded} succeeded • ${failed} failed`;
+
+    const pausedGateStepKey = status === RUN_STATUS.PAUSED ? findPausedGateStep(metrics) : undefined;
+
+    const handleRetry = React.useCallback(async (errorId: string, patch: Record<string, unknown>) => {
+        try {
+            await retryError.mutateAsync({ errorId, patch });
+            toast.success(TOAST_PIPELINE.RECORD_RETRY_QUEUED);
+        } catch (err) {
+            handleMutationError('retry record', err);
+        }
+    }, [retryError.mutateAsync]);
+
+    const handleCancel = React.useCallback(() => {
+        setCancelDialogOpen(true);
+    }, []);
+
+    const handleConfirmCancel = React.useCallback(() => {
+        onCancel(run?.id ?? runId);
+        setCancelDialogOpen(false);
+    }, [onCancel, run?.id, runId]);
+
+    const handleRerun = React.useCallback(() => {
+        const pipelineId = run?.pipeline?.id;
+        if (pipelineId) {
+            onRerun(String(pipelineId));
+        }
+    }, [onRerun, run?.pipeline?.id]);
+
+    const handleApproveGate = React.useCallback(async () => {
+        if (!pausedGateStepKey) return;
+        try {
+            const result = await approveGate.mutateAsync({ runId: run?.id ?? runId, stepKey: pausedGateStepKey });
+            if (result?.success) {
+                toast.success(TOAST_PIPELINE.GATE_APPROVED);
+            } else {
+                toast.error(result?.message ?? TOAST_PIPELINE.GATE_APPROVE_ERROR);
+            }
+        } catch (err) {
+            handleMutationError('approve gate', err);
+        }
+    }, [approveGate.mutateAsync, run?.id, runId, pausedGateStepKey]);
+
+    const handleRejectGate = React.useCallback(async () => {
+        if (!pausedGateStepKey) return;
+        try {
+            const result = await rejectGate.mutateAsync({ runId: run?.id ?? runId, stepKey: pausedGateStepKey });
+            if (result?.success) {
+                toast.success(TOAST_PIPELINE.GATE_REJECTED);
+            } else {
+                toast.error(result?.message ?? TOAST_PIPELINE.GATE_REJECT_ERROR);
+            }
+        } catch (err) {
+            handleMutationError('reject gate', err);
+        }
+    }, [rejectGate.mutateAsync, run?.id, runId, pausedGateStepKey]);
+
+    return (
+        <div className="p-4 space-y-4" data-testid="datahub-run-details-panel">
+            <div className="flex items-center justify-between">
+                <div className="text-sm">Status: {status}</div>
+                <Button variant="ghost" size="sm" onClick={() => refetch()} disabled={isFetching} data-testid="datahub-run-details-refresh-button">
+                    Refresh
+                </Button>
+            </div>
+            <div className="text-sm text-muted-foreground">{summary}</div>
+            <div className="flex items-center justify-between">
+                <div className="text-xs text-muted-foreground">Started by: {run?.startedByUserId ?? '—'}</div>
+                <Button variant="outline" size="sm" className="gap-1.5" asChild>
+                    <Link to={`${ROUTES.LOGS}?runId=${runId}`} aria-label="View logs for this run">
+                        <ScrollText className="h-3.5 w-3.5" />
+                        View Logs
+                    </Link>
+                </Button>
+            </div>
+
+            {status === RUN_STATUS.PAUSED && pausedGateStepKey && (
+                <div className="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 p-3 space-y-2" data-testid="datahub-gate-approval-panel">
+                    <div className="text-sm font-medium text-amber-800 dark:text-amber-400">
+                        Gate step "{pausedGateStepKey}" is awaiting approval
+                    </div>
+                    <div className="flex gap-2">
+                        <PermissionGuard requires={[DATAHUB_PERMISSIONS.RUN_PIPELINE]}>
+                            <Button
+                                variant="default"
+                                size="sm"
+                                onClick={handleApproveGate}
+                                disabled={approveGate.isPending || rejectGate.isPending}
+                                data-testid="datahub-gate-approve-button"
+                            >
+                                {approveGate.isPending ? 'Approving...' : 'Approve & Resume'}
+                            </Button>
+                            <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={handleRejectGate}
+                                disabled={approveGate.isPending || rejectGate.isPending}
+                                data-testid="datahub-gate-reject-button"
+                            >
+                                {rejectGate.isPending ? 'Rejecting...' : 'Reject & Cancel'}
+                            </Button>
+                        </PermissionGuard>
+                    </div>
+                </div>
+            )}
+
+            <StepCounters metrics={metrics} />
+            <StepSummaryTable metrics={metrics} />
+
+            <div>
+                <div className="text-sm font-medium mb-1">Metrics</div>
+                <Json value={run?.metrics ?? initialData.metrics ?? {}} />
+            </div>
+            <div className="text-sm">
+                <div className="text-sm font-medium mb-1">Started</div>
+                <div>{formatDateTime(run?.startedAt ?? initialData.startedAt)}</div>
+            </div>
+            <div className="text-sm">
+                <div className="text-sm font-medium mb-1">Finished</div>
+                <div>{formatDateTime(run?.finishedAt ?? initialData.finishedAt)}</div>
+            </div>
+
+            {run?.error && (
+                <div className="text-sm">
+                    <div className="text-sm font-medium mb-1">Error</div>
+                    <pre className="bg-muted p-3 rounded text-xs overflow-auto">{String(run.error)}</pre>
+                </div>
+            )}
+
+            {(status === RUN_STATUS.RUNNING || status === RUN_STATUS.PENDING) && (
+                <Button variant="secondary" onClick={handleCancel} disabled={isCancelling} data-testid="datahub-run-details-cancel-button">
+                    Cancel run
+                </Button>
+            )}
+
+            {run?.pipeline?.id && (
+                <Button variant="outline" onClick={handleRerun} data-testid="datahub-run-details-rerun-button">
+                    Re-run
+                </Button>
+            )}
+
+            <div className="mt-4">
+                <div className="text-sm font-medium mb-1">Record errors</div>
+                <div className="text-sm text-muted-foreground mb-2">Failed records captured during this run</div>
+                <PermissionGuard requires={[DATAHUB_PERMISSIONS.VIEW_QUARANTINE]}>
+                    <RunErrorsList
+                        runId={runId}
+                        items={errors ?? []}
+                        onRetry={handleRetry}
+                    />
+                </PermissionGuard>
+            </div>
+
+            <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Cancel Pipeline Run</DialogTitle>
+                        <DialogDescription>
+                            This will request cancellation of the running pipeline. This action cannot be undone.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setCancelDialogOpen(false)}
+                        >
+                            Keep Running
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={handleConfirmCancel}
+                            disabled={isCancelling}
+                        >
+                            {isCancelling ? 'Cancelling...' : 'Cancel Run'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+}

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

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {
+    Button,
+    PermissionGuard,
+    Json,
+} from '@vendure/dashboard';
+import { toast } from 'sonner';
+import { DATAHUB_PERMISSIONS, TOAST_PIPELINE } from '../../constants';
+import { RetryPatchHelper } from './RetryPatchHelper';
+import { ErrorAuditList } from './ErrorAuditList';
+import type { RunErrorsListProps } from '../../types';
+
+interface ErrorRowProps {
+    item: { id: string; stepKey?: string | null; message?: string | null; payload?: unknown };
+    onStartEditing: (itemId: string) => void;
+}
+
+function ErrorRow({ item, onStartEditing }: ErrorRowProps) {
+    const handleClick = React.useCallback(() => {
+        onStartEditing(item.id);
+    }, [onStartEditing, item.id]);
+
+    return (
+        <tr className="border-t align-top">
+            <td className="px-2 py-1 font-mono text-muted-foreground">{item.stepKey}</td>
+            <td className="px-2 py-1">{item.message}</td>
+            <td className="px-2 py-1 align-top">
+                <Json value={item.payload} />
+                <ErrorAuditList errorId={item.id} />
+            </td>
+            <td className="px-2 py-1 align-top">
+                <PermissionGuard requires={[DATAHUB_PERMISSIONS.REPLAY_RECORD]}>
+                    <Button variant="outline" size="sm" onClick={handleClick} data-testid="datahub-error-retry-button">
+                        Retry with patch
+                    </Button>
+                </PermissionGuard>
+            </td>
+        </tr>
+    );
+}
+
+export function RunErrorsList({ runId: _runId, items, onRetry }: RunErrorsListProps) {
+    const [editing, setEditing] = React.useState<{ id: string; patch: string } | null>(null);
+
+    const handleStartEditing = React.useCallback((itemId: string) => {
+        setEditing({ id: itemId, patch: '{}' });
+    }, []);
+
+    const handlePatchChange = React.useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setEditing(prev => prev ? { ...prev, patch: e.target.value } : null);
+    }, []);
+
+    const handlePatchHelperChange = React.useCallback((p: Record<string, unknown>) => {
+        setEditing(prev => prev ? { ...prev, patch: JSON.stringify(p, null, 2) } : null);
+    }, []);
+
+    const handleRetryClick = React.useCallback(async () => {
+        if (!editing) return;
+        try {
+            const patch = JSON.parse(editing.patch);
+            await onRetry(editing.id, patch);
+            setEditing(null);
+        } catch {
+            toast.error(TOAST_PIPELINE.INVALID_JSON_PATCH);
+        }
+    }, [editing, onRetry]);
+
+    const handleCancelEditing = React.useCallback(() => {
+        setEditing(null);
+    }, []);
+
+    if (items.length === 0) {
+        return <div className="text-sm text-muted-foreground">No record errors</div>;
+    }
+
+    return (
+        <div className="space-y-2">
+            <table className="w-full text-sm">
+                <thead>
+                    <tr className="bg-muted">
+                        <th className="text-left px-2 py-1">Step</th>
+                        <th className="text-left px-2 py-1">Message</th>
+                        <th className="text-left px-2 py-1">Payload</th>
+                        <th className="text-left px-2 py-1">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {items.map(item => (
+                        <ErrorRow
+                            key={item.id}
+                            item={item}
+                            onStartEditing={handleStartEditing}
+                        />
+                    ))}
+                </tbody>
+            </table>
+            {editing && (
+                <div className="border rounded p-2 space-y-2">
+                    <div className="text-sm font-medium">Patch JSON</div>
+                    <textarea
+                        className="w-full h-32 font-mono p-2 border rounded"
+                        value={editing.patch}
+                        onChange={handlePatchChange}
+                    />
+                    <RetryPatchHelper onChange={handlePatchHelperChange} />
+                    <div className="flex items-center gap-2">
+                        <Button size="sm" onClick={handleRetryClick}>
+                            Retry
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={handleCancelEditing}>Cancel</Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { IndividualRunMetrics, StepMetricsDetail } from '../../types';
+
+export function StepCounters({ metrics }: { metrics: IndividualRunMetrics }) {
+    const details: StepMetricsDetail[] = Array.isArray(metrics?.details) ? metrics.details : [];
+    const countersObj = details.find(x => x && typeof x === 'object' && x.counters);
+    if (!countersObj?.counters) return null;
+
+    return (
+        <div className="mt-2">
+            <div className="text-sm font-medium mb-1">Counters</div>
+            <table className="text-sm">
+                <tbody>
+                    {Object.entries(countersObj.counters).map(([k, v]) => (
+                        <tr key={k}>
+                            <td className="pr-3 text-muted-foreground">{k}</td>
+                            <td>{String(v)}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { IndividualRunMetrics, StepMetricsDetail } from '../../types';
+
+export function StepSummaryTable({ metrics }: { metrics: IndividualRunMetrics }) {
+    const details: StepMetricsDetail[] = Array.isArray(metrics?.details) ? metrics.details : [];
+    if (!details.length) return null;
+
+    return (
+        <div className="mt-2">
+            <div className="text-sm font-medium mb-1">Step summary</div>
+            <table className="w-full text-sm">
+                <thead>
+                    <tr className="bg-muted">
+                        <th className="text-left px-2 py-1">Step</th>
+                        <th className="text-left px-2 py-1">Type</th>
+                        <th className="text-left px-2 py-1">Adapter</th>
+                        <th className="text-left px-2 py-1">Out/OK/Fail</th>
+                        <th className="text-left px-2 py-1">Duration</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {/* stepKey is unique within a run, safe to use as key */}
+                    {details.map((s) => (
+                        <tr key={s.stepKey} className="border-t">
+                            <td className="px-2 py-1 font-mono text-muted-foreground">{s.stepKey}</td>
+                            <td className="px-2 py-1">{s.type}</td>
+                            <td className="px-2 py-1">{s.adapterCode ?? '—'}</td>
+                            <td className="px-2 py-1">{s.ok ?? 0}{typeof s.fail === 'number' ? ` / ${s.fail}` : ''}</td>
+                            <td className="px-2 py-1">{typeof s.durationMs === 'number' ? `${s.durationMs} ms` : '—'}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}