@skyhook-io/k8s-ui 1.16.2 → 1.17.0

package/src/components/gitops/GitOpsTableView.tsx

@@ -40,6 +40,7 @@ import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
+import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format'
 
 // =============================================================================
 // GitOpsTableView — the canonical GitOps fleet list (Argo + Flux).
@@ -1373,8 +1374,8 @@ function GitOpsTable({
               )}
               <TableCell>
                 {row.terminating
-                  ? <span className="text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</span>
-                  : formatRelativeAge(row.lastSync || row.createdAt)}
+                  ? <span className="text-orange-400/80">{pendingFor(row.terminationStartedAt)}</span>
+                  : row.lastSync ? formatRelativeAgeTime(row.lastSync, '') : row.createdAt ? `Created ${formatRelativeAgeTime(row.createdAt, '')}` : ''}
               </TableCell>
               {showActions && onRowAction && (
                 <td
@@ -1603,9 +1604,9 @@ function GitOpsTile({
             <div className="truncate font-mono text-[11px] text-theme-text-tertiary">{shortRevision(revision)}</div>
           )}
           {row.terminating ? (
-            <div className="font-medium text-orange-400/80">Pending {formatRelativeAge(row.terminationStartedAt ?? '') || 'now'}</div>
+            <div className="font-medium text-orange-400/80">{pendingFor(row.terminationStartedAt)}</div>
           ) : (
-            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAge(lastSyncRaw)}</div>
+            lastSyncRaw && <div className={clsx('font-medium', recencyClass)}>{formatRelativeAgeTime(lastSyncRaw, '')}</div>
           )}
         </div>
         {(dest || ns || row.project) && (
@@ -1926,26 +1927,10 @@ function compactClusterURL(dest: string): string {
     .replace(/^kubernetes\.default\.svc(:\d+)?\/?$/, 'in-cluster')
 }
 
-// formatRelativeAge — inline relative-time formatter. Returns "" for unparseable
-// inputs so callers can treat empty as "no timestamp" and skip the time
-// cell gracefully.
-function formatRelativeAge(rfc3339: string): string {
-  if (!rfc3339) return ''
-  const time = Date.parse(rfc3339)
-  if (!Number.isFinite(time)) return ''
-  const diffMs = Date.now() - time
-  const s = Math.max(0, Math.floor(diffMs / 1000))
-  if (s < 60) return `${s}s ago`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
-  const h = Math.floor(m / 60)
-  if (h < 24) return `${h}h ago`
-  const d = Math.floor(h / 24)
-  if (d < 30) return `${d}d ago`
-  const mo = Math.floor(d / 30)
-  if (mo < 12) return `${mo}mo ago`
-  const y = Math.floor(d / 365)
-  return `${y}y ago`
+// How long deletion has been pending, not when it started.
+function pendingFor(startedAt?: string): string {
+  const age = formatCompactAge(startedAt)
+  return age ? `Pending for ${age}` : 'Pending'
 }
 
 // =============================================================================

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

@@ -82,7 +82,7 @@ export function describeGitOpsTerminating(summary?: {
   finalizers?: string[]
 }): { chipTooltip: string; actionDisabledTooltip: string } {
   const ageText = formatCompactAge(summary?.terminationStartedAt)
-  const ageSuffix = ageText ? ` ${ageText} ago` : ''
+  const ageSuffix = ageText ? ` for ${ageText}` : ''
   const finalizers = summary?.finalizers ?? []
   const finSuffix = finalizers.length > 0 ? ` Finalizers: ${finalizers.join(', ')}.` : ''
   const ageInline = ageText ? ` (${ageText})` : ''

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -72,7 +72,7 @@ export function GitOpsStatusStrip({ insight, loading, renderRevisionMeta }: GitO
   const revision = summary.lastRevision || summary.targetRevision || ''
   const shortRev = shortRevisionForCommit(revision)
   const commitUrl = revision ? commitURLForRepo(summary.source, revision) : null
-  const reconcileAge = formatRelative(summary.lastReconcile)
+  const reconcileAge = formatRelativeAgeTime(summary.lastReconcile)
   const healthSummary = buildHealthSummary(insight.changes ?? [])
   // STUCK belongs with the operation chip — it's a property of the same
   // state ("failed AND won't self-recover"). Co-locating FAILED + STUCK ·
@@ -257,7 +257,7 @@ function buildHealthSummary(changes: GitOpsChange[]): { text: string; tone: stri
 // disclosure — still available for forensics but not noise during deletion.
 function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsight['summary']> }) {
   const [showHistorical, setShowHistorical] = useState(false)
-  const pending = formatRelative(summary.terminationStartedAt) || 'recently'
+  const pending = formatRelativeAgeTime(summary.terminationStartedAt) || 'recently'
   const finalizers = summary.finalizers ?? []
   return (
     <div className="border-b border-orange-500/20 bg-orange-500/[0.04] px-4 py-2">
@@ -282,7 +282,7 @@ function TerminatingStatusStrip({ summary }: { summary: NonNullable<GitOpsInsigh
           {(summary.lastRevision || summary.targetRevision) && (
             <MetaFact label="Revision" value={summary.lastRevision || summary.targetRevision || '-'} mono />
           )}
-          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelative(summary.lastReconcile)} />}
+          {summary.lastReconcile && <MetaFact label="Last reconcile" value={formatRelativeAgeTime(summary.lastReconcile)} />}
           {summary.autoSyncMode && <MetaFact label="Sync mode" value={summary.autoSyncMode} />}
         </div>
       </Collapse>
@@ -1628,7 +1628,7 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
                 {e.count && e.count > 1 && (
                   <span className="text-[10px] text-theme-text-tertiary">×{e.count}</span>
                 )}
-                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeTime(e.lastTimestamp)}</span>
+                <span className="ml-auto text-[10px] text-theme-text-tertiary">{formatRelativeAgeTime(e.lastTimestamp, '')}</span>
               </div>
               <p className="mt-0.5 text-theme-text-secondary">{e.message}</p>
             </div>
@@ -1639,10 +1639,6 @@ function RecentEventsPanel({ events }: { events: NonNullable<GitOpsChange['recen
   )
 }
 
-function formatRelativeTime(value: string): string {
-  return formatRelativeAgeTime(value, '')
-}
-
 interface GitOpsActivityInsightViewProps {
   insight?: GitOpsInsight | null
   error?: Error | null
@@ -1729,7 +1725,7 @@ function HistoryRows({
               <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                 <span className="font-mono text-xs text-theme-text-primary">{item.revision || item.phase || '-'}</span>
                 <PhaseChip phase={item.phase} message={item.message} />
-                <span className="text-[11px] text-theme-text-tertiary">{formatRelative(item.deployedAt)}</span>
+                <span className="text-[11px] text-theme-text-tertiary">{formatRelativeAgeTime(item.deployedAt)}</span>
                 {item.initiatedBy && (
                   <span className="text-[11px] text-theme-text-tertiary">by {item.initiatedBy}</span>
                 )}
@@ -1831,6 +1827,3 @@ function InsightErrorState({ error }: { error: Error }) {
   )
 }
 
-function formatRelative(value?: string) {
-  return formatRelativeAgeTime(value)
-}

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

@@ -752,10 +752,10 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   // detail title row and fleet rows.
   if (isNodeTerminating(node)) {
     chips.push({ value: 'Terminating', tone: 'warning' })
-    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
     return chips
   }
-  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
   const revision = stringData(data.revision) || stringData(data.lastSyncRevision)
   if (revision) chips.push({ label: 'rev', value: revision })
   const attempted = stringData(data.attemptedRevision)
@@ -886,6 +886,3 @@ function pluralize(kind: string): string {
   return `${kind}s`
 }
 
-function formatAge(timestamp: string): string {
-  return formatCompactAge(timestamp)
-}

package/src/components/issues/IssuesView.tsx

@@ -403,7 +403,16 @@ export function IssueRow({
 function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSource }) {
   const crash =
     issue.restart_count || issue.last_terminated_reason
-      ? [issue.restart_count ? `${issue.restart_count} restart${issue.restart_count === 1 ? '' : 's'}` : null, issue.last_terminated_reason ? `last exit: ${issue.last_terminated_reason}` : null]
+      ? [
+          issue.restart_count ? `${issue.restart_count} restart${issue.restart_count === 1 ? '' : 's'}` : null,
+          issue.last_terminated_reason ? `last exit: ${issue.last_terminated_reason}` : null,
+          issue.restart_loop?.workload_pods && issue.restart_loop.workload_pods > 1
+            ? `${issue.restart_loop.looping_pods} of ${issue.restart_loop.workload_pods} pods looping`
+            : null,
+          issue.restart_loop?.startup_probe_failure ? 'startup probe failures seen' : null,
+          issue.restart_loop?.liveness_probe_failure ? 'liveness probe failures seen' : null,
+          issue.restart_loop?.readiness_probe_failure ? 'readiness probe failures seen' : null,
+        ]
           .filter(Boolean)
           .join(' · ')
       : null;

package/src/components/issues/issue-timing.ts

@@ -113,9 +113,9 @@ export function issueTiming(issue: Issue): IssueTimingDisplay | null {
       }
       return {
         kind: 'regression',
-        chip: 'after healthy',
+        chip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'NotReady' : 'after healthy',
         meta: 'failing evidence followed a healthy period',
-        tooltip: 'A healthy period preceded this failing evidence.',
+        tooltip: issue.kind === 'Node' && issue.reason === 'NotReady' ? 'The Ready condition stopped reporting healthy at this time.' : 'A healthy period preceded this failing evidence.',
       };
     }
     case 'started_at_resource_creation': {

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

@@ -139,7 +139,7 @@ describe('IssueRow', () => {
 
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
-      issue: mk({ category_group: 'control_plane' }),
+      issue: mk({ category_group: 'control_plane', kind: 'Node' }),
       open: false,
       onToggle: () => undefined,
     }))

package/src/components/issues/types.ts

@@ -230,6 +230,9 @@ export interface Issue {
   // Pod crash context carried from the representative member.
   restart_count?: number;
   last_terminated_reason?: string;
+  /** Evidence for a container in an active restart loop (crashloop issues).
+   *  Probe failures are observations alongside the restarts, not a cause. */
+  restart_loop?: IssueRestartLoop;
 
   /**
    * Best-effort timing evidence from K8s-native signals. Absent when Radar has
@@ -360,3 +363,24 @@ export function issueMessageParts(issue: Issue): { headline: string; detail: str
   if (normalized && normalized !== raw) return { headline: normalized, detail: raw };
   return { headline: raw, detail: '' };
 }
+
+export interface IssueProbeFailure {
+  last_seen: string;
+  message?: string;
+}
+
+export interface IssueRestartLoop {
+  container: string;
+  sidecar?: boolean;
+  restart_count: number;
+  last_exit_code: number;
+  last_reason?: string;
+  last_finished_at?: string;
+  last_started_at?: string;
+  looping_pods?: number;
+  workload_pods?: number;
+  severity_reason?: string;
+  liveness_probe_failure?: IssueProbeFailure;
+  readiness_probe_failure?: IssueProbeFailure;
+  startup_probe_failure?: IssueProbeFailure;
+}

package/src/components/logs/WorkloadLogsViewer.notice.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { ToastProvider } from '../ui/Toast'
+import { WorkloadLogsViewer } from './WorkloadLogsViewer'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+class FakeEventSource extends EventTarget {
+  static last: FakeEventSource | undefined
+  constructor(readonly url: string) {
+    super()
+    FakeEventSource.last = this
+  }
+  close() {}
+  emit(type: string, data: unknown) {
+    this.dispatchEvent(new MessageEvent(type, { data: JSON.stringify(data) }))
+  }
+}
+
+let root: Root
+let element: HTMLDivElement
+beforeEach(() => {
+  vi.stubGlobal('EventSource', FakeEventSource)
+  element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+  vi.unstubAllGlobals()
+})
+
+it('clears the unreadable-sources notice when the stream ends', async () => {
+  const notice = '1 source could not be read: web-0/app: Kubernetes did not return this container\'s logs'
+  await act(async () =>
+    root.render(
+      <ToastProvider>
+        <WorkloadLogsViewer
+          name="web"
+          fetchAll={async () => ({ pods: [], logs: [] })}
+          createStream={() => new EventSource('/stream')}
+          autoStream
+        />
+      </ToastProvider>,
+    ),
+  )
+  const source = FakeEventSource.last
+  if (!source) throw new Error('stream was not opened')
+
+  await act(async () => source.emit('connected', { pods: [{ name: 'web-0', containers: ['app'] }] }))
+  await act(async () => source.emit('notice', { notice }))
+  expect(element.textContent).toContain(notice)
+
+  await act(async () => source.emit('end', { reason: 'no pods found' }))
+  expect(element.textContent).not.toContain(notice)
+})

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -63,9 +63,15 @@ export interface WorkloadLogsViewerProps {
    * re-armed. Requires `createStream`. Default: false.
    */
   autoStream?: boolean
+  /** Pods selected when the pod list first loads; all pods when empty or none match. */
+  initialPods?: string[]
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods }: WorkloadLogsViewerProps) {
+  const initialSelection = (names: string[]) => {
+    const wanted = names.filter((n) => initialPods?.includes(n))
+    return new Set(wanted.length > 0 ? wanted : names)
+  }
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -129,7 +135,9 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       const previousPods = previousSnapshotPods.current
       const nextPods = resultPods.map(p => p.name)
       previousSnapshotPods.current = nextPods
-      setSelectedPods(selected => previousPods === null || previousPods.every(pod => selected.has(pod))
+      setSelectedPods(selected => previousPods === null
+        ? initialSelection(nextPods)
+        : previousPods.every(pod => selected.has(pod))
         ? new Set(nextPods)
         : new Set(nextPods.filter(pod => selected.has(pod))))
 
@@ -194,7 +202,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             setEmptyMessage(data.emptyMessage || null)
             setEmptyCommand(data.command || null)
             setSelectedPods(prev => (
-              prev.size === 0 ? new Set(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
+              prev.size === 0 ? initialSelection(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
             ))
           }
         },
@@ -205,6 +213,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               content: data.content || '',
               container: data.container || '',
               pod: data.pod || '',
+              sourceLabel: data.sourceLabel,
               podColorIndex: podColorIndexRef.current.get(data.pod || ''),
             })
           }
@@ -237,7 +246,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             // while new pod logs start flowing in
           }
         },
+        onNotice: (data: unknown) => {
+          const notice = typeof data === 'object' && data !== null && 'notice' in data ? data.notice : ''
+          setNotice(typeof notice === 'string' ? notice : '')
+        },
         onEnd: (data: any) => {
+          setNotice('')
           if (data?.emptyMessage) setEmptyMessage(data.emptyMessage)
           if (data?.command) setEmptyCommand(data.command)
         },

package/src/components/logs/useLogBuffer.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { detectLogLevel } from './useLogBuffer'
+
+describe('detectLogLevel with CloudNativePG records', () => {
+  it('uses the nested PostgreSQL severity over the instance manager level', () => {
+    const line = (sev: string) => JSON.stringify({ level: 'info', logger: 'postgres', msg: 'record', record: { error_severity: sev, message: 'x' } })
+    expect(detectLogLevel(line('ERROR'))).toBe('error')
+    expect(detectLogLevel(line('FATAL'))).toBe('error')
+    expect(detectLogLevel(line('WARNING'))).toBe('warn')
+    expect(detectLogLevel(line('LOG'))).toBe('info')
+    expect(detectLogLevel(line('DEBUG'))).toBe('debug')
+  })
+  it('ignores a record that is not a PostgreSQL one', () => {
+    expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'request failed', record: { error_severity: 20 } }))).toBe('error')
+    expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'x', record: { error_severity: 'minor' } }))).toBe('error')
+  })
+})

package/src/components/logs/useLogStream.ts

@@ -10,6 +10,8 @@ export interface LogStreamHandlers {
   onPodAdded?: (data: unknown) => void
   /** Called when pods are terminated during streaming (workload logs only) */
   onPodRemoved?: (data: unknown) => void
+  /** Called when the set of sources the stream cannot read changes (workload logs only) */
+  onNotice?: (data: unknown) => void
   /** Called when the server ends the stream cleanly */
   onEnd?: (data: unknown) => void
 }
@@ -92,6 +94,15 @@ export function useLogStream() {
       }
     })
 
+    es.addEventListener('notice', (event) => {
+      if (!isCurrent()) return
+      if (handlers.onNotice) {
+        try { handlers.onNotice(JSON.parse((event as MessageEvent).data)) } catch (e) {
+          console.error('Failed to parse notice event:', e)
+        }
+      }
+    })
+
     es.addEventListener('end', (event) => {
       if (!isCurrent()) return
       endedRef.current = true

package/src/components/resources/ResourcesSidebar.test.tsx

@@ -105,3 +105,79 @@ describe('ResourcesSidebar count visibility', () => {
     expect(html).toContain('HorizontalPodAutoscaler')
   })
 })
+
+describe('ResourcesSidebar category workspaces', () => {
+  const cnpgCluster: APIResource = {
+    group: 'postgresql.cnpg.io',
+    version: 'v1',
+    kind: 'Cluster',
+    name: 'clusters',
+    namespaced: true,
+    isCrd: true,
+    verbs: ['list'],
+  }
+  const objectStore: APIResource = {
+    group: 'barmancloud.cnpg.io',
+    version: 'v1',
+    kind: 'ObjectStore',
+    name: 'objectstores',
+    namespaced: true,
+    isCrd: true,
+    verbs: ['list'],
+  }
+
+  it('renders destinations above the kinds, with the active object nested and no kind selected', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster, objectStore]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 2, 'barmancloud.cnpg.io/ObjectStore': 1 }}
+        categoryWorkspaces={{
+          CloudNativePG: {
+            destinations: [
+              { id: 'overview', label: 'Overview', count: 3, countTitle: '3 clusters need attention', active: true, child: { label: 'pg-orders' }, onSelect: () => {} },
+            ],
+            defaultKindsCollapsed: true,
+            scopeNote: 'Counts for namespace payments',
+          },
+        }}
+      />
+    )
+    expect(html).toContain('Workspace')
+    expect(html).toContain('Overview')
+    expect(html).toContain('pg-orders')
+    expect(html).toContain('Counts for namespace payments')
+    expect(html).toContain('Resource kinds')
+    expect(html).toMatch(/aria-expanded="false"[^>]*>(?:(?!<\/button>).)*Resource kinds/)
+    expect(html).not.toContain('selection-strong selection-text">Pod')
+  })
+
+  it('keeps a workspace category visible when it has no resources', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 0 }}
+        categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', onSelect: () => {} }] } }}
+      />
+    )
+    expect(html).toContain('CloudNativePG')
+    expect(html).toContain('Overview')
+  })
+
+  it('labels API groups when a workspace category spans several', () => {
+    const html = renderToString(
+      <ResourcesSidebar
+        selectedKind={{ name: 'clusters', kind: 'Cluster', group: 'postgresql.cnpg.io' }}
+        onSelectedKindChange={() => {}}
+        apiResources={[cnpgCluster, objectStore]}
+        resourceCounts={{ 'postgresql.cnpg.io/Cluster': 2, 'barmancloud.cnpg.io/ObjectStore': 1 }}
+        categoryWorkspaces={{ CloudNativePG: { destinations: [{ id: 'overview', label: 'Overview', onSelect: () => {} }], defaultKindsCollapsed: true } }}
+      />
+    )
+    expect(html).toContain('postgresql.cnpg.io')
+    expect(html).toContain('barmancloud.cnpg.io')
+  })
+})