feat: refactor components to utilize DataGridCard for improved UI consistency

Updated various components including AccessApiKeysCard, FirewallClientsGrid, FirewallRulesGrid, ModuleEntriesSection, and DirectoriesComponent to replace traditional card and table structures with the new DataGridCard component. This change enhances the user interface by providing a more consistent layout and improved loading states. Additionally, integrated QueryState for better handling of loading and error scenarios across these components, streamlining the overall user experience.
2026-07-09 02:31:50 +07:00
parent 5d1102b497
commit b321aa5321
33 changed files with 2281 additions and 1330 deletions
@@ -0,0 +1,77 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { PeerRow } from '@/types/api'
+
+export function NetworkPeersGrid({
+  items,
+  isLoading = false,
+}: {
+  items: PeerRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<PeerRow>[]>(
+    () => [
+      {
+        id: 'name',
+        accessorFn: (row) => row.name ?? row.neighbor,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
+        cell: ({ row }) => (
+          <span className="font-medium">{row.original.name ?? row.original.neighbor}</span>
+        ),
+        meta: { headerTitle: 'Имя' },
+      },
+      {
+        accessorKey: 'neighbor',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Neighbor" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.neighbor}</span>,
+        meta: { headerTitle: 'Neighbor' },
+      },
+      {
+        accessorKey: 'remote_asn',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="ASN" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">{row.original.remote_asn ?? '—'}</span>
+        ),
+        meta: { headerTitle: 'ASN' },
+      },
+      {
+        accessorKey: 'session_state',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1">
+            <StatusBadge status={row.original.session_state} />
+            {row.original.session_mismatch ? (
+              <Badge variant="warning" className="ml-1">
+                mismatch
+              </Badge>
+            ) : null}
+          </div>
+        ),
+        meta: { headerTitle: 'Состояние' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<PeerRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет пиров"
+    />
+  )
+}
@@ -0,0 +1,78 @@
+import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { useMemo } from 'react'
+
+import { DataGridShell } from '@/components/data-grid-shell'
+import { StatusBadge } from '@/components/status-badge'
+import { Badge } from '@/components/reui/badge'
+import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
+import { createClientDataGridOptions } from '@/lib/data-grid-defaults'
+import type { SpeakerRow } from '@/types/api'
+
+export function NetworkSpeakersGrid({
+  items,
+  isLoading = false,
+}: {
+  items: SpeakerRow[]
+  isLoading?: boolean
+}) {
+  const columns = useMemo<ColumnDef<SpeakerRow>[]>(
+    () => [
+      {
+        accessorKey: 'endpoint',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Endpoint" />,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.endpoint}</span>,
+        meta: { headerTitle: 'Endpoint' },
+      },
+      {
+        accessorKey: 'role',
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Роль" />,
+        cell: ({ row }) => <Badge variant="outline">{row.original.role}</Badge>,
+        meta: { headerTitle: 'Роль' },
+      },
+      {
+        id: 'agent',
+        enableSorting: false,
+        header: 'Agent',
+        cell: ({ row }) => {
+          const live = row.original.live
+          if (live?.agent_ok === true) return <StatusBadge status="ok" label="online" />
+          if (live?.agent_ok === false) return <StatusBadge status="error" label="offline" />
+          return <Badge variant="outline">—</Badge>
+        },
+        meta: { headerTitle: 'Agent' },
+      },
+      {
+        id: 'bgp',
+        enableSorting: false,
+        header: 'BGP',
+        cell: ({ row }) => {
+          const live = row.original.live
+          if (!live) return '—'
+          return (
+            <span className="text-xs">
+              {live.bgp_established ?? 0} / {live.bgp_sessions_total ?? 0}
+            </span>
+          )
+        },
+        meta: { headerTitle: 'BGP' },
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    ...createClientDataGridOptions<SpeakerRow>(),
+    getRowId: (row) => row.id,
+  })
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={items.length}
+      isLoading={isLoading}
+      emptyMessage="Нет спикеров"
+    />
+  )
+}