@skyhook-io/radar-app 1.14.2 → 1.14.4

package/src/components/diagnose/investigationEvidence/bodies/metrics.tsx

@@ -0,0 +1,373 @@
+import {
+  Badge,
+  TerminalBlock,
+  formatRelativeAgeTime,
+} from "@skyhook-io/k8s-ui";
+import {
+  AreaChart,
+  SERIES_COLORS,
+  SeriesLegend,
+  formatMetricValue,
+  seriesDisplayLabels,
+  seriesFill,
+  type TimeSeries,
+} from "@skyhook-io/k8s-ui/components/charts";
+import {
+  metricsDomain,
+  type MetricsChangeCoverage,
+} from "../../investigationMetrics";
+import { Tooltip } from "../../../ui/Tooltip";
+import { type EvidenceDataOf, severityBadge } from "../cardParts";
+
+const METRICS_AXIS_LABEL_MAX_CHARS = 72;
+
+function finiteSamples(series: TimeSeries): TimeSeries["dataPoints"] {
+  return series.dataPoints.filter((point) => typeof point.value === "number");
+}
+
+function MetricsValueTable({
+  series,
+  labels,
+  unit,
+  withTime,
+}: {
+  series: TimeSeries[];
+  /** Display name per series, derived from the complete result. */
+  labels: string[];
+  unit: string;
+  withTime: boolean;
+}) {
+  return (
+    <table className="w-full text-xs">
+      <tbody>
+        {series.map((item, index) => {
+          const sample = finiteSamples(item).at(-1);
+          return (
+            <tr
+              key={`${labels[index]}-${index}`}
+              className="border-b border-theme-border/60 last:border-b-0"
+            >
+              <td className="py-1 pr-3 font-mono text-theme-text-secondary [overflow-wrap:anywhere]">
+                {labels[index]}
+              </td>
+              {withTime ? (
+                <td className="py-1 pr-3 text-right text-theme-text-tertiary tabular-nums">
+                  {sample
+                    ? new Date(sample.timestamp * 1000).toLocaleTimeString()
+                    : ""}
+                </td>
+              ) : null}
+              <td className="py-1 text-right font-mono tabular-nums text-theme-text-primary">
+                {sample && typeof sample.value === "number"
+                  ? formatMetricValue(sample.value, unit)
+                  : "no value"}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export function MetricsBody({
+  data,
+  changeCoverage,
+}: {
+  data: EvidenceDataOf<"metrics">;
+  changeCoverage?: MetricsChangeCoverage;
+}) {
+  const annotations = changeCoverage?.markers;
+  const unit = data.unit ?? "";
+  const axisLabel = data.label ?? data.query;
+  const axisTruncated = axisLabel.length > METRICS_AXIS_LABEL_MAX_CHARS;
+  const axisText = axisTruncated
+    ? `${axisLabel.slice(0, METRICS_AXIS_LABEL_MAX_CHARS - 1)}…`
+    : axisLabel;
+  const domain = metricsDomain(data);
+  const windowText = domain
+    ? `${new Date(domain.start * 1000).toLocaleString()} to ${new Date(domain.end * 1000).toLocaleString()}`
+    : undefined;
+  if (data.series.length === 0) {
+    return (
+      <div className="space-y-2">
+        <p className="text-xs text-theme-text-secondary">
+          No series matched this query
+          {data.mode === "range" ? " in the window" : ""}.
+        </p>
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+        {data.note ? (
+          <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+        ) : null}
+      </div>
+    );
+  }
+  if (data.mode === "instant") {
+    return (
+      <div className="space-y-2">
+        <MetricsValueTable
+          series={data.series}
+          labels={seriesDisplayLabels(data.series)}
+          unit={unit}
+          withTime={false}
+        />
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+        {data.note ? (
+          <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+        ) : null}
+      </div>
+    );
+  }
+  // Names come from the whole result so two series that differ only by a
+  // label the chart would hide stay distinguishable wherever they are listed.
+  const labels = seriesDisplayLabels(data.series);
+  const indexed = data.series.map((item, index) => ({
+    item,
+    label: labels[index],
+    finite: finiteSamples(item).length,
+  }));
+  // A series with one finite sample has no line to draw, and one with none
+  // (Prometheus serializes NaN and infinities as gaps) has nothing to show.
+  // Listing both keeps what was captured readable and states what was not.
+  const charted = indexed.filter((entry) => entry.finite >= 2);
+  const single = indexed.filter((entry) => entry.finite === 1);
+  const empty = indexed.filter((entry) => entry.finite === 0);
+  return (
+    <div className="space-y-2">
+      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs">
+        <Tooltip
+          content={axisLabel}
+          delay={200}
+          position="top"
+          disabled={!axisTruncated}
+        >
+          <span
+            className="min-w-0 truncate font-mono text-theme-text-secondary"
+            data-testid="investigation-metrics-axis-label"
+          >
+            {axisText}
+          </span>
+        </Tooltip>
+        {unit ? (
+          <span className="text-theme-text-tertiary">({unit})</span>
+        ) : null}
+        {windowText ? (
+          <span className="ml-auto text-theme-text-tertiary">{windowText}</span>
+        ) : null}
+      </div>
+      {charted.length > 0 ? (
+        <div className="space-y-1.5 rounded-md border border-theme-border/70 bg-theme-base/30 p-2">
+          <AreaChart
+            series={charted.map((entry) => entry.item)}
+            seriesLabels={charted.map((entry) => entry.label)}
+            color={SERIES_COLORS[0]}
+            fillColor={seriesFill(0, SERIES_COLORS[0])}
+            unit={unit}
+            annotations={annotations}
+            domain={domain}
+            layout="auto"
+          />
+          {charted.length > 1 ? (
+            <SeriesLegend
+              series={charted.map((entry) => entry.item)}
+              seriesLabels={charted.map((entry) => entry.label)}
+              color={SERIES_COLORS[0]}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {single.length > 0 ? (
+        <div
+          className="space-y-1"
+          data-testid="investigation-metrics-sparse-series"
+        >
+          <p className="text-xs text-theme-text-tertiary">
+            {single.length === 1
+              ? "1 series has a single sample in this window, listed with its time:"
+              : `${single.length} series have a single sample in this window, listed with their times:`}
+          </p>
+          <MetricsValueTable
+            series={single.map((entry) => entry.item)}
+            labels={single.map((entry) => entry.label)}
+            unit={unit}
+            withTime
+          />
+        </div>
+      ) : null}
+      {empty.length > 0 ? (
+        <p
+          className="text-xs text-theme-text-tertiary [overflow-wrap:anywhere]"
+          data-testid="investigation-metrics-empty-series"
+        >
+          {empty.length === 1
+            ? "1 series had no usable samples in this window: "
+            : `${empty.length} series had no usable samples in this window: `}
+          <span className="font-mono">
+            {empty.map((entry) => entry.label).join("; ")}
+          </span>
+        </p>
+      ) : null}
+      {changeCoverage?.checked && charted.length > 0 ? (
+        <p className="text-xs text-theme-text-tertiary">
+          {annotations?.length === 1
+            ? "1 change recorded in this window is marked on the chart."
+            : annotations?.length
+              ? `${annotations.length} changes recorded in this window are marked on the chart.`
+              : // Only that the changes Radar read miss this window — not that
+                // the window was fully covered. The change lookup has its own
+                // window, which need not span the chart's.
+                "None of the changes Radar read fall in this window."}
+        </p>
+      ) : null}
+      {axisTruncated ? (
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+      ) : null}
+      {data.note ? (
+        <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+      ) : null}
+    </div>
+  );
+}
+
+const VISIBLE_ALERT_LABELS = 6;
+
+function alertStateSeverity(state: string | undefined) {
+  switch ((state ?? "").toLowerCase()) {
+    case "firing":
+      return "error" as const;
+    case "pending":
+      return "warning" as const;
+    case "inactive":
+      return "success" as const;
+    default:
+      return "neutral" as const;
+  }
+}
+
+export function AlertsBody({ data }: { data: EvidenceDataOf<"alerts"> }) {
+  const { rule, instances, annotations } = data;
+  const health = rule.health?.toLowerCase();
+  // Target instances lead; the rest stay visible in producer order.
+  const ordered = [...instances].sort(
+    (left, right) => Number(right.namesTarget) - Number(left.namesTarget),
+  );
+  const annotationEntries = Object.entries(annotations);
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        {rule.state ? (
+          <Badge severity={alertStateSeverity(rule.state)} size="sm">
+            {rule.state}
+          </Badge>
+        ) : null}
+        {rule.labels.severity ? (
+          <Badge severity={severityBadge(rule.labels.severity)} size="sm">
+            severity {rule.labels.severity}
+          </Badge>
+        ) : null}
+        <Badge tone="structural" size="sm">
+          {rule.group}
+        </Badge>
+        {health && health !== "ok" ? (
+          <Badge severity={health === "err" ? "error" : "neutral"} size="sm">
+            health {health}
+          </Badge>
+        ) : null}
+      </div>
+      {ordered.length > 0 ? (
+        <ol className="max-h-64 space-y-1.5 overflow-y-auto pr-1">
+          {ordered.map((instance, index) => {
+            const labels = Object.entries(instance.labels).filter(
+              ([key]) => key !== "alertname" && key !== "severity",
+            );
+            const hidden = labels.length - VISIBLE_ALERT_LABELS;
+            return (
+              <li
+                key={`${instance.state}-${index}-${labels.map(([k, v]) => `${k}=${v}`).join(",")}`}
+                className="rounded-md border border-theme-border/70 bg-theme-base/30 px-2.5 py-2"
+              >
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <Badge
+                    severity={alertStateSeverity(instance.state)}
+                    size="sm"
+                  >
+                    {instance.state}
+                  </Badge>
+                  {instance.namesTarget ? (
+                    <Badge severity="info" size="sm">
+                      names this resource
+                    </Badge>
+                  ) : null}
+                  {instance.value ? (
+                    <span className="font-mono text-xs text-theme-text-secondary">
+                      value {instance.value}
+                    </span>
+                  ) : null}
+                  {instance.activeAt ? (
+                    <Tooltip
+                      content={new Date(instance.activeAt).toLocaleString()}
+                      delay={150}
+                      position="left"
+                      wrapperClassName="ml-auto"
+                    >
+                      <time
+                        dateTime={instance.activeAt}
+                        className="text-xs text-theme-text-tertiary"
+                      >
+                        active {formatRelativeAgeTime(instance.activeAt)}
+                      </time>
+                    </Tooltip>
+                  ) : null}
+                </div>
+                {labels.length > 0 ? (
+                  <div className="mt-1.5 flex flex-wrap gap-1 font-mono text-[11px] text-theme-text-secondary">
+                    {labels
+                      .slice(0, VISIBLE_ALERT_LABELS)
+                      .map(([key, value]) => (
+                        <span
+                          key={key}
+                          className="rounded bg-theme-base px-1.5 py-0.5 [overflow-wrap:anywhere]"
+                        >
+                          {key}={value}
+                        </span>
+                      ))}
+                    {hidden > 0 ? (
+                      <span className="px-1 py-0.5 text-theme-text-tertiary">
+                        +{hidden} more
+                      </span>
+                    ) : null}
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ol>
+      ) : (
+        <p className="text-xs italic text-theme-text-tertiary">
+          No active instances were reported for this rule.
+        </p>
+      )}
+      {annotationEntries.length > 0 ? (
+        <dl className="space-y-1 text-xs">
+          {annotationEntries.map(([key, value]) => (
+            <div key={key} className="flex min-w-0 gap-2">
+              <dt className="shrink-0 text-theme-text-tertiary">{key}</dt>
+              <dd className="min-w-0 leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+                {value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {rule.query ? (
+        <TerminalBlock label="Rule expression">{rule.query}</TerminalBlock>
+      ) : null}
+    </div>
+  );
+}

package/src/components/diagnose/investigationEvidence/bodies/network.tsx

@@ -0,0 +1,274 @@
+import { useContext } from "react";
+import { AlertTriangle } from "lucide-react";
+import { Badge, StatusDot, ResourceLink } from "@skyhook-io/k8s-ui";
+import { EvidenceNavigationContext } from "../navigation";
+import { type EvidenceDataOf, severityBadge } from "../cardParts";
+
+export function DNSBody({ data }: { data: EvidenceDataOf<"dns"> }) {
+  const { onOpenResource } = useContext(EvidenceNavigationContext);
+  return (
+    <div className="space-y-2">
+      {(data.dns.signals ?? []).map((signal) => (
+        <p
+          key={signal}
+          className="text-xs leading-relaxed text-theme-text-secondary"
+        >
+          {signal}
+        </p>
+      ))}
+      {(data.dns.coreDNSFindings ?? []).map((finding) => (
+        <div
+          key={`${finding.kind}-${finding.namespace}-${finding.name}-${finding.reason}`}
+          className="rounded-md border border-theme-border bg-theme-base/40 p-2"
+        >
+          <div className="flex flex-wrap gap-1.5">
+            <Badge tone="structural" size="sm">
+              {finding.kind}
+            </Badge>
+            <span className="font-mono text-xs">
+              <ResourceLink
+                name={finding.name}
+                kind={finding.kind}
+                namespace={finding.namespace}
+                group=""
+                label={`${finding.namespace}/${finding.name}`}
+                onNavigate={
+                  finding.kind.toLowerCase() === "configmap" && onOpenResource
+                    ? (ref) => onOpenResource(ref)
+                    : undefined
+                }
+              />
+            </span>
+            <Badge severity={severityBadge(finding.severity)} size="sm">
+              {finding.severity}
+            </Badge>
+          </div>
+          <p className="mt-1 text-xs text-theme-text-secondary">
+            {finding.reason}
+            {finding.message ? ` — ${finding.message}` : ""}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function NetworkBody({ data }: { data: EvidenceDataOf<"network"> }) {
+  const { network } = data;
+  const stats = [
+    ["Tested", network.summary.tested],
+    ["Passed", network.summary.passed],
+    ["Failed", network.summary.failed],
+    ["Inferred", network.summary.derived ?? 0],
+    ["Skipped", network.summary.skipped],
+  ] as const;
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-3 gap-1.5 @min-[620px]/evidence:grid-cols-5">
+        {stats.map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-md border border-theme-border bg-theme-base/40 px-2 py-1.5 text-center"
+          >
+            <div className="font-mono text-sm font-semibold text-theme-text-primary">
+              {value}
+            </div>
+            <div className="text-xs uppercase tracking-wide text-theme-text-tertiary">
+              {label}
+            </div>
+          </div>
+        ))}
+      </div>
+      {network.diagnosis ? (
+        <div className="rounded-md border border-theme-border bg-theme-base/40 px-2.5 py-2">
+          <p className="text-xs font-medium leading-relaxed text-theme-text-primary">
+            {network.diagnosis.summary}
+          </p>
+          {network.diagnosis.nextAction ? (
+            <p className="mt-1 border-l-2 border-accent/50 pl-2 text-xs leading-relaxed text-theme-text-secondary">
+              Next check: {network.diagnosis.nextAction}
+            </p>
+          ) : null}
+        </div>
+      ) : (
+        <p className="text-xs leading-relaxed text-theme-text-secondary">
+          {network.summary.headline}
+        </p>
+      )}
+      {network.routes.length > 0 ? (
+        <ol className="max-h-64 space-y-1.5 overflow-y-auto pr-1">
+          {network.routes.map((route, index) => (
+            <li
+              key={`${route.route}-${route.target ?? ""}-${index}`}
+              className="flex min-w-0 items-start gap-2 rounded-md border border-theme-border/70 bg-theme-base/30 px-2.5 py-2"
+            >
+              <StatusDot
+                tone={networkOutcomeTone(route.outcome, route.benign)}
+                className="mt-1 shrink-0"
+              />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-mono text-xs text-theme-text-primary">
+                  {route.route}
+                  {route.target ? ` → ${route.target}` : ""}
+                </span>
+                {route.evidence ? (
+                  <span className="mt-0.5 block text-xs leading-relaxed text-theme-text-secondary">
+                    {route.evidence}
+                  </span>
+                ) : null}
+              </span>
+              <Badge
+                severity={networkOutcomeSeverity(route.outcome, route.benign)}
+                size="sm"
+              >
+                {route.benign
+                  ? "intentional"
+                  : route.outcome.replaceAll("_", " ")}
+              </Badge>
+            </li>
+          ))}
+        </ol>
+      ) : null}
+    </div>
+  );
+}
+
+function networkOutcomeTone(
+  outcome: string,
+  benign?: boolean,
+): "healthy" | "degraded" | "unhealthy" | "unknown" {
+  if (benign) return "degraded";
+  const normalized = outcome.toLowerCase();
+  if (normalized.includes("verified") || normalized.includes("reached"))
+    return "healthy";
+  if (normalized.includes("fail") || normalized.includes("unreachable"))
+    return "unhealthy";
+  if (normalized.includes("skip") || normalized.includes("not"))
+    return "unknown";
+  return "degraded";
+}
+
+function networkOutcomeSeverity(outcome: string, benign?: boolean) {
+  switch (networkOutcomeTone(outcome, benign)) {
+    case "healthy":
+      return "success" as const;
+    case "degraded":
+      return "warning" as const;
+    case "unhealthy":
+      return "error" as const;
+    case "unknown":
+      return "neutral" as const;
+  }
+}
+
+export function RelationshipsBody({
+  data,
+}: {
+  data: EvidenceDataOf<"relationships">;
+}) {
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Badge tone="structural" size="sm">
+          {data.root.kind}
+        </Badge>
+        <span className="font-mono text-xs text-theme-text-secondary">
+          {data.root.namespace ? `${data.root.namespace}/` : ""}
+          {data.root.name}
+        </span>
+        <span className="text-xs text-theme-text-tertiary">
+          {data.nodes.length} resources · {data.edges.length} direct
+          relationships
+        </span>
+      </div>
+      <div className="max-h-44 overflow-y-auto pr-1">
+        <div className="flex flex-wrap gap-1.5">
+          {data.nodes.map((node) => (
+            <span
+              key={node.id}
+              className="inline-flex items-center gap-1 rounded-md border border-theme-border bg-theme-base px-2 py-1 text-xs"
+            >
+              <Badge tone="structural" size="sm">
+                {node.kind}
+              </Badge>
+              <span className="font-mono text-theme-text-secondary">
+                {node.name}
+              </span>
+            </span>
+          ))}
+        </div>
+      </div>
+      {data.edges.length > 0 ? (
+        <div className="grid max-h-52 gap-1 overflow-y-auto pr-1 @min-[680px]/evidence:grid-cols-2">
+          {data.edges.map((edge, index) => (
+            <div
+              key={
+                edge.id ?? `${edge.source}-${edge.target}-${edge.type}-${index}`
+              }
+              className="flex min-w-0 items-center gap-1.5 rounded bg-theme-base/50 px-2 py-1.5 font-mono text-xs text-theme-text-secondary"
+            >
+              <span className="truncate">{edge.source}</span>
+              <span className="shrink-0 text-theme-text-tertiary">→</span>
+              <span className="truncate">{edge.target}</span>
+              <Badge tone="structural" size="sm">
+                {edge.label || edge.type}
+              </Badge>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function TopologyBody({ data }: { data: EvidenceDataOf<"topology"> }) {
+  return (
+    <div className="space-y-2.5">
+      <div className="grid grid-cols-2 gap-2">
+        <TopologyStat label="Nodes" value={data.stats.nodes} />
+        <TopologyStat label="Relationships" value={data.stats.edges} />
+      </div>
+      {data.problems.map((problem) => (
+        <p
+          key={problem}
+          className="flex items-start gap-1.5 text-xs text-warning-text"
+        >
+          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          {problem}
+        </p>
+      ))}
+      <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
+        {data.namespaces.map((namespace) => (
+          <div key={namespace.namespace}>
+            <div className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+              {namespace.namespace || "cluster-scoped"}
+            </div>
+            <ul className="mt-1 space-y-1 font-mono text-xs text-theme-text-secondary">
+              {namespace.chains.map((chain) => (
+                <li key={chain}>{chain}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {data.warnings.map((warning) => (
+        <p key={warning} className="text-xs text-warning-text">
+          {warning}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function TopologyStat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base/40 px-3 py-2">
+      <div className="font-mono text-lg font-semibold text-theme-text-primary">
+        {value}
+      </div>
+      <div className="text-xs uppercase tracking-wide text-theme-text-tertiary">
+        {label}
+      </div>
+    </div>
+  );
+}