feat(traffic): классифицировать потоки по брендам и разгрузить ingest

Починить ISO-страну Cloudflare, не держать holder как сервис, клик по срезу открывает Сессии. Не вызывать REST /interface с UDP, flush SQLite пачкой — uptime не должен ловить timeout 10s.

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

components/flag.tsx

@@ -46,6 +46,7 @@ function nearestCdnSize(px: number): number {
 export function Flag({ code, size = 20, className }: FlagProps) {
   if (!code) return null
   const lower  = code.toLowerCase()
+  if (!/^[a-z]{2}$/.test(lower)) return null
   const name   = countryName(code.toUpperCase())
   const cdnSrc = nearestCdnSize(size)
   const cdnSrc2x = nearestCdnSize(size * 2)

components/traffic/flow-analytics-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react"
 import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table"
-import type { FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard } from "@mmapp/contracts/traffic-flow"
+import type { FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard, FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
 import { ArrowDownIcon, ArrowUpIcon, GitBranchIcon, GlobeIcon, LayersIcon, UsersIcon } from "lucide-react"
 import { Badge } from "@/components/reui/badge"
 import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
@@ -108,14 +108,36 @@ export function FlowEntityCardView({
   )
 }
 
+type SessionFilter = {
+  kind: "application" | "category" | "service" | "asn" | "country" | "protocol" | "source" | "destination" | "iface"
+  value: string
+  label: string
+}
+
+function talkerMatchesFilter(row: FlowTalkerDto, filter: SessionFilter): boolean {
+  switch (filter.kind) {
+    case "application": return row.application === filter.value
+    case "category": return row.category === filter.value
+    case "service": return row.service === filter.value
+    case "asn": return String(row.dstAsn ?? "") === filter.value
+    case "country": return row.dstCountry === filter.value
+    case "protocol": return row.protoName === filter.value
+    case "source": return row.src === filter.value
+    case "destination": return row.dst === filter.value
+    case "iface": return row.inIface === filter.value
+  }
+}
+
 function FlowBreakdownGrid({
   rows,
   empty,
   country,
+  onPick,
 }: {
   rows: FlowBreakdownRow[]
   empty?: string
   country?: boolean
+  onPick?: (row: FlowBreakdownRow) => void
 }) {
   const columns = useMemo<ColumnDef<FlowBreakdownRow>[]>(
     () => [
@@ -178,7 +200,12 @@ function FlowBreakdownGrid({
   })
 
   return (
-    <DataGridShell table={table} recordCount={rows.length} emptyMessage={empty ?? "Нет данных за период"} />
+    <DataGridShell
+      table={table}
+      recordCount={rows.length}
+      emptyMessage={empty ?? "Нет данных за период"}
+      onRowClick={onPick}
+    />
   )
 }
 
@@ -206,13 +233,18 @@ export function FlowAnalyticsDetail({
   emptyHint?: string
 }) {
   const [slice, setSlice] = useState("applications")
-  const [mapCountry, setMapCountry] = useState<string | null>(null)
+  const [sessionFilter, setSessionFilter] = useState<SessionFilter | null>(null)
   const rxNow = analytics ? analytics.bpsNow / 1_000_000 : (card?.rxNow ?? 0)
   const bytes = analytics?.bytes ?? card?.bytes ?? 0
   const sessionRows = (analytics?.conversationsList ?? []).filter((row) =>
-    mapCountry ? row.dstCountry === mapCountry : true,
+    sessionFilter ? talkerMatchesFilter(row, sessionFilter) : true,
   )
 
+  function pickBreakdown(kind: SessionFilter["kind"], row: FlowBreakdownRow) {
+    setSessionFilter({ kind, value: row.id, label: row.label })
+    setSlice("sessions")
+  }
+
   if (!card) {
     return (
       <p className="text-sm text-muted-foreground py-8 text-center">
@@ -375,47 +407,47 @@ export function FlowAnalyticsDetail({
             <TabsTrigger value="interfaces">Интерфейсы</TabsTrigger>
           </TabsList>
           <TabsContent value="applications">
-            <FlowBreakdownGrid rows={analytics?.applications ?? []} />
+            <FlowBreakdownGrid rows={analytics?.applications ?? []} onPick={(row) => pickBreakdown("application", row)} />
           </TabsContent>
           <TabsContent value="categories">
-            <FlowBreakdownGrid rows={analytics?.categories ?? []} />
+            <FlowBreakdownGrid rows={analytics?.categories ?? []} onPick={(row) => pickBreakdown("category", row)} />
           </TabsContent>
           <TabsContent value="services">
-            <FlowBreakdownGrid rows={analytics?.services ?? []} />
+            <FlowBreakdownGrid rows={analytics?.services ?? []} onPick={(row) => pickBreakdown("service", row)} />
           </TabsContent>
           <TabsContent value="asns">
-            <FlowBreakdownGrid rows={analytics?.asns ?? []} />
+            <FlowBreakdownGrid rows={analytics?.asns ?? []} onPick={(row) => pickBreakdown("asn", row)} />
           </TabsContent>
           <TabsContent value="countries">
-            <FlowBreakdownGrid rows={analytics?.countries ?? []} country />
+            <FlowBreakdownGrid rows={analytics?.countries ?? []} country onPick={(row) => pickBreakdown("country", row)} />
           </TabsContent>
           <TabsContent value="map">
             <FlowTrafficMap
               edges={analytics?.mapEdges ?? []}
               onSelectCountry={(iso) => {
-                setMapCountry(iso)
+                setSessionFilter({ kind: "country", value: iso, label: iso })
                 setSlice("sessions")
               }}
             />
           </TabsContent>
           <TabsContent value="protocols">
-            <FlowBreakdownGrid rows={analytics?.protocols ?? []} />
+            <FlowBreakdownGrid rows={analytics?.protocols ?? []} onPick={(row) => pickBreakdown("protocol", row)} />
           </TabsContent>
           <TabsContent value="sources">
-            <FlowBreakdownGrid rows={analytics?.sources ?? []} />
+            <FlowBreakdownGrid rows={analytics?.sources ?? []} onPick={(row) => pickBreakdown("source", row)} />
           </TabsContent>
           <TabsContent value="destinations">
-            <FlowBreakdownGrid rows={analytics?.destinations ?? []} />
+            <FlowBreakdownGrid rows={analytics?.destinations ?? []} onPick={(row) => pickBreakdown("destination", row)} />
           </TabsContent>
           <TabsContent value="sessions">
-            {mapCountry ? (
+            {sessionFilter ? (
               <div className="flex items-center gap-2 mb-2">
                 <GlobeIcon className="size-3.5 text-muted-foreground" />
-                <span className="text-xs text-muted-foreground">фильтр страны {mapCountry}</span>
+                <Badge variant="secondary" size="sm">Фильтр: {sessionFilter.label}</Badge>
                 <button
                   type="button"
                   className="text-xs text-primary"
-                  onClick={() => setMapCountry(null)}
+                  onClick={() => setSessionFilter(null)}
                 >
                   сбросить
                 </button>
@@ -423,13 +455,14 @@ export function FlowAnalyticsDetail({
             ) : null}
             <TrafficFlowsDataGrid
               rows={sessionRows}
-              emptyHint={emptyHint}
+              emptyHint={emptyHint ?? "Нет сессий по выбранному фильтру"}
             />
           </TabsContent>
           <TabsContent value="interfaces">
             <FlowBreakdownGrid
               rows={analytics?.interfaces ?? []}
               empty="Нет данных по интерфейсам"
+              onPick={(row) => pickBreakdown("iface", row)}
             />
           </TabsContent>
         </Tabs>

components/traffic/flow-traffic-map.tsx

@@ -72,7 +72,9 @@ function FlowTrafficMap({
         header: () => <span className="text-xs font-medium text-muted-foreground">Назначение</span>,
         cell: ({ row }) => (
           <span className="flex items-center gap-1.5 text-sm">
-            <Flag code={row.original.toCountry} />
+            {/^[a-z]{2}$/i.test(row.original.toCountry)
+              ? <Flag code={row.original.toCountry} />
+              : null}
             {row.original.toCountry}
             {row.original.toAsn ? <span className="font-mono text-[10px] text-muted-foreground">AS{row.original.toAsn}</span> : null}
           </span>
@@ -176,7 +178,12 @@ function FlowTrafficMap({
           ) : null}
         </FramePanel>
       </Frame>
-      <DataGridShell table={table} recordCount={edges.length} emptyMessage="Нет рёбер с известной страной" />
+      <DataGridShell
+        table={table}
+        recordCount={edges.length}
+        emptyMessage="Нет рёбер с известной страной"
+        onRowClick={(row) => onSelectCountry?.(row.toCountry)}
+      />
     </div>
   )
 }