@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.4",
+  "version": "1.14.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
@@ -100,8 +100,8 @@
     "elkjs": "^0.11.1",
     "lucide-react": "^1.37.0",
     "monaco-editor": "0.55.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.11",
     "yaml": "^2.9.0"

package/src/components/audit/AuditCard.tsx

@@ -1,9 +1,10 @@
-import { ClipboardCheck, ArrowRight, Check } from 'lucide-react'
+import { ClipboardCheck, ArrowRight, Check, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../utils/badge-colors'
 import { SEVERITY_FILL_CLASS, SEVERITY_TEXT_CLASS } from '../checks/severity'
 
 export interface AuditCardData {
+  missingInputs?: string[]
   passing: number
   /** Raw compatibility counts; warning renders as Medium and danger as High. */
   warning: number
@@ -17,16 +18,17 @@ interface AuditCardProps {
   onNavigate: () => void
 }
 
-type SeverityLevel = 'success' | 'high' | 'medium'
+type SeverityLevel = 'success' | 'high' | 'medium' | 'neutral'
 
 function getSeverityLevel(data: AuditCardData): SeverityLevel {
-  if (data.warning + data.danger === 0) return 'success'
+  if (data.warning + data.danger === 0) return data.missingInputs?.length || data.passing === 0 ? 'neutral' : 'success'
   const highRatio = data.danger / (data.warning + data.danger)
   if (highRatio > 0.2) return 'high'
   return 'medium'
 }
 
 const ACCENT_BG: Record<SeverityLevel, string> = {
+  neutral: 'bg-theme-elevated',
   success: 'bg-green-500/10',
   high: 'bg-orange-500/10',
   medium: 'bg-yellow-500/10',
@@ -35,9 +37,10 @@ const ACCENT_BG: Record<SeverityLevel, string> = {
 export function AuditCard({ data, onNavigate }: AuditCardProps) {
   const total = data.passing + data.warning + data.danger
   const issueCount = data.warning + data.danger
-  const allPassing = issueCount === 0
+  const incomplete = (data.missingInputs?.length ?? 0) > 0
+  const allPassing = issueCount === 0 && total > 0 && !incomplete
   const level = getSeverityLevel(data)
-  const accentColor = level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
+  const accentColor = level === 'neutral' ? 'text-theme-text-secondary' : level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
   const accentBg = ACCENT_BG[level]
 
   return (
@@ -56,7 +59,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
               </span>
             ) : (
               <span className={clsx('badge-sm', accentBg, accentColor)}>
-                <Check className="w-3 h-3" />
+                {allPassing ? <Check className="w-3 h-3" /> : <ClipboardCheck className="w-3 h-3" />}
               </span>
             )}
           </div>
@@ -71,6 +74,12 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                 <span className="text-xs text-theme-text-tertiary">{total} checks across {Object.keys(data.categories).length} categories</span>
               )}
             </div>
+          ) : issueCount === 0 ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              {incomplete ? <AlertTriangle className="w-8 h-8 text-warning-text" /> : <ClipboardCheck className="w-8 h-8 text-theme-text-tertiary" />}
+              <span className="text-sm font-medium text-theme-text-primary">{incomplete ? 'Some checks could not run' : 'No resources evaluated'}</span>
+              <span className="text-xs text-theme-text-secondary">{incomplete ? 'No findings in the available data.' : 'Check the selected scope and check settings.'}</span>
+            </div>
           ) : (
             <>
               {/* Distribution bar — only show when we have passing data for context */}
@@ -107,7 +116,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                           )}
                         </div>
                       ) : (
-                        <span className={clsx('text-xs font-semibold', SEVERITY_TEXT.success)}>All passing</span>
+                        <span className={clsx('text-xs font-semibold', incomplete ? 'text-theme-text-secondary' : SEVERITY_TEXT.success)}>{incomplete ? 'No findings' : 'All passing'}</span>
                       )}
                     </div>
                   )
@@ -117,6 +126,8 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
           )}
         </div>
 
+        {incomplete && issueCount > 0 && <p className="px-4 pb-2 text-xs text-warning-text">Some checks could not run.</p>}
+
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end">
           <span className={clsx(
             'flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider transition-colors',

package/src/components/audit/AuditCoveragePresentation.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { AuditCard } from './AuditCard'
+import { ChecksView } from '../checks/ChecksView'
+import { FilterLocationProvider } from '../../filter-state'
+
+describe('audit coverage presentation', () => {
+  for (const [passing, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'Some checks could not run'],
+    [4, ['secrets'], 'Some checks could not run'],
+    [4, [], 'All checks passing'],
+  ] as const) {
+    it(`shows ${expected} with ${passing} passing and ${missingInputs.length} unavailable inputs`, () => {
+      const html = renderToString(<AuditCard data={{ passing, missingInputs: [...missingInputs], warning: 0, danger: 0, categories: {} }} onNavigate={() => {}} />)
+      expect(html).toContain(expected)
+      if (missingInputs.length || passing === 0) expect(html).not.toContain('All checks passing')
+    })
+  }
+  it('keeps a coverage warning alongside real findings', () => {
+    const html = renderToString(<AuditCard data={{ passing: 1, missingInputs: ['secrets'], warning: 1, danger: 0, categories: { Security: { passing: 1, warning: 0, danger: 0 } } }} onNavigate={() => {}} />)
+    expect(html).toContain('Some checks could not run')
+    expect(html).not.toContain('All passing')
+  })
+  for (const [evaluated, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'No findings in the available data'],
+    [4, ['secrets'], 'No findings in the available data'],
+    [4, [], 'Every audited resource passed'],
+  ] as const) {
+    it(`Checks: ${expected}`, () => {
+      const html = renderToString(
+        <FilterLocationProvider value={{ searchParams: new URLSearchParams(), update: () => {} }}>
+          <ChecksView checks={[]} catalog={{}} anyData evaluated={evaluated} missingInputs={[...missingInputs]} />
+        </FilterLocationProvider>,
+      )
+      expect(html).toContain(expected)
+      if (missingInputs.length) {
+        expect(html).toContain('Unavailable inputs:')
+        expect(html).toContain('secrets')
+        expect(html).not.toContain('Every audited resource passed')
+      }
+    })
+  }
+})

package/src/components/charts/AreaChart.test.tsx

@@ -0,0 +1,173 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { AreaChart } from './AreaChart'
+import { layoutAnnotations, ANNOTATION_LABEL_ROWS } from './annotations'
+import { formatTimestamp } from './format'
+import type { ChartAnnotation, TimeSeries } from './types'
+
+const t0 = 1_788_679_000
+
+function series(points: Array<[number, number | null]>, labels: Record<string, string> = {}): TimeSeries {
+  return { labels, dataPoints: points.map(([offset, value]) => ({ timestamp: t0 + offset, value })) }
+}
+
+function render(props: Partial<Parameters<typeof AreaChart>[0]> & { series: TimeSeries[] }) {
+  return renderToStaticMarkup(
+    <AreaChart color="#3b82f6" fillColor="#3b82f622" unit="" {...props} />,
+  )
+}
+
+function attrs(html: string, tag: string, attr: string): string[] {
+  const out: string[] = []
+  const re = new RegExp(`<${tag}\\b[^>]*\\s${attr}="([^"]*)"`, 'g')
+  for (const match of html.matchAll(re)) out.push(match[1])
+  return out
+}
+
+describe('AreaChart annotations', () => {
+  const base = [series([[0, 1], [600, 2], [1200, 3], [1800, 2]])]
+
+  it('renders a marker and label per annotation inside the domain and none outside', () => {
+    const annotations: ChartAnnotation[] = [
+      { timestamp: t0 + 600, label: 'ConfigMap api-config', kind: 'change' },
+      { timestamp: t0 + 9_000, label: 'outside', kind: 'change' },
+    ]
+    const html = render({ series: base, annotations })
+    expect(html.match(/data-chart-annotation="change"/g)).toHaveLength(1)
+    expect(html).toContain('data-chart-annotation-label="visible"')
+    expect(html).toContain('ConfigMap api-config')
+    expect(html).not.toContain('outside')
+  })
+
+  it('stacks overlapping labels into rows and hides labels past the row limit', () => {
+    const toX = (ts: number) => 84 + ((ts - t0) / 1800) * 876
+    const crowded: ChartAnnotation[] = Array.from({ length: ANNOTATION_LABEL_ROWS + 1 }, (_, i) => ({
+      timestamp: t0 + i * 5,
+      label: `Change ${i}`,
+      kind: 'change',
+    }))
+    const placed = layoutAnnotations(crowded, toX, { minTs: t0, maxTs: t0 + 1800 }, { left: 84, right: 960 })
+    expect(placed.map(p => p.row)).toEqual([0, 1, 2, -1])
+    expect(placed.at(-1)?.labelHidden).toBe(true)
+    const far: ChartAnnotation[] = [
+      { timestamp: t0, label: 'first', kind: 'change' },
+      { timestamp: t0 + 1200, label: 'second', kind: 'change' },
+    ]
+    expect(layoutAnnotations(far, toX, { minTs: t0, maxTs: t0 + 1800 }, { left: 84, right: 960 }).map(p => p.row)).toEqual([0, 0])
+    const html = render({ series: base, annotations: crowded })
+    expect(html.match(/data-chart-annotation-label="visible"/g)).toHaveLength(ANNOTATION_LABEL_ROWS)
+    expect(html.match(/data-chart-annotation-label="hidden"/g)).toHaveLength(1)
+  })
+
+  it('keeps a long label readable by truncating it', () => {
+    const html = render({
+      series: base,
+      annotations: [{ timestamp: t0 + 600, label: 'ConfigMap a-very-long-configmap-name-that-goes-on', kind: 'change' }],
+    })
+    expect(html).toContain('ConfigMap a-very-long-confi…')
+  })
+})
+
+describe('AreaChart domain and axes', () => {
+  it('uses an explicit domain wider than the samples for the X axis', () => {
+    const html = render({
+      series: [series([[600, 1], [1200, 2]])],
+      domain: { start: t0, end: t0 + 3600 },
+    })
+    const labels = attrs(html, 'text', 'text-anchor')
+    expect(labels.length).toBeGreaterThan(0)
+    expect(html).toContain(`>${formatTimestamp(t0)}<`)
+    expect(html).toContain(`>${formatTimestamp(t0 + 3600)}<`)
+    const xs = attrs(html, 'text', 'x').map(Number).filter(x => x >= 84)
+    expect(Math.max(...xs)).toBeCloseTo(960, 0)
+  })
+
+  it('extends the Y axis below zero and draws a zero line for negative values', () => {
+    const html = render({ series: [series([[0, -4], [600, 2], [1200, -1]])] })
+    expect(html).toContain('data-chart-zero-line')
+    expect(html).toContain('>-4.40<')
+    const positive = render({ series: [series([[0, 1], [600, 2]])] })
+    expect(positive).not.toContain('data-chart-zero-line')
+    expect(positive).toContain('>0<')
+  })
+
+  it('breaks the line across null gaps instead of bridging them', () => {
+    const html = render({ series: [series([[0, 1], [300, 2], [600, null], [900, 3], [1200, 4]])] })
+    const lines = attrs(html, 'path', 'fill').filter(fill => fill === 'none')
+    expect(lines).toHaveLength(2)
+  })
+
+  it('renders sparse samples without a path until two finite points exist', () => {
+    expect(attrs(render({ series: [series([[0, 1]])] }), 'path', 'fill')).toHaveLength(0)
+    expect(attrs(render({ series: [series([[0, 1], [3600, 5]])] }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(1)
+  })
+
+  it('breaks omitted evaluations only when the caller supplies the interval', () => {
+    const sparse = [series([[0, 1], [15, 2], [105, 3], [120, 4]])]
+    const paths = (stepSeconds?: number) => attrs(render({ series: sparse, stepSeconds }), 'path', 'fill').filter(fill => fill === 'none')
+    expect(paths(15)).toHaveLength(2)
+    expect(paths()).toHaveLength(1)
+  })
+
+  it('preserves explicit gaps, zeros and isolated-sample behavior with a known interval', () => {
+    const gaps = [series([[0, 0], [15, 0], [30, null], [45, 1], [60, 2]])]
+    expect(attrs(render({ series: gaps, stepSeconds: 15 }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(2)
+    expect(attrs(render({ series: [series([[0, 1]])], stepSeconds: 15 }), 'path', 'fill')).toHaveLength(0)
+  })
+
+  it('renders nothing for an empty series list', () => {
+    expect(render({ series: [] })).toBe('')
+  })
+})
+
+describe('AreaChart compact layout and count axes', () => {
+  const base = [series([[0, 1], [600, 2], [1200, 3], [1800, 2]])]
+
+  it('keeps the full layout for existing callers', () => {
+    const html = render({ series: base })
+    expect(html).toContain('viewBox="0 0 1000 300"')
+    expect(html).toContain('data-chart-layout="full"')
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(5)
+  })
+
+  it('draws two ticks per axis, larger text and a taller plot when compact', () => {
+    const html = render({
+      series: base,
+      layout: 'compact',
+      annotations: [{ timestamp: t0 + 600, label: 'ConfigMap api-config', kind: 'change' }],
+    })
+    expect(html).toContain('viewBox="0 0 400 260"')
+    expect(html).toContain('data-chart-layout="compact"')
+    // Two Y labels plus the right-aligned last X label.
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(3)
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'start')).toHaveLength(1)
+    expect(attrs(html, 'text', 'text-anchor').filter(a => a === 'middle')).toHaveLength(0)
+    expect(html).toContain('font-size="14"')
+    expect(html).toContain('data-chart-annotation-label="hidden"')
+    expect(html).toContain(`>${formatTimestamp(t0)}<`)
+    expect(html).toContain(`>${formatTimestamp(t0 + 1800)}<`)
+  })
+
+  it('widens the compact left margin so a long Y label is not clipped', () => {
+    const html = render({ series: [series([[0, 100 * 1024 * 1024], [600, 161.5 * 1024 * 1024]])], unit: 'bytes', layout: 'compact' })
+    expect(html).toContain('177.7 MiB')
+    const yLabelX = Math.min(...attrs(html, 'text', 'x').map(Number).filter(x => x > 0))
+    expect(yLabelX).toBeGreaterThan(70)
+    const compactSmall = render({ series: [series([[0, 1], [600, 2]])], layout: 'compact' })
+    expect(Math.min(...attrs(compactSmall, 'text', 'x').map(Number).filter(x => x > 0))).toBe(52)
+  })
+
+  it('uses integer ticks with a nice step for count series', () => {
+    const zero = render({ series: [series([[0, 0], [600, 0], [1200, 0]])], unit: 'count' })
+    expect(zero).toContain('>0<')
+    expect(zero).toContain('>1<')
+    expect(zero).not.toContain('1.10')
+    const restarts = render({ series: [series([[0, 6], [600, 12], [1200, 18]])], unit: 'count' })
+    for (const tick of ['0', '5', '10', '15', '20']) expect(restarts).toContain(`>${tick}<`)
+    expect(restarts).not.toContain('6.05')
+    const compactCount = render({ series: [series([[0, 6], [600, 18]])], unit: 'count', layout: 'compact' })
+    expect(attrs(compactCount, 'text', 'text-anchor').filter(a => a === 'end')).toHaveLength(3)
+    expect(compactCount).toContain('>20<')
+    expect(compactCount).not.toContain('>10<')
+  })
+})