@skyhook-io/radar-app 1.16.3 → 1.17.0

package/src/components/traffic/TrafficConnectionsTable.tsx

@@ -0,0 +1,144 @@
+import { useMemo } from 'react'
+import { Virtuoso } from 'react-virtuoso'
+import { clsx } from 'clsx'
+import { ArrowRight, Crosshair, Minus } from 'lucide-react'
+import type { AggregatedFlow } from '../../types'
+import { SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
+import type { TrafficGraphSelection } from './TrafficGraph'
+import {
+  connectionRows, displayVolume, edgesOnPort, flowDrops, flowErrors, formatRate, graphEndpointId, hasStatusData, isExternalKind,
+  type GraphFlow, type TrafficFocus,
+} from './trafficFilters'
+
+interface TrafficConnectionsTableProps {
+  flows: AggregatedFlow[]
+  isRateBased: boolean
+  selection: TrafficGraphSelection | null
+  onSelect: (selection: TrafficGraphSelection | null) => void
+  onFocus: (focus: TrafficFocus) => void
+  /** The focused endpoint, whose name is not offered as a focus again. */
+  focusedId?: string
+}
+
+const GRID = 'grid grid-cols-[minmax(0,1fr)_1rem_minmax(0,1fr)_6.5rem_5rem_4.5rem_4.5rem] items-center gap-x-3'
+// Without HTTP status anywhere in view (plain TCP) a 5xx column would read as
+// "no errors" rather than "not measured".
+const GRID_NO_STATUS = 'grid grid-cols-[minmax(0,1fr)_1rem_minmax(0,1fr)_6.5rem_5rem_4.5rem] items-center gap-x-3'
+
+function rowSelection(flow: AggregatedFlow): TrafficGraphSelection {
+  return {
+    type: 'edge',
+    sourceId: graphEndpointId(flow.source),
+    destId: graphEndpointId(flow.destination),
+    port: flow.port,
+    directionUnknown: !!flow.directionUnknown,
+  }
+}
+
+function selectedRows(rows: GraphFlow[], selection: TrafficGraphSelection | null): Set<GraphFlow> {
+  if (selection?.type !== 'edge' || selection.port === undefined) return new Set()
+  const between = rows.filter(flow =>
+    graphEndpointId(flow.source) === selection.sourceId && graphEndpointId(flow.destination) === selection.destId &&
+    !!flow.directionUnknown === !!selection.directionUnknown)
+  return new Set(edgesOnPort(between, f => f, selection.port))
+}
+
+/**
+ * The view's connections as rows, for when there are too many to draw. Where
+ * the problems are comes first. Selecting a row loads its records into the
+ * flow list, as selecting an edge does; a name narrows the view to it.
+ */
+export function TrafficConnectionsTable({ flows, isRateBased, selection, onSelect, onFocus, focusedId }: TrafficConnectionsTableProps) {
+  const rows = useMemo(() => connectionRows(flows), [flows])
+  const selected = useMemo(() => selectedRows(rows, selection), [rows, selection])
+  const showStatus = useMemo(() => flows.some(hasStatusData), [flows])
+  const grid = showStatus ? GRID : GRID_NO_STATUS
+
+  const endpoint = (e: AggregatedFlow['source']) => {
+    const id = graphEndpointId(e)
+    const label = (
+      <span className="min-w-0">
+        <span className="block truncate text-theme-text-primary">{e.name}</span>
+        {e.namespace && <span className="block truncate text-[10px] text-theme-text-tertiary">{e.namespace}</span>}
+      </span>
+    )
+    if (id === focusedId || e.kind === 'Internet') return <span className="flex min-w-0 items-center">{label}</span>
+    return (
+      <Tooltip content={`Focus on ${e.name}`} wrapperClassName="min-w-0">
+        <button
+          type="button"
+          onClick={ev => {
+            ev.stopPropagation()
+            onFocus({ namespace: e.namespace || undefined, name: e.name })
+          }}
+          className="group flex min-w-0 max-w-full items-center gap-1 text-left hover:underline"
+        >
+          {label}
+          <Crosshair className="h-3 w-3 shrink-0 opacity-0 group-hover:opacity-70" />
+        </button>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className={clsx(grid, 'px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary border-b border-theme-border')}>
+        <span>Source</span>
+        <span />
+        <span>Destination</span>
+        <span>Port</span>
+        <span className="text-right">{isRateBased ? 'Req/s' : 'Conns'}</span>
+        {showStatus && <span className="text-right">5xx</span>}
+        <span className="text-right">Dropped</span>
+      </div>
+      <Virtuoso
+        className="flex-1"
+        data={rows}
+        computeItemKey={(_, flow) => `${graphEndpointId(flow.source)}->${graphEndpointId(flow.destination)}:${flow.port}${flow.directionUnknown ? ':u' : ''}`}
+        itemContent={(_, flow) => {
+          const sel = rowSelection(flow)
+          const isSelected = selected.has(flow)
+          const errors = flowErrors(flow)
+          const drops = flowDrops(flow)
+          return (
+            <div
+              role="row"
+              aria-selected={isSelected}
+              onClick={() => onSelect(isSelected ? null : sel)}
+              className={clsx(
+                grid,
+                'cursor-pointer px-3 py-1.5 text-xs border-b border-theme-border/50 transition-colors',
+                isSelected ? 'bg-theme-elevated' : 'hover:bg-theme-hover',
+              )}
+            >
+              {endpoint(flow.source)}
+              {flow.directionUnknown
+                ? <Tooltip content="Direction unknown"><Minus className="h-3 w-3 text-theme-text-tertiary" /></Tooltip>
+                : <ArrowRight className="h-3 w-3 text-theme-text-tertiary" />}
+              {endpoint(flow.destination)}
+              <span className="truncate text-theme-text-secondary tabular-nums">
+                {flow.port > 0 ? flow.port : '—'}
+                {(flow.l7Protocol || flow.protocol) && (
+                  <span className="ml-1 text-theme-text-tertiary">{flow.l7Protocol || flow.protocol.toUpperCase()}</span>
+                )}
+                {isExternalKind(flow.destination.kind) && <span className="ml-1 text-theme-text-tertiary">ext</span>}
+              </span>
+              <span className="text-right tabular-nums text-theme-text-secondary">
+                {isRateBased ? formatRate(displayVolume(flow, true)) : flow.connections.toLocaleString()}
+              </span>
+              {showStatus && (
+                <span className={clsx('text-right tabular-nums', errors > 0 ? clsx(SEVERITY_TEXT.error, 'font-medium') : 'text-theme-text-tertiary')}>
+                  {errors > 0 ? (isRateBased ? formatRate(errors) : errors.toLocaleString()) : hasStatusData(flow) ? '0' : '—'}
+                </span>
+              )}
+              <span className={clsx('text-right tabular-nums', drops > 0 ? clsx(SEVERITY_TEXT.error, 'font-medium') : 'text-theme-text-tertiary')}>
+                {drops > 0 ? drops.toLocaleString() : '—'}
+              </span>
+            </div>
+          )
+        }}
+      />
+    </div>
+  )
+}

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -10,6 +10,7 @@ import {
   Filter,
   Info,
   Puzzle,
+  Boxes,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_BADGE } from '@skyhook-io/k8s-ui/utils/badge-colors'
@@ -41,6 +42,8 @@ interface TrafficFilterSidebarProps {
   setShowNamespaceGroups: (v: boolean) => void
   collapseInternet: boolean
   setCollapseInternet: (v: boolean) => void
+  groupByWorkload: boolean
+  setGroupByWorkload: (v: boolean) => void
   addonMode: AddonMode
   setAddonMode: (v: AddonMode) => void
 
@@ -83,6 +86,9 @@ interface TrafficFilterSidebarProps {
   namespaces: Array<{ name: string; nodeCount: number }>
   hiddenNamespaces: Set<string>
   onToggleNamespace: (ns: string) => void
+  /** Set while the view is focused on an endpoint: the namespace choices are
+   *  kept but not applied, so a neighbor in a hidden namespace still shows. */
+  namespacesPausedFor?: string
 
 }
 
@@ -150,6 +156,8 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   setShowNamespaceGroups,
   collapseInternet,
   setCollapseInternet,
+  groupByWorkload,
+  setGroupByWorkload,
   addonMode,
   setAddonMode,
   aggregateExternal,
@@ -177,6 +185,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   namespaces,
   hiddenNamespaces,
   onToggleNamespace,
+  namespacesPausedFor,
 }: TrafficFilterSidebarProps) {
   const [namespacesExpanded, setNamespacesExpanded] = useState(false)
 
@@ -298,6 +307,13 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               onToggle={() => setCollapseInternet(!collapseInternet)}
               icon={Globe}
             />
+            <ToggleOption
+              label="Group by Workload"
+              description="Draw a workload's pods as one node. Off, each pod gets its own node"
+              enabled={groupByWorkload}
+              onToggle={() => setGroupByWorkload(!groupByWorkload)}
+              icon={Boxes}
+            />
           </div>
         </div>
 
@@ -494,7 +510,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                 </button>
               </div>
             </div>
-            <div className="space-y-0.5">
+            {namespacesPausedFor && (
+              <p className="mb-1.5 text-[10px] text-theme-text-tertiary">
+                Paused while focused on {namespacesPausedFor}: its neighbors show whatever their namespace.
+              </p>
+            )}
+            <div className={clsx('space-y-0.5', namespacesPausedFor && 'opacity-50 pointer-events-none')} aria-disabled={!!namespacesPausedFor}>
               {visibleNamespaces.map(({ name, nodeCount }) => {
                 const isHidden = hiddenNamespaces.has(name)
                 return (

package/src/components/traffic/TrafficFlowListContext.tsx

@@ -7,10 +7,16 @@ interface TrafficFlowListContextValue {
   responsesCallerOriented: boolean
   graphSelection: TrafficGraphSelection | null
   clearSelection: () => void
+  /** The records for the current selection are still being fetched. */
+  loading?: boolean
+  /** Says which records the list holds when it is not all of them. */
+  note?: string
 }
 
+const emptyValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
+
 // Module-level store — TrafficView writes, dock tab reads.
-let currentValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
+let currentValue: TrafficFlowListContextValue = emptyValue
 const listeners = new Set<() => void>()
 
 function setValue(val: TrafficFlowListContextValue) {
@@ -53,15 +59,17 @@ export function TrafficFlowListProvider({
   responsesCallerOriented,
   graphSelection,
   clearSelection,
+  loading,
+  note,
   children,
 }: TrafficFlowListContextValue & { children: ReactNode }) {
   useEffect(() => {
-    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection })
-  }, [flows, responsesCallerOriented, graphSelection, clearSelection])
+    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection, loading, note })
+  }, [flows, responsesCallerOriented, graphSelection, clearSelection, loading, note])
 
   useEffect(() => {
     return () => {
-      setValue({ flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} })
+      setValue(emptyValue)
       setFlowSearch('')
     }
   }, [])

package/src/components/traffic/TrafficFocusSearch.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+import { Crosshair, X } from 'lucide-react'
+import { Badge, Input } from '@skyhook-io/k8s-ui'
+import { useNavCustomization } from '../../context/NavCustomization'
+import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
+import { formatRate, searchEndpoints, type EndpointSummary, type TrafficFocus } from './trafficFilters'
+
+interface TrafficFocusSearchProps {
+  endpoints: EndpointSummary[]
+  onFocus: (focus: TrafficFocus) => void
+  isRateBased: boolean
+  /** The pane the overlay covers; the viewport when absent. */
+  overlayContainer?: HTMLElement | null
+  /** 'toolbar' is the floating chip over the graph; 'panel' the wider button
+   *  in the too-large panel. Both open the same overlay. */
+  variant?: 'toolbar' | 'panel'
+}
+
+export function TrafficFocusSearch({ endpoints, onFocus, isRateBased, overlayContainer, variant = 'toolbar' }: TrafficFocusSearchProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const resultsRef = useRef<HTMLDivElement>(null)
+
+  const results = useMemo(() => (isOpen ? searchEndpoints(endpoints, query) : []), [isOpen, endpoints, query])
+
+  useEffect(() => setSelectedIndex(0), [results])
+  useEffect(() => {
+    const el = resultsRef.current?.children[selectedIndex] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  const open = useCallback(() => {
+    setIsOpen(true)
+    setTimeout(() => inputRef.current?.focus(), 0)
+  }, [])
+  const close = useCallback(() => {
+    setIsOpen(false)
+    setQuery('')
+  }, [])
+  const choose = useCallback((e: EndpointSummary) => {
+    onFocus({ namespace: e.namespace, name: e.name })
+    close()
+  }, [onFocus, close])
+
+  // The view renders one of the two variants at a time, so whichever is shown
+  // owns the shortcut. An embedding host (Radar Hub) binds / to its own search.
+  const { embedded } = useNavCustomization()
+  useRegisterShortcut({
+    id: 'traffic-focus-search',
+    keys: '/',
+    description: 'Focus on a workload',
+    category: 'Search',
+    scope: 'traffic',
+    handler: open,
+    enabled: !embedded,
+  })
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+      return
+    }
+    if (results.length === 0) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (results[selectedIndex]) choose(results[selectedIndex])
+    }
+  }
+
+  const portalTarget = overlayContainer ?? (typeof document !== 'undefined' ? document.body : null)
+
+  return (
+    <>
+      {variant === 'toolbar' ? (
+        <button
+          type="button"
+          onClick={open}
+          className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[11px] text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+        >
+          <Crosshair className="w-3 h-3" />
+          Focus on a workload
+          {!embedded && <kbd className="hidden sm:inline-flex items-center px-1 text-[10px] bg-theme-elevated rounded border border-theme-border-light">/</kbd>}
+        </button>
+      ) : (
+        <button
+          type="button"
+          onClick={open}
+          className="btn-brand-muted inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-md"
+        >
+          <Crosshair className="w-3.5 h-3.5" />
+          Focus on a workload…
+        </button>
+      )}
+
+      {isOpen && portalTarget && createPortal(
+        <div className={clsx(overlayContainer ? 'absolute' : 'fixed', 'inset-0 z-50 flex items-start justify-center pt-[10vh]')}>
+          <div className="absolute inset-0 bg-theme-base/60 backdrop-blur-sm" onClick={close} />
+          <div role="dialog" aria-label="Focus on a workload" className="relative w-full max-w-lg mx-4 bg-theme-surface border border-theme-border rounded-xl shadow-theme-lg overflow-hidden">
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
+              <Crosshair className="w-5 h-5 text-theme-text-secondary" />
+              <Input
+                ref={inputRef}
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onKeyDown={onKeyDown}
+                placeholder="Workload, service or external name…"
+                className="flex-1 bg-transparent text-theme-text-primary placeholder-theme-text-disabled outline-none text-sm"
+                autoFocus
+              />
+              {query && (
+                <button type="button" onClick={() => setQuery('')} aria-label="Clear" className="p-1 text-theme-text-secondary hover:text-theme-text-primary">
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+              <kbd className="px-1.5 py-0.5 text-xs text-theme-text-tertiary bg-theme-elevated rounded border border-theme-border-light">ESC</kbd>
+            </div>
+            <div ref={resultsRef} className="max-h-[50vh] overflow-y-auto">
+              {results.map((e, index) => (
+                <button
+                  key={e.id}
+                  type="button"
+                  onClick={() => choose(e)}
+                  // Not onMouseEnter: results re-rendering under a resting
+                  // pointer would move the highlight away from what was typed.
+                  onMouseMove={() => { if (index !== selectedIndex) setSelectedIndex(index) }}
+                  className={clsx(
+                    'w-full flex items-center gap-3 px-4 py-2 text-left transition-colors',
+                    index === selectedIndex ? 'bg-theme-elevated/60' : 'hover:bg-theme-elevated/30',
+                  )}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-theme-text-primary truncate">{e.name}</span>
+                      <span className="px-1.5 py-0.5 text-[10px] rounded bg-theme-elevated text-theme-text-secondary">{e.workloadKind || e.kind}</span>
+                    </div>
+                    {e.namespace && <div className="text-xs text-theme-text-tertiary truncate">{e.namespace}</div>}
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0 text-[10px] tabular-nums">
+                    {e.drops > 0 && <Badge severity="error" size="sm">{e.drops.toLocaleString()} dropped</Badge>}
+                    {e.errors > 0 && <Badge severity="error" size="sm">{isRateBased ? `${formatRate(e.errors)}/s` : e.errors.toLocaleString()} 5xx</Badge>}
+                  </div>
+                </button>
+              ))}
+              {results.length === 0 && (
+                <div className="px-4 py-6 text-center text-sm text-theme-text-tertiary">
+                  {query
+                    ? <>No traffic for &ldquo;{query}&rdquo; in this view</>
+                    : 'Nothing in this view has traffic yet'}
+                </div>
+              )}
+            </div>
+            <div className="px-4 py-2 border-t border-theme-border text-xs text-theme-text-tertiary">
+              Shows the workload and everything it talks to. Only endpoints with traffic in this view are listed.
+            </div>
+          </div>
+        </div>,
+        portalTarget,
+      )}
+    </>
+  )
+}