denozord/auth-portal
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

feat(design-preview): журнал изменений — лента, таблица и ротация без дублирующих фильтров

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
DenozordecandClaude Sonnet 5.5 committed 2026-10-18 01:39:44 +07:00
1 parent 5de88e18c8
commit 1a46aaa6a5
1 file changed
+34 -50
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/design-preview/pages/audit-page.tsx
+34 -50
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react'
import { useState } from 'react'
import { DownloadIcon, Trash2Icon, HistoryIcon, UserCogIcon, ShieldAlertIcon, NetworkIcon } from 'lucide-react'
import { toast } from 'sonner'
import type { AuditLogEntry, AuditSeverity } from '@authportal/shared'
@@ -7,7 +7,7 @@ import { AuditRetentionPanel } from '@/components/reui-kit/audit-retention-panel
import { KpiStatGrid } from '@/components/reui-kit/kpi-stat-grid'
import { Button } from '@authportal/ui/components/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@authportal/ui/components/tabs'
import { Segmented, CodeBlock, KvList, PageHead, PreviewSheet, StatusBadge, TypedConfirm } from '../bits'
import { CodeBlock, KvList, PageHead, PreviewSheet, StatusBadge, TypedConfirm } from '../bits'
import { kpi } from '../kpi'
import { MOCK_AUDIT, APP_SHORT, type Tone } from '../mock'
import { PreviewSectionGrid, TwoLineCell, type GridColumn } from '../section-grid'
@@ -34,38 +34,16 @@ const columns: GridColumn<AuditLogEntry>[] = [
const VIEWS = [
{ label: 'Все', match: () => true },
{ label: 'Warning и выше', match: (r: AuditLogEntry) => r.severity !== 'info' },
{ label: 'Critical', match: (r: AuditLogEntry) => r.severity === 'critical' },
{ label: 'Auth', match: (r: AuditLogEntry) => r.action.startsWith('auth.') },
{ label: 'Пользователи', match: (r: AuditLogEntry) => r.action.startsWith('user.') },
{ label: 'Настройки', match: (r: AuditLogEntry) => /^(oidc|app_switcher|audit)\./.test(r.action) },
{ label: 'Критичные', match: (r: AuditLogEntry) => r.severity === 'critical' },
]
export function AuditPage() {
const [entry, setEntry] = useState<AuditLogEntry | null>(null)
const [purgeOpen, setPurgeOpen] = useState(false)
const [retention, setRetention] = useState(90)
const [period, setPeriod] = useState(1)
const auth = useMemo(() => MOCK_AUDIT.filter((e) => e.action.startsWith('auth.')), [])
const users = useMemo(() => MOCK_AUDIT.filter((e) => e.action.startsWith('user.')), [])
const settings = useMemo(
() => MOCK_AUDIT.filter((e) => e.action.startsWith('oidc.') || e.action.startsWith('app_switcher.') || e.action.startsWith('audit.')),
[],
)
function grid(title: string, description: string, rows: AuditLogEntry[]) {
return (
<PreviewSectionGrid
title={title}
description={description}
rows={rows}
columns={columns}
getRowId={(r) => r.id}
searchText={(r) => `${r.action} ${r.summary} ${r.actor_email ?? ''} ${r.ip ?? ''}`}
searchPlaceholder="Событие, пользователь, IP"
views={VIEWS}
onRowClick={setEntry}
/>
)
}
return (
<>
@@ -73,19 +51,12 @@ export function AuditPage() {
title="Изменения"
sub="Журнал действий администраторов и приложений · портал, EvoFirewall, EvoBGP, MikrotikManager и другие через ingest"
actions={
<>
<Button variant="outline" onClick={() => toast.success('CSV сформирован (макет)')}>
<DownloadIcon aria-hidden />
Экспорт CSV
</Button>
<Button variant="outline" onClick={() => setPurgeOpen(true)}>
<Trash2Icon aria-hidden />
Очистить старые записи…
</Button>
</>
<Button variant="outline" onClick={() => setPurgeOpen(true)}>
<Trash2Icon aria-hidden />
Очистить старые записи…
</Button>
}
/>
<Segmented label="Период" options={['24 ч', '7 д', '30 д', '90 д', 'Весь период']} value={period} onChange={setPeriod} />
<KpiStatGrid
aria-label="Показатели"
items={[
@@ -95,21 +66,34 @@ export function AuditPage() {
kpi('src', 'Источников', '6', { icon: NetworkIcon, tone: 'in', badge: 'ingest', sub: 'портал + 5 приложений' }),
]}
/>
<Tabs defaultValue="all" className="min-w-0">
<TabsList className="max-w-full justify-start overflow-x-auto">
<TabsTrigger value="all">Все · 148</TabsTrigger>
<TabsTrigger value="auth">Auth · 31</TabsTrigger>
<TabsTrigger value="users">Пользователи · 74</TabsTrigger>
<TabsTrigger value="settings">Настройки · 43</TabsTrigger>
<Tabs defaultValue="feed" className="min-w-0">
<TabsList>
<TabsTrigger value="feed">Лента</TabsTrigger>
<TabsTrigger value="table">Таблица · {MOCK_AUDIT.length}</TabsTrigger>
<TabsTrigger value="retention">Ротация</TabsTrigger>
</TabsList>
<TabsContent value="all" className="flex min-w-0 flex-col gap-4">
<TabsContent value="feed" className="min-w-0">
<AuditLogTimeline entries={MOCK_AUDIT} totalCount={MOCK_AUDIT.length} />
{grid('Журнал изменений', 'Поиск по событию, пользователю и IP · фильтры: источник, важность, объект', MOCK_AUDIT)}
</TabsContent>
<TabsContent value="auth">{grid('События аутентификации', 'Входы, выходы и SSO · подробности — в разделе «Входы»', auth)}</TabsContent>
<TabsContent value="users">{grid('Изменения пользователей', 'Создание, правки, права и passkeys', users)}</TabsContent>
<TabsContent value="settings">{grid('Изменения настроек', 'Переключатель приложений, OIDC, ротация журнала', settings)}</TabsContent>
<TabsContent value="table" className="min-w-0">
<PreviewSectionGrid
title="Журнал изменений"
description="Поиск по событию, пользователю и IP"
rows={MOCK_AUDIT}
columns={columns}
getRowId={(r) => r.id}
searchText={(r) => `${r.action} ${r.summary} ${r.actor_email ?? ''} ${r.ip ?? ''}`}
searchPlaceholder="Событие, пользователь, IP"
views={VIEWS}
onRowClick={setEntry}
toolbar={
<Button variant="outline" size="sm" onClick={() => toast.success('CSV сформирован (макет)')}>
<DownloadIcon aria-hidden />
Экспорт CSV
</Button>
}
/>
</TabsContent>
<TabsContent value="retention">
<AuditRetentionPanel
retentionDays={retention}