@skyhook-io/k8s-ui 1.14.4 → 1.14.6

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

@@ -20,10 +20,11 @@ import { PaneLoader } from '../../ui/PaneLoader'
 import { Input } from '../../ui/Input'
 import { clsx } from 'clsx'
 
-import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
+import type { GitOpsIssue, GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
 import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
+import { radarHealthNote } from '../health-provenance'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
@@ -64,6 +65,22 @@ interface GitOpsTreeGraphProps {
   onQueryChange?: (query: string) => void
   filters?: GitOpsTreeFilters
   showToolbar?: boolean
+  // Root-cause issues from the same detail page's insights fetch (already
+  // loaded alongside the tree — no extra request). Matched onto tree nodes
+  // by ref so an unhealthy node's hover reveals WHY, not just THAT.
+  issues?: GitOpsIssue[]
+}
+
+// refKey builds a stable lookup key from either a tree ref or an insight
+// ref. Namespace is omitted for cluster-scoped resources on both sides, so
+// normalize the missing case the same way instead of using `undefined` vs
+// `''` as accidentally distinct keys. Group is included for the same
+// reason CLAUDE.md calls out elsewhere (Knative Service vs core Service,
+// CNPG Cluster vs CAPI Cluster) — kind+namespace+name alone collides across
+// a real, documented class of same-plural CRDs, which would show one
+// resource's cause/tooltip on a completely unrelated node.
+function refKey(ref: { group?: string; kind: string; namespace?: string; name: string }): string {
+  return `${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
 }
 
 export function GitOpsTreeGraph(props: GitOpsTreeGraphProps) {
@@ -85,6 +102,7 @@ function GitOpsTreeGraphInner({
   onQueryChange,
   filters,
   showToolbar = true,
+  issues,
 }: GitOpsTreeGraphProps) {
   const [internalPreset, setInternalPreset] = useState<GitOpsTreePreset>('compact')
   const [internalQuery, setInternalQuery] = useState('')
@@ -104,7 +122,20 @@ function GitOpsTreeGraphInner({
   useEffect(() => {
     if (preset !== 'compact') setExpandedGroups(new Set())
   }, [preset])
-  const { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups), [tree, preset, query, filters, expandedGroups])
+  const causeByRef = useMemo(() => {
+    const map = new Map<string, string>()
+    for (const issue of issues ?? []) {
+      const cause = issue.cause
+      const ref = issue.refs?.[0]
+      if (!cause || !ref) continue
+      const key = refKey(ref)
+      // First match wins — issues arrive ranked by severity, so a node
+      // that's the subject of multiple issues keeps its most severe cause.
+      if (!map.has(key)) map.set(key, cause)
+    }
+    return map
+  }, [issues])
+  const { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups, causeByRef), [tree, preset, query, filters, expandedGroups, causeByRef])
 
   useEffect(() => {
     if (nodes.length === 0) return
@@ -297,7 +328,7 @@ function getEdgeColor(type: string): string {
   }
 }
 
-function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>): { nodes: Node[]; edges: Edge[] } {
+function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, string>): { nodes: Node[]; edges: Edge[] } {
   if (!tree) return { nodes: [], edges: [] }
   const visibleTree = applyGraphFilters(applyPreset(tree, preset, expandedGroups), filters)
   const byID = new Map(visibleTree.nodes.map(node => [node.id, node]))
@@ -321,6 +352,7 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
       data: {
         node,
         highlighted: normalizedQuery !== '' && matchesQuery(node, normalizedQuery),
+        cause: causeByRef?.get(refKey(node.ref)),
       },
     }
   })
@@ -543,7 +575,7 @@ function positionRanks(ranks: Map<number, string[]>, nodes: Map<string, GitOpsTr
   return positioned
 }
 
-const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean }>>) {
+const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: string }>>) {
   const node = data.node
   const kind = normalizeDisplayKind(node)
   const status = normalizeHealth(node.topologyStatus)
@@ -552,10 +584,16 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
   const KindIcon = getTopologyIcon(kind)
-
-  return (
-    <>
-      <Handle type="target" position={Position.Left} className="!h-0 !w-0 !border-0 !bg-transparent" />
+  // Only unhealthy nodes carry a cause worth surfacing — a healthy node
+  // matched by a stale/unrelated issue ref shouldn't show a tooltip.
+  const cause = status === 'unhealthy' || status === 'degraded' ? data.cause : undefined
+  // Only declared resources can carry the controller's verdict, so only
+  // there does "this one is Radar's" mean anything. Generated children
+  // (ReplicaSets, Pods) are always Radar's read; marking each would be
+  // noise.
+  const radarNote = node.role === 'declared' ? radarHealthNote(node) : ''
+
+  const card = (
       <div
         className={clsx(
           'relative overflow-hidden rounded-lg border bg-theme-surface shadow-md transition-colors',
@@ -636,10 +674,23 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
                   {chip.label ? `${chip.label}: ` : ''}{chip.value}
                 </span>
               ))}
+              {radarNote && (
+                <Tooltip content={radarNote} delay={200}>
+                  <span className="rounded border border-theme-border bg-theme-elevated/70 px-1.5 py-0.5 text-[10px] leading-3 text-theme-text-tertiary">
+                    Found by Radar
+                  </span>
+                </Tooltip>
+              )}
             </div>
           )}
         </div>
       </div>
+  )
+
+  return (
+    <>
+      <Handle type="target" position={Position.Left} className="!h-0 !w-0 !border-0 !bg-transparent" />
+      {cause ? <Tooltip content={cause} delay={200}>{card}</Tooltip> : card}
       <Handle type="source" position={Position.Right} className="!h-0 !w-0 !border-0 !bg-transparent" />
     </>
   )

package/src/components/gitops/tree/merge.test.ts

@@ -41,6 +41,40 @@ function destNode(
 }
 
 describe('mergeGitOpsTrees', () => {
+  // Health provenance follows the health value: when the destination's live
+  // health replaces the controller's, its source/reason/message come along;
+  // a destination node with no health leaves the controller's provenance.
+  test('health provenance travels with whichever health wins', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+        ctrlNode('dep1', 'Deployment', 'web', 'prod', { health: 'Healthy', healthSource: 'controller' }),
+        ctrlNode('css1', 'ClusterSecretStore', 'platform', '', { health: 'Degraded', healthSource: 'radar', healthReason: 'Ready: Bad', healthMessage: 'no route' }),
+      ],
+      edges: [],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+        destNode('dest-dep1', 'Deployment', 'web', 'prod', { health: 'Degraded', healthSource: 'radar', healthReason: 'CrashLoopBackOff', healthMessage: 'back-off' }),
+        destNode('dest-css1', 'ClusterSecretStore', 'platform', ''),
+      ],
+      edges: [],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    const dep = merged.nodes.find((n) => n.ref.kind === 'Deployment')!
+    expect(dep.health).toBe('Degraded')
+    expect(dep.healthSource).toBe('radar')
+    expect(dep.healthReason).toBe('CrashLoopBackOff')
+    expect(dep.healthMessage).toBe('back-off')
+    const css = merged.nodes.find((n) => n.ref.kind === 'ClusterSecretStore')!
+    expect(css.health).toBe('Degraded')
+    expect(css.healthSource).toBe('radar')
+    expect(css.healthReason).toBe('Ready: Bad')
+  })
+
   // The classic in-cluster case — caller didn't fetch a destination tree
   // (single-cluster app) so destination is null. Returning the controller
   // tree unchanged is what preserves Argo's status + summary tile counts

package/src/components/gitops/tree/merge.ts

@@ -85,10 +85,17 @@ export function mergeGitOpsTrees(
   // resource-viewer routing.
   const nodes: GitOpsTreeNode[] = controller.nodes.map((n) => {
     const dest = destByKey.get(refKey(n.ref))
+    // Health provenance travels with the health it describes: when the
+    // destination's live health wins, so do its source/reason/message.
+    const healthFrom = dest?.health ? dest : n
     const merged = dest
       ? {
           ...n,
           health: dest.health ?? n.health,
+          healthSource: healthFrom.healthSource,
+          healthReason: healthFrom.healthReason,
+          healthMessage: healthFrom.healthMessage,
+          healthSeverity: healthFrom.healthSeverity,
           info: dest.info ?? n.info,
           topologyStatus: dest.topologyStatus ?? n.topologyStatus,
         }

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

@@ -0,0 +1,178 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import {
+  HPADiagnosisSummary,
+  hpaBadgeSeverity,
+  hpaReasonGroups,
+  isHPAReasonRedundant,
+} from "./HPADiagnosisSummary";
+import type { HPADiagnosisState, HPADiagnosisView } from "../../types";
+
+// React marks interpolation boundaries with empty comments; strip them so
+// assertions can quote the sentence a reader actually sees.
+const render = (node: Parameters<typeof renderToString>[0]) =>
+  renderToString(node).replace(/<!-- -->/g, "");
+
+const maxed: HPADiagnosisView = {
+  state: "limited_max",
+  summary: "HPA wants more replicas but is capped at maxReplicas=10",
+  bounds: { min: 1, max: 10, current: 10, desired: 10 },
+  reasons: [
+    {
+      id: "limited_max",
+      message: "HPA is capped at maxReplicas=10",
+      detail:
+        "the desired replica count is more than the maximum replica count",
+      conditionType: "ScalingLimited",
+      conditionReason: "TooManyReplicas",
+    },
+    {
+      id: "missing_current_metric",
+      message: "HPA is missing current metric values",
+      detail: "cpu",
+    },
+  ],
+};
+
+describe("hpaBadgeSeverity", () => {
+  const expected: Record<HPADiagnosisState, string> = {
+    ok: "success",
+    scaling_up: "warning",
+    scaling_down: "warning",
+    limited_max: "warning",
+    metrics_incomplete: "warning",
+    limited_min: "info",
+    scaled_to_zero: "info",
+    disabled: "info",
+    pinned: "info",
+    stabilized: "info",
+    metrics_unavailable: "error",
+    unable_to_scale: "error",
+    stale: "neutral",
+    unknown: "neutral",
+  };
+
+  it.each(Object.entries(expected))(
+    "maps %s to the %s badge",
+    (state, severity) => {
+      expect(hpaBadgeSeverity(state as HPADiagnosisState)).toBe(severity);
+    },
+  );
+});
+
+describe("isHPAReasonRedundant", () => {
+  it("treats the reason that named the state as a restatement", () => {
+    expect(isHPAReasonRedundant(maxed, maxed.reasons![0])).toBe(true);
+  });
+
+  it("treats a reason whose message repeats the summary as a restatement", () => {
+    const echo = { id: "other", message: maxed.summary };
+    expect(isHPAReasonRedundant(maxed, echo)).toBe(true);
+  });
+
+  it("keeps a reason that adds something the headline does not", () => {
+    expect(isHPAReasonRedundant(maxed, maxed.reasons![1])).toBe(false);
+  });
+
+  it("splits reasons into restatements and additions", () => {
+    const groups = hpaReasonGroups(maxed);
+    expect(groups.redundant.map((reason) => reason.id)).toEqual([
+      "limited_max",
+    ]);
+    expect(groups.additional.map((reason) => reason.id)).toEqual([
+      "missing_current_metric",
+    ]);
+  });
+});
+
+describe("HPADiagnosisSummary", () => {
+  it("shows the detail variant evidence without repeating the headline", () => {
+    const html = render(
+      <HPADiagnosisSummary diagnosis={maxed} variant="detail" />,
+    );
+
+    expect(html).toContain(
+      "HPA wants more replicas but is capped at maxReplicas=10",
+    );
+    expect(html).toContain("10/10 replicas, bounds 1-10");
+    expect(html).toContain("Maxed");
+    expect(html).toContain("Evidence");
+    expect(html).toContain("limited max");
+    expect(html).toContain("ScalingLimited");
+    expect(html).toContain("TooManyReplicas");
+    expect(html).not.toContain("HPA is capped at maxReplicas=10");
+    expect(html).toContain("HPA is missing current metric values");
+  });
+
+  // `detail` is the controller's sentence only on a condition-built reason.
+  // On the others it is Radar's own — a metric-name list, a note about an
+  // unobserved generation — and quoting it as Kubernetes invents a quote.
+  it("never attributes Radar's own detail to Kubernetes", () => {
+    const radarDetail: HPADiagnosisView = {
+      state: "stale_status",
+      summary: "HPA status has not observed the latest spec generation yet",
+      bounds: { min: 1, max: 10, current: 3, desired: 3 },
+      reasons: [
+        {
+          id: "stale_status",
+          message: "HPA status has not observed the latest spec generation yet",
+          detail: "the controller has recorded no status for generation 7",
+        },
+        {
+          id: "missing_current_metric",
+          message:
+            "HPA status is missing current values for one or more configured metrics",
+          detail: "cpu, memory",
+        },
+      ],
+    } as unknown as HPADiagnosisView;
+
+    for (const variant of ["detail", "inline"] as const) {
+      const html = render(
+        <HPADiagnosisSummary diagnosis={radarDetail} variant={variant} />,
+      );
+      expect(html, variant).toContain(
+        "the controller has recorded no status for generation 7",
+      );
+      expect(html, variant).toContain("cpu, memory");
+      expect(html, variant).not.toContain("Kubernetes");
+    }
+  });
+
+  it("attributes the controller condition in the inline variant and lists the rest", () => {
+    const html = render(
+      <HPADiagnosisSummary
+        diagnosis={maxed}
+        variant="inline"
+        header={
+          <span data-testid="host-header">HorizontalPodAutoscaler api-hpa</span>
+        }
+      />,
+    );
+
+    expect(html).toContain("HorizontalPodAutoscaler api-hpa");
+    expect(html).toContain("Maxed");
+    expect(html).toContain("10/10 replicas · bounds 1-10");
+    expect(html).toContain(
+      "HPA wants more replicas but is capped at maxReplicas=10",
+    );
+    expect(html).not.toContain("HPA is capped at maxReplicas=10");
+    expect(html).toContain(
+      "Kubernetes ScalingLimited · TooManyReplicas: “the desired replica count is more than the maximum replica count”",
+    );
+    expect(html).toContain("HPA is missing current metric values");
+    expect(html).toContain("· cpu");
+  });
+
+  it("omits the bounds line when the producer withheld bounds", () => {
+    const html = render(
+      <HPADiagnosisSummary
+        diagnosis={{ state: "ok", summary: "HPA is tracking its target" }}
+        variant="inline"
+      />,
+    );
+
+    expect(html).toContain("HPA is tracking its target");
+    expect(html).not.toContain("replicas");
+  });
+});

package/src/components/resources/HPADiagnosisSummary.tsx

@@ -0,0 +1,218 @@
+import type { ReactNode } from "react";
+import { Badge, type BadgeSeverity } from "../ui/Badge";
+import { StatusDot } from "../ui/status-tone";
+import { hpaStateLabel, hpaStateLevel } from "./resource-utils-hpa";
+import type {
+  HPADiagnosisState,
+  HPADiagnosisView,
+  HPAReasonSummary,
+} from "../../types";
+
+export function hpaBadgeSeverity(state: HPADiagnosisState): BadgeSeverity {
+  switch (hpaStateLevel(state)) {
+    case "healthy":
+      return "success";
+    case "unhealthy":
+      return "error";
+    case "degraded":
+      return "warning";
+    case "alert":
+      return "alert";
+    case "neutral":
+      return "info";
+    default:
+      return "neutral";
+  }
+}
+
+/**
+ * A reason that named the state, or repeats the summary verbatim, says the
+ * headline over again — only the controller's own sentence behind it (the
+ * reason's detail) adds anything a reader does not already have.
+ */
+export function isHPAReasonRedundant(
+  diagnosis: HPADiagnosisView,
+  reason: HPAReasonSummary,
+): boolean {
+  return reason.id === diagnosis.state || reason.message === diagnosis.summary;
+}
+
+export interface HPAReasonGroups {
+  /** Reasons whose message restates the headline; render their detail, not their message. */
+  redundant: HPAReasonSummary[];
+  /** Reasons that carry something the headline does not. */
+  additional: HPAReasonSummary[];
+}
+
+export function hpaReasonGroups(diagnosis: HPADiagnosisView): HPAReasonGroups {
+  const reasons = diagnosis.reasons ?? [];
+  const redundant = reasons.filter((reason) =>
+    isHPAReasonRedundant(diagnosis, reason),
+  );
+  return {
+    redundant,
+    additional: reasons.filter((reason) => !redundant.includes(reason)),
+  };
+}
+
+function formatReasonID(id: string): string {
+  return id.replace(/_/g, " ");
+}
+
+export interface HPADiagnosisSummaryProps {
+  diagnosis: HPADiagnosisView;
+  /**
+   * `detail` — the HPA detail page: a boxed Evidence block per reason.
+   * `inline` — an evidence card on the workload the HPA scales: the headline
+   * once, then the controller's condition quoted and attributed.
+   */
+  variant: "detail" | "inline";
+  /**
+   * Host-rendered identity for the `inline` variant (the scaler's name, owner
+   * links) placed before the state indicator. Navigation stays with the host.
+   */
+  header?: ReactNode;
+}
+
+export function HPADiagnosisSummary({
+  diagnosis,
+  variant,
+  header,
+}: HPADiagnosisSummaryProps) {
+  const { redundant, additional } = hpaReasonGroups(diagnosis);
+  const bounds = diagnosis.bounds;
+
+  if (variant === "inline") {
+    return (
+      <div className="space-y-1 text-xs">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          {header}
+          <span className="inline-flex items-center gap-1.5 text-theme-text-secondary">
+            <StatusDot
+              tone={hpaStateLevel(diagnosis.state)}
+              className="shrink-0"
+            />
+            {hpaStateLabel(diagnosis.state)}
+          </span>
+          {bounds ? (
+            <span className="font-mono tabular-nums text-theme-text-tertiary">
+              {bounds.current}/{bounds.desired} replicas · bounds {bounds.min}-
+              {bounds.max}
+            </span>
+          ) : null}
+        </div>
+        <p className="text-theme-text-secondary">{diagnosis.summary}</p>
+        {redundant.map((reason) =>
+          reason.detail ? (
+            <p
+              key={`${reason.id}-${reason.detail}`}
+              className="text-theme-text-tertiary"
+            >
+              {/* Same rule as the detail variant: only a condition-built
+                  reason carries the controller's own sentence. */}
+              {reason.conditionType ? (
+                <>
+                  Kubernetes {reason.conditionType}
+                  {reason.conditionReason ? ` · ${reason.conditionReason}` : ""}
+                  : &ldquo;{reason.detail}&rdquo;
+                </>
+              ) : (
+                reason.detail
+              )}
+            </p>
+          ) : null,
+        )}
+        {additional.length > 0 ? (
+          <ul className="list-disc space-y-0.5 pl-4 text-theme-text-secondary marker:text-theme-text-tertiary">
+            {additional.map((reason) => (
+              <li key={`${reason.id}-${reason.message}`}>
+                {reason.message}
+                {reason.detail ? (
+                  <span className="text-theme-text-tertiary">
+                    {" "}
+                    · {reason.detail}
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    );
+  }
+
+  const reasons = diagnosis.reasons ?? [];
+  return (
+    <div className="card-inner space-y-3">
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-sm font-medium text-theme-text-primary">
+            {diagnosis.summary}
+          </div>
+          {bounds ? (
+            <div className="mt-1 text-xs text-theme-text-secondary">
+              {bounds.current}/{bounds.desired} replicas, bounds {bounds.min}-
+              {bounds.max}
+            </div>
+          ) : null}
+        </div>
+        <Badge severity={hpaBadgeSeverity(diagnosis.state)}>
+          {hpaStateLabel(diagnosis.state)}
+        </Badge>
+      </div>
+      {reasons.length > 0 && (
+        <div className="space-y-2">
+          {reasons.map((reason) => (
+            <div
+              key={`${reason.id}-${reason.message}`}
+              className="rounded border border-theme-border bg-theme-surface p-2"
+            >
+              <div className="flex flex-wrap items-center gap-2 text-xs">
+                <span className="font-medium text-theme-text-primary">
+                  Evidence
+                </span>
+                <span className="text-theme-text-tertiary">
+                  {formatReasonID(reason.id)}
+                </span>
+                {reason.conditionType && (
+                  <span className="text-theme-text-tertiary">
+                    {reason.conditionType}
+                  </span>
+                )}
+                {reason.conditionReason && (
+                  <span className="text-theme-text-tertiary">
+                    {reason.conditionReason}
+                  </span>
+                )}
+              </div>
+              {/* Radar's reading leads, as the reason is built to; the
+                  controller's own sentence follows it, quoted and attributed
+                  the same way the inline variant attributes it. Unlabelled
+                  beside the condition chips, it read as Radar's words. */}
+              {!isHPAReasonRedundant(diagnosis, reason) && (
+                <div className="mt-1 text-xs text-theme-text-secondary">
+                  {reason.message}
+                </div>
+              )}
+              {reason.detail &&
+                // `detail` is the controller's own sentence only on a reason
+                // built from a condition, which is the only kind that carries
+                // a condition type. Elsewhere it is Radar's — a list of metric
+                // names, a note about an unobserved generation — and quoting
+                // that as Kubernetes would put words in its mouth.
+                (reason.conditionType ? (
+                  <p className="mt-1 text-xs text-theme-text-tertiary">
+                    Kubernetes: &ldquo;{reason.detail}&rdquo;
+                  </p>
+                ) : (
+                  <p className="mt-1 text-xs text-theme-text-tertiary">
+                    {reason.detail}
+                  </p>
+                ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}