feat(traffic): добавить приём Traffic Flow с jump-host

Чтобы видеть «кто с кем», а не только объём порта: IPFIX внутри WG на хосте Docker MM, REST-счётчики не трогаем. Co-authored-by: Cursor <[email protected]>
2026-09-06 21:54:30 +07:00
parent 5884bd8873
commit 1e9312acbd
24 changed files with 2007 additions and 71 deletions
@@ -0,0 +1,104 @@
+"use client"
+
+import { useMemo } from "react"
+import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import type { FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
+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 { fmtRate } from "@/lib/fmt-rate"
+import { cn } from "@/lib/utils"
+
+function formatBytes(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)} ГБ`
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)} МБ`
+  if (n >= 1000) return `${(n / 1000).toFixed(1)} КБ`
+  return `${n} Б`
+}
+
+function TrafficFlowsDataGrid({ rows }: { rows: FlowTalkerDto[] }) {
+  const columns = useMemo<ColumnDef<FlowTalkerDto>[]>(
+    () => [
+      {
+        id: "server",
+        accessorKey: "serverName",
+        header: () => <span className="text-xs font-medium text-muted-foreground">JH</span>,
+        cell: ({ row }) => <span className="text-sm font-medium">{row.original.serverName}</span>,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
+      },
+      {
+        id: "src",
+        accessorKey: "src",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Src</span>,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {row.original.src}
+            {row.original.srcPort ? `:${row.original.srcPort}` : ""}
+          </span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "dst",
+        accessorKey: "dst",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Dst</span>,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">
+            {row.original.dst}
+            {row.original.dstPort ? `:${row.original.dstPort}` : ""}
+          </span>
+        ),
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "proto",
+        accessorKey: "protoName",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Proto</span>,
+        cell: ({ row }) => <span className="text-xs">{row.original.protoName}</span>,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "rate",
+        accessorFn: (r) => r.bps,
+        header: () => <span className="text-xs font-medium text-muted-foreground">Скорость</span>,
+        cell: ({ row }) => <span className="text-xs tabular-nums">{fmtRate(row.original.bps / 1_000_000)}</span>,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "bytes",
+        accessorKey: "bytes",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Байты</span>,
+        cell: ({ row }) => <span className="text-xs tabular-nums">{formatBytes(row.original.bytes)}</span>,
+        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "iface",
+        accessorKey: "inIface",
+        header: () => <span className="text-xs font-medium text-muted-foreground">Iface</span>,
+        cell: ({ row }) => <span className="font-mono text-xs text-muted-foreground">{row.original.inIface || "—"}</span>,
+        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: cn(DATA_GRID_CELL_PAD_LAST) },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row, i) => `${row.serverId}-${row.src}-${row.dst}-${row.proto}-${row.srcPort}-${row.dstPort}-${i}`,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      emptyMessage="Пока нет IPFIX. Поднимите wg-flow на хосте MM и подключите jump-host одним кликом."
+    />
+  )
+}
+
+export { TrafficFlowsDataGrid }