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,171 @@
+"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 { RouteIcon } from "lucide-react"
+
+export interface OspfRouteRow {
+  id: string
+  destination: string
+  type: "O" | "O IA" | "O E1" | "O E2"
+  cost: number
+  nextHop: string
+  via: string
+  serverId: string
+  serverLabel: string
+  area: string
+}
+
+function routeTypeClass(type: OspfRouteRow["type"]) {
+  if (type === "O") return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25"
+  if (type === "O IA") return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25"
+  if (type === "O E1") return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/25"
+  return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/25"
+}
+
+interface OspfRoutesDataGridProps {
+  routes: OspfRouteRow[]
+}
+
+function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) {
+  const columns = useMemo<ColumnDef<OspfRouteRow>[]>(
+    () => [
+      {
+        id: "destination",
+        accessorKey: "destination",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Назначение" className="ml-1" />
+        ),
+        cell: ({ row }) => <span className="font-mono">{row.original.destination}</span>,
+        meta: {
+          headerTitle: "Назначение",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "type",
+        accessorKey: "type",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
+              routeTypeClass(row.original.type),
+            )}
+          >
+            {row.original.type}
+          </span>
+        ),
+        meta: { headerTitle: "Тип", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+      },
+      {
+        id: "cost",
+        accessorKey: "cost",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
+        cell: ({ row }) => (
+          <span className="font-mono tabular-nums text-center block">{row.original.cost}</span>
+        ),
+        meta: {
+          headerTitle: "Cost",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
+        },
+      },
+      {
+        id: "nextHop",
+        accessorKey: "nextHop",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Следующий хоп" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.nextHop}</span>
+        ),
+        meta: {
+          headerTitle: "Следующий хоп",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "via",
+        accessorKey: "via",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.via}</span>
+        ),
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "serverLabel",
+        accessorKey: "serverLabel",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Роутер" />,
+        cell: ({ row }) => <span className="font-mono">{row.original.serverLabel}</span>,
+        meta: {
+          headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "area",
+        accessorKey: "area",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-muted-foreground">{row.original.area}</span>
+        ),
+        meta: {
+          headerTitle: "Область",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: routes,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (routes.length === 0) {
+    return (
+      <EmptyState
+        icon={<RouteIcon className="size-4" />}
+        title="Нет OSPF-маршрутов"
+        className="border-0 py-10"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={routes.length}
+      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
+      tableLayout={{ dense: true }}
+    />
+  )
+}
+
+export { OspfRoutesDataGrid, type OspfRoutesDataGridProps, routeTypeClass }