Search findings after the table's other filters and tighten a11y and tokens

Rows hidden by column, problem, label or owner filters no longer spend the
findings budget; other kinds keep the name filter first. A spaced finding
match is capped at 256 UTF-8 bytes like server search. The run view's image
hint is announced to screen readers, and the new notices use theme tokens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: 2 people

packages/k8s-ui/src/components/resources/ResourcesView.tsx

@@ -148,7 +148,7 @@ import {
   SEVERITY_DOT_COLOR,
   healthColors,
 } from './resource-utils'
-import { TRIVY_GROUP, searchTrivyFindings, type TrivyFindingMatch } from './resource-utils-trivy'
+import { TRIVY_GROUP, searchTrivyFindings, type TrivyFindingMatch, type TrivyFindingsSearch } from './resource-utils-trivy'
 import { getGenericResourceStatus } from './generic-status'
 import { ActiveFilterBar } from './ActiveFilterBar'
 import { getIstioGatewayServerCount, getIstioGatewaySelectorString } from './resource-utils-istio'
@@ -5463,21 +5463,18 @@ export function ResourcesView({
     }
   }, [regexMode, deferredSearchTerm])
 
-  // Regex mode stays on names: a pattern run over every finding could
-  // backtrack for seconds on the main thread.
   const isTrivyKind = selectedKind.group === TRIVY_GROUP
-  const findingsSearch = useMemo(() => {
-    if (!tableActive || !resources || !deferredSearchTerm || regexMode || !isTrivyKind) return null
-    return searchTrivyFindings(resources, deferredSearchTerm.toLowerCase())
-  }, [tableActive, resources, deferredSearchTerm, regexMode, isTrivyKind])
 
   // Filter resources by search term, status, problems, and sort
-  const filteredResources = useMemo(() => {
-    if (!tableActive || !resources) return []
+  const { list: filteredResources, findings: findingsSearch } = useMemo((): { list: any[]; findings: TrivyFindingsSearch | null } => {
+    if (!tableActive || !resources) return { list: [], findings: null }
 
     let result = resources
+    let findings: TrivyFindingsSearch | null = null
 
-    // Apply search filter
+    // Apply search filter. On Trivy report kinds a plain search also matches
+    // findings and runs below, after the other filters. Regex mode stays on
+    // names: a pattern run over every finding could backtrack for seconds.
     if (deferredSearchTerm) {
       if (regexMode) {
         const re = searchRegex.re
@@ -5487,12 +5484,11 @@ export function ResourcesView({
             re.test(r.metadata?.namespace ?? '')
           )
         }
-      } else {
+      } else if (!isTrivyKind) {
         const term = deferredSearchTerm.toLowerCase()
         result = result.filter((r: any) =>
           r.metadata?.name?.toLowerCase().includes(term) ||
-          r.metadata?.namespace?.toLowerCase().includes(term) ||
-          !!findingsSearch?.matches.has(r)
+          r.metadata?.namespace?.toLowerCase().includes(term)
         )
       }
     }
@@ -5564,6 +5560,19 @@ export function ResourcesView({
       })
     }
 
+    // Trivy findings are searched after the other filters, so rows they hide
+    // don't spend the findings budget.
+    if (deferredSearchTerm && !regexMode && isTrivyKind) {
+      const term = deferredSearchTerm.toLowerCase()
+      const matched = searchTrivyFindings(result, term)
+      findings = matched
+      result = result.filter((r: any) =>
+        r.metadata?.name?.toLowerCase().includes(term) ||
+        r.metadata?.namespace?.toLowerCase().includes(term) ||
+        matched.matches.has(r)
+      )
+    }
+
     // Apply custom sorting if set. Extra columns override
     // the built-in getSortValue for their key.
     if (effectiveSortColumn && sortDirection) {
@@ -5659,8 +5668,8 @@ export function ResourcesView({
       }
     }
 
-    return result
-  }, [tableActive, resources, deferredSearchTerm, regexMode, searchRegex, findingsSearch, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, effectiveSortColumn, sortDirection, getSortValue, getDisplayFilterValue, extraColumnsByKey, podMatchesProblemFilter])
+    return { list: result, findings }
+  }, [tableActive, resources, deferredSearchTerm, regexMode, searchRegex, isTrivyKind, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, effectiveSortColumn, sortDirection, getSortValue, getDisplayFilterValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -6630,7 +6639,7 @@ export function ResourcesView({
                 </button>
               )}
               {searchTerm && isTrivyKind && (
-                <p className="text-xs mt-1 text-theme-text-disabled">
+                <p className="text-xs mt-1 text-theme-text-tertiary">
                   {regexMode
                     ? 'Regex search matches names and namespaces only.'
                     : 'Searched names, namespaces and report findings (CVE, package, check ID, image).'}

packages/k8s-ui/src/components/resources/resource-utils-trivy.test.ts

@@ -51,6 +51,12 @@ describe('searchTrivyFindings', () => {
     expect(searchTrivyFindings([vuln], 'php8.').matches.size).toBe(0)
   })
 
+  it('caps a finding at 256 UTF-8 bytes for phrases, like server search', () => {
+    const wide = { metadata: { name: 'r', namespace: 'n' }, report: { components: { components: [{ name: 'é'.repeat(128), version: 'needle' }] } } }
+    expect(searchTrivyFindings([wide], 'é needle').matches.size).toBe(0)
+    expect(searchTrivyFindings([wide], 'needle').matches.size).toBe(1)
+  })
+
   it('matches a phrase across one finding, never across findings', () => {
     expect(searchTrivyFindings([vuln], 'php83 8.3.20').matches.has(vuln)).toBe(true)
     expect(searchTrivyFindings([vuln], 'libssl3 8.3.20').matches.has(vuln)).toBe(false)

packages/k8s-ui/src/components/resources/resource-utils-trivy.ts

@@ -87,8 +87,23 @@ function asArray(v: unknown): any[] {
   return Array.isArray(v) ? v : []
 }
 
+// findingLabel joins a finding's parts and caps it at MAX_FINDING_LABEL
+// UTF-8 bytes on a character boundary, as server search does, so a phrase
+// that falls past the cap matches in neither place.
 function findingLabel(...parts: string[]): string {
-  return parts.filter(Boolean).join(' ').slice(0, MAX_FINDING_LABEL)
+  const label = parts.filter(Boolean).join(' ')
+  // A UTF-16 unit is at most 3 UTF-8 bytes, so short labels need no count.
+  if (label.length * 3 <= MAX_FINDING_LABEL) return label
+  let bytes = 0
+  let end = 0
+  for (const ch of label) {
+    const cp = ch.codePointAt(0) ?? 0
+    const size = cp < 0x80 ? 1 : cp < 0x800 ? 2 : cp < 0x10000 ? 3 : 4
+    if (bytes + size > MAX_FINDING_LABEL) break
+    bytes += size
+    end += ch.length
+  }
+  return label.slice(0, end)
 }
 
 // trivyReportImageRef renders a report's scanned image the way search

web/src/components/execution/BatchExecutionView.image-browse.test.tsx

@@ -41,6 +41,6 @@ describe('template image in the run view', () => {
     auth.enabled = true
     const html = render()
     expect(html).not.toMatch(new RegExp(`<button[^>]*>${image}</button>`))
-    expect(html).toMatch(new RegExp(`<span class="[^"]*decoration-dotted[^"]*" tabindex="0">${image}</span>`))
+    expect(html).toMatch(new RegExp(`<span class="[^"]*decoration-dotted[^"]*" tabindex="0">${image}<span class="sr-only">. With sign-in on, browse an image&#x27;s files from one of its Pods.</span></span>`))
   })
 })

web/src/components/execution/BatchExecutionView.tsx

@@ -770,7 +770,7 @@ function DefinitionFact({ label, value, mono = false, onClick, tooltip, hint = f
       <Tooltip content={tooltip ?? value} delay={300} wrapperClassName="min-w-0 text-right">
         {onClick
           ? <button type="button" onClick={onClick} className={clsx(valueClassName, 'text-right')}>{value}</button>
-          : <span className={valueClassName} tabIndex={hint ? 0 : undefined}>{value}</span>}
+          : <span className={valueClassName} tabIndex={hint ? 0 : undefined}>{value}{hint && tooltip && <span className="sr-only">. {tooltip}</span>}</span>}
       </Tooltip>
     </div>
   )

web/src/components/ui/Omnibar.tsx

@@ -498,7 +498,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
                   ))
                 )}
                 {!isFetching && !isError && partialNotices.map((notice) => (
-                  <div key={notice} className="flex items-start gap-2 px-3 py-1.5 text-[11px] text-amber-600 dark:text-amber-400">
+                  <div key={notice} className="flex items-start gap-2 px-3 py-1.5 text-xs text-warning-text">
                     <AlertTriangle className="w-3 h-3 mt-0.5 shrink-0" /> {notice}
                   </div>
                 ))}