@skyhook-io/k8s-ui 1.14.12 → 1.16.0

package/src/components/resources/renderers/RayJobRenderer.test.tsx

@@ -0,0 +1,71 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Badge } from '../../ui/Badge'
+import { RayJobRenderer } from './RayJobRenderer'
+import { getRayJobStatus } from '../resource-utils-ray'
+import { RayJobCell } from './ray-cells'
+import { getResourceStatus } from '../../shared/ResourceRendererDispatch'
+
+const root = { apiVersion: 'ray.io/v1', kind: 'RayJob', metadata: { name: 'train', namespace: 'ml' }, spec: {} }
+const render = (data: any) => renderToStaticMarkup(<RayJobRenderer data={data} onNavigate={() => {}} />)
+
+describe('RayJob native evidence', () => {
+  it.each(['Retrying', 'Suspending', 'Suspended', 'Failed', 'ValidationFailed'])('prioritizes lifecycle %s across summary, table and header', jobDeploymentStatus => {
+    const data = { ...root, status: { jobDeploymentStatus, jobStatus: 'RUNNING' } }
+    expect(getRayJobStatus(data).text).toBe(jobDeploymentStatus)
+    expect(getResourceStatus('rayjobs', data)?.text).toBe(jobDeploymentStatus)
+    expect(renderToStaticMarkup(<RayJobCell resource={data} column="status" />)).toContain(jobDeploymentStatus)
+    expect(render(data)).toContain('Last reported application state')
+    expect(render(data)).toContain('RUNNING')
+  })
+  it('shows completed suspension with a neutral lifecycle badge', () => {
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Suspended' } })).toContain(renderToStaticMarkup(<Badge severity="neutral">Suspended</Badge>))
+  })
+  it('does not call stopped completion success or missing status healthy', () => {
+    expect(getRayJobStatus({ status: { jobStatus: 'STOPPED', jobDeploymentStatus: 'Complete' } }).text).toBe('Stopped')
+    expect(render(root)).toContain('Not reported')
+    expect(render(root)).not.toContain('Succeeded')
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Failed', jobStatus: 'STOPPED' } })).not.toContain('does not establish')
+  })
+  it('keeps application and controller times separate and clears absent evidence', () => {
+    const html = render({ ...root, status: { startTime: '2026-09-20T00:00:00Z', rayJobInfo: { startTime: '2026-09-20T00:01:00Z' }, message: 'capacity timeout', reason: 'DeadlineExceeded' } })
+    expect(html).toContain('Application started')
+    expect(html).toContain('Controller attempt started')
+    expect(html).toContain('capacity timeout')
+    expect(render({ ...root, status: { jobDeploymentStatus: 'Suspended' } })).not.toContain('Application started')
+  })
+  it.each(['HTTPMode', 'InteractiveMode', 'SidecarMode', 'NewMode'])('never invents a submitter for %s', submissionMode => {
+    const html = render({ ...root, spec: { submissionMode } })
+    expect(html).not.toContain('Observed submitter Job')
+    expect(html).toContain(submissionMode)
+    if (submissionMode === 'InteractiveMode') expect(html).toContain('spec.jobId')
+  })
+  it('does not link remote runtime names locally', () => {
+    const html = render({ ...root, spec: { managedBy: 'kueue.x-k8s.io/multikueue' }, status: { rayClusterName: 'remote-runtime' } })
+    expect(html).toContain('remote-runtime')
+    expect(html).not.toMatch(/<button[^>]*>remote-runtime<\/button>/)
+    expect(html).not.toContain('Observed submitter Job')
+  })
+  it('explains selected-cluster cleanup and gate-dependent policies', () => {
+    expect(render({ ...root, spec: { clusterSelector: { 'ray.io/cluster': 'shared' }, shutdownAfterJobFinishes: true } })).toContain('cleanup is not applied')
+    const html = render({ ...root, spec: { deletionStrategy: { deletionRules: [{ policy: 'DeleteWorkers', condition: { jobStatus: 'SUCCEEDED', ttlSeconds: 0 } }] } } })
+    expect(html).toContain('RayJobDeletionPolicy')
+    expect(html).toContain('DeleteWorkers')
+    expect(html).toContain('TTL 0s')
+    expect(html).not.toContain('No completion shutdown requested')
+    expect(render({ ...root, spec: { clusterSelector: { bad: 'selector' } } })).toContain('cleanup is not applied')
+  })
+})
+
+describe('controller message disclosure', () => {
+  it('keeps short messages inline', () => {
+    expect(render({ ...root, status: { message: 'Submission failed.' } })).not.toContain('Full controller message')
+  })
+  it.each(['x'.repeat(20000), 'Failure\nline two\nline three\nline four\nTraceback: final cause'])('retains the entire long message behind a collapsed disclosure', message => {
+    const html = render({ ...root, status: { message } })
+    expect(html).toContain('Full controller message')
+    expect(html).toContain('aria-expanded="false"')
+    expect(html).toContain(message)
+    expect(html.split('Full controller message')[0]).toContain(message.trim().split('\n').at(-1)!.slice(-240))
+  })
+})

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

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+import type { ResourceRef } from '../../../types'
+import { formatRelativeAgeTime } from '../../../utils/format'
+import { Tooltip } from '../../ui/Tooltip'
+import { Badge } from '../../ui/Badge'
+import { Disclosure } from '../../ui/Disclosure'
+import { AlertBanner, Property, PropertyList, ResourceLink } from '../../ui/drawer-components'
+import { rayJobIsLocal, rayJobSubmissionMode } from '../resource-utils-ray'
+
+export interface RayJobRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+  submitterEvidence?: ReactNode
+  selectedClusterEvidence?: ReactNode
+  admissionContent?: ReactNode
+}
+
+const card = 'min-w-0 overflow-hidden rounded-lg border border-theme-border bg-theme-surface'
+const header = 'border-b border-theme-border bg-theme-elevated px-3 py-2.5 text-xs font-medium uppercase tracking-wider text-theme-text-secondary'
+
+export function RayJobRenderer({ data, onNavigate, submitterEvidence, selectedClusterEvidence, admissionContent }: RayJobRendererProps) {
+  const spec = data.spec ?? {}
+  const status = data.status ?? {}
+  const local = rayJobIsLocal(data)
+  const mode = rayJobSubmissionMode(data)
+  const selectsExisting = Object.keys(spec.clusterSelector ?? {}).length > 0
+  const selected = spec.clusterSelector?.['ray.io/cluster']
+  const cluster = selected || status.rayClusterName
+  const lifecycle = status.jobDeploymentStatus
+  const jobStatus = status.jobStatus
+  const failed = lifecycle === 'Failed' || lifecycle === 'ValidationFailed'
+  const transitioning = ['Retrying', 'Suspending', 'Suspended'].includes(lifecycle)
+  const rules: any[] = spec.deletionStrategy?.deletionRules ?? []
+  const time = (value: string) => <Tooltip content={value}><time dateTime={value}>{formatRelativeAgeTime(value)}</time></Tooltip>
+  return <div className="@container/rayjob space-y-4">
+    {!local && <AlertBanner variant="info" title="Externally managed RayJob" message={`Managed by ${spec.managedBy}. Reported runtime names may refer to another cluster; local absence does not establish execution state.`} />}
+    {admissionContent}
+    <div className="grid items-start gap-4 @min-[1024px]/rayjob:grid-cols-[minmax(0,1.7fr)_minmax(320px,0.9fr)]">
+      <section className={card} aria-label="RayJob execution">
+        <h3 className={header}>Execution</h3>
+        <div className="space-y-3 p-3 text-sm">
+          <div className="flex flex-wrap gap-x-6 gap-y-3">
+            <div><p className="mb-1 text-xs text-theme-text-secondary">Controller lifecycle</p><Badge severity={failed ? 'error' : transitioning && lifecycle !== 'Suspended' ? 'warning' : 'neutral'}>{lifecycle || 'Not reported'}</Badge></div>
+            <div><p className="mb-1 text-xs text-theme-text-secondary">Last reported application state</p><Badge severity={failed || transitioning ? 'neutral' : jobStatus === 'FAILED' ? 'error' : jobStatus === 'RUNNING' || jobStatus === 'SUCCEEDED' ? 'success' : 'neutral'}>{jobStatus || 'Not reported'}</Badge></div>
+          </div>
+          {status.reason && <p className="break-words font-medium">{status.reason}</p>}
+          {status.message && <ControllerMessage message={status.message} />}
+          {failed && jobStatus && !['FAILED', 'STOPPED'].includes(jobStatus) && <p className="text-xs text-theme-text-secondary">{jobStatus === 'SUCCEEDED' ? 'The application reported success, but the controller lifecycle failed. Review the controller message and submitter evidence.' : 'Controller failure does not establish that the application has stopped.'}</p>}
+          {lifecycle === 'Retrying' && <p className="text-xs text-theme-text-secondary">Preparing to retry. The reported failure and submitter may belong to the attempt being cleaned up.</p>}
+          <PropertyList>
+            <Property label="Suspension requested" value={spec.suspend === true ? 'Yes' : 'No'} />
+            {status.jobId && <Property label="Ray job ID" value={<span className="break-all font-mono">{status.jobId}</span>} />}
+            {status.rayJobInfo?.startTime && <Property label="Application started" value={time(status.rayJobInfo.startTime)} />}
+            {status.rayJobInfo?.endTime && <Property label="Application ended" value={time(status.rayJobInfo.endTime)} />}
+            {status.failed != null && <Property label="Reported failed runs" value={status.failed} />}
+            {status.succeeded != null && <Property label="Reported successful runs" value={status.succeeded} />}
+          </PropertyList>
+          {status.jobStatusCheckFailureStartTime && <AlertBanner variant="warning" title="Application status checks are failing" >{'Checks have been failing since '}{time(status.jobStatusCheckFailureStartTime)}. Application state is the last reported observation.</AlertBanner>}
+        </div>
+        <div className="border-t border-theme-border p-3 text-xs text-theme-text-secondary">
+          <Disclosure summary="Timing and observation details">
+            <div className="space-y-2 pt-2">
+              {status.startTime && <p>Controller attempt started: {time(status.startTime)}</p>}
+              {status.endTime && <p>Controller terminal time: {time(status.endTime)}</p>}
+              <p>Application and controller times describe different events. Status is a controller snapshot; cleared fields are not retained as attempt history. See Timeline for recorded events and YAML for the full resource.</p>
+            </div>
+          </Disclosure>
+        </div>
+      </section>
+      <section className={card} aria-label="RayJob submission and runtime">
+        <h3 className={header}>Submission and runtime</h3>
+        <div className="space-y-3 p-3 text-sm">
+          <p className="font-medium break-words">{mode}</p>
+          <p className="text-theme-text-secondary">{mode === 'K8sJobMode' ? 'A Kubernetes Job submits the application to Ray.' : mode === 'HTTPMode' ? 'The controller submits directly through the Ray API; there is no submitter Job.' : mode === 'InteractiveMode' ? 'The controller waits for spec.jobId to identify a manually submitted Ray job.' : mode === 'SidecarMode' ? 'A container in the head Pod submits the application; there is no submitter Job.' : 'Submission behavior is defined by the reported mode.'}</p>
+          {selectsExisting && !selected && <p className="text-theme-text-secondary">Cluster selection has no ray.io/cluster name.</p>}
+          {cluster ? <div className="space-y-1 border-t border-theme-border pt-3">
+            <p className="text-xs text-theme-text-secondary">{selected ? 'Selected existing RayCluster' : 'Reported RayCluster'}</p>
+            <p className="break-all font-medium">{local ? <ResourceLink kind="rayclusters" group="ray.io" namespace={data.metadata.namespace} name={cluster} onNavigate={onNavigate} /> : cluster}</p>
+            {local && <p className="text-xs text-theme-text-secondary">Open the RayCluster for head/worker Pods and their logs.</p>}
+            {selectedClusterEvidence}
+            {selected && status.rayClusterName && selected !== status.rayClusterName && <div className="pt-2"><p className="text-xs text-theme-text-secondary">Last reported runtime differs from the selected cluster</p>{local ? <ResourceLink kind="rayclusters" group="ray.io" namespace={data.metadata.namespace} name={status.rayClusterName} onNavigate={onNavigate} /> : <p>{status.rayClusterName}</p>}</div>}
+          </div> : <p className="text-theme-text-secondary">No runtime cluster reported.</p>}
+          {local && mode === 'K8sJobMode' && <div className="space-y-2 border-t border-theme-border pt-3"><p className="text-xs font-medium text-theme-text-secondary">Observed submitter Job</p>{submitterEvidence ?? <p className="text-theme-text-secondary">Submitter evidence is not available.</p>}</div>}
+        </div>
+      </section>
+    </div>
+    <section className={card} aria-label="RayJob configuration">
+      <h3 className={header}>Job configuration</h3>
+      <div className="space-y-3 p-3 text-sm">
+        <p className="text-xs text-theme-text-secondary">Entrypoint</p>
+        <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-xs">{spec.entrypoint || 'Not specified'}</pre>
+        <div className="grid gap-4 @min-[1024px]/rayjob:grid-cols-2">
+          <PropertyList>
+            {spec.entrypointNumCpus != null && <Property label="Entrypoint CPUs" value={spec.entrypointNumCpus} />}
+            {spec.entrypointNumGpus != null && <Property label="Entrypoint GPUs" value={spec.entrypointNumGpus} />}
+            {spec.entrypointResources && <Property label="Entrypoint custom resources" value={<code className="break-all">{spec.entrypointResources}</code>} />}
+            {spec.backoffLimit != null && <Property label="RayJob retry limit" value={spec.backoffLimit} />}
+            {spec.submitterConfig?.backoffLimit != null && <Property label="Submitter retry limit" value={spec.submitterConfig.backoffLimit} />}
+            {spec.activeDeadlineSeconds != null && <Property label="Active deadline" value={`${spec.activeDeadlineSeconds}s`} />}
+            {spec.preRunningDeadlineSeconds != null && <Property label="Pre-running deadline" value={`${spec.preRunningDeadlineSeconds}s`} />}
+          </PropertyList>
+          <div className="space-y-2 text-theme-text-secondary">
+            <p className="font-medium text-theme-text-primary">Runtime cleanup</p>
+            {selectsExisting ? <p>Runtime cleanup is not applied to a selected existing cluster.</p> : <>
+              {!spec.deletionStrategy && <p>{spec.shutdownAfterJobFinishes === true ? `Cluster shutdown requested after completion${spec.ttlSecondsAfterFinished != null ? ` (TTL ${spec.ttlSecondsAfterFinished}s)` : ''}.` : 'No completion shutdown requested.'}</p>}
+              {spec.deletionStrategy && <Disclosure summary={`Deletion policy${rules.length ? ` · ${rules.length} ${rules.length === 1 ? 'rule' : 'rules'}` : ''}`}>
+                <div className="space-y-2 pt-2">
+                  <p>Requires the operator’s RayJobDeletionPolicy feature gate. These are declared rules, not proof that cleanup occurred.</p>
+                  {rules.map((rule, index) => <p className="break-words" key={index}>{rule.policy} · {rule.condition?.jobStatus ? `Application ${rule.condition.jobStatus}` : `Controller ${rule.condition?.jobDeploymentStatus}`} · TTL {rule.condition?.ttlSeconds ?? 0}s</p>)}
+                  {spec.deletionStrategy.onSuccess && <p>On success: {spec.deletionStrategy.onSuccess.policy}</p>}
+                  {spec.deletionStrategy.onFailure && <p>On failure: {spec.deletionStrategy.onFailure.policy}</p>}
+                </div>
+              </Disclosure>}
+            </>}
+            <p className="text-xs">Operator configuration can affect cleanup. Missing runtime resources do not establish application failure.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+}
+
+function ControllerMessage({ message }: { message: string }) {
+  const text = message.trim()
+  const lines = text.split('\n')
+  const isLong = text.length > 480 || lines.length > 4
+  if (!isLong) return <p className="max-w-3xl whitespace-pre-wrap break-words">{message}</p>
+  return <div className="min-w-0 space-y-2">
+    <p className="max-w-3xl whitespace-pre-wrap break-words">{lines.slice(0, 2).join('\n').slice(0, 240)}{'\n…\n'}{text.slice(-240).split('\n').slice(-1)[0]}</p>
+    <Disclosure summary="Full controller message" summaryClassName="text-xs text-accent-text">
+      <pre tabIndex={0} className="mt-2 max-h-96 overflow-auto whitespace-pre-wrap break-words rounded border border-theme-border bg-theme-base p-3 font-mono text-xs">{message}</pre>
+    </Disclosure>
+  </div>
+}

package/src/components/resources/renderers/ReflectorSection.test.tsx

@@ -225,13 +225,14 @@ describe("Reflector resource hierarchy", () => {
   it("keeps ConfigMap data ahead of detailed settings and source mirror list", () => {
     const html = renderToStaticMarkup(
       <ResourceRendererDispatch
-        kind="configmaps"
         data={{
           ...resource({ "reflection-allowed": "true" }),
           data: { setting: "value" },
         }}
         resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
         relationships={{ reflection: { mirrors: [mirror] } }}
+        onCopy={() => {}}
+        copied={null}
       />,
     );
     expect(html.indexOf("Data (1 keys)")).toBeLessThan(
@@ -242,7 +243,6 @@ describe("Reflector resource hierarchy", () => {
   it("puts TLS expiry and mirror provenance ahead of data, with details below", () => {
     const html = renderToStaticMarkup(
       <ResourceRendererDispatch
-        kind="secrets"
         data={{
           ...resource({ reflects: "source/settings" }),
           type: "kubernetes.io/tls",
@@ -268,6 +268,8 @@ describe("Reflector resource hierarchy", () => {
             ],
           } as any
         }
+        onCopy={() => {}}
+        copied={null}
       />,
     );
     expect(html.indexOf("Certificate has expired")).toBeLessThan(

package/src/components/resources/renderers/RolloutRenderer.test.tsx

@@ -371,7 +371,7 @@ describe('rolloutActions promote reachability', () => {
 
   it('blocks promote, promote-full and skip-step alike on an aborted rollout', () => {
     const data = canaryRollout({ phase: 'Degraded', abort: true, currentStepIndex: 1 })
-    for (const action of ['promote', 'promote-full', 'skip-step']) {
+    for (const action of ['promote', 'promote-full', 'skip-step'] as const) {
       expect(blockedReason(data, action)).toBe('Retry the rollout first')
     }
   })

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useId } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { PolicySection } from './PolicySection'
@@ -131,6 +131,7 @@ function compactHPASummary(diagnosis: HPADiagnosis): string {
 }
 
 export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, workloadPods, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError, namespaceLimitRangeNames }: WorkloadRendererProps) {
+  const titleId = useId()
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -288,13 +289,14 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
       </Section>
 
       {/* Scale Dialog */}
-      <DialogPortal open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
-        <h3 className="text-sm font-medium text-theme-text-primary mb-4">
+      <DialogPortal ariaLabelledBy={titleId} open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
+        <h3 id={titleId} className="text-sm font-medium text-theme-text-primary mb-4">
           Scale {metadata.name}
         </h3>
 
         <div className="flex items-center justify-center gap-4 mb-4">
           <button
+            aria-label="Decrease replicas"
             onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
             className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
             disabled={targetReplicas <= 0}
@@ -307,12 +309,14 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
             min="0"
             max="10000"
             value={targetReplicas}
+            aria-label="Replicas"
             onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
             className="w-20 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-blue-500"
             autoFocus
           />
 
           <button
+            aria-label="Increase replicas"
             onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
             disabled={targetReplicas >= 10000}
             className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"

package/src/components/resources/renderers/index.ts

@@ -190,3 +190,5 @@ export { AdmissionCheckRenderer, ProvisioningRequestRenderer } from './KueueProv
 export { RayServiceRenderer } from './RayServiceRenderer'
 
 export { RayClusterRenderer } from './RayClusterRenderer'
+
+export { RayJobRenderer } from './RayJobRenderer'

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

@@ -1,5 +1,6 @@
 // Kueue + Cluster Autoscaler ProvisioningRequest CRD utility functions
 
+import type { BadgeSeverity } from '../ui/Badge'
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
 
@@ -293,3 +294,16 @@ export function getProvisioningRequestClassName(resource: any): string {
 export function getProvisioningRequestPodSetCount(resource: any): number {
   return (resource?.spec?.podSets || []).length
 }
+
+export function admissionCheckSeverity(state?: string): BadgeSeverity {
+  switch (state) {
+    case 'Ready':
+      return 'success'
+    case 'Rejected':
+      return 'error'
+    case 'Retry':
+      return 'warning'
+    default:
+      return 'neutral'
+  }
+}

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

@@ -63,6 +63,12 @@ export function getRayJobStatus(resource: any): StatusBadge {
     return { text: deploymentStatus, color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  if (['Retrying', 'Suspending', 'Suspended'].includes(deploymentStatus)) {
+    return deploymentStatus === 'Suspended'
+      ? { text: deploymentStatus, color: healthColors.neutral, level: 'neutral' }
+      : { text: deploymentStatus, color: healthColors.degraded, level: 'degraded' }
+  }
+
   switch (jobStatus) {
     case 'SUCCEEDED':
       return { text: 'Succeeded', color: healthColors.neutral, level: 'neutral' }
@@ -77,15 +83,11 @@ export function getRayJobStatus(resource: any): StatusBadge {
   }
 
   switch (deploymentStatus) {
-    case 'Suspended':
-      return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
     case 'Complete':
       return { text: 'Complete', color: healthColors.neutral, level: 'neutral' }
     case 'Running':
       return { text: 'Running', color: healthColors.healthy, level: 'healthy' }
     case 'Initializing':
-    case 'Suspending':
-    case 'Retrying':
     case 'Waiting':
       return { text: deploymentStatus, color: healthColors.degraded, level: 'degraded' }
   }
@@ -184,3 +186,11 @@ export function getRayCronJobLastSchedule(resource: any): string {
   if (!lastSchedule) return '-'
   return formatAge(lastSchedule)
 }
+
+export function rayJobIsLocal(resource: any): boolean {
+  return !resource.spec?.managedBy || resource.spec.managedBy === 'ray.io/kuberay-operator'
+}
+
+export function rayJobSubmissionMode(resource: any): string {
+  return resource.spec?.submissionMode || 'K8sJobMode'
+}

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent } from 'react'
+import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent, useId } from 'react'
 import { AlertTriangle, Check, Loader2, Upload, X } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
@@ -69,6 +69,7 @@ export function CreateResourceDialog({
   schemaLoader,
   onCreated,
 }: CreateResourceDialogProps) {
+  const titleId = useId()
   const [yaml, setYaml] = useState(initialYaml)
   const [mode, setMode] = useState<'apply' | 'create'>('apply')
   const [dryRun, setDryRun] = useState(false)
@@ -363,6 +364,7 @@ export function CreateResourceDialog({
 
   return (
     <DialogPortal
+      ariaLabelledBy={titleId}
       open={open}
       onClose={handleClose}
       closable={!pending}
@@ -374,6 +376,7 @@ export function CreateResourceDialog({
     >
       {preview ? (
         <YamlReview
+          titleId={titleId}
           submittedYaml={preview.yaml}
           documents={preview.documents}
           nonAtomic={preview.nonAtomic}
@@ -393,11 +396,12 @@ export function CreateResourceDialog({
       ) : (
         <>
           <div className="flex shrink-0 items-center justify-between border-b border-theme-border px-5 py-3.5">
-            <h2 className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
+            <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
             <Tooltip content="Close">
               <button
                 type="button"
                 onClick={handleClose}
+                aria-label="Close"
                 className="rounded p-1 text-theme-text-secondary transition-colors hover:bg-theme-hover"
               >
                 <X className="h-4 w-4" />

package/src/components/shared/DrainPlanDialog.test.tsx

@@ -88,6 +88,16 @@ describe('DrainPlanContent', () => {
     )
   }
 
+  it('says a drain plan needs a newer Radar when the cluster predates it', () => {
+    const html = render({
+      planSupported: false,
+      planUpgrade: { feature: 'Drain plans', minimumVersion: 'v1.14.0', currentVersion: 'v1.13.1' },
+    })
+    expect(html).toContain('Drain plans')
+    expect(html).toContain('need Radar v1.14 or newer on this cluster.')
+    expect(html).not.toContain('Computing the plan')
+  })
+
   it('shows per-pod outcomes with reasons and calls the result an estimate', () => {
     const html = render({ plan: plan([pod('web', 'may-block', { pdb: 'shop/web', reason: 'PodDisruptionBudget shop/web currently allows no disruptions' }), pod('agent', 'skip')]) })
     expect(html).toContain('may block')

package/src/components/shared/DrainPlanDialog.tsx

@@ -3,6 +3,8 @@ import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { Badge, type BadgeSeverity } from '../ui/Badge'
 import { AlertBanner } from '../ui/drawer-components'
 import { Tooltip } from '../ui/Tooltip'
+import { RadarUpgradeNote } from '../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { pluralize } from '../../utils/pluralize'
 
 // Shapes returned by POST /api/nodes/{name}/drain-plan.
@@ -102,6 +104,8 @@ interface DrainPlanContentProps {
   options: DrainDialogOptions
   onOptionsChange: (options: DrainDialogOptions) => void
   planSupported: boolean
+  /** Why there is no plan, when the connected Radar predates drain plans. */
+  planUpgrade?: RadarUpgradeRequirement | null
   /** Recompute the plan with the current options; also the retry after a failed plan. */
   onRefreshPlan?: () => void
 }
@@ -112,7 +116,7 @@ interface DrainPlanContentProps {
  * react-dom/server); the enclosing dialog owns the confirm gating.
  */
 export function DrainPlanContent({
-  nodeName, plan, loading, error, options, onOptionsChange, planSupported, onRefreshPlan,
+  nodeName, plan, loading, error, options, onOptionsChange, planSupported, planUpgrade, onRefreshPlan,
 }: DrainPlanContentProps) {
   const current = planMatches(plan, nodeName, options) ? plan : null
   const atRisk = current ? emptyDirPodsAtRisk(current) : []
@@ -140,6 +144,8 @@ export function DrainPlanContent({
         </label>
       </div>
 
+      {!planSupported && planUpgrade && <RadarUpgradeNote requirement={planUpgrade} />}
+
       {planSupported && loading && (
         <div className="flex items-center gap-2 text-theme-text-secondary">
           <Loader2 className="w-4 h-4 animate-spin" /> Computing the plan…
@@ -259,12 +265,14 @@ interface DrainPlanDialogProps {
   isDraining: boolean
   /** Whether the host can compute plans. Without it the dialog confirms without one. */
   planSupported: boolean
+  /** Why there is no plan, when the connected Radar predates drain plans. */
+  planUpgrade?: RadarUpgradeRequirement | null
   /** Recompute the plan with the current options; also the retry after a failed plan. */
   onRefreshPlan?: () => void
 }
 
 export function DrainPlanDialog({
-  open, nodeName, plan, loading, error, options, onOptionsChange, onConfirm, onClose, isDraining, planSupported, onRefreshPlan,
+  open, nodeName, plan, loading, error, options, onOptionsChange, onConfirm, onClose, isDraining, planSupported, planUpgrade, onRefreshPlan,
 }: DrainPlanDialogProps) {
   const confirmEnabled = canConfirmDrain({ plan, nodeName, options, loading, error, planSupported })
 
@@ -274,7 +282,9 @@ export function DrainPlanDialog({
       onClose={onClose}
       onConfirm={() => onConfirm(options)}
       title="Drain Node"
-      message={`Cordon "${nodeName}" and evict the pods listed below. The list is an estimate: the drain re-lists live state when it runs.`}
+      message={planSupported
+        ? `Cordon "${nodeName}" and evict the pods listed below. The list is an estimate: the drain re-lists live state when it runs.`
+        : `Cordon "${nodeName}" and evict its pods.`}
       confirmLabel={isDraining ? 'Draining...' : 'Drain'}
       variant="danger"
       isLoading={isDraining}
@@ -290,6 +300,7 @@ export function DrainPlanDialog({
         options={options}
         onOptionsChange={onOptionsChange}
         planSupported={planSupported}
+        planUpgrade={planUpgrade}
         onRefreshPlan={onRefreshPlan}
       />
     </ConfirmDialog>

package/src/components/shared/ResourceActionsBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useId } from 'react'
 import {
   RefreshCw,
   Terminal,
@@ -25,6 +25,7 @@ import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { AlertBanner } from '../ui/drawer-components'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { displayKindName } from '../ui/drawer-components'
 import { getDefaultContainerName } from '../resources/resource-utils'
 import { SetImageDialog, type ManagedImageSource } from './SetImageDialog'
@@ -143,10 +144,12 @@ interface ResourceActionsBarProps {
   drainPlan?: DrainPlan | null
   isPlanningDrain?: boolean
   drainPlanError?: string | null
-  // The connected backend has no drain-plan endpoint (version skew, e.g. a newer
-  // frontend against an older radar). The dialog falls back to the plan-less
-  // acknowledgement-only mode instead of keeping Drain disabled on a dead request.
-  drainPlanUnsupported?: boolean
+  // The connected Radar predates the drain-plan endpoint (a newer frontend
+  // against an older Radar). The dialog falls back to the plan-less
+  // acknowledgement-only mode instead of keeping Drain disabled on a dead
+  // request, and names the Radar version that serves plans so the user knows a
+  // preview exists.
+  drainPlanUpgrade?: RadarUpgradeRequirement | null
 }
 
 export function ResourceActionsBar({
@@ -177,7 +180,7 @@ export function ResourceActionsBar({
   onCordonNode, isCordoningNode,
   onUncordonNode, isUncordoningNode,
   onDrainNode, isDrainingNode,
-  onPlanDrain, onPlanDrainReset, drainPlan, isPlanningDrain, drainPlanError, drainPlanUnsupported,
+  onPlanDrain, onPlanDrainReset, drainPlan, isPlanningDrain, drainPlanError, drainPlanUpgrade,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
   const coreBatchJob = isCoreBatchJob(kind, resource.group)
@@ -202,13 +205,14 @@ export function ResourceActionsBar({
   // open: the host reports it through a mutation error, which the next request clears,
   // so without latching every option change would refire a request known to 404 and
   // bounce the dialog out of its fallback mode.
-  const [planUnsupported, setPlanUnsupported] = useState(false)
+  const [planUpgrade, setPlanUpgrade] = useState<RadarUpgradeRequirement | null>(null)
   useEffect(() => {
-    if (drainPlanUnsupported) setPlanUnsupported(true)
-  }, [drainPlanUnsupported])
+    if (drainPlanUpgrade) setPlanUpgrade(drainPlanUpgrade)
+  }, [drainPlanUpgrade])
   useEffect(() => {
-    if (!showDrainConfirm) setPlanUnsupported(false)
+    if (!showDrainConfirm) setPlanUpgrade(null)
   }, [showDrainConfirm])
+  const planUnsupported = planUpgrade !== null
   const planSupported = Boolean(onPlanDrain) && !planUnsupported
 
   // Fetch (and refetch on option changes) the read-only plan while the drain dialog is open.
@@ -719,6 +723,7 @@ export function ResourceActionsBar({
         options={drainOptions}
         onOptionsChange={setDrainOptions}
         planSupported={planSupported}
+        planUpgrade={planUpgrade}
         onRefreshPlan={planSupported ? () => onPlanDrain?.({ name: resource.name, options: drainOptions }) : undefined}
         isDraining={Boolean(isDrainingNode)}
         onClose={() => {
@@ -1053,6 +1058,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
   isRollingBack?: boolean
   onRolloutPromoteFull?: (params: { namespace: string; name: string }) => void | Promise<unknown>
 }) {
+  const titleId = useId()
   const [confirmRevision, setConfirmRevision] = useState<number | null>(null)
   const [diffRevision, setDiffRevision] = useState<number | null>(null)
   const [promoteAfterRollback, setPromoteAfterRollback] = useState(false)
@@ -1144,6 +1150,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
 
   return (
     <DialogPortal
+      ariaLabelledBy={titleId}
       open={open}
       onClose={handleClose}
       closable={!busy}
@@ -1152,7 +1159,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
       <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
         <div className="flex items-center gap-2">
           <History className="w-5 h-5 text-amber-500" />
-          <h3 className="text-lg font-semibold text-theme-text-primary">Revision History</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">Revision History</h3>
           {diffRevision && currentRevision && (
             <span className="badge ml-2 bg-blue-500/15 text-blue-400">
               <GitCompare className="w-3 h-3" />

package/src/components/shared/ResourceRendererDispatch.test.tsx

@@ -315,11 +315,9 @@ describe('getResourceStatus — colliding plurals', () => {
   // fine; being scored with Argo's vocabulary is not, because that attaches a
   // HealthLevel derived from a phase Katib never reports.
   it('does not score a Katib Experiment with the Argo vocabulary', () => {
-    const katib = getResourceStatus('experiments', {
-      apiVersion: 'kubeflow.org/v1beta1',
-      status: { conditions: [{ type: 'Running', status: 'True' }] },
-    })
-    expect(katib?.level).toBeUndefined()
+    const katib = { apiVersion: 'kubeflow.org/v1beta1', status: { conditions: [{ type: 'Running', status: 'True' }] } }
+    // Read the way any unrelated CRD with the same status would be.
+    expect(getResourceStatus('experiments', katib)).toEqual(getResourceStatus('trainingruns', katib))
   })
 
   it('fabricates no engine status for a third-party backups CRD', () => {
@@ -1080,3 +1078,12 @@ it('uses native RayCluster detail only for ray.io/v1', () => {
     if (apiVersion !== 'ray.io/v1') expect(html).toContain('2.55.0')
   }
 })
+
+it('uses RayJob native detail only for the supported exact API', () => {
+  for (const apiVersion of ['ray.io/v1', 'foreign.io/v1', 'ray.io/v99', 'ray.io/v1alpha1']) {
+    const data = { apiVersion, kind: 'RayJob', metadata: { name: 'train', namespace: 'ml' }, spec: { customField: 'native-fallback' } }
+    const html = renderKind('rayjobs', data, 'ml')
+    expect(html.includes('RayJob execution')).toBe(apiVersion === 'ray.io/v1')
+    if (apiVersion !== 'ray.io/v1') { expect(html).toContain('native-fallback'); expect(getResourceStatus('rayjobs', data)).toBeNull() }
+  }
+})