feat(netflow): автоматизировать настройку туннеля коллектора

components/traffic/netflow-settings-panel.tsx

@@ -13,6 +13,7 @@ import { Input } from "@/components/ui/input"
 import { CodeExportSheet, type CodeExportFormat } from "@/components/reui-kit/code-export-sheet"
 import type { TrafficFlowSettingsDto } from "@mmapp/contracts/traffic-flow"
 import { GeoipSettingsSection } from "./geoip-settings-section"
+import { FlowHostPanel } from "./flow-host-panel"
 import {
   generateTrafficFlowKeys,
   getTrafficFlowHostFiles,
@@ -24,11 +25,11 @@ import { formatFlowPurgeResult, NetflowPurgeConfirm } from "@/components/traffic
 import { KeyRoundIcon, DownloadIcon, InfoIcon, AlertCircleIcon } from "lucide-react"
 
 const HOST_STEPS = [
-  "На хосте Docker (не в контейнере mmapp-backend): apt install wireguard (или эквивалент).",
-  "Скачайте wg-flow.conf и положите в /etc/wireguard/wg-flow.conf.",
-  "wg-quick up wg-flow  (или systemctl enable --now wg-quick@wg-flow).",
+  "Создайте ключи хоста, откройте «Файлы хоста» и скачайте вкладку «Агент Docker».",
+  "Выполните sudo bash install-netflow-agent.sh /opt/cdn-mm на хосте Docker. При установке backend будет пересоздан.",
+  "Обновите статус хоста. Дальнейшие подключения автоматически применяются агентом.",
   "Firewall: разрешите UDP listen WireGuard. UDP 4739 наружу не открывайте.",
-  "В docker-compose у backend раскомментируйте bind IPFIX только на адресе wg-flow.",
+  "Установщик публикует IPFIX только на адресе wg-flow. Ручные файлы доступны в остальных вкладках экспорта.",
   "Проверка: wg show · ss -ulnp | grep 4739 · в этой панели — last datagram.",
 ]
 
@@ -43,6 +44,7 @@ function NetflowSettingsContent({
   enabled: boolean
 }) {
   const [settings,setSettings] = useState<TrafficFlowSettingsDto|null>(null)
+  const [automatic,setAutomatic] = useState(false)
   const [draft,setDraft] = useState<NetflowDraft>(emptyNetflowDraft)
   const dirty = useRef(new Set<keyof NetflowDraft>())
   const [dirtyCount,setDirtyCount] = useState(0)
@@ -147,16 +149,16 @@ function NetflowSettingsContent({
 
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <FormField label="Collector IP" hint="Адрес в туннеле, куда JH шлёт flow">
-            <Input className="font-mono" aria-label="Collector IP" disabled={disabled} value={draft.collectorIp} onChange={(e) => change("collectorIp", e.target.value)} />
+            <Input className="font-mono" aria-label="Collector IP" disabled={disabled || automatic} value={draft.collectorIp} onChange={(e) => change("collectorIp", e.target.value)} />
           </FormField>
           <FormField label="Префикс overlay">
-            <Input className="font-mono" aria-label="Префикс overlay" disabled={disabled} value={draft.prefix} onChange={(e) => change("prefix", e.target.value)} />
+            <Input className="font-mono" aria-label="Префикс overlay" disabled={disabled || automatic} value={draft.prefix} onChange={(e) => change("prefix", e.target.value)} />
           </FormField>
           <FormField label="UDP IPFIX">
-            <Input className="font-mono" aria-label="UDP IPFIX" disabled={disabled} value={draft.flowListenPort} onChange={(e) => change("flowListenPort", e.target.value)} />
+            <Input className="font-mono" aria-label="UDP IPFIX" disabled={disabled || automatic} value={draft.flowListenPort} onChange={(e) => change("flowListenPort", e.target.value)} />
           </FormField>
           <FormField label="WG listen">
-            <Input className="font-mono" aria-label="WG listen" disabled={disabled} value={draft.wgListenPort} onChange={(e) => change("wgListenPort", e.target.value)} />
+            <Input className="font-mono" aria-label="WG listen" disabled={disabled || automatic} value={draft.wgListenPort} onChange={(e) => change("wgListenPort", e.target.value)} />
           </FormField>
           <FormField label="Публичный endpoint хоста MM" hint="IP или DNS, который видят JH">
             <Input className="font-mono" aria-label="Публичный endpoint хоста MM" disabled={disabled} value={draft.publicEndpoint} onChange={(e) => change("publicEndpoint", e.target.value)} placeholder="203.0.113.10" />
@@ -201,14 +203,15 @@ function NetflowSettingsContent({
           {settings?.lastError ? ` · ${settings.lastError}` : ""}
         </p>
 
-        <div className="rounded-md border px-4 py-3 flex flex-col gap-2">
+        <FlowHostPanel backendUrl={backendUrl} enabled={enabled} onConfigured={setAutomatic} />
+        {automatic ? <p className="text-xs text-muted-foreground">Адрес, префикс и порты закреплены установкой агента. Для их изменения повторите установщик.</p> : <div className="rounded-md border px-4 py-3 flex flex-col gap-2">
           <p className="text-sm font-medium">Туннель на сервере Docker MM</p>
           <ol className="text-xs text-muted-foreground flex flex-col gap-1.5 list-decimal pl-4">
             {HOST_STEPS.map((s) => (
               <li key={s}>{s.replaceAll("4739", settings ? String(settings.flowListenPort) : "IPFIX")}</li>
             ))}
           </ol>
-        </div>
+        </div>}
 
         <div className="flex flex-wrap gap-2">
           <Button size="sm" disabled={disabled || !dirtyCount} onClick={() => { void handleSave() }}>