feat(traffic-flow): enhance traffic flow analytics and overlay configuration

- Updated the traffic flow analytics to include new state variables for named bytes, total bytes, and window seconds, improving data granularity.
- Modified the NetworkMapPage to display classified traffic data, including a new section for showing classified and total bytes.
- Enhanced the applyFlowOverlay function to support a new option for disabling GRE fast path, allowing for more flexible traffic flow configurations.
- Added a toggle in the FlowOverlaySheet component to enable or disable the GRE fast path setting, improving user control over traffic processing.
- Updated tests to validate the new functionalities and ensure accurate traffic flow analytics.

Co-authored-by: Cursor <[email protected]>

components/traffic/flow-overlay-sheet.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
-import { FormField } from "@/components/form-kit"
+import { FormField, FormToggle } 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"
@@ -54,12 +54,14 @@ function FlowOverlaySheet({
   const [result, setResult] = useState<TrafficFlowOverlayResult | null>(null)
   const [copied, setCopied] = useState(false)
   const [tab, setTab] = useState("linux")
+  const [disableGreFastPath, setDisableGreFastPath] = useState(false)
 
   useEffect(() => {
     if (!open) return
     setResult(null)
     setCopied(false)
     setTab("linux")
+    setDisableGreFastPath(false)
     const first = jumpHosts[0]
     const nextId = first ? String(first.id) : ""
     setServerId(nextId)
@@ -84,7 +86,9 @@ function FlowOverlaySheet({
     if (!serverId || !endpoint.trim()) return
     setBusy(true)
     try {
-      const res = await applyTrafficFlowOverlay(backendUrl, serverId, endpoint.trim())
+      const res = await applyTrafficFlowOverlay(backendUrl, serverId, endpoint.trim(), {
+        disableGreFastPath,
+      })
       setResult(res)
       setTab(res.hostFiles[0]?.id ?? "linux")
       toast.success(`wg-flow на ${res.address}`)
@@ -151,6 +155,15 @@ function FlowOverlaySheet({
               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">
+              <FormToggle checked={disableGreFastPath} onChange={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="success">