fix(vxlan): подтвердить достоверность опроса и экспорта раздела

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useMemo } from "react"
+import { createContext, useContext, useEffect, useMemo } from "react"
 import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 import {
   type ColumnDef,
@@ -37,6 +37,43 @@ interface VxlanDataGridProps {
   onExport: (tunnel: VxlanTunnel) => void
 }
 
+const VxlanActionsContext = createContext<VxlanDataGridProps["onExport"] | null>(null)
+function VxlanActionsCell({ row }: { row: { original: VxlanTunnel } }) {
+  const onExport = useContext(VxlanActionsContext)
+  if (!onExport) throw new Error("VXLAN actions context is missing")
+  const tunnel = row.original
+  return (
+    <div className="flex justify-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className={cn(
+                "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}`}
+            >
+              <MoreHorizontalIcon className="size-4" />
+            </Button>
+          }
+        />
+        <DropdownMenuContent side="bottom" align="end">
+          <DropdownMenuItem onClick={() => onExport(tunnel)}>
+            <CodeXmlIcon className="size-4" />
+            Экспорт .rsc
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+
+}
+
 function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: VxlanDataGridProps) {
   const serverMap = useMemo(
     () => new Map(servers.map((s) => [s.id, s])),
@@ -120,6 +157,18 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
           cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
         },
       },
+      {
+        id: "mtu",
+        size: 88,
+        accessorKey: "mtu",
+        header: ({ column }) => <DataGridSortHeader column={column} title="MTU" />,
+        cell: ({ row }) => <span className="font-mono text-sm">{row.original.mtu ?? "—"}</span>,
+        meta: {
+          headerTitle: "MTU",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
       {
         id: "remoteVteps",
         size: 160,
@@ -204,38 +253,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
       {
         id: "actions",
         header: () => <span className="sr-only">Действия</span>,
-        cell: ({ row }) => {
-          const tunnel = row.original
-          return (
-            <div className="flex justify-end">
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  render={
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="icon"
-                      className={cn(
-                        "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}`}
-                    >
-                      <MoreHorizontalIcon className="size-4" />
-                    </Button>
-                  }
-                />
-                <DropdownMenuContent side="bottom" align="end">
-                  <DropdownMenuItem onClick={() => onExport(tunnel)}>
-                    <CodeXmlIcon className="size-4" />
-                    Экспорт .rsc
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          )
-        },
+        cell: VxlanActionsCell,
         enableSorting: false,
         size: 72,
         meta: {
@@ -244,7 +262,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
         },
       },
     ],
-    [onExport, serverMap, failedServerIds],
+    [serverMap, failedServerIds],
   )
 
   const table = useTable({
@@ -275,6 +293,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
   }
 
   return (
+    <VxlanActionsContext.Provider value={onExport}>
     <DataGridShell
       table={table}
       recordCount={tunnels.length}
@@ -289,6 +308,7 @@ function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: Vxl
         <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
       </DataGridContainer>
     </DataGridShell>
+    </VxlanActionsContext.Provider>
   )
 }