denozord/EvoFirewall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(web): URL-состояние вкладок/поиска/фильтров на страницах агентов, списков, правил и статистики

Browse Source
This commit is contained in:
Denozordec
2026-09-25 01:44:32 +07:00
parent 3d4edbad8b
commit 65434857bb
6 changed files with 269 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/agents/agent-fleet-data-grid.tsx
+3
View File
@@ -56,6 +56,7 @@ export type AgentFleetDataGridProps = {
error?: Error | null
onRetry?: () => void
emptyAction?: ReactNode
filteredEmptyMessage?: string
toolbarExtra?: ReactNode
/** Bulk-операции: controlled selection пробрасывается в ResourcePage. */
enableRowSelection?: boolean
@@ -92,6 +93,7 @@ export function AgentFleetDataGrid({
error,
onRetry,
emptyAction,
filteredEmptyMessage,
toolbarExtra,
enableRowSelection,
rowSelection,
@@ -380,6 +382,7 @@ export function AgentFleetDataGrid({
error={error}
onRetry={onRetry}
toolbarExtra={toolbarExtra}
filteredEmptyMessage={filteredEmptyMessage}
emptyState={{
title: 'Нет агентов',
description:
apps/web/src/lib/search-params.ts
+52
View File
@@ -0,0 +1,52 @@
import type { Filter } from '@/components/reui/filters'
/**
* Сериализация состояния страниц (таб/поиск/фильтры) в URL search-параметры:
* tab — id вкладки, q — строка поиска, f — JSON-массив фильтров.
* Пустые значения не пишутся в URL (deep-link остаётся чистым).
*/
export function filtersToSearch(filters: Filter[]): string | undefined {
if (filters.length === 0) return undefined
try {
return JSON.stringify(filters)
} catch {
return undefined
}
}
export function searchToFilters(raw: unknown): Filter[] {
if (typeof raw !== 'string' || raw.length === 0) return []
try {
const parsed: unknown = JSON.parse(raw)
if (!Array.isArray(parsed)) return []
return parsed.filter(
(x): x is Filter =>
typeof x === 'object' &&
x !== null &&
typeof (x as Filter).field === 'string' &&
typeof (x as Filter).operator === 'string' &&
Array.isArray((x as Filter).values),
)
} catch {
return []
}
}
/** Строка поиска: undefined при пустой, чтобы не писать пустой q в URL. */
export function searchToQ(raw: unknown): string | undefined {
return typeof raw === 'string' && raw.length > 0 ? raw : undefined
}
/** Вкладка: валидируется по списку допустимых id. */
export function searchToTab(
raw: unknown,
allowed: readonly string[],
): string | undefined {
return typeof raw === 'string' && allowed.includes(raw) ? raw : undefined
}
/** Флаг из search-параметра: только `true` пишется в URL. */
export function searchToFlag(raw: unknown): boolean | undefined {
return raw === true || raw === '1' ? true : undefined
}
apps/web/src/routes/_auth/agents/index.tsx
+75 -37
View File
@@ -49,6 +49,12 @@ import { AgentOnlineDot } from '@/components/agents/agent-online-dot'
import { agentsQueryOptions, settingsQueryOptions } from '@/queries'
import { apiFetch } from '@/lib/api'
import { isAgentOnline } from '@/lib/agent-online'
import {
searchToFilters,
searchToFlag,
searchToQ,
searchToTab,
} from '@/lib/search-params'
import { useCan } from '@/lib/permissions'
import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
import { Button } from '@evofw/ui/components/button'
@@ -70,24 +76,12 @@ type AgentsSearch = {
view: 'cards' | 'table'
/** Открыть sheet добавления агента (из ⌘K-палитры). */
add?: boolean
/** URL-состояние: вкладка, поиск, фильтры (deep-link и refresh сохраняют вид). */
tab?: string
q?: string
f?: Filter[]
}
function parseAgentsSearch(search: Record<string, unknown>): AgentsSearch {
const view = search.view === 'table' ? 'table' : 'cards'
const agent =
typeof search.agent === 'string' && search.agent.length > 0
? search.agent
: undefined
const add = search.add === true
return { view, agent, add }
}
export const Route = createFileRoute('/_auth/agents/')({
validateSearch: (search: Record<string, unknown>): AgentsSearch =>
parseAgentsSearch(search),
component: AgentsPage,
})
const AGENT_TABS = [
{ id: 'all', label: 'Все' },
{ id: 'invited', label: 'Приглашённые' },
@@ -96,6 +90,31 @@ const AGENT_TABS = [
{ id: 'revoked', label: 'Отозванные' },
] as const
const AGENT_TAB_IDS = AGENT_TABS.map((t) => t.id) as string[]
function parseAgentsSearch(search: Record<string, unknown>): AgentsSearch {
const view = search.view === 'table' ? 'table' : 'cards'
const agent = typeof search.agent === 'string' && search.agent.length > 0
? search.agent
: undefined
const add = searchToFlag(search.add)
return {
view,
agent,
add,
tab: searchToTab(search.tab, AGENT_TAB_IDS),
q: searchToQ(search.q),
f: searchToFilters(search.f),
}
}
export const Route = createFileRoute('/_auth/agents/')({
validateSearch: parseAgentsSearch,
component: AgentsPage,
})
const EMPTY_FILTERS: Filter[] = []
/** Список имён для подтверждений: первые 5, дальше «и ещё N». */
function formatNames(names: string[]): string {
if (names.length <= 5) return names.join(', ')
@@ -116,9 +135,9 @@ function AgentsPage() {
const [approveAllOpen, setApproveAllOpen] = useState(false)
const [bulkDeleteIds, setBulkDeleteIds] = useState<string[] | null>(null)
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const [filters, setFilters] = useState<Filter[]>([])
const [searchQuery, setSearchQuery] = useState('')
const [activeTab, setActiveTab] = useState('all')
const activeTab = Route.useSearch().tab ?? 'all'
const searchQuery = Route.useSearch().q ?? ''
const filters = Route.useSearch().f ?? EMPTY_FILTERS
const detailOpen = Boolean(detailAgentId)
const showQuickActions = settingsQ.data?.show_quick_actions !== 'false'
@@ -138,6 +157,19 @@ function AgentsPage() {
next.add !== undefined
? next.add || undefined
: base.add,
tab: next.tab !== undefined
? next.tab === 'all'
? undefined
: next.tab
: base.tab,
q: next.q !== undefined
? next.q || undefined
: base.q,
f: next.f !== undefined
? next.f.length > 0
? next.f
: undefined
: base.f,
} satisfies AgentsSearch
},
replace: true,
@@ -336,14 +368,21 @@ function AgentsPage() {
}).map((card) => ({
...card,
onSelect: () => {
if (card.id === 'pending') setActiveTab('pending')
else if (card.id === 'invited') setActiveTab('invited')
else if (card.id === 'approved') setActiveTab('approved')
if (card.id === 'pending') setSearch({ tab: 'pending' })
else if (card.id === 'invited') setSearch({ tab: 'invited' })
else if (card.id === 'approved') setSearch({ tab: 'approved' })
else if (card.id === 'stale') {
setActiveTab('all')
setFilters([
{ id: 'stale', field: 'online', operator: 'is', values: ['offline'] },
])
setSearch({
tab: 'all',
f: [
{
id: 'stale',
field: 'online',
operator: 'is',
values: ['offline'],
},
],
})
}
},
})),
@@ -480,7 +519,7 @@ function AgentsPage() {
icon: <Inbox aria-hidden />,
iconClassName: 'text-warning [&_svg]:text-current',
badgeLabel: 'Показать',
onSelect: () => setActiveTab('pending'),
onSelect: () => setSearch({ tab: 'pending' }),
},
{
id: 'rules',
@@ -539,9 +578,8 @@ function AgentsPage() {
)
const handleClearFilters = useCallback(() => {
setFilters([])
setSearchQuery('')
}, [])
setSearch({ f: [], q: '' })
}, [setSearch])
const handleCopyInstall = useCallback(
(curl: string) => {
@@ -612,7 +650,7 @@ function AgentsPage() {
<Button
size="sm"
variant="outline"
onClick={() => setActiveTab('pending')}
onClick={() => setSearch({ tab: 'pending' })}
>
Показать
</Button>
@@ -667,15 +705,15 @@ function AgentsPage() {
data={items}
filterFields={filterFields}
filters={filters}
onFiltersChange={setFilters}
onFiltersChange={(f) => setSearch({ f })}
onClearFilters={handleClearFilters}
getFilterFieldValue={getFilterFieldValue}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onSearchChange={(q) => setSearch({ q })}
getSearchText={getSearchText}
tabs={[...AGENT_TABS]}
activeTab={activeTab}
onTabChange={setActiveTab}
onTabChange={(tab) => setSearch({ tab })}
tabFilter={tabFilter}
isLoading={agentsQ.isLoading}
isError={agentsQ.isError}
@@ -703,13 +741,13 @@ function AgentsPage() {
<AgentsFleetChrome
tabs={countedTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
onTabChange={(tab) => setSearch({ tab })}
filterFields={filterFields}
filters={filters}
onFiltersChange={setFilters}
onFiltersChange={(f) => setSearch({ f })}
onClearFilters={handleClearFilters}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onSearchChange={(q) => setSearch({ q })}
toolbarExtra={viewToggle}
>
<AgentCardsGrid
apps/web/src/routes/_auth/lists/index.tsx
+61 -17
View File
@@ -16,6 +16,12 @@ import { ConfirmDialog } from '@/components/confirm-dialog'
import { listsQueryOptions, evobgpCommunitiesQueryOptions } from '@/queries'
import { apiFetch } from '@/lib/api'
import { useCan } from '@/lib/permissions'
import {
searchToFilters,
searchToFlag,
searchToQ,
searchToTab,
} from '@/lib/search-params'
import {
Autocomplete,
AutocompleteContent,
@@ -46,11 +52,27 @@ import {
} from '@evofw/ui/components/sheet'
import { guessListSourceFromInput } from '@evofw/shared'
const LIST_TAB_IDS = LIST_TABS.map((t) => t.id) as string[]
type ListsSearch = {
create?: boolean
tab?: string
q?: string
f?: Filter[]
}
/** URL-состояние страницы: create/tab/q/f (deep-link и refresh сохраняют вид). */
function parseListsSearch(search: Record<string, unknown>): ListsSearch {
return {
create: searchToFlag(search.create),
tab: searchToTab(search.tab, LIST_TAB_IDS),
q: searchToQ(search.q),
f: searchToFilters(search.f),
}
}
export const Route = createFileRoute('/_auth/lists/')({
validateSearch: (search: Record<string, unknown>) => ({
/** Открыть sheet создания (из ⌘K-палитры). */
create: search.create === true || undefined,
}),
validateSearch: parseListsSearch,
component: ListsPage,
})
@@ -70,22 +92,44 @@ const CREATE_SOURCE_ITEMS = [
* Docs: https://reui.io/blocks
*/
function ListsPage() {
const navigate = useNavigate()
const navigate = useNavigate({ from: Route.fullPath })
const qc = useQueryClient()
const canWrite = useCan()('fw:lists:write')
const createParam = Route.useSearch().create === true
const { create: createParam, q: qParam, f: fParam } = Route.useSearch()
const activeTab = Route.useSearch().tab ?? 'all'
const searchQuery = qParam ?? ''
const filters = fParam ?? []
const [createOpenState, setCreateOpenState] = useState(false)
const createOpen = createOpenState || createParam
const createOpen = createOpenState || createParam === true
const [name, setName] = useState('')
const [source, setSource] = useState<CreateSource>('static')
const [extra, setExtra] = useState('')
/** Resolved EvoBGP community UUID (Base UI Autocomplete stores label in input). */
const [communityId, setCommunityId] = useState('')
const [filters, setFilters] = useState<Filter[]>([])
const [searchQuery, setSearchQuery] = useState('')
const [activeTab, setActiveTab] = useState('all')
const [deleteListId, setDeleteListId] = useState<string | null>(null)
/** Обновление URL-состояния (tab/q/f) без перезагрузки. */
const setListSearch = useCallback(
(next: { tab?: string; q?: string; f?: Filter[]; create?: boolean }) => {
void navigate({
search: (prev) => {
const base = parseListsSearch(prev as Record<string, unknown>)
return {
create:
next.create !== undefined
? next.create || undefined
: base.create,
tab: next.tab !== undefined ? searchToTab(next.tab, LIST_TAB_IDS) : base.tab,
q: next.q !== undefined ? searchToQ(next.q) : base.q,
f: next.f !== undefined ? next.f : base.f,
}
},
replace: true,
})
},
[navigate],
)
const listsQ = useQuery(listsQueryOptions())
const communitiesQ = useQuery({
...evobgpCommunitiesQueryOptions(),
@@ -135,7 +179,7 @@ function ListsPage() {
setExtra('')
setCommunityId('')
setSource('static')
setCreateOpen(false)
setCreateOpenState(false)
void qc.invalidateQueries({ queryKey: ['lists'] })
void navigate({ to: '/lists/$id', params: { id: row.id } })
},
@@ -225,16 +269,16 @@ function ListsPage() {
getRowId={(r) => r.id}
filterFields={listFilterFields}
filters={filters}
onFiltersChange={setFilters}
onClearFilters={() => setFilters([])}
onFiltersChange={(f) => setListSearch({ f })}
onClearFilters={() => setListSearch({ f: [], q: '' })}
getFilterFieldValue={getFilterFieldValue}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onSearchChange={(q) => setListSearch({ q })}
searchPlaceholder="Поиск списков…"
getSearchText={getSearchText}
tabs={[...LIST_TABS]}
activeTab={activeTab}
onTabChange={setActiveTab}
onTabChange={(tab) => setListSearch({ tab })}
tabFilter={tabFilter}
isLoading={listsQ.isLoading}
isError={listsQ.isError}
@@ -273,7 +317,7 @@ function ListsPage() {
onOpenChange={(open) => {
setCreateOpenState(open)
if (!open && createParam) {
void navigate({ to: '/lists', search: { create: undefined }, replace: true })
setListSearch({ create: false })
}
}}
>
@@ -380,7 +424,7 @@ function ListsPage() {
</div>
</ScrollArea>
<SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
<Button variant="outline" onClick={() => setCreateOpen(false)}>
<Button variant="outline" onClick={() => setCreateOpenState(false)}>
Отмена
</Button>
<LoadingButton
apps/web/src/routes/_auth/rules/index.tsx
+46 -12
View File
@@ -5,6 +5,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
import { searchToFilters, searchToFlag, searchToQ } from '@/lib/search-params'
import { PageHeader, PageShell, ResourcePage } from '@/components/reui-kit'
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
import { DataGridPrimaryCell } from '@/components/data-grid-cell'
@@ -28,11 +29,23 @@ import {
} from '@evofw/ui/components/sheet'
import type { PolicySet } from '@evofw/shared'
type RulesSearch = {
create?: boolean
q?: string
f?: Filter[]
}
/** URL-состояние страницы: create/q/f (deep-link и refresh сохраняют вид). */
function parseRulesSearch(search: Record<string, unknown>): RulesSearch {
return {
create: searchToFlag(search.create),
q: searchToQ(search.q),
f: searchToFilters(search.f),
}
}
export const Route = createFileRoute('/_auth/rules/')({
validateSearch: (search: Record<string, unknown>) => ({
/** Открыть sheet создания (из ⌘K-палитры). */
create: search.create === true || undefined,
}),
validateSearch: parseRulesSearch,
component: PolicySetsPage,
})
@@ -43,16 +56,37 @@ export const Route = createFileRoute('/_auth/rules/')({
* Create sheet: https://reui.io/preview/base/sheet-8
*/
function PolicySetsPage() {
const navigate = useNavigate()
const navigate = useNavigate({ from: Route.fullPath })
const qc = useQueryClient()
const setsQ = useQuery(policySetsQueryOptions())
const createParam = Route.useSearch().create === true
const { create: createParam, q: qParam, f: fParam } = Route.useSearch()
const searchQuery = qParam ?? ''
const filters = fParam ?? []
const [sheetOpenState, setSheetOpenState] = useState(false)
const sheetOpen = sheetOpenState || createParam
const sheetOpen = sheetOpenState || createParam === true
/** Обновление URL-состояния (q/f) без перезагрузки. */
const setRulesSearch = useCallback(
(next: { q?: string; f?: Filter[]; create?: boolean }) => {
void navigate({
search: (prev) => {
const base = parseRulesSearch(prev as Record<string, unknown>)
return {
create:
next.create !== undefined
? next.create || undefined
: base.create,
q: next.q !== undefined ? searchToQ(next.q) : base.q,
f: next.f !== undefined ? next.f : base.f,
}
},
replace: true,
})
},
[navigate],
)
const [name, setName] = useState('')
const [description, setDescription] = useState('')
const [filters, setFilters] = useState<Filter[]>([])
const [searchQuery, setSearchQuery] = useState('')
const [deleteId, setDeleteId] = useState<string | null>(null)
const create = useMutation({
@@ -231,11 +265,11 @@ function PolicySetsPage() {
getRowId={(r) => r.id}
filterFields={filterFields}
filters={filters}
onFiltersChange={setFilters}
onClearFilters={() => setFilters([])}
onFiltersChange={(f) => setRulesSearch({ f })}
onClearFilters={() => setRulesSearch({ f: [], q: '' })}
getFilterFieldValue={getFilterFieldValue}
searchQuery={searchQuery}
onSearchChange={setSearchQuery}
onSearchChange={(q) => setRulesSearch({ q })}
searchPlaceholder="Поиск наборов…"
getSearchText={getSearchText}
isLoading={setsQ.isLoading}
apps/web/src/routes/_auth/stats.tsx
+32 -4
View File
@@ -1,4 +1,4 @@
import { createFileRoute } from '@tanstack/react-router'
import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { useCallback, useMemo, useState } from 'react'
import type { ColumnDef } from '@tanstack/react-table'
@@ -24,6 +24,7 @@ import {
import { UpdatedAtLabel } from '@/components/updated-at-label'
import { dashboardQueryOptions, recentStatsQueryOptions } from '@/queries'
import { formatNumber, formatStampDateTime } from '@/lib/format'
import { searchToFilters } from '@/lib/search-params'
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
import {
ChartContainer,
@@ -41,7 +42,19 @@ type StatRow = {
recorded_at: string
}
type StatsSearch = {
f?: Filter[]
}
/** URL-состояние страницы: f (deep-link и refresh сохраняют вид). */
function parseStatsSearch(search: Record<string, unknown>): StatsSearch {
return {
f: searchToFilters(search.f),
}
}
export const Route = createFileRoute('/_auth/stats')({
validateSearch: parseStatsSearch,
component: StatsPage,
})
@@ -51,9 +64,24 @@ const chartConfig = {
} satisfies ChartConfig
function StatsPage() {
const navigate = useNavigate({ from: Route.fullPath })
const dash = useQuery(dashboardQueryOptions())
const stats = useQuery(recentStatsQueryOptions())
const [filters, setFilters] = useState<Filter[]>([])
const filters = Route.useSearch().f ?? []
/** Обновление URL-состояния (f) без перезагрузки. */
const setStatsFilters = useCallback(
(nextFilters: Filter[]) => {
void navigate({
search: (prev) => ({
...parseStatsSearch(prev as Record<string, unknown>),
f: nextFilters,
}),
replace: true,
})
},
[navigate],
)
/**
* Часовая агрегация: пик счётчиков за час. Счётчики агентов смешанной
@@ -245,8 +273,8 @@ function StatsPage() {
getRowId={(r) => r.id}
filterFields={filterFields}
filters={filters}
onFiltersChange={setFilters}
onClearFilters={() => setFilters([])}
onFiltersChange={setStatsFilters}
onClearFilters={() => setStatsFilters([])}
getFilterFieldValue={getFilterFieldValue}
isLoading={stats.isLoading}
pageSize={20}