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:
Zimin A.N.
@@ -0,0 +1,414 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
DatePicker,
|
||||
EmptyState,
|
||||
IconButton,
|
||||
LoadingBlock,
|
||||
PageHeader,
|
||||
SingleSelect,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableEmpty,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
TextInput,
|
||||
} from '@nstart/ui'
|
||||
import {
|
||||
ArrowsClockwiseIcon,
|
||||
CaretDownIcon,
|
||||
CaretRightIcon,
|
||||
DownloadIcon,
|
||||
} from '@phosphor-icons/react'
|
||||
import { buildAuditExportUrl, useAudit, useDictionaries } from '@/api/queries'
|
||||
import type { AuditAction, AuditEntry, AuditFilters } from '@/api/client'
|
||||
import { localTzOffset, parseFormDate } from '@/lib/dates'
|
||||
|
||||
export const Route = createFileRoute('/audit')({
|
||||
component: AuditPage,
|
||||
})
|
||||
|
||||
const ACTIONS: AuditAction[] = ['CREATE', 'UPDATE', 'CLOSE']
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [
|
||||
{ id: '50', label: '50' },
|
||||
{ id: '100', label: '100' },
|
||||
{ id: '200', label: '200' },
|
||||
]
|
||||
|
||||
function AuditPage() {
|
||||
const { t } = useTranslation()
|
||||
const dictionariesQuery = useDictionaries()
|
||||
|
||||
const [filters, setFilters] = useState<AuditFilters>({ page: 0, size: 50 })
|
||||
const [draft, setDraft] = useState<AuditFilters>(filters)
|
||||
|
||||
const { data, isLoading, error, refetch, isFetching } = useAudit(filters)
|
||||
|
||||
const dictionaryOptions = useMemo(() => {
|
||||
const opts: { id: string; label: string }[] = [{ id: '', label: '—' }]
|
||||
for (const d of dictionariesQuery.data ?? []) {
|
||||
opts.push({ id: d.name, label: d.displayName ?? d.name })
|
||||
}
|
||||
return opts
|
||||
}, [dictionariesQuery.data])
|
||||
|
||||
const actionOptions = useMemo(
|
||||
() => [
|
||||
{ id: '', label: '—' },
|
||||
...ACTIONS.map((a) => ({ id: a, label: t(`audit.action.${a}`) })),
|
||||
],
|
||||
[t],
|
||||
)
|
||||
|
||||
const apply = () => setFilters({ ...draft, page: 0 })
|
||||
const reset = () => {
|
||||
const empty: AuditFilters = { page: 0, size: filters.size ?? 50 }
|
||||
setDraft(empty)
|
||||
setFilters(empty)
|
||||
}
|
||||
|
||||
const totalPages = data?.totalPages ?? 0
|
||||
const currentPage = data?.number ?? 0
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={t('audit.title')}
|
||||
description={t('audit.subtitle')}
|
||||
actions={
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
leftIcon={<ArrowsClockwiseIcon size={16} />}
|
||||
onClick={() => refetch()}
|
||||
disabled={isFetching}
|
||||
>
|
||||
{t('audit.filter.apply')}
|
||||
</Button>
|
||||
<a
|
||||
href={buildAuditExportUrl(filters)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex"
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
leftIcon={<DownloadIcon size={16} />}
|
||||
>
|
||||
{t('audit.action.export')}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<FilterPanel
|
||||
filters={draft}
|
||||
onChange={setDraft}
|
||||
dictionaryOptions={dictionaryOptions}
|
||||
actionOptions={actionOptions}
|
||||
onApply={apply}
|
||||
onReset={reset}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(error)}
|
||||
</Alert>
|
||||
) : isLoading ? (
|
||||
<LoadingBlock size="md" label={t('loading')} />
|
||||
) : !data || data.content.length === 0 ? (
|
||||
<EmptyState title={t('audit.empty')} />
|
||||
) : (
|
||||
<>
|
||||
<AuditTable rows={data.content} />
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={totalPages}
|
||||
size={filters.size ?? 50}
|
||||
onPrev={() =>
|
||||
setFilters((f) => ({ ...f, page: Math.max(0, (f.page ?? 0) - 1) }))
|
||||
}
|
||||
onNext={() =>
|
||||
setFilters((f) => ({ ...f, page: (f.page ?? 0) + 1 }))
|
||||
}
|
||||
onSizeChange={(size) =>
|
||||
setFilters((f) => ({ ...f, page: 0, size }))
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type FilterPanelProps = {
|
||||
filters: AuditFilters
|
||||
onChange: (f: AuditFilters) => void
|
||||
dictionaryOptions: { id: string; label: string }[]
|
||||
actionOptions: { id: string; label: string }[]
|
||||
onApply: () => void
|
||||
onReset: () => void
|
||||
}
|
||||
|
||||
function FilterPanel({
|
||||
filters,
|
||||
onChange,
|
||||
dictionaryOptions,
|
||||
actionOptions,
|
||||
onApply,
|
||||
onReset,
|
||||
}: FilterPanelProps) {
|
||||
const { t } = useTranslation()
|
||||
const set = <K extends keyof AuditFilters>(k: K, v: AuditFilters[K]) =>
|
||||
onChange({ ...filters, [k]: v })
|
||||
|
||||
const fromDate = parseFormDate(filters.from)
|
||||
const toDate = parseFormDate(filters.to)
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-regolith rounded-lg p-4 space-y-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<SingleSelect
|
||||
label={t('audit.filter.dictionary')}
|
||||
options={dictionaryOptions}
|
||||
value={filters.dictionaryName ?? ''}
|
||||
onChange={(id) => set('dictionaryName', id || undefined)}
|
||||
/>
|
||||
<SingleSelect
|
||||
label={t('audit.filter.action')}
|
||||
options={actionOptions}
|
||||
value={filters.action ?? ''}
|
||||
onChange={(id) => set('action', (id as AuditAction) || '')}
|
||||
/>
|
||||
<TextInput
|
||||
label={t('audit.filter.user')}
|
||||
value={filters.userId ?? ''}
|
||||
onChange={(e) => set('userId', e.target.value || undefined)}
|
||||
/>
|
||||
<TextInput
|
||||
label={t('audit.filter.businessKey')}
|
||||
value={filters.businessKey ?? ''}
|
||||
onChange={(e) => set('businessKey', e.target.value || undefined)}
|
||||
/>
|
||||
<DatePicker
|
||||
label={t('audit.filter.from')}
|
||||
value={fromDate}
|
||||
onChange={(d) =>
|
||||
set(
|
||||
'from',
|
||||
d
|
||||
? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
|
||||
d.getDate(),
|
||||
).padStart(2, '0')}T00:00:00${localTzOffset(d)}`
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
/>
|
||||
<DatePicker
|
||||
label={t('audit.filter.to')}
|
||||
value={toDate}
|
||||
onChange={(d) =>
|
||||
set(
|
||||
'to',
|
||||
d
|
||||
? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
|
||||
d.getDate(),
|
||||
).padStart(2, '0')}T23:59:59${localTzOffset(d)}`
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2 border-t border-regolith">
|
||||
<Button type="button" variant="secondary" onClick={onReset}>
|
||||
{t('audit.filter.reset')}
|
||||
</Button>
|
||||
<Button type="button" variant="primary" onClick={onApply}>
|
||||
{t('audit.filter.apply')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AuditTable({ rows }: { rows: AuditEntry[] }) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>{t('audit.col.time')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.action')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.dictionary')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.businessKey')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.user')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.scope')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.trace')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('audit.col.diff')}</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.length === 0 ? (
|
||||
<TableEmpty colSpan={8}>{t('audit.empty')}</TableEmpty>
|
||||
) : (
|
||||
rows.map((r) => <AuditRow key={r.id} row={r} />)
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
function AuditRow({ row }: { row: AuditEntry }) {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const time = new Date(row.eventTime)
|
||||
const timeLabel = time.toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
})
|
||||
const actionVariant =
|
||||
row.action === 'CREATE' ? 'success' : row.action === 'CLOSE' ? 'error' : 'info'
|
||||
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<span className="text-2xs tabular-nums">{timeLabel}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={actionVariant}>
|
||||
{t(`audit.action.${row.action}`, row.action)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{row.dictionaryName ?? '—'}</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-xs">{row.businessKey ?? '—'}</span>
|
||||
</TableCell>
|
||||
<TableCell>{row.userId ?? 'anonymous'}</TableCell>
|
||||
<TableCell>
|
||||
{row.userScope ? <Badge variant="info">{row.userScope}</Badge> : null}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className="font-mono text-2xs text-carbon/70"
|
||||
title={row.traceId ?? ''}
|
||||
>
|
||||
{row.traceId ? row.traceId.slice(0, 8) : '—'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<IconButton
|
||||
type="button"
|
||||
icon={open ? <CaretDownIcon /> : <CaretRightIcon />}
|
||||
label={t('audit.action.expand')}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{open && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 bg-regolith/30 rounded p-3">
|
||||
<div>
|
||||
<div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
|
||||
{t('audit.diff.before')}
|
||||
</div>
|
||||
<pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-regolith rounded p-2 max-h-60 overflow-auto">
|
||||
{row.payloadBefore
|
||||
? JSON.stringify(row.payloadBefore, null, 2)
|
||||
: '—'}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
|
||||
{t('audit.diff.after')}
|
||||
</div>
|
||||
<pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-regolith rounded p-2 max-h-60 overflow-auto">
|
||||
{row.payloadAfter
|
||||
? JSON.stringify(row.payloadAfter, null, 2)
|
||||
: '—'}
|
||||
</pre>
|
||||
</div>
|
||||
{(row.ipAddress || row.userAgent || row.requestId) && (
|
||||
<div className="md:col-span-2 text-2xs text-carbon/70 flex flex-wrap gap-x-4 gap-y-1 pt-1">
|
||||
{row.ipAddress && <span>IP: {row.ipAddress}</span>}
|
||||
{row.requestId && <span>req: {row.requestId}</span>}
|
||||
{row.userAgent && (
|
||||
<span className="truncate max-w-md">UA: {row.userAgent}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
type PaginationProps = {
|
||||
page: number
|
||||
totalPages: number
|
||||
size: number
|
||||
onPrev: () => void
|
||||
onNext: () => void
|
||||
onSizeChange: (size: number) => void
|
||||
}
|
||||
|
||||
function Pagination({
|
||||
page,
|
||||
totalPages,
|
||||
size,
|
||||
onPrev,
|
||||
onNext,
|
||||
onSizeChange,
|
||||
}: PaginationProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-carbon/70">{t('audit.page.size')}</span>
|
||||
<SingleSelect
|
||||
options={PAGE_SIZE_OPTIONS}
|
||||
value={String(size)}
|
||||
onChange={(id) => onSizeChange(Number(id))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onPrev}
|
||||
disabled={page <= 0}
|
||||
>
|
||||
{t('audit.page.prev')}
|
||||
</Button>
|
||||
<span className="tabular-nums">
|
||||
{t('audit.page.of', { cur: page + 1, total: Math.max(totalPages, 1) })}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={onNext}
|
||||
disabled={page + 1 >= totalPages}
|
||||
>
|
||||
{t('audit.page.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user