feat(outbox): UI fuer Event-Outbox — Modul 9/16 des UI-Backlogs
This commit is contained in:
Agent Zero
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* Outbox page tests — transactional outbox monitoring UI (admin).
|
||||
*
|
||||
* Covers: admin gate, stats cards, DLQ list with replay single/all,
|
||||
* maintenance modals (recover-stuck, cleanup-published), consumer registry.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { OutboxPage } from '@/pages/Outbox';
|
||||
import type { OutboxStats, FailedOutboxEvent, FailedEventsResponse } from '@/api/outbox';
|
||||
|
||||
const replayMut = vi.fn().mockResolvedValue({ replayed: true });
|
||||
const replayAllMut = vi.fn().mockResolvedValue({ replayed_count: 2 });
|
||||
const recoverMut = vi.fn().mockResolvedValue({ recovered_count: 1 });
|
||||
const cleanupMut = vi.fn().mockResolvedValue({ deleted_count: 3 });
|
||||
|
||||
const makeEvent = (overrides: Partial<FailedOutboxEvent> = {}): FailedOutboxEvent => ({
|
||||
id: '11111111-1111-1111-1111-111111111111',
|
||||
tenant_id: 't-1',
|
||||
event_name: 'contact.created',
|
||||
error_message: 'handler crashed',
|
||||
failed_at: '2026-09-13T10:00:00Z',
|
||||
attempts: 3,
|
||||
created_at: '2026-09-13T09:00:00Z',
|
||||
status: 'failed',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
let mockStats: OutboxStats | null = {
|
||||
counts: { pending: 2, processing: 0, published: 40, failed: 1, no_handlers: 0 },
|
||||
total: 43,
|
||||
oldest_pending_age_seconds: 90,
|
||||
};
|
||||
let mockEvents: FailedOutboxEvent[] = [];
|
||||
let mockRegistry: Record<string, string[]> = {};
|
||||
let mockIsAdmin = true;
|
||||
|
||||
vi.mock('@/api/outbox', () => ({
|
||||
useOutboxStats: () => ({
|
||||
data: mockStats,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(),
|
||||
}),
|
||||
useOutboxFailedEvents: () => ({
|
||||
data: { events: mockEvents, limit: 20, offset: 0, count: mockEvents.length } as FailedEventsResponse,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(),
|
||||
}),
|
||||
useOutboxConsumerRegistry: () => ({
|
||||
data: { registry: mockRegistry },
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(),
|
||||
}),
|
||||
useReplayFailedEvent: () => ({ mutate: replayMut, isPending: false }),
|
||||
useReplayAllFailedEvents: () => ({ mutate: replayAllMut, isPending: false }),
|
||||
useRecoverStuckEvents: () => ({ mutate: recoverMut, isPending: false }),
|
||||
useCleanupPublishedEvents: () => ({ mutate: cleanupMut, isPending: false }),
|
||||
}));
|
||||
|
||||
vi.mock('@/store/authStore', () => ({
|
||||
useAuthStore: (selector: (state: { user: { is_system_admin: boolean } | null }) => unknown) =>
|
||||
selector({ user: { is_system_admin: mockIsAdmin } }),
|
||||
}));
|
||||
|
||||
function renderPage() {
|
||||
return render(
|
||||
<MemoryRouter>
|
||||
<OutboxPage />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockStats = {
|
||||
counts: { pending: 2, processing: 0, published: 40, failed: 1, no_handlers: 0 },
|
||||
total: 43,
|
||||
oldest_pending_age_seconds: 90,
|
||||
};
|
||||
mockEvents = [];
|
||||
mockRegistry = {};
|
||||
mockIsAdmin = true;
|
||||
});
|
||||
|
||||
describe('OutboxPage', () => {
|
||||
it('renders page title and stats cards', () => {
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-page')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-pending')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-processing')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-published')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-failed')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-no_handlers')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-total')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-stat-total')).toHaveTextContent('43');
|
||||
});
|
||||
|
||||
it('renders oldest pending age when present', () => {
|
||||
renderPage();
|
||||
// formatAge(90) → '2min' (90 seconds rounds to minutes)
|
||||
expect(screen.getByTestId('outbox-oldest-pending')).toHaveTextContent('2min');
|
||||
});
|
||||
|
||||
it('shows admin gate for non-admin users', () => {
|
||||
mockIsAdmin = false;
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-admin-only')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('outbox-page')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty DLQ state when no failed events', () => {
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-dlq-empty')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders failed event cards with error message', () => {
|
||||
mockEvents = [makeEvent()];
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-event-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('outbox-error-11111111-1111-1111-1111-111111111111')).toHaveTextContent(
|
||||
'handler crashed',
|
||||
);
|
||||
expect(screen.getByText('contact.created')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('replays a single failed event on button click', async () => {
|
||||
mockEvents = [makeEvent()];
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('outbox-replay-11111111-1111-1111-1111-111111111111'));
|
||||
await waitFor(() => expect(replayMut).toHaveBeenCalledWith('11111111-1111-1111-1111-111111111111'));
|
||||
});
|
||||
|
||||
it('replays all failed events via replay-all button', async () => {
|
||||
mockEvents = [makeEvent(), makeEvent({ id: '22222222-2222-2222-2222-222222222222' })];
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('outbox-replay-all'));
|
||||
await waitFor(() => expect(replayAllMut).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('opens recover-stuck modal, adjusts timeout and confirms', async () => {
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('outbox-recover-stuck'));
|
||||
const input = screen.getByTestId('outbox-timeout-input');
|
||||
expect(input).toBeInTheDocument();
|
||||
fireEvent.change(input, { target: { value: '300' } });
|
||||
fireEvent.click(screen.getByTestId('outbox-maintenance-confirm'));
|
||||
await waitFor(() => expect(recoverMut).toHaveBeenCalledWith(300, expect.anything()));
|
||||
});
|
||||
|
||||
it('opens cleanup-published modal, adjusts retention and confirms', async () => {
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('outbox-cleanup-published'));
|
||||
const input = screen.getByTestId('outbox-retention-input');
|
||||
expect(input).toBeInTheDocument();
|
||||
fireEvent.change(input, { target: { value: '14' } });
|
||||
fireEvent.click(screen.getByTestId('outbox-maintenance-confirm'));
|
||||
await waitFor(() => expect(cleanupMut).toHaveBeenCalledWith(14, expect.anything()));
|
||||
});
|
||||
|
||||
it('renders consumer registry entries with handlers', () => {
|
||||
mockRegistry = { 'contact.created': ['audit_log_handler', 'search_index_handler'] };
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-registry-contact.created')).toBeInTheDocument();
|
||||
expect(screen.getByText('audit_log_handler')).toBeInTheDocument();
|
||||
expect(screen.getByText('search_index_handler')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty registry state when no handlers registered', () => {
|
||||
renderPage();
|
||||
expect(screen.getByTestId('outbox-registry-empty')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Outbox API client — transactional outbox monitoring & management.
|
||||
*
|
||||
* Backend: /api/v1/outbox (stats, failed, replay, replay-all,
|
||||
* consumer-registry, recover-stuck, cleanup-published).
|
||||
* All endpoints require the admin role (require_admin, enforced server-side).
|
||||
*/
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { apiGet, apiPost } from '@/api/client';
|
||||
|
||||
export interface OutboxStats {
|
||||
/** Count per status: pending, processing, published, failed, no_handlers. */
|
||||
counts: Record<string, number>;
|
||||
total: number;
|
||||
oldest_pending_age_seconds: number | null;
|
||||
}
|
||||
|
||||
export interface FailedOutboxEvent {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
event_name: string;
|
||||
error_message: string | null;
|
||||
failed_at: string | null;
|
||||
attempts: number;
|
||||
created_at: string | null;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface FailedEventsResponse {
|
||||
events: FailedOutboxEvent[];
|
||||
limit: number;
|
||||
offset: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface ConsumerRegistryResponse {
|
||||
registry: Record<string, string[]>;
|
||||
}
|
||||
|
||||
export interface ReplaySingleResponse {
|
||||
replayed: boolean;
|
||||
event_id: string;
|
||||
}
|
||||
|
||||
export interface ReplayAllResponse {
|
||||
replayed_count: number;
|
||||
tenant_id: string;
|
||||
}
|
||||
|
||||
export interface RecoverStuckResponse {
|
||||
recovered_count: number;
|
||||
timeout_seconds: number;
|
||||
}
|
||||
|
||||
export interface CleanupPublishedResponse {
|
||||
deleted_count: number;
|
||||
retention_days: number;
|
||||
}
|
||||
|
||||
// ─── Query hooks ─────────────────────────────────────────────
|
||||
|
||||
export function useOutboxStats(enabled = true) {
|
||||
return useQuery<OutboxStats>({
|
||||
queryKey: ['outbox', 'stats'],
|
||||
queryFn: () => apiGet<OutboxStats>('/outbox/stats'),
|
||||
enabled,
|
||||
});
|
||||
}
|
||||
|
||||
export function useOutboxFailedEvents(limit: number, offset: number, enabled = true) {
|
||||
return useQuery<FailedEventsResponse>({
|
||||
queryKey: ['outbox', 'failed', limit, offset],
|
||||
queryFn: () =>
|
||||
apiGet<FailedEventsResponse>(`/outbox/failed?limit=${limit}&offset=${offset}`),
|
||||
enabled,
|
||||
});
|
||||
}
|
||||
|
||||
export function useOutboxConsumerRegistry(enabled = true) {
|
||||
return useQuery<ConsumerRegistryResponse>({
|
||||
queryKey: ['outbox', 'consumer-registry'],
|
||||
queryFn: () => apiGet<ConsumerRegistryResponse>('/outbox/consumer-registry'),
|
||||
enabled,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Mutation hooks ──────────────────────────────────────────
|
||||
|
||||
export function useReplayFailedEvent() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<ReplaySingleResponse, Error, string>({
|
||||
mutationFn: (eventId) => apiPost<ReplaySingleResponse>(`/outbox/replay/${eventId}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['outbox'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useReplayAllFailedEvents() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<ReplayAllResponse, Error, void>({
|
||||
mutationFn: () => apiPost<ReplayAllResponse>('/outbox/replay-all'),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['outbox'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRecoverStuckEvents() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<RecoverStuckResponse, Error, number>({
|
||||
mutationFn: (timeoutSeconds) =>
|
||||
apiPost<RecoverStuckResponse>(`/outbox/recover-stuck?timeout_seconds=${timeoutSeconds}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['outbox'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useCleanupPublishedEvents() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<CleanupPublishedResponse, Error, number>({
|
||||
mutationFn: (retentionDays) =>
|
||||
apiPost<CleanupPublishedResponse>(`/outbox/cleanup-published?retention_days=${retentionDays}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['outbox'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -58,6 +58,7 @@ const singleItems: NavSingleItem[] = [
|
||||
{ to: '/system-dashboard', labelKey: 'nav.systemDashboard', icon: <Activity className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 90 },
|
||||
{ to: '/approvals', labelKey: 'nav.approvals', icon: <CheckCircle2 className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 91 },
|
||||
{ to: '/delegations', labelKey: 'nav.delegations', icon: <ArrowRightLeft className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 92 },
|
||||
{ to: '/outbox', labelKey: 'nav.outbox', icon: <Inbox className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 93 },
|
||||
];
|
||||
|
||||
const bottomItems: NavSingleItem[] = [];
|
||||
@@ -84,9 +85,9 @@ export function Sidebar() {
|
||||
|
||||
const allMenuItems = useMemo(() => {
|
||||
const staticItems = singleItems
|
||||
// Backend enforces require_admin on system dashboard routes — hide the
|
||||
// nav entry from non-admin users instead of showing a dead link.
|
||||
.filter(item => item.to !== '/system-dashboard' || user?.is_system_admin)
|
||||
// Backend enforces require_admin on system dashboard and outbox routes —
|
||||
// hide the nav entries from non-admin users instead of showing a dead link.
|
||||
.filter(item => (item.to !== '/system-dashboard' && item.to !== '/outbox') || user?.is_system_admin)
|
||||
.map(item => ({
|
||||
path: item.to,
|
||||
labelKey: item.labelKey,
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"systemDashboard": "System Dashboard",
|
||||
"approvals": "Freigaben",
|
||||
"delegations": "Delegationen",
|
||||
"outbox": "Outbox",
|
||||
"marketplace": "Marketplace",
|
||||
"skills": "Skills",
|
||||
"agentMemory": "Agent Memory"
|
||||
@@ -1663,6 +1664,38 @@
|
||||
"empty": "Keine Delegationen in dieser Ansicht.",
|
||||
"loadError": "Delegationen konnten nicht geladen werden."
|
||||
},
|
||||
"outbox": {
|
||||
"title": "Event-Outbox",
|
||||
"refresh": "Aktualisieren",
|
||||
"adminOnly": "Administrator-Zugriff erforderlich",
|
||||
"loadError": "Outbox-Daten konnten nicht geladen werden.",
|
||||
"status_pending": "Offen",
|
||||
"status_processing": "In Verarbeitung",
|
||||
"status_published": "Veröffentlicht",
|
||||
"status_failed": "Fehlgeschlagen",
|
||||
"status_no_handlers": "Ohne Handler",
|
||||
"statusFailed": "Fehlgeschlagen",
|
||||
"total": "Gesamt",
|
||||
"oldestPending": "Ältestes offenes Event",
|
||||
"dlqTitle": "Fehlgeschlagene Events",
|
||||
"dlqEmpty": "Keine fehlgeschlagenen Events. Alles verarbeitet.",
|
||||
"replay": "Erneut senden",
|
||||
"replayAll": "Alle erneut senden",
|
||||
"attempts": "Versuche",
|
||||
"createdAt": "Erstellt",
|
||||
"failedAt": "Fehlgeschlagen",
|
||||
"prev": "Zurück",
|
||||
"next": "Weiter",
|
||||
"maintenanceTitle": "Wartung",
|
||||
"recoverStuck": "Hängende Events zurücksetzen",
|
||||
"recoverStuckHelp": "Setzt Events im Status 'In Verarbeitung', die länger als der Timeout feststecken, auf 'Offen' zurück.",
|
||||
"timeoutSeconds": "Timeout (Sekunden)",
|
||||
"cleanupPublished": "Veröffentlichte Events aufräumen",
|
||||
"cleanupPublishedHelp": "Löscht veröffentlichte Events, die älter als die angegebene Aufbewahrungszeit sind.",
|
||||
"retentionDays": "Aufbewahrung (Tage)",
|
||||
"registryTitle": "Registrierte Handler",
|
||||
"registryEmpty": "Keine Event-Handler registriert."
|
||||
},
|
||||
"apiTokens": {
|
||||
"title": "API-Tokens",
|
||||
"create": "Token erstellen",
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
"systemDashboard": "System Dashboard",
|
||||
"approvals": "Approvals",
|
||||
"delegations": "Delegations",
|
||||
"outbox": "Outbox",
|
||||
"marketplace": "Marketplace",
|
||||
"skills": "Skills",
|
||||
"agentMemory": "Agent Memory"
|
||||
@@ -1663,6 +1664,38 @@
|
||||
"empty": "No delegations in this view.",
|
||||
"loadError": "Failed to load delegations."
|
||||
},
|
||||
"outbox": {
|
||||
"title": "Event Outbox",
|
||||
"refresh": "Refresh",
|
||||
"adminOnly": "Administrator access required",
|
||||
"loadError": "Failed to load outbox data.",
|
||||
"status_pending": "Pending",
|
||||
"status_processing": "Processing",
|
||||
"status_published": "Published",
|
||||
"status_failed": "Failed",
|
||||
"status_no_handlers": "No handlers",
|
||||
"statusFailed": "Failed",
|
||||
"total": "Total",
|
||||
"oldestPending": "Oldest pending event",
|
||||
"dlqTitle": "Failed events",
|
||||
"dlqEmpty": "No failed events. Everything processed.",
|
||||
"replay": "Replay",
|
||||
"replayAll": "Replay all",
|
||||
"attempts": "Attempts",
|
||||
"createdAt": "Created",
|
||||
"failedAt": "Failed at",
|
||||
"prev": "Previous",
|
||||
"next": "Next",
|
||||
"maintenanceTitle": "Maintenance",
|
||||
"recoverStuck": "Recover stuck events",
|
||||
"recoverStuckHelp": "Resets events stuck in 'processing' longer than the timeout back to 'pending'.",
|
||||
"timeoutSeconds": "Timeout (seconds)",
|
||||
"cleanupPublished": "Cleanup published events",
|
||||
"cleanupPublishedHelp": "Deletes published events older than the specified retention period.",
|
||||
"retentionDays": "Retention (days)",
|
||||
"registryTitle": "Registered handlers",
|
||||
"registryEmpty": "No event handlers registered."
|
||||
},
|
||||
"apiTokens": {
|
||||
"title": "API Tokens",
|
||||
"create": "Create token",
|
||||
|
||||
@@ -0,0 +1,481 @@
|
||||
/**
|
||||
* Outbox page — transactional outbox monitoring & management (admin).
|
||||
*
|
||||
* Backend: /api/v1/outbox, all endpoints require the admin role.
|
||||
*
|
||||
* Features:
|
||||
* - Stats cards: pending / processing / published / failed / no_handlers,
|
||||
* total events, oldest pending age
|
||||
* - DLQ: failed events list with error details, replay single / replay all
|
||||
* - Consumer registry: event name → registered handlers
|
||||
* - Maintenance: recover stuck processing events, cleanup published events
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Inbox,
|
||||
Lock,
|
||||
RefreshCw,
|
||||
RotateCcw,
|
||||
Server,
|
||||
Trash2,
|
||||
Wrench,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
useOutboxStats,
|
||||
useOutboxFailedEvents,
|
||||
useOutboxConsumerRegistry,
|
||||
useReplayFailedEvent,
|
||||
useReplayAllFailedEvents,
|
||||
useRecoverStuckEvents,
|
||||
useCleanupPublishedEvents,
|
||||
type FailedOutboxEvent,
|
||||
} from '@/api/outbox';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
const STATUS_ORDER = ['pending', 'processing', 'published', 'failed', 'no_handlers'] as const;
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
pending: 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-300',
|
||||
processing: 'bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-300',
|
||||
published: 'bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-300',
|
||||
failed: 'bg-danger-100 text-danger-800 dark:bg-danger-900/30 dark:text-danger-300',
|
||||
no_handlers: 'bg-secondary-200 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300',
|
||||
};
|
||||
|
||||
function formatDateTime(iso: string | null): string {
|
||||
if (!iso) return '—';
|
||||
try {
|
||||
return new Date(iso).toLocaleString();
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
function formatAge(seconds: number): string {
|
||||
if (seconds < 60) return `${Math.round(seconds)}s`;
|
||||
if (seconds < 3600) return `${Math.round(seconds / 60)}min`;
|
||||
if (seconds < 86400) return `${Math.round(seconds / 3600)}h`;
|
||||
return `${Math.round(seconds / 86400)}d`;
|
||||
}
|
||||
|
||||
function FailedEventCard({
|
||||
event,
|
||||
isReplaying,
|
||||
onReplay,
|
||||
}: {
|
||||
event: FailedOutboxEvent;
|
||||
isReplaying: boolean;
|
||||
onReplay: (id: string) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card className="p-4 space-y-2" data-testid={`outbox-event-${event.id}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
STATUS_BADGE.failed,
|
||||
)}
|
||||
>
|
||||
{t('outbox.statusFailed')}
|
||||
</span>
|
||||
<span className="text-xs text-secondary-500">{t('outbox.attempts')}: {event.attempts}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm font-medium text-secondary-900 dark:text-secondary-100 break-words font-mono">
|
||||
{event.event_name}
|
||||
</p>
|
||||
<p className="text-xs text-secondary-400 mt-1" title={event.id}>
|
||||
<span className="font-mono">{event.id.slice(0, 8)}…</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => onReplay(event.id)}
|
||||
disabled={isReplaying}
|
||||
data-testid={`outbox-replay-${event.id}`}
|
||||
aria-label={t('outbox.replay')}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" aria-hidden="true" />
|
||||
{t('outbox.replay')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{event.error_message && (
|
||||
<p
|
||||
className="text-xs text-danger-600 dark:text-danger-400 bg-danger-50 dark:bg-danger-900/20 rounded-md px-3 py-2 break-words"
|
||||
data-testid={`outbox-error-${event.id}`}
|
||||
>
|
||||
{event.error_message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-secondary-400 border-t border-secondary-200 dark:border-secondary-700 pt-2">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" aria-hidden="true" />
|
||||
{t('outbox.createdAt')}: {formatDateTime(event.created_at)}
|
||||
</span>
|
||||
{event.failed_at && (
|
||||
<span>
|
||||
{t('outbox.failedAt')}: {formatDateTime(event.failed_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function OutboxPage() {
|
||||
const { t } = useTranslation();
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const isAdmin = user?.is_system_admin === true;
|
||||
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [maintenance, setMaintenance] = useState<'recover' | 'cleanup' | null>(null);
|
||||
const [timeoutSeconds, setTimeoutSeconds] = useState(120);
|
||||
const [retentionDays, setRetentionDays] = useState(30);
|
||||
|
||||
const statsQuery = useOutboxStats(isAdmin);
|
||||
const failedQuery = useOutboxFailedEvents(PAGE_SIZE, offset, isAdmin);
|
||||
const registryQuery = useOutboxConsumerRegistry(isAdmin);
|
||||
|
||||
const replayMut = useReplayFailedEvent();
|
||||
const replayAllMut = useReplayAllFailedEvents();
|
||||
const recoverMut = useRecoverStuckEvents();
|
||||
const cleanupMut = useCleanupPublishedEvents();
|
||||
|
||||
const stats = statsQuery.data;
|
||||
const events = failedQuery.data?.events ?? [];
|
||||
const registry = registryQuery.data?.registry ?? {};
|
||||
const registryEntries = Object.entries(registry).sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
const isMutating =
|
||||
replayMut.isPending || replayAllMut.isPending || recoverMut.isPending || cleanupMut.isPending;
|
||||
|
||||
const handleMaintenance = () => {
|
||||
if (maintenance === 'recover') {
|
||||
recoverMut.mutate(timeoutSeconds, { onSuccess: () => setMaintenance(null) });
|
||||
} else if (maintenance === 'cleanup') {
|
||||
cleanupMut.mutate(retentionDays, { onSuccess: () => setMaintenance(null) });
|
||||
}
|
||||
};
|
||||
|
||||
// Admin-only guard — backend enforces require_admin on all outbox endpoints.
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[50vh]" role="alert">
|
||||
<div className="text-center">
|
||||
<Lock className="w-10 h-10 mx-auto text-secondary-400" aria-hidden="true" />
|
||||
<p className="mt-3 text-sm text-secondary-600" data-testid="outbox-admin-only">
|
||||
{t('outbox.adminOnly')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 max-w-4xl mx-auto" data-testid="outbox-page">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h1 className="text-xl font-semibold text-secondary-900 dark:text-secondary-100">
|
||||
{t('outbox.title')}
|
||||
</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
statsQuery.refetch();
|
||||
failedQuery.refetch();
|
||||
registryQuery.refetch();
|
||||
}}
|
||||
disabled={statsQuery.isFetching || failedQuery.isFetching}
|
||||
aria-label={t('outbox.refresh')}
|
||||
data-testid="outbox-refresh"
|
||||
>
|
||||
<RefreshCw
|
||||
className={clsx('w-4 h-4', (statsQuery.isFetching || failedQuery.isFetching) && 'animate-spin')}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats cards */}
|
||||
{statsQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
|
||||
</div>
|
||||
) : statsQuery.isError ? (
|
||||
<Card className="p-8 text-center">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
|
||||
<p className="mt-2 text-sm text-secondary-600" data-testid="outbox-stats-error">
|
||||
{t('outbox.loadError')}
|
||||
</p>
|
||||
</Card>
|
||||
) : stats ? (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
{STATUS_ORDER.map((status) => (
|
||||
<Card key={status} className="p-3 text-center" data-testid={`outbox-stat-${status}`}>
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mb-2',
|
||||
STATUS_BADGE[status],
|
||||
)}
|
||||
>
|
||||
{t(`outbox.status_${status}`)}
|
||||
</span>
|
||||
<p className="text-2xl font-semibold text-secondary-900 dark:text-secondary-100">
|
||||
{stats.counts[status] ?? 0}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
<Card className="p-3 text-center" data-testid="outbox-stat-total">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mb-2 bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
{t('outbox.total')}
|
||||
</span>
|
||||
<p className="text-2xl font-semibold text-secondary-900 dark:text-secondary-100">{stats.total}</p>
|
||||
</Card>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{stats && stats.oldest_pending_age_seconds != null && (
|
||||
<p className="text-xs text-secondary-500" data-testid="outbox-oldest-pending">
|
||||
<Clock className="w-3 h-3 inline mr-1" aria-hidden="true" />
|
||||
{t('outbox.oldestPending')}: {formatAge(stats.oldest_pending_age_seconds)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* DLQ — failed events */}
|
||||
<section aria-labelledby="outbox-dlq-heading">
|
||||
<div className="flex items-center justify-between gap-3 mb-2">
|
||||
<h2
|
||||
id="outbox-dlq-heading"
|
||||
className="text-base font-semibold text-secondary-900 dark:text-secondary-100"
|
||||
>
|
||||
{t('outbox.dlqTitle')}
|
||||
{stats?.counts.failed != null && stats.counts.failed > 0 && (
|
||||
<span className="ml-2 text-xs font-normal text-danger-600 dark:text-danger-400">
|
||||
{stats.counts.failed}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
{events.length > 0 && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => replayAllMut.mutate()}
|
||||
disabled={isMutating}
|
||||
data-testid="outbox-replay-all"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" aria-hidden="true" />
|
||||
{t('outbox.replayAll')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{failedQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
|
||||
</div>
|
||||
) : failedQuery.isError ? (
|
||||
<Card className="p-8 text-center">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
|
||||
<p className="mt-2 text-sm text-secondary-600">{t('outbox.loadError')}</p>
|
||||
</Card>
|
||||
) : events.length === 0 ? (
|
||||
<Card className="p-10 text-center">
|
||||
<Inbox className="w-10 h-10 mx-auto text-secondary-300" aria-hidden="true" />
|
||||
<p className="mt-3 text-sm text-secondary-500" data-testid="outbox-dlq-empty">
|
||||
{t('outbox.dlqEmpty')}
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<FailedEventCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
isReplaying={replayMut.isPending}
|
||||
onReplay={(id) => replayMut.mutate(id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{events.length === PAGE_SIZE && (
|
||||
<div className="flex justify-center gap-2 mt-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
|
||||
disabled={offset === 0 || failedQuery.isFetching}
|
||||
>
|
||||
{t('outbox.prev')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setOffset(offset + PAGE_SIZE)}
|
||||
disabled={events.length < PAGE_SIZE || failedQuery.isFetching}
|
||||
data-testid="outbox-next-page"
|
||||
>
|
||||
{t('outbox.next')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Maintenance actions */}
|
||||
<section aria-labelledby="outbox-maintenance-heading">
|
||||
<h2
|
||||
id="outbox-maintenance-heading"
|
||||
className="text-base font-semibold text-secondary-900 dark:text-secondary-100 mb-2"
|
||||
>
|
||||
{t('outbox.maintenanceTitle')}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setMaintenance('recover')}
|
||||
disabled={isMutating}
|
||||
data-testid="outbox-recover-stuck"
|
||||
>
|
||||
<Wrench className="w-4 h-4" aria-hidden="true" />
|
||||
{t('outbox.recoverStuck')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setMaintenance('cleanup')}
|
||||
disabled={isMutating}
|
||||
data-testid="outbox-cleanup-published"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" aria-hidden="true" />
|
||||
{t('outbox.cleanupPublished')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Consumer registry */}
|
||||
<section aria-labelledby="outbox-registry-heading">
|
||||
<h2
|
||||
id="outbox-registry-heading"
|
||||
className="text-base font-semibold text-secondary-900 dark:text-secondary-100 mb-2"
|
||||
>
|
||||
{t('outbox.registryTitle')} ({registryEntries.length})
|
||||
</h2>
|
||||
{registryQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<RefreshCw className="w-6 h-6 animate-spin text-secondary-400" aria-hidden="true" />
|
||||
</div>
|
||||
) : registryQuery.isError ? (
|
||||
<Card className="p-8 text-center">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto text-danger-500" aria-hidden="true" />
|
||||
<p className="mt-2 text-sm text-secondary-600">{t('outbox.loadError')}</p>
|
||||
</Card>
|
||||
) : registryEntries.length === 0 ? (
|
||||
<Card className="p-10 text-center">
|
||||
<Server className="w-10 h-10 mx-auto text-secondary-300" aria-hidden="true" />
|
||||
<p className="mt-3 text-sm text-secondary-500" data-testid="outbox-registry-empty">
|
||||
{t('outbox.registryEmpty')}
|
||||
</p>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{registryEntries.map(([eventName, handlers]) => (
|
||||
<Card key={eventName} className="p-3" data-testid={`outbox-registry-${eventName}`}>
|
||||
<p className="text-sm font-medium text-secondary-900 dark:text-secondary-100 font-mono break-all">
|
||||
{eventName}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{handlers.map((handler) => (
|
||||
<span
|
||||
key={handler}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-secondary-100 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300 font-mono break-all"
|
||||
>
|
||||
{handler}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Maintenance modal */}
|
||||
<Modal
|
||||
open={maintenance !== null}
|
||||
onClose={() => setMaintenance(null)}
|
||||
title={maintenance === 'recover' ? t('outbox.recoverStuck') : t('outbox.cleanupPublished')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{maintenance === 'recover' ? (
|
||||
<>
|
||||
<label
|
||||
htmlFor="outbox-timeout-input"
|
||||
className="block text-sm font-medium text-secondary-700 dark:text-secondary-300"
|
||||
>
|
||||
{t('outbox.timeoutSeconds')}
|
||||
</label>
|
||||
<input
|
||||
id="outbox-timeout-input"
|
||||
type="number"
|
||||
min={10}
|
||||
max={3600}
|
||||
value={timeoutSeconds}
|
||||
onChange={(e) => setTimeoutSeconds(Number(e.target.value))}
|
||||
className="w-full rounded-md border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-secondary-800 px-3 py-2 text-sm"
|
||||
data-testid="outbox-timeout-input"
|
||||
/>
|
||||
<p className="text-xs text-secondary-500">{t('outbox.recoverStuckHelp')}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label
|
||||
htmlFor="outbox-retention-input"
|
||||
className="block text-sm font-medium text-secondary-700 dark:text-secondary-300"
|
||||
>
|
||||
{t('outbox.retentionDays')}
|
||||
</label>
|
||||
<input
|
||||
id="outbox-retention-input"
|
||||
type="number"
|
||||
min={1}
|
||||
max={365}
|
||||
value={retentionDays}
|
||||
onChange={(e) => setRetentionDays(Number(e.target.value))}
|
||||
className="w-full rounded-md border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-secondary-800 px-3 py-2 text-sm"
|
||||
data-testid="outbox-retention-input"
|
||||
/>
|
||||
<p className="text-xs text-secondary-500">{t('outbox.cleanupPublishedHelp')}</p>
|
||||
</>
|
||||
)}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={() => setMaintenance(null)}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleMaintenance} disabled={isMutating} data-testid="outbox-maintenance-confirm">
|
||||
{t('common.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -45,6 +45,7 @@ const CustomFieldsPage = React.lazy(() => import('@/pages/CustomFields').then(m
|
||||
const ActivityTimelinePage = React.lazy(() => import('@/pages/ActivityTimeline').then(m => ({ default: m.ActivityTimelinePage })));
|
||||
const ApprovalsPage = React.lazy(() => import('@/pages/Approvals').then(m => ({ default: m.ApprovalsPage })));
|
||||
const DelegationsPage = React.lazy(() => import('@/pages/Delegations').then(m => ({ default: m.DelegationsPage })));
|
||||
const OutboxPage = React.lazy(() => import('@/pages/Outbox').then(m => ({ default: m.OutboxPage })));
|
||||
const ApiTokensPage = React.lazy(() => import('@/pages/ApiTokens').then(m => ({ default: m.ApiTokensPage })));
|
||||
const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ default: m.TenantsPage })));
|
||||
const PermissionTemplatesPage = React.lazy(() => import('@/pages/PermissionTemplates').then(m => ({ default: m.PermissionTemplatesPage })));
|
||||
@@ -237,6 +238,7 @@ const router = createBrowserRouter([
|
||||
{ path: '/api-docs', element: <PermissionRoute permission="settings:read">{withSuspense(<ApiDocsPage />)}</PermissionRoute> },
|
||||
{ path: '/activity', element: <PermissionRoute permission="audit:read">{withSuspense(<ActivityTimelinePage />)}</PermissionRoute> },
|
||||
{ path: '/system-dashboard', element: withSuspense(<SystemDashboardPage />) },
|
||||
{ path: '/outbox', element: withSuspense(<OutboxPage />) },
|
||||
{ path: '/profile', element: withSuspense(<SettingsProfilePage />) },
|
||||
{ path: '*', element: <ErrorBoundary>{<PluginRouteRenderer />}</ErrorBoundary> },
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user