@skyhook-io/k8s-ui 1.7.0 → 1.7.2

package/package.json

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

package/src/components/resources/renderers/NamespaceRenderer.tsx

@@ -1,8 +1,10 @@
-import { Shield, Box, Users } from 'lucide-react'
+import { Shield, Box, Users, Gauge } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
+import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
+import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
 
 interface NamespaceRendererProps {
   data: any
@@ -14,10 +16,23 @@ interface NamespaceRendererProps {
   rbacData?: RBACNamespaceResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /**
+   * ResourceQuota objects for this namespace (from /api/resources/
+   * resourcequotas?namespace=). Undefined when the host hasn't wired the
+   * fetch (quota section omitted). A saturated quota is exactly why a
+   * namespace stops admitting pods, yet it's shown nowhere else.
+   */
+  quotaData?: any[] | null
+  /**
+   * Non-403 quota fetch error. When set, the quota section renders a note
+   * instead of silently disappearing — so a quota-constrained namespace whose
+   * fetch 500/503s isn't mistaken for quota-free. (403 stays hidden upstream.)
+   */
+  quotaError?: Error | null
   onNavigate?: (ref: ResourceRef) => void
 }
 
-export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNavigate }: NamespaceRendererProps) {
+export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quotaData, quotaError, onNavigate }: NamespaceRendererProps) {
   const metadata = data.metadata || {}
   const status = data.status || {}
   const phase = status.phase
@@ -48,6 +63,11 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNa
         </PropertyList>
       </Section>
 
+      {/* ResourceQuota usage — only when host wired the fetch. */}
+      {(quotaError || (quotaData != null && quotaData.length > 0)) && (
+        <NamespaceQuotaSection quotas={quotaData ?? []} error={quotaError ?? null} />
+      )}
+
       {/* RBAC summary — only when host wired the fetch. */}
       {rbacData !== undefined && (
         <NamespaceRBACSection
@@ -61,6 +81,89 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNa
   )
 }
 
+// ============================================================================
+// NAMESPACE QUOTA SECTION
+// ============================================================================
+// Shows ResourceQuota saturation — the signal that answers "why did this
+// namespace stop admitting pods?" A quota at its hard limit blocks every new
+// pod the namespace tries to create, with no failing Pod to inspect (the
+// controller's FailedCreate event is the only trace). Surfacing usage here
+// turns that invisible failure into a glanceable bar.
+
+// quotaUsageRatio parses a used/hard pair for a quota resource, picking the
+// right unit parser by resource name (cpu → millicores, memory/storage →
+// bytes, everything else → plain count). Returns null when hard is unset or
+// unparseable so the row falls back to showing the raw strings.
+function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
+  if (!hard) return null
+  const isCPU = /(^|\.)cpu$/i.test(resourceName)
+  const isBytes = /(memory|storage)$/i.test(resourceName)
+  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : (v: string) => parseFloat(v) || 0
+  const h = parse(hard)
+  if (!h) return null
+  return parse(used || '0') / h
+}
+
+function NamespaceQuotaSection({ quotas, error }: { quotas: any[]; error?: Error | null }) {
+  return (
+    <Section title="Resource Quotas" icon={Gauge} defaultExpanded>
+      {error && (
+        <div className="text-xs text-theme-text-secondary">
+          Couldn’t load resource quotas — retry shortly. A quota at its limit blocks new pods in this namespace.
+        </div>
+      )}
+      <div className="space-y-3">
+        {quotas.map((q: any, qi: number) => {
+          const name = q?.metadata?.name ?? `quota-${qi}`
+          const hard: Record<string, string> = q?.status?.hard ?? q?.spec?.hard ?? {}
+          const used: Record<string, string> = q?.status?.used ?? {}
+          const resourceNames = Object.keys(hard).sort()
+          return (
+            <div key={name} className="card-inner">
+              <div className="text-xs font-medium text-theme-text-primary mb-1.5">{name}</div>
+              {resourceNames.length === 0 ? (
+                <div className="text-xs text-theme-text-secondary">No hard limits set.</div>
+              ) : (
+                <div className="space-y-1">
+                  {resourceNames.map((res) => {
+                    const ratio = quotaUsageRatio(res, used[res] ?? '0', hard[res])
+                    const pct = ratio === null ? null : Math.min(100, Math.round(ratio * 100))
+                    const tone =
+                      ratio === null ? SEVERITY_TEXT.neutral
+                        : ratio >= 1 ? SEVERITY_TEXT.error
+                          : ratio >= 0.9 ? SEVERITY_TEXT.alert
+                            : SEVERITY_TEXT.neutral
+                    const barTone =
+                      ratio === null ? 'bg-theme-border'
+                        : ratio >= 1 ? SEVERITY_DOT.error
+                          : ratio >= 0.9 ? SEVERITY_DOT.alert
+                            : 'bg-theme-text-tertiary'
+                    return (
+                      <div key={res} className="text-xs">
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="text-theme-text-secondary truncate">{res}</span>
+                          <span className={clsx('shrink-0 tabular-nums', tone)}>
+                            {used[res] ?? '0'} / {hard[res]}{pct !== null && ` (${pct}%)`}
+                          </span>
+                        </div>
+                        {pct !== null && (
+                          <div className="mt-0.5 h-1 rounded-full bg-theme-base overflow-hidden">
+                            <div className={clsx('h-full rounded-full', barTone)} style={{ width: `${pct}%` }} />
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
 // ============================================================================
 // NAMESPACE RBAC SECTION
 // ============================================================================

package/src/components/resources/renderers/PodRenderer.tsx

@@ -338,9 +338,12 @@ export function PodRenderer({
         <AlertBanner variant="error" title="Issues Detected">
           <ul className="text-xs space-y-1">
             {podProblems.map((p, i) => (
-              <li key={i} className="flex items-center gap-1.5">
-                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
-                <span className="text-red-600 dark:text-red-400">{p.message}</span>
+              <li key={i} className="flex items-start gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0 mt-1', SEVERITY_DOT_COLOR[p.severity])} />
+                <span className="text-red-600 dark:text-red-400">
+                  {p.message}
+                  {p.detail && <span className="text-theme-text-secondary">: {p.detail}</span>}
+                </span>
               </li>
             ))}
           </ul>

package/src/components/resources/resource-utils.ts

@@ -48,6 +48,27 @@ export const healthColors: Record<HealthLevel, string> = {
 export interface PodProblem {
   severity: 'critical' | 'high' | 'medium'
   message: string
+  // detail carries extra human context shown after the short message (e.g.
+  // the scheduler's verdict for an Unschedulable pod). message stays the
+  // stable short label so filter-chip matching (podMatchesProblemCategory)
+  // and known-pattern checks keep working on exact strings.
+  detail?: string
+}
+
+/**
+ * Condense a kube-scheduler verdict (the PodScheduled=False / FailedScheduling
+ * message) for display: drop the "0/N nodes are available:" prefix and the
+ * "preemption: …" tail, keeping the per-predicate clause list — which already
+ * names untolerated taints, insufficient resources, and affinity/selector
+ * misses. Presentation-only; the backend `scheduling` issue source does the
+ * structured decomposition + node-label resolution (e.g. naming arm64).
+ */
+export function summarizeSchedulerMessage(message?: string): string {
+  if (!message) return ''
+  let m = message.split('. preemption:')[0].split(' preemption:')[0].trim()
+  const colon = m.indexOf(':')
+  if (colon >= 0) m = m.slice(colon + 1).trim()
+  return m.replace(/\.\s*$/, '').trim()
 }
 
 /** Tailwind classes for severity dot indicators (used in tooltips and alert banners) */
@@ -302,7 +323,7 @@ export function getPodProblems(pod: any): PodProblem[] {
   for (const cond of conditions) {
     if (cond.type === 'PodScheduled' && cond.status === 'False') {
       if (cond.reason === 'Unschedulable') {
-        problems.push({ severity: 'high', message: 'Unschedulable' })
+        problems.push({ severity: 'high', message: 'Unschedulable', detail: summarizeSchedulerMessage(cond.message) || undefined })
       }
     }
     // Readiness/Liveness probe failures

package/src/components/resources/summarize-scheduler-message.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { summarizeSchedulerMessage } from './resource-utils'
+
+describe('summarizeSchedulerMessage', () => {
+  it('strips the "0/N nodes are available:" prefix and the preemption tail', () => {
+    const msg =
+      '0/5 nodes are available: 2 Insufficient cpu, 3 node(s) had untolerated taint {dedicated: gpu}. ' +
+      'preemption: 0/5 nodes are available: 5 No preemption victims found for incoming pod.'
+    expect(summarizeSchedulerMessage(msg)).toBe(
+      '2 Insufficient cpu, 3 node(s) had untolerated taint {dedicated: gpu}',
+    )
+  })
+
+  it('returns the clause list without a node prefix unchanged (minus trailing period)', () => {
+    expect(summarizeSchedulerMessage('0/2 nodes are available: 2 Insufficient memory.')).toBe(
+      '2 Insufficient memory',
+    )
+  })
+
+  it('handles the bare " preemption:" tail variant', () => {
+    expect(
+      summarizeSchedulerMessage('0/3 nodes are available: 3 Insufficient cpu preemption: not helpful'),
+    ).toBe('3 Insufficient cpu')
+  })
+
+  it('returns empty string for empty/undefined input (so detail is omitted, message stays the stable label)', () => {
+    expect(summarizeSchedulerMessage('')).toBe('')
+    expect(summarizeSchedulerMessage(undefined)).toBe('')
+  })
+})

package/src/components/topology/K8sResourceNode.tsx

@@ -43,13 +43,63 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
     Pending: {
       title: 'Pending',
       description: 'Pod is waiting to be scheduled to a node.',
-      action: 'Check for resource constraints or node availability.',
+      action: 'Open the pod to see the scheduler verdict (taints, resources, affinity).',
     },
     FailedScheduling: {
       title: 'Scheduling Failed',
       description: 'No suitable node found for this pod.',
       action: 'Check node resources, taints, tolerations, and affinity rules.',
     },
+    Unschedulable: {
+      title: 'Unschedulable',
+      description: 'The scheduler tried every node and none fit.',
+      action: 'Open the pod for the decomposed reason — arch/OS mismatch, untolerated taint, insufficient resources, or affinity.',
+    },
+    QuotaExceeded: {
+      title: 'ResourceQuota Exceeded',
+      description: 'A namespace ResourceQuota is at its hard limit, so new pods are rejected at admission.',
+      action: 'Open the namespace to see quota usage; raise the quota or free usage.',
+    },
+    QuotaNearLimit: {
+      title: 'ResourceQuota Near Limit',
+      description: 'A namespace ResourceQuota is close to its hard limit and will soon block new pods.',
+      action: 'Open the namespace to see quota usage.',
+    },
+    IPExhaustion: {
+      title: 'IP Exhaustion (CNI)',
+      description: 'The pod was scheduled but the CNI could not assign an IP — the node/subnet pool is exhausted.',
+      action: 'Free IPs, scale the subnet/ENI pool, or move the pod to a node with capacity.',
+    },
+    SandboxCreationFailed: {
+      title: 'Sandbox Creation Failed',
+      description: 'The kubelet could not create the pod sandbox.',
+      action: 'Check kubelet/CNI events on the node.',
+    },
+    VolumeMount: {
+      title: 'Volume Mount Failed',
+      description: 'The pod was scheduled but a volume could not be mounted.',
+      action: 'Check the PVC/PV binding and the CSI driver on the node.',
+    },
+    VolumeAttach: {
+      title: 'Volume Attach Failed',
+      description: 'A volume could not be attached to the node.',
+      action: 'Check the CSI driver and cloud-provider attach limits.',
+    },
+    VolumeMultiAttach: {
+      title: 'Volume Multi-Attach',
+      description: 'The volume is still attached to another node — a RWO volume cannot attach in two places.',
+      action: 'Wait for the old pod to terminate, or cordon/drain the stale node.',
+    },
+    PodSecurityViolation: {
+      title: 'Pod Security Violation',
+      description: 'Pod Security Admission rejected the pod template at admission.',
+      action: 'Align the pod securityContext with the namespace PSA level.',
+    },
+    WebhookDenied: {
+      title: 'Admission Webhook Denied',
+      description: 'A validating/mutating admission webhook rejected pod creation.',
+      action: 'Check the webhook policy that denied the request.',
+    },
     Evicted: {
       title: 'Pod Evicted',
       description: 'Pod was evicted from the node (usually due to resource pressure).',

package/src/utils/navigation.test.ts

@@ -25,6 +25,13 @@ describe('kindToPlural', () => {
     expect(kindToPlural('NetworkPolicy')).toBe('networkpolicies')
   })
 
+  test('handles already-plural kind names (Endpoints)', () => {
+    // The Kind "Endpoints" IS its resource name; englishPlural would wrongly
+    // yield "endpointses" (ends in s → +es) without the builtin map entry.
+    expect(kindToPlural('Endpoints')).toBe('endpoints')
+    expect(pluralToKind('endpoints')).toBe('Endpoints')
+  })
+
   test('handles kinds ending in ss (Class-suffix)', () => {
     expect(kindToPlural('StorageClass')).toBe('storageclasses')
     expect(kindToPlural('IngressClass')).toBe('ingressclasses')

package/src/utils/navigation.ts

@@ -11,6 +11,7 @@ export type NavigateToResource = (resource: SelectedResource) => void
 const BUILTIN_PLURAL_TO_KIND: Record<string, string> = {
   pods: 'Pod',
   services: 'Service',
+  endpoints: 'Endpoints', // already-plural resource name; englishPlural would yield "endpointses"
   deployments: 'Deployment',
   daemonsets: 'DaemonSet',
   statefulsets: 'StatefulSet',