1156 lines
59 KiB
TypeScript
1156 lines
59 KiB
TypeScript
"use client"
|
||
|
||
import { Suspense, useCallback, useEffect, useRef, useMemo, useState } from "react"
|
||
import Link from "next/link"
|
||
import { useRouter, useSearchParams } from "next/navigation"
|
||
import { Alert, AlertTitle, AlertDescription } from "@/components/reui/alert"
|
||
import { PageHeader } from "@/components/page-header"
|
||
import { DataPageCard } from "@/components/data-page-card"
|
||
import { DataPageToolbar, DataPageToolbarFrame } from "@/components/data-page-toolbar"
|
||
import { GreTunnelsDataGrid } from "@/components/data-grids/gre-tunnels-data-grid"
|
||
import { GrePoolsDataGrid } from "@/components/data-grids/gre-pools-data-grid"
|
||
import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
|
||
import { greTunnels as mockGreTunnels, grePools as mockGrePools, servers as mockServers } from "@/lib/data"
|
||
import type { GrePool, GreTunnel, GreStatus, IpsecEncAlg, IpsecAuthAlg, IpsecDhGroup, IkeVersion, Server } from "@/lib/data"
|
||
import { useDataSource } from "@/lib/data-source"
|
||
import { greResponseSchema } from "@/lib/gre-response"
|
||
import { vxlanServersSchema } from "@/lib/vxlan-response"
|
||
import type { z } from "zod"
|
||
import { requestJson } from "@/shared/api/http-client"
|
||
import { cn } from "@/lib/utils"
|
||
import { toast } from "sonner"
|
||
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
|
||
import { OpsPanel } from "@/components/ops-panel"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { ConfigHistorySheet } from "@/components/config-history-sheet"
|
||
import { parseConfigRevisions, type ConfigRevisionDto } from "@/lib/config-revisions"
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogMedia,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog"
|
||
import {
|
||
Sheet, SheetContent, SheetHeader, SheetTitle,
|
||
SheetDescription, SheetFooter, SheetClose,
|
||
} from "@/components/ui/sheet"
|
||
import {
|
||
PlusIcon, RefreshCwIcon,
|
||
LockIcon, ShieldCheckIcon, NetworkIcon,
|
||
EyeIcon, EyeOffIcon, ChevronDownIcon, ChevronRightIcon,
|
||
Trash2Icon,
|
||
DatabaseIcon, HistoryIcon,
|
||
} from "lucide-react"
|
||
import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
|
||
import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
|
||
import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
|
||
|
||
// ─── label maps ─────────────────────────────────────────────────────────────
|
||
|
||
const ENC_LABELS: Record<IpsecEncAlg, string> = { "aes-128": "AES-128", "aes-192": "AES-192", "aes-256": "AES-256" }
|
||
const AUTH_LABELS: Record<IpsecAuthAlg, string> = { sha1: "SHA-1", sha256: "SHA-256", sha512: "SHA-512" }
|
||
const DH_LABELS: Record<IpsecDhGroup, string> = {
|
||
modp1024: "DH-2 (1024)", modp2048: "DH-14 (2048)", modp4096: "DH-16 (4096)",
|
||
ecp256: "ECP-256", ecp384: "ECP-384", ecp521: "ECP-521",
|
||
}
|
||
const IKE_LABELS: Record<IkeVersion, string> = { ikev1: "IKEv1", ikev2: "IKEv2" }
|
||
|
||
const ENC_ROS: Record<IpsecEncAlg, string> = { "aes-128": "aes-128-cbc", "aes-192": "aes-192-cbc", "aes-256": "aes-256-cbc" }
|
||
const AUTH_ROS: Record<IpsecAuthAlg, string> = { sha1: "sha1", sha256: "sha256", sha512: "sha512" }
|
||
|
||
const STATUS_MAP: Record<GreStatus, { label: string; dot: string }> = {
|
||
up: { label: "Up", dot: "bg-emerald-500" },
|
||
degraded: { label: "Degraded", dot: "bg-amber-500" },
|
||
down: { label: "Down", dot: "bg-red-500" },
|
||
}
|
||
|
||
function greStatusMeta(status: GreStatus | undefined) {
|
||
return STATUS_MAP[status ?? "degraded"] ?? STATUS_MAP.degraded
|
||
}
|
||
|
||
// ─── RouterOS code generator ─────────────────────────────────────────────────
|
||
|
||
function generateRosCommands(t: GreTunnel, serverById: Record<string, Server>): string {
|
||
const lines: string[] = []
|
||
const srv = serverById[t.serverId]
|
||
|
||
lines.push(`# Сервер: ${srv?.name ?? t.serverId} (${srv?.host ?? ""})`)
|
||
lines.push(`# Сгенерировано MikrotikManager · ${new Date().toLocaleDateString("ru")}`)
|
||
lines.push("")
|
||
|
||
// GRE interface
|
||
lines.push("# ── GRE-интерфейс ────────────────────────────────────────────")
|
||
const greParts = [
|
||
`/interface gre add`,
|
||
` name=${t.name}`,
|
||
` remote-address=${t.remoteAddress}`,
|
||
t.localAddress !== "0.0.0.0" ? ` local-address=${t.localAddress}` : null,
|
||
t.ipsec ? ` ipsec-secret="${t.ipsec.secret}"` : null,
|
||
` mtu=${t.mtu}`,
|
||
t.keepaliveInterval > 0 ? ` keepalive=${t.keepaliveInterval}s,${t.keepaliveRetries}` : ` keepalive=0`,
|
||
` dscp=${t.dscp}`,
|
||
` clamp-tcp-mss=${t.clampTcpMss ? "yes" : "no"}`,
|
||
` allow-fast-path=${t.allowFastPath ? "yes" : "no"}`,
|
||
t.comment ? ` comment="${t.comment}"` : null,
|
||
!t.enabled ? ` disabled=yes` : null,
|
||
].filter(Boolean) as string[]
|
||
lines.push(greParts.join(" \\\n"))
|
||
|
||
// Inner IP
|
||
lines.push("")
|
||
lines.push("# ── Внутренний IP ────────────────────────────────────────────")
|
||
lines.push(`/ip address add \\`)
|
||
lines.push(` address=${t.localInnerIp} \\`)
|
||
lines.push(` interface=${t.name}`)
|
||
|
||
// IPsec: live CHR имеет только ipsec-secret; proposal — у моков/формы
|
||
if (t.ipsec?.encAlg && t.ipsec.authAlg) {
|
||
const ikeMode = t.ipsec.ikeVersion === "ikev1" ? "ike1" : "ike2"
|
||
const pfsGroup = t.ipsec.pfs ? (t.ipsec.dhGroup ?? "none") : "none"
|
||
|
||
lines.push("")
|
||
lines.push("# ── IPsec (авто через ipsec-secret; ручной эквивалент) ───────")
|
||
lines.push("")
|
||
lines.push(`/ip ipsec peer add \\`)
|
||
lines.push(` name=${t.name} \\`)
|
||
lines.push(` address=${t.remoteAddress} \\`)
|
||
lines.push(` exchange-mode=${ikeMode} \\`)
|
||
lines.push(` auth-method=pre-shared-key \\`)
|
||
lines.push(` secret="${t.ipsec.secret}"`)
|
||
lines.push("")
|
||
lines.push(`/ip ipsec proposal add \\`)
|
||
lines.push(` name=${t.name} \\`)
|
||
lines.push(` enc-algorithms=${ENC_ROS[t.ipsec.encAlg]} \\`)
|
||
lines.push(` auth-algorithms=${AUTH_ROS[t.ipsec.authAlg]} \\`)
|
||
lines.push(` pfs-group=${pfsGroup} \\`)
|
||
lines.push(` lifetime=${t.ipsec.lifetime ?? "1d"}`)
|
||
lines.push("")
|
||
lines.push(`/ip ipsec policy add \\`)
|
||
lines.push(` src-address=${t.localAddress !== "0.0.0.0" ? t.localAddress + "/32" : "0.0.0.0/0"} \\`)
|
||
lines.push(` dst-address=${t.remoteAddress}/32 \\`)
|
||
lines.push(` proposal=${t.name} \\`)
|
||
lines.push(` tunnel=yes`)
|
||
} else if (t.ipsec) {
|
||
lines.push("")
|
||
lines.push("# IPsec: peer/policy создаёт RouterOS по ipsec-secret")
|
||
}
|
||
|
||
return lines.join("\n")
|
||
}
|
||
|
||
// ─── small ui helpers ────────────────────────────────────────────────────────
|
||
|
||
// ─── Live API (как на /filters) ─────────────────────────────────────────────
|
||
|
||
type BackendServer = z.infer<typeof vxlanServersSchema>[number]
|
||
type InventoryServer = Server & { monitoringUnknown?: boolean }
|
||
|
||
function makeApiFetch(backendUrl: string) {
|
||
return async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
|
||
return requestJson<T>(backendUrl, path, init)
|
||
}
|
||
}
|
||
|
||
function mapBackendToServer(s: BackendServer): InventoryServer {
|
||
return {
|
||
id: String(s.id),
|
||
name: s.name || s.host,
|
||
host: s.host,
|
||
model: "—",
|
||
os: "—",
|
||
site: s.site ?? "",
|
||
country: s.country || "UN",
|
||
asn: s.asn ?? "",
|
||
type: s.type ?? "exit-node",
|
||
enabled: s.enabled,
|
||
status: s.status ?? "offline",
|
||
monitoringUnknown: s.status == null,
|
||
latency: s.latency != null ? Math.round(s.latency) : null,
|
||
sessions: 0,
|
||
}
|
||
}
|
||
|
||
function derivePoolsFromTunnels(tunnels: GreTunnel[]): GrePool[] {
|
||
const ids = [...new Set(tunnels.map((t) => t.poolId).filter(Boolean))]
|
||
return ids.map((id) => {
|
||
const list = tunnels.filter((t) => t.poolId === id)
|
||
const allocated = list.length
|
||
return {
|
||
id,
|
||
name: id === "live" ? "С устройств (опрос)" : id,
|
||
cidr: "—",
|
||
allocated,
|
||
total: Math.max(allocated, 1),
|
||
comment: "По poolId из данных GRE",
|
||
}
|
||
})
|
||
}
|
||
|
||
// ─── default form states ─────────────────────────────────────────────────────
|
||
|
||
const defaultTunnelForm = {
|
||
name: "", serverId: "", localAddress: "", remoteAddress: "",
|
||
poolId: "", localInnerIp: "", remoteInnerIp: "", comment: "", enabled: true,
|
||
ipsecEnabled: false, ipsecSecret: "", ipsecShowSecret: false,
|
||
ipsecIkeVersion: "ikev2" as IkeVersion,
|
||
ipsecEncAlg: "aes-256" as IpsecEncAlg,
|
||
ipsecAuthAlg: "sha256" as IpsecAuthAlg,
|
||
ipsecDhGroup: "modp2048" as IpsecDhGroup,
|
||
ipsecLifetime: "1d 00:00:00", ipsecPfs: true,
|
||
mtu: 1476, keepaliveInterval: 10, keepaliveRetries: 10,
|
||
dscp: "inherit", clampTcpMss: true, allowFastPath: true,
|
||
showAdvanced: false,
|
||
}
|
||
|
||
const defaultPoolForm = { name: "", cidr: "", comment: "" }
|
||
|
||
type TabFilter = "all" | "up" | "ipsec" | "plain"
|
||
type PageTab = "tunnels" | "pools"
|
||
|
||
// ════════════════════════════════════════════════════════════════════════════
|
||
function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, onSelectServer }: {
|
||
selectedServerId: string
|
||
selectedTunnelId: string | null
|
||
allTunnelsHref: string
|
||
onSelectServer: (id: string) => void
|
||
}) {
|
||
const { mode, backendUrl } = useDataSource()
|
||
const isLive = mode === "live"
|
||
const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])
|
||
|
||
const [liveServers, setLiveServers] = useState<InventoryServer[]>([])
|
||
const [liveTunnels, setLiveTunnels] = useState<GreTunnel[]>([])
|
||
const [dataLoading, setDataLoading] = useState(true)
|
||
const [dataError, setDataError] = useState<string | null>(null)
|
||
const [failures, setFailures] = useState<z.infer<typeof greResponseSchema>["failures"]>([])
|
||
const failedServerIds = useMemo(() => failures.map(f => f.serverId), [failures])
|
||
const [hasLoaded, setHasLoaded] = useState(false)
|
||
const loadEpoch = useRef(0)
|
||
useEffect(() => () => { loadEpoch.current += 1 }, [])
|
||
|
||
const [pageTab, setPageTab] = useState<PageTab>("tunnels")
|
||
const [tabFilter, setTabFilter] = useState<TabFilter>("all")
|
||
const [search, setSearch] = useState("")
|
||
|
||
const [tunnelOpen, setTunnelOpen] = useState(false)
|
||
const [tunnelMode, setTunnelMode] = useState<"create" | "edit">("create")
|
||
const [editingTunnel, setEditingTunnel] = useState<GreTunnel | null>(null)
|
||
const [pendingDelete, setPendingDelete] = useState<GreTunnel | null>(null)
|
||
const formLock = useRef(false)
|
||
const [formError, setFormError] = useState<string | null>(null)
|
||
const toggleLock = useRef(false)
|
||
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||
const [toggleError, setToggleError] = useState<string | null>(null)
|
||
const deleteLock = useRef(false)
|
||
const [deleteError, setDeleteError] = useState<string | null>(null)
|
||
const [mutateBusy, setMutateBusy] = useState(false)
|
||
const [liveStale, setLiveStale] = useState(false)
|
||
const [historyOpen, setHistoryOpen] = useState(false)
|
||
const [revisions, setRevisions] = useState<ConfigRevisionDto[]>([])
|
||
const [historyLoading, setHistoryLoading] = useState(false)
|
||
const [historyError, setHistoryError] = useState<string | null>(null)
|
||
const historyEpoch = useRef(0)
|
||
const [historyRestoring, setHistoryRestoring] = useState(false)
|
||
const [poolOpen, setPoolOpen] = useState(false)
|
||
const [codePreviewTunnel, setCodePreviewTunnel] = useState<GreTunnel | null>(null)
|
||
|
||
const [tForm, setTForm] = useState(defaultTunnelForm)
|
||
const [pForm, setPForm] = useState(defaultPoolForm)
|
||
|
||
const setT = <K extends keyof typeof defaultTunnelForm>(k: K, v: (typeof defaultTunnelForm)[K]) =>
|
||
setTForm((f) => ({ ...f, [k]: v }))
|
||
|
||
const loadLive = useCallback(async () => {
|
||
if (!isLive) return
|
||
const epoch = ++loadEpoch.current
|
||
setDataLoading(true)
|
||
try {
|
||
const [serversPayload, tunnelsPayload] = await Promise.all([
|
||
apiFetch<unknown>("/api/servers"), apiFetch<unknown>("/api/gre/tunnels"),
|
||
])
|
||
if (epoch !== loadEpoch.current) return
|
||
const inventory = vxlanServersSchema.safeParse(serversPayload)
|
||
const response = greResponseSchema.safeParse(tunnelsPayload)
|
||
if (!inventory.success || !response.success) throw new Error("Некорректный ответ загрузки GRE")
|
||
const failedIds = new Set(response.data.failures.map(f => f.serverId))
|
||
const enabledIds = new Set(inventory.data.filter(s => s.enabled).map(s => String(s.id)))
|
||
setLiveServers(inventory.data.map(mapBackendToServer))
|
||
setLiveTunnels(previous => [...response.data.tunnels, ...previous.filter(t => failedIds.has(t.serverId) && enabledIds.has(t.serverId))])
|
||
setFailures(response.data.failures)
|
||
setHasLoaded(true)
|
||
setDataError(null)
|
||
setLiveStale(false)
|
||
} catch (e) {
|
||
if (epoch !== loadEpoch.current) return
|
||
setDataError(e instanceof Error ? e.message : "Ошибка загрузки")
|
||
setLiveStale(true)
|
||
} finally {
|
||
if (epoch === loadEpoch.current) setDataLoading(false)
|
||
}
|
||
}, [isLive, apiFetch])
|
||
|
||
useEffect(() => {
|
||
if (!isLive) {
|
||
queueMicrotask(() => {
|
||
setLiveServers([])
|
||
setLiveTunnels([])
|
||
setDataError(null)
|
||
setLiveStale(false)
|
||
})
|
||
return
|
||
}
|
||
queueMicrotask(() => {
|
||
void loadLive()
|
||
})
|
||
}, [isLive, loadLive])
|
||
|
||
const displayTunnels = isLive ? liveTunnels : mockGreTunnels
|
||
const displayServers = isLive ? liveServers : mockServers
|
||
const displayPools = useMemo(
|
||
() => (isLive ? derivePoolsFromTunnels(displayTunnels) : mockGrePools),
|
||
[isLive, displayTunnels],
|
||
)
|
||
|
||
const greRailItems = useMemo<ServerTileItem[]>(() => (
|
||
displayServers.map((s) => ({
|
||
id: s.id,
|
||
name: s.name,
|
||
host: s.host,
|
||
site: s.site,
|
||
country: s.country,
|
||
status: isLive && (s as InventoryServer).monitoringUnknown ? undefined : s.status,
|
||
type: s.type,
|
||
enabled: s.enabled,
|
||
meta: `${displayTunnels.filter((t) => t.serverId === s.id).length}${isLive && (s as InventoryServer).monitoringUnknown ? " · Статус неизвестен" : ""}`,
|
||
}))
|
||
), [displayServers, displayTunnels, isLive])
|
||
|
||
const scopedTunnels = useMemo(() => {
|
||
if (selectedTunnelId !== null) return displayTunnels.filter(t => t.serverId === selectedServerId && t.id === selectedTunnelId)
|
||
if (selectedServerId === ALL_SERVERS_ID) return displayTunnels
|
||
return displayTunnels.filter((t) => t.serverId === selectedServerId)
|
||
}, [displayTunnels, selectedServerId, selectedTunnelId])
|
||
|
||
const selectedTunnel = selectedTunnelId === null ? undefined : scopedTunnels[0]
|
||
const selectedTunnelError = isLive && (dataError !== null || failedServerIds.includes(selectedServerId))
|
||
|
||
const serverById = useMemo(
|
||
() => Object.fromEntries(displayServers.map((s) => [s.id, s])),
|
||
[displayServers],
|
||
)
|
||
|
||
|
||
const historyServerId = selectedServerId === ALL_SERVERS_ID ? null : selectedServerId
|
||
const mutationsLocked = isLive && (mutateBusy || dataLoading || !hasLoaded || liveStale || failures.length > 0 || selectedTunnelError || historyRestoring)
|
||
|
||
useEffect(() => () => { historyEpoch.current += 1 }, [historyServerId, backendUrl, isLive])
|
||
|
||
const loadRevisions = useCallback(async () => {
|
||
if (!isLive || !historyServerId) return
|
||
const epoch = ++historyEpoch.current
|
||
setHistoryLoading(true)
|
||
setHistoryError(null)
|
||
try {
|
||
const res = await apiFetch<unknown>(
|
||
`/api/gre/revisions?serverId=${encodeURIComponent(historyServerId)}`,
|
||
)
|
||
if (epoch !== historyEpoch.current) return
|
||
setRevisions(parseConfigRevisions(res, historyServerId, "gre"))
|
||
} catch (error) {
|
||
if (epoch !== historyEpoch.current) return
|
||
setHistoryError(error instanceof Error ? error.message : "Не удалось загрузить историю")
|
||
} finally {
|
||
if (epoch === historyEpoch.current) setHistoryLoading(false)
|
||
}
|
||
}, [isLive, historyServerId, apiFetch])
|
||
|
||
const restoreRevision = useCallback(async (id: string) => {
|
||
if (!isLive || !historyServerId) return
|
||
setHistoryRestoring(true)
|
||
try {
|
||
const res = await apiFetch<{ ok: boolean }>(
|
||
`/api/gre/revisions/${encodeURIComponent(id)}/restore`,
|
||
{ method: "POST", body: JSON.stringify({ serverId: historyServerId }) },
|
||
)
|
||
if (res?.ok !== true) throw new Error("Сервер не подтвердил восстановление")
|
||
toast.success("Версия применена на роутер")
|
||
await loadLive()
|
||
await loadRevisions()
|
||
} catch (err) {
|
||
throw err
|
||
} finally {
|
||
setHistoryRestoring(false)
|
||
}
|
||
}, [isLive, historyServerId, apiFetch, loadLive, loadRevisions])
|
||
|
||
function tunnelWriteBody(form: typeof defaultTunnelForm) {
|
||
return {
|
||
serverId: form.serverId,
|
||
name: form.name.trim(),
|
||
localAddress: form.localAddress.trim() || undefined,
|
||
remoteAddress: form.remoteAddress.trim(),
|
||
localInnerIp: form.localInnerIp.trim() || undefined,
|
||
remoteInnerIp: form.remoteInnerIp.trim() || undefined,
|
||
comment: form.comment || undefined,
|
||
enabled: form.enabled,
|
||
mtu: form.mtu,
|
||
keepaliveInterval: form.keepaliveInterval,
|
||
keepaliveRetries: form.keepaliveRetries,
|
||
dscp: form.dscp,
|
||
clampTcpMss: form.clampTcpMss,
|
||
allowFastPath: form.allowFastPath,
|
||
ipsecSecret: form.ipsecEnabled ? form.ipsecSecret : undefined,
|
||
}
|
||
}
|
||
|
||
async function submitTunnel() {
|
||
if (formLock.current || mutationsLocked) return
|
||
setFormError(null)
|
||
if (!isLive) {
|
||
toast.info("Создание на роутер доступно только в live-режиме")
|
||
return
|
||
}
|
||
if (liveStale) {
|
||
toast.error("Роутер недоступен — изменения заблокированы")
|
||
return
|
||
}
|
||
if (!tForm.name.trim() || !tForm.serverId || !tForm.remoteAddress.trim()) {
|
||
setFormError("Заполните имя, сервер и удалённый адрес")
|
||
return
|
||
}
|
||
if (tForm.ipsecEnabled && tForm.ipsecSecret.trim().length < 8) {
|
||
setFormError("Для IPsec нужен PSK не короче 8 символов")
|
||
return
|
||
}
|
||
formLock.current = true
|
||
setMutateBusy(true)
|
||
try {
|
||
if (tunnelMode === "edit" && editingTunnel) {
|
||
const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
...tunnelWriteBody(tForm),
|
||
rosId: editingTunnel.id,
|
||
name: editingTunnel.name,
|
||
}),
|
||
})
|
||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение туннеля")
|
||
toast.success(`Туннель ${tForm.name} обновлён`)
|
||
} else {
|
||
const result = await apiFetch<unknown>("/api/gre/tunnels", {
|
||
method: "POST",
|
||
body: JSON.stringify(tunnelWriteBody(tForm)),
|
||
})
|
||
const confirmed = typeof result === "object" && result !== null && "name" in result && result.name === tForm.name.trim() && (
|
||
("ok" in result && result.ok === true) ||
|
||
("id" in result && typeof result.id === "string" && result.id.length > 0 &&
|
||
"serverId" in result && String(result.serverId) === tForm.serverId &&
|
||
"remoteAddress" in result && result.remoteAddress === tForm.remoteAddress.trim() &&
|
||
"enabled" in result && result.enabled === tForm.enabled)
|
||
)
|
||
if (!confirmed) throw new Error("Сервер не подтвердил создание туннеля")
|
||
toast.success(`Туннель ${tForm.name} создан`)
|
||
}
|
||
setTunnelOpen(false)
|
||
setEditingTunnel(null)
|
||
await loadLive()
|
||
} catch (err) {
|
||
setFormError(err instanceof Error ? err.message : "Не удалось сохранить туннель")
|
||
} finally {
|
||
formLock.current = false
|
||
setMutateBusy(false)
|
||
}
|
||
}
|
||
|
||
async function toggleTunnel(t: GreTunnel) {
|
||
if (!isLive || mutationsLocked || toggleLock.current) return
|
||
toggleLock.current = true
|
||
setToggleError(null)
|
||
setToggleStatus(`Ожидание изменения ${t.name}…`)
|
||
setMutateBusy(true)
|
||
try {
|
||
const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
serverId: t.serverId,
|
||
rosId: t.id,
|
||
name: t.name,
|
||
enabled: !t.enabled,
|
||
remoteAddress: t.remoteAddress,
|
||
}),
|
||
})
|
||
if (result?.ok !== true) throw new Error("Сервер не подтвердил изменение туннеля")
|
||
toast.success(t.enabled ? `Выключен ${t.name}` : `Включён ${t.name}`)
|
||
await loadLive()
|
||
} catch (err) {
|
||
setToggleError(`${t.name}: ${err instanceof Error ? err.message : "Не удалось изменить туннель"}`)
|
||
} finally {
|
||
toggleLock.current = false
|
||
setToggleStatus(null)
|
||
setMutateBusy(false)
|
||
}
|
||
}
|
||
|
||
async function confirmDeleteTunnel() {
|
||
const t = pendingDelete
|
||
if (!t || !isLive || mutationsLocked || deleteLock.current) return
|
||
deleteLock.current = true
|
||
setDeleteError(null)
|
||
setMutateBusy(true)
|
||
try {
|
||
const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", {
|
||
method: "DELETE",
|
||
body: JSON.stringify({ serverId: t.serverId, rosId: t.id, name: t.name }),
|
||
})
|
||
if (result?.ok !== true) throw new Error("Сервер не подтвердил удаление туннеля")
|
||
toast.success(`Удалён ${t.name}`)
|
||
setPendingDelete(null)
|
||
await loadLive()
|
||
} catch (err) {
|
||
setDeleteError(err instanceof Error ? err.message : "Не удалось удалить туннель")
|
||
} finally {
|
||
deleteLock.current = false
|
||
setMutateBusy(false)
|
||
}
|
||
}
|
||
|
||
function openCreateTunnel() {
|
||
setFormError(null)
|
||
setTunnelMode("create")
|
||
setEditingTunnel(null)
|
||
setTForm({
|
||
...defaultTunnelForm,
|
||
serverId: selectedServerId === ALL_SERVERS_ID ? "" : selectedServerId,
|
||
})
|
||
setTunnelOpen(true)
|
||
}
|
||
|
||
function openEditTunnel(t: GreTunnel) {
|
||
setFormError(null)
|
||
setTunnelMode("edit")
|
||
setEditingTunnel(t)
|
||
setTForm({
|
||
...defaultTunnelForm,
|
||
name: t.name,
|
||
serverId: t.serverId,
|
||
localAddress: t.localAddress === "0.0.0.0" ? "" : t.localAddress,
|
||
remoteAddress: t.remoteAddress,
|
||
poolId: t.poolId === "live" ? "" : t.poolId,
|
||
localInnerIp: t.localInnerIp,
|
||
remoteInnerIp: t.remoteInnerIp,
|
||
comment: t.comment,
|
||
enabled: t.enabled,
|
||
ipsecEnabled: !!t.ipsec,
|
||
ipsecSecret: t.ipsec?.secret ?? "",
|
||
mtu: t.mtu,
|
||
keepaliveInterval: t.keepaliveInterval,
|
||
keepaliveRetries: t.keepaliveRetries,
|
||
dscp: String(t.dscp),
|
||
clampTcpMss: t.clampTcpMss,
|
||
allowFastPath: t.allowFastPath,
|
||
})
|
||
setTunnelOpen(true)
|
||
}
|
||
|
||
const incomplete = isLive && (!hasLoaded || !!dataError || failures.length > 0)
|
||
const unknownServerIds = useMemo(() => new Set(isLive ? dataError ? displayTunnels.map(t => t.serverId) : failedServerIds : []), [isLive, dataError, displayTunnels, failedServerIds])
|
||
|
||
const filtered = useMemo(() => {
|
||
return scopedTunnels.filter((t) => {
|
||
if (tabFilter === "up" && (t.status !== "up" || unknownServerIds.has(t.serverId))) return false
|
||
if (tabFilter === "ipsec" && !t.ipsec) return false
|
||
if (tabFilter === "plain" && t.ipsec) return false
|
||
if (!search) return true
|
||
const q = search.toLowerCase()
|
||
return (
|
||
t.name.toLowerCase().includes(q) ||
|
||
t.remoteAddress.includes(q) ||
|
||
t.localInnerIp.includes(q) ||
|
||
serverById[t.serverId]?.name.toLowerCase().includes(q)
|
||
)
|
||
})
|
||
}, [tabFilter, search, scopedTunnels, serverById, unknownServerIds])
|
||
|
||
const upCount = displayTunnels.filter((t) => t.status === "up").length
|
||
const ipsecCount = displayTunnels.filter((t) => t.ipsec).length
|
||
const scopedUpCount = scopedTunnels.filter((t) => t.status === "up").length
|
||
const scopedIpsecCount = scopedTunnels.filter((t) => t.ipsec).length
|
||
|
||
const tunnelTabs: { value: TabFilter; label: string; count: number }[] = [
|
||
{ value: "all", label: "Все", count: scopedTunnels.length },
|
||
{ value: "up", label: "Активные", count: scopedUpCount },
|
||
{ value: "ipsec", label: "С IPsec", count: scopedIpsecCount },
|
||
{ value: "plain", label: "Без IPsec", count: scopedTunnels.length - scopedIpsecCount },
|
||
]
|
||
|
||
const greExportCode = useMemo(
|
||
() => (codePreviewTunnel ? generateRosCommands(codePreviewTunnel, serverById) : ""),
|
||
[codePreviewTunnel, serverById],
|
||
)
|
||
|
||
return (
|
||
<>
|
||
<ServerRailLayout
|
||
items={greRailItems}
|
||
selectedId={selectedServerId}
|
||
preserveSelection
|
||
onSelect={onSelectServer}
|
||
showAll
|
||
allCount={displayServers.length}
|
||
loading={isLive && dataLoading && displayServers.length === 0}
|
||
header={
|
||
<PageHeader
|
||
crumbs={[{ label: "Управление" }, { label: "GRE-туннели" }]}
|
||
actions={
|
||
<>
|
||
<ServerRailMobileButton />
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => { void loadLive() }}
|
||
disabled={!isLive || dataLoading || mutateBusy || historyRestoring}
|
||
title={!isLive ? "Включите Live и доступный бэкенд в настройках источника данных" : "Обновить список GRE с устройств"}
|
||
>
|
||
<RefreshCwIcon className={cn("size-4", dataLoading && "animate-spin")} />
|
||
Обновить
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
setHistoryOpen(true)
|
||
void loadRevisions()
|
||
}}
|
||
disabled={!isLive || !historyServerId || dataLoading}
|
||
title={!historyServerId ? "Выберите сервер, чтобы смотреть историю" : "История версий и откат на CHR"}
|
||
>
|
||
<HistoryIcon className="size-4" />
|
||
История
|
||
</Button>
|
||
<Button size="sm" onClick={openCreateTunnel} disabled={mutateBusy || (isLive && mutationsLocked)}>
|
||
<PlusIcon className="size-4" />Добавить туннель
|
||
</Button>
|
||
</>
|
||
}
|
||
/>
|
||
}
|
||
>
|
||
<div className="flex flex-col gap-5">
|
||
{selectedTunnelId !== null && (
|
||
<Alert variant={selectedTunnelError || ((!isLive || !dataLoading) && !selectedTunnel) ? "warning" : "info"} role="status" aria-label="GRE-туннель по ссылке">
|
||
<AlertTitle className="line-clamp-none wrap-anywhere">{selectedTunnel ? "Выбран GRE-туннель: " + selectedTunnel.name : "GRE-туннель по ссылке"}</AlertTitle>
|
||
<AlertDescription>
|
||
<p className="wrap-anywhere">{isLive && dataLoading ? "Загрузка туннеля…" : selectedTunnelError ? "Не удалось получить данные выбранного сервера. Повторите обновление; сохранённые данные могут быть устаревшими." : selectedTunnel ? (serverById[selectedServerId]?.name ?? selectedServerId) + " · " + selectedTunnel.remoteAddress + ". Список ограничен выбранным туннелем; сводка относится ко всем серверам." : "Туннель не найден или недоступен на указанном сервере. Проверьте ссылку и доступ к устройству."}</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<Link href={allTunnelsHref} className="underline underline-offset-2">Все туннели сервера</Link>
|
||
<Link href="/dashboard" className="underline underline-offset-2">К дашборду</Link>
|
||
</div>
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{isLive && (dataError || failures.length > 0) && (
|
||
<Alert variant="warning" role="alert">
|
||
<AlertTitle>{dataError ? "Не удалось загрузить GRE" : "Не удалось опросить часть роутеров"}</AlertTitle>
|
||
<AlertDescription>
|
||
<p>{hasLoaded ? "Показаны последние полученные данные; актуальность отказавших устройств не подтверждена." : "Данные пока неизвестны. Пустой список не означает отсутствие туннелей."}</p>
|
||
<p className="wrap-anywhere">{dataError ?? failures.map(f => (f.serverName ?? f.serverId) + ": " + f.error).join("; ")}</p>
|
||
<Button variant="outline" size="sm" disabled={dataLoading || mutateBusy || historyRestoring} onClick={() => { void loadLive() }}>Повторить загрузку GRE</Button>
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{/* Legacy banner */}
|
||
<div className="flex items-start gap-3 rounded-lg bg-amber-500/5 border border-amber-500/20 px-4 py-3 text-sm">
|
||
<ShieldCheckIcon className="size-5 text-amber-500 shrink-0 mt-0.5" />
|
||
<div>
|
||
<p className="font-medium text-amber-600 dark:text-amber-400">
|
||
В RouterOS 7.x рекомендуется использовать WireGuard вместо GRE+IPsec
|
||
</p>
|
||
<p className="text-muted-foreground text-xs mt-0.5">
|
||
WireGuard проще в настройке, обеспечивает лучшую производительность и современную криптографию (ChaCha20-Poly1305).
|
||
GRE-туннели остаются поддерживаемыми, но WireGuard — предпочтительный выбор для новых развёртываний.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<KpiStatGrid
|
||
aria-label="Сводка GRE"
|
||
items={[
|
||
{
|
||
id: "tunnels",
|
||
label: "Всего туннелей",
|
||
value: incomplete ? "—" : displayTunnels.length,
|
||
hint: incomplete ? "неизвестно" : undefined,
|
||
icon: <NetworkIcon className="size-4" />,
|
||
iconClassName: "text-muted-foreground",
|
||
},
|
||
{
|
||
id: "up",
|
||
label: "Активно",
|
||
value: incomplete ? "—" : upCount,
|
||
hint: incomplete ? "неизвестно" : undefined,
|
||
icon: <ShieldCheckIcon className="size-4" />,
|
||
iconClassName: "text-success",
|
||
},
|
||
{
|
||
id: "ipsec",
|
||
label: "Защищены IPsec",
|
||
value: incomplete ? "—" : ipsecCount,
|
||
hint: incomplete ? "неизвестно" : undefined,
|
||
icon: <LockIcon className="size-4" />,
|
||
iconClassName: "text-info",
|
||
},
|
||
{
|
||
id: "pools",
|
||
label: "IP-пулов",
|
||
value: incomplete ? "—" : displayPools.length,
|
||
hint: incomplete ? "неизвестно" : undefined,
|
||
icon: <DatabaseIcon className="size-4" />,
|
||
iconClassName: "text-primary",
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{toggleStatus && <p role="status" className="text-sm text-muted-foreground">{toggleStatus}</p>}
|
||
{toggleError && <p role="alert" className="text-sm text-destructive">{toggleError}</p>}
|
||
|
||
{/* Page tabs */}
|
||
<div className="flex items-center gap-1 border-b">
|
||
{(["tunnels", "pools"] as PageTab[]).map((tab) => (
|
||
<button key={tab} onClick={() => setPageTab(tab)}
|
||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${pageTab === tab ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`}>
|
||
{tab === "tunnels" ? "Туннели" : "IP-пулы"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* ── Tunnels ── */}
|
||
{pageTab === "tunnels" && (
|
||
<DataPageCard>
|
||
<DataPageToolbar
|
||
segmented={{
|
||
value: tabFilter,
|
||
onChange: setTabFilter,
|
||
options: tunnelTabs.map((t) => ({
|
||
value: t.value,
|
||
label: t.label,
|
||
count: incomplete ? undefined : t.count,
|
||
})),
|
||
}}
|
||
search={search}
|
||
onSearchChange={setSearch}
|
||
searchPlaceholder="Поиск по имени, IP…"
|
||
countLabel={incomplete ? `${filtered.length} сохранённых строк · сводка неизвестна` : `${filtered.length} туннелей`}
|
||
/>
|
||
|
||
<GreTunnelsDataGrid
|
||
tunnels={filtered}
|
||
servers={displayServers}
|
||
pools={displayPools}
|
||
onCodePreview={setCodePreviewTunnel}
|
||
onEdit={openEditTunnel}
|
||
onToggle={(t) => { void toggleTunnel(t) }}
|
||
onDelete={setPendingDelete}
|
||
mutationsLocked={mutationsLocked}
|
||
unknownServerIds={unknownServerIds}
|
||
emptyTitle={isLive && !hasLoaded ? dataLoading ? "Загрузка GRE…" : "Данные GRE неизвестны" : incomplete ? "Нет подтверждённых строк" : undefined}
|
||
emptyDescription={incomplete ? "Повторите опрос; отсутствие строк не подтверждено" : undefined}
|
||
/>
|
||
</DataPageCard>
|
||
)}
|
||
|
||
{/* ── IP Pools ── */}
|
||
{pageTab === "pools" && (
|
||
<DataPageCard>
|
||
<DataPageToolbarFrame className="justify-between">
|
||
<span className="text-sm text-muted-foreground">{displayPools.length} пула</span>
|
||
<Button size="sm" variant="outline" onClick={() => { setPForm(defaultPoolForm); setPoolOpen(true) }}>
|
||
<PlusIcon className="size-4" />
|
||
Добавить пул
|
||
</Button>
|
||
</DataPageToolbarFrame>
|
||
<GrePoolsDataGrid pools={displayPools} />
|
||
|
||
<div className="border-t px-5 py-4">
|
||
<p className="text-xs font-medium text-muted-foreground mb-3">Назначения по пулам</p>
|
||
<div className="flex flex-col gap-3">
|
||
{displayPools.map((pool) => {
|
||
const poolTunnels = displayTunnels.filter((t) => t.poolId === pool.id)
|
||
return (
|
||
<div key={pool.id}>
|
||
<p className="text-xs font-mono font-medium mb-1.5">{pool.name}</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{poolTunnels.map((t, tunnelIndex) => (
|
||
<div key={`${t.id}:${t.serverId}:${t.name}:${tunnelIndex}`} className="flex items-center gap-2 border border-border rounded-md px-3 py-1.5 bg-muted/30 text-xs">
|
||
<span className={`size-1.5 rounded-full ${greStatusMeta(t.status).dot}`} />
|
||
<span className="font-mono font-medium">{t.name}</span>
|
||
<span className="text-muted-foreground">{t.localInnerIp} ↔ {t.remoteInnerIp}</span>
|
||
{t.ipsec && <LockIcon className="size-3 text-emerald-400" />}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</DataPageCard>
|
||
)}
|
||
|
||
{/* RouterOS reference */}
|
||
<OpsPanel title="RouterOS 7.20+ — параметры GRE-интерфейса" contentClassName="px-5 py-4">
|
||
<div className="grid grid-cols-2 gap-x-8 gap-y-1 text-xs font-mono">
|
||
{[
|
||
["/interface gre add", ""],
|
||
[" name=", "имя интерфейса"],
|
||
[" remote-address=", "IP удалённого конца (обязателен)"],
|
||
[" local-address=", "0.0.0.0 = авто"],
|
||
[" ipsec-secret=", "PSK → auto peer+policy+proposal"],
|
||
[" mtu=", "по умолчанию 1476"],
|
||
[" keepalive=", "10s,10 (интервал,попытки)"],
|
||
[" dscp=", "inherit | 0-63"],
|
||
[" clamp-tcp-mss=", "yes | no"],
|
||
[" allow-fast-path=", "yes | no"],
|
||
["/ip address add", ""],
|
||
[" address=x.x.x.x/30", "внутренний IP туннеля"],
|
||
[" interface=<name>", ""],
|
||
].map(([cmd, desc], i) => (
|
||
<div key={i} className="flex gap-2 py-0.5">
|
||
<span className="text-foreground/70 shrink-0">{cmd}</span>
|
||
{desc && <span className="text-muted-foreground"># {desc}</span>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</OpsPanel>
|
||
</div>
|
||
</ServerRailLayout>
|
||
|
||
{/* ══ Sheet: Code Preview ════════════════════════════════════════════════ */}
|
||
<CodeExportSheet
|
||
open={!!codePreviewTunnel}
|
||
onClose={() => setCodePreviewTunnel(null)}
|
||
title={codePreviewTunnel?.name ?? "GRE"}
|
||
description="Команды RouterOS 7.20+ для создания туннеля"
|
||
formats={[
|
||
{
|
||
id: "rsc",
|
||
label: "RouterOS",
|
||
filename: `${codePreviewTunnel?.name ?? "gre"}.rsc`,
|
||
code: greExportCode,
|
||
},
|
||
]}
|
||
beforeCode={
|
||
codePreviewTunnel ? (
|
||
<div className="flex flex-wrap gap-3 text-xs shrink-0">
|
||
<span className="flex items-center gap-1.5">
|
||
<span className={`size-1.5 rounded-full ${greStatusMeta(codePreviewTunnel.status).dot}`} />
|
||
{greStatusMeta(codePreviewTunnel.status).label}
|
||
</span>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span>{serverById[codePreviewTunnel.serverId]?.name}</span>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span className="font-mono">
|
||
{codePreviewTunnel.localAddress === "0.0.0.0" ? "авто" : codePreviewTunnel.localAddress}
|
||
{" → "}
|
||
{codePreviewTunnel.remoteAddress}
|
||
</span>
|
||
{codePreviewTunnel.ipsec ? (
|
||
<>
|
||
<span className="text-muted-foreground">·</span>
|
||
<span className="flex items-center gap-1 text-success">
|
||
<LockIcon className="size-3" />
|
||
IPsec {codePreviewTunnel.ipsec.ikeVersion ? IKE_LABELS[codePreviewTunnel.ipsec.ikeVersion] : "PSK"}
|
||
</span>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
) : null
|
||
}
|
||
/>
|
||
|
||
{/* ══ Sheet: Add Tunnel ══════════════════════════════════════════════════ */}
|
||
<Sheet open={tunnelOpen} onOpenChange={v => { if (!formLock.current) setTunnelOpen(v) }}>
|
||
<SheetContent showCloseButton={!mutateBusy} side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||
<SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||
<SheetTitle>{tunnelMode === "edit" ? "Редактировать GRE-туннель" : "Новый GRE-туннель"}</SheetTitle>
|
||
<SheetDescription>RouterOS 7.20+ · /interface gre {tunnelMode === "edit" ? "set" : "add"}</SheetDescription>
|
||
</SheetHeader>
|
||
|
||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
||
<fieldset disabled={mutateBusy} className="flex flex-col gap-5">
|
||
<div className="flex flex-col gap-4">
|
||
<SectionTitle>Основные</SectionTitle>
|
||
<FormField label="Имя интерфейса" required hint="Только латиница, цифры и дефис, например gre-msk-spb">
|
||
<Input className="font-mono" placeholder="gre-msk-spb" aria-label="Имя интерфейса" value={tForm.name} disabled={tunnelMode === "edit"} onChange={(e) => setT("name", e.target.value)} />
|
||
</FormField>
|
||
<FormField label="Сервер (MikroTik)" required>
|
||
<select aria-label="Сервер (MikroTik)" value={tForm.serverId} onChange={(e) => setT("serverId", e.target.value)} disabled={tunnelMode === "edit"}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
<option value="" disabled>Выбрать сервер…</option>
|
||
{displayServers.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.site})</option>)}
|
||
</select>
|
||
</FormField>
|
||
<FormField label="Комментарий">
|
||
<Input placeholder="Описание туннеля" aria-label="Комментарий" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
|
||
</FormField>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium">Включён</span>
|
||
<FormToggle checked={tForm.enabled} onChange={(v) => setT("enabled", v)} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<SectionTitle>Эндпоинты</SectionTitle>
|
||
<FormField label="Локальный адрес" hint="Оставьте пустым или 0.0.0.0 для автоопределения">
|
||
<Input className="font-mono" placeholder="0.0.0.0" value={tForm.localAddress} onChange={(e) => setT("localAddress", e.target.value)} />
|
||
</FormField>
|
||
<FormField label="Удалённый адрес" required hint="Внешний IP удалённого MikroTik">
|
||
<Input className="font-mono" placeholder="203.0.113.1" aria-label="Удалённый адрес" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
|
||
</FormField>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<SectionTitle>Внутренний IP</SectionTitle>
|
||
<FormField label="IP-пул" hint="Необязательно — внутренний IP можно указать вручную">
|
||
<select value={tForm.poolId} onChange={(e) => setT("poolId", e.target.value)}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
<option value="" disabled>Выбрать пул…</option>
|
||
{displayPools.map((p) => <option key={p.id} value={p.id}>{p.name} ({p.cidr}) — свободно {p.total - p.allocated} блоков</option>)}
|
||
</select>
|
||
</FormField>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<FormField label="Локальный IP" required hint="/ip address на этом конце">
|
||
<Input className="font-mono" placeholder="10.200.0.1/30" value={tForm.localInnerIp} onChange={(e) => setT("localInnerIp", e.target.value)} />
|
||
</FormField>
|
||
<FormField label="Удалённый IP" required hint="/ip address на другом конце">
|
||
<Input className="font-mono" placeholder="10.200.0.2/30" value={tForm.remoteInnerIp} onChange={(e) => setT("remoteInnerIp", e.target.value)} />
|
||
</FormField>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<SectionTitle>IPsec</SectionTitle>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm font-medium">Включить IPsec</p>
|
||
<p className="text-xs text-muted-foreground">RouterOS автоматически создаст peer, policy и proposal</p>
|
||
</div>
|
||
<FormToggle checked={tForm.ipsecEnabled} onChange={(v) => setT("ipsecEnabled", v)} />
|
||
</div>
|
||
|
||
{tForm.ipsecEnabled && (
|
||
<div className="flex flex-col gap-4 pl-4 border-l-2 border-emerald-500/30">
|
||
<FormField label="Пароль (PSK)" required hint="ipsec-secret — pre-shared key для автоматического IKE">
|
||
<div className="relative">
|
||
<Input type={tForm.ipsecShowSecret ? "text" : "password"} className="font-mono pr-9"
|
||
placeholder="Минимум 8 символов" value={tForm.ipsecSecret} onChange={(e) => setT("ipsecSecret", e.target.value)} />
|
||
<button type="button" onClick={() => setT("ipsecShowSecret", !tForm.ipsecShowSecret)}
|
||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
|
||
{tForm.ipsecShowSecret ? <EyeOffIcon className="size-3.5" /> : <EyeIcon className="size-3.5" />}
|
||
</button>
|
||
</div>
|
||
</FormField>
|
||
<FormField label="IKE-версия">
|
||
<SegmentedControl value={tForm.ipsecIkeVersion} onChange={(v) => setT("ipsecIkeVersion", v)}
|
||
options={[{ value: "ikev1", label: "IKEv1" }, { value: "ikev2", label: "IKEv2 (рек.)" }]} />
|
||
</FormField>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<FormField label="Шифрование">
|
||
<select value={tForm.ipsecEncAlg} onChange={(e) => setT("ipsecEncAlg", e.target.value as IpsecEncAlg)}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
{(Object.entries(ENC_LABELS) as [IpsecEncAlg, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
|
||
</select>
|
||
</FormField>
|
||
<FormField label="Хеш-алгоритм">
|
||
<select value={tForm.ipsecAuthAlg} onChange={(e) => setT("ipsecAuthAlg", e.target.value as IpsecAuthAlg)}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
{(Object.entries(AUTH_LABELS) as [IpsecAuthAlg, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
|
||
</select>
|
||
</FormField>
|
||
</div>
|
||
<FormField label="DH-группа" hint="Группа Диффи-Хеллмана для обмена ключами">
|
||
<select value={tForm.ipsecDhGroup} onChange={(e) => setT("ipsecDhGroup", e.target.value as IpsecDhGroup)}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
{(Object.entries(DH_LABELS) as [IpsecDhGroup, string][]).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
|
||
</select>
|
||
</FormField>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<FormField label="Срок жизни SA" hint="Формат: 1d 00:00:00">
|
||
<Input className="font-mono" value={tForm.ipsecLifetime} onChange={(e) => setT("ipsecLifetime", e.target.value)} />
|
||
</FormField>
|
||
<div className="flex items-center justify-between pt-6">
|
||
<span className="text-sm font-medium">PFS</span>
|
||
<FormToggle checked={tForm.ipsecPfs} onChange={(v) => setT("ipsecPfs", v)} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">
|
||
<button type="button" onClick={() => setT("showAdvanced", !tForm.showAdvanced)}
|
||
className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors">
|
||
{tForm.showAdvanced ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
|
||
Дополнительно
|
||
<div className="flex-1 h-px bg-border" />
|
||
</button>
|
||
{tForm.showAdvanced && (
|
||
<div className="flex flex-col gap-4">
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<FormField label="MTU" hint="По умолч. 1476">
|
||
<Input type="number" className="font-mono" value={tForm.mtu} onChange={(e) => setT("mtu", Number(e.target.value))} />
|
||
</FormField>
|
||
<FormField label="Keepalive, с" hint="0 = откл.">
|
||
<Input type="number" className="font-mono" value={tForm.keepaliveInterval} onChange={(e) => setT("keepaliveInterval", Number(e.target.value))} />
|
||
</FormField>
|
||
<FormField label="Попытки">
|
||
<Input type="number" className="font-mono" value={tForm.keepaliveRetries} onChange={(e) => setT("keepaliveRetries", Number(e.target.value))} />
|
||
</FormField>
|
||
</div>
|
||
<FormField label="DSCP">
|
||
<select value={tForm.dscp} onChange={(e) => setT("dscp", e.target.value)}
|
||
className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50">
|
||
<option value="inherit">inherit</option>
|
||
{Array.from({ length: 64 }, (_, i) => <option key={i} value={String(i)}>{i}</option>)}
|
||
</select>
|
||
</FormField>
|
||
{[
|
||
{ key: "clampTcpMss" as const, label: "Clamp TCP MSS", desc: "Ограничить MSS до MTU туннеля" },
|
||
{ key: "allowFastPath" as const, label: "Allow Fast Path", desc: "Аппаратное ускорение трафика" },
|
||
].map(({ key, label, desc }) => (
|
||
<div key={key} className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-sm font-medium">{label}</p>
|
||
<p className="text-xs text-muted-foreground">{desc}</p>
|
||
</div>
|
||
<FormToggle checked={tForm[key] as boolean} onChange={(v) => setT(key, v)} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
|
||
{mutateBusy && <p role="status" className="px-6 text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
|
||
{formError && <p role="alert" className="px-6 text-sm text-destructive">{formError}</p>}
|
||
<SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
|
||
<SheetClose render={<Button variant="outline" className="flex-1" disabled={mutateBusy} />}>Отмена</SheetClose>
|
||
<Button className="flex-1" onClick={() => void submitTunnel()} disabled={mutateBusy}>
|
||
{tunnelMode === "edit" ? "Сохранить" : "Создать туннель"}
|
||
</Button>
|
||
</SheetFooter>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
{/* ══ Sheet: Add Pool ════════════════════════════════════════════════════ */}
|
||
<Sheet open={poolOpen} onOpenChange={setPoolOpen}>
|
||
<SheetContent side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
|
||
<SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||
<SheetTitle>Новый IP-пул</SheetTitle>
|
||
<SheetDescription>Пул адресов для назначения внутренних IP GRE-туннелям</SheetDescription>
|
||
</SheetHeader>
|
||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
||
<div className="flex flex-col gap-4">
|
||
<SectionTitle>Параметры пула</SectionTitle>
|
||
<FormField label="Имя пула" required hint="Например pool-gre-office или pool-gre-dc2">
|
||
<Input className="font-mono" placeholder="pool-gre-core" value={pForm.name}
|
||
onChange={(e) => setPForm((f) => ({ ...f, name: e.target.value }))} />
|
||
</FormField>
|
||
<FormField label="Диапазон CIDR" required hint="Блок, из которого будут нарезаться /30 на каждый туннель">
|
||
<Input className="font-mono" placeholder="10.200.0.0/24" value={pForm.cidr}
|
||
onChange={(e) => setPForm((f) => ({ ...f, cidr: e.target.value }))} />
|
||
</FormField>
|
||
<FormField label="Назначение / Комментарий">
|
||
<Input placeholder="Ядровые межузловые туннели" value={pForm.comment}
|
||
onChange={(e) => setPForm((f) => ({ ...f, comment: e.target.value }))} />
|
||
</FormField>
|
||
{pForm.cidr && /\/\d+$/.test(pForm.cidr) && (() => {
|
||
const prefix = parseInt(pForm.cidr.split("/")[1] ?? "0")
|
||
const blocks = prefix <= 30 ? Math.pow(2, 30 - prefix) : 0
|
||
return blocks > 0 ? (
|
||
<div className="rounded-lg border border-border bg-muted/30 px-4 py-3 text-sm">
|
||
<p className="text-muted-foreground">
|
||
Доступно <span className="font-semibold text-foreground font-mono">{blocks}</span> блоков /30
|
||
{" "}= до <span className="font-semibold text-foreground font-mono">{blocks}</span> туннелей
|
||
</p>
|
||
</div>
|
||
) : null
|
||
})()}
|
||
</div>
|
||
</div>
|
||
<SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
|
||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
||
<Button className="flex-1" onClick={() => setPoolOpen(false)}>Создать пул</Button>
|
||
</SheetFooter>
|
||
</SheetContent>
|
||
</Sheet>
|
||
|
||
<ConfigHistorySheet
|
||
open={historyOpen}
|
||
onOpenChange={v => { if (!v) historyEpoch.current += 1; setHistoryOpen(v) }}
|
||
loadError={historyError}
|
||
onRetry={() => { void loadRevisions() }}
|
||
title="История GRE"
|
||
itemLabel="туннелей"
|
||
revisions={revisions}
|
||
loading={historyLoading}
|
||
restoring={historyRestoring}
|
||
onRestore={restoreRevision}
|
||
/>
|
||
|
||
<AlertDialog open={!!pendingDelete} onOpenChange={(v) => { if (!v && !deleteLock.current) { setPendingDelete(null); setDeleteError(null) } }}>
|
||
<AlertDialogContent size="default">
|
||
<AlertDialogHeader>
|
||
<AlertDialogMedia className="bg-destructive/10 text-destructive">
|
||
<Trash2Icon />
|
||
</AlertDialogMedia>
|
||
<AlertDialogTitle>Удалить GRE-туннель?</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
{pendingDelete
|
||
? `${pendingDelete.name} на сервере ${serverById[pendingDelete.serverId]?.name ?? pendingDelete.serverId}. Будут удалены интерфейс и связанный /ip/address.`
|
||
: null}
|
||
</AlertDialogDescription>
|
||
{mutateBusy && <p role="status" className="text-sm text-muted-foreground">Ожидание результата удаления…</p>}
|
||
{deleteError && <p role="alert" className="text-sm text-destructive">{deleteError}</p>}
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel disabled={mutateBusy}>Отмена</AlertDialogCancel>
|
||
<AlertDialogAction variant="destructive" disabled={mutationsLocked} onClick={(e) => { e.preventDefault(); void confirmDeleteTunnel() }}>
|
||
Удалить
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</>
|
||
)
|
||
}
|
||
|
||
function GreRoute() {
|
||
const { mode, backendUrl } = useDataSource()
|
||
const params = useSearchParams()
|
||
const router = useRouter()
|
||
const serverId = params.get("server") ?? ALL_SERVERS_ID
|
||
const tunnelId = params.get("tunnel")
|
||
const rest = new URLSearchParams(params.toString())
|
||
rest.delete("tunnel")
|
||
const allTunnelsHref = "/gre" + (rest.size ? "?" + rest.toString() : "")
|
||
return <GrePageContent key={JSON.stringify([serverId, tunnelId, mode, backendUrl])} selectedServerId={serverId} selectedTunnelId={tunnelId} allTunnelsHref={allTunnelsHref} onSelectServer={id => {
|
||
const next = new URLSearchParams(rest)
|
||
if (id === ALL_SERVERS_ID) next.delete("server")
|
||
else next.set("server", id)
|
||
router.push("/gre" + (next.size ? "?" + next.toString() : ""))
|
||
}} />
|
||
}
|
||
|
||
export default function GrePage() {
|
||
return <Suspense fallback={<div role="status">Загрузка GRE…</div>}><GreRoute /></Suspense>
|
||
}
|