[]>(
() => [
{
@@ -82,7 +94,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
{iface.name}
-
+
{iface.serverName}
@@ -97,7 +109,11 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
headerClassName: DATA_GRID_CELL_PAD_FIRST,
cellClassName: DATA_GRID_CELL_PAD_FIRST,
expandedContent: (row: WgIfaceWithServer) => (
-
+ onDeletePeer(row, peerId) : undefined}
+ onExportPeer={onExportPeer ? (peerId) => onExportPeer(row, peerId) : undefined}
+ />
),
},
},
@@ -203,26 +219,32 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
onExport(iface)}>
- Экспорт .rsc
-
-
-
- Редактировать
-
-
-
- Добавить пира
-
-
-
-
- {iface.enabled ? "Отключить" : "Включить"}
-
-
-
-
- Удалить
+ Экспорт
+ {onAddPeer && (
+ onAddPeer(iface)}>
+
+ Добавить пира
+
+ )}
+ {onToggle && (
+ <>
+
+ onToggle(iface)}>
+
+ {iface.enabled ? "Отключить" : "Включить"}
+
+
+ )}
+ {onDelete && (
+ <>
+
+ onDelete(iface)}>
+
+ Удалить
+
+
+ )}
@@ -236,7 +258,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
},
},
],
- [onExport],
+ [onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
)
const table = useReactTable({
diff --git a/components/data-grids/wireguard-peers-detail.tsx b/components/data-grids/wireguard-peers-detail.tsx
index f98152f..bc4cb20 100644
--- a/components/data-grids/wireguard-peers-detail.tsx
+++ b/components/data-grids/wireguard-peers-detail.tsx
@@ -2,10 +2,13 @@
import type { WireGuardPeer } from "@/lib/data"
import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
import {
ArrowDownIcon,
ArrowUpIcon,
+ CodeXmlIcon,
KeyRoundIcon,
+ Trash2Icon,
} from "lucide-react"
function fmtBytes(n: number | undefined): string {
@@ -21,7 +24,19 @@ function truncKey(key: string): string {
return `${key.slice(0, 8)}…${key.slice(-8)}`
}
-function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
+function peerKey(peer: WireGuardPeer, index: number): string {
+ return peer.id ?? peer.rosId ?? peer.publicKey ?? String(index)
+}
+
+function WireGuardPeersDetail({
+ peers,
+ onDeletePeer,
+ onExportPeer,
+}: {
+ peers: WireGuardPeer[]
+ onDeletePeer?: (peerId: string) => void
+ onExportPeer?: (peerId: string) => void
+}) {
if (peers.length === 0) {
return (
@@ -32,48 +47,84 @@ function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
return (
-
+
Public Key
Allowed IPs
Последнее рукопожатие
RX / TX
Endpoint
+ Действия
- {peers.map((peer) => (
-
-
-
-
- {truncKey(peer.publicKey)}
-
-
-
- {peer.allowedIps.join(", ")}
-
-
{
+ const id = peerKey(peer, index)
+ return (
+
- {peer.latestHandshake ?? "нет рукопожатия"}
-
-
-
-
- {fmtBytes(peer.transferRx)}
-
-
-
- {fmtBytes(peer.transferTx)}
+
+
+
+ {truncKey(peer.publicKey)}
+
+
+
+ {peer.allowedIps.join(", ")}
+
+
+ {peer.latestHandshake ?? "нет рукопожатия"}
+
+
+
+ {fmtBytes(peer.transferRx)}
+
+
+
+ {fmtBytes(peer.transferTx)}
+
+
+ {onExportPeer && (
+
+ )}
+ {onDeletePeer && (
+
+ )}
+
-
{peer.endpoint ?? "—"}
-
)
}
diff --git a/components/wireguard/wg-create-sheet.tsx b/components/wireguard/wg-create-sheet.tsx
new file mode 100644
index 0000000..f83d519
--- /dev/null
+++ b/components/wireguard/wg-create-sheet.tsx
@@ -0,0 +1,232 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+ Sheet, SheetContent, SheetHeader, SheetTitle,
+ SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/sheet"
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react"
+
+export type WgCreateFormState = {
+ serverId: string
+ name: string
+ listenPort: string
+ mtu: string
+ comment: string
+ address: string
+ enabled: boolean
+ showAdvanced: boolean
+ peerEnabled: boolean
+ peerPublicKey: string
+ peerAllowedIps: string
+ peerEndpoint: string
+ peerKeepalive: string
+ peerComment: string
+}
+
+export const defaultWgCreateForm = (): WgCreateFormState => ({
+ serverId: "",
+ name: "",
+ listenPort: "13231",
+ mtu: "1420",
+ comment: "",
+ address: "",
+ enabled: true,
+ showAdvanced: false,
+ peerEnabled: false,
+ peerPublicKey: "",
+ peerAllowedIps: "",
+ peerEndpoint: "",
+ peerKeepalive: "25",
+ peerComment: "",
+})
+
+type ServerOption = { id: string; name: string; host: string }
+
+function WgCreateSheet({
+ open,
+ onOpenChange,
+ servers,
+ busy,
+ onSubmit,
+}: {
+ open: boolean
+ onOpenChange: (v: boolean) => void
+ servers: ServerOption[]
+ busy?: boolean
+ onSubmit: (form: WgCreateFormState) => void | Promise
+}) {
+ const [form, setForm] = useState(defaultWgCreateForm)
+ const set = (k: K, v: WgCreateFormState[K]) =>
+ setForm((f) => ({ ...f, [k]: v }))
+
+ const canSubmit = useMemo(() => {
+ return Boolean(form.serverId && form.name.trim() && form.listenPort)
+ }, [form.serverId, form.name, form.listenPort])
+
+ return (
+ {
+ if (v) setForm(defaultWgCreateForm())
+ onOpenChange(v)
+ }}
+ >
+
+
+ Быстрый туннель WireGuard
+
+ Создать интерфейс на выбранном MikroTik (ключи сгенерирует RouterOS)
+
+
+
+
+
+
Основные
+
+
+
+
+ set("name", e.target.value)}
+ />
+
+
+
+ set("listenPort", e.target.value)}
+ />
+
+
+ set("mtu", e.target.value)}
+ />
+
+
+
+ set("comment", e.target.value)}
+ placeholder="MSK → SPB overlay"
+ />
+
+
+
+
Включён
+
disabled=no на роутере
+
+
set("enabled", v)} />
+
+
+
+
+
+ {form.showAdvanced && (
+
+ )}
+
+
+ Экспорт WireGuard
+
+ {iface ? `${iface.name} · ${iface.serverName}` : "—"}
+
+
+
+
+
+
+
+
setTab(v as typeof tab)}>
+
+ MikroTik .rsc
+ Native .conf
+ Peer .conf
+
+ {onRequestLiveExport && (
+
+
+
+ )}
+
+
+
+
+
+
+ {code.split("\n").map((line, i) => {
+ const isComment = line.startsWith("#")
+ const isCmd = line.trimStart().startsWith("/interface") || line.trimStart().startsWith("/ip")
+ const isSection = line.startsWith("[")
+ const isParam = /^\s+[a-z]/.test(line) || /^[A-Za-z]+=/.test(line)
+ return (
+
+ {line}{"\n"}
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ Содержимое
+
+