fix(ui): ограничить отображение каталога VXLAN-туннелей

components/data-grids/vxlan-data-grid.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useMemo } from "react"
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { useEffect, useMemo } from "react"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 import {
   type ColumnDef,
   useTable,
@@ -47,6 +47,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
     () => [
       {
         id: "name",
+        size: 176,
         accessorKey: "name",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Имя / VTEP" className="ml-1" />
@@ -58,12 +59,12 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
               <span
                 className={cn(
                   "size-2 rounded-full shrink-0 mt-1.5",
-                  failedServerIds.includes(t.serverId) ? "bg-muted-foreground" : t.status === "up" ? "bg-emerald-500" : "bg-red-500",
+                  failedServerIds.includes(t.serverId) ? "bg-muted-foreground" : t.status === "up" ? "bg-success" : "bg-destructive",
                 )}
               />
               <div className="min-w-0">
-                <p className="font-mono font-medium text-sm truncate">{t.name}</p>
-                <p className="text-[11px] text-muted-foreground font-mono">VTEP: {t.vtepIp}</p>
+                <p className="font-mono font-medium text-sm break-all">{t.name}</p>
+                <p className="text-[11px] text-muted-foreground font-mono break-all">VTEP: {t.vtepIp}</p>
               </div>
             </div>
           )
@@ -76,6 +77,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "server",
+        size: 128,
         accessorKey: "serverId",
         header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
         cell: ({ row }) => {
@@ -96,6 +98,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "vni",
+        size: 80,
         accessorKey: "vni",
         header: ({ column }) => <DataGridSortHeader column={column} title="VNI" />,
         cell: ({ row }) => <span className="font-mono text-sm">{row.original.vni}</span>,
@@ -107,6 +110,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "dstPort",
+        size: 104,
         accessorKey: "dstPort",
         header: ({ column }) => <DataGridSortHeader column={column} title="Port" />,
         cell: ({ row }) => <span className="font-mono text-sm">{row.original.dstPort}</span>,
@@ -118,6 +122,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "remoteVteps",
+        size: 160,
         header: () => (
           <span className="text-xs font-medium text-muted-foreground">Remote</span>
         ),
@@ -133,6 +138,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "arpProxy",
+        size: 104,
         accessorKey: "arpProxy",
         header: () => <span className="sr-only">ARP</span>,
         enableSorting: false,
@@ -152,6 +158,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "macLearning",
+        size: 128,
         accessorKey: "macLearning",
         header: () => <span className="sr-only">MAC</span>,
         enableSorting: false,
@@ -171,6 +178,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       },
       {
         id: "status",
+        size: 104,
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => (
@@ -208,8 +216,8 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
                       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={`Действия: ${tunnel.name}`}
@@ -229,7 +237,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
           )
         },
         enableSorting: false,
-        size: 56,
+        size: 72,
         meta: {
           headerClassName: DATA_GRID_CELL_PAD_LAST,
           cellClassName: DATA_GRID_CELL_PAD_LAST,
@@ -241,12 +249,20 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["name"], end: [] } },
     data: tunnels,
     columns,
     getRowId: (row) => JSON.stringify([row.serverId, row.id]),
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(tunnels.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [tunnels.length, pageIndex, pageSize, table])
+
   if (tunnels.length === 0) {
     return (
       <EmptyState
@@ -262,11 +278,17 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
     <DataGridShell
       table={table}
       recordCount={tunnels.length}
+      pagination={tunnels.length > 50 || pageSize !== 50}
+      tableLayout={{ dense: true, columnsPinnable: true }}
       tableClassNames={{
         headerRow: "border-b border-border",
         bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
       }}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }