@skyhook-io/k8s-ui 1.10.5 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.10.5",
+  "version": "1.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -2,6 +2,8 @@ import { clsx } from 'clsx'
 import { CheckCircle2, AlertCircle, Loader2, Pause, HelpCircle, XCircle } from 'lucide-react'
 import type { GitOpsStatus, SyncStatus, GitOpsHealthStatus } from '../../types/gitops'
 import { SEVERITY_BADGE_BORDERED, SEVERITY_BADGE } from '../../utils/badge-colors'
+import { formatCompactAge } from '../../utils/format'
+import { Tooltip } from '../ui/Tooltip'
 
 interface GitOpsStatusBadgeProps {
   status: GitOpsStatus
@@ -176,3 +178,41 @@ export function HealthStatusBadge({ health }: { health: GitOpsHealthStatus }) {
     </span>
   )
 }
+
+
+/**
+ * ReconcilingIndicator rides alongside the sync badge rather than replacing it,
+ * the same primary-plus-secondary shape the Velero schedule cell uses for a
+ * paused-and-rejected schedule.
+ *
+ * A pass being in flight says nothing about whether the declared state is
+ * applied, so it must not touch the sync word — but a pass that never finishes
+ * is the one fault nothing else in the product notices, and on a healthy object
+ * a real pass completes in milliseconds. In practice this only becomes visible
+ * when a controller is wedged, which is exactly when it should be.
+ */
+export function ReconcilingIndicator({
+  reconciling,
+  since,
+  sync,
+}: {
+  reconciling?: boolean
+  since?: string
+  /** The sync word shown beside this. Omitted when there is no badge alongside. */
+  sync?: SyncStatus
+}) {
+  // Suppressed when the sync badge already says Reconciling — it carries the
+  // same fact and spins for it. Showing both puts two spinners on one row for
+  // one thing. The secondary exists for the case the primary CANNOT express:
+  // an applied object whose reconcile pass never finished.
+  if (!reconciling || sync === 'Reconciling') return null
+  const age = formatCompactAge(since)
+  const tip = age
+    ? `A reconcile pass has been in flight for ${age}. On a healthy resource a pass finishes in milliseconds, so a long-running one usually means the controller is stuck.`
+    : 'A reconcile pass is in flight.'
+  return (
+    <Tooltip content={tip}>
+      <Loader2 className="w-3 h-3 shrink-0 animate-spin text-theme-text-tertiary" aria-label="Reconcile pass in flight" />
+    </Tooltip>
+  )
+}

package/src/components/gitops/GitOpsTableView.tsx

@@ -24,7 +24,7 @@ import {
   Zap,
 } from 'lucide-react'
 
-import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
+import { HealthStatusBadge, ReconcilingIndicator, SyncStatusBadge } from './GitOpsStatusBadge'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '../ui/Input'
 import { PageHeader } from '../ui/PageHeader'
@@ -150,6 +150,14 @@ export interface GitOpsRow {
   sync: string
   health: string
   suspended: boolean
+  /**
+   * A reconcile pass is executing. Deliberately separate from sync: a pass
+   * being in flight says nothing about whether the declared state is applied,
+   * but a pass that never finishes is the one fault nothing else in the
+   * product notices.
+   */
+  reconciling?: boolean
+  reconcilingSince?: string
   repository: string
   targetRevision: string
   path: string
@@ -1300,7 +1308,12 @@ function GitOpsTable({
               <TableCell>
                 {row.terminating
                   ? <span className="text-[11px] text-theme-text-tertiary">—</span>
-                  : <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />}
+                  : (
+                    <span className="inline-flex items-center gap-1 min-w-0">
+                      <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+                      <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
+                    </span>
+                  )}
               </TableCell>
               <TableCell>
                 {row.terminating
@@ -1529,6 +1542,7 @@ function GitOpsTile({
           ) : (
             <>
               <SyncStatusBadge sync={row.sync as any} suspended={row.suspended} />
+              <ReconcilingIndicator reconciling={row.reconciling} since={row.reconcilingSince} sync={row.sync as any} />
               <HealthStatusBadge health={row.health as any} />
             </>
           )}
@@ -1896,6 +1910,8 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: (status?.suspended ?? false) || isArgoSuspendedByRadar(resource),
     repository: resource.spec?.source?.repoURL ?? '',
     targetRevision: resource.spec?.source?.targetRevision ?? '',
@@ -1932,6 +1948,8 @@ export function normalizeFluxKustomization(resource: any, fluxSourceUrls?: Map<s
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: resource.status?.lastAppliedRevision ?? resource.status?.lastAttemptedRevision ?? '',
@@ -1969,6 +1987,8 @@ export function normalizeFluxHelmRelease(resource: any, fluxSourceUrls?: Map<str
     labels: (resource.metadata?.labels ?? {}) as Record<string, string>,
     sync: status?.sync ?? 'Unknown',
     health: status?.health ?? 'Unknown',
+    reconciling: status?.reconciling,
+    reconcilingSince: status?.reconcilingSince,
     suspended: status?.suspended ?? resource.spec?.suspend === true,
     repository,
     targetRevision: chartSpec.version ?? resource.status?.lastAttemptedRevision ?? '',

package/src/components/gitops/ReconcilingIndicator.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ReconcilingIndicator } from './GitOpsStatusBadge'
+
+const LABEL = 'Reconcile pass in flight'
+
+// A reconcile pass in flight is worth showing only where the sync word cannot
+// already say it. Radar's own precedent for a secondary indicator (the Velero
+// schedule cell's paused-and-rejected case) suppresses the icon when the badge
+// carries the same fact, and without that rule one row shows two spinners.
+describe('ReconcilingIndicator', () => {
+  it('shows on an applied object whose pass never finished', () => {
+    // The case the sync word cannot express, and the reason this exists: a
+    // wedged controller behind a correct "Synced".
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Synced" />,
+    )
+    expect(html).toContain(LABEL)
+  })
+
+  it('is suppressed when the sync badge already reports Reconciling', () => {
+    const html = renderToString(
+      <ReconcilingIndicator reconciling since="2026-08-11T06:05:00Z" sync="Reconciling" />,
+    )
+    expect(html).toBe('')
+  })
+
+  it('is absent when nothing is in flight', () => {
+    expect(renderToString(<ReconcilingIndicator reconciling={false} sync="Synced" />)).toBe('')
+  })
+})

package/src/components/gitops/detail-helpers.ts

@@ -100,7 +100,10 @@ export function getGitOpsResourceStatus(kind: string, resource: any): GitOpsStat
     return argoStatusToGitOpsStatus(resource?.status ?? {})
   }
   const conditions = (resource?.status?.conditions ?? []) as FluxCondition[]
-  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true)
+  return fluxConditionsToGitOpsStatus(conditions, resource?.spec?.suspend === true, {
+    generation: resource?.metadata?.generation,
+    observedGeneration: resource?.status?.observedGeneration,
+  })
 }
 
 // getGitOpsTool routes a kind+group to 'argo' or 'flux'. Same shape used

package/src/components/issues/IssuesView.tsx

@@ -240,6 +240,13 @@ export function IssueRow({
             </Tooltip>
           ) : null}
         </>
+      ) : issue.onset_unknown ? (
+        <Tooltip content="Radar can confirm this issue is active, but current Kubernetes state does not reveal when it began." delay={200} wrapperClassName="shrink-0">
+          <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+            <Clock className="h-3 w-3" aria-hidden />
+            Onset unknown
+          </span>
+        </Tooltip>
       ) : null}
     </div>
   );
@@ -451,6 +458,8 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
     meta.push(timing.meta);
   } else if (issue.first_seen) {
     meta.push(`started ${formatRelativeAgeTime(issue.first_seen)}`);
+  } else if (issue.onset_unknown) {
+    meta.push('onset unknown');
   }
   if (issue.first_seen) {
     if (issue.last_seen && timing?.kind !== 'creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);

package/src/components/issues/diagnostic.ts

@@ -46,6 +46,8 @@ export function diagnosticFactLabel(type: string): string {
       return 'Stalled autoscalers';
     case 'secret_not_ready':
       return 'Dependent pods';
+    case 'admission_webhook_backend':
+      return 'Admission dependency';
     default:
       return type.replace(/_/g, ' ');
   }
@@ -59,6 +61,7 @@ export function incidentParentLabel(factType?: string, confidence?: string): str
   switch (factType) {
     case 'pvc_blast_radius':
     case 'secret_not_ready':
+    case 'admission_webhook_backend':
       return 'Caused by';
     case 'apiservice_hpa':
       return 'Likely cause';

package/src/components/issues/issues.test.ts

@@ -126,6 +126,17 @@ describe('IssueRow', () => {
     expect(html).toContain('Control plane')
     expect(html).toContain(groupBadgeClass('control_plane'))
   })
+
+  it('shows an explicit unknown-onset state instead of inventing an age', () => {
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({ onset_unknown: true }),
+      open: false,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('Onset unknown')
+    expect(html).not.toContain('0s')
+  })
 })
 
 describe('issueTiming', () => {

package/src/components/issues/severity.ts

@@ -71,6 +71,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   secret_sync_failed: 'Secret sync failed',
   service_no_endpoints: 'No endpoints',
   ingress_backend_missing: 'Ingress backend missing',
+  ingress_class_missing: 'Ingress class missing',
   load_balancer_pending: 'Load balancer pending',
   gateway_not_ready: 'Gateway not ready',
   gateway_route_invalid: 'Gateway route invalid',
@@ -82,6 +83,8 @@ const CATEGORY_LABEL: Record<string, string> = {
   pvc_resize_failed: 'PVC resize failed',
   volume_mount_failed: 'Volume mount failed',
   volume_access_mode_conflict: 'Volume access conflict',
+  backup_failed: 'Backup failed',
+  backup_target_unavailable: 'Backup target unavailable',
   job_failed: 'Job failed',
   cronjob_failed: 'CronJob failed',
   rollout_stalled: 'Rollout stalled',

package/src/components/issues/types.ts

@@ -198,6 +198,9 @@ export interface Issue {
    *  Capacity / Demand view, so a generic scheduling failure never links. */
   capacity_relevant?: boolean;
   first_seen?: string;
+  /** Radar can confirm the issue is active, but current cluster evidence does
+   *  not establish when the failing state began. */
+  onset_unknown?: boolean;
   last_seen?: string;
   /** Affected-resource fan-out, EXCLUDING the subject (the row header).
    *  0/omitted for a single-resource issue; e.g. 50 for one Deployment's

package/src/components/resources/ResourcesSidebar.tsx

@@ -107,7 +107,7 @@ interface ResourceTypeButtonProps {
 
 const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps>(
   function ResourceTypeButton({ resource, count, isSelected, isHighlighted, isForbidden: forbidden, isPinned, onTogglePin, onClick }, ref) {
-    const Icon = getResourceIcon(resource.kind)
+    const Icon = getResourceIcon(resource.kind, resource.group)
     return (
       <button
         ref={ref}