250 lines
10 KiB
TypeScript
250 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { toast } from "sonner"
|
|
import { FormField } from "@/components/form-kit"
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
|
|
import { Frame, FramePanel } from "@/components/reui/frame"
|
|
import { CodeBlock, downloadText } from "@/components/reui-kit/code-export-sheet"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Input } from "@/components/ui/input"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import {
|
|
Sheet, SheetContent, SheetHeader, SheetTitle,
|
|
SheetDescription, SheetFooter, SheetClose,
|
|
} from "@/components/ui/sheet"
|
|
import { FlowHostPanel } from "./flow-host-panel"
|
|
import { applyTrafficFlowOverlay } from "@/shared/api/traffic-flow"
|
|
import type { ServerRead } from "@mmapp/contracts/servers"
|
|
import type { TrafficFlowOverlayResult } from "@mmapp/contracts/traffic-flow"
|
|
import {
|
|
CheckIcon,
|
|
CopyIcon,
|
|
DownloadIcon,
|
|
InfoIcon,
|
|
} from "lucide-react"
|
|
|
|
function FlowOverlaySheet({
|
|
open,
|
|
onOpenChange,
|
|
servers,
|
|
backendUrl,
|
|
onDone,
|
|
}: {
|
|
open: boolean
|
|
onOpenChange: (v: boolean) => void
|
|
servers: ServerRead[]
|
|
backendUrl: string
|
|
onDone?: (result: TrafficFlowOverlayResult) => void
|
|
}) {
|
|
const jumpHosts = useMemo(
|
|
() => servers.filter((s) => s.enabled && s.type === "jump-host"),
|
|
[servers],
|
|
)
|
|
const [serverId, setServerId] = useState("")
|
|
const [endpoint, setEndpoint] = useState("")
|
|
const [busy, setBusy] = useState(false)
|
|
const [result, setResult] = useState<TrafficFlowOverlayResult | null>(null)
|
|
const [copied, setCopied] = useState(false)
|
|
const [tab, setTab] = useState("linux")
|
|
const [disableGreFastPath, setDisableGreFastPath] = useState(false)
|
|
|
|
const [resetContext, setResetContext] = useState({ open: false, jumpHosts })
|
|
if (resetContext.open !== open || resetContext.jumpHosts !== jumpHosts) {
|
|
setResetContext({ open, jumpHosts })
|
|
if (open) {
|
|
setResult(null)
|
|
setCopied(false)
|
|
setTab("linux")
|
|
setDisableGreFastPath(false)
|
|
const first = jumpHosts[0]
|
|
const nextId = first ? String(first.id) : ""
|
|
setServerId(nextId)
|
|
setEndpoint(first?.host ?? "")
|
|
}
|
|
}
|
|
|
|
function handleServerChange(id: string) {
|
|
setServerId(id)
|
|
const selected = jumpHosts.find((s) => String(s.id) === id)
|
|
if (selected) setEndpoint(selected.host)
|
|
}
|
|
|
|
const formats = result?.hostFiles ?? []
|
|
const active = formats.find((f) => f.id === tab) ?? formats[0]
|
|
const selectedHost = jumpHosts.find((s) => String(s.id) === serverId)
|
|
const selectedLabel = selectedHost
|
|
? `${selectedHost.name || selectedHost.host} (${selectedHost.host})`
|
|
: "Выберите сервер…"
|
|
const canSubmit = Boolean(serverId && endpoint.trim()) && !busy
|
|
|
|
async function handleSubmit() {
|
|
if (!serverId || !endpoint.trim()) return
|
|
setBusy(true)
|
|
try {
|
|
const res = await applyTrafficFlowOverlay(backendUrl, serverId, endpoint.trim(), {
|
|
disableGreFastPath,
|
|
})
|
|
setResult(res)
|
|
setTab(res.hostFiles[0]?.id ?? "linux")
|
|
if (res.ok) toast.success(`wg-flow на ${res.address}`)
|
|
else toast.warning(res.hostError || "MikroTik настроен; требуется применение на хосте")
|
|
onDone?.(res)
|
|
} catch (e) {
|
|
toast.error(e instanceof Error ? e.message : "Не удалось подключить JH")
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
function handleCopy() {
|
|
const code = active?.code ?? ""
|
|
if (!code) return
|
|
void navigator.clipboard.writeText(code).then(() => {
|
|
setCopied(true)
|
|
toast.success("Скопировано")
|
|
setTimeout(() => setCopied(false), 1800)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
|
<SheetContent
|
|
side="right"
|
|
className="flex w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl"
|
|
>
|
|
<SheetHeader className="shrink-0 gap-1 border-b px-5 pt-5 pb-4 pr-12">
|
|
<SheetTitle className="text-base font-semibold tracking-tight">
|
|
Подключить jump-host
|
|
</SheetTitle>
|
|
<SheetDescription>
|
|
Настроит wg-flow и IPFIX на MikroTik. Если агент Docker установлен, автоматически применит пир на Linux-хосте MM.
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
<div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4">
|
|
<FormField label="Jump-host" required>
|
|
<Select
|
|
value={serverId || undefined}
|
|
onValueChange={(v) => handleServerChange(String(v ?? ""))}
|
|
>
|
|
<SelectTrigger aria-label="Jump-host" className="h-9 w-full min-w-0">
|
|
<SelectValue>{selectedLabel}</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent align="start" className="min-w-(--anchor-width)">
|
|
{jumpHosts.map((s) => (
|
|
<SelectItem key={s.id} value={String(s.id)}>
|
|
{s.name || s.host} ({s.host})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</FormField>
|
|
<FormField
|
|
label="Публичный IP или DNS jump-host"
|
|
required
|
|
hint="Куда хост MM (wg-quick) стучится по UDP 13232. Не контейнер backend."
|
|
>
|
|
<Input aria-label="Публичный IP или DNS jump-host"
|
|
className="font-mono"
|
|
value={endpoint}
|
|
onChange={(e) => setEndpoint(e.target.value)}
|
|
placeholder="jh.example.com"
|
|
autoComplete="off"
|
|
/>
|
|
</FormField>
|
|
<FormField
|
|
label="GRE slow-path (IPFIX inner)"
|
|
hint="allow-fast-path=no на GRE этого JH. Inner YouTube попадёт в Traffic Flow, но вырастет CPU. По умолчанию выкл."
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Switch aria-label="Выключить FastPath на GRE" checked={disableGreFastPath} onCheckedChange={setDisableGreFastPath} />
|
|
<span className="text-sm text-muted-foreground">Выключить FastPath на GRE</span>
|
|
</div>
|
|
</FormField>
|
|
{result ? (
|
|
<div className="flex min-h-0 flex-col gap-4">
|
|
<Alert variant={result.stage === "host-pending" ? "warning" : "success"}>
|
|
<InfoIcon />
|
|
<AlertTitle>{result.stage === "applied" ? "Настройки применены" : result.stage === "host-pending" ? "MikroTik настроен, хост ожидает применения" : "Установка агента на Linux-хосте"}</AlertTitle>
|
|
<AlertDescription>
|
|
{result.hostError || (result.stage === "applied" ? "Пир добавлен без перезапуска WireGuard. Ожидайте handshake и поступления IPFIX в панели NetFlow." : "Выполните установщик из вкладки «Агент Docker» от root на сервере MM. Он однократно пересоздаст backend. Экспорт содержит приватный ключ — храните его как секрет.")}
|
|
</AlertDescription>
|
|
</Alert>
|
|
<FlowHostPanel backendUrl={backendUrl} />
|
|
<ul className="flex flex-col gap-1.5">
|
|
{result.steps.map((s) => (
|
|
<li key={s} className="flex items-start gap-2 text-sm">
|
|
<CheckIcon className="mt-0.5 size-3.5 shrink-0 text-success" />
|
|
<span>{s}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{formats.length > 0 && active ? (
|
|
<div className="flex min-h-0 flex-col gap-3">
|
|
<Tabs
|
|
value={tab}
|
|
onValueChange={(v) => {
|
|
setTab(String(v))
|
|
setCopied(false)
|
|
}}
|
|
className="shrink-0 gap-0"
|
|
>
|
|
<TabsList className="h-9 w-full">
|
|
{formats.map((f) => (
|
|
<TabsTrigger key={f.id} value={f.id} className="flex-1 px-2 text-xs sm:text-sm">
|
|
{f.label}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
<Frame dense className="flex min-h-0 flex-col overflow-hidden">
|
|
<FramePanel className="relative flex min-h-0 flex-col overflow-hidden p-0">
|
|
<ScrollArea className="h-full min-h-0 max-h-[min(52vh,22rem)]">
|
|
<CodeBlock code={active.code} className="whitespace-pre break-normal" />
|
|
</ScrollArea>
|
|
</FramePanel>
|
|
</Frame>
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => downloadText(active.filename, active.code)}
|
|
>
|
|
<DownloadIcon className="size-3.5" />
|
|
Файл
|
|
</Button>
|
|
<Button type="button" size="sm" onClick={handleCopy}>
|
|
{copied ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
|
|
{copied ? "Скопировано" : "Копировать"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<SheetFooter className="shrink-0 flex-row items-center justify-between gap-3 border-t px-5 py-3.5 sm:flex-row">
|
|
<SheetClose render={<Button type="button" variant="outline" className="shrink-0" />}>
|
|
Закрыть
|
|
</SheetClose>
|
|
<Button disabled={!canSubmit} onClick={() => { void handleSubmit() }}>
|
|
{busy ? "Подключение…" : "Подключить"}
|
|
</Button>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|
|
export { FlowOverlaySheet }
|