feat(traffic): разделить плоскости IPFIX и показать путь JH→EN

Считать payload отдельно от overlay GRE/ESP и mesh; вкладка Пути и KPI Wire из счётчиков iface.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/traffic/netflow-settings-panel.tsx

@@ -14,8 +14,10 @@ import {
   generateTrafficFlowKeys,
   getTrafficFlowHostFiles,
   getTrafficFlowSettings,
+  purgeTrafficFlowData,
   putTrafficFlowSettings,
 } from "@/shared/api/traffic-flow"
+import { formatFlowPurgeResult, NetflowPurgeConfirm } from "@/components/traffic/netflow-purge-dialog"
 import { KeyRoundIcon, DownloadIcon, InfoIcon } from "lucide-react"
 
 const HOST_STEPS = [
@@ -46,6 +48,8 @@ function NetflowSettingsPanel({
   const [retention, setRetention] = useState("24")
   const [topN, setTopN] = useState("200")
   const [ingestOn, setIngestOn] = useState(false)
+  const [purgeOpen, setPurgeOpen] = useState(false)
+  const [purgeBusy, setPurgeBusy] = useState(false)
 
   const load = useCallback(async () => {
     if (!enabled) return
@@ -102,6 +106,20 @@ function NetflowSettingsPanel({
     }
   }
 
+  async function handlePurgeConfirm() {
+    setPurgeBusy(true)
+    try {
+      const result = await purgeTrafficFlowData(backendUrl)
+      toast.success(formatFlowPurgeResult(result))
+      setPurgeOpen(false)
+      await load()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Не удалось сбросить NetFlow")
+    } finally {
+      setPurgeBusy(false)
+    }
+  }
+
   async function handleExport() {
     setBusy(true)
     try {
@@ -196,18 +214,35 @@ function NetflowSettingsPanel({
         </div>
 
         <div className="flex flex-wrap gap-2">
-          <Button size="sm" disabled={busy} onClick={() => { void handleSave() }}>
+          <Button size="sm" disabled={busy || purgeBusy} onClick={() => { void handleSave() }}>
             Сохранить NetFlow
           </Button>
-          <Button size="sm" variant="outline" disabled={busy} onClick={() => { void handleKeys() }}>
+          <Button size="sm" variant="outline" disabled={busy || purgeBusy} onClick={() => { void handleKeys() }}>
             <KeyRoundIcon className="size-4" />
             Ключи хоста
           </Button>
-          <Button size="sm" variant="outline" disabled={busy} onClick={() => { void handleExport() }}>
+          <Button size="sm" variant="outline" disabled={busy || purgeBusy} onClick={() => { void handleExport() }}>
             <DownloadIcon className="size-4" />
             wg-quick / compose / firewall
           </Button>
         </div>
+
+        <div className="flex items-center justify-between gap-4 rounded-md border border-destructive/30 px-4 py-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">Сбросить данные NetFlow</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Удалит сессии и агрегаты из SQLite, затем VACUUM. Ключи WG и пиры не трогает.
+            </p>
+          </div>
+          <Button
+            size="sm"
+            variant="destructive"
+            disabled={busy || purgeBusy}
+            onClick={() => setPurgeOpen(true)}
+          >
+            Сбросить
+          </Button>
+        </div>
       </OpsPanel>
 
       <CodeExportSheet
@@ -217,6 +252,13 @@ function NetflowSettingsPanel({
         description="wg-quick, фрагмент compose и firewall. Хост, не контейнер backend."
         formats={formats}
       />
+
+      <NetflowPurgeConfirm
+        open={purgeOpen}
+        busy={purgeBusy}
+        onConfirm={() => { void handlePurgeConfirm() }}
+        onCancel={() => { if (!purgeBusy) setPurgeOpen(false) }}
+      />
     </>
   )
 }