@skyhook-io/k8s-ui 1.8.7 → 1.8.9

package/src/components/issues/diagnostic.ts

@@ -42,11 +42,33 @@ export function diagnosticFactLabel(type: string): string {
       return 'Affected workloads';
     case 'pvc_blast_radius':
       return 'Blocked pods';
+    case 'apiservice_hpa':
+      return 'Stalled autoscalers';
+    case 'secret_not_ready':
+      return 'Dependent pods';
     default:
       return type.replace(/_/g, ' ');
   }
 }
 
+// Operator-facing lead-in for the symptom→root pointer chip. Honest per fact
+// type: a declared PVC/Secret edge is a cause; a co-located node is only
+// "related" (node pressure can be a shared victim, not the root), so it must not
+// claim "caused by".
+export function incidentParentLabel(factType?: string, confidence?: string): string {
+  switch (factType) {
+    case 'pvc_blast_radius':
+    case 'secret_not_ready':
+      return 'Caused by';
+    case 'apiservice_hpa':
+      return 'Likely cause';
+    case 'node_blast_radius':
+      return 'Related';
+    default:
+      return confidence === 'high' ? 'Caused by' : 'Possible cause';
+  }
+}
+
 // Plain-language gloss for the confidence chip's tooltip — the operator should
 // know a medium link is "these are co-located, the node may be the cause", not a
 // proven fact.

package/src/components/issues/index.ts

@@ -12,7 +12,7 @@ export {
   subjectRef,
   memberRef,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

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

@@ -1,6 +1,9 @@
 import { describe, it, expect } from 'vitest'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
 import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
 import { categoryLabel, groupLabel, groupBadgeClass } from './severity'
+import { IssueRow } from './IssuesView'
 
 const base: Issue = {
   id: 'id-0',
@@ -105,3 +108,21 @@ describe('image-pull message normalization', () => {
     expect(parts.detail).toBe('')
   })
 })
+
+describe('IssueRow diagnosis raw messages', () => {
+  it('shows raw_message when cleaned issue copy has no parsed cause', () => {
+    const issue = mk({
+      category: 'gitops_operation_failed',
+      category_group: 'configuration',
+      severity: 'critical',
+      reason: 'OperationFailed',
+      message: 'app path does not exist',
+      raw_message: 'rpc error: code = Unknown desc = app path does not exist',
+    })
+
+    const html = renderToString(createElement(IssueRow, { issue, open: true, onToggle: () => undefined, as: 'div' }))
+
+    expect(html).toContain('app path does not exist')
+    expect(html).toContain('rpc error: code = Unknown desc = app path does not exist')
+  })
+})

package/src/components/issues/types.ts

@@ -71,10 +71,26 @@ export interface IssueDiagnosticIssueRef {
   reason?: string;
   category?: string;
   severity?: IssueSeverity;
+  /** How many affected resources fold into this linked issue from the root's
+   *  perspective (e.g. 5 of a PVC's mounting pods under one Deployment issue).
+   *  Absent when the link covers a single resource. */
+  count?: number;
 }
 
 export type IssueDiagnosticConfidence = 'high' | 'medium' | 'low';
 
+/** Reverse pointer from a symptom issue to the root issue that explains it
+ *  (the inverse of diagnostic_context's root→symptom facts). Set only when a
+ *  single root is unambiguous. `ref` is the parent subject for display + deep
+ *  navigation (thread the issue's cluster_id onto it via memberRef). */
+export interface IssueIncidentParent {
+  id: string;
+  ref: IssueResourceRef;
+  category?: string;
+  confidence?: IssueDiagnosticConfidence;
+  fact_type?: string;
+}
+
 export interface IssueDiagnosticFact {
   type: string;
   message?: string;
@@ -158,6 +174,7 @@ export interface Issue {
 
   reason: string;
   message?: string;
+  raw_message?: string;
   /** Parsed domain diagnosis: plain-English cause, suggested next step, and
    *  an optional structured one-click fix.
    *  Server-emitted (omitempty); empty for issues without a parser. */
@@ -182,6 +199,7 @@ export interface Issue {
   members?: IssueResourceRef[];
   members_truncated?: boolean;
   diagnostic_context?: IssueDiagnosticContext;
+  incident_parent?: IssueIncidentParent;
   change_context?: IssueChangeContext;
 
   // Pod crash context carried from the representative member.

package/src/components/namespace-switcher/NamespacePicker.tsx

@@ -0,0 +1,381 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+
+/**
+ * Backend-reported namespace scope. Mirrors Radar's `/cluster/namespace-scope`
+ * response shape; the host supplies it however it fetches it (OSS via its API
+ * hooks, Radar Hub via the per-cluster apiBase).
+ */
+export interface NamespaceScopeView {
+  /** Currently-selected namespaces. Empty = cluster-wide ("All namespaces"). */
+  actives: string[]
+  /** Namespaces the user may pick from. */
+  accessibleNamespaces: string[]
+  mode?: 'cluster-wide' | 'namespace' | 'restricted' | string
+  /** Single-namespace cache-scope control instead of a multi-select filter. */
+  cacheScoped?: boolean
+  /** Under cacheScoped, whether the user may re-point the watched namespace. */
+  namespaceRescope?: boolean
+  cacheScopeNamespace?: string
+  kubeconfigNamespace?: string
+  canClearNamespace?: boolean
+  /** false when accessibleNamespaces is a best-effort short list (no list perm). */
+  authoritative?: boolean
+}
+
+export interface NamespacePickerHandle {
+  open: () => void
+}
+
+export interface NamespacePickerProps {
+  /** null/undefined while loading — the picker renders nothing until it arrives. */
+  scope: NamespaceScopeView | null | undefined
+  /**
+   * Applied when the selection is committed (dropdown close / clear all).
+   * The picker only calls this when the selection actually changed and is
+   * valid (respects the cacheScoped single-namespace constraint).
+   */
+  onApply: (namespaces: string[]) => void
+  loading?: boolean
+  /** A switch/mutation is in flight — trigger shows "Switching…" and is inert. */
+  pending?: boolean
+  disabled?: boolean
+  disabledTooltip?: string
+  className?: string
+  /**
+   * 'chip' (default) renders a self-contained pill. 'segment' renders a
+   * borderless label+value cell for embedding in a shared bordered container
+   * (the unified cluster+namespace scope control), with an optional muted
+   * {@link label} before the value and a shorter value ("All" vs "All namespaces").
+   */
+  variant?: 'chip' | 'segment'
+  /** Muted label shown before the value in the 'segment' variant (e.g. "Namespace"). */
+  label?: string
+}
+
+/**
+ * NamespacePicker is the presentational namespace scope control shared by
+ * Radar OSS and Radar Hub (mirrors the ClusterSwitcher pattern — pure UI, data
+ * injected via props). It is normally a per-user multi-select view filter. When
+ * the scope reports cacheScoped=true, it becomes a single-namespace cache scope
+ * control.
+ *
+ * Three states reflect what the scope reports:
+ *   - cluster-wide: empty trigger label "All namespaces"; picker lets the user
+ *     narrow the view.
+ *   - namespace:    label shows the namespace count (or single name); picker
+ *     offers other accessible namespaces and a clear-all reset.
+ *   - restricted:   user can't list namespaces and isn't pinned; picker
+ *     surfaces only the kubeconfig context's namespace + any saved picks.
+ *
+ * Selection model: the dropdown keeps a draft Set<string>; toggling rows
+ * mutates the draft locally; closing the dropdown applies the draft in a single
+ * onApply. "Clear all" applies immediately and closes.
+ */
+export const NamespacePicker = forwardRef<NamespacePickerHandle, NamespacePickerProps>(function NamespacePicker(
+  { scope, onApply, loading = false, pending = false, disabled = false, disabledTooltip, className = '', variant = 'chip', label },
+  ref,
+) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+  const [draft, setDraft] = useState<Set<string>>(() => new Set())
+
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
+  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
+
+  // Sync the draft with the server's view whenever it changes (initial load,
+  // post-mutation refetch, eviction after RBAC drift).
+  useEffect(() => {
+    setDraft(new Set(scopeActives))
+  }, [activesKey, scopeActives])
+
+  // Fully disable when the host disables the control (e.g. view-awareness
+  // navigating to a cluster-scoped surface): the trigger is inert and open()
+  // is blocked, but an already-open dropdown would still commit via Done /
+  // outside-click / Clear all — so close it (discarding the uncommitted draft)
+  // rather than letting a dead view apply a namespace change.
+  useEffect(() => {
+    if (disabled && isOpen) {
+      setIsOpen(false)
+      setSearch('')
+      // Discard the uncommitted draft so a later re-open reflects the current
+      // server actives, not stale toggles from before the control was disabled.
+      setDraft(new Set(scopeActives))
+    }
+  }, [disabled, isOpen, scopeActives])
+
+  const items = useMemo(() => {
+    if (!scope) return [] as string[]
+    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
+  }, [scope])
+
+  const filteredItems = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(n => n.toLowerCase().includes(q))
+  }, [items, search])
+
+  const applySelection = useCallback((next: Set<string>) => {
+    if (!scope) return
+    const nextArr = Array.from(next).sort()
+    if (scope.cacheScoped && nextArr.length !== 1) return
+    if (nextArr.join(',') === activesKey) return
+    onApply(nextArr)
+  }, [activesKey, scope, onApply])
+
+  const closeAndApply = useCallback(() => {
+    setIsOpen(false)
+    setSearch('')
+    applySelection(draft)
+  }, [applySelection, draft])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (disabled || loading || pending) return
+      setIsOpen(true)
+    },
+  }), [disabled, loading, pending])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const trigger = triggerRef.current
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (
+        !dropdownRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        closeAndApply()
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') closeAndApply()
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [isOpen, closeAndApply])
+
+  if (!scope) return null
+
+  const toggle = (ns: string) => {
+    if (scope.cacheScoped) {
+      setDraft(new Set([ns]))
+      return
+    }
+    const next = new Set(draft)
+    if (next.has(ns)) next.delete(ns)
+    else next.add(ns)
+    setDraft(next)
+  }
+
+  const clearAll = () => {
+    if (scope.cacheScoped) return
+    setDraft(new Set())
+    setIsOpen(false)
+    setSearch('')
+    applySelection(new Set())
+  }
+
+  const selectAllVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.add(ns)
+    setDraft(next)
+  }
+
+  const clearVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.delete(ns)
+    setDraft(next)
+  }
+
+  const activeCount = scopeActives.length
+  const triggerLabel =
+    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
+  const isClusterWide = activeCount === 0
+  const restrictedHint = scope.mode === 'restricted'
+  const cacheScopeLocked = scope.cacheScoped && !scope.namespaceRescope
+  const isDisabled = disabled || loading || pending || cacheScopeLocked
+  const canClearAll = scope.canClearNamespace || activeCount === 0
+  const tooltipContent = disabled && disabledTooltip
+    ? disabledTooltip
+    : scope.cacheScoped
+      ? scope.namespaceRescope
+        ? `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} to stay fast on large clusters. Pick another namespace to re-point it (takes a moment; closes open terminals).`
+        : `Radar is watching only ${scope.cacheScopeNamespace || triggerLabel} on this cluster.`
+      : restrictedHint
+      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
+      : isClusterWide
+        ? 'Currently viewing all namespaces. Click to narrow the view.'
+        : activeCount === 1
+          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
+          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
+
+  // Counts used to label the bulk-action buttons; computed against the visible
+  // (filtered) set so the labels match what the action will affect.
+  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
+  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
+
+  return (
+    <>
+      <Tooltip
+        content={tooltipContent}
+        delay={300}
+        position="bottom"
+      >
+        <button
+          ref={triggerRef}
+          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
+          disabled={isDisabled}
+          className={
+            variant === 'segment'
+              ? `flex items-center justify-center gap-1.5 px-3 py-1.5 h-full min-w-[110px] max-w-[200px] text-[13px] text-theme-text-primary hover:bg-theme-hover disabled:opacity-60 transition-colors ${className}`
+              : `flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`
+          }
+          aria-label="Switch active namespaces"
+        >
+          {label && (
+            <span className="shrink-0 font-normal text-theme-text-tertiary">{label}</span>
+          )}
+          {isClusterWide ? (
+            <Globe className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
+          ) : restrictedHint ? (
+            <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-theme-text-tertiary" />
+          ) : null}
+          <span className={`font-medium truncate ${variant === 'segment' ? 'min-w-0' : 'max-w-[180px]'}`}>
+            {pending ? 'Switching…' : triggerLabel}
+          </span>
+          <ChevronDown className="w-3 h-3 shrink-0 opacity-60" />
+        </button>
+      </Tooltip>
+
+      {isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
+            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
+          >
+            {items.length > 6 && (
+              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
+                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  autoFocus
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  placeholder="Filter namespaces"
+                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
+                />
+              </div>
+            )}
+
+            {scope.cacheScoped ? (
+              <div className="px-3 py-1.5 border-b border-theme-border text-[11px] leading-snug text-theme-text-secondary">
+                Radar is watching one namespace to stay fast on large clusters.
+                {scope.namespaceRescope
+                  ? ' Pick another to re-point it — takes a moment and closes open terminals.'
+                  : ' This instance is locked to its startup namespace.'}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
+                <button
+                  onClick={canClearAll ? clearAll : undefined}
+                  disabled={!canClearAll || activeCount === 0}
+                  className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                  aria-label="Clear namespace selection"
+                >
+                  <X className="w-3 h-3" />
+                  Clear all
+                </button>
+                <button
+                  onClick={allVisibleSelected ? clearVisible : selectAllVisible}
+                  disabled={filteredItems.length === 0}
+                  className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                >
+                  {allVisibleSelected
+                    ? `Clear ${filteredItems.length} visible`
+                    : search.trim()
+                      ? `Select ${filteredItems.length} visible`
+                      : 'Select all'}
+                </button>
+              </div>
+            )}
+
+            <ul className="max-h-80 overflow-y-auto py-1">
+              {filteredItems.length === 0 && (
+                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
+                  {search ? 'No matches.' : 'No namespaces available.'}
+                </li>
+              )}
+
+              {filteredItems.map(ns => {
+                const isChecked = draft.has(ns)
+                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
+                return (
+                  <li key={ns}>
+                    <label
+                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2 min-w-0">
+                        <input
+                          type={scope.cacheScoped ? 'radio' : 'checkbox'}
+                          name={scope.cacheScoped ? 'namespace-cache-scope' : undefined}
+                          checked={isChecked}
+                          onChange={() => toggle(ns)}
+                          className="shrink-0 accent-current"
+                        />
+                        <span className="truncate">{ns}</span>
+                        {isContextDefault && (
+                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                            kubeconfig
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+
+            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+              <span>
+                {scope.cacheScoped
+                  ? (draft.size === 1 ? Array.from(draft)[0] : 'Select a namespace')
+                  : draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
+              </span>
+              <button
+                onClick={closeAndApply}
+                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+              >
+                Done
+              </button>
+            </div>
+
+            {!scope.authoritative && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
+                Limited list — your RBAC doesn&rsquo;t allow listing all
+                namespaces. Other namespaces may be accessible but won&rsquo;t
+                appear here until you switch context.
+              </div>
+            )}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+})

package/src/components/namespace-switcher/index.ts

@@ -0,0 +1,6 @@
+export { NamespacePicker } from './NamespacePicker'
+export type {
+  NamespacePickerProps,
+  NamespacePickerHandle,
+  NamespaceScopeView,
+} from './NamespacePicker'