implement setting page (#12)

2026-09-19 17:50:13 +00:00 · 2024-11-23 21:59:48 +08:00
parent f17bdbf760
commit 3b5023061b
21 changed files with 941 additions and 36 deletions
@@ -0,0 +1,167 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { ModelWAF, wafBlockReasons } from "@/types"
+import { deleteWAF } from "@/api/waf"
+import { ip16Str } from "@/lib/utils"
+import { SettingsTab } from "@/components/settings-tab"
+
+export default function WAFPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelWAF[]>("/api/v1/waf", swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelWAF>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "IP",
+            accessorKey: "ip",
+            accessorFn: row => ip16Str(row.ip ?? []),
+        },
+        {
+            header: "Count",
+            accessorKey: "count",
+            accessorFn: row => row.count,
+        },
+        {
+            header: "Last Block Reason",
+            accessorKey: "lastBlockReason",
+            accessorFn: row => row.last_block_reason,
+            cell: ({ row }) => (
+                <span>{wafBlockReasons[row.original.last_block_reason] || ''}</span>
+            )
+        },
+        {
+            header: "Last Block Time",
+            accessorKey: "lastBlockTime",
+            accessorFn: row => row.last_block_timestamp,
+            cell: ({ row }) => {
+                const s = row.original;
+                const date = new Date(s.last_block_timestamp || 0);
+                return <span>{date.toISOString()}</span>
+            }
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{
+                        fn: deleteWAF,
+                        id: ip16Str(s.ip ?? []),
+                        mutate: mutate,
+                    }}>
+                        <></>
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <SettingsTab className="mt-6 w-full" />
+            <div className="flex mt-4 mb-4">
+                <HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
+                    fn: deleteWAF,
+                    id: selectedRows.map(r => ip16Str(r.original.ip ?? [])),
+                    mutate: mutate,
+                }}>
+                    <></>
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div>
+    )
+}