denozord/MikrotikManager
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 104 Wiki Activity

fix(ui): ограничить таблицу Firewall и сохранить порядок правил

Browse Source
This commit is contained in:
Denozordec committed 2026-10-04 16:23:29 +07:00
1 parent 4a5ae8baa1
commit 1e9889f892
7 files changed
+164 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/data-grids/firewall-rules-data-grid.tsx
+54 -18
View File
@@ -2,7 +2,7 @@
import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
import { useMemo } from "react"
import { useEffect, useMemo } from "react"
import {
type ColumnDef,
useTable,
@@ -26,11 +26,13 @@ import {
DATA_GRID_CONTAINER_CLASS,
} from "@/components/data-grids/shared/data-grid-layout"
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/data-grid"
import { DataGridContainer, DataGridScrollArea, DataGridTable, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/data-grid"
import type { DragEndEvent } from "@dnd-kit/core"
import { EmptyState } from "@/components/empty-state"
import {
CopyIcon,
ChevronUpIcon,
ChevronDownIcon,
MoreHorizontalIcon,
PencilIcon,
PowerIcon,
@@ -111,6 +113,17 @@ function FirewallRulesDataGrid({
() => rules.map((rule, index) => ({ ...rule, _index: index + 1 })),
[rules],
)
const neighbours = useMemo(() => {
const groups = new Map<string, FirewallRule[]>()
for (const rule of rules) {
const key = [rule.serverId, rule.family, rule.table].join(":")
const group = groups.get(key) ?? []
group.push(rule); groups.set(key, group)
}
const result = new Map<string, { up?: string; down?: string }>()
for (const group of groups.values()) group.forEach((rule, index) => result.set(rule.id, { up: group[index - 1]?.id, down: group[index + 1]?.id }))
return result
}, [rules])
const reorderable = Boolean(onReorder)
const indexPad = reorderable ? DATA_GRID_CELL_PAD : DATA_GRID_CELL_PAD_FIRST
@@ -121,8 +134,15 @@ function FirewallRulesDataGrid({
id: "drag",
header: () => <span className="sr-only">Порядок</span>,
enableSorting: false,
cell: () => <DataGridTableDndRowHandle />,
size: 40,
cell: ({ row }) => {
const targets = neighbours.get(row.original.id)
return <div className="flex items-center gap-1">
<DataGridTableDndRowHandle className="size-11 shrink-0" />
<Button type="button" variant="ghost" size="icon" className="size-11 shrink-0" aria-label={`Поднять правило ${row.original.rosId || row.original.id}`} disabled={!targets?.up || mutationsDisabled} onClick={() => targets?.up && onReorder?.(row.original.id, targets.up)}><ChevronUpIcon /></Button>
<Button type="button" variant="ghost" size="icon" className="size-11 shrink-0" aria-label={`Опустить правило ${row.original.rosId || row.original.id}`} disabled={!targets?.down || mutationsDisabled} onClick={() => targets?.down && onReorder?.(row.original.id, targets.down)}><ChevronDownIcon /></Button>
</div>
},
size: 160,
meta: {
headerClassName: DATA_GRID_CELL_PAD_FIRST,
cellClassName: DATA_GRID_CELL_PAD_FIRST,
@@ -163,6 +183,7 @@ function FirewallRulesDataGrid({
: []),
{
id: "chain",
size: 112,
accessorKey: "chain",
header: ({ column }) => <DataGridSortHeader column={column} title="Цепочка" />,
cell: ({ row }) => <ChainBadge chain={row.original.chain} />,
@@ -170,6 +191,7 @@ function FirewallRulesDataGrid({
},
{
id: "action",
size: 176,
accessorKey: "action",
header: ({ column }) => <DataGridSortHeader column={column} title="Действие" />,
cell: ({ row }) => <ActionBadge action={row.original.action} />,
@@ -177,6 +199,7 @@ function FirewallRulesDataGrid({
},
{
id: "src",
size: 176,
accessorKey: "src",
header: ({ column }) => <DataGridSortHeader column={column} title="Источник" />,
cell: ({ row }) => (
@@ -188,6 +211,7 @@ function FirewallRulesDataGrid({
},
{
id: "dst",
size: 176,
accessorKey: "dst",
header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
cell: ({ row }) => (
@@ -199,6 +223,7 @@ function FirewallRulesDataGrid({
},
{
id: "proto",
size: 96,
accessorKey: "proto",
header: ({ column }) => <DataGridSortHeader column={column} title="Протокол" />,
cell: ({ row }) => <span className="text-xs font-mono">{row.original.proto}</span>,
@@ -206,6 +231,7 @@ function FirewallRulesDataGrid({
},
{
id: "port",
size: 112,
accessorKey: "port",
header: ({ column }) => <DataGridSortHeader column={column} title="Порт" />,
cell: ({ row }) => (
@@ -215,6 +241,7 @@ function FirewallRulesDataGrid({
},
{
id: "iface",
size: 160,
accessorKey: "iface",
header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
cell: ({ row }) => (
@@ -224,6 +251,7 @@ function FirewallRulesDataGrid({
},
{
id: "hits",
size: 112,
accessorKey: "hits",
header: ({ column }) => (
<DataGridSortHeader column={column} title="Пакетов" className="ml-auto" />
@@ -253,12 +281,13 @@ function FirewallRulesDataGrid({
},
{
id: "enabled",
size: 64,
accessorKey: "enabled",
header: () => <span className="text-xs font-medium text-muted-foreground">Вкл</span>,
enableSorting: false,
cell: ({ row }) => (
<div onClick={(e) => e.stopPropagation()}>
<FormToggle disabled={mutationsDisabled} checked={row.original.enabled} onChange={() => onToggle(row.original.id)} />
<FormToggle ariaLabel={`Включено правило ${row.original.rosId || row.original.id}`} disabled={mutationsDisabled} checked={row.original.enabled} onChange={() => onToggle(row.original.id)} />
</div>
),
meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
@@ -279,8 +308,8 @@ function FirewallRulesDataGrid({
variant="outline"
size="icon"
className={cn(
"size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
"opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
"size-11 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
"transition-colors",
"data-popup-open:opacity-100",
)}
aria-label={`Действия: ${r.chain} ${r.action}`}
@@ -313,16 +342,18 @@ function FirewallRulesDataGrid({
</div>
)
},
size: 56,
size: 64,
meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
},
],
[onEdit, onToggle, onDelete, showServer, reorderable, indexPad, mutationsDisabled],
[onEdit, onToggle, onDelete, onReorder, neighbours, showServer, reorderable, indexPad, mutationsDisabled],
)
const table = useTable({
features: dataGridFeatures,
manualPagination: true,
manualPagination: false,
autoResetPageIndex: false,
initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["index", "chain"], end: [] } },
data: indexedRules,
columns,
manualSorting: reorderable,
@@ -330,6 +361,12 @@ function FirewallRulesDataGrid({
getRowId: (row) => row.id,
})
const { pageIndex, pageSize } = table.state.pagination
useEffect(() => {
const lastPage = Math.max(0, Math.ceil(rules.length / pageSize) - 1)
if (pageIndex > lastPage) table.setPageIndex(lastPage)
}, [rules.length, pageIndex, pageSize, table])
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event
if (!over || active.id === over.id || !onReorder) return
@@ -351,19 +388,18 @@ function FirewallRulesDataGrid({
<DataGridShell
table={table}
recordCount={rules.length}
pagination={rules.length > 50 || pageSize !== 50}
tableLayout={{ dense: true, columnsPinnable: true }}
tableClassNames={{
headerRow: "border-b border-border",
bodyRow: cn("group/row", "[&:has([data-rule-disabled=true])]:opacity-40"),
}}
>
{reorderable ? (
<DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
<DataGridTableDndRows
dataIds={indexedRules.map((r) => r.id)}
handleDragEnd={handleDragEnd}
/>
</DataGridContainer>
) : undefined}
<DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
<DataGridScrollArea>
{reorderable ? <DataGridTableDndRows dataIds={table.getRowModel().rows.map(row => row.id)} handleDragEnd={handleDragEnd} /> : <DataGridTable />}
</DataGridScrollArea>
</DataGridContainer>
</DataGridShell>
)
}