mirror of
https://github.com/stack-auth/stack.git
synced 2026-07-20 21:29:36 +08:00
mantrakp04
Cursor
+567
@@ -0,0 +1,567 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
DesignAlert,
|
||||
DesignAnalyticsCard,
|
||||
DesignAnalyticsCardHeader,
|
||||
DesignBadge,
|
||||
DesignButton,
|
||||
DesignCard,
|
||||
DesignDialog,
|
||||
DesignDialogClose,
|
||||
} from "@/components/design-components";
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
BrowserIcon,
|
||||
BugIcon,
|
||||
CheckCircleIcon,
|
||||
ClockCounterClockwiseIcon,
|
||||
CodeIcon,
|
||||
CursorClickIcon,
|
||||
FlagIcon,
|
||||
GitCommitIcon,
|
||||
GitPullRequestIcon,
|
||||
LightbulbFilamentIcon,
|
||||
PulseIcon,
|
||||
RobotIcon,
|
||||
SparkleIcon,
|
||||
TrendDownIcon,
|
||||
UserCircleIcon,
|
||||
WarningCircleIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { IncidentStory, MetricUnit } from "./stories";
|
||||
|
||||
export type IncidentEvidenceProps = {
|
||||
story: IncidentStory,
|
||||
activeStageIndex: number,
|
||||
selectedRemediationId: string | null,
|
||||
onSelectRemediation: (id: string) => void,
|
||||
};
|
||||
|
||||
type EvidenceDetail = {
|
||||
id: string,
|
||||
label: string,
|
||||
detail: string,
|
||||
strength: string,
|
||||
};
|
||||
|
||||
type ReplayFrame = {
|
||||
id: string,
|
||||
caption: string,
|
||||
action: string,
|
||||
url: string,
|
||||
cursorX: number,
|
||||
cursorY: number,
|
||||
severity: string,
|
||||
};
|
||||
|
||||
type MetricComparison = {
|
||||
id: string,
|
||||
label: string,
|
||||
before: string,
|
||||
during: string,
|
||||
recovered: string,
|
||||
};
|
||||
|
||||
type RemediationChoice = {
|
||||
id: string,
|
||||
title: string,
|
||||
description: string,
|
||||
recovery: string,
|
||||
risk: string,
|
||||
recommended: boolean,
|
||||
};
|
||||
|
||||
function toPercent(value: number): string {
|
||||
const percent = value <= 1 ? value * 100 : value;
|
||||
return `${Math.round(percent)}%`;
|
||||
}
|
||||
|
||||
function storyDisplayName(story: IncidentStory): string {
|
||||
return story.title;
|
||||
}
|
||||
|
||||
function buildReplayFrames(story: IncidentStory): readonly ReplayFrame[] {
|
||||
if (story.replayFrames.length === 0) {
|
||||
return [
|
||||
{
|
||||
id: "fallback-replay",
|
||||
caption: "User retries the blocked action after the interface stops responding.",
|
||||
action: "Repeated click detected",
|
||||
url: "/checkout/confirm",
|
||||
cursorX: 68,
|
||||
cursorY: 66,
|
||||
severity: "error",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return story.replayFrames.map((frame) => ({
|
||||
id: frame.id,
|
||||
caption: frame.description,
|
||||
action: frame.title,
|
||||
url: frame.route,
|
||||
cursorX: Math.min(92, Math.max(8, frame.cursorX)),
|
||||
cursorY: Math.min(88, Math.max(12, frame.cursorY)),
|
||||
severity: frame.highlightedSelector == null ? "warning" : "error",
|
||||
}));
|
||||
}
|
||||
|
||||
function buildEvidence(story: IncidentStory): readonly EvidenceDetail[] {
|
||||
if (story.rootCauseEvidence.length === 0) {
|
||||
return [
|
||||
{ id: "release", label: "Release boundary", detail: "Error onset aligns with the latest production change.", strength: "Strong" },
|
||||
{ id: "cohort", label: "Affected cohort", detail: "Failures concentrate in one client and action path.", strength: "Strong" },
|
||||
{ id: "trace", label: "Trace signature", detail: "Healthy requests diverge at the same operation.", strength: "Moderate" },
|
||||
];
|
||||
}
|
||||
|
||||
return story.rootCauseEvidence.map((row) => ({
|
||||
id: row.id,
|
||||
label: row.signal,
|
||||
detail: row.explanation,
|
||||
strength: row.confidence >= 0.9 ? "Strong" : row.confidence >= 0.75 ? "Moderate" : "Supporting",
|
||||
}));
|
||||
}
|
||||
|
||||
function formatIncidentMetric(value: number, unit: MetricUnit): string {
|
||||
switch (unit) {
|
||||
case "percent": {
|
||||
return `${value.toFixed(value < 10 ? 2 : 1)}%`;
|
||||
}
|
||||
case "milliseconds": {
|
||||
return value >= 1000 ? `${(value / 1000).toFixed(1)} s` : `${Math.round(value)} ms`;
|
||||
}
|
||||
case "count": {
|
||||
return Math.round(value).toLocaleString();
|
||||
}
|
||||
case "requests-per-minute": {
|
||||
return `${Math.round(value).toLocaleString()} rpm`;
|
||||
}
|
||||
case "dollars": {
|
||||
return `$${Math.round(value).toLocaleString()}`;
|
||||
}
|
||||
default: {
|
||||
const exhaustiveUnit: never = unit;
|
||||
return exhaustiveUnit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildMetrics(story: IncidentStory): readonly MetricComparison[] {
|
||||
if (story.metrics.length === 0) {
|
||||
return [
|
||||
{ id: "success", label: "Success rate", before: "99.4%", during: "71.8%", recovered: "99.2%" },
|
||||
{ id: "latency", label: "p95 latency", before: "420 ms", during: "4.8 s", recovered: "460 ms" },
|
||||
{ id: "users", label: "Affected users", before: "0", during: "2,847", recovered: "12" },
|
||||
];
|
||||
}
|
||||
|
||||
return story.metrics.slice(0, 4).map((metric) => ({
|
||||
id: metric.id,
|
||||
label: metric.label,
|
||||
before: formatIncidentMetric(metric.baseline, metric.unit),
|
||||
during: formatIncidentMetric(metric.current, metric.unit),
|
||||
recovered: formatIncidentMetric(metric.recovered, metric.unit),
|
||||
}));
|
||||
}
|
||||
|
||||
function buildRemediations(story: IncidentStory): readonly RemediationChoice[] {
|
||||
if (story.remediationActions.length === 0) {
|
||||
return [
|
||||
{
|
||||
id: "rollback",
|
||||
title: "Rollback implicated change",
|
||||
description: "Restore the last known-good production behavior.",
|
||||
recovery: "~8 min",
|
||||
risk: "Low",
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
id: "disable-flag",
|
||||
title: "Disable affected feature flag",
|
||||
description: "Contain impact for the affected cohort while preserving the release.",
|
||||
recovery: "~3 min",
|
||||
risk: "Low",
|
||||
recommended: false,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return story.remediationActions.map((remediation, index) => ({
|
||||
id: remediation.id,
|
||||
title: remediation.title,
|
||||
description: remediation.details,
|
||||
recovery: remediation.status === "completed" ? "Recovered" : remediation.status === "in-progress" ? "~5 min" : "~15 min",
|
||||
risk: index === 0 ? "Low" : "Medium",
|
||||
recommended: index === 0,
|
||||
}));
|
||||
}
|
||||
|
||||
function strengthColor(strength: string): "green" | "orange" | "blue" {
|
||||
const normalized = strength.toLowerCase();
|
||||
if (normalized.includes("strong") || normalized.includes("high")) return "green";
|
||||
if (normalized.includes("weak") || normalized.includes("low")) return "orange";
|
||||
return "blue";
|
||||
}
|
||||
|
||||
function SessionReplay({
|
||||
story,
|
||||
activeStageIndex,
|
||||
}: {
|
||||
story: IncidentStory,
|
||||
activeStageIndex: number,
|
||||
}) {
|
||||
const reducedMotion = useReducedMotion();
|
||||
const frames = useMemo(() => buildReplayFrames(story), [story]);
|
||||
const activeStage = story.stages.at(Math.min(activeStageIndex, story.stages.length - 1));
|
||||
const stageFrame = activeStage == null
|
||||
? undefined
|
||||
: frames.find((candidate) => story.replayFrames.find((source) => source.id === candidate.id)?.stageId === activeStage.id);
|
||||
const frame = stageFrame ?? frames[Math.min(activeStageIndex, frames.length - 1)];
|
||||
const isRageClick = frame.action.toLowerCase().includes("click") || frame.severity.toLowerCase().includes("error");
|
||||
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="cyan" className="overflow-hidden">
|
||||
<DesignAnalyticsCardHeader
|
||||
label="User-impact replay"
|
||||
right={<DesignBadge label={`Stage ${activeStageIndex + 1}`} color="cyan" size="sm" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<div className="overflow-hidden rounded-xl border border-border bg-background shadow-sm">
|
||||
<div className="flex h-8 items-center gap-2 border-b border-border bg-foreground/[0.03] px-3">
|
||||
<div className="flex gap-1.5" aria-hidden="true">
|
||||
<span className="size-2 rounded-full bg-red-500/70" />
|
||||
<span className="size-2 rounded-full bg-orange-500/70" />
|
||||
<span className="size-2 rounded-full bg-emerald-500/70" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 truncate rounded-md bg-foreground/[0.05] px-2 py-1 text-[10px] text-muted-foreground">
|
||||
{frame.url}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-44 overflow-hidden bg-gradient-to-br from-background via-background to-cyan-500/[0.05]">
|
||||
<div className="absolute inset-x-5 top-5 h-8 rounded-lg bg-foreground/[0.05]" />
|
||||
<div className="absolute left-5 right-[42%] top-16 h-3 rounded bg-foreground/[0.08]" />
|
||||
<div className="absolute left-5 right-[58%] top-24 h-3 rounded bg-foreground/[0.05]" />
|
||||
<div className="absolute bottom-5 right-5 rounded-lg bg-cyan-500/15 px-5 py-2 text-[10px] font-semibold text-cyan-700 dark:text-cyan-300">
|
||||
Confirm action
|
||||
</div>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={frame.id}
|
||||
className="absolute"
|
||||
initial={reducedMotion ? false : { opacity: 0, scale: 0.75 }}
|
||||
animate={{ opacity: 1, scale: 1, left: `${frame.cursorX}%`, top: `${frame.cursorY}%` }}
|
||||
exit={reducedMotion ? undefined : { opacity: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.22 }}
|
||||
>
|
||||
{isRageClick && !reducedMotion && (
|
||||
<>
|
||||
<motion.span
|
||||
className="absolute -left-3 -top-3 size-7 rounded-full border border-red-500/70"
|
||||
animate={{ opacity: [0.8, 0], scale: [0.5, 1.8] }}
|
||||
transition={{ duration: 0.7, repeat: Infinity }}
|
||||
/>
|
||||
<motion.span
|
||||
className="absolute -left-3 -top-3 size-7 rounded-full border border-red-500/50"
|
||||
animate={{ opacity: [0.7, 0], scale: [0.5, 2.2] }}
|
||||
transition={{ duration: 0.7, delay: 0.2, repeat: Infinity }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<CursorClickIcon className="relative size-6 -rotate-12 text-red-500 drop-shadow-sm" weight="fill" />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 border-t border-border bg-foreground/[0.02] px-3 py-2.5">
|
||||
<PulseIcon className="mt-0.5 size-4 shrink-0 text-cyan-600 dark:text-cyan-400" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-semibold text-foreground">{frame.action}</p>
|
||||
<p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">{frame.caption}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
function ImpactMetrics({ story }: { story: IncidentStory }) {
|
||||
const metrics = useMemo(() => buildMetrics(story), [story]);
|
||||
const impact = `${story.userImpact} ${story.businessImpact}`;
|
||||
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="orange">
|
||||
<DesignAnalyticsCardHeader label="Before / incident / recovered" />
|
||||
<div className="grid grid-cols-[minmax(0,1.4fr)_repeat(3,minmax(0,1fr))] border-b border-border px-4 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<span>Signal</span><span>Before</span><span>Incident</span><span>Projected</span>
|
||||
</div>
|
||||
<div className="divide-y divide-border">
|
||||
{metrics.map((metric) => (
|
||||
<div key={metric.id} className="grid grid-cols-[minmax(0,1.4fr)_repeat(3,minmax(0,1fr))] items-center px-4 py-2.5 text-xs tabular-nums">
|
||||
<span className="truncate font-medium text-foreground">{metric.label}</span>
|
||||
<span className="text-muted-foreground">{metric.before}</span>
|
||||
<span className="font-semibold text-red-600 dark:text-red-400">{metric.during}</span>
|
||||
<span className="font-semibold text-emerald-600 dark:text-emerald-400">{metric.recovered}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2 px-4 py-3 text-xs text-muted-foreground">
|
||||
<TrendDownIcon className="mt-0.5 size-4 shrink-0 text-orange-500" />
|
||||
<span>{impact}</span>
|
||||
</div>
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function IncidentEvidence({
|
||||
story,
|
||||
activeStageIndex,
|
||||
selectedRemediationId,
|
||||
onSelectRemediation,
|
||||
}: IncidentEvidenceProps) {
|
||||
const reducedMotion = useReducedMotion();
|
||||
const [selectedEvidence, setSelectedEvidence] = useState<EvidenceDetail | null>(null);
|
||||
const evidence = useMemo(() => buildEvidence(story), [story]);
|
||||
const remediations = useMemo(() => buildRemediations(story), [story]);
|
||||
|
||||
const confidence = story.rootCauseEvidence.length === 0
|
||||
? 0.92
|
||||
: story.rootCauseEvidence.reduce((sum, item) => sum + item.confidence, 0) / story.rootCauseEvidence.length;
|
||||
const rootCause = story.rootCauseEvidence.map((item) => item.explanation).join(" ");
|
||||
const release = `${story.change.deployment.version} · ${story.change.deployment.service}`;
|
||||
const configChange = story.change.configChanges.at(0);
|
||||
const change = configChange == null
|
||||
? story.suspect.commitTitle
|
||||
: `${configChange.key}: ${configChange.previousValue} → ${configChange.nextValue}`;
|
||||
const featureFlag = story.change.featureFlags.at(0);
|
||||
const flag = featureFlag == null
|
||||
? "No feature flag changed"
|
||||
: `${featureFlag.key} · ${featureFlag.rolloutPercent}% rollout`;
|
||||
const commit = story.suspect.commitSha;
|
||||
const pullRequest = `#${story.suspect.pullRequestNumber} · ${story.suspect.pullRequestTitle}`;
|
||||
const author = story.suspect.author;
|
||||
const owner = story.suspect.owner;
|
||||
const changedLines = story.suspect.changedLines;
|
||||
const timeline = story.stages;
|
||||
const selectedRemediation = remediations.find((item) => item.id === selectedRemediationId) ?? null;
|
||||
const generatedFix = selectedRemediation == null || changedLines.length === 0
|
||||
? ""
|
||||
: [
|
||||
`// Generated remediation preview: ${selectedRemediation.title}`,
|
||||
...changedLines.map((line) => `// ${line.file}:${line.startLine}-${line.endLine}\n// ${line.summary}`),
|
||||
].join("\n");
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
|
||||
<SessionReplay story={story} activeStageIndex={activeStageIndex} />
|
||||
<DesignCard title="AI root-cause brief" subtitle={storyDisplayName(story)} icon={RobotIcon} gradient="purple">
|
||||
<div className="space-y-4">
|
||||
<DesignAlert
|
||||
variant="warning"
|
||||
title={`${toPercent(confidence)} confidence`}
|
||||
description={rootCause}
|
||||
glassmorphic
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
{evidence.map((row, index) => (
|
||||
<motion.button
|
||||
key={row.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-3 rounded-xl border border-border bg-foreground/[0.025] p-3 text-left transition-colors duration-150 hover:bg-foreground/[0.055] hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500"
|
||||
onClick={() => setSelectedEvidence(row)}
|
||||
initial={reducedMotion ? false : { opacity: 0, x: 8 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.18, delay: reducedMotion ? 0 : index * 0.035 }}
|
||||
>
|
||||
<CheckCircleIcon className="size-4 shrink-0 text-emerald-500" weight="fill" />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-xs font-semibold text-foreground">{row.label}</span>
|
||||
<span className="mt-0.5 block truncate text-[11px] text-muted-foreground">{row.detail}</span>
|
||||
</span>
|
||||
<DesignBadge label={row.strength} color={strengthColor(row.strength)} size="sm" />
|
||||
<ArrowRightIcon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DesignCard>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<DesignCard title="Correlated change" icon={FlagIcon} gradient="orange">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Release</p>
|
||||
<p className="mt-1 text-sm font-semibold text-foreground">{release}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Change</p>
|
||||
<p className="mt-1 text-xs leading-5 text-foreground">{change}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-xl bg-orange-500/[0.08] px-3 py-2">
|
||||
<span className="text-xs font-medium text-foreground">{flag}</span>
|
||||
<DesignBadge label="Correlated" color="orange" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</DesignCard>
|
||||
|
||||
<DesignCard title="Suspect ownership" icon={GitCommitIcon} gradient="default">
|
||||
<div className="space-y-2.5 text-xs">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="flex items-center gap-2 text-muted-foreground"><GitCommitIcon className="size-4" />Commit</span>
|
||||
<code className="font-semibold text-foreground">{commit}</code>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="flex items-center gap-2 text-muted-foreground"><GitPullRequestIcon className="size-4" />Pull request</span>
|
||||
<span className="font-semibold text-foreground">{pullRequest}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="flex items-center gap-2 text-muted-foreground"><UserCircleIcon className="size-4" />Author</span>
|
||||
<span className="font-semibold text-foreground">{author}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="flex items-center gap-2 text-muted-foreground"><BugIcon className="size-4" />CODEOWNERS</span>
|
||||
<span className="font-semibold text-foreground">{owner}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DesignCard>
|
||||
|
||||
<DesignCard title="Changed-line diff" icon={CodeIcon} gradient="default" contentClassName="p-0">
|
||||
<div className="max-h-44 overflow-auto bg-foreground/[0.025] py-2 font-mono text-[10px] leading-5">
|
||||
{(changedLines.length > 0 ? changedLines.slice(0, 8) : [
|
||||
"- previousBehavior(input)",
|
||||
"+ guardedBehavior(input, cohort)",
|
||||
"+ emitTelemetry(\"decision\")",
|
||||
]).map((line, index) => {
|
||||
const content = typeof line === "string"
|
||||
? line
|
||||
: `~ ${line.file}:${line.startLine}-${line.endLine} ${line.summary}`;
|
||||
const addition = content.trimStart().startsWith("+");
|
||||
const removal = content.trimStart().startsWith("-");
|
||||
return (
|
||||
<div
|
||||
key={`${index}-${content}`}
|
||||
className={addition ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : removal ? "bg-red-500/10 text-red-700 dark:text-red-300" : "text-muted-foreground"}
|
||||
>
|
||||
<span className="inline-block w-8 select-none pr-2 text-right text-muted-foreground/60">{index + 1}</span>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DesignCard>
|
||||
</div>
|
||||
|
||||
<ImpactMetrics story={story} />
|
||||
|
||||
<DesignCard title="Recovery options" subtitle="Selection only — no production mutation is performed" icon={LightbulbFilamentIcon} gradient="green">
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
{remediations.map((remediation) => {
|
||||
const selected = remediation.id === selectedRemediationId;
|
||||
return (
|
||||
<div
|
||||
key={remediation.id}
|
||||
className={`flex min-h-44 flex-col rounded-xl border p-3 transition-colors duration-150 hover:transition-none ${
|
||||
selected ? "border-emerald-500/60 bg-emerald-500/[0.08]" : "border-border bg-foreground/[0.025] hover:bg-foreground/[0.05]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-sm font-semibold text-foreground">{remediation.title}</p>
|
||||
{remediation.recommended && <DesignBadge label="Recommended" color="green" size="sm" />}
|
||||
</div>
|
||||
<p className="mt-2 flex-1 text-xs leading-5 text-muted-foreground">{remediation.description}</p>
|
||||
<div className="mb-3 mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
|
||||
<ClockCounterClockwiseIcon className="size-4 text-emerald-500" />
|
||||
<span>{remediation.recovery} projected</span>
|
||||
<span>·</span>
|
||||
<span>{remediation.risk} risk</span>
|
||||
</div>
|
||||
<DesignButton
|
||||
size="sm"
|
||||
variant={selected ? "secondary" : remediation.recommended ? "default" : "outline"}
|
||||
onClick={() => onSelectRemediation(remediation.id)}
|
||||
>
|
||||
{selected ? "Selected for review" : "Select action"}
|
||||
</DesignButton>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{generatedFix.length > 0 && (
|
||||
<div className="mt-4 overflow-hidden rounded-xl border border-border">
|
||||
<div className="flex items-center justify-between border-b border-border bg-foreground/[0.03] px-3 py-2">
|
||||
<span className="flex items-center gap-2 text-xs font-semibold text-foreground">
|
||||
<SparkleIcon className="size-4 text-purple-500" weight="fill" />
|
||||
Generated fix preview
|
||||
</span>
|
||||
<DesignBadge label="Preview only" color="purple" size="sm" />
|
||||
</div>
|
||||
<pre className="max-h-52 overflow-auto whitespace-pre-wrap p-3 text-[11px] leading-5 text-muted-foreground">{generatedFix}</pre>
|
||||
</div>
|
||||
)}
|
||||
</DesignCard>
|
||||
|
||||
<DesignCard title="Incident timeline & postmortem evidence" icon={ClockCounterClockwiseIcon} gradient="cyan">
|
||||
<div className="relative space-y-1 before:absolute before:bottom-4 before:left-[7px] before:top-4 before:w-px before:bg-border">
|
||||
{(timeline.length > 0 ? timeline : [
|
||||
{ title: "Release completed", description: "Production change reaches the affected cohort." },
|
||||
{ title: "Impact detected", description: "User outcome and service signals cross alert thresholds." },
|
||||
{ title: "Cause isolated", description: "Replay, traces, and release evidence converge." },
|
||||
{ title: "Recovery projected", description: "Selected containment restores the baseline path." },
|
||||
]).map((event, index) => {
|
||||
const title = event.title;
|
||||
const description = "summary" in event ? event.summary : event.description;
|
||||
const active = index === Math.min(activeStageIndex, timeline.length > 0 ? timeline.length - 1 : 3);
|
||||
return (
|
||||
<motion.div
|
||||
key={`${index}-${title}`}
|
||||
className="relative flex gap-3 py-2"
|
||||
animate={{ opacity: index <= activeStageIndex ? 1 : 0.48 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.18 }}
|
||||
>
|
||||
<span className={`relative z-10 mt-1 size-3.5 shrink-0 rounded-full border-2 border-background ${active ? "bg-cyan-500 ring-4 ring-cyan-500/15" : index < activeStageIndex ? "bg-emerald-500" : "bg-muted-foreground/40"}`} />
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-foreground">{title}</p>
|
||||
<p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DesignCard>
|
||||
|
||||
<DesignDialog
|
||||
open={selectedEvidence != null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setSelectedEvidence(null);
|
||||
}}
|
||||
size="md"
|
||||
icon={BrowserIcon}
|
||||
title={selectedEvidence?.label ?? "Evidence detail"}
|
||||
description="Read-only incident evidence used by the root-cause model."
|
||||
footer={
|
||||
<DesignDialogClose asChild>
|
||||
<DesignButton variant="secondary" size="sm">Close</DesignButton>
|
||||
</DesignDialogClose>
|
||||
}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<DesignAlert
|
||||
variant="info"
|
||||
title={selectedEvidence?.strength ?? "Evidence"}
|
||||
description={selectedEvidence?.detail ?? "No evidence selected."}
|
||||
glassmorphic
|
||||
/>
|
||||
<p className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<WarningCircleIcon className="size-4" />
|
||||
Correlation supports diagnosis but does not independently prove causation.
|
||||
</p>
|
||||
</div>
|
||||
</DesignDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+297
@@ -0,0 +1,297 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ArrowCounterClockwiseIcon,
|
||||
BrainIcon,
|
||||
CheckCircleIcon,
|
||||
PauseIcon,
|
||||
PlayIcon,
|
||||
RocketLaunchIcon,
|
||||
SirenIcon,
|
||||
WrenchIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useId, type ChangeEvent, type ElementType } from "react";
|
||||
|
||||
import {
|
||||
DesignBadge,
|
||||
DesignButton,
|
||||
DesignCard,
|
||||
type DesignBadgeColor,
|
||||
} from "@/components/design-components";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import {
|
||||
formatPlaybackTime,
|
||||
getPlaybackStage,
|
||||
type IncidentStage,
|
||||
type IncidentStory,
|
||||
} from "./stories";
|
||||
|
||||
export type IncidentPlaybackProps = {
|
||||
story: IncidentStory,
|
||||
elapsedMs: number,
|
||||
isPlaying: boolean,
|
||||
onElapsedChange: (elapsedMs: number) => void,
|
||||
onPlayingChange: (playing: boolean) => void,
|
||||
};
|
||||
|
||||
type StagePresentation = {
|
||||
icon: ElementType,
|
||||
color: DesignBadgeColor,
|
||||
label: string,
|
||||
};
|
||||
|
||||
const stagePresentations = new Map<IncidentStage["kind"], StagePresentation>([
|
||||
["healthy", { icon: CheckCircleIcon, color: "green", label: "Baseline" }],
|
||||
["change", { icon: RocketLaunchIcon, color: "purple", label: "Change" }],
|
||||
["impact", { icon: SirenIcon, color: "red", label: "Alert" }],
|
||||
["diagnosis", { icon: BrainIcon, color: "cyan", label: "Diagnosis" }],
|
||||
["mitigation", { icon: WrenchIcon, color: "orange", label: "Remediation" }],
|
||||
["recovery", { icon: CheckCircleIcon, color: "green", label: "Recovery" }],
|
||||
]);
|
||||
|
||||
function getStagePresentation(kind: IncidentStage["kind"]): StagePresentation {
|
||||
const presentation = stagePresentations.get(kind);
|
||||
if (presentation == null) {
|
||||
throw new Error(`Missing incident playback presentation for stage kind "${kind}".`);
|
||||
}
|
||||
return presentation;
|
||||
}
|
||||
|
||||
function clampElapsed(elapsedMs: number, durationMs: number): number {
|
||||
return Math.min(Math.max(elapsedMs, 0), durationMs);
|
||||
}
|
||||
|
||||
function getActiveStage(story: IncidentStory, elapsedMs: number): IncidentStage {
|
||||
const stage = getPlaybackStage(story, elapsedMs);
|
||||
if (stage == null) {
|
||||
throw new Error(`Incident story "${story.id}" must contain at least one playback stage.`);
|
||||
}
|
||||
return stage;
|
||||
}
|
||||
|
||||
function getActiveStageIndex(story: IncidentStory, activeStage: IncidentStage): number {
|
||||
const index = story.stages.findIndex((stage) => stage.id === activeStage.id);
|
||||
if (index < 0) {
|
||||
throw new Error(`Active stage "${activeStage.id}" is missing from incident story "${story.id}".`);
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
export function IncidentPlayback({
|
||||
story,
|
||||
elapsedMs,
|
||||
isPlaying,
|
||||
onElapsedChange,
|
||||
onPlayingChange,
|
||||
}: IncidentPlaybackProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const rangeId = useId();
|
||||
const safeElapsedMs = clampElapsed(elapsedMs, story.durationMs);
|
||||
const activeStage = getActiveStage(story, safeElapsedMs);
|
||||
const activeStageIndex = getActiveStageIndex(story, activeStage);
|
||||
const progressPercent = story.durationMs === 0
|
||||
? 0
|
||||
: (safeElapsedMs / story.durationMs) * 100;
|
||||
const activePresentation = getStagePresentation(activeStage.kind);
|
||||
const ActiveIcon = activePresentation.icon;
|
||||
|
||||
const handleRangeChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
onElapsedChange(Number(event.currentTarget.value));
|
||||
};
|
||||
|
||||
const handleRestart = () => {
|
||||
onElapsedChange(0);
|
||||
};
|
||||
|
||||
const handleStageSelect = (stage: IncidentStage) => {
|
||||
onElapsedChange(stage.offsetMs);
|
||||
};
|
||||
|
||||
return (
|
||||
<DesignCard
|
||||
title="Incident playback"
|
||||
subtitle="Replay every signal from change to recovery"
|
||||
icon={PlayIcon}
|
||||
gradient="cyan"
|
||||
contentClassName="space-y-5"
|
||||
actions={(
|
||||
<DesignBadge
|
||||
label={isPlaying ? "Live playback" : "Paused"}
|
||||
color={isPlaying ? "green" : "orange"}
|
||||
icon={isPlaying ? PlayIcon : PauseIcon}
|
||||
size="sm"
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-4 rounded-xl bg-foreground/[0.03] p-3 ring-1 ring-foreground/[0.06] sm:p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<DesignButton
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="secondary"
|
||||
className="h-9 w-9 rounded-xl transition-opacity duration-150 hover:transition-none"
|
||||
aria-label={isPlaying ? "Pause incident playback" : "Play incident playback"}
|
||||
aria-pressed={isPlaying}
|
||||
onClick={() => onPlayingChange(!isPlaying)}
|
||||
>
|
||||
{isPlaying
|
||||
? <PauseIcon className="h-4 w-4" weight="fill" />
|
||||
: <PlayIcon className="h-4 w-4" weight="fill" />}
|
||||
</DesignButton>
|
||||
<DesignButton
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 rounded-xl transition-opacity duration-150 hover:transition-none"
|
||||
aria-label="Restart incident playback"
|
||||
disabled={safeElapsedMs === 0}
|
||||
onClick={handleRestart}
|
||||
>
|
||||
<ArrowCounterClockwiseIcon className="h-4 w-4" />
|
||||
</DesignButton>
|
||||
|
||||
<div className="ml-auto flex items-baseline gap-1 font-mono text-xs tabular-nums">
|
||||
<span className="font-semibold text-foreground">{formatPlaybackTime(safeElapsedMs)}</span>
|
||||
<span className="text-muted-foreground">/ {formatPlaybackTime(story.durationMs)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative pb-1 pt-5">
|
||||
<label htmlFor={rangeId} className="sr-only">
|
||||
Incident playback position
|
||||
</label>
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute left-0 right-0 top-[1.625rem] h-1 overflow-hidden rounded-full bg-foreground/10"
|
||||
>
|
||||
<motion.div
|
||||
className="h-full origin-left rounded-full bg-cyan-500"
|
||||
animate={{ scaleX: progressPercent / 100 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.18, ease: "easeOut" }}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id={rangeId}
|
||||
type="range"
|
||||
min={0}
|
||||
max={story.durationMs}
|
||||
step={100}
|
||||
value={safeElapsedMs}
|
||||
onChange={handleRangeChange}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={story.durationMs}
|
||||
aria-valuenow={safeElapsedMs}
|
||||
aria-valuetext={`${formatPlaybackTime(safeElapsedMs)} of ${formatPlaybackTime(story.durationMs)}`}
|
||||
className="relative z-10 h-4 w-full cursor-pointer appearance-none bg-transparent accent-cyan-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/60 focus-visible:ring-offset-4 focus-visible:ring-offset-background disabled:cursor-not-allowed [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background [&::-moz-range-thumb]:bg-cyan-500 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:mt-[-6px] [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-cyan-500 [&::-webkit-slider-thumb]:shadow-sm"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-0 top-0 h-5" aria-hidden>
|
||||
{story.stages.map((stage, index) => {
|
||||
const markerPercent = story.durationMs === 0 ? 0 : (stage.offsetMs / story.durationMs) * 100;
|
||||
const isReached = index <= activeStageIndex;
|
||||
return (
|
||||
<span
|
||||
key={stage.id}
|
||||
className={cn(
|
||||
"absolute top-0 h-2 w-px -translate-x-1/2 rounded-full",
|
||||
isReached ? "bg-cyan-500" : "bg-foreground/20",
|
||||
)}
|
||||
style={{ left: `${markerPercent}%` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="relative grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 lg:grid-cols-6"
|
||||
role="list"
|
||||
aria-label="Incident stages"
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute left-3 right-3 top-3 hidden h-px bg-foreground/10 lg:block"
|
||||
/>
|
||||
{story.stages.map((stage, index) => {
|
||||
const presentation = getStagePresentation(stage.kind);
|
||||
const StageIcon = presentation.icon;
|
||||
const isActive = stage.id === activeStage.id;
|
||||
const isReached = index <= activeStageIndex;
|
||||
|
||||
return (
|
||||
<div key={stage.id} role="listitem" className="relative z-10 min-w-0">
|
||||
<button
|
||||
type="button"
|
||||
aria-current={isActive ? "step" : undefined}
|
||||
aria-label={`Jump to ${stage.title} at ${formatPlaybackTime(stage.offsetMs)}`}
|
||||
onClick={() => handleStageSelect(stage)}
|
||||
className={cn(
|
||||
"group/stage w-full rounded-xl p-2 text-left outline-none ring-offset-background transition-[background-color,opacity] duration-150 hover:transition-none focus-visible:ring-2 focus-visible:ring-cyan-500/60 focus-visible:ring-offset-2",
|
||||
isActive ? "bg-foreground/[0.07]" : "hover:bg-foreground/[0.04]",
|
||||
!isReached && "opacity-55 hover:opacity-100",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"mb-2 flex h-6 w-6 items-center justify-center rounded-full ring-4 ring-background transition-colors duration-150 group-hover/stage:transition-none",
|
||||
isReached
|
||||
? "bg-cyan-500 text-primary-foreground"
|
||||
: "bg-foreground/10 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<StageIcon className="h-3.5 w-3.5" weight={isActive ? "fill" : "regular"} />
|
||||
</span>
|
||||
<span className="block truncate text-[10px] font-semibold uppercase tracking-wider text-foreground">
|
||||
{stage.title}
|
||||
</span>
|
||||
<span className="mt-0.5 block font-mono text-[10px] tabular-nums text-muted-foreground">
|
||||
{formatPlaybackTime(stage.offsetMs)}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={activeStage.id}
|
||||
initial={shouldReduceMotion ? false : { opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2, ease: "easeOut" }}
|
||||
className="relative overflow-hidden rounded-xl bg-foreground/[0.035] p-4 ring-1 ring-foreground/[0.07]"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-y-0 left-0 w-1 bg-cyan-500"
|
||||
/>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-700 ring-1 ring-cyan-500/20 dark:text-cyan-300">
|
||||
<ActiveIcon className="h-4 w-4" weight="duotone" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DesignBadge
|
||||
label={activePresentation.label}
|
||||
color={activePresentation.color}
|
||||
icon={ActiveIcon}
|
||||
size="sm"
|
||||
/>
|
||||
<span className="font-mono text-[10px] tabular-nums text-muted-foreground">
|
||||
Stage {activeStageIndex + 1} of {story.stages.length}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-2 text-sm font-semibold text-foreground">{activeStage.title}</h3>
|
||||
<p className="mt-1 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
{activeStage.summary}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</DesignCard>
|
||||
);
|
||||
}
|
||||
+184
@@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
DesignAlert,
|
||||
DesignBadge,
|
||||
DesignCategoryTabs,
|
||||
} from "@/components/design-components";
|
||||
import { AppEnabledGuard } from "../../app-enabled-guard";
|
||||
import { PageLayout } from "../../page-layout";
|
||||
import { StickyPageHeader } from "../../sticky-page-header";
|
||||
import { IncidentEvidence } from "./incident-evidence";
|
||||
import { IncidentPlayback } from "./incident-playback";
|
||||
import {
|
||||
INCIDENT_STORIES,
|
||||
getPlaybackStage,
|
||||
type IncidentStory,
|
||||
} from "./stories";
|
||||
import { TelemetryInvestigation } from "./telemetry-investigation";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
const PLAYBACK_RATE = 24;
|
||||
|
||||
function getInitialStory(): IncidentStory {
|
||||
return INCIDENT_STORIES[0];
|
||||
}
|
||||
|
||||
function getStory(storyId: string): IncidentStory {
|
||||
const story = INCIDENT_STORIES.find((candidate) => candidate.id === storyId);
|
||||
if (story == null) {
|
||||
throw new Error(`Mission Control story "${storyId}" is not registered.`);
|
||||
}
|
||||
return story;
|
||||
}
|
||||
|
||||
export default function PageClient() {
|
||||
const initialStory = getInitialStory();
|
||||
const [storyId, setStoryId] = useState(initialStory.id);
|
||||
const [elapsedMs, setElapsedMs] = useState(0);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [selectedSpanId, setSelectedSpanId] = useState<string | null>(
|
||||
initialStory.waterfallSpans[0]?.id ?? null,
|
||||
);
|
||||
const [selectedRemediationId, setSelectedRemediationId] = useState<string | null>(null);
|
||||
const elapsedMsRef = useRef(0);
|
||||
const playbackAnchorRef = useRef<{ elapsedMs: number, startedAt: number } | null>(null);
|
||||
|
||||
const story = useMemo(() => getStory(storyId), [storyId]);
|
||||
const storyCategories = useMemo(
|
||||
() => INCIDENT_STORIES.map((candidate) => ({
|
||||
id: candidate.id,
|
||||
label: candidate.shortTitle,
|
||||
badgeCount: candidate.affectedUsers,
|
||||
})),
|
||||
[],
|
||||
);
|
||||
const activeStage = getPlaybackStage(story, elapsedMs);
|
||||
const activeStageIndex = activeStage == null ? 0 : story.stages.indexOf(activeStage);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPlaying) {
|
||||
playbackAnchorRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
playbackAnchorRef.current = {
|
||||
elapsedMs: elapsedMsRef.current,
|
||||
startedAt: performance.now(),
|
||||
};
|
||||
let animationFrameId = 0;
|
||||
|
||||
const advancePlayback = (now: number) => {
|
||||
const anchor = playbackAnchorRef.current;
|
||||
if (anchor == null) return;
|
||||
const nextElapsedMs = Math.min(
|
||||
story.durationMs,
|
||||
anchor.elapsedMs + (now - anchor.startedAt) * PLAYBACK_RATE,
|
||||
);
|
||||
elapsedMsRef.current = nextElapsedMs;
|
||||
setElapsedMs(nextElapsedMs);
|
||||
if (nextElapsedMs >= story.durationMs) {
|
||||
setIsPlaying(false);
|
||||
return;
|
||||
}
|
||||
animationFrameId = requestAnimationFrame(advancePlayback);
|
||||
};
|
||||
|
||||
animationFrameId = requestAnimationFrame(advancePlayback);
|
||||
return () => cancelAnimationFrame(animationFrameId);
|
||||
}, [isPlaying, story.durationMs]);
|
||||
|
||||
const selectStory = (nextStoryId: string) => {
|
||||
const nextStory = getStory(nextStoryId);
|
||||
setStoryId(nextStoryId);
|
||||
elapsedMsRef.current = 0;
|
||||
setElapsedMs(0);
|
||||
setIsPlaying(false);
|
||||
setSelectedSpanId(nextStory.waterfallSpans[0]?.id ?? null);
|
||||
setSelectedRemediationId(null);
|
||||
};
|
||||
|
||||
const setPlaybackElapsed = (nextElapsedMs: number) => {
|
||||
const clampedElapsedMs = Math.min(Math.max(nextElapsedMs, 0), story.durationMs);
|
||||
elapsedMsRef.current = clampedElapsedMs;
|
||||
setElapsedMs(clampedElapsedMs);
|
||||
if (isPlaying) {
|
||||
playbackAnchorRef.current = {
|
||||
elapsedMs: clampedElapsedMs,
|
||||
startedAt: performance.now(),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppEnabledGuard appId="analytics">
|
||||
<PageLayout fillWidth allowContentOverflow>
|
||||
<div className="flex flex-col gap-4">
|
||||
<StickyPageHeader
|
||||
title="Mission Control"
|
||||
description="Playback real user impact from first symptom to verified recovery."
|
||||
sticky
|
||||
layoutGroupId="mission-control-sticky-header"
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<DesignBadge
|
||||
label={story.severity}
|
||||
color={story.severity === "SEV-1" ? "red" : "orange"}
|
||||
size="sm"
|
||||
/>
|
||||
<DesignBadge label="Synthetic incident" color="cyan" size="sm" />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<DesignCategoryTabs
|
||||
categories={storyCategories}
|
||||
selectedCategory={story.id}
|
||||
onSelect={selectStory}
|
||||
showBadge
|
||||
gradient="cyan"
|
||||
glassmorphic
|
||||
/>
|
||||
|
||||
<DesignAlert
|
||||
variant={
|
||||
activeStage?.kind === "impact"
|
||||
? "error"
|
||||
: activeStage?.kind === "mitigation"
|
||||
? "warning"
|
||||
: activeStage?.kind === "recovery"
|
||||
? "success"
|
||||
: "info"
|
||||
}
|
||||
title={activeStage?.title ?? story.title}
|
||||
description={activeStage?.summary ?? story.summary}
|
||||
glassmorphic
|
||||
/>
|
||||
|
||||
<IncidentPlayback
|
||||
story={story}
|
||||
elapsedMs={elapsedMs}
|
||||
isPlaying={isPlaying}
|
||||
onElapsedChange={setPlaybackElapsed}
|
||||
onPlayingChange={setIsPlaying}
|
||||
/>
|
||||
|
||||
<div className="grid min-w-0 gap-4 2xl:grid-cols-[minmax(0,1.35fr)_minmax(24rem,0.65fr)]">
|
||||
<TelemetryInvestigation
|
||||
story={story}
|
||||
activeStageIndex={activeStageIndex}
|
||||
selectedSpanId={selectedSpanId}
|
||||
onSelectSpan={setSelectedSpanId}
|
||||
/>
|
||||
<IncidentEvidence
|
||||
story={story}
|
||||
activeStageIndex={activeStageIndex}
|
||||
selectedRemediationId={selectedRemediationId}
|
||||
onSelectRemediation={setSelectedRemediationId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
</AppEnabledGuard>
|
||||
);
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import PageClient from "./page-client";
|
||||
|
||||
export const metadata = {
|
||||
title: "Mission Control",
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
return <PageClient />;
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { formatPlaybackTime, getPlaybackStage, INCIDENT_STORIES, interpolateMetric } from "./stories";
|
||||
|
||||
describe("INCIDENT_STORIES", () => {
|
||||
it("provides four deterministic selectable scenarios", () => {
|
||||
expect(INCIDENT_STORIES.map((story) => story.id)).toEqual([
|
||||
"safari-webcrypto-checkout",
|
||||
"mfa-retry-storm",
|
||||
"webhook-poison-message",
|
||||
"ai-agent-wrong-refund",
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("getPlaybackStage", () => {
|
||||
const story = INCIDENT_STORIES[0];
|
||||
|
||||
it("selects the latest stage whose boundary has been reached", () => {
|
||||
expect(getPlaybackStage(story, 299_999)?.id).toBe("safari-impact");
|
||||
expect(getPlaybackStage(story, 300_000)?.id).toBe("safari-diagnosis");
|
||||
expect(getPlaybackStage(story, 300_001)?.id).toBe("safari-diagnosis");
|
||||
});
|
||||
|
||||
it("uses the first stage before playback starts and the final stage after playback ends", () => {
|
||||
expect(getPlaybackStage(story, -1)?.id).toBe("safari-healthy");
|
||||
expect(getPlaybackStage(story, story.durationMs + 1)?.id).toBe("safari-recovery");
|
||||
});
|
||||
|
||||
it("returns undefined when a story has no stages", () => {
|
||||
expect(getPlaybackStage({ ...story, stages: [] }, 0)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("interpolateMetric", () => {
|
||||
it("interpolates within the range in either direction", () => {
|
||||
expect(interpolateMetric(10, 30, 0.25)).toBe(15);
|
||||
expect(interpolateMetric(30, 10, 0.25)).toBe(25);
|
||||
});
|
||||
|
||||
it("clamps progress at both boundaries", () => {
|
||||
expect(interpolateMetric(10, 30, -0.5)).toBe(10);
|
||||
expect(interpolateMetric(10, 30, 1.5)).toBe(30);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatPlaybackTime", () => {
|
||||
it("formats elapsed milliseconds as minute playback time", () => {
|
||||
expect(formatPlaybackTime(0)).toBe("0:00");
|
||||
expect(formatPlaybackTime(65_999)).toBe("1:05");
|
||||
});
|
||||
|
||||
it("clamps invalid or negative elapsed time to zero", () => {
|
||||
expect(formatPlaybackTime(-1)).toBe("0:00");
|
||||
expect(formatPlaybackTime(Number.NaN)).toBe("0:00");
|
||||
});
|
||||
});
|
||||
+688
@@ -0,0 +1,688 @@
|
||||
export type IncidentSeverity = "SEV-1" | "SEV-2";
|
||||
|
||||
export type IncidentStageKind = "healthy" | "change" | "impact" | "diagnosis" | "mitigation" | "recovery";
|
||||
|
||||
export type MetricUnit = "percent" | "milliseconds" | "count" | "requests-per-minute" | "dollars";
|
||||
|
||||
export type IncidentMetric = {
|
||||
id: string,
|
||||
label: string,
|
||||
unit: MetricUnit,
|
||||
higherIsWorse: boolean,
|
||||
baseline: number,
|
||||
current: number,
|
||||
recovered: number,
|
||||
};
|
||||
|
||||
export type StageMetricValue = {
|
||||
metricId: string,
|
||||
value: number,
|
||||
};
|
||||
|
||||
export type IncidentStage = {
|
||||
id: string,
|
||||
kind: IncidentStageKind,
|
||||
offsetMs: number,
|
||||
title: string,
|
||||
summary: string,
|
||||
metricValues: StageMetricValue[],
|
||||
evidenceIds: string[],
|
||||
};
|
||||
|
||||
export type StackFrame = {
|
||||
functionName: string,
|
||||
file: string,
|
||||
line: number,
|
||||
column: number,
|
||||
inApplication: boolean,
|
||||
};
|
||||
|
||||
export type Breadcrumb = {
|
||||
offsetMs: number,
|
||||
category: "navigation" | "ui" | "http" | "console" | "queue" | "ai",
|
||||
message: string,
|
||||
level: "info" | "warning" | "error",
|
||||
};
|
||||
|
||||
export type IncidentError = {
|
||||
id: string,
|
||||
stageId: string,
|
||||
fingerprint: string,
|
||||
title: string,
|
||||
message: string,
|
||||
count: number,
|
||||
affectedUsers: number,
|
||||
traceId: string,
|
||||
spanId: string,
|
||||
stackFrames: StackFrame[],
|
||||
breadcrumbs: Breadcrumb[],
|
||||
};
|
||||
|
||||
export type LogAttribute = {
|
||||
key: string,
|
||||
value: string | number | boolean,
|
||||
};
|
||||
|
||||
export type StructuredLog = {
|
||||
id: string,
|
||||
stageId: string,
|
||||
offsetMs: number,
|
||||
timestamp: string,
|
||||
level: "debug" | "info" | "warn" | "error",
|
||||
service: string,
|
||||
message: string,
|
||||
traceId: string,
|
||||
spanId: string,
|
||||
attributes: LogAttribute[],
|
||||
};
|
||||
|
||||
export type WaterfallSpan = {
|
||||
id: string,
|
||||
parentId: string | null,
|
||||
traceId: string,
|
||||
service: string,
|
||||
operation: string,
|
||||
startOffsetMs: number,
|
||||
durationMs: number,
|
||||
status: "ok" | "error",
|
||||
attributes: LogAttribute[],
|
||||
};
|
||||
|
||||
export type ReplayFrame = {
|
||||
id: string,
|
||||
stageId: string,
|
||||
offsetMs: number,
|
||||
route: string,
|
||||
title: string,
|
||||
description: string,
|
||||
cursorX: number,
|
||||
cursorY: number,
|
||||
viewportWidth: number,
|
||||
viewportHeight: number,
|
||||
highlightedSelector: string | null,
|
||||
};
|
||||
|
||||
export type DeploymentMetadata = {
|
||||
id: string,
|
||||
environment: "production",
|
||||
service: string,
|
||||
version: string,
|
||||
startedAt: string,
|
||||
completedAt: string,
|
||||
status: "succeeded" | "rolled-back",
|
||||
};
|
||||
|
||||
export type ConfigChange = {
|
||||
key: string,
|
||||
previousValue: string,
|
||||
nextValue: string,
|
||||
changedAt: string,
|
||||
changedBy: string,
|
||||
};
|
||||
|
||||
export type FeatureFlagMetadata = {
|
||||
key: string,
|
||||
previousVariant: string,
|
||||
currentVariant: string,
|
||||
rolloutPercent: number,
|
||||
changedAt: string,
|
||||
};
|
||||
|
||||
export type ChangeMetadata = {
|
||||
deployment: DeploymentMetadata,
|
||||
configChanges: ConfigChange[],
|
||||
featureFlags: FeatureFlagMetadata[],
|
||||
};
|
||||
|
||||
export type ChangedLine = {
|
||||
file: string,
|
||||
startLine: number,
|
||||
endLine: number,
|
||||
summary: string,
|
||||
};
|
||||
|
||||
export type SuspectChange = {
|
||||
commitSha: string,
|
||||
commitTitle: string,
|
||||
pullRequestNumber: number,
|
||||
pullRequestTitle: string,
|
||||
author: string,
|
||||
owner: string,
|
||||
mergedAt: string,
|
||||
changedLines: ChangedLine[],
|
||||
};
|
||||
|
||||
export type RootCauseEvidence = {
|
||||
id: string,
|
||||
stageId: string,
|
||||
signal: string,
|
||||
explanation: string,
|
||||
confidence: number,
|
||||
supportingEvidenceIds: string[],
|
||||
};
|
||||
|
||||
export type RemediationAction = {
|
||||
id: string,
|
||||
title: string,
|
||||
owner: string,
|
||||
status: "completed" | "in-progress" | "planned",
|
||||
completedAt: string | null,
|
||||
details: string,
|
||||
};
|
||||
|
||||
export type SloData = {
|
||||
objective: string,
|
||||
targetPercent: number,
|
||||
windowDays: number,
|
||||
observedPercent: number,
|
||||
burnRate: number,
|
||||
budgetRemainingBeforePercent: number,
|
||||
budgetRemainingCurrentPercent: number,
|
||||
projectedMinutesToExhaustion: number,
|
||||
};
|
||||
|
||||
export type TopologyNode = {
|
||||
id: string,
|
||||
label: string,
|
||||
kind: "browser" | "edge" | "service" | "database" | "queue" | "provider" | "ai-model",
|
||||
health: "healthy" | "degraded" | "critical",
|
||||
requestRate: number,
|
||||
errorRatePercent: number,
|
||||
latencyP95Ms: number,
|
||||
};
|
||||
|
||||
export type TopologyEdge = {
|
||||
id: string,
|
||||
source: string,
|
||||
target: string,
|
||||
protocol: "HTTPS" | "gRPC" | "SQL" | "queue" | "tool-call",
|
||||
health: "healthy" | "degraded" | "critical",
|
||||
requestsPerMinute: number,
|
||||
};
|
||||
|
||||
export type ServiceTopology = {
|
||||
nodes: TopologyNode[],
|
||||
edges: TopologyEdge[],
|
||||
};
|
||||
|
||||
export type IncidentStory = {
|
||||
id: string,
|
||||
title: string,
|
||||
shortTitle: string,
|
||||
severity: IncidentSeverity,
|
||||
status: "resolved",
|
||||
startedAt: string,
|
||||
resolvedAt: string,
|
||||
durationMs: number,
|
||||
summary: string,
|
||||
userImpact: string,
|
||||
businessImpact: string,
|
||||
affectedUsers: number,
|
||||
affectedRegion: string,
|
||||
metrics: IncidentMetric[],
|
||||
stages: IncidentStage[],
|
||||
errors: IncidentError[],
|
||||
logs: StructuredLog[],
|
||||
waterfallSpans: WaterfallSpan[],
|
||||
replayFrames: ReplayFrame[],
|
||||
change: ChangeMetadata,
|
||||
suspect: SuspectChange,
|
||||
rootCauseEvidence: RootCauseEvidence[],
|
||||
remediationActions: RemediationAction[],
|
||||
slo: SloData,
|
||||
topology: ServiceTopology,
|
||||
};
|
||||
|
||||
export function getPlaybackStage(story: IncidentStory, elapsedMs: number): IncidentStage | undefined {
|
||||
let selected = story.stages[0];
|
||||
for (const stage of story.stages) {
|
||||
if (stage.offsetMs > elapsedMs) break;
|
||||
selected = stage;
|
||||
}
|
||||
return selected;
|
||||
}
|
||||
|
||||
export function interpolateMetric(from: number, to: number, progress: number): number {
|
||||
const clampedProgress = Math.min(Math.max(progress, 0), 1);
|
||||
return from + (to - from) * clampedProgress;
|
||||
}
|
||||
|
||||
export function formatPlaybackTime(elapsedMs: number): string {
|
||||
const clampedMs = Number.isFinite(elapsedMs) ? Math.max(0, elapsedMs) : 0;
|
||||
const totalSeconds = Math.floor(clampedMs / 1000);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
const safariStory: IncidentStory = {
|
||||
id: "safari-webcrypto-checkout",
|
||||
title: "Safari checkout failures after WebCrypto rollout",
|
||||
shortTitle: "Safari checkout",
|
||||
severity: "SEV-1",
|
||||
status: "resolved",
|
||||
startedAt: "2026-06-18T14:02:00.000Z",
|
||||
resolvedAt: "2026-06-18T14:14:00.000Z",
|
||||
durationMs: 720_000,
|
||||
summary: "A WebCrypto tokenization path enabled by a production flag rejected Safari checkout sessions.",
|
||||
userImpact: "Safari shoppers saw payment confirmation fail after submitting otherwise valid card details.",
|
||||
businessImpact: "An estimated $184,200 in checkout volume was delayed; recovered carts were offered a retry.",
|
||||
affectedUsers: 4_812,
|
||||
affectedRegion: "Global, Safari 17.4–17.5",
|
||||
metrics: [
|
||||
{ id: "checkout-error-rate", label: "Checkout error rate", unit: "percent", higherIsWorse: true, baseline: 0.7, current: 31.8, recovered: 0.9 },
|
||||
{ id: "checkout-p95", label: "Checkout p95", unit: "milliseconds", higherIsWorse: true, baseline: 820, current: 4_900, recovered: 880 },
|
||||
{ id: "revenue-at-risk", label: "Revenue at risk", unit: "dollars", higherIsWorse: true, baseline: 0, current: 184_200, recovered: 12_400 },
|
||||
],
|
||||
stages: [
|
||||
{ id: "safari-healthy", kind: "healthy", offsetMs: 0, title: "Healthy baseline", summary: "Checkout conversion and latency are within objective.", metricValues: [{ metricId: "checkout-error-rate", value: 0.7 }, { metricId: "checkout-p95", value: 820 }], evidenceIds: [] },
|
||||
{ id: "safari-change", kind: "change", offsetMs: 60_000, title: "WebCrypto flag reaches 100%", summary: "Deploy checkout-web 8.42.0 completes and secure-token-v2 expands globally.", metricValues: [{ metricId: "checkout-error-rate", value: 1.1 }, { metricId: "checkout-p95", value: 900 }], evidenceIds: ["log-safari-deploy"] },
|
||||
{ id: "safari-impact", kind: "impact", offsetMs: 150_000, title: "Safari failures spike", summary: "SubtleCrypto rejects a legacy key encoding used only by the Safari adapter.", metricValues: [{ metricId: "checkout-error-rate", value: 31.8 }, { metricId: "checkout-p95", value: 4_900 }], evidenceIds: ["err-safari-crypto", "span-safari-tokenize", "replay-safari-error"] },
|
||||
{ id: "safari-diagnosis", kind: "diagnosis", offsetMs: 300_000, title: "Browser correlation isolated", summary: "AI analysis links the failures to Safari, the flag cohort, and the rollout commit.", metricValues: [{ metricId: "checkout-error-rate", value: 28.4 }, { metricId: "checkout-p95", value: 4_500 }], evidenceIds: ["rc-safari-correlation"] },
|
||||
{ id: "safari-mitigation", kind: "mitigation", offsetMs: 480_000, title: "Flag rolled back", summary: "Safari traffic returns to the previous tokenization implementation.", metricValues: [{ metricId: "checkout-error-rate", value: 8.2 }, { metricId: "checkout-p95", value: 1_600 }], evidenceIds: ["log-safari-rollback"] },
|
||||
{ id: "safari-recovery", kind: "recovery", offsetMs: 660_000, title: "Checkout recovered", summary: "Error rate and conversion return to baseline.", metricValues: [{ metricId: "checkout-error-rate", value: 0.9 }, { metricId: "checkout-p95", value: 880 }], evidenceIds: [] },
|
||||
],
|
||||
errors: [{
|
||||
id: "err-safari-crypto",
|
||||
stageId: "safari-impact",
|
||||
fingerprint: "checkout-webcrypto-dataerror-safari",
|
||||
title: "DataError: invalid keyData",
|
||||
message: "Failed to execute 'importKey' on 'SubtleCrypto': The provided data is invalid.",
|
||||
count: 6_204,
|
||||
affectedUsers: 4_812,
|
||||
traceId: "trace-safari-7d2c",
|
||||
spanId: "span-safari-tokenize",
|
||||
stackFrames: [
|
||||
{ functionName: "importCheckoutKey", file: "src/crypto/webcrypto-tokenizer.ts", line: 118, column: 24, inApplication: true },
|
||||
{ functionName: "tokenizePaymentMethod", file: "src/checkout/payment-session.ts", line: 204, column: 17, inApplication: true },
|
||||
{ functionName: "confirmOrder", file: "src/checkout/confirm-order.ts", line: 77, column: 11, inApplication: true },
|
||||
],
|
||||
breadcrumbs: [
|
||||
{ offsetMs: 143_000, category: "ui", message: "Customer clicked Place order", level: "info" },
|
||||
{ offsetMs: 143_180, category: "http", message: "POST /payment-session returned 200", level: "info" },
|
||||
{ offsetMs: 143_240, category: "console", message: "WebCrypto key import failed", level: "error" },
|
||||
],
|
||||
}],
|
||||
logs: [
|
||||
{ id: "log-safari-deploy", stageId: "safari-change", offsetMs: 60_000, timestamp: "2026-06-18T14:03:00.000Z", level: "info", service: "release-controller", message: "Production rollout completed", traceId: "trace-deploy-8420", spanId: "span-deploy-complete", attributes: [{ key: "version", value: "8.42.0" }, { key: "flag.secure-token-v2", value: "enabled" }] },
|
||||
{ id: "log-safari-error", stageId: "safari-impact", offsetMs: 151_000, timestamp: "2026-06-18T14:04:31.000Z", level: "error", service: "checkout-web", message: "Payment tokenization failed", traceId: "trace-safari-7d2c", spanId: "span-safari-tokenize", attributes: [{ key: "browser", value: "Safari 17.5" }, { key: "crypto.provider", value: "WebCrypto" }, { key: "flag.variant", value: "enabled" }] },
|
||||
{ id: "log-safari-rollback", stageId: "safari-mitigation", offsetMs: 480_000, timestamp: "2026-06-18T14:10:00.000Z", level: "warn", service: "flag-controller", message: "Feature flag rolled back", traceId: "trace-flag-rollback", spanId: "span-flag-write", attributes: [{ key: "flag", value: "secure-token-v2" }, { key: "rollout_percent", value: 0 }] },
|
||||
],
|
||||
waterfallSpans: [
|
||||
{ id: "span-safari-checkout", parentId: null, traceId: "trace-safari-7d2c", service: "checkout-web", operation: "POST /checkout/confirm", startOffsetMs: 143_000, durationMs: 1_240, status: "error", attributes: [{ key: "browser", value: "Safari" }] },
|
||||
{ id: "span-safari-session", parentId: "span-safari-checkout", traceId: "trace-safari-7d2c", service: "payment-api", operation: "create payment session", startOffsetMs: 143_140, durationMs: 210, status: "ok", attributes: [{ key: "status_code", value: 200 }] },
|
||||
{ id: "span-safari-tokenize", parentId: "span-safari-checkout", traceId: "trace-safari-7d2c", service: "checkout-web", operation: "webcrypto.importKey", startOffsetMs: 143_360, durationMs: 24, status: "error", attributes: [{ key: "exception.type", value: "DataError" }] },
|
||||
],
|
||||
replayFrames: [
|
||||
{ id: "replay-safari-submit", stageId: "safari-impact", offsetMs: 143_000, route: "/checkout/payment", title: "Order submitted", description: "A fictional shopper submits valid payment details.", cursorX: 904, cursorY: 691, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-action='place-order']" },
|
||||
{ id: "replay-safari-error", stageId: "safari-impact", offsetMs: 144_300, route: "/checkout/payment", title: "Confirmation fails", description: "The button stops loading and an actionable retry message appears.", cursorX: 904, cursorY: 691, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[role='alert']" },
|
||||
],
|
||||
change: {
|
||||
deployment: { id: "dep-checkout-8420", environment: "production", service: "checkout-web", version: "8.42.0", startedAt: "2026-06-18T14:01:20.000Z", completedAt: "2026-06-18T14:03:00.000Z", status: "rolled-back" },
|
||||
configChanges: [{ key: "crypto.keyFormat", previousValue: "raw", nextValue: "spki", changedAt: "2026-06-18T14:03:00.000Z", changedBy: "release-controller" }],
|
||||
featureFlags: [{ key: "secure-token-v2", previousVariant: "disabled", currentVariant: "enabled", rolloutPercent: 100, changedAt: "2026-06-18T14:03:00.000Z" }],
|
||||
},
|
||||
suspect: {
|
||||
commitSha: "7d2c9a1",
|
||||
commitTitle: "Use WebCrypto for checkout token wrapping",
|
||||
pullRequestNumber: 4182,
|
||||
pullRequestTitle: "Roll out browser-native payment tokenization",
|
||||
author: "Mira Chen",
|
||||
owner: "Payments Platform",
|
||||
mergedAt: "2026-06-18T13:42:00.000Z",
|
||||
changedLines: [
|
||||
{ file: "src/crypto/webcrypto-tokenizer.ts", startLine: 96, endLine: 124, summary: "Selects SPKI key import for the new browser path." },
|
||||
{ file: "src/checkout/payment-session.ts", startLine: 198, endLine: 210, summary: "Routes enabled cohorts through WebCrypto." },
|
||||
],
|
||||
},
|
||||
rootCauseEvidence: [
|
||||
{ id: "rc-safari-correlation", stageId: "safari-diagnosis", signal: "Cohort correlation", explanation: "99.2% of failures are Safari sessions in the enabled flag cohort; control traffic remains healthy.", confidence: 0.98, supportingEvidenceIds: ["err-safari-crypto", "log-safari-deploy"] },
|
||||
{ id: "rc-safari-code", stageId: "safari-diagnosis", signal: "Stack-to-diff match", explanation: "The top application frame intersects the only changed key-import lines in the suspect commit.", confidence: 0.96, supportingEvidenceIds: ["err-safari-crypto", "span-safari-tokenize"] },
|
||||
],
|
||||
remediationActions: [
|
||||
{ id: "rem-safari-rollback", title: "Disable secure-token-v2", owner: "Payments Platform", status: "completed", completedAt: "2026-06-18T14:10:00.000Z", details: "Returned all browsers to the compatible tokenization path." },
|
||||
{ id: "rem-safari-test", title: "Add Safari WebCrypto compatibility suite", owner: "Checkout Quality", status: "in-progress", completedAt: null, details: "Covers key encodings on supported Safari releases before rollout." },
|
||||
],
|
||||
slo: { objective: "Successful checkout confirmations", targetPercent: 99.9, windowDays: 30, observedPercent: 99.61, burnRate: 18.4, budgetRemainingBeforePercent: 71.2, budgetRemainingCurrentPercent: 52.8, projectedMinutesToExhaustion: 96 },
|
||||
topology: {
|
||||
nodes: [
|
||||
{ id: "safari-browser", label: "Safari browser", kind: "browser", health: "critical", requestRate: 8_420, errorRatePercent: 31.8, latencyP95Ms: 4_900 },
|
||||
{ id: "checkout-web", label: "Checkout Web", kind: "edge", health: "degraded", requestRate: 24_800, errorRatePercent: 10.9, latencyP95Ms: 2_100 },
|
||||
{ id: "payment-api", label: "Payment API", kind: "service", health: "healthy", requestRate: 23_900, errorRatePercent: 0.3, latencyP95Ms: 290 },
|
||||
{ id: "payment-provider", label: "Payment Provider", kind: "provider", health: "healthy", requestRate: 23_700, errorRatePercent: 0.2, latencyP95Ms: 340 },
|
||||
],
|
||||
edges: [
|
||||
{ id: "edge-safari-checkout", source: "safari-browser", target: "checkout-web", protocol: "HTTPS", health: "critical", requestsPerMinute: 8_420 },
|
||||
{ id: "edge-checkout-payment", source: "checkout-web", target: "payment-api", protocol: "HTTPS", health: "healthy", requestsPerMinute: 23_900 },
|
||||
{ id: "edge-payment-provider", source: "payment-api", target: "payment-provider", protocol: "HTTPS", health: "healthy", requestsPerMinute: 23_700 },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const mfaStory: IncidentStory = {
|
||||
id: "mfa-retry-storm",
|
||||
title: "MFA retry policy triggered an authentication storm",
|
||||
shortTitle: "MFA retry storm",
|
||||
severity: "SEV-1",
|
||||
status: "resolved",
|
||||
startedAt: "2026-06-22T09:30:00.000Z",
|
||||
resolvedAt: "2026-06-22T09:48:00.000Z",
|
||||
durationMs: 1_080_000,
|
||||
summary: "A configuration change removed retry jitter and synchronized failed MFA verification attempts.",
|
||||
userImpact: "Users with MFA enabled experienced repeated prompts, delayed verification, and temporary sign-in failures.",
|
||||
businessImpact: "Enterprise login success fell by 22%, delaying access for 7,930 employees across fictional tenants.",
|
||||
affectedUsers: 7_930,
|
||||
affectedRegion: "North America and Europe",
|
||||
metrics: [
|
||||
{ id: "mfa-error-rate", label: "MFA verification errors", unit: "percent", higherIsWorse: true, baseline: 0.5, current: 24.6, recovered: 0.7 },
|
||||
{ id: "mfa-rpm", label: "MFA verify traffic", unit: "requests-per-minute", higherIsWorse: true, baseline: 12_400, current: 91_000, recovered: 13_100 },
|
||||
{ id: "mfa-p95", label: "Verification p95", unit: "milliseconds", higherIsWorse: true, baseline: 410, current: 8_700, recovered: 460 },
|
||||
],
|
||||
stages: [
|
||||
{ id: "mfa-healthy", kind: "healthy", offsetMs: 0, title: "Healthy baseline", summary: "MFA verification is stable with randomized backoff.", metricValues: [{ metricId: "mfa-error-rate", value: 0.5 }, { metricId: "mfa-rpm", value: 12_400 }], evidenceIds: [] },
|
||||
{ id: "mfa-change", kind: "change", offsetMs: 90_000, title: "Retry config published", summary: "Retry delay changes from exponential jitter to a fixed 100 ms interval.", metricValues: [{ metricId: "mfa-error-rate", value: 0.8 }, { metricId: "mfa-rpm", value: 13_800 }], evidenceIds: ["log-mfa-config"] },
|
||||
{ id: "mfa-impact", kind: "impact", offsetMs: 210_000, title: "Retries synchronize", summary: "Clients retry in lockstep and exhaust verifier capacity.", metricValues: [{ metricId: "mfa-error-rate", value: 24.6 }, { metricId: "mfa-rpm", value: 91_000 }], evidenceIds: ["err-mfa-timeout", "span-mfa-redis"] },
|
||||
{ id: "mfa-diagnosis", kind: "diagnosis", offsetMs: 420_000, title: "Retry amplification identified", summary: "Trace fan-out and config history identify the missing jitter.", metricValues: [{ metricId: "mfa-error-rate", value: 20.1 }, { metricId: "mfa-rpm", value: 84_500 }], evidenceIds: ["rc-mfa-amplification"] },
|
||||
{ id: "mfa-mitigation", kind: "mitigation", offsetMs: 720_000, title: "Configuration reverted", summary: "Exponential backoff and jitter are restored.", metricValues: [{ metricId: "mfa-error-rate", value: 5.4 }, { metricId: "mfa-rpm", value: 29_000 }], evidenceIds: ["log-mfa-revert"] },
|
||||
{ id: "mfa-recovery", kind: "recovery", offsetMs: 1_020_000, title: "Authentication recovered", summary: "Queues drain and successful verification returns to objective.", metricValues: [{ metricId: "mfa-error-rate", value: 0.7 }, { metricId: "mfa-rpm", value: 13_100 }], evidenceIds: [] },
|
||||
],
|
||||
errors: [{
|
||||
id: "err-mfa-timeout",
|
||||
stageId: "mfa-impact",
|
||||
fingerprint: "mfa-verifier-capacity-timeout",
|
||||
title: "MfaVerificationTimeout",
|
||||
message: "MFA verification exceeded the 5 second request deadline.",
|
||||
count: 28_411,
|
||||
affectedUsers: 7_930,
|
||||
traceId: "trace-mfa-a91e",
|
||||
spanId: "span-mfa-verify",
|
||||
stackFrames: [
|
||||
{ functionName: "verifyChallenge", file: "src/auth/mfa/verifier.ts", line: 146, column: 19, inApplication: true },
|
||||
{ functionName: "consumeAttempt", file: "src/auth/mfa/rate-limit.ts", line: 88, column: 13, inApplication: true },
|
||||
{ functionName: "postMfaVerify", file: "src/routes/mfa.ts", line: 54, column: 9, inApplication: true },
|
||||
],
|
||||
breadcrumbs: [
|
||||
{ offsetMs: 202_000, category: "ui", message: "User submitted authenticator code", level: "info" },
|
||||
{ offsetMs: 207_000, category: "http", message: "POST /auth/mfa/verify timed out", level: "error" },
|
||||
{ offsetMs: 207_100, category: "http", message: "Client scheduled retry in 100 ms", level: "warning" },
|
||||
],
|
||||
}],
|
||||
logs: [
|
||||
{ id: "log-mfa-config", stageId: "mfa-change", offsetMs: 90_000, timestamp: "2026-06-22T09:31:30.000Z", level: "info", service: "config-controller", message: "Authentication configuration activated", traceId: "trace-config-mfa", spanId: "span-config-publish", attributes: [{ key: "retry.strategy", value: "fixed" }, { key: "retry.delay_ms", value: 100 }, { key: "retry.jitter", value: false }] },
|
||||
{ id: "log-mfa-overload", stageId: "mfa-impact", offsetMs: 212_000, timestamp: "2026-06-22T09:33:32.000Z", level: "error", service: "mfa-verifier", message: "Verifier concurrency limit reached", traceId: "trace-mfa-a91e", spanId: "span-mfa-verify", attributes: [{ key: "in_flight", value: 5_000 }, { key: "retry_attempt", value: 4 }] },
|
||||
{ id: "log-mfa-revert", stageId: "mfa-mitigation", offsetMs: 720_000, timestamp: "2026-06-22T09:42:00.000Z", level: "warn", service: "config-controller", message: "Authentication configuration reverted", traceId: "trace-config-revert", spanId: "span-config-publish", attributes: [{ key: "retry.strategy", value: "exponential" }, { key: "retry.jitter", value: true }] },
|
||||
],
|
||||
waterfallSpans: [
|
||||
{ id: "span-mfa-request", parentId: null, traceId: "trace-mfa-a91e", service: "auth-edge", operation: "POST /auth/mfa/verify", startOffsetMs: 202_000, durationMs: 5_010, status: "error", attributes: [{ key: "attempt", value: 4 }] },
|
||||
{ id: "span-mfa-verify", parentId: "span-mfa-request", traceId: "trace-mfa-a91e", service: "mfa-verifier", operation: "verify TOTP", startOffsetMs: 202_014, durationMs: 4_982, status: "error", attributes: [{ key: "deadline_ms", value: 5_000 }] },
|
||||
{ id: "span-mfa-redis", parentId: "span-mfa-verify", traceId: "trace-mfa-a91e", service: "attempt-store", operation: "GET mfa_attempt", startOffsetMs: 202_025, durationMs: 4_120, status: "error", attributes: [{ key: "pool.wait_ms", value: 4_090 }] },
|
||||
],
|
||||
replayFrames: [
|
||||
{ id: "replay-mfa-prompt", stageId: "mfa-impact", offsetMs: 202_000, route: "/auth/mfa", title: "Verification submitted", description: "A fictional user enters a valid authenticator code.", cursorX: 720, cursorY: 566, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-action='verify-mfa']" },
|
||||
{ id: "replay-mfa-retry", stageId: "mfa-impact", offsetMs: 207_100, route: "/auth/mfa", title: "Automatic retry starts", description: "The client retries too quickly while the first request is still clearing.", cursorX: 720, cursorY: 566, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-state='retrying']" },
|
||||
],
|
||||
change: {
|
||||
deployment: { id: "dep-auth-config-119", environment: "production", service: "config-controller", version: "config-119", startedAt: "2026-06-22T09:31:20.000Z", completedAt: "2026-06-22T09:31:30.000Z", status: "rolled-back" },
|
||||
configChanges: [
|
||||
{ key: "auth.mfa.retryStrategy", previousValue: "exponential-jitter", nextValue: "fixed", changedAt: "2026-06-22T09:31:30.000Z", changedBy: "auth-config-bot" },
|
||||
{ key: "auth.mfa.retryDelayMs", previousValue: "750", nextValue: "100", changedAt: "2026-06-22T09:31:30.000Z", changedBy: "auth-config-bot" },
|
||||
],
|
||||
featureFlags: [{ key: "mfa-client-retry-v3", previousVariant: "control", currentVariant: "fixed-delay", rolloutPercent: 100, changedAt: "2026-06-22T09:31:30.000Z" }],
|
||||
},
|
||||
suspect: {
|
||||
commitSha: "a91ef04",
|
||||
commitTitle: "Simplify MFA retry configuration",
|
||||
pullRequestNumber: 4219,
|
||||
pullRequestTitle: "Unify authentication retry defaults",
|
||||
author: "Jon Bell",
|
||||
owner: "Identity Reliability",
|
||||
mergedAt: "2026-06-22T08:55:00.000Z",
|
||||
changedLines: [
|
||||
{ file: "config/authentication.ts", startLine: 44, endLine: 58, summary: "Replaces randomized backoff with a fixed interval." },
|
||||
{ file: "src/auth/mfa/retry-policy.ts", startLine: 71, endLine: 86, summary: "Reads the shared retry delay for MFA verification." },
|
||||
],
|
||||
},
|
||||
rootCauseEvidence: [
|
||||
{ id: "rc-mfa-amplification", stageId: "mfa-diagnosis", signal: "Retry periodicity", explanation: "Request bursts repeat at exactly 100 ms intervals, matching the activated configuration.", confidence: 0.99, supportingEvidenceIds: ["log-mfa-config", "err-mfa-timeout"] },
|
||||
{ id: "rc-mfa-capacity", stageId: "mfa-diagnosis", signal: "Trace queue time", explanation: "82% of failed trace duration is waiting for the attempt-store pool rather than computing TOTP.", confidence: 0.94, supportingEvidenceIds: ["span-mfa-redis", "log-mfa-overload"] },
|
||||
],
|
||||
remediationActions: [
|
||||
{ id: "rem-mfa-revert", title: "Restore exponential jitter", owner: "Identity Reliability", status: "completed", completedAt: "2026-06-22T09:42:00.000Z", details: "Reverted retry settings and invalidated the fixed-delay configuration." },
|
||||
{ id: "rem-mfa-guardrail", title: "Add retry amplification policy check", owner: "Platform Safety", status: "planned", completedAt: null, details: "Rejects production configuration with synchronized sub-second retries." },
|
||||
],
|
||||
slo: { objective: "Successful MFA verification", targetPercent: 99.95, windowDays: 30, observedPercent: 99.71, burnRate: 24.2, budgetRemainingBeforePercent: 64.5, budgetRemainingCurrentPercent: 39.8, projectedMinutesToExhaustion: 61 },
|
||||
topology: {
|
||||
nodes: [
|
||||
{ id: "auth-edge", label: "Auth Edge", kind: "edge", health: "degraded", requestRate: 91_000, errorRatePercent: 24.6, latencyP95Ms: 8_700 },
|
||||
{ id: "mfa-verifier", label: "MFA Verifier", kind: "service", health: "critical", requestRate: 88_400, errorRatePercent: 25.1, latencyP95Ms: 8_200 },
|
||||
{ id: "attempt-store", label: "Attempt Store", kind: "database", health: "critical", requestRate: 86_700, errorRatePercent: 9.4, latencyP95Ms: 6_100 },
|
||||
{ id: "user-directory", label: "User Directory", kind: "database", health: "healthy", requestRate: 12_900, errorRatePercent: 0.1, latencyP95Ms: 48 },
|
||||
],
|
||||
edges: [
|
||||
{ id: "edge-auth-mfa", source: "auth-edge", target: "mfa-verifier", protocol: "gRPC", health: "critical", requestsPerMinute: 88_400 },
|
||||
{ id: "edge-mfa-attempts", source: "mfa-verifier", target: "attempt-store", protocol: "SQL", health: "critical", requestsPerMinute: 86_700 },
|
||||
{ id: "edge-mfa-directory", source: "mfa-verifier", target: "user-directory", protocol: "SQL", health: "healthy", requestsPerMinute: 12_900 },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const webhookStory: IncidentStory = {
|
||||
id: "webhook-poison-message",
|
||||
title: "Poison webhook message blocked queue partitions",
|
||||
shortTitle: "Webhook backlog",
|
||||
severity: "SEV-2",
|
||||
status: "resolved",
|
||||
startedAt: "2026-06-25T16:10:00.000Z",
|
||||
resolvedAt: "2026-06-25T16:35:00.000Z",
|
||||
durationMs: 1_500_000,
|
||||
summary: "An unbounded deserialization retry kept a malformed fictional webhook at the head of several queue partitions.",
|
||||
userImpact: "Webhook consumers received account and order events up to 21 minutes late.",
|
||||
businessImpact: "43 fictional merchants experienced delayed fulfillment automation; no events were lost.",
|
||||
affectedUsers: 43,
|
||||
affectedRegion: "us-east queue cluster",
|
||||
metrics: [
|
||||
{ id: "webhook-backlog", label: "Queued webhooks", unit: "count", higherIsWorse: true, baseline: 1_200, current: 184_000, recovered: 1_460 },
|
||||
{ id: "webhook-oldest", label: "Oldest message age", unit: "milliseconds", higherIsWorse: true, baseline: 8_000, current: 1_260_000, recovered: 11_000 },
|
||||
{ id: "webhook-throughput", label: "Delivery throughput", unit: "requests-per-minute", higherIsWorse: false, baseline: 42_000, current: 5_100, recovered: 41_600 },
|
||||
],
|
||||
stages: [
|
||||
{ id: "webhook-healthy", kind: "healthy", offsetMs: 0, title: "Queue healthy", summary: "Workers keep delivery lag below ten seconds.", metricValues: [{ metricId: "webhook-backlog", value: 1_200 }, { metricId: "webhook-throughput", value: 42_000 }], evidenceIds: [] },
|
||||
{ id: "webhook-change", kind: "change", offsetMs: 120_000, title: "Worker 5.18.0 deployed", summary: "A parser refactor removes the terminal dead-letter classification.", metricValues: [{ metricId: "webhook-backlog", value: 1_500 }, { metricId: "webhook-throughput", value: 41_700 }], evidenceIds: ["log-webhook-deploy"] },
|
||||
{ id: "webhook-impact", kind: "impact", offsetMs: 330_000, title: "Poison message loops", summary: "Malformed payloads are retried indefinitely and block partition progress.", metricValues: [{ metricId: "webhook-backlog", value: 184_000 }, { metricId: "webhook-throughput", value: 5_100 }], evidenceIds: ["err-webhook-schema", "span-webhook-decode"] },
|
||||
{ id: "webhook-diagnosis", kind: "diagnosis", offsetMs: 660_000, title: "Partition heads identified", summary: "AI analysis finds identical message IDs at the head of all stalled partitions.", metricValues: [{ metricId: "webhook-backlog", value: 171_000 }, { metricId: "webhook-throughput", value: 7_800 }], evidenceIds: ["rc-webhook-head"] },
|
||||
{ id: "webhook-mitigation", kind: "mitigation", offsetMs: 960_000, title: "Messages quarantined", summary: "Poison messages move to the dead-letter queue and workers scale out.", metricValues: [{ metricId: "webhook-backlog", value: 63_000 }, { metricId: "webhook-throughput", value: 68_000 }], evidenceIds: ["log-webhook-quarantine"] },
|
||||
{ id: "webhook-recovery", kind: "recovery", offsetMs: 1_440_000, title: "Backlog drained", summary: "Delivery lag and throughput return to normal.", metricValues: [{ metricId: "webhook-backlog", value: 1_460 }, { metricId: "webhook-throughput", value: 41_600 }], evidenceIds: [] },
|
||||
],
|
||||
errors: [{
|
||||
id: "err-webhook-schema",
|
||||
stageId: "webhook-impact",
|
||||
fingerprint: "webhook-deserialize-missing-event-type",
|
||||
title: "WebhookPayloadSchemaError",
|
||||
message: "Payload field 'event_type' must be a non-empty string.",
|
||||
count: 91_240,
|
||||
affectedUsers: 43,
|
||||
traceId: "trace-webhook-c4b8",
|
||||
spanId: "span-webhook-decode",
|
||||
stackFrames: [
|
||||
{ functionName: "decodeEnvelope", file: "src/worker/envelope-parser.ts", line: 92, column: 15, inApplication: true },
|
||||
{ functionName: "processDelivery", file: "src/worker/delivery-loop.ts", line: 164, column: 21, inApplication: true },
|
||||
{ functionName: "consumePartition", file: "src/worker/consumer.ts", line: 58, column: 13, inApplication: true },
|
||||
],
|
||||
breadcrumbs: [
|
||||
{ offsetMs: 324_000, category: "queue", message: "Dequeued fictional message wh_msg_demo_1042", level: "info" },
|
||||
{ offsetMs: 324_020, category: "console", message: "Payload validation failed", level: "error" },
|
||||
{ offsetMs: 324_120, category: "queue", message: "Message returned to partition head", level: "warning" },
|
||||
],
|
||||
}],
|
||||
logs: [
|
||||
{ id: "log-webhook-deploy", stageId: "webhook-change", offsetMs: 120_000, timestamp: "2026-06-25T16:12:00.000Z", level: "info", service: "release-controller", message: "Webhook worker deployment completed", traceId: "trace-deploy-5180", spanId: "span-deploy-complete", attributes: [{ key: "version", value: "5.18.0" }, { key: "replicas", value: 48 }] },
|
||||
{ id: "log-webhook-poison", stageId: "webhook-impact", offsetMs: 331_000, timestamp: "2026-06-25T16:15:31.000Z", level: "error", service: "webhook-worker", message: "Delivery processing failed; scheduling retry", traceId: "trace-webhook-c4b8", spanId: "span-webhook-decode", attributes: [{ key: "message_id", value: "wh_msg_demo_1042" }, { key: "attempt", value: 4_812 }, { key: "partition", value: 17 }] },
|
||||
{ id: "log-webhook-quarantine", stageId: "webhook-mitigation", offsetMs: 960_000, timestamp: "2026-06-25T16:26:00.000Z", level: "warn", service: "queue-operator", message: "Poison messages moved to quarantine", traceId: "trace-queue-remediation", spanId: "span-dlq-move", attributes: [{ key: "messages", value: 6 }, { key: "partitions_unblocked", value: 6 }] },
|
||||
],
|
||||
waterfallSpans: [
|
||||
{ id: "span-webhook-consume", parentId: null, traceId: "trace-webhook-c4b8", service: "webhook-worker", operation: "consume partition 17", startOffsetMs: 324_000, durationMs: 142, status: "error", attributes: [{ key: "message_id", value: "wh_msg_demo_1042" }] },
|
||||
{ id: "span-webhook-decode", parentId: "span-webhook-consume", traceId: "trace-webhook-c4b8", service: "webhook-worker", operation: "decode envelope", startOffsetMs: 324_012, durationMs: 8, status: "error", attributes: [{ key: "schema_version", value: "2026-05" }] },
|
||||
{ id: "span-webhook-requeue", parentId: "span-webhook-consume", traceId: "trace-webhook-c4b8", service: "event-queue", operation: "NACK requeue", startOffsetMs: 324_025, durationMs: 102, status: "ok", attributes: [{ key: "retry_delay_ms", value: 0 }] },
|
||||
],
|
||||
replayFrames: [
|
||||
{ id: "replay-webhook-queue", stageId: "webhook-impact", offsetMs: 331_000, route: "/operations/webhooks", title: "Queue lag alert", description: "The operations view highlights six stalled queue partitions.", cursorX: 1088, cursorY: 242, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-metric='oldest-message-age']" },
|
||||
{ id: "replay-webhook-message", stageId: "webhook-diagnosis", offsetMs: 662_000, route: "/operations/webhooks/partitions/17", title: "Repeated message found", description: "The same fictional message appears in every recent retry.", cursorX: 782, cursorY: 486, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-message-id='wh_msg_demo_1042']" },
|
||||
],
|
||||
change: {
|
||||
deployment: { id: "dep-webhook-5180", environment: "production", service: "webhook-worker", version: "5.18.0", startedAt: "2026-06-25T16:11:10.000Z", completedAt: "2026-06-25T16:12:00.000Z", status: "rolled-back" },
|
||||
configChanges: [{ key: "webhooks.worker.maxTerminalAttempts", previousValue: "10", nextValue: "unbounded", changedAt: "2026-06-25T16:12:00.000Z", changedBy: "release-controller" }],
|
||||
featureFlags: [{ key: "webhook-envelope-parser-v2", previousVariant: "legacy", currentVariant: "v2", rolloutPercent: 100, changedAt: "2026-06-25T16:12:00.000Z" }],
|
||||
},
|
||||
suspect: {
|
||||
commitSha: "c4b87dd",
|
||||
commitTitle: "Consolidate webhook envelope errors",
|
||||
pullRequestNumber: 4256,
|
||||
pullRequestTitle: "Refactor delivery worker parser",
|
||||
author: "Avery Singh",
|
||||
owner: "Event Delivery",
|
||||
mergedAt: "2026-06-25T15:28:00.000Z",
|
||||
changedLines: [
|
||||
{ file: "src/worker/envelope-parser.ts", startLine: 78, endLine: 101, summary: "Maps validation failures to a retryable parser error." },
|
||||
{ file: "src/worker/delivery-loop.ts", startLine: 151, endLine: 174, summary: "Requeues all parser errors without an attempt ceiling." },
|
||||
],
|
||||
},
|
||||
rootCauseEvidence: [
|
||||
{ id: "rc-webhook-head", stageId: "webhook-diagnosis", signal: "Partition-head repetition", explanation: "Six stalled partitions repeatedly process one malformed message each without advancing offsets.", confidence: 0.99, supportingEvidenceIds: ["log-webhook-poison", "span-webhook-decode"] },
|
||||
{ id: "rc-webhook-diff", stageId: "webhook-diagnosis", signal: "Error classification regression", explanation: "The deployment changed schema failures from terminal to retryable and removed the attempt ceiling.", confidence: 0.97, supportingEvidenceIds: ["err-webhook-schema", "log-webhook-deploy"] },
|
||||
],
|
||||
remediationActions: [
|
||||
{ id: "rem-webhook-quarantine", title: "Quarantine poison messages", owner: "Event Delivery", status: "completed", completedAt: "2026-06-25T16:26:00.000Z", details: "Moved six malformed messages to a durable dead-letter queue." },
|
||||
{ id: "rem-webhook-ceiling", title: "Enforce terminal retry ceiling", owner: "Event Delivery", status: "in-progress", completedAt: null, details: "Classifies schema errors as terminal and caps all retryable failures." },
|
||||
],
|
||||
slo: { objective: "Webhooks delivered within 60 seconds", targetPercent: 99.9, windowDays: 30, observedPercent: 99.72, burnRate: 11.8, budgetRemainingBeforePercent: 78.1, budgetRemainingCurrentPercent: 65.4, projectedMinutesToExhaustion: 188 },
|
||||
topology: {
|
||||
nodes: [
|
||||
{ id: "event-api", label: "Event API", kind: "service", health: "healthy", requestRate: 42_400, errorRatePercent: 0.1, latencyP95Ms: 72 },
|
||||
{ id: "event-queue", label: "Event Queue", kind: "queue", health: "critical", requestRate: 42_300, errorRatePercent: 0, latencyP95Ms: 1_260_000 },
|
||||
{ id: "webhook-worker", label: "Webhook Worker", kind: "service", health: "critical", requestRate: 91_200, errorRatePercent: 94.4, latencyP95Ms: 142 },
|
||||
{ id: "merchant-endpoint", label: "Merchant Endpoints", kind: "provider", health: "healthy", requestRate: 5_100, errorRatePercent: 0.8, latencyP95Ms: 310 },
|
||||
],
|
||||
edges: [
|
||||
{ id: "edge-api-queue", source: "event-api", target: "event-queue", protocol: "queue", health: "healthy", requestsPerMinute: 42_300 },
|
||||
{ id: "edge-queue-worker", source: "event-queue", target: "webhook-worker", protocol: "queue", health: "critical", requestsPerMinute: 91_200 },
|
||||
{ id: "edge-worker-merchant", source: "webhook-worker", target: "merchant-endpoint", protocol: "HTTPS", health: "degraded", requestsPerMinute: 5_100 },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const aiRefundStory: IncidentStory = {
|
||||
id: "ai-agent-wrong-refund",
|
||||
title: "Support agent issued incorrect refunds after tool prompt change",
|
||||
shortTitle: "AI refund error",
|
||||
severity: "SEV-2",
|
||||
status: "resolved",
|
||||
startedAt: "2026-06-29T11:05:00.000Z",
|
||||
resolvedAt: "2026-06-29T11:21:00.000Z",
|
||||
durationMs: 960_000,
|
||||
summary: "A prompt and tool-schema change made a support agent treat store credit amounts as cash refund amounts.",
|
||||
userImpact: "Twenty-seven fictional customers received incorrect cash refunds instead of the intended store credit.",
|
||||
businessImpact: "$8,640 in excess refunds was issued and automatically flagged for finance review.",
|
||||
affectedUsers: 27,
|
||||
affectedRegion: "English-language support queue",
|
||||
metrics: [
|
||||
{ id: "ai-refund-errors", label: "Incorrect refund decisions", unit: "count", higherIsWorse: true, baseline: 0, current: 27, recovered: 0 },
|
||||
{ id: "ai-tool-confidence", label: "Tool-call confidence", unit: "percent", higherIsWorse: false, baseline: 96.2, current: 61.4, recovered: 97.1 },
|
||||
{ id: "ai-refund-value", label: "Refund value at risk", unit: "dollars", higherIsWorse: true, baseline: 0, current: 8_640, recovered: 0 },
|
||||
],
|
||||
stages: [
|
||||
{ id: "ai-healthy", kind: "healthy", offsetMs: 0, title: "Agent healthy", summary: "Refund policy checks and tool arguments agree.", metricValues: [{ metricId: "ai-refund-errors", value: 0 }, { metricId: "ai-tool-confidence", value: 96.2 }], evidenceIds: [] },
|
||||
{ id: "ai-change", kind: "change", offsetMs: 75_000, title: "Prompt and tool v7 deployed", summary: "Refund instructions are condensed and credit_amount is renamed amount.", metricValues: [{ metricId: "ai-refund-errors", value: 0 }, { metricId: "ai-tool-confidence", value: 93.1 }], evidenceIds: ["log-ai-deploy"] },
|
||||
{ id: "ai-impact", kind: "impact", offsetMs: 180_000, title: "Wrong refund issued", summary: "The agent submits a cash refund using a store-credit recommendation.", metricValues: [{ metricId: "ai-refund-errors", value: 27 }, { metricId: "ai-tool-confidence", value: 61.4 }], evidenceIds: ["err-ai-policy", "span-ai-refund-tool", "replay-ai-tool"] },
|
||||
{ id: "ai-diagnosis", kind: "diagnosis", offsetMs: 390_000, title: "Semantic mismatch identified", summary: "AI evaluation traces the decision to ambiguous prompt language and tool naming.", metricValues: [{ metricId: "ai-refund-errors", value: 27 }, { metricId: "ai-tool-confidence", value: 64.8 }], evidenceIds: ["rc-ai-prompt", "rc-ai-tool"] },
|
||||
{ id: "ai-mitigation", kind: "mitigation", offsetMs: 600_000, title: "Autonomous refunds paused", summary: "Refund execution requires human confirmation while prompt v6 is restored.", metricValues: [{ metricId: "ai-refund-errors", value: 27 }, { metricId: "ai-tool-confidence", value: 88.9 }], evidenceIds: ["log-ai-disable"] },
|
||||
{ id: "ai-recovery", kind: "recovery", offsetMs: 900_000, title: "Agent recovered", summary: "Corrected prompt and typed tool fields pass shadow evaluation.", metricValues: [{ metricId: "ai-refund-errors", value: 0 }, { metricId: "ai-tool-confidence", value: 97.1 }], evidenceIds: [] },
|
||||
],
|
||||
errors: [{
|
||||
id: "err-ai-policy",
|
||||
stageId: "ai-impact",
|
||||
fingerprint: "support-agent-refund-policy-mismatch",
|
||||
title: "RefundPolicyMismatch",
|
||||
message: "Cash refund amount exceeded policy recommendation for this support case.",
|
||||
count: 27,
|
||||
affectedUsers: 27,
|
||||
traceId: "trace-ai-f39a",
|
||||
spanId: "span-ai-refund-tool",
|
||||
stackFrames: [
|
||||
{ functionName: "validateRefundDecision", file: "src/agent/policy/refund-policy.ts", line: 133, column: 18, inApplication: true },
|
||||
{ functionName: "executeRefundTool", file: "src/agent/tools/refund.ts", line: 89, column: 14, inApplication: true },
|
||||
{ functionName: "runSupportTurn", file: "src/agent/runtime.ts", line: 211, column: 20, inApplication: true },
|
||||
],
|
||||
breadcrumbs: [
|
||||
{ offsetMs: 172_000, category: "ai", message: "Model recommended 320 credits", level: "info" },
|
||||
{ offsetMs: 173_200, category: "ai", message: "Tool argument amount=320 currency=USD", level: "warning" },
|
||||
{ offsetMs: 174_000, category: "http", message: "Refund provider accepted $320.00", level: "error" },
|
||||
],
|
||||
}],
|
||||
logs: [
|
||||
{ id: "log-ai-deploy", stageId: "ai-change", offsetMs: 75_000, timestamp: "2026-06-29T11:06:15.000Z", level: "info", service: "agent-orchestrator", message: "Support agent definition activated", traceId: "trace-agent-deploy-v7", spanId: "span-agent-activate", attributes: [{ key: "prompt_version", value: "refund-v7" }, { key: "tool_schema", value: "refund-tool-v7" }, { key: "model", value: "fictional-support-model-2" }] },
|
||||
{ id: "log-ai-tool", stageId: "ai-impact", offsetMs: 174_000, timestamp: "2026-06-29T11:07:54.000Z", level: "error", service: "refund-service", message: "Refund policy post-check failed", traceId: "trace-ai-f39a", spanId: "span-ai-refund-tool", attributes: [{ key: "recommended_instrument", value: "store_credit" }, { key: "executed_instrument", value: "cash" }, { key: "amount", value: 320 }] },
|
||||
{ id: "log-ai-disable", stageId: "ai-mitigation", offsetMs: 600_000, timestamp: "2026-06-29T11:15:00.000Z", level: "warn", service: "agent-orchestrator", message: "Autonomous refund tool disabled", traceId: "trace-agent-mitigation", spanId: "span-flag-write", attributes: [{ key: "flag", value: "support-agent-auto-refund" }, { key: "rollout_percent", value: 0 }] },
|
||||
],
|
||||
waterfallSpans: [
|
||||
{ id: "span-ai-turn", parentId: null, traceId: "trace-ai-f39a", service: "agent-orchestrator", operation: "support turn", startOffsetMs: 170_000, durationMs: 4_860, status: "error", attributes: [{ key: "prompt_version", value: "refund-v7" }] },
|
||||
{ id: "span-ai-model", parentId: "span-ai-turn", traceId: "trace-ai-f39a", service: "fictional-support-model-2", operation: "generate response", startOffsetMs: 170_120, durationMs: 2_980, status: "ok", attributes: [{ key: "finish_reason", value: "tool_call" }] },
|
||||
{ id: "span-ai-refund-tool", parentId: "span-ai-turn", traceId: "trace-ai-f39a", service: "refund-service", operation: "issue_refund", startOffsetMs: 173_200, durationMs: 800, status: "error", attributes: [{ key: "amount", value: 320 }, { key: "instrument", value: "cash" }] },
|
||||
],
|
||||
replayFrames: [
|
||||
{ id: "replay-ai-recommendation", stageId: "ai-impact", offsetMs: 172_000, route: "/support/cases/demo-204", title: "Credit recommended", description: "The agent correctly reasons that the fictional customer qualifies for store credit.", cursorX: 980, cursorY: 412, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-agent-step='recommendation']" },
|
||||
{ id: "replay-ai-tool", stageId: "ai-impact", offsetMs: 173_200, route: "/support/cases/demo-204", title: "Cash refund tool called", description: "The tool preview shows an ambiguous amount field and cash instrument.", cursorX: 1014, cursorY: 588, viewportWidth: 1440, viewportHeight: 900, highlightedSelector: "[data-tool-call='issue_refund']" },
|
||||
],
|
||||
change: {
|
||||
deployment: { id: "dep-agent-refund-v7", environment: "production", service: "agent-orchestrator", version: "refund-v7", startedAt: "2026-06-29T11:05:50.000Z", completedAt: "2026-06-29T11:06:15.000Z", status: "rolled-back" },
|
||||
configChanges: [
|
||||
{ key: "agents.support.refundPrompt", previousValue: "refund-v6", nextValue: "refund-v7", changedAt: "2026-06-29T11:06:15.000Z", changedBy: "agent-release-bot" },
|
||||
{ key: "agents.support.refundToolSchema", previousValue: "refund-tool-v6", nextValue: "refund-tool-v7", changedAt: "2026-06-29T11:06:15.000Z", changedBy: "agent-release-bot" },
|
||||
],
|
||||
featureFlags: [{ key: "support-agent-auto-refund", previousVariant: "prompt-v6", currentVariant: "prompt-v7", rolloutPercent: 100, changedAt: "2026-06-29T11:06:15.000Z" }],
|
||||
},
|
||||
suspect: {
|
||||
commitSha: "f39aa62",
|
||||
commitTitle: "Condense refund instructions and tool schema",
|
||||
pullRequestNumber: 4294,
|
||||
pullRequestTitle: "Reduce support agent refund latency",
|
||||
author: "Nora Reyes",
|
||||
owner: "AI Support Systems",
|
||||
mergedAt: "2026-06-29T10:32:00.000Z",
|
||||
changedLines: [
|
||||
{ file: "prompts/support/refund-v7.md", startLine: 22, endLine: 38, summary: "Combines cash refund and store-credit instructions into one amount rule." },
|
||||
{ file: "src/agent/tools/refund-schema.ts", startLine: 41, endLine: 59, summary: "Renames credit_amount to amount without retaining instrument semantics." },
|
||||
],
|
||||
},
|
||||
rootCauseEvidence: [
|
||||
{ id: "rc-ai-prompt", stageId: "ai-diagnosis", signal: "Counterfactual prompt evaluation", explanation: "Replaying the same cases with prompt v6 selects store credit in 100% of affected traces.", confidence: 0.97, supportingEvidenceIds: ["log-ai-deploy", "err-ai-policy"] },
|
||||
{ id: "rc-ai-tool", stageId: "ai-diagnosis", signal: "Argument semantic mismatch", explanation: "The model copied the store-credit quantity into the newly generic cash amount field.", confidence: 0.95, supportingEvidenceIds: ["span-ai-refund-tool", "log-ai-tool"] },
|
||||
],
|
||||
remediationActions: [
|
||||
{ id: "rem-ai-disable", title: "Require refund confirmation", owner: "AI Support Systems", status: "completed", completedAt: "2026-06-29T11:15:00.000Z", details: "Disabled autonomous execution and restored prompt v6." },
|
||||
{ id: "rem-ai-schema", title: "Split cash and credit tool fields", owner: "Support Platform", status: "in-progress", completedAt: null, details: "Uses distinct instrument-specific amounts with policy validation before execution." },
|
||||
{ id: "rem-ai-eval", title: "Add refund counterfactual evaluation", owner: "AI Quality", status: "planned", completedAt: null, details: "Blocks prompt releases that change the selected refund instrument." },
|
||||
],
|
||||
slo: { objective: "Policy-compliant autonomous support actions", targetPercent: 99.99, windowDays: 30, observedPercent: 99.91, burnRate: 9.1, budgetRemainingBeforePercent: 88.4, budgetRemainingCurrentPercent: 79.3, projectedMinutesToExhaustion: 264 },
|
||||
topology: {
|
||||
nodes: [
|
||||
{ id: "support-ui", label: "Support Console", kind: "edge", health: "healthy", requestRate: 2_400, errorRatePercent: 0.2, latencyP95Ms: 210 },
|
||||
{ id: "agent-orchestrator", label: "Agent Orchestrator", kind: "service", health: "degraded", requestRate: 1_820, errorRatePercent: 1.5, latencyP95Ms: 5_200 },
|
||||
{ id: "support-model", label: "Support Model", kind: "ai-model", health: "degraded", requestRate: 1_810, errorRatePercent: 0, latencyP95Ms: 3_100 },
|
||||
{ id: "refund-service", label: "Refund Service", kind: "service", health: "critical", requestRate: 180, errorRatePercent: 15, latencyP95Ms: 920 },
|
||||
{ id: "payment-ledger", label: "Payment Ledger", kind: "database", health: "healthy", requestRate: 178, errorRatePercent: 0.1, latencyP95Ms: 65 },
|
||||
],
|
||||
edges: [
|
||||
{ id: "edge-ui-agent", source: "support-ui", target: "agent-orchestrator", protocol: "HTTPS", health: "healthy", requestsPerMinute: 1_820 },
|
||||
{ id: "edge-agent-model", source: "agent-orchestrator", target: "support-model", protocol: "HTTPS", health: "degraded", requestsPerMinute: 1_810 },
|
||||
{ id: "edge-agent-refund", source: "agent-orchestrator", target: "refund-service", protocol: "tool-call", health: "critical", requestsPerMinute: 180 },
|
||||
{ id: "edge-refund-ledger", source: "refund-service", target: "payment-ledger", protocol: "SQL", health: "healthy", requestsPerMinute: 178 },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const INCIDENT_STORIES: [IncidentStory, ...IncidentStory[]] = [
|
||||
safariStory,
|
||||
mfaStory,
|
||||
webhookStory,
|
||||
aiRefundStory,
|
||||
];
|
||||
+719
@@ -0,0 +1,719 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
DesignAlert,
|
||||
DesignAnalyticsCard,
|
||||
DesignAnalyticsCardHeader,
|
||||
DesignBadge,
|
||||
} from "@/components/design-components";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
BugIcon,
|
||||
PulseIcon,
|
||||
StackIcon,
|
||||
TerminalWindowIcon,
|
||||
TreeStructureIcon,
|
||||
UsersIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useMemo } from "react";
|
||||
import type {
|
||||
IncidentError,
|
||||
IncidentMetric,
|
||||
IncidentStory,
|
||||
StructuredLog,
|
||||
TopologyEdge,
|
||||
TopologyNode,
|
||||
WaterfallSpan,
|
||||
} from "./stories";
|
||||
|
||||
export type TelemetryInvestigationProps = {
|
||||
story: IncidentStory,
|
||||
activeStageIndex: number,
|
||||
selectedSpanId: string | null,
|
||||
onSelectSpan: (spanId: string) => void,
|
||||
};
|
||||
|
||||
type SemanticState = "healthy" | "degraded" | "critical";
|
||||
type BadgeColor = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
|
||||
|
||||
const topologyColumns = 3;
|
||||
|
||||
function formatMetricValue(metric: IncidentMetric, value: number): string {
|
||||
switch (metric.unit) {
|
||||
case "percent": {
|
||||
return `${value.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
|
||||
}
|
||||
case "milliseconds": {
|
||||
return `${value.toLocaleString()} ms`;
|
||||
}
|
||||
case "count": {
|
||||
return value.toLocaleString();
|
||||
}
|
||||
case "requests-per-minute": {
|
||||
return `${value.toLocaleString()} rpm`;
|
||||
}
|
||||
case "dollars": {
|
||||
return value.toLocaleString(undefined, {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
}
|
||||
default: {
|
||||
const exhaustiveUnit: never = metric.unit;
|
||||
return exhaustiveUnit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(durationMs: number): string {
|
||||
if (durationMs < 1_000) return `${durationMs.toLocaleString()} ms`;
|
||||
return `${(durationMs / 1_000).toLocaleString(undefined, { maximumFractionDigits: 2 })} s`;
|
||||
}
|
||||
|
||||
function formatOffset(offsetMs: number): string {
|
||||
const minutes = Math.floor(offsetMs / 60_000);
|
||||
const seconds = Math.floor((offsetMs % 60_000) / 1_000);
|
||||
const milliseconds = offsetMs % 1_000;
|
||||
return `+${minutes}:${seconds.toString().padStart(2, "0")}.${milliseconds.toString().padStart(3, "0")}`;
|
||||
}
|
||||
|
||||
function badgeColorForHealth(health: SemanticState): BadgeColor {
|
||||
switch (health) {
|
||||
case "healthy": {
|
||||
return "green";
|
||||
}
|
||||
case "degraded": {
|
||||
return "orange";
|
||||
}
|
||||
case "critical": {
|
||||
return "red";
|
||||
}
|
||||
default: {
|
||||
const exhaustiveHealth: never = health;
|
||||
return exhaustiveHealth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function badgeColorForLog(level: StructuredLog["level"]): BadgeColor {
|
||||
switch (level) {
|
||||
case "debug": {
|
||||
return "purple";
|
||||
}
|
||||
case "info": {
|
||||
return "blue";
|
||||
}
|
||||
case "warn": {
|
||||
return "orange";
|
||||
}
|
||||
case "error": {
|
||||
return "red";
|
||||
}
|
||||
default: {
|
||||
const exhaustiveLevel: never = level;
|
||||
return exhaustiveLevel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function topologyStateClass(health: SemanticState): string {
|
||||
switch (health) {
|
||||
case "healthy": {
|
||||
return "text-emerald-600 dark:text-emerald-400";
|
||||
}
|
||||
case "degraded": {
|
||||
return "text-amber-600 dark:text-amber-400";
|
||||
}
|
||||
case "critical": {
|
||||
return "text-red-600 dark:text-red-400";
|
||||
}
|
||||
default: {
|
||||
const exhaustiveHealth: never = health;
|
||||
return exhaustiveHealth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCriticalPath(spans: WaterfallSpan[], error: IncidentError | undefined): Set<string> {
|
||||
const criticalPath = new Set<string>();
|
||||
let spanId: string | null | undefined = error?.spanId;
|
||||
while (spanId != null) {
|
||||
if (criticalPath.has(spanId)) break;
|
||||
criticalPath.add(spanId);
|
||||
spanId = spans.find((span) => span.id === spanId)?.parentId;
|
||||
}
|
||||
return criticalPath;
|
||||
}
|
||||
|
||||
function MetricSummary({ metric }: { metric: IncidentMetric }) {
|
||||
const currentDelta = metric.current - metric.baseline;
|
||||
const recoveredNearBaseline = Math.abs(metric.recovered - metric.baseline)
|
||||
<= Math.max(Math.abs(metric.baseline) * 0.1, 0.1);
|
||||
|
||||
return (
|
||||
<div className="min-w-0 border-r border-foreground/[0.06] px-4 py-3 last:border-r-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{metric.label}
|
||||
</span>
|
||||
<DesignBadge
|
||||
label={recoveredNearBaseline ? "Recovered" : "Elevated"}
|
||||
color={recoveredNearBaseline ? "green" : "orange"}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 flex items-end gap-2">
|
||||
<span className="font-mono text-lg font-semibold tabular-nums text-foreground">
|
||||
{formatMetricValue(metric, metric.current)}
|
||||
</span>
|
||||
<span className={cn(
|
||||
"pb-0.5 font-mono text-[10px] tabular-nums",
|
||||
metric.higherIsWorse === (currentDelta > 0)
|
||||
? "text-red-600 dark:text-red-400"
|
||||
: "text-emerald-600 dark:text-emerald-400",
|
||||
)}>
|
||||
{currentDelta > 0 ? "+" : ""}{formatMetricValue(metric, currentDelta)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center justify-between font-mono text-[10px] text-muted-foreground">
|
||||
<span>base {formatMetricValue(metric, metric.baseline)}</span>
|
||||
<span>now {formatMetricValue(metric, metric.recovered)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TraceWaterfall({
|
||||
story,
|
||||
selectedSpanId,
|
||||
onSelectSpan,
|
||||
}: {
|
||||
story: IncidentStory,
|
||||
selectedSpanId: string | null,
|
||||
onSelectSpan: (spanId: string) => void,
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const spans = story.waterfallSpans;
|
||||
const traceStart = spans.reduce(
|
||||
(minimum, span) => Math.min(minimum, span.startOffsetMs),
|
||||
spans[0]?.startOffsetMs ?? 0,
|
||||
);
|
||||
const traceEnd = spans.reduce(
|
||||
(maximum, span) => Math.max(maximum, span.startOffsetMs + span.durationMs),
|
||||
traceStart + 1,
|
||||
);
|
||||
const traceDuration = Math.max(traceEnd - traceStart, 1);
|
||||
const relevantError = story.errors.find((error) => error.spanId === selectedSpanId)
|
||||
?? story.errors[0];
|
||||
const criticalPath = useMemo(
|
||||
() => getCriticalPath(spans, relevantError),
|
||||
[relevantError, spans],
|
||||
);
|
||||
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="cyan" chart={{ type: "none" }}>
|
||||
<DesignAnalyticsCardHeader
|
||||
label="Distributed trace waterfall"
|
||||
right={(
|
||||
<div className="flex items-center gap-2">
|
||||
<DesignBadge label={`${spans.length} spans`} color="cyan" size="sm" />
|
||||
<span className="font-mono text-[10px] text-muted-foreground">
|
||||
{formatDuration(traceDuration)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<div className="overflow-x-auto p-4">
|
||||
<div className="min-w-[680px]" role="tree" aria-label={`Trace waterfall for ${story.shortTitle}`}>
|
||||
<div className="mb-2 grid grid-cols-[220px_1fr_68px] gap-3 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<span>Service · operation</span>
|
||||
<span>Relative duration</span>
|
||||
<span className="text-right">Latency</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{spans.map((span, index) => {
|
||||
const left = ((span.startOffsetMs - traceStart) / traceDuration) * 100;
|
||||
const width = Math.max((span.durationMs / traceDuration) * 100, 1.2);
|
||||
const selected = selectedSpanId === span.id;
|
||||
const isCritical = criticalPath.has(span.id);
|
||||
const spanEvents = story.logs.filter((log) => log.spanId === span.id);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={span.id}
|
||||
type="button"
|
||||
role="treeitem"
|
||||
aria-selected={selected}
|
||||
onClick={() => onSelectSpan(span.id)}
|
||||
className={cn(
|
||||
"grid w-full grid-cols-[220px_1fr_68px] items-center gap-3 rounded-lg px-2 py-2 text-left outline-none transition-colors duration-150 hover:bg-foreground/[0.04] hover:transition-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
selected && "bg-foreground/[0.06] ring-1 ring-foreground/[0.1]",
|
||||
)}
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-2" style={{ paddingLeft: `${Math.min(index, 3) * 8}px` }}>
|
||||
<span className={cn(
|
||||
"h-1.5 w-1.5 shrink-0 rounded-full",
|
||||
span.status === "error" ? "bg-red-500" : "bg-emerald-500",
|
||||
)} />
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-xs font-medium text-foreground">{span.operation}</span>
|
||||
<span className="block truncate font-mono text-[10px] text-muted-foreground">{span.service}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="relative h-7 overflow-hidden rounded-md bg-foreground/[0.035]">
|
||||
<motion.span
|
||||
initial={shouldReduceMotion ? false : { scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.28, delay: shouldReduceMotion ? 0 : index * 0.035 }}
|
||||
className={cn(
|
||||
"absolute top-1 h-5 origin-left rounded",
|
||||
span.status === "error"
|
||||
? "bg-red-500/75"
|
||||
: isCritical
|
||||
? "bg-amber-500/75"
|
||||
: "bg-cyan-500/65",
|
||||
)}
|
||||
style={{ left: `${left}%`, width: `${width}%` }}
|
||||
/>
|
||||
{spanEvents.map((event) => {
|
||||
const markerLeft = ((event.offsetMs - traceStart) / traceDuration) * 100;
|
||||
return (
|
||||
<span
|
||||
key={event.id}
|
||||
className="absolute top-0 h-7 w-px bg-foreground/80"
|
||||
style={{ left: `${Math.max(0, Math.min(markerLeft, 100))}%` }}
|
||||
title={`${event.level}: ${event.message}`}
|
||||
aria-label={`Event: ${event.message}`}
|
||||
>
|
||||
<span className="absolute -left-0.5 top-0 h-1.5 w-1.5 rotate-45 bg-foreground" />
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
<span className="text-right font-mono text-[10px] tabular-nums text-muted-foreground">
|
||||
{formatDuration(span.durationMs)}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-3 border-t border-foreground/[0.05] pt-3 text-[10px] text-muted-foreground">
|
||||
<span className="flex items-center gap-1.5"><span className="h-2 w-3 rounded-sm bg-amber-500/75" />Critical path</span>
|
||||
<span className="flex items-center gap-1.5"><span className="h-2 w-3 rounded-sm bg-cyan-500/65" />Healthy span</span>
|
||||
<span className="flex items-center gap-1.5"><span className="h-2 w-3 rounded-sm bg-red-500/75" />Failed span</span>
|
||||
<span className="flex items-center gap-1.5"><span className="h-2 w-px bg-foreground" />Structured event</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
function StructuredLogs({
|
||||
logs,
|
||||
selectedSpanId,
|
||||
onSelectSpan,
|
||||
}: {
|
||||
logs: StructuredLog[],
|
||||
selectedSpanId: string | null,
|
||||
onSelectSpan: (spanId: string) => void,
|
||||
}) {
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="slate" chart={{ type: "none" }}>
|
||||
<DesignAnalyticsCardHeader
|
||||
label="Stage-aligned logs"
|
||||
right={<DesignBadge label={`${logs.length} events`} color="blue" size="sm" />}
|
||||
/>
|
||||
{logs.length === 0 ? (
|
||||
<div className="p-4">
|
||||
<DesignAlert
|
||||
variant="info"
|
||||
title="No logs in this stage"
|
||||
description="Advance playback to inspect stage-specific telemetry."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-80 overflow-y-auto" role="log" aria-label="Structured logs for the active incident stage">
|
||||
{logs.map((log) => (
|
||||
<button
|
||||
key={log.id}
|
||||
type="button"
|
||||
onClick={() => onSelectSpan(log.spanId)}
|
||||
className={cn(
|
||||
"grid w-full grid-cols-[76px_64px_minmax(0,1fr)] gap-2 border-b border-foreground/[0.05] px-4 py-3 text-left outline-none transition-colors duration-150 last:border-b-0 hover:bg-foreground/[0.035] hover:transition-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
|
||||
selectedSpanId === log.spanId && "bg-foreground/[0.05]",
|
||||
)}
|
||||
>
|
||||
<span className="font-mono text-[10px] tabular-nums text-muted-foreground">{formatOffset(log.offsetMs)}</span>
|
||||
<DesignBadge label={log.level} color={badgeColorForLog(log.level)} size="sm" />
|
||||
<span className="min-w-0">
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<span className="truncate text-xs font-medium text-foreground">{log.message}</span>
|
||||
<span className="shrink-0 font-mono text-[10px] text-muted-foreground">{log.service}</span>
|
||||
</span>
|
||||
<span className="mt-1 block truncate font-mono text-[10px] text-muted-foreground">
|
||||
trace={log.traceId} · span={log.spanId}
|
||||
</span>
|
||||
<span className="mt-1 flex flex-wrap gap-x-3 gap-y-1 font-mono text-[10px] text-muted-foreground">
|
||||
{log.attributes.map((attribute) => (
|
||||
<span key={attribute.key}>{attribute.key}={String(attribute.value)}</span>
|
||||
))}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorIssue({
|
||||
error,
|
||||
activeStageKind,
|
||||
}: {
|
||||
error: IncidentError | undefined,
|
||||
activeStageKind: IncidentStory["stages"][number]["kind"],
|
||||
}) {
|
||||
const regressionLabel = activeStageKind === "recovery"
|
||||
? "Resolved"
|
||||
: activeStageKind === "mitigation"
|
||||
? "Recovering"
|
||||
: "Regressed";
|
||||
const regressionColor: BadgeColor = activeStageKind === "recovery"
|
||||
? "green"
|
||||
: activeStageKind === "mitigation"
|
||||
? "orange"
|
||||
: "red";
|
||||
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="orange" chart={{ type: "none" }}>
|
||||
<DesignAnalyticsCardHeader
|
||||
label="Grouped error issue"
|
||||
right={<DesignBadge label={regressionLabel} color={regressionColor} size="sm" />}
|
||||
/>
|
||||
{error == null ? (
|
||||
<div className="p-4">
|
||||
<DesignAlert variant="success" title="No grouped issue" description="No error fingerprint is associated with this incident." />
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4">
|
||||
<div className="flex flex-col gap-3 border-b border-foreground/[0.06] pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<BugIcon className="h-4 w-4 shrink-0 text-red-600 dark:text-red-400" weight="fill" />
|
||||
<h3 className="truncate text-sm font-semibold text-foreground">{error.title}</h3>
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-relaxed text-muted-foreground">{error.message}</p>
|
||||
<p className="mt-2 truncate font-mono text-[10px] text-muted-foreground">fingerprint={error.fingerprint}</p>
|
||||
</div>
|
||||
<div className="grid shrink-0 grid-cols-2 gap-4 text-right">
|
||||
<div>
|
||||
<div className="font-mono text-base font-semibold tabular-nums text-foreground">{error.count.toLocaleString()}</div>
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground">events</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-base font-semibold tabular-nums text-foreground">{error.affectedUsers.toLocaleString()}</div>
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground">users</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 pt-4 lg:grid-cols-2">
|
||||
<section aria-labelledby="stack-frames-heading">
|
||||
<h4 id="stack-frames-heading" className="mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<StackIcon className="h-3.5 w-3.5" />
|
||||
Stack frames
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{error.stackFrames.map((frame) => (
|
||||
<div
|
||||
key={`${frame.file}:${frame.line}:${frame.column}`}
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-2 font-mono text-[10px]",
|
||||
frame.inApplication ? "bg-red-500/[0.07]" : "bg-foreground/[0.035]",
|
||||
)}
|
||||
>
|
||||
<div className="truncate font-semibold text-foreground">{frame.functionName}()</div>
|
||||
<div className="truncate text-muted-foreground">{frame.file}:{frame.line}:{frame.column}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section aria-labelledby="breadcrumbs-heading">
|
||||
<h4 id="breadcrumbs-heading" className="mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<TerminalWindowIcon className="h-3.5 w-3.5" />
|
||||
Breadcrumbs
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{error.breadcrumbs.map((breadcrumb) => (
|
||||
<div key={`${breadcrumb.offsetMs}-${breadcrumb.message}`} className="grid grid-cols-[64px_1fr] gap-2 rounded-lg bg-foreground/[0.035] px-3 py-2">
|
||||
<span className="font-mono text-[10px] tabular-nums text-muted-foreground">{formatOffset(breadcrumb.offsetMs)}</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-[10px] font-medium text-foreground">{breadcrumb.message}</span>
|
||||
<span className="font-mono text-[9px] uppercase tracking-wider text-muted-foreground">{breadcrumb.category} · {breadcrumb.level}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
function nodePosition(index: number, nodeCount: number): { x: number, y: number } {
|
||||
const columns = Math.min(topologyColumns, Math.max(nodeCount, 1));
|
||||
const rows = Math.ceil(nodeCount / columns);
|
||||
const column = index % columns;
|
||||
const row = Math.floor(index / columns);
|
||||
return {
|
||||
x: columns === 1 ? 300 : 80 + (column * 440) / (columns - 1),
|
||||
y: rows === 1 ? 100 : 45 + (row * 110) / (rows - 1),
|
||||
};
|
||||
}
|
||||
|
||||
function findNodePosition(nodes: TopologyNode[], nodeId: string): { x: number, y: number } | undefined {
|
||||
const index = nodes.findIndex((node) => node.id === nodeId);
|
||||
return index === -1 ? undefined : nodePosition(index, nodes.length);
|
||||
}
|
||||
|
||||
function TopologyConnection({ edge, nodes }: { edge: TopologyEdge, nodes: TopologyNode[] }) {
|
||||
const source = findNodePosition(nodes, edge.source);
|
||||
const target = findNodePosition(nodes, edge.target);
|
||||
if (source == null || target == null) return null;
|
||||
|
||||
return (
|
||||
<g className={topologyStateClass(edge.health)}>
|
||||
<line
|
||||
x1={source.x}
|
||||
y1={source.y}
|
||||
x2={target.x}
|
||||
y2={target.y}
|
||||
stroke="currentColor"
|
||||
strokeWidth={edge.health === "healthy" ? 1.5 : 2.5}
|
||||
strokeDasharray={edge.health === "healthy" ? undefined : "5 4"}
|
||||
opacity={0.65}
|
||||
/>
|
||||
<text
|
||||
x={(source.x + target.x) / 2}
|
||||
y={(source.y + target.y) / 2 - 5}
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
className="text-[8px] font-medium"
|
||||
>
|
||||
{edge.protocol} · {edge.requestsPerMinute.toLocaleString()} rpm
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceTopologyView({ story }: { story: IncidentStory }) {
|
||||
const nodes = story.topology.nodes;
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="purple" chart={{ type: "none" }}>
|
||||
<DesignAnalyticsCardHeader
|
||||
label="Service topology"
|
||||
right={(
|
||||
<div className="flex items-center gap-1.5">
|
||||
<DesignBadge
|
||||
label={`${nodes.filter((node) => node.health === "healthy").length} healthy`}
|
||||
color="green"
|
||||
size="sm"
|
||||
/>
|
||||
<DesignBadge
|
||||
label={`${nodes.filter((node) => node.health !== "healthy").length} impaired`}
|
||||
color="orange"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<svg
|
||||
viewBox="0 0 600 200"
|
||||
className="h-auto min-h-52 w-full"
|
||||
role="img"
|
||||
aria-labelledby={`topology-title-${story.id} topology-description-${story.id}`}
|
||||
>
|
||||
<title id={`topology-title-${story.id}`}>Service topology for {story.shortTitle}</title>
|
||||
<desc id={`topology-description-${story.id}`}>Connections and health states for {nodes.length} services involved in the incident.</desc>
|
||||
{story.topology.edges.map((edge) => (
|
||||
<TopologyConnection key={edge.id} edge={edge} nodes={nodes} />
|
||||
))}
|
||||
{nodes.map((node, index) => {
|
||||
const position = nodePosition(index, nodes.length);
|
||||
return (
|
||||
<g key={node.id} className={topologyStateClass(node.health)}>
|
||||
<circle cx={position.x} cy={position.y} r="28" fill="currentColor" opacity="0.1" />
|
||||
<circle cx={position.x} cy={position.y} r="22" fill="var(--background)" stroke="currentColor" strokeWidth="2" />
|
||||
<circle cx={position.x} cy={position.y - 7} r="4" fill="currentColor" />
|
||||
<text x={position.x} y={position.y + 5} textAnchor="middle" fill="currentColor" className="text-[8px] font-semibold">
|
||||
{node.kind}
|
||||
</text>
|
||||
<text x={position.x} y={position.y + 42} textAnchor="middle" className="fill-foreground text-[10px] font-semibold">
|
||||
{node.label}
|
||||
</text>
|
||||
<text x={position.x} y={position.y + 54} textAnchor="middle" className="fill-muted-foreground text-[8px]">
|
||||
{node.errorRatePercent}% err · {node.latencyP95Ms}ms p95
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
<div className="mt-2 flex flex-wrap gap-2" aria-label="Service health summary">
|
||||
{nodes.map((node) => (
|
||||
<DesignBadge
|
||||
key={node.id}
|
||||
label={`${node.label}: ${node.health}`}
|
||||
color={badgeColorForHealth(node.health)}
|
||||
size="sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
function SloBurn({ story }: { story: IncidentStory }) {
|
||||
const { slo } = story;
|
||||
const budgetConsumed = Math.max(0, slo.budgetRemainingBeforePercent - slo.budgetRemainingCurrentPercent);
|
||||
const budgetRemainingWidth = Math.max(0, Math.min(slo.budgetRemainingCurrentPercent, 100));
|
||||
|
||||
return (
|
||||
<DesignAnalyticsCard gradient="orange" chart={{ type: "none" }}>
|
||||
<DesignAnalyticsCardHeader
|
||||
label="SLO & error budget"
|
||||
right={(
|
||||
<DesignBadge
|
||||
label={`${slo.burnRate.toLocaleString(undefined, { maximumFractionDigits: 1 })}× burn`}
|
||||
color={slo.burnRate > 2 ? "red" : slo.burnRate > 1 ? "orange" : "green"}
|
||||
icon={PulseIcon}
|
||||
size="sm"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-foreground">{slo.objective}</div>
|
||||
<div className="mt-1 text-[10px] text-muted-foreground">{slo.targetPercent}% target · {slo.windowDays}-day window</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={cn(
|
||||
"font-mono text-xl font-semibold tabular-nums",
|
||||
slo.observedPercent >= slo.targetPercent ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
|
||||
)}>
|
||||
{slo.observedPercent}%
|
||||
</div>
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground">observed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="mb-1.5 flex items-center justify-between text-[10px] text-muted-foreground">
|
||||
<span>Error budget remaining</span>
|
||||
<span className="font-mono tabular-nums">{slo.budgetRemainingCurrentPercent}%</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-foreground/[0.07]">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full",
|
||||
budgetRemainingWidth < 25 ? "bg-red-500" : budgetRemainingWidth < 50 ? "bg-amber-500" : "bg-emerald-500",
|
||||
)}
|
||||
style={{ width: `${budgetRemainingWidth}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-3 divide-x divide-foreground/[0.06] rounded-xl bg-foreground/[0.035] py-3 text-center">
|
||||
<div>
|
||||
<div className="font-mono text-sm font-semibold tabular-nums text-foreground">{budgetConsumed.toFixed(1)}%</div>
|
||||
<div className="mt-1 text-[9px] uppercase tracking-wider text-muted-foreground">consumed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-sm font-semibold tabular-nums text-foreground">{slo.projectedMinutesToExhaustion}m</div>
|
||||
<div className="mt-1 text-[9px] uppercase tracking-wider text-muted-foreground">to exhaust</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-sm font-semibold tabular-nums text-foreground">{slo.budgetRemainingBeforePercent}%</div>
|
||||
<div className="mt-1 text-[9px] uppercase tracking-wider text-muted-foreground">before</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DesignAnalyticsCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function TelemetryInvestigation({
|
||||
story,
|
||||
activeStageIndex,
|
||||
selectedSpanId,
|
||||
onSelectSpan,
|
||||
}: TelemetryInvestigationProps) {
|
||||
const activeStage = story.stages.at(activeStageIndex) ?? story.stages.at(0);
|
||||
if (activeStage == null) {
|
||||
return (
|
||||
<DesignAlert
|
||||
variant="error"
|
||||
title="Telemetry unavailable"
|
||||
description="This incident story has no investigation stages."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const stageLogs = story.logs.filter((log) => log.stageId === activeStage.id);
|
||||
const stageError = story.errors.find((error) => error.stageId === activeStage.id)
|
||||
?? story.errors.find((error) => error.spanId === selectedSpanId)
|
||||
?? story.errors[0];
|
||||
|
||||
return (
|
||||
<section aria-labelledby={`telemetry-investigation-${story.id}`} className="space-y-4">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<TreeStructureIcon className="h-4 w-4 text-cyan-600 dark:text-cyan-400" />
|
||||
<h2 id={`telemetry-investigation-${story.id}`} className="text-xs font-semibold uppercase tracking-wider text-foreground">
|
||||
Telemetry investigation
|
||||
</h2>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Stage {activeStageIndex + 1} · {activeStage.title}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<DesignBadge label={`${story.waterfallSpans.length} spans`} color="cyan" icon={StackIcon} size="sm" />
|
||||
<DesignBadge label={`${stageLogs.length} stage logs`} color="blue" icon={TerminalWindowIcon} size="sm" />
|
||||
<DesignBadge label={`${story.affectedUsers.toLocaleString()} affected`} color="red" icon={UsersIcon} size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid overflow-hidden rounded-2xl bg-background ring-1 ring-foreground/[0.06] sm:grid-cols-2 lg:grid-cols-3">
|
||||
{story.metrics.map((metric) => <MetricSummary key={metric.id} metric={metric} />)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.45fr)_minmax(360px,0.75fr)]">
|
||||
<TraceWaterfall story={story} selectedSpanId={selectedSpanId} onSelectSpan={onSelectSpan} />
|
||||
<StructuredLogs logs={stageLogs} selectedSpanId={selectedSpanId} onSelectSpan={onSelectSpan} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
|
||||
<ErrorIssue error={stageError} activeStageKind={activeStage.kind} />
|
||||
<SloBurn story={story} />
|
||||
</div>
|
||||
|
||||
<ServiceTopologyView story={story} />
|
||||
|
||||
{story.topology.nodes.some((node) => node.health !== "healthy") && (
|
||||
<DesignAlert
|
||||
variant="warning"
|
||||
title="Degraded dependency path detected"
|
||||
description={`${story.topology.nodes.filter((node) => node.health !== "healthy").map((node) => node.label).join(", ")} show elevated errors or latency for this incident.`}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -387,6 +387,7 @@ export const ALL_APPS_FRONTEND = {
|
||||
icon: ChartLineIcon,
|
||||
href: "analytics",
|
||||
navigationItems: [
|
||||
{ displayName: "Mission Control", href: "./mission-control" },
|
||||
{ displayName: "Tables", href: "./tables" },
|
||||
{ displayName: "Traces", href: "./spans-events" },
|
||||
{ displayName: "Replays", href: "../session-replays" },
|
||||
|
||||
Reference in New Issue
Block a user