@skyhook-io/radar-app 1.10.0 → 1.11.0

package/src/components/resources/renderers/KyvernoPolicyQueued.tsx

@@ -0,0 +1,184 @@
+import { Workflow } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '@skyhook-io/k8s-ui'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { HEALTH_BADGE_COLORS } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { formatAge } from '@skyhook-io/k8s-ui/components/resources/resource-utils'
+import { isForbiddenError } from '../../../api/client'
+import { isKyvernoMutateExistingEnabled } from '@skyhook-io/k8s-ui/components/resources/resource-utils-kyverno-modern'
+import { usePolicyQueued } from '../../../api/policy'
+
+/** A request sitting this long is not mid-flight. Kyverno retries on every
+ *  reconcile, so past this point a backlog grows rather than drains. */
+const STALLED_MINUTES = 5
+
+/** Enough at once to be worth raising even while it is still moving. */
+const BACKLOG_SIZE = 25
+
+/**
+ * The whole banner, or null when a queue is doing what a queue does. Headline
+ * and body are decided together — split across two places, the body went on
+ * diagnosing a stalled controller under a headline that had stopped claiming one.
+ *
+ * Only the first case has measured that the work stopped. The second says how
+ * much is waiting and nothing more: everything in it is younger than the stall
+ * threshold, so it is as likely to be a burst draining normally, and diagnosing
+ * a controller from that is a claim the evidence argues against.
+ */
+export function queueBanner(
+  pending: number,
+  stalledMinutes: number,
+  oldestAge: string,
+): { title: string; message: string } | null {
+  if (stalledMinutes >= STALLED_MINUTES) {
+    return {
+      title: `Queued work has not moved for ${oldestAge}`,
+      message:
+        'Requests build up when the background controller cannot keep up or cannot reach what it needs. They are retried on every reconcile, so a backlog grows rather than drains.',
+    }
+  }
+  if (pending >= BACKLOG_SIZE) {
+    return {
+      title: `${pending} requests are queued`,
+      message: `Nothing here has been waiting longer than ${STALLED_MINUTES} minutes, so this may be a burst still draining. Worth watching: if the count holds or the oldest keeps ageing, the controller is not keeping up.`,
+    }
+  }
+  return null
+}
+
+/**
+ * Whether this policy can queue background work at all.
+ *
+ * Decides whether a denial is worth mentioning. A validate-only policy never
+ * queues anything, so "you can't see the queue" there is noise on the majority
+ * of policy pages. A policy that generates, or mutates resources that already
+ * exist, does queue — and for those a denial hides a backlog that looks exactly
+ * like a healthy policy with nothing pending.
+ */
+export function policyQueuesWork(data: any): boolean {
+  if (data?.kind === 'GeneratingPolicy') return true
+  if (isKyvernoMutateExistingEnabled(data)) return true
+  return (data?.spec?.rules ?? []).some(
+    (r: any) => !!r?.generate || Array.isArray(r?.mutate?.targets),
+  )
+}
+
+/**
+ * Whether a queued request belongs to this policy.
+ *
+ * Exactly one form matches, never both. A namespaced Policy is recorded as
+ * `namespace/name` and a cluster-scoped one bare, and Kyverno permits the two
+ * to share a name — so accepting the bare form as a fallback hands a namespaced
+ * policy the backlog of a ClusterPolicy it has nothing to do with. The coverage
+ * lookup refuses the same fallback for the same reason.
+ */
+export function requestBelongsTo(request: any, name: string, namespace: string): boolean {
+  const policy = request?.spec?.policy
+  if (!policy || !name) return false
+  return policy === (namespace ? `${namespace}/${name}` : name)
+}
+
+/**
+ * What this policy has queued and not finished.
+ *
+ * A generate or mutate-existing rule does its work through queued requests, and
+ * the way that fails in practice is a pile-up rather than one bad request:
+ * upstream reports describe thousands stuck in Pending, never cleaned up, taken
+ * up again on every reconcile. That is a count, and a count belongs next to the
+ * policy — the requests have their own page, but nobody watches it.
+ *
+ * Silent when the policy has queued nothing, so it never adds an empty section
+ * to the majority of policies that only validate.
+ */
+export function KyvernoPolicyQueued({ data }: { data: any }) {
+  const name = data?.metadata?.name ?? ''
+  const namespace = data?.metadata?.namespace ?? ''
+
+  // Server-side, because the answer's scope is not the subject's: Kyverno keeps
+  // these in its own namespace, and the generic resource list would have
+  // answered for whatever namespaces the reader happens to be viewing.
+  const { data: queued, error } = usePolicyQueued(name, namespace, !!name)
+
+  const total = queued?.requests ?? 0
+  if (total === 0) {
+    // An empty list and an unreadable one are not the same answer. A denial is
+    // cluster-static, so disclosing it on every policy page would be noise on the
+    // majority that only validate and never queue anything — but staying silent
+    // about it on a policy that DOES queue hides a backlog behind a page that
+    // looks like a healthy one with nothing pending. So it is disclosed exactly
+    // where it can cost something.
+    if (!error) return null
+    if (isForbiddenError(error) && !policyQueuesWork(data)) return null
+    return (
+      <Section title="Queued Work" icon={Workflow}>
+        <LookupFailureNote errors={[error]} what="what this policy has queued" />
+      </Section>
+    )
+  }
+
+  const byState = queued?.byState ?? {}
+  const pending = byState['Pending'] ?? 0
+  const failed = byState['Failed'] ?? 0
+  const messages = queued?.messages ?? []
+  const oldestPending = queued?.oldestPending
+
+  const stalledMinutes = oldestPending
+    ? Math.floor((Date.now() - new Date(oldestPending).getTime()) / 60000)
+    : 0
+  const banner = queueBanner(pending, stalledMinutes, oldestPending ? formatAge(oldestPending) : '')
+
+  return (
+    <>
+      {banner && (
+        <AlertBanner variant="warning" title={banner.title} message={banner.message} />
+      )}
+      <Section title="Queued Work" icon={Workflow} defaultExpanded={pending > 0 || failed > 0}>
+        <PropertyList>
+          <Property label="Requests" value={String(total)} />
+          {Object.entries(byState).map(([state, n]) => (
+            <Property
+              key={state}
+              label={state}
+              value={
+                <span
+                  className={clsx(
+                    'badge',
+                    HEALTH_BADGE_COLORS[
+                      (state === 'Failed'
+                        ? 'unhealthy'
+                        : state === 'Pending'
+                          ? 'degraded'
+                          : state === 'Completed'
+                            ? 'healthy'
+                            : 'unknown') as keyof typeof HEALTH_BADGE_COLORS
+                    ],
+                  )}
+                >
+                  {n}
+                </span>
+              }
+            />
+          ))}
+          {oldestPending && (
+            <Property label="Oldest Pending" value={`${formatAge(oldestPending)} ago`} />
+          )}
+        </PropertyList>
+        {messages.length > 0 && (
+          <div className="mt-2 pt-2 border-t border-theme-border space-y-1">
+            {/* Kyverno writes why it could not complete a request into
+                status.message, and it is the only diagnosis this object
+                carries. A count without it says something is wrong and leaves
+                you to go and find out what. */}
+            {messages.map((m, i) => (
+              <div key={i} className="text-xs text-warning-text">{m}</div>
+            ))}
+          </div>
+        )}
+        <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+          These are deleted seconds after they complete, so this counts what is in flight right now
+          rather than everything this policy has ever done.
+        </div>
+      </Section>
+    </>
+  )
+}

package/src/components/resources/renderers/RolloutRenderer.tsx

@@ -1 +1,24 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RolloutRenderer'
+import { RolloutRenderer as BaseRolloutRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RolloutRenderer'
+import { useRolloutAction, useRolloutCapabilities, type RolloutAction } from '../../../api/client'
+
+interface RolloutRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function RolloutRenderer({ data, onNavigate }: RolloutRendererProps) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const { data: capabilities } = useRolloutCapabilities(namespace, name)
+  const action = useRolloutAction()
+
+  return (
+    <BaseRolloutRenderer
+      data={data}
+      onNavigate={onNavigate}
+      capabilities={capabilities}
+      onAction={(next: RolloutAction) => action.mutate({ action: next, namespace, name })}
+      pendingAction={action.isPending ? action.variables?.action ?? null : null}
+    />
+  )
+}

package/src/components/resources/renderers/VeleroBSLRenderer.tsx

@@ -1 +1,44 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBSLRenderer'
+import { VeleroBSLRenderer as BaseVeleroBSLRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBSLRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useVeleroStoredBackups } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the reverse lookup the package renderer cannot do: which
+ * Backups this storage location holds.
+ *
+ * Without it the page states a phase and stops. "Unavailable" is a fact about a
+ * bucket; what an operator came to find out is what it costs them, and that is
+ * the list of backups they cannot restore from until it recovers — every one of
+ * which Velero still reports as Completed.
+ */
+export function VeleroBSLRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const stored = useVeleroStoredBackups(namespace, name, !!namespace && !!name)
+
+  return (
+    <BaseVeleroBSLRenderer
+      data={data}
+      // Undefined while unresolved: an empty list would say this location holds
+      // nothing, which is a different answer from not having looked yet.
+      storedBackups={stored.isLoading || stored.error ? undefined : (stored.data?.backups ?? [])}
+      storedTotal={stored.data?.stored}
+      restorableTotal={stored.data?.restorable}
+      expiredTotal={stored.data?.expired}
+      listTruncated={stored.data?.truncated}
+      lookupNote={
+        stored.error ? (
+          <LookupFailureNote errors={[stored.error]} what="which backups are stored here" />
+        ) : undefined
+      }
+      onNavigate={onNavigate}
+    />
+  )
+}

package/src/components/resources/renderers/VeleroBackupRenderer.tsx

@@ -1 +1,75 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBackupRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { VeleroBackupRenderer as BaseVeleroBackupRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBackupRenderer'
+import { resolveBackupStorageLocation } from '@skyhook-io/k8s-ui/components/resources/resource-utils-velero'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../../api/client'
+import { useVeleroRunMessages } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the two things a Backup cannot answer from its own status:
+ * whether the storage location holding it is reachable, and what the errors and
+ * warnings it counted actually say.
+ *
+ * The backup's own status says Completed and goes on saying it after the bucket
+ * behind it goes Unavailable. This is the page someone opens to decide whether
+ * they can restore to this point, so the answer belongs here and not one screen
+ * away.
+ *
+ * Namespace is explicit — storage locations live alongside the backups that name
+ * them, in Velero's own namespace. Omitting it would inherit the reader's
+ * namespace view filter, which is a browsing preference and not the scope of
+ * this question.
+ */
+export function VeleroBackupRenderer({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  const messages = useRunMessages('backups', data)
+  const namespace = data?.metadata?.namespace ?? ''
+
+  const locations = useResources<any>('backupstoragelocations', namespace, 'velero.io', {
+    enabled: !!namespace,
+  })
+
+  // Everything below is gated on the lookup having answered. A location we have
+  // not read is not a healthy one, and neither is a name we have not resolved:
+  // an unset spec.storageLocation means whichever location carries spec.default,
+  // so resolving it against a list that has not loaded produces the literal
+  // "default", which is wrong on any install that renamed it — and wrong
+  // permanently when the list errors rather than for a moment.
+  const answered = !locations.isLoading && !locations.error && locations.data !== undefined
+  const resolved = answered ? resolveBackupStorageLocation(data, locations.data) : undefined
+
+  const match = answered
+    ? (locations.data ?? []).find((l: any) => l?.metadata?.name === resolved)
+    : undefined
+  const phase = match?.status?.phase
+
+  // The location the backup names is gone. Velero restores from the location
+  // recorded on the backup, so this is not restorable — and it is invisible
+  // otherwise, because a location that does not exist has no phase to report.
+  const missing = answered && !!resolved && match === undefined
+
+  return (
+    <BaseVeleroBackupRenderer
+      data={data}
+      storageLocationPhase={phase}
+      storageLocationName={resolved}
+      storageLocationMissing={missing}
+      messages={messages}
+      onNavigate={onNavigate}
+    />
+  )
+}
+
+// The messages behind the counts. Nothing is fetched until the operator asks:
+// reading them makes Velero create a DownloadRequest and pulls an object out of
+// storage, which is not work to do on every drawer open.
+function useRunMessages(kind: 'backups' | 'restores', data: any) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const fetcher = useVeleroRunMessages(kind, namespace, name)
+  return {
+    messages: fetcher.data,
+    loading: fetcher.isPending,
+    lookupNote: fetcher.error ? <LookupFailureNote errors={[fetcher.error]} what="the messages behind these counts" /> : undefined,
+    onFetch: namespace && name ? () => fetcher.mutate() : undefined,
+  }
+}

package/src/components/resources/renderers/VeleroRestoreRenderer.tsx

@@ -1 +1,35 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroRestoreRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { VeleroRestoreRenderer as BaseVeleroRestoreRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroRestoreRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useVeleroRunMessages } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the messages behind the run's error and warning counts.
+ *
+ * The counts are on the Restore; the text is not. It lives in a results file in
+ * object storage that only Velero's controller can hand out a link to — so the
+ * page showed a number an operator could worry about but not act on. A stuck
+ * restore is the more urgent of the two kinds, because someone is waiting on
+ * their data.
+ *
+ * Fetched on click, not on open: it creates a DownloadRequest and pulls an
+ * object out of storage. Same bargain as the network trace's probes.
+ */
+export function VeleroRestoreRenderer({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const fetcher = useVeleroRunMessages('restores', namespace, name)
+
+  return (
+    <BaseVeleroRestoreRenderer
+      data={data}
+      onNavigate={onNavigate}
+      messages={{
+        messages: fetcher.data,
+        loading: fetcher.isPending,
+        lookupNote: fetcher.error ? <LookupFailureNote errors={[fetcher.error]} what="the messages behind these counts" /> : undefined,
+        onFetch: namespace && name ? () => fetcher.mutate() : undefined,
+      }}
+    />
+  )
+}

package/src/components/resources/renderers/index.ts

@@ -11,6 +11,7 @@ export { CronWorkflowRenderer } from './CronWorkflowRenderer'
 export { HPARenderer } from './HPARenderer'
 export { NodeRenderer } from './NodeRenderer'
 export { PVCRenderer } from './PVCRenderer'
+export { KyvernoPolicyCoverage } from './KyvernoPolicyCoverage'
 export { RolloutRenderer } from './RolloutRenderer'
 export { CertificateRenderer } from './CertificateRenderer'
 export { WorkflowRenderer } from './WorkflowRenderer'

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -17,15 +17,7 @@ import type { AddonMode } from './TrafficView'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '@skyhook-io/k8s-ui'
-
-// Connection threshold options
-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' },
-]
+import { volumeThresholds } from './trafficFilters'
 
 // Time range options
 const TIME_RANGES = [
@@ -63,7 +55,19 @@ interface TrafficFilterSidebarProps {
   setTimeRange: (v: string) => void
 
   // L7 filters (Hubble-only)
-  isHubble?: boolean
+  /** Whether the flows carry any L7 detail at all. Not "is this Hubble": Beyla and
+   *  Istio report L7 too, and gating on the source name hid these filters from them. */
+  showL7Filters?: boolean
+  /** Status buckets that can actually match. A source reporting no status
+   *  distribution still reports an error rate, so 5xx can be offered on the strength
+   *  of that while the others would match nothing. */
+  availableStatusRanges?: string[]
+  availableVerdicts?: string[]
+  hasDNSQueries?: boolean
+  availableHTTPMethods?: string[]
+  /** The active source measures rates rather than counting events, which changes
+   *  both the unit and the useful scale of the volume filter. */
+  isRateBased?: boolean
   l7Protocol: string // 'all' | 'HTTP' | 'DNS' | 'TCP'
   setL7Protocol: (v: string) => void
   l7Methods: Set<string>
@@ -154,7 +158,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   setDetectServices,
   timeRange,
   setTimeRange,
-  isHubble,
+  showL7Filters,
+  availableStatusRanges = [],
+  availableVerdicts = [],
+  hasDNSQueries,
+  availableHTTPMethods = [],
+  isRateBased,
   l7Protocol,
   setL7Protocol,
   l7Methods,
@@ -209,7 +218,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               onChange={(e) => setMinConnections(Number(e.target.value))}
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
-              {CONNECTION_THRESHOLDS.map(({ value, label }) => (
+              {volumeThresholds(isRateBased).map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
@@ -316,8 +325,10 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
           </div>
         </div>
 
-        {/* L7 Filters (Hubble only) */}
-        {isHubble && (
+        {/* L7 filters, shown whenever the flows carry L7 detail. Every control below
+            is gated on data that exists, so the panel never offers one that cannot
+            return anything. */}
+        {showL7Filters && (
           <div className="space-y-2 px-3 py-2 border-t border-theme-border">
             <div className="flex items-center gap-1.5">
               <Filter className="w-3 h-3 text-theme-text-tertiary" />
@@ -346,12 +357,13 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
             </div>
 
             {/* HTTP sub-filters (visible when protocol is All or HTTP) */}
-            {(l7Protocol === 'all' || l7Protocol === 'HTTP') && (
+            {(l7Protocol === 'all' || l7Protocol === 'HTTP') && (availableHTTPMethods.length > 0 || availableStatusRanges.length > 0) && (
               <>
+                {availableHTTPMethods.length > 0 && (
                 <div>
                   <div className="text-[10px] text-theme-text-tertiary mb-1">HTTP Method</div>
                   <div className="flex flex-wrap gap-1">
-                    {['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].map(method => (
+                    {availableHTTPMethods.map(method => (
                       <button
                         key={method}
                         onClick={() => onToggleL7Method(method)}
@@ -367,7 +379,9 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                     ))}
                   </div>
                 </div>
+                )}
 
+                {availableStatusRanges.length > 0 && (
                 <div>
                   <div className="text-[10px] text-theme-text-tertiary mb-1">Status Code</div>
                   <div className="flex flex-wrap gap-1">
@@ -376,7 +390,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                       { label: '3xx', active: SEVERITY_BADGE.info },
                       { label: '4xx', active: SEVERITY_BADGE.warning },
                       { label: '5xx', active: SEVERITY_BADGE.error },
-                    ] as const).map(({ label, active }) => (
+                    ] as const).filter(({ label }) => availableStatusRanges.includes(label)).map(({ label, active }) => (
                       <button
                         key={label}
                         onClick={() => onToggleL7StatusRange(label)}
@@ -392,11 +406,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                     ))}
                   </div>
                 </div>
+                )}
               </>
             )}
 
             {/* DNS sub-filter (visible when protocol is All or DNS) */}
-            {(l7Protocol === 'all' || l7Protocol === 'DNS') && (
+            {(l7Protocol === 'all' || l7Protocol === 'DNS') && hasDNSQueries && (
               <div>
                 <div className="text-[10px] text-theme-text-tertiary mb-1">DNS Query</div>
                 <Input
@@ -408,7 +423,8 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               </div>
             )}
 
-            {/* Verdict (always visible — applies to all protocols) */}
+            {/* Verdict, limited to the verdicts the data actually contains. */}
+            {availableVerdicts.length > 0 && (
             <div>
               <div className="text-[10px] text-theme-text-tertiary mb-1">Verdict</div>
               <div className="flex flex-wrap gap-1">
@@ -416,7 +432,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                   { label: 'forwarded', active: SEVERITY_BADGE.success },
                   { label: 'dropped', active: SEVERITY_BADGE.error },
                   { label: 'error', active: SEVERITY_BADGE.warning },
-                ] as const).map(({ label, active }) => (
+                ] as const).filter(({ label }) => availableVerdicts.includes(label)).map(({ label, active }) => (
                   <button
                     key={label}
                     onClick={() => onToggleL7Verdict(label)}
@@ -432,6 +448,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                 ))}
               </div>
             </div>
+            )}
           </div>
         )}
 

package/src/components/traffic/TrafficFlowList.tsx

@@ -181,10 +181,24 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                   </span>
                   </Tooltip>
 
-                  {/* Destination */}
-                  <Tooltip content={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name} wrapperClassName="min-w-0">
+                  {/* Destination. An unoriented conversation has no caller and no
+                      callee — the two ends are ordered arbitrarily — so it is marked
+                      rather than presented as a direction the source established. */}
+                  <Tooltip
+                    content={
+                      flow.directionUnknown
+                        ? 'Direction unknown: this source could not determine which end opened the conversation'
+                        : flow.destination.namespace
+                          ? `${flow.destination.namespace}/${flow.destination.name}`
+                          : flow.destination.name
+                    }
+                    wrapperClassName="min-w-0"
+                  >
                   <span className="truncate text-theme-text-primary">
                     {flow.destination.name}
+                    {flow.directionUnknown && (
+                      <span className="ml-1 text-theme-text-tertiary">(direction unknown)</span>
+                    )}
                   </span>
                   </Tooltip>