@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/gitops/insights/insights-helpers.test.ts

@@ -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'))
+  })
+})

package/src/components/gitops/insights/insights-helpers.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

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -17,12 +17,14 @@ import {
 import '@xyflow/react/dist/style.css'
 import { AlertTriangle, ChevronRight, Maximize, Search, X } from 'lucide-react'
 import { PaneLoader } from '../../ui/PaneLoader'
+import { Input } from '../../ui/Input'
 import { clsx } from 'clsx'
 
 import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
 import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
+import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
 
@@ -252,7 +254,7 @@ function GitOpsTreeToolbar({
       </div>
       <div className="flex items-center gap-1 rounded-lg border border-theme-border bg-theme-surface/90 px-2 py-1.5 backdrop-blur">
         <Search className="h-3.5 w-3.5 text-theme-text-tertiary" />
-        <input
+        <Input
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder="Find node..."
@@ -549,6 +551,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const gitopsTool = gitopsToolForNode(node)
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
+  const KindIcon = getTopologyIcon(kind)
 
   return (
     <>
@@ -584,7 +587,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
       >
         <div className="px-3 py-2.5">
           <div className="mb-1 flex items-center gap-1.5">
-            <span className={`topology-icon topology-icon-${kind.toLowerCase()}`} />
+            <KindIcon className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" aria-hidden />
             <span className="truncate text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">
               {node.role === 'group' ? displayKind((node.data?.groupedKind as string) || kind) : displayKind(kind)}
             </span>