feat(audit): полноценный writer в audit_log + admin UI (audit + outbox DLQ)
До этого audit_log entity была определена, но никто туда не писал — реальный аудит шёл только через Hibernate Envers (без user/IP/trace). Теперь: - AuditLogger service пишет в той же транзакции что и CRUD (DictionaryRecordService). Захватывает: user (JWT sub либо preferred_username), scope, IP (X-Forwarded-For), UA, trace_id (MDC), request_id. Не ломает основной flow при сбое — только громко логирует. - AuditLogRepository: гибкий search() с nullable фильтрами (dictionary, user, action, businessKey, from, to) + Pageable. - AuditAdminController: GET /admin/audit (paginated) + /admin/audit/export.csv (cap 10k строк против OOM). Frontend: - /audit route: фильтр-панель, таблица с цветными бейджами (CREATE/UPDATE/CLOSE), expand-row с JSON before/after diff, footer IP/UA/req_id, кнопка экспорта CSV. Pagination 50/100/200. - /outbox route: stat-cards pending/DLQ + DLQ-таблица с last_error. - Nav links + i18n (RU + EN).
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
EmptyState,
|
||||
LoadingBlock,
|
||||
PageHeader,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
} from '@nstart/ui'
|
||||
import { ArrowsClockwiseIcon } from '@phosphor-icons/react'
|
||||
import { useDlq, useOutboxStats } from '@/api/queries'
|
||||
|
||||
export const Route = createFileRoute('/outbox')({
|
||||
component: OutboxPage,
|
||||
})
|
||||
|
||||
function OutboxPage() {
|
||||
const { t } = useTranslation()
|
||||
const [page, setPage] = useState(0)
|
||||
const size = 50
|
||||
|
||||
const stats = useOutboxStats()
|
||||
const dlq = useDlq(page, size)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={t('outbox.title')}
|
||||
description={t('outbox.subtitle')}
|
||||
actions={
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
leftIcon={<ArrowsClockwiseIcon size={16} />}
|
||||
onClick={() => {
|
||||
stats.refetch()
|
||||
dlq.refetch()
|
||||
}}
|
||||
>
|
||||
{t('audit.filter.apply')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<StatCard
|
||||
label={t('outbox.stats.pending')}
|
||||
value={stats.data?.pending ?? '—'}
|
||||
tone="info"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('outbox.stats.dlq')}
|
||||
value={stats.data?.dlq ?? '—'}
|
||||
tone={(stats.data?.dlq ?? 0) > 0 ? 'error' : 'success'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{dlq.error ? (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(dlq.error)}
|
||||
</Alert>
|
||||
) : dlq.isLoading ? (
|
||||
<LoadingBlock size="md" label={t('loading')} />
|
||||
) : !dlq.data || dlq.data.content.length === 0 ? (
|
||||
<EmptyState title={t('outbox.dlq.empty')} />
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.id')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.eventType')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.dictionary')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.aggregateId')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.topic')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.attempts')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.lastError')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('outbox.dlq.col.dlqAt')}</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{dlq.data.content.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">{row.id}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="warning">{row.eventType}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{row.dictionaryName ?? '—'}</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">{row.aggregateId}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">{row.kafkaTopic}</span>
|
||||
</TableCell>
|
||||
<TableCell>{row.attemptCount}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className="text-2xs text-carbon/70 truncate max-w-md inline-block align-middle"
|
||||
title={row.lastError ?? ''}
|
||||
>
|
||||
{row.lastError ?? '—'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-2xs tabular-nums">
|
||||
{new Date(row.dlqAt).toLocaleString()}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="flex items-center justify-end gap-3 text-sm">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page <= 0}
|
||||
>
|
||||
{t('audit.page.prev')}
|
||||
</Button>
|
||||
<span className="tabular-nums">
|
||||
{t('audit.page.of', {
|
||||
cur: (dlq.data.number ?? 0) + 1,
|
||||
total: Math.max(dlq.data.totalPages ?? 1, 1),
|
||||
})}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
disabled={(dlq.data.number ?? 0) + 1 >= (dlq.data.totalPages ?? 1)}
|
||||
>
|
||||
{t('audit.page.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type StatCardProps = {
|
||||
label: string
|
||||
value: number | string
|
||||
tone: 'info' | 'success' | 'error'
|
||||
}
|
||||
|
||||
function StatCard({ label, value, tone }: StatCardProps) {
|
||||
const colour =
|
||||
tone === 'error'
|
||||
? 'text-mars'
|
||||
: tone === 'success'
|
||||
? 'text-grass'
|
||||
: 'text-ultramarain'
|
||||
return (
|
||||
<div className="bg-white border border-regolith rounded-lg p-4">
|
||||
<div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
|
||||
{label}
|
||||
</div>
|
||||
<div className={`text-2xl font-primary tabular-nums ${colour}`}>{value}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user