302 lines
9.2 KiB
TypeScript
302 lines
9.2 KiB
TypeScript
"use client"
|
|
|
|
import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
|
|
|
|
import { useEffect, useMemo } from "react"
|
|
import {
|
|
type ColumnDef,
|
|
useTable,
|
|
} from "@tanstack/react-table"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
|
|
import {
|
|
DATA_GRID_CELL_PAD,
|
|
DATA_GRID_CELL_PAD_FIRST,
|
|
DATA_GRID_CELL_PAD_LAST,
|
|
} from "@/components/data-grids/shared/data-grid-layout"
|
|
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
|
|
import { EmptyState } from "@/components/empty-state"
|
|
import {
|
|
CheckIcon,
|
|
ChevronRightIcon,
|
|
CopyIcon,
|
|
ServerIcon,
|
|
TagIcon,
|
|
} from "lucide-react"
|
|
|
|
export type CommunityType = "standard" | "no-export" | "no-advertise" | "local-as" | "custom"
|
|
|
|
export interface CommunityRow {
|
|
id: string
|
|
value: string
|
|
name: string
|
|
description: string
|
|
type: CommunityType
|
|
filterIds: string[]
|
|
serverCount: number
|
|
prefixCount: number | null
|
|
action: "permit" | "deny" | "local-pref" | "metric"
|
|
actionValue?: number
|
|
enabled: boolean
|
|
}
|
|
|
|
const TYPE_LABELS: Record<CommunityType, string> = {
|
|
standard: "Стандартный",
|
|
"no-export": "No-export",
|
|
"no-advertise": "No-advertise",
|
|
"local-as": "Local-AS",
|
|
custom: "Кастомный",
|
|
}
|
|
|
|
const ACTION_LABELS: Record<CommunityRow["action"], string> = {
|
|
permit: "Permit",
|
|
deny: "Deny",
|
|
"local-pref": "Local-pref",
|
|
metric: "MED/Metric",
|
|
}
|
|
|
|
const ACTION_COLOR: Record<CommunityRow["action"], string> = {
|
|
permit: "text-emerald-500",
|
|
deny: "text-red-500",
|
|
"local-pref": "text-blue-500",
|
|
metric: "text-amber-500",
|
|
}
|
|
|
|
interface CommunitiesDataGridProps {
|
|
communities: CommunityRow[]
|
|
selectedId?: string | null
|
|
copying?: boolean
|
|
copiedValue?: string | null
|
|
onSelect: (community: CommunityRow) => void
|
|
onCopy: (value: string) => void
|
|
}
|
|
|
|
function CommunitiesDataGrid({
|
|
communities,
|
|
selectedId,
|
|
copiedValue,
|
|
copying = false,
|
|
onSelect,
|
|
onCopy,
|
|
}: CommunitiesDataGridProps) {
|
|
const columns = useMemo<ColumnDef<DataGridFeatures, CommunityRow>[]>(
|
|
() => [
|
|
{
|
|
id: "value",
|
|
size: 192,
|
|
accessorKey: "value",
|
|
header: ({ column }) => (
|
|
<DataGridSortHeader column={column} title="Community" className="ml-1" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const c = row.original
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2"
|
|
data-community-disabled={!c.enabled ? true : undefined}
|
|
>
|
|
<TagIcon className="size-3.5 text-muted-foreground shrink-0" />
|
|
<span className="font-mono text-xs font-medium break-all bg-muted px-1.5 py-0.5 rounded">
|
|
{c.value}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onCopy(c.value)
|
|
}}
|
|
className="size-11 shrink-0 inline-flex items-center justify-center rounded text-muted-foreground hover:bg-muted"
|
|
aria-label={`Скопировать community: ${c.value}`}
|
|
disabled={copying}
|
|
>
|
|
{copiedValue === c.value ? (
|
|
<CheckIcon className="size-3" />
|
|
) : (
|
|
<CopyIcon className="size-3" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
)
|
|
},
|
|
meta: {
|
|
headerTitle: "Community",
|
|
headerClassName: DATA_GRID_CELL_PAD_FIRST,
|
|
cellClassName: DATA_GRID_CELL_PAD_FIRST,
|
|
},
|
|
},
|
|
{
|
|
id: "name",
|
|
size: 240,
|
|
accessorKey: "name",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Имя / описание" />,
|
|
cell: ({ row }) => (
|
|
<div className="min-w-0">
|
|
<p className="font-medium text-xs">{row.original.name}</p>
|
|
<p className="text-xs text-muted-foreground line-clamp-1">{row.original.description}</p>
|
|
</div>
|
|
),
|
|
meta: {
|
|
headerTitle: "Имя / описание",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "type",
|
|
size: 128,
|
|
accessorKey: "type",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
|
|
cell: ({ row }) => (
|
|
<span className="text-xs text-muted-foreground">
|
|
{TYPE_LABELS[row.original.type]}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Тип",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "action",
|
|
size: 128,
|
|
accessorKey: "action",
|
|
header: ({ column }) => <DataGridSortHeader column={column} title="Действие" />,
|
|
cell: ({ row }) => {
|
|
const c = row.original
|
|
return (
|
|
<span className={cn("text-xs font-medium", ACTION_COLOR[c.action])}>
|
|
{ACTION_LABELS[c.action]}
|
|
{c.actionValue !== undefined ? ` ${c.actionValue}` : ""}
|
|
</span>
|
|
)
|
|
},
|
|
meta: {
|
|
headerTitle: "Действие",
|
|
headerClassName: DATA_GRID_CELL_PAD,
|
|
cellClassName: DATA_GRID_CELL_PAD,
|
|
},
|
|
},
|
|
{
|
|
id: "prefixCount",
|
|
size: 112,
|
|
accessorKey: "prefixCount",
|
|
header: ({ column }) => (
|
|
<DataGridSortHeader column={column} title="Маршрутов" className="ml-auto" />
|
|
),
|
|
cell: ({ row }) => (
|
|
<span className="font-mono text-xs tabular-nums text-right block">
|
|
{row.original.prefixCount?.toLocaleString("ru-RU") ?? "—"}
|
|
</span>
|
|
),
|
|
meta: {
|
|
headerTitle: "Маршрутов",
|
|
headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
|
|
cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
|
|
},
|
|
},
|
|
{
|
|
id: "serverCount",
|
|
size: 104,
|
|
accessorKey: "serverCount",
|
|
header: ({ column }) => (
|
|
<DataGridSortHeader column={column} title="Серверов" className="ml-auto" />
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center justify-end gap-1">
|
|
<ServerIcon className="size-3 text-muted-foreground" />
|
|
<span className="font-mono text-xs tabular-nums">
|
|
{row.original.serverCount.toLocaleString("ru-RU")}
|
|
</span>
|
|
</div>
|
|
),
|
|
meta: {
|
|
headerTitle: "Серверов",
|
|
headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
|
|
cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
|
|
},
|
|
},
|
|
{
|
|
id: "chevron",
|
|
header: () => <span className="sr-only">Детали</span>,
|
|
enableSorting: false,
|
|
cell: ({ row }) => (
|
|
<Button type="button" variant="ghost" size="icon" className="size-11" aria-label={`Детали community: ${row.original.value}`} onClick={event => { event.stopPropagation(); onSelect(row.original) }}>
|
|
<ChevronRightIcon aria-hidden="true" className="size-4 text-muted-foreground" />
|
|
</Button>
|
|
),
|
|
size: 64,
|
|
meta: {
|
|
headerClassName: DATA_GRID_CELL_PAD_LAST,
|
|
cellClassName: DATA_GRID_CELL_PAD_LAST,
|
|
},
|
|
},
|
|
],
|
|
[copiedValue, copying, onCopy, onSelect],
|
|
)
|
|
|
|
const rowSelection = useMemo(
|
|
() => (selectedId ? { [selectedId]: true as const } : {}),
|
|
[selectedId],
|
|
)
|
|
|
|
const table = useTable({
|
|
features: dataGridFeatures,
|
|
manualPagination: false,
|
|
autoResetPageIndex: false,
|
|
initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["value"], end: [] } },
|
|
data: communities,
|
|
columns,
|
|
getRowId: (row) => row.id,
|
|
enableRowSelection: true,
|
|
state: { rowSelection },
|
|
})
|
|
|
|
const { pageIndex, pageSize } = table.state.pagination
|
|
useEffect(() => {
|
|
const lastPage = Math.max(0, Math.ceil(communities.length / pageSize) - 1)
|
|
if (pageIndex > lastPage) table.setPageIndex(lastPage)
|
|
}, [communities.length, pageIndex, pageSize, table])
|
|
|
|
if (communities.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
icon={<TagIcon className="size-4" />}
|
|
title="Ничего не найдено"
|
|
className="border-0 py-16"
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<DataGridShell
|
|
table={table}
|
|
recordCount={communities.length}
|
|
pagination={communities.length > 50 || pageSize !== 50}
|
|
tableLayout={{ dense: true, columnsPinnable: true }}
|
|
onRowClick={(row) => onSelect(row)}
|
|
tableClassNames={{
|
|
headerRow: "border-b border-border",
|
|
bodyRow: cn(
|
|
"group/row",
|
|
"data-[state=selected]:bg-primary/5",
|
|
"[&:has([data-community-disabled=true])]:opacity-50",
|
|
),
|
|
}}
|
|
>
|
|
<DataGridContainer border={false} className="w-full rounded-none border-0">
|
|
<DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
|
|
</DataGridContainer>
|
|
</DataGridShell>
|
|
)
|
|
}
|
|
|
|
export {
|
|
CommunitiesDataGrid,
|
|
type CommunitiesDataGridProps,
|
|
TYPE_LABELS,
|
|
ACTION_LABELS,
|
|
ACTION_COLOR,
|
|
}
|