fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

2026-06-30 22:22:51 +07:00
parent a1a9124f3d
commit d3a2d38b37
63 changed files with 8509 additions and 3652 deletions
@@ -0,0 +1,178 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+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 { ClockIcon } from "lucide-react"
+
+export interface SpeedProbeApiRow {
+  id: string
+  srcServerId: string
+  dstServerId: string
+  srcInterface: string
+  dstInterface: string
+  protocol: string
+  direction: string
+  durationSec: string
+  enabled: boolean
+  lastRunAt: string | null
+  lastTxAvgMbps: number | null
+  lastRxAvgMbps: number | null
+  lastStatus: string | null
+  lastError: string | null
+}
+
+interface ProbesSpeedProbesDataGridProps {
+  rows: SpeedProbeApiRow[]
+  serverName: (id: string) => string
+}
+
+function ProbesSpeedProbesDataGrid({ rows, serverName }: ProbesSpeedProbesDataGridProps) {
+  const columns = useMemo<ColumnDef<SpeedProbeApiRow>[]>(
+    () => [
+      {
+        id: "src",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Источник" className="ml-1" />,
+        accessorFn: (row) => row.srcServerId,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="truncate font-mono text-xs block">
+              {serverName(r.srcServerId)}
+              {r.srcInterface ? ` · ${r.srcInterface}` : ""}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Источник",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "dst",
+        accessorFn: (row) => row.dstServerId,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="truncate font-mono text-xs block">
+              {serverName(r.dstServerId)}
+              {r.dstInterface ? ` · ${r.dstInterface}` : ""}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "protocol",
+        accessorKey: "protocol",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Протокол" />,
+        cell: ({ row }) => <span className="text-xs">{row.original.protocol.toUpperCase()}</span>,
+        meta: {
+          headerTitle: "Протокол",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "durationSec",
+        accessorKey: "durationSec",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сек" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.durationSec}s</span>,
+        meta: {
+          headerTitle: "Сек",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "enabled",
+        accessorKey: "enabled",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Вкл" />,
+        cell: ({ row }) => <span className="text-xs">{row.original.enabled ? "да" : "нет"}</span>,
+        meta: {
+          headerTitle: "Вкл",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "lastRunAt",
+        accessorKey: "lastRunAt",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Последний запуск" />,
+        cell: ({ row }) => {
+          const r = row.original
+          return (
+            <span className="text-xs text-muted-foreground truncate block">
+              {r.lastRunAt ?? "—"}
+              {r.lastStatus === "done" && r.lastTxAvgMbps != null && (
+                <span className="text-emerald-600 dark:text-emerald-400 ml-1">
+                  TX≈{r.lastTxAvgMbps.toFixed(1)} RX≈{(r.lastRxAvgMbps ?? 0).toFixed(1)} Mb/s
+                </span>
+              )}
+              {r.lastStatus === "error" && r.lastError && (
+                <span className="text-destructive ml-1 truncate">{r.lastError}</span>
+              )}
+            </span>
+          )
+        },
+        meta: {
+          headerTitle: "Последний запуск",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [serverName],
+  )
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (rows.length === 0) {
+    return (
+      <EmptyState
+        icon={<ClockIcon className="size-4" />}
+        title="Нет записей speed-test"
+        description="Настраиваются через API PUT /api/uptime/speed-probes"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
+      }}
+    />
+  )
+}
+
+export { ProbesSpeedProbesDataGrid, type ProbesSpeedProbesDataGridProps }