@skyhook-io/radar-app 1.10.0 → 1.12.2

package/src/components/traffic/TrafficView.tsx

@@ -10,9 +10,10 @@ import { Loader2, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } fro
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
-import { EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
+import { AlertBanner, EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
 import { useConnection } from '../../context/ConnectionContext'
 import { Tooltip } from '../ui/Tooltip'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, type VolumeUnit } from './trafficFilters'
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -345,6 +346,10 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
   const [hideSystem, setHideSystem] = useState(true)
   const [hideExternal, setHideExternal] = useState(false)
   const [minConnections, setMinConnections] = useState(0)
+  // The unit the threshold above was picked under. Stored because the number alone
+  // is ambiguous: 100 is a valid step in both scales and means something different
+  // in each.
+  const [minConnectionsUnit, setMinConnectionsUnit] = useState<VolumeUnit>('connections')
   const [showNamespaceGroups, setShowNamespaceGroups] = useState(true)
   const [aggregateExternal, setAggregateExternal] = useState(true)
   const [detectServices, setDetectServices] = useState(true)
@@ -432,16 +437,80 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
     enabled: wizardState === 'ready' && !isConnecting && !connectionError,
   })
 
+  // A 'partial' warning is the source telling us this is as complete as it gets —
+  // an attribute it does not export, traffic it cannot orient. Retrying returns
+  // the same answer, so retrying forever is all cost and no progress.
+  const warningIsPermanent = flowsData?.warningKind === 'partial'
+
   // Auto-retry when flows return with warning but no data (e.g., port-forward not ready yet)
   useEffect(() => {
-    if (flowsData?.warning && (!flowsData.aggregated || flowsData.aggregated.length === 0) && !flowsFetching) {
+    if (
+      flowsData?.warning &&
+      !warningIsPermanent &&
+      (!flowsData.aggregated || flowsData.aggregated.length === 0) &&
+      !flowsFetching
+    ) {
       const timer = setTimeout(() => refetchFlowsRaw(), 2000)
       return () => clearTimeout(timer)
     }
-  }, [flowsData, flowsFetching, refetchFlowsRaw])
+  }, [flowsData, warningIsPermanent, flowsFetching, refetchFlowsRaw])
 
   // Filter flows based on user preferences
   // Note: namespace filtering is done server-side via the global namespace selector
+  // Show L7 filters only when flows actually contain L7 data
+  const hasL7Data = useMemo(() => {
+    if (!flowsData?.aggregated) return false
+    return flowsData.aggregated.some(f => f.l7Protocol || f.topHTTPPaths || f.topDNSQueries)
+  }, [flowsData?.aggregated])
+
+  const isRateBased = isRateBasedSource(sourcesData?.active)
+
+  // Which L7 filters can return something, so the sidebar never offers a control
+  // that matches nothing. Sources differ in what they can report: a rate-based one
+  // measures a 5xx rate but no status distribution, and has no DNS query names at
+  // all, so offering 2xx or a DNS box would be a dead end.
+  const l7Capabilities = useMemo(() => {
+    const statuses = new Set<string>()
+    const verdicts = new Set<string>()
+    let hasDNSQueries = false
+    const methods = new Set<string>()
+    for (const f of flowsData?.aggregated ?? []) {
+      for (const [bucket, count] of Object.entries(f.httpStatusCounts ?? {})) {
+        if (count > 0) statuses.add(bucket)
+      }
+      // An error rate is a 5xx signal even where no status distribution exists.
+      if ((f.errorCount ?? 0) > 0) statuses.add('5xx')
+      for (const [verdict, count] of Object.entries(f.verdictCounts ?? {})) {
+        if (count > 0) verdicts.add(verdict)
+      }
+      if (f.topDNSQueries?.length) hasDNSQueries = true
+      for (const path of f.topHTTPPaths ?? []) {
+        if (path.method) methods.add(path.method)
+      }
+    }
+    return {
+      availableStatusRanges: ['2xx', '3xx', '4xx', '5xx'].filter(b => statuses.has(b)),
+      availableVerdicts: ['forwarded', 'dropped', 'error'].filter(v => verdicts.has(v)),
+      hasDNSQueries,
+      availableHTTPMethods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].filter(m => methods.has(m)),
+    }
+  }, [flowsData?.aggregated])
+
+  // The controls are built from what the data contains, so a selection can outlive
+  // its button. These are what actually filter: a choice with no control left to
+  // clear it must not keep hiding traffic.
+  const activeStatusRanges = useMemo(
+    () => keepAvailable(l7StatusRanges, l7Capabilities.availableStatusRanges),
+    [l7StatusRanges, l7Capabilities.availableStatusRanges])
+  const activeMethods = useMemo(
+    () => keepAvailable(l7Methods, l7Capabilities.availableHTTPMethods),
+    [l7Methods, l7Capabilities.availableHTTPMethods])
+  const activeVerdicts = useMemo(
+    () => keepAvailable(l7Verdicts, l7Capabilities.availableVerdicts),
+    [l7Verdicts, l7Capabilities.availableVerdicts])
+  const activeDnsPattern = l7Capabilities.hasDNSQueries ? dnsPattern : ''
+  const activeMinConnections = effectiveThreshold(minConnections, minConnectionsUnit, volumeUnit(isRateBased))
+
   const filteredFlows = useMemo<AggregatedFlow[]>(() => {
     if (!flowsData?.aggregated) return []
 
@@ -488,7 +557,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       }
 
       // Connection threshold filter
-      if (flow.connections < minConnections) {
+      if (flow.connections < activeMinConnections) {
         return false
       }
 
@@ -506,23 +575,21 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       if (l7Protocol === 'TCP' && flow.l7Protocol) return false // TCP = no L7
 
       // L7 sub-filters (only apply when active)
-      if (l7Methods.size > 0) {
-        if (!flow.topHTTPPaths?.some(p => l7Methods.has(p.method))) return false
-      }
-      if (l7StatusRanges.size > 0) {
-        if (!flow.httpStatusCounts || !Array.from(l7StatusRanges).some(r => (flow.httpStatusCounts?.[r] ?? 0) > 0)) return false
+      if (activeMethods.size > 0) {
+        if (!flow.topHTTPPaths?.some(p => activeMethods.has(p.method))) return false
       }
-      if (l7Verdicts.size > 0) {
-        if (!flow.verdictCounts || !Array.from(l7Verdicts).some(v => (flow.verdictCounts?.[v] ?? 0) > 0)) return false
+      if (!matchesStatusRanges(activeStatusRanges, bucketsFromCounts(flow.httpStatusCounts), (flow.errorCount ?? 0) > 0)) return false
+      if (activeVerdicts.size > 0) {
+        if (!flow.verdictCounts || !Array.from(activeVerdicts).some(v => (flow.verdictCounts?.[v] ?? 0) > 0)) return false
       }
-      if (dnsPattern) {
-        const pattern = dnsPattern.toLowerCase()
+      if (activeDnsPattern) {
+        const pattern = activeDnsPattern.toLowerCase()
         if (!flow.topDNSQueries?.some(q => q.query.toLowerCase().includes(pattern))) return false
       }
 
       return true
     })
-  }, [flowsData?.aggregated, hideSystem, hideExternal, minConnections, hiddenNamespaces, addonMode, l7Protocol, l7Methods, l7StatusRanges, l7Verdicts, dnsPattern])
+  }, [flowsData?.aggregated, hideSystem, hideExternal, activeMinConnections, hiddenNamespaces, addonMode, l7Protocol, activeMethods, activeStatusRanges, activeVerdicts, activeDnsPattern])
 
   // Filter raw flows with the same base filters (for list view)
   const filteredRawFlows = useMemo(() => {
@@ -555,24 +622,20 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       if (l7Protocol === 'TCP' && flow.l7Protocol) return false
 
       // L7 sub-filters on individual flow fields
-      if (l7Methods.size > 0) {
-        if (!flow.httpMethod || !l7Methods.has(flow.httpMethod)) return false
+      if (activeMethods.size > 0) {
+        if (!flow.httpMethod || !activeMethods.has(flow.httpMethod)) return false
       }
-      if (l7StatusRanges.size > 0) {
-        if (!flow.httpStatus) return false
-        const bucket = `${Math.floor(flow.httpStatus / 100)}xx`
-        if (!l7StatusRanges.has(bucket)) return false
+      if (!matchesStatusRanges(activeStatusRanges, bucketsFromStatus(flow.httpStatus), (flow.errorRate ?? 0) > 0)) return false
+      if (activeVerdicts.size > 0) {
+        if (!flow.verdict || !activeVerdicts.has(flow.verdict)) return false
       }
-      if (l7Verdicts.size > 0) {
-        if (!flow.verdict || !l7Verdicts.has(flow.verdict)) return false
-      }
-      if (dnsPattern) {
-        if (!flow.dnsQuery || !flow.dnsQuery.toLowerCase().includes(dnsPattern.toLowerCase())) return false
+      if (activeDnsPattern) {
+        if (!flow.dnsQuery || !flow.dnsQuery.toLowerCase().includes(activeDnsPattern.toLowerCase())) return false
       }
 
       return true
     })
-  }, [flowsData?.flows, hideSystem, hideExternal, hiddenNamespaces, addonMode, l7Protocol, l7Methods, l7StatusRanges, l7Verdicts, dnsPattern])
+  }, [flowsData?.flows, hideSystem, hideExternal, hiddenNamespaces, addonMode, l7Protocol, activeMethods, activeStatusRanges, activeVerdicts, activeDnsPattern])
 
   // Apply graph selection to filter raw flows for the list panel
   const listFlows = useMemo(() => {
@@ -612,11 +675,12 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
     }
   }, [flowsData?.flows, openFlowListDock])
 
-  // Show L7 filters only when flows actually contain L7 data
-  const hasL7Data = useMemo(() => {
-    if (!flowsData?.aggregated) return false
-    return flowsData.aggregated.some(f => f.l7Protocol || f.topHTTPPaths || f.topDNSQueries)
-  }, [flowsData?.aggregated])
+  // Records which quantity the chosen threshold refers to, so it can be discarded
+  // rather than reinterpreted if the active source starts measuring the other one.
+  const chooseMinConnections = useCallback((value: number) => {
+    setMinConnections(value)
+    setMinConnectionsUnit(volumeUnit(isRateBased))
+  }, [isRateBased])
 
   // Toggle L7 filter helpers
   const toggleL7Method = useCallback((method: string) => {
@@ -692,8 +756,11 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       const destKey = flow.destination.namespace
         ? `${flow.destination.namespace}/${destAgg.name}`
         : destAgg.name
-      // Group by service name, not by port (all MongoDB connections become one edge)
-      const key = `${sourceKey}->${destKey}`
+      // Group by service name, not by port (all MongoDB connections become one edge).
+      // Traffic whose direction is known is kept apart from traffic whose direction
+      // is not, the same way the backend aggregation keys it: merging them would
+      // give one edge a single arrowhead answer that is wrong for half its bytes.
+      const key = `${sourceKey}->${destKey}|${flow.directionUnknown ? 'u' : 'o'}`
 
       const existing = aggregatedMap.get(key)
       if (existing) {
@@ -708,6 +775,8 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         if (flow.errorCount) {
           existing.errorCount = (existing.errorCount || 0) + flow.errorCount
         }
+        // Everything merged here shares the key's direction-known state, so the
+        // flag is already correct on the entry that was created first.
       } else {
         // Create new aggregated flow with modified names
         aggregatedMap.set(key, {
@@ -739,10 +808,13 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
       // Only collapse external → internal flows (inbound internet traffic)
       if (sourceIsExternal && destIsInternal) {
-        // Create a key based on destination + port
+        // Key on destination + port, and on whether the direction is known: this
+        // collapse merges genuinely different external clients, so one of them
+        // arriving unoriented must not take the arrowhead off another's traffic.
+        const orientation = flow.directionUnknown ? '|u' : '|o'
         const destKey = flow.destination.namespace
-          ? `${flow.destination.namespace}/${flow.destination.name}:${flow.port}`
-          : `${flow.destination.name}:${flow.port}`
+          ? `${flow.destination.namespace}/${flow.destination.name}:${flow.port}${orientation}`
+          : `${flow.destination.name}:${flow.port}${orientation}`
 
         const existing = internetFlowsMap.get(destKey)
         if (existing) {
@@ -907,7 +979,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         }
       }
 
-      if (flow.connections < minConnections) {
+      if (flow.connections < activeMinConnections) {
         return false
       }
 
@@ -935,7 +1007,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       name,
       nodeCount: nodes.size,
     }))
-  }, [flowsData?.aggregated, hideSystem, hideExternal, minConnections])
+  }, [flowsData?.aggregated, hideSystem, hideExternal, activeMinConnections])
 
   // Determine wizard state based on sources detection
   useEffect(() => {
@@ -1014,8 +1086,8 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         setHideSystem={setHideSystem}
         hideExternal={hideExternal}
         setHideExternal={setHideExternal}
-        minConnections={minConnections}
-        setMinConnections={setMinConnections}
+        minConnections={activeMinConnections}
+        setMinConnections={chooseMinConnections}
         showNamespaceGroups={showNamespaceGroups}
         setShowNamespaceGroups={setShowNamespaceGroups}
         collapseInternet={collapseInternet}
@@ -1028,7 +1100,12 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         setDetectServices={setDetectServices}
         timeRange={timeRange}
         setTimeRange={setTimeRange}
-        isHubble={sourcesData?.active === 'hubble' && hasL7Data}
+        showL7Filters={hasL7Data}
+        availableStatusRanges={l7Capabilities.availableStatusRanges}
+        availableVerdicts={l7Capabilities.availableVerdicts}
+        hasDNSQueries={l7Capabilities.hasDNSQueries}
+        availableHTTPMethods={l7Capabilities.availableHTTPMethods}
+        isRateBased={isRateBased}
         l7Protocol={l7Protocol}
         setL7Protocol={setL7Protocol}
         l7Methods={l7Methods}
@@ -1154,15 +1231,39 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
               className="absolute inset-0"
             />
           ) : finalFlows.length > 0 ? (
-            <TrafficGraph
-              flows={finalFlows}
-              hotPathThreshold={hotPathThreshold}
-              showNamespaceGroups={showNamespaceGroups}
-              serviceCategories={serviceCategories}
-              addonMode={addonMode}
-              trafficSource={sourcesData?.active || ''}
-              onSelectionChange={setGraphSelection}
-            />
+            <>
+              {flowsData?.warning && warningIsPermanent && (
+                // Sits below the two chip rows (both top-3) rather than beside
+                // them: centred at that height it would cover the flow count and
+                // the refresh control at common widths. role/aria-live because it
+                // appears after the graph has already rendered.
+                <div
+                  role="status"
+                  aria-live="polite"
+                  className="absolute top-14 left-1/2 z-10 w-[min(40rem,calc(100%-1.5rem))] -translate-x-1/2"
+                >
+                  <AlertBanner
+                    variant="warning"
+                    // Not "incomplete": every warning that reaches here is about a
+                    // value on an edge that is shown being wrong or absent — a port
+                    // reported as 0, UDP reported as TCP, received bytes understated.
+                    // "Incomplete" sends the reader looking for workloads that are
+                    // missing, which is the one thing none of these mean.
+                    title="Some values on this map are unreliable"
+                    message={flowsData.warning}
+                  />
+                </div>
+              )}
+              <TrafficGraph
+                flows={finalFlows}
+                hotPathThreshold={hotPathThreshold}
+                showNamespaceGroups={showNamespaceGroups}
+                serviceCategories={serviceCategories}
+                addonMode={addonMode}
+                trafficSource={sourcesData?.active || ''}
+                onSelectionChange={setGraphSelection}
+              />
+            </>
           ) : connectionError ? (
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="text-center space-y-3">
@@ -1191,10 +1292,21 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                   action={
                     <button
                       type="button"
+                      // Nine filters can empty this view; clearing three of them left
+                      // the user pressing a button that promised everything back and
+                      // changed nothing whenever the cause was a namespace, an addon
+                      // mode or an L7 choice.
                       onClick={() => {
                         setHideSystem(false)
                         setHideExternal(false)
-                        setMinConnections(0)
+                        chooseMinConnections(0)
+                        setHiddenNamespaces(new Set())
+                        setAddonMode('show')
+                        setL7Protocol('all')
+                        setL7Methods(new Set())
+                        setL7StatusRanges(new Set())
+                        setL7Verdicts(new Set())
+                        setDnsPattern('')
                       }}
                       className="badge badge-sm border border-theme-border bg-theme-elevated text-theme-text-primary hover:bg-theme-hover transition-colors"
                     >
@@ -1208,7 +1320,11 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                   tone="neutral"
                   variant="card"
                   icon={AlertTriangle}
-                  headline="Unable to fetch traffic data"
+                  headline={
+                    warningIsPermanent
+                      ? 'No traffic Radar can place on the map'
+                      : 'Unable to fetch traffic data'
+                  }
                   body={flowsData.warning}
                   className="max-w-md"
                 />

package/src/components/traffic/TrafficWizard.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import type { TrafficSourcesResponse, TrafficWizardState } from '../../types'
 import { CheckCircle2, XCircle, AlertTriangle, Copy, ExternalLink, ArrowRight, ArrowLeft, Package } from 'lucide-react'
-import { assetUrl, PaneLoader } from '@skyhook-io/k8s-ui'
+import { AlertBanner, assetUrl, PaneLoader } from '@skyhook-io/k8s-ui'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
 import { InstallWizard } from '../helm/InstallWizard'
 
@@ -204,6 +204,18 @@ export function TrafficWizard({
               </div>
             ))}
 
+            {/* Installed but unusable — a fixable configuration, not an error */}
+            {sourcesData?.detected.filter(s => s.status === 'not_found').map(source => (
+              <AlertBanner
+                key={source.name}
+                variant="warning"
+                // Source names are lowercase ids; the block this replaced applied a
+                // capitalize class, which an AlertBanner title (a plain string) cannot.
+                title={`${source.name.charAt(0).toUpperCase()}${source.name.slice(1)}${source.version ? ` ${source.version}` : ''} is installed but not usable`}
+                message={source.message}
+              />
+            ))}
+
             {/* Recommendation */}
             {recommendation && (
               <div className="space-y-4">

package/src/components/traffic/trafficFilters.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit } from './trafficFilters'
+
+describe('matchesStatusRanges', () => {
+  it('does not filter when nothing is selected', () => {
+    expect(matchesStatusRanges(new Set(), [], false)).toBe(true)
+  })
+
+  it('matches an event-based flow on its own status bucket', () => {
+    const ranges = new Set(['5xx'])
+    expect(matchesStatusRanges(ranges, bucketsFromStatus(503), false)).toBe(true)
+    expect(matchesStatusRanges(ranges, bucketsFromStatus(200), false)).toBe(false)
+  })
+
+  it('matches an aggregate on the buckets it actually reports', () => {
+    const counts = { '2xx': 40, '5xx': 3 }
+    expect(matchesStatusRanges(new Set(['5xx']), bucketsFromCounts(counts), false)).toBe(true)
+    expect(matchesStatusRanges(new Set(['4xx']), bucketsFromCounts(counts), false)).toBe(false)
+  })
+
+  it('ignores a bucket present but zero', () => {
+    expect(matchesStatusRanges(new Set(['5xx']), bucketsFromCounts({ '5xx': 0 }), false)).toBe(false)
+  })
+
+  // The load-bearing case. A rate-based source measures a 5xx rate rather than
+  // observing individual responses, so it has no status code and no bucket. The
+  // filter used to require one, which hid exactly the failing traffic the user
+  // had asked to see.
+  it('finds a failing edge that reports an error signal but no status', () => {
+    expect(matchesStatusRanges(new Set(['5xx']), [], true)).toBe(true)
+    expect(matchesStatusRanges(new Set(['5xx']), bucketsFromStatus(undefined), true)).toBe(true)
+    expect(matchesStatusRanges(new Set(['5xx']), bucketsFromCounts(undefined), true)).toBe(true)
+  })
+
+  it('does not let an error signal satisfy a non-5xx selection', () => {
+    expect(matchesStatusRanges(new Set(['2xx']), [], true)).toBe(false)
+    expect(matchesStatusRanges(new Set(['4xx']), [], true)).toBe(false)
+  })
+
+  it('still matches a selected bucket when there are no errors', () => {
+    expect(matchesStatusRanges(new Set(['2xx', '5xx']), bucketsFromStatus(204), false)).toBe(true)
+  })
+})
+
+describe('isRateBasedSource', () => {
+  it('knows which sources report rates rather than counts', () => {
+    expect(isRateBasedSource('beyla')).toBe(true)
+    expect(isRateBasedSource('istio')).toBe(true)
+    expect(isRateBasedSource('hubble')).toBe(false)
+    expect(isRateBasedSource('caretta')).toBe(false)
+    expect(isRateBasedSource(undefined)).toBe(false)
+    expect(isRateBasedSource('')).toBe(false)
+  })
+})
+
+describe('keepAvailable', () => {
+  it('drops a choice whose control is no longer offered', () => {
+    // The button is gone, so the selection must stop filtering — otherwise the map
+    // goes blank with nothing left to clear.
+    expect(keepAvailable(new Set(['5xx']), [])).toEqual(new Set())
+    expect(keepAvailable(new Set(['2xx', '5xx']), ['5xx'])).toEqual(new Set(['5xx']))
+  })
+
+  it('leaves an empty selection alone', () => {
+    expect(keepAvailable(new Set(), ['5xx'])).toEqual(new Set())
+  })
+
+  it('keeps everything still on offer', () => {
+    expect(keepAvailable(new Set(['GET', 'POST']), ['GET', 'POST', 'PUT'])).toEqual(new Set(['GET', 'POST']))
+  })
+})
+
+describe('effectiveThreshold', () => {
+  it('keeps a threshold chosen under the unit still in use', () => {
+    expect(effectiveThreshold(100, 'connections', 'connections')).toBe(100)
+    expect(effectiveThreshold(10, 'rate', 'rate')).toBe(10)
+    expect(effectiveThreshold(0, 'rate', 'rate')).toBe(0)
+  })
+
+  it('drops one chosen under the other unit', () => {
+    // 10000 connections against a rate source would hide every edge.
+    expect(effectiveThreshold(10000, 'connections', 'rate')).toBe(0)
+    expect(effectiveThreshold(1, 'rate', 'connections')).toBe(0)
+  })
+
+  // The load-bearing case: these numbers are steps in BOTH scales, so membership in
+  // the active list cannot tell them apart. "100+ connections" is a mild filter;
+  // reinterpreted as "100+ req/s" it empties a map whose busiest edge runs at 6/s,
+  // while the dropdown still shows a deliberate-looking selection.
+  it('drops a value that exists in both scales but was chosen under the other', () => {
+    expect(effectiveThreshold(100, 'connections', 'rate')).toBe(0)
+    expect(effectiveThreshold(1000, 'connections', 'rate')).toBe(0)
+    expect(effectiveThreshold(100, 'rate', 'connections')).toBe(0)
+  })
+})
+
+describe('volumeUnit', () => {
+  it('names the quantity each kind of source measures', () => {
+    expect(volumeUnit(true)).toBe('rate')
+    expect(volumeUnit(false)).toBe('connections')
+    expect(volumeUnit(undefined)).toBe('connections')
+  })
+})

package/src/components/traffic/trafficFilters.ts

@@ -0,0 +1,117 @@
+/**
+ * Does a flow fall into one of the selected HTTP status ranges?
+ *
+ * Shared by the graph's aggregated filter and the flow list's per-row filter.
+ * They read different fields — one has a bucket histogram and an error count, the
+ * other a single status code and an error rate — but the rule has to be the same,
+ * and keeping it in one place is what stops the two from drifting apart.
+ *
+ * `hasErrors` exists because a rate-based source (Beyla, Istio) measures a 5xx
+ * rate rather than observing individual responses. It has no status code to offer
+ * and no bucket to match, so a filter that insists on one hides precisely the
+ * traffic the user asked to see.
+ *
+ * @param ranges  selected buckets, e.g. {"2xx", "5xx"}; empty means no filtering
+ * @param buckets buckets this flow actually reports
+ * @param hasErrors whether the flow carries a non-zero error signal
+ */
+export function matchesStatusRanges(
+  ranges: Set<string>,
+  buckets: string[],
+  hasErrors: boolean
+): boolean {
+  if (ranges.size === 0) return true
+  if (ranges.has('5xx') && hasErrors) return true
+  return buckets.some(b => ranges.has(b))
+}
+
+/** Buckets an aggregated flow reports, from its status histogram. */
+export function bucketsFromCounts(counts: Record<string, number> | undefined): string[] {
+  if (!counts) return []
+  return Object.keys(counts).filter(k => (counts[k] ?? 0) > 0)
+}
+
+/** The single bucket a raw flow reports, if it carries a status code at all. */
+export function bucketsFromStatus(httpStatus: number | undefined): string[] {
+  if (!httpStatus) return []
+  return [`${Math.floor(httpStatus / 100)}xx`]
+}
+
+/**
+ * Does this source measure rates rather than counting individual events?
+ *
+ * Beyla and Istio read counters out of Prometheus, so what they report per edge is
+ * a per-second rate: "connections" is really requests per second, and the error
+ * count is errors per second. Hubble and Caretta observe individual flows and
+ * report genuine counts. The distinction changes units, labels and the sensible
+ * scale of a volume filter, so it lives in one place rather than being re-derived
+ * wherever it is needed.
+ */
+export function isRateBasedSource(source: string | undefined): boolean {
+  return source === 'istio' || source === 'beyla'
+}
+
+/**
+ * Narrow a set of chosen filter values to the ones still offered.
+ *
+ * The filter controls are built from what the flows actually contain, so a choice
+ * can outlive its button: pick 5xx, let the errors stop, and the toggle disappears
+ * while the selection keeps filtering — a blank map with nothing left to clear it.
+ * Applying the intersection at the point of use rather than editing the stored
+ * selection means the choice is ignored while it is unavailable and takes effect
+ * again by itself if the traffic comes back.
+ */
+export function keepAvailable(selected: Set<string>, available: string[]): Set<string> {
+  if (selected.size === 0) return selected
+  const offered = new Set(available)
+  const kept = new Set<string>()
+  for (const value of selected) {
+    if (offered.has(value)) kept.add(value)
+  }
+  return kept
+}
+
+/** Volume-filter steps for a source that counts events. */
+export const CONNECTION_THRESHOLDS = [
+  { value: 0, label: 'All traffic' },
+  { value: 100, label: '100+ connections' },
+  { value: 1000, label: '1K+ connections' },
+  { value: 10000, label: '10K+ connections' },
+  { value: 100000, label: '100K+ connections' },
+]
+
+/**
+ * Volume-filter steps for a source that measures rates. Both the unit and the
+ * scale differ: a busy service runs at single-digit requests per second, so the
+ * connection steps above would filter the whole map away.
+ */
+export const RATE_THRESHOLDS = [
+  { value: 0, label: 'All traffic' },
+  { value: 1, label: '1+ req/s' },
+  { value: 10, label: '10+ req/s' },
+  { value: 100, label: '100+ req/s' },
+  { value: 1000, label: '1K+ req/s' },
+]
+
+export function volumeThresholds(isRateBased: boolean | undefined) {
+  return isRateBased ? RATE_THRESHOLDS : CONNECTION_THRESHOLDS
+}
+
+/** Which quantity the volume filter is counting. */
+export type VolumeUnit = 'connections' | 'rate'
+
+export function volumeUnit(isRateBased: boolean | undefined): VolumeUnit {
+  return isRateBased ? 'rate' : 'connections'
+}
+
+/**
+ * A volume threshold only means something alongside the unit it was chosen under.
+ * 100 appears in both scales — "100+ connections" and "100+ req/s" — so the number
+ * alone cannot say whether a stored choice still applies, and carrying it across a
+ * source change turns a mild connection filter into a rate filter that hides every
+ * edge while the dropdown still looks deliberately set. Falls back to no filtering
+ * when the unit has changed, because there is no honest conversion between them.
+ */
+export function effectiveThreshold(value: number, chosenUnit: VolumeUnit, currentUnit: VolumeUnit): number {
+  return chosenUnit === currentUnit ? value : 0
+}