@skyhook-io/k8s-ui 1.14.4 → 1.14.5

package/src/components/charts/index.ts

@@ -6,6 +6,7 @@ export {
   WORKLOAD_METRIC_CATEGORIES,
   NODE_METRIC_CATEGORIES,
   METRIC_TIME_RANGES,
+  describePodCoverage,
 } from './PrometheusChartsView'
 export type {
   PrometheusChartsViewProps,
@@ -14,13 +15,14 @@ export type {
   MetricCategoryDef,
   PrometheusResourceMetricsResult,
 } from './PrometheusChartsView'
-export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels } from './colors'
+export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels, seriesDisplayLabels } from './colors'
 export { formatMetricValue, formatTimestamp } from './format'
 export { computeSaturation } from './saturation'
 export type {
   TimeSeriesPoint,
   TimeSeries,
   ReferenceLine,
+  ChartAnnotation,
   // Deprecated Prom-prefixed aliases — see types.ts.
   PrometheusDataPoint,
   PrometheusSeries,

package/src/components/charts/types.ts

@@ -35,3 +35,15 @@ export interface ReferenceLine {
   label: string
   kind: 'request' | 'limit'
 }
+
+/**
+ * Vertical marker on a chart at one instant. `kind` names what Radar recorded
+ * there; the chart draws the marker and its label and never implies that the
+ * marked instant explains the series around it.
+ */
+export interface ChartAnnotation {
+  /** Unix seconds, the same clock as {@link TimeSeriesPoint.timestamp}. */
+  timestamp: number
+  label: string
+  kind: 'change'
+}

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>
+  );
+}

package/src/components/resources/index.ts

@@ -1,5 +1,12 @@
 export * from './resource-utils'
 export * from './resource-utils-hpa'
+export {
+  HPADiagnosisSummary,
+  hpaBadgeSeverity,
+  hpaReasonGroups,
+  isHPAReasonRedundant,
+} from './HPADiagnosisSummary'
+export type { HPADiagnosisSummaryProps, HPAReasonGroups } from './HPADiagnosisSummary'
 export * from './resource-utils-argo'
 export * from './resource-utils-certmanager'
 export * from './resource-utils-cnpg'

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

@@ -2,11 +2,11 @@ import type { ReactNode } from 'react'
 import { Activity, Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink, type ConditionTone } from '../../ui/drawer-components'
-import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import { Badge } from '../../ui/Badge'
 import { kindToPlural } from '../../../utils/navigation'
 import { formatAge } from '../resource-utils'
-import { hpaStateLabel, hpaStateLevel } from '../resource-utils-hpa'
-import type { HPADiagnosis, HPADiagnosisState } from '../../../types'
+import { HPADiagnosisSummary } from '../HPADiagnosisSummary'
+import type { HPADiagnosis } from '../../../types'
 
 interface HPARendererProps {
   data: any
@@ -16,23 +16,6 @@ interface HPARendererProps {
   extraSections?: ReactNode
 }
 
-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'
-  }
-}
-
 function hpaConditionTone(condition: any): ConditionTone | undefined {
   if (condition?.type === 'ScaledToZero') {
     if (condition.status === 'False') return 'ok'
@@ -50,14 +33,6 @@ function hpaConditionTone(condition: any): ConditionTone | undefined {
   return 'warning'
 }
 
-function formatReasonID(id: string): string {
-  return id.replace(/_/g, ' ')
-}
-
-function isReasonMessageRedundant(state: HPADiagnosisState, reason: NonNullable<HPADiagnosis['reasons']>[number]): boolean {
-  return state === 'limited_max' && reason.id === 'limited_max'
-}
-
 export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: HPARendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
@@ -67,35 +42,7 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
     <>
       {hpaDiagnosis && (
         <Section title="Diagnosis" icon={Activity}>
-          <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">{hpaDiagnosis.summary}</div>
-                <div className="mt-1 text-xs text-theme-text-secondary">
-                  {hpaDiagnosis.bounds.current}/{hpaDiagnosis.bounds.desired} replicas, bounds {hpaDiagnosis.bounds.min}-{hpaDiagnosis.bounds.max}
-                </div>
-              </div>
-              <Badge severity={hpaBadgeSeverity(hpaDiagnosis.state)}>{hpaStateLabel(hpaDiagnosis.state)}</Badge>
-            </div>
-            {hpaDiagnosis.reasons && hpaDiagnosis.reasons.length > 0 && (
-              <div className="space-y-2">
-                {hpaDiagnosis.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>}
-                      {reason.detail && <span className="text-theme-text-tertiary">{reason.detail}</span>}
-                    </div>
-                    {!isReasonMessageRedundant(hpaDiagnosis.state, reason) && (
-                      <div className="mt-1 text-xs text-theme-text-secondary">{reason.message}</div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+          <HPADiagnosisSummary diagnosis={hpaDiagnosis} variant="detail" />
         </Section>
       )}
 

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

@@ -6,11 +6,12 @@ import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
-import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import { Badge } from '../../ui/Badge'
 import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef, HPADiagnosis, WorkloadPodInfo } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
-import { hpaStateLabel, hpaStateLevel } from '../resource-utils-hpa'
+import { hpaStateLabel } from '../resource-utils-hpa'
+import { hpaBadgeSeverity } from '../HPADiagnosisSummary'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -407,29 +408,12 @@ function ScalerDiagnosisRow({ entry }: { entry: ScalerDiagnosis }) {
   if (!entry.diagnosis) return null
   return (
     <div className="rounded border border-theme-border bg-theme-surface px-2 py-1.5 text-xs leading-6 text-theme-text-secondary whitespace-normal break-normal">
-      <Badge severity={badgeSeverityForHPA(entry.diagnosis)} size="sm" className="mr-1.5 align-middle">{hpaStateLabel(entry.diagnosis.state)}</Badge>
+      <Badge severity={hpaBadgeSeverity(entry.diagnosis.state)} size="sm" className="mr-1.5 align-middle">{hpaStateLabel(entry.diagnosis.state)}</Badge>
       <span className="align-middle whitespace-normal break-normal">{compactHPASummary(entry.diagnosis)}</span>
     </div>
   )
 }
 
-function badgeSeverityForHPA(diagnosis: HPADiagnosis): BadgeSeverity {
-  switch (hpaStateLevel(diagnosis.state)) {
-    case 'healthy':
-      return 'success'
-    case 'unhealthy':
-      return 'error'
-    case 'degraded':
-      return 'warning'
-    case 'alert':
-      return 'alert'
-    case 'neutral':
-      return 'info'
-    default:
-      return 'neutral'
-  }
-}
-
 // ============================================================================
 // WORKLOAD PERMISSIONS SECTION
 // ============================================================================

package/src/components/topology/K8sResourceNode.test.ts

@@ -9,6 +9,15 @@ describe('baseSubtitle', () => {
     expect(baseSubtitle('ServiceMonitor', { endpointCount: 1 })).toBe('1 scrape endpoint')
   })
 
+  it('describes a Service by its first port, capping additional ports to a count', () => {
+    expect(baseSubtitle('Service', { type: 'ClusterIP', ports: [] })).toBe('ClusterIP')
+    expect(baseSubtitle('Service', { type: 'ClusterIP', ports: [{ port: 80 }] })).toBe('ClusterIP :80')
+    expect(baseSubtitle('Service', {
+      type: 'ClusterIP',
+      ports: [{ port: 80 }, { port: 443 }, { port: 9153 }],
+    })).toBe('ClusterIP :80 +2 more')
+  })
+
   it('describes a Calico staged deletion as a removal, not as selecting everything', () => {
     // A staged deletion carries no selector, because the Calico API forbids one.
     // Falling through to the empty-selector default would label the broadest