@skyhook-io/k8s-ui 1.14.1 → 1.14.2

package/src/components/resources/status-overclaim.test.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from 'vitest'
+import { getServiceMonitorStatus, getPrometheusRuleStatus, getPodMonitorStatus } from './resource-utils-prometheus'
+import { getKyvernoPolicyStatus } from './resource-utils-kyverno'
+import { getServiceEntryStatus, getVirtualServiceStatus } from './resource-utils-istio'
+import { getCNPGObjectStoreStatus } from './resource-utils-cnpg'
+
+// A green badge asserts something a controller checked. These pin the line
+// between what an object declares and what something actually confirmed.
+
+describe('Prometheus configuration resources', () => {
+  // Status lives at status.bindings[].conditions, only condition type
+  // "Accepted" exists, and the operator writes it only under the
+  // StatusForConfigurationResources feature gate.
+  const accepted = (status: string, extra: Record<string, unknown> = {}) => ({
+    metadata: { generation: 3 },
+    status: { bindings: [{ conditions: [{ type: 'Accepted', status, observedGeneration: 3, ...extra }] }] },
+  })
+
+  for (const [name, fn] of [
+    ['ServiceMonitor', getServiceMonitorStatus],
+    ['PrometheusRule', getPrometheusRuleStatus],
+    ['PodMonitor', getPodMonitorStatus],
+  ] as const) {
+    it(`${name} does not report health when the gate wrote nothing`, () => {
+      // The overwhelmingly common shape: no status at all.
+      expect(fn({ spec: {} })).toMatchObject({ text: 'Not assessed', level: 'unknown' })
+    })
+
+    it(`${name} ignores a status.conditions that these kinds never have`, () => {
+      // This path is not part of these resources' schema.
+      expect(fn({ spec: {}, status: { conditions: [{ type: 'Reconciled', status: 'True' }] } }))
+        .toMatchObject({ text: 'Not assessed', level: 'unknown' })
+    })
+
+    it(`${name} surfaces an explicit rejection`, () => {
+      expect(fn(accepted('False', { reason: 'InvalidConfig' })))
+        .toMatchObject({ text: 'InvalidConfig', level: 'unhealthy' })
+    })
+
+    it(`${name} reports acceptance when a workload confirmed it`, () => {
+      expect(fn(accepted('True'))).toMatchObject({ text: 'Accepted', level: 'healthy' })
+    })
+  }
+
+  it('does not read a condition observed against an older spec', () => {
+    const stale = {
+      metadata: { generation: 7 },
+      status: { bindings: [{ conditions: [{ type: 'Accepted', status: 'True', observedGeneration: 4 }] }] },
+    }
+    expect(getServiceMonitorStatus(stale)).toMatchObject({ text: 'Not assessed', level: 'unknown' })
+  })
+
+  it('does not read one workload as all of them when another has not decided', () => {
+    const undecided = {
+      metadata: { generation: 1 },
+      status: {
+        bindings: [
+          { name: 'a', conditions: [{ type: 'Accepted', status: 'True', observedGeneration: 1 }] },
+          { name: 'b', conditions: [{ type: 'Accepted', status: 'Unknown', observedGeneration: 1 }] },
+        ],
+      },
+    }
+    expect(getServiceMonitorStatus(undecided)).toMatchObject({ text: 'Accepted by 1/2', level: 'unknown' })
+  })
+
+  it('reports partial acceptance when workloads disagree', () => {
+    // One config resource can be selected by several Prometheus workloads, and
+    // each reports separately.
+    const mixed = {
+      metadata: { generation: 1 },
+      status: {
+        bindings: [
+          { name: 'a', conditions: [{ type: 'Accepted', status: 'True', observedGeneration: 1 }] },
+          { name: 'b', conditions: [{ type: 'Accepted', status: 'False', observedGeneration: 1 }] },
+        ],
+      },
+    }
+    expect(getServiceMonitorStatus(mixed)).toMatchObject({ text: 'Accepted by 1/2', level: 'degraded' })
+  })
+})
+
+describe('getKyvernoPolicyStatus', () => {
+  it('reads the Ready condition the controller writes', () => {
+    expect(getKyvernoPolicyStatus({ status: { conditions: [{ type: 'Ready', status: 'True' }] } }))
+      .toMatchObject({ text: 'Ready', level: 'healthy' })
+    expect(getKyvernoPolicyStatus({ status: { conditions: [{ type: 'Ready', status: 'False', reason: 'Failed' }] } }))
+      .toMatchObject({ text: 'Failed', level: 'unhealthy' })
+  })
+
+  it('does not read declared rules as the controller accepting them', () => {
+    // Fires before the controller reports, and for Ready=Unknown.
+    expect(getKyvernoPolicyStatus({ spec: { rules: [{}, {}] } }))
+      .toMatchObject({ text: 'Not assessed', level: 'unknown' })
+    expect(getKyvernoPolicyStatus({ spec: { rules: [{}] }, status: { conditions: [{ type: 'Ready', status: 'Unknown' }] } }))
+      .toMatchObject({ text: 'Not assessed', level: 'unknown' })
+  })
+})
+
+describe('getServiceEntryStatus', () => {
+  it('treats location as a classification, not reachability', () => {
+    // MESH_EXTERNAL/MESH_INTERNAL say where the host sits relative to the mesh.
+    // Nothing here establishes it resolves or answers.
+    expect(getServiceEntryStatus({ spec: { hosts: ['api.example.com'] } }))
+      .toMatchObject({ text: 'External', level: 'neutral' })
+    expect(getServiceEntryStatus({ spec: { hosts: ['a'], location: 'MESH_INTERNAL' } }))
+      .toMatchObject({ text: 'Internal', level: 'neutral' })
+  })
+
+  it('still flags an entry that selects nothing', () => {
+    expect(getServiceEntryStatus({ spec: {} })).toMatchObject({ text: 'No Hosts', level: 'unhealthy' })
+  })
+})
+
+describe('getVirtualServiceStatus', () => {
+  it('does not call a hostless VirtualService broken', () => {
+    // Istio requires hosts to be empty on a delegate VirtualService, and this
+    // object cannot see whether a parent delegates to it.
+    expect(getVirtualServiceStatus({ spec: { http: [{ route: [{}] }] } }))
+      .toMatchObject({ text: 'No Hosts', level: 'unknown' })
+  })
+
+  it('does not read a declaration as working routing', () => {
+    expect(getVirtualServiceStatus({ spec: { hosts: ['a'], http: [{ route: [{}] }] } }))
+      .toMatchObject({ text: 'Defined', level: 'neutral' })
+  })
+
+  it('still flags hosts with nowhere to send them', () => {
+    expect(getVirtualServiceStatus({ spec: { hosts: ['a'] } }))
+      .toMatchObject({ text: 'No Routes', level: 'unhealthy' })
+  })
+
+  it('flags a routeless object even when it declares no hosts', () => {
+    // A delegate omits hosts, but it exists to supply routes.
+    expect(getVirtualServiceStatus({ spec: {} }))
+      .toMatchObject({ text: 'No Routes', level: 'unhealthy' })
+  })
+})
+
+describe('getCNPGObjectStoreStatus', () => {
+  it('does not call a listed server recoverable with no recovery point', () => {
+    // Every timestamp on a RecoveryWindow is optional, so the server can be
+    // listed while holding nothing restorable.
+    expect(getCNPGObjectStoreStatus({ status: { serverRecoveryWindow: { pg: {} } } }))
+      .toMatchObject({ text: 'No recovery point', level: 'unknown' })
+  })
+
+  it('reports recoverable once a real point exists', () => {
+    expect(getCNPGObjectStoreStatus({
+      status: { serverRecoveryWindow: { pg: { firstRecoverabilityPoint: '2026-01-01T00:00:00Z' } } },
+    })).toMatchObject({ text: 'Recoverable', level: 'healthy' })
+  })
+
+  it('still reports failing backups ahead of everything else', () => {
+    expect(getCNPGObjectStoreStatus({
+      status: { serverRecoveryWindow: { pg: { lastFailedBackupTime: '2026-02-01T00:00:00Z' } } },
+    })).toMatchObject({ text: 'Backups Failing', level: 'unhealthy' })
+  })
+})

package/src/components/timeline/DiffViewer.test.tsx

@@ -0,0 +1,26 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { DiffViewer } from "./DiffViewer";
+
+describe("DiffViewer", () => {
+  it("labels added, removed, and changed values without relying on color", () => {
+    const html = renderToStaticMarkup(
+      <DiffViewer
+        diff={{
+          summary: "Three fields changed",
+          fields: [
+            { path: "spec.added", oldValue: null, newValue: "on" },
+            { path: "spec.removed", oldValue: "on", newValue: null },
+            { path: "spec.changed", oldValue: "v1", newValue: "v2" },
+          ],
+        }}
+      />,
+    );
+
+    expect(html).toContain("Added value:");
+    expect(html).toContain("Removed value:");
+    expect(html).toContain("Old value:");
+    expect(html).toContain("New value:");
+  });
+});

package/src/components/timeline/DiffViewer.tsx

@@ -16,7 +16,7 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
   if (compact) {
     return (
       <div className="text-xs text-theme-text-secondary flex items-center gap-1">
-        <RefreshCw className="w-3 h-3" />
+        <RefreshCw className="w-3 h-3" aria-hidden />
         <span>{diff.summary || `${diff.fields.length} field(s) changed`}</span>
       </div>
     )
@@ -27,7 +27,7 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
       {/* Summary */}
       {diff.summary && (
         <div className="text-sm font-medium text-theme-text-secondary flex items-center gap-2">
-          <RefreshCw className="w-4 h-4 text-blue-400" />
+          <RefreshCw className="w-4 h-4 text-blue-400" aria-hidden />
           {diff.summary}
         </div>
       )}
@@ -54,31 +54,35 @@ function FieldChangeRow({ field }: FieldChangeRowProps) {
   return (
     <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
       {/* Field path */}
-      <div className="text-xs font-mono text-theme-text-tertiary mb-1">{field.path}</div>
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{field.path}</div>
 
       {/* Values */}
-      <div className="flex items-center gap-2 text-sm">
+      <div className="flex min-w-0 flex-wrap items-center gap-2 text-sm">
         {isAdded ? (
           <>
-            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" />
-            <span className="text-green-400">
+            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" aria-hidden />
+            <span className="sr-only">Added value: </span>
+            <span className="min-w-0 break-words text-green-400 [overflow-wrap:anywhere]">
               {formatValue(field.newValue)}
             </span>
           </>
         ) : isRemoved ? (
           <>
-            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" />
-            <span className="text-red-400 line-through">
+            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" aria-hidden />
+            <span className="sr-only">Removed value: </span>
+            <span className="min-w-0 break-words text-red-400 line-through [overflow-wrap:anywhere]">
               {formatValue(field.oldValue)}
             </span>
           </>
         ) : isModified ? (
           <>
-            <span className="text-red-400 line-through">
+            <span className="sr-only">Old value: </span>
+            <span className="min-w-0 break-words text-red-400 line-through [overflow-wrap:anywhere]">
               {formatValue(field.oldValue)}
             </span>
-            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
-            <span className="text-green-400">
+            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" aria-hidden />
+            <span className="sr-only">New value: </span>
+            <span className="min-w-0 break-words text-green-400 [overflow-wrap:anywhere]">
               {formatValue(field.newValue)}
             </span>
           </>
@@ -124,7 +128,7 @@ export const DiffBadge = memo(function DiffBadge({ diff }: DiffBadgeProps) {
         'bg-skyhook-500/10 text-skyhook-400 border border-skyhook-500/20'
       )}
     >
-      <RefreshCw className="w-3 h-3" />
+      <RefreshCw className="w-3 h-3" aria-hidden />
       {diff.summary}
     </span>
   )

package/src/components/topology/TopologyGraph.tsx

@@ -34,7 +34,7 @@ import { GroupNode } from './GroupNode'
 import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, isGroupEffectivelyCollapsed, type GroupDisplayLevel } from './layout'
-import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
+import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode, HealthStatus } from '../../types'
 import { pluralize } from '../../utils/pluralize'
 import { foldHash } from '../../utils/structure-hash'
 import { recordLayoutDuration, recordLayoutSkipped, recordStructureKeyDuration } from '../../perf'
@@ -408,6 +408,7 @@ export function TopologyGraph({
       phase: string
       restarts: number
       containers: number
+      status?: HealthStatus
     }>
 
     // Find edges pointing to this pod group
@@ -425,7 +426,11 @@ export function TopologyGraph({
         id: podId,
         kind: 'Pod',
         name: pod.name,
-        status: pod.phase === 'Running' ? 'healthy' : pod.phase === 'Pending' ? 'degraded' : 'unhealthy',
+        // The server computes pod health; pkg/health tracks a crash loop across
+        // the kubelet's Waiting->Running oscillation, which the phase alone
+        // hides — a crash-looping pod sits at Phase=Running. Deriving it here
+        // again would rebuild that logic in a second place and get it wrong.
+        status: pod.status ?? 'unknown',
         data: {
           ...podGroupNode.data,
           namespace: pod.namespace,

package/src/components/ui/Collapse.tsx

@@ -37,7 +37,10 @@ export function Collapse({
   const render = !mountLazily || hasOpened
   return (
     <div
-      className={clsx('grid transition-[grid-template-rows] duration-200 ease-out', className)}
+      className={clsx(
+        'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+        className,
+      )}
       style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
     >
       {/* `relative` is load-bearing. Collapsed content is still laid out at full
@@ -61,7 +64,11 @@ export function CollapseChevron({ open, className }: { open: boolean; className?
   return (
     <ChevronRight
       aria-hidden="true"
-      className={clsx('shrink-0 text-theme-text-tertiary transition-transform duration-200', open && 'rotate-90', className)}
+      className={clsx(
+        'shrink-0 text-theme-text-tertiary transition-transform duration-200 motion-reduce:transition-none',
+        open && 'rotate-90',
+        className,
+      )}
     />
   )
 }

package/src/components/ui/ConfirmDialog.test.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { ConfirmDialog } from './ConfirmDialog'
+
+vi.mock('./DialogPortal', () => ({
+  DialogPortal: ({ children }: { children: ReactNode }) => <>{children}</>,
+}))
+
+const props = {
+  open: true,
+  onClose: () => {},
+  onConfirm: () => {},
+  title: 'Share this investigation?',
+  message: 'Organization members can read and continue this investigation.',
+  confirmLabel: 'Share with organization',
+}
+
+describe('ConfirmDialog warning disclosure', () => {
+  it('can omit redundant boilerplate without removing the actual disclosure or actions', () => {
+    const html = renderToStaticMarkup(<ConfirmDialog {...props} variant="warning" showWarning={false} />)
+    expect(html).toContain(props.message)
+    expect(html).toContain(props.confirmLabel)
+    expect(html).toContain('Cancel')
+    expect(html).not.toContain('Please confirm you want to proceed')
+  })
+
+  it('preserves warning boilerplate by default for existing callers', () => {
+    expect(renderToStaticMarkup(<ConfirmDialog {...props} variant="warning" />))
+      .toContain('Please confirm you want to proceed with this action.')
+  })
+
+  it('preserves the irreversible-action warning for destructive callers', () => {
+    expect(renderToStaticMarkup(<ConfirmDialog {...props} />))
+      .toContain('This action cannot be undone.')
+  })
+})

package/src/components/ui/ConfirmDialog.tsx

@@ -18,6 +18,7 @@ interface ConfirmDialogProps {
   isLoading?: boolean
   isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
   confirmDisabled?: boolean // Block the confirm action while custom content is invalid (e.g., bad YAML)
+  showWarning?: boolean
   className?: string
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
@@ -35,6 +36,7 @@ export function ConfirmDialog({
   isLoading = false,
   isClosable = false,
   confirmDisabled = false,
+  showWarning = true,
   className,
   children,
 }: ConfirmDialogProps) {
@@ -84,7 +86,7 @@ export function ConfirmDialog({
       )}
 
       {/* Warning message — hidden once the action is in progress */}
-      {!isLoading && !children && (
+      {showWarning && !isLoading && !children && (
         <div className="p-4">
           <div
             className={clsx(

package/src/components/ui/drawer-components.tsx

@@ -291,7 +291,7 @@ function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
 
 export type ConditionTone = 'ok' | 'warning' | 'fail' | 'unknown'
 
-function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
+export function defaultConditionTone(cond: { type?: string; status?: string }): ConditionTone {
   if (cond.status !== 'True' && cond.status !== 'False') return 'unknown'
   return isConditionHealthy(cond) ? 'ok' : 'fail'
 }

package/src/components/workload/WorkloadView.tsx

@@ -728,10 +728,11 @@ export function WorkloadView({
   // prominent "Diagnose" on a problem, a quiet icon when fine. Rendered via the host
   // slot (DiagnoseCustomization); standalone Radar injects it, Hub overrides it.
   const renderDiagnose = actionsBarProps?.renderDiagnose as
-    | ((ctx: { kind: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
+    | ((ctx: { kind: string; group?: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
     | undefined
   const diagnoseAction = renderDiagnose?.({
     kind: apiKind,
+    group,
     namespace,
     name,
     health: diagnoseHealthHint(apiKind, resource),