Rework GitOps Resources view: filterable table, diagnostic-only issue band (#1137)

Author: nadaverell

packages/k8s-ui/src/components/gitops/ManagedResourcesList.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
-import { ChevronDown, ChevronRight, Package, ExternalLink } from 'lucide-react'
+import { Package, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { ManagedResource, GitOpsHealthStatus } from '../../types/gitops'
 import { groupManagedResourcesByKind } from '../../types/gitops'
 import { pluralize } from '../../utils/pluralize'
+import { Collapse, CollapseChevron } from '../ui/Collapse'
 
 interface ManagedResourcesListProps {
   resources: ManagedResource[]
@@ -45,18 +46,14 @@ export function ManagedResourcesList({
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
       >
-        {expanded ? (
-          <ChevronDown className="w-4 h-4 text-theme-text-tertiary" />
-        ) : (
-          <ChevronRight className="w-4 h-4 text-theme-text-tertiary" />
-        )}
+        <CollapseChevron open={expanded} className="w-4 h-4" />
         <Package className="w-4 h-4 text-theme-text-secondary" />
         <span className="text-sm font-medium text-theme-text-secondary">
           {title} ({resources.length})
         </span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} mountLazily>
         <div className="pl-6 space-y-3">
           {sortedGroups.map(([kind, kindResources]) => (
             <ResourceKindGroup
@@ -77,7 +74,7 @@ export function ManagedResourcesList({
             </button>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }
@@ -98,12 +95,12 @@ function ResourceKindGroup({ kind, resources, onResourceClick, showHealth }: Res
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors mb-1"
       >
-        {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        <CollapseChevron open={expanded} className="w-3 h-3" />
         <span className="font-medium">{kind}</span>
         <span className="text-theme-text-tertiary">({resources.length})</span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} mountLazily>
         <div className="ml-4 space-y-0.5">
           {resources.map((resource, idx) => (
             <ResourceItem
@@ -114,7 +111,7 @@ function ResourceKindGroup({ kind, resources, onResourceClick, showHealth }: Res
             />
           ))}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

packages/k8s-ui/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -1,6 +1,22 @@
 import { describe, it, expect } from 'vitest'
 import { SEVERITY_DOT } from '../../../utils/badge-colors'
-import { compactSource, entryTone, gitopsToSeverity, messageToPhase, phaseToTone } from './insights-helpers'
+import type { GitOpsChange } from '../../../types'
+import {
+  changeMatchesFacets,
+  changeMatchesSearch,
+  compactSource,
+  entryTone,
+  gitopsToSeverity,
+  healthStatusRank,
+  messageToPhase,
+  phaseToTone,
+  resourceStatusCounts,
+  syncStatusRank,
+} from './insights-helpers'
+
+function change(partial: Partial<GitOpsChange> & { ref: GitOpsChange['ref'] }): GitOpsChange {
+  return { category: 'Unknown', hasDesired: true, hasLive: true, partial: false, ...partial }
+}
 
 describe('gitopsToSeverity', () => {
   it.each([
@@ -96,3 +112,72 @@ describe('compactSource', () => {
     expect(compactSource('')).toBe('')
   })
 })
+
+describe('changeMatchesSearch', () => {
+  const c = change({ ref: { kind: 'Deployment', name: 'guestbook-ui', namespace: 'demo', group: 'apps' } })
+  it('matches on kind, name, namespace, and group (case-insensitive)', () => {
+    expect(changeMatchesSearch(c, 'deploy')).toBe(true)
+    expect(changeMatchesSearch(c, 'GUESTBOOK')).toBe(true)
+    expect(changeMatchesSearch(c, 'demo')).toBe(true)
+    expect(changeMatchesSearch(c, 'apps')).toBe(true)
+  })
+  it('empty/whitespace query matches everything', () => {
+    expect(changeMatchesSearch(c, '')).toBe(true)
+    expect(changeMatchesSearch(c, '   ')).toBe(true)
+  })
+  it('non-matching query is filtered out', () => {
+    expect(changeMatchesSearch(c, 'nomatch')).toBe(false)
+  })
+})
+
+describe('changeMatchesFacets', () => {
+  const outOfSync = change({ ref: { kind: 'Service', name: 'a' }, sync: 'OutOfSync', health: 'Healthy' })
+  const degraded = change({ ref: { kind: 'Deployment', name: 'b' }, sync: 'Synced', health: 'Degraded' })
+  const missing = change({ ref: { kind: 'Secret', name: 'c' }, sync: 'OutOfSync', health: 'Missing' })
+  const healthy = change({ ref: { kind: 'ConfigMap', name: 'd' }, sync: 'Synced', health: 'Healthy' })
+
+  it('empty facet set matches everything', () => {
+    const none = new Set<never>()
+    expect(changeMatchesFacets(outOfSync, none)).toBe(true)
+    expect(changeMatchesFacets(healthy, none)).toBe(true)
+  })
+  it('outOfSync keys off sync status', () => {
+    const f = new Set(['outOfSync'] as const)
+    expect(changeMatchesFacets(outOfSync, f)).toBe(true)
+    expect(changeMatchesFacets(degraded, f)).toBe(false)
+  })
+  it('degraded/missing key off health status', () => {
+    expect(changeMatchesFacets(degraded, new Set(['degraded'] as const))).toBe(true)
+    expect(changeMatchesFacets(missing, new Set(['missing'] as const))).toBe(true)
+    expect(changeMatchesFacets(healthy, new Set(['degraded'] as const))).toBe(false)
+  })
+  it('multiple facets union (OR)', () => {
+    const f = new Set(['degraded', 'missing'] as const)
+    expect(changeMatchesFacets(degraded, f)).toBe(true)
+    expect(changeMatchesFacets(missing, f)).toBe(true)
+    expect(changeMatchesFacets(outOfSync, f)).toBe(false)
+  })
+})
+
+describe('resourceStatusCounts', () => {
+  it('counts each facet independently (a resource can be both OutOfSync and Missing)', () => {
+    const counts = resourceStatusCounts([
+      change({ ref: { kind: 'Service', name: 'a' }, sync: 'OutOfSync', health: 'Healthy' }),
+      change({ ref: { kind: 'Secret', name: 'c' }, sync: 'OutOfSync', health: 'Missing' }),
+      change({ ref: { kind: 'Deployment', name: 'b' }, sync: 'Synced', health: 'Degraded' }),
+      change({ ref: { kind: 'ConfigMap', name: 'd' }, sync: 'Synced', health: 'Healthy' }),
+    ])
+    expect(counts).toEqual({ outOfSync: 2, degraded: 1, missing: 1 })
+  })
+})
+
+describe('syncStatusRank / healthStatusRank', () => {
+  it('ascending sync rank surfaces OutOfSync before Synced', () => {
+    expect(syncStatusRank('OutOfSync')).toBeLessThan(syncStatusRank('Synced'))
+    expect(syncStatusRank('OutOfSync')).toBeLessThan(syncStatusRank('Unknown'))
+  })
+  it('ascending health rank surfaces Missing/Degraded before Healthy', () => {
+    expect(healthStatusRank('Missing')).toBeLessThan(healthStatusRank('Degraded'))
+    expect(healthStatusRank('Degraded')).toBeLessThan(healthStatusRank('Healthy'))
+  })
+})

packages/k8s-ui/src/components/gitops/insights/insights-helpers.test.ts

@@ -2,7 +2,7 @@
 // GitOpsInsightViews.tsx so they can be unit-tested without importing JSX.
 
 import { SEVERITY_DOT, type Severity } from '../../../utils/badge-colors'
-import type { GitOpsHistoryItem } from '../../../types'
+import type { GitOpsChange, GitOpsHistoryItem } from '../../../types'
 import type { SyncStatus, GitOpsHealthStatus } from '../../../types/gitops'
 
 const SYNC_STATUS_SET = new Set<SyncStatus>(['Synced', 'OutOfSync', 'Reconciling', 'Unknown'])
@@ -23,6 +23,74 @@ export function normalizeHealthStatus(value: string | undefined | null): GitOpsH
   return 'Unknown'
 }
 
+// --- Resources table: filtering + sorting -------------------------------
+// Pure predicates + rank functions backing the Resources list's search box,
+// status facets, and sortable columns. Kept here (not inline in the view) so
+// the sort/filter behavior is unit-testable without rendering.
+
+// The status facets an operator filters the Resources list by — the three
+// states worth isolating on a broadly-drifted app. (These replaced the
+// per-resource OutOfSync "issues" that used to restate the whole table.)
+export type ResourceStatusFacet = 'outOfSync' | 'degraded' | 'missing'
+
+export type ResourceSortKey = 'order' | 'name' | 'sync' | 'health'
+
+// changeSync/changeHealth normalize a change's raw backend strings onto the
+// badge unions. `sync` falls back to `category` to match how ChangeRow and
+// the sync badge resolve it.
+export function changeSync(change: GitOpsChange): SyncStatus {
+  return normalizeSyncStatus(change.sync ?? change.category)
+}
+
+export function changeHealth(change: GitOpsChange): GitOpsHealthStatus {
+  return normalizeHealthStatus(change.health)
+}
+
+// Rank sync/health so an ascending sort surfaces the states an operator cares
+// about first (drift, then failures). Mirrors the GitOps application table's
+// syncRank/healthRank so the two tables order status the same way.
+export function syncStatusRank(sync: SyncStatus): number {
+  return ({ OutOfSync: 0, Reconciling: 1, Unknown: 2, Synced: 3 } as Record<SyncStatus, number>)[sync]
+}
+
+export function healthStatusRank(health: GitOpsHealthStatus): number {
+  return ({ Missing: 0, Degraded: 1, Progressing: 2, Unknown: 3, Suspended: 4, Healthy: 5 } as Record<GitOpsHealthStatus, number>)[health]
+}
+
+export function changeMatchesSearch(change: GitOpsChange, query: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  const { kind, name, namespace, group } = change.ref
+  return [kind, name, namespace, group].some((s) => s?.toLowerCase().includes(q))
+}
+
+// Union match: a change passes when it satisfies ANY active facet (empty set
+// = no filter). OutOfSync keys off sync status; Degraded/Missing off health.
+export function changeMatchesFacets(change: GitOpsChange, facets: Set<ResourceStatusFacet>): boolean {
+  if (facets.size === 0) return true
+  if (facets.has('outOfSync') && changeSync(change) === 'OutOfSync') return true
+  if (facets.has('degraded') && changeHealth(change) === 'Degraded') return true
+  if (facets.has('missing') && changeHealth(change) === 'Missing') return true
+  return false
+}
+
+export interface ResourceStatusCounts {
+  outOfSync: number
+  degraded: number
+  missing: number
+}
+
+export function resourceStatusCounts(changes: GitOpsChange[]): ResourceStatusCounts {
+  const counts: ResourceStatusCounts = { outOfSync: 0, degraded: 0, missing: 0 }
+  for (const c of changes) {
+    if (changeSync(c) === 'OutOfSync') counts.outOfSync++
+    const health = changeHealth(c)
+    if (health === 'Degraded') counts.degraded++
+    if (health === 'Missing') counts.missing++
+  }
+  return counts
+}
+
 // Map GitOps-flavored vocabulary (Argo/Flux phase strings, insight Issue
 // severities) onto the canonical Severity tokens used by SEVERITY_BADGE /
 // SEVERITY_TEXT / SEVERITY_DOT. Centralizing this keeps call sites from

packages/k8s-ui/src/components/gitops/insights/insights-helpers.ts

@@ -0,0 +1,59 @@
+import { useState, type ReactNode } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { clsx } from 'clsx'
+
+// Animated show/hide using the grid-template-rows 0fr→1fr technique — the
+// app-wide standard for expand/collapse (drawers, checks, audit, resources
+// sidebar, port-forward). The inner overflow-hidden wrapper is load-bearing:
+// it clips the content while the grid row animates between 0 and its natural
+// height, so nothing spills before the row is fully open.
+//
+// Content stays mounted while closed (clipped to zero height) — that's what
+// lets it animate. `inert` when closed keeps that clipped content out of the
+// tab order and the accessibility tree, so keyboard/screen-reader users don't
+// land on invisible rows (matching ChecksView's collapse).
+//
+// `mountLazily` defers rendering the children until the first open, then keeps
+// them mounted so both the open and close animations still run. Use it when the
+// collapsed content is heavy and there are many instances (e.g. hundreds of
+// resource rows, each with a drift panel) — otherwise every collapsed instance
+// pays its render cost up front. Off by default so the common single-instance
+// case keeps the simplest behavior.
+export function Collapse({
+  open,
+  children,
+  className,
+  mountLazily = false,
+}: {
+  open: boolean
+  children: ReactNode
+  className?: string
+  mountLazily?: boolean
+}) {
+  // Latch: once opened, stay mounted. Conditional setState-in-render is the
+  // supported pattern for deriving state from props without an extra commit.
+  const [hasOpened, setHasOpened] = useState(open)
+  if (mountLazily && open && !hasOpened) setHasOpened(true)
+  const render = !mountLazily || hasOpened
+  return (
+    <div
+      className={clsx('grid transition-[grid-template-rows] duration-200 ease-out', className)}
+      style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+    >
+      <div className="overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+    </div>
+  )
+}
+
+// CollapseChevron is the disclosure caret that pairs with <Collapse>: a single
+// ChevronRight that rotates 90° when open, rather than swapping between two
+// icons. Matches the drawer Section / ExpandableSection affordance so every
+// collapsible surface animates the same way.
+export function CollapseChevron({ open, className }: { open: boolean; className?: string }) {
+  return (
+    <ChevronRight
+      aria-hidden="true"
+      className={clsx('shrink-0 text-theme-text-tertiary transition-transform duration-200', open && 'rotate-90', className)}
+    />
+  )
+}

packages/k8s-ui/src/components/ui/Collapse.tsx

@@ -19,6 +19,7 @@ export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
+export { Collapse, CollapseChevron } from './Collapse'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'