@skyhook-io/k8s-ui 1.10.4 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -89,7 +89,7 @@
   },
   "devDependencies": {
     "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
@@ -98,10 +98,10 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.28.0",
     "monaco-editor": "0.55.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^6.0.2",
     "vitest": "^4.1.10",
     "yaml": "^2.9.0"

package/src/components/applications/ApplicationDetail.test.tsx

@@ -207,6 +207,52 @@ describe("ApplicationDetail shell", () => {
     expect(html).not.toContain("Application views");
   });
 
+  // A controlled host's only way to say "no workload in the URL" is null, so
+  // without this the application scope a single-workload app must not have
+  // becomes the default for every URL-driven host.
+  it("opens the workload directly for controlled single-workload apps with no workload in the URL", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const html = renderDetail({
+      app: singleApp,
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("Application views");
+    expect(html).not.toContain('aria-haspopup="listbox"');
+  });
+
+  it("keeps workload scope for a controlled single-workload app whose URL names a workload it no longer has", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const html = renderDetail({
+      app: singleApp,
+      selectedWorkloadKey: workloadKey(app.workloads[1]),
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("Application views");
+  });
+
+  it("keeps application scope for a controlled multi-workload app with no workload in the URL", () => {
+    const html = renderDetail({
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Application views");
+    expect(html).not.toContain("Runtime for");
+  });
+
   it("renders one filtered application chronology with workload and source actions", () => {
     const html = renderDetail({
       selectedView: "history",

package/src/components/applications/ApplicationDetail.tsx

@@ -71,6 +71,7 @@ import {
   sourceReportedHealth,
   sourceSyncHealth,
   servingReadiness,
+  resolveAppWorkloadSelection,
   worstHealth,
   appGroupLagMessage,
   compareVersions,
@@ -122,9 +123,10 @@ export interface AppIdentityInstance {
 
 /** Workload selection is either fully controlled (key + callback, the host
  *  wires it to the URL so back/forward works) or fully internal — providing
- *  only half silently freezes the selector, so the types forbid it. `null` means
- *  the application itself is selected; a key (see `workloadKey`) selects a
- *  workload scope. */
+ *  only half silently freezes the selector, so the types forbid it. A key (see
+ *  `workloadKey`) selects a workload scope; `null` asks for application scope,
+ *  which a single-workload app does not have — there the component resolves to
+ *  the sole workload regardless. See `rawSelected`. */
 type SelectionProps =
   | {
       selectedWorkloadKey: string | null;
@@ -407,12 +409,13 @@ export function ApplicationDetail({
   }, [app.key, selectedView]);
 
   const [internalSelected, setInternalSelected] = useState<string | null>(null);
-  const implicitSingleWorkloadKey =
-    workloads.length === 1 ? workloadKey(workloads[0]) : null;
-  const rawSelected =
-    selectedWorkloadKey !== undefined
-      ? selectedWorkloadKey
-      : (internalSelected ?? implicitSingleWorkloadKey);
+  const hostSelected =
+    selectedWorkloadKey !== undefined ? selectedWorkloadKey : internalSelected;
+  const { selected: rawSelected, hostKeyIsStale } = useMemo(
+    () =>
+      resolveAppWorkloadSelection(workloads.map(workloadKey), hostSelected),
+    [workloads, hostSelected],
+  );
   const setSelected = useCallback(
     (key: string | null, options?: AppWorkloadSelectionOptions) =>
       onSelectWorkload
@@ -425,14 +428,10 @@ export function ApplicationDetail({
     : undefined;
   const singleWorkloadScope = workloads.length === 1 && !!selectedWorkload;
   useEffect(() => {
-    if (
-      selectedWorkloadKey !== undefined &&
-      selectedWorkloadKey !== null &&
-      !selectedWorkload
-    ) {
+    if (selectedWorkloadKey !== undefined && hostKeyIsStale) {
       onSelectWorkload?.(null);
     }
-  }, [selectedWorkloadKey, selectedWorkload, onSelectWorkload]);
+  }, [selectedWorkloadKey, hostKeyIsStale, onSelectWorkload]);
   useEffect(() => {
     if (selectedWorkloadKey === undefined) setInternalSelected(null);
   }, [app.key, selectedWorkloadKey]);

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}