@checkstack/slo-frontend 0.2.0

package/src/components/MilestoneFeed.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { SloApi } from "../api";
+import { formatDistanceToNow } from "date-fns";
+import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import { Trophy } from "lucide-react";
+
+const ACHIEVEMENT_EMOJI: Record<string, string> = {
+  first_steps: "🎯",
+  iron_uptime: "🛡️",
+  diamond_uptime: "💎",
+  budget_miser: "💰",
+  clean_sheet: "✨",
+  nines_club: "🏆",
+  cascade_breaker: "🛑",
+  full_coverage: "🔒",
+  rapid_recovery: "⚡",
+};
+
+const ACHIEVEMENT_LABEL: Record<string, string> = {
+  first_steps: "First Steps",
+  iron_uptime: "Iron Uptime",
+  diamond_uptime: "Diamond Uptime",
+  budget_miser: "Budget Miser",
+  clean_sheet: "Clean Sheet",
+  nines_club: "Nines Club",
+  cascade_breaker: "Cascade Breaker",
+  full_coverage: "Full Coverage",
+  rapid_recovery: "Rapid Recovery",
+};
+
+interface MilestoneFeedProps {
+  limit?: number;
+}
+
+/**
+ * Organization-wide milestone feed showing recent achievement unlocks.
+ * Fetches from getRecentMilestones and renders a chronological feed.
+ */
+export const MilestoneFeed: React.FC<MilestoneFeedProps> = ({
+  limit = 10,
+}) => {
+  const sloClient = usePluginClient(SloApi);
+
+  const { data } = sloClient.getRecentMilestones.useQuery({ limit });
+
+  const milestones = data?.milestones;
+
+  if (!milestones || milestones.length === 0) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
+            <Trophy className="w-4 h-4" />
+            Recent Milestones
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-sm text-muted-foreground text-center py-4">
+            No milestones achieved yet
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm text-muted-foreground flex items-center gap-2">
+          <Trophy className="w-4 h-4" />
+          Recent Milestones
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {milestones.map((milestone, index) => {
+            const emoji =
+              ACHIEVEMENT_EMOJI[milestone.achievement] ?? "🏅";
+            const label =
+              ACHIEVEMENT_LABEL[milestone.achievement] ??
+              milestone.achievement;
+
+            return (
+              <div
+                key={`${milestone.systemId}-${milestone.achievement}-${index}`}
+                className="flex items-start gap-3"
+              >
+                <span className="text-lg shrink-0">{emoji}</span>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">{label}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {milestone.systemName ?? milestone.systemId}
+                    <span className="mx-1">·</span>
+                    {formatDistanceToNow(new Date(milestone.unlockedAt), {
+                      addSuffix: true,
+                    })}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/SloEditor.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { SloApi, type SloObjective } from "../api";
+import type { System } from "@checkstack/catalog-common";
+import type { DependencyExclusionMode } from "@checkstack/slo-common";
+import { HealthCheckApi } from "@checkstack/healthcheck-common";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  useToast,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@checkstack/ui";
+import { extractErrorMessage } from "@checkstack/common";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  objective?: SloObjective;
+  systems: System[];
+  onSave: () => void;
+}
+
+export const SloEditor: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  objective,
+  systems,
+  onSave,
+}) => {
+  const sloClient = usePluginClient(SloApi);
+  const hcClient = usePluginClient(HealthCheckApi);
+  const toast = useToast();
+
+  // Form state
+  const [systemId, setSystemId] = useState("");
+  const [target, setTarget] = useState("99.9");
+  const [windowDays, setWindowDays] = useState("30");
+  const [dependencyExclusion, setDependencyExclusion] =
+    useState<DependencyExclusionMode>("strict");
+  const [warningPercent, setWarningPercent] = useState("50");
+  const [criticalPercent, setCriticalPercent] = useState("80");
+  const [healthCheckConfigurationId, setHealthCheckConfigurationId] =
+    useState<string | undefined>();
+  // Fetch health check associations for the selected system
+  const effectiveSystemId = systemId || objective?.systemId;
+  const { data: hcAssociationsData } =
+    hcClient.getSystemAssociations.useQuery(
+      { systemId: effectiveSystemId ?? "" },
+      { enabled: !!effectiveSystemId },
+    );
+
+  // Reset form when objective changes
+  useEffect(() => {
+    if (objective) {
+      setSystemId(objective.systemId);
+      setTarget(String(objective.target));
+      setWindowDays(String(objective.windowDays));
+      setDependencyExclusion(objective.dependencyExclusion);
+      setWarningPercent(
+        String(objective.burnRateThresholds.warningPercent),
+      );
+      setCriticalPercent(
+        String(objective.burnRateThresholds.criticalPercent),
+      );
+      setHealthCheckConfigurationId(
+        objective.healthCheckConfigurationId ?? undefined,
+      );
+    } else {
+      setSystemId("");
+      setTarget("99.9");
+      setWindowDays("30");
+      setDependencyExclusion("strict");
+      setWarningPercent("50");
+      setCriticalPercent("80");
+      setHealthCheckConfigurationId(undefined);
+    }
+  }, [objective, open]);
+
+  // Mutations
+  const createMutation = sloClient.createObjective.useMutation({
+    onSuccess: () => {
+      toast.success("SLO objective created");
+      onSave();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to create"));
+    },
+  });
+
+  const updateMutation = sloClient.updateObjective.useMutation({
+    onSuccess: () => {
+      toast.success("SLO objective updated");
+      onSave();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to update"));
+    },
+  });
+
+  const handleSubmit = () => {
+    const targetNum = Number.parseFloat(target);
+    const windowNum = Number.parseInt(windowDays, 10);
+    const warningNum = Number.parseFloat(warningPercent);
+    const criticalNum = Number.parseFloat(criticalPercent);
+
+    if (!systemId) {
+      toast.error("Please select a system");
+      return;
+    }
+    if (Number.isNaN(targetNum) || targetNum < 0 || targetNum > 100) {
+      toast.error("Target must be between 0 and 100");
+      return;
+    }
+    if (Number.isNaN(windowNum) || windowNum < 1) {
+      toast.error("Window must be at least 1 day");
+      return;
+    }
+
+    if (objective) {
+      updateMutation.mutate({
+        id: objective.id,
+        target: targetNum,
+        windowDays: windowNum,
+        dependencyExclusion,
+        burnRateThresholds: {
+          warningPercent: warningNum,
+          criticalPercent: criticalNum,
+          fastBurnMultiplier: 5,
+        },
+      });
+    } else {
+      createMutation.mutate({
+        systemId,
+        healthCheckConfigurationId,
+        target: targetNum,
+        windowDays: windowNum,
+        dependencyExclusion,
+        burnRateThresholds: {
+          warningPercent: warningNum,
+          criticalPercent: criticalNum,
+          fastBurnMultiplier: 5,
+        },
+      });
+    }
+  };
+
+  const saving = createMutation.isPending || updateMutation.isPending;
+
+  const systemAssociations = hcAssociationsData ?? [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {objective ? "Edit SLO Objective" : "Create SLO Objective"}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {objective
+              ? "Modify SLO objective settings"
+              : "Define a new Service Level Objective for a system"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* System selector - only for create */}
+          {!objective && (
+            <div className="grid gap-2">
+              <Label htmlFor="slo-system">System</Label>
+              <Select value={systemId} onValueChange={setSystemId}>
+                <SelectTrigger id="slo-system">
+                  <SelectValue placeholder="Select a system" />
+                </SelectTrigger>
+                <SelectContent>
+                  {systems.map((system) => (
+                    <SelectItem key={system.id} value={system.id}>
+                      {system.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Health Check scope - only show when system has associated HCs */}
+          {systemAssociations.length > 0 && (
+            <div className="grid gap-2">
+              <Label>Health Check Scope</Label>
+              <Select
+                value={healthCheckConfigurationId ?? "__all__"}
+                onValueChange={(v) =>
+                  setHealthCheckConfigurationId(
+                    v === "__all__" ? undefined : v,
+                  )
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">
+                    All health checks (system-global)
+                  </SelectItem>
+                  {systemAssociations.map((assoc) => (
+                    <SelectItem
+                      key={assoc.configurationId}
+                      value={assoc.configurationId}
+                    >
+                      {assoc.configurationName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {healthCheckConfigurationId
+                  ? "This SLO only tracks downtime from the selected health check."
+                  : "This SLO tracks all health checks for the system."}
+              </p>
+            </div>
+          )}
+
+
+          {/* Target */}
+          <div className="grid gap-2">
+            <Label htmlFor="slo-target">Availability Target (%)</Label>
+            <Input
+              id="slo-target"
+              type="number"
+              step="0.01"
+              min="0"
+              max="100"
+              value={target}
+              onChange={(e) => setTarget(e.target.value)}
+              placeholder="99.9"
+            />
+            <p className="text-xs text-muted-foreground">
+              Common targets: 99.0% (3.65 days/year), 99.9% (8.76
+              hours/year), 99.95% (4.38 hours/year)
+            </p>
+          </div>
+
+          {/* Rolling window */}
+          <div className="grid gap-2">
+            <Label htmlFor="slo-window">Rolling Window (days)</Label>
+            <Input
+              id="slo-window"
+              type="number"
+              min="1"
+              value={windowDays}
+              onChange={(e) => setWindowDays(e.target.value)}
+              placeholder="30"
+            />
+          </div>
+
+          {/* Dependency exclusion mode */}
+          <div className="grid gap-2">
+            <Label>Dependency Exclusion Mode</Label>
+            <Select
+              value={dependencyExclusion}
+              onValueChange={(v) =>
+                setDependencyExclusion(v as DependencyExclusionMode)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="strict">
+                  Strict — All downtime counts
+                </SelectItem>
+                <SelectItem value="self-only">
+                  Self-Only — Exclude upstream-attributed downtime
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              {dependencyExclusion === "strict"
+                ? "All downtime counts against the error budget, regardless of cause."
+                : "Only self-caused downtime counts. When an upstream dependency is also down, that time is excluded."}
+            </p>
+          </div>
+
+          {/* Burn rate thresholds */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="slo-warning">Warning Threshold (%)</Label>
+              <Input
+                id="slo-warning"
+                type="number"
+                min="0"
+                max="100"
+                value={warningPercent}
+                onChange={(e) => setWarningPercent(e.target.value)}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="slo-critical">Critical Threshold (%)</Label>
+              <Input
+                id="slo-critical"
+                type="number"
+                min="0"
+                max="100"
+                value={criticalPercent}
+                onChange={(e) => setCriticalPercent(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Saving..." : objective ? "Update" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/SloMenuItems.tsx

@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom";
+import { Target, Settings } from "lucide-react";
+import type { UserMenuItemsContext } from "@checkstack/frontend-api";
+import { DropdownMenuItem } from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import { sloRoutes, sloAccess, pluginMetadata } from "@checkstack/slo-common";
+
+export const SloMenuItems = ({
+  accessRules: userPerms,
+}: UserMenuItemsContext) => {
+  const qualifiedId = `${pluginMetadata.pluginId}.${sloAccess.slo.manage.id}`;
+  const canManage = userPerms.includes("*") || userPerms.includes(qualifiedId);
+
+  return (
+    <>
+      <Link to={resolveRoute(sloRoutes.routes.overview)}>
+        <DropdownMenuItem icon={<Target className="w-4 h-4" />}>
+          SLO Dashboard
+        </DropdownMenuItem>
+      </Link>
+      {canManage && (
+        <Link to={resolveRoute(sloRoutes.routes.config)}>
+          <DropdownMenuItem icon={<Settings className="w-4 h-4" />}>
+            SLO Management
+          </DropdownMenuItem>
+        </Link>
+      )}
+    </>
+  );
+};

package/src/components/SloTrendChart.tsx

@@ -0,0 +1,183 @@
+import React, { useMemo } from "react";
+
+interface Snapshot {
+  date: Date;
+  availabilityPercent: number;
+  budgetRemainingPercent: number;
+}
+
+interface SloTrendChartProps {
+  snapshots: Snapshot[];
+  target: number;
+}
+
+const CHART_HEIGHT = 160;
+const CHART_PADDING = { top: 8, right: 12, bottom: 24, left: 48 };
+
+/**
+ * Pure SVG line chart showing SLO availability trend from daily snapshots.
+ * Draws a target line, area fill, and data line with responsive sizing.
+ */
+export const SloTrendChart: React.FC<SloTrendChartProps> = ({
+  snapshots,
+  target,
+}) => {
+  const chartData = useMemo(() => {
+    if (snapshots.length === 0) return;
+
+    const sorted = snapshots.toSorted(
+      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+    );
+
+    // Y-axis range: ensure target and all data points are visible
+    const allValues = sorted.map((s) => s.availabilityPercent);
+    const minVal = Math.min(...allValues, target);
+    const maxVal = Math.max(...allValues, 100);
+    const yMin = Math.max(Math.floor(minVal - 0.5), 0);
+    const yMax = Math.min(Math.ceil(maxVal + 0.5), 100);
+    const yRange = yMax - yMin || 1;
+
+    return { sorted, yMin, yMax, yRange };
+  }, [snapshots, target]);
+
+  if (!chartData || chartData.sorted.length < 2) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        {chartData && chartData.sorted.length === 1
+          ? "Need at least 2 daily snapshots to render a trend chart"
+          : "No daily snapshot data available yet"}
+      </div>
+    );
+  }
+
+  const { sorted, yMin, yMax, yRange } = chartData;
+  const drawWidth = 100 - CHART_PADDING.left - CHART_PADDING.right;
+
+  // Compute scaled positions (in viewBox %)
+  const scaleX = (index: number) =>
+    CHART_PADDING.left + (index / (sorted.length - 1)) * drawWidth;
+
+  const drawHeight = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
+  const scaleY = (value: number) =>
+    CHART_PADDING.top + ((yMax - value) / yRange) * drawHeight;
+
+  // Build SVG path for the line
+  const linePath = sorted
+    .map(
+      (s, i) =>
+        `${i === 0 ? "M" : "L"} ${scaleX(i).toFixed(2)} ${scaleY(s.availabilityPercent).toFixed(2)}`,
+    )
+    .join(" ");
+
+  // Build SVG path for the area fill
+  const areaPath = `${linePath} L ${scaleX(sorted.length - 1).toFixed(2)} ${scaleY(yMin).toFixed(2)} L ${scaleX(0).toFixed(2)} ${scaleY(yMin).toFixed(2)} Z`;
+
+  // Target line Y position
+  const targetY = scaleY(target);
+
+  // Y-axis tick values
+  const yTicks = [yMin, target, yMax].filter(
+    (v, i, arr) => arr.indexOf(v) === i,
+  );
+
+  // X-axis labels (first, middle, last)
+  const xLabels = [0, Math.floor(sorted.length / 2), sorted.length - 1]
+    .filter((v, i, arr) => arr.indexOf(v) === i)
+    .map((i) => ({
+      x: scaleX(i),
+      label: new Date(sorted[i].date).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      }),
+    }));
+
+  return (
+    <svg
+      viewBox={`0 0 100 ${CHART_HEIGHT}`}
+      className="w-full"
+      preserveAspectRatio="none"
+      style={{ height: CHART_HEIGHT }}
+    >
+      {/* Area fill */}
+      <path d={areaPath} fill="url(#slo-gradient)" opacity={0.3} />
+
+      {/* Gradient definition */}
+      <defs>
+        <linearGradient id="slo-gradient" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
+          <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+
+      {/* Target line */}
+      <line
+        x1={CHART_PADDING.left}
+        y1={targetY}
+        x2={100 - CHART_PADDING.right}
+        y2={targetY}
+        stroke="hsl(var(--destructive))"
+        strokeWidth={0.3}
+        strokeDasharray="1 1"
+        opacity={0.6}
+      />
+
+      {/* Data line */}
+      <path
+        d={linePath}
+        fill="none"
+        stroke="hsl(var(--primary))"
+        strokeWidth={0.5}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+
+      {/* Data points */}
+      {sorted.map((s, i) => (
+        <circle
+          key={i}
+          cx={scaleX(i)}
+          cy={scaleY(s.availabilityPercent)}
+          r={0.8}
+          fill="hsl(var(--primary))"
+        >
+          <title>
+            {new Date(s.date).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+            })}
+            : {s.availabilityPercent.toFixed(3)}%
+          </title>
+        </circle>
+      ))}
+
+      {/* Y-axis labels */}
+      {yTicks.map((tick) => (
+        <text
+          key={tick}
+          x={CHART_PADDING.left - 2}
+          y={scaleY(tick)}
+          textAnchor="end"
+          dominantBaseline="middle"
+          className="fill-muted-foreground"
+          fontSize={3.5}
+        >
+          {tick}%
+        </text>
+      ))}
+
+      {/* X-axis labels */}
+      {xLabels.map((item) => (
+        <text
+          key={item.x}
+          x={item.x}
+          y={CHART_HEIGHT - 4}
+          textAnchor="middle"
+          className="fill-muted-foreground"
+          fontSize={3}
+        >
+          {item.label}
+        </text>
+      ))}
+    </svg>
+  );
+};

package/src/components/StreakCounter.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Flame, Trophy } from "lucide-react";
+
+interface StreakCounterProps {
+  currentStreak: number;
+  bestStreak: number;
+}
+
+/**
+ * Fire-themed streak counter showing consecutive SLO-compliant days.
+ * Current streak displays with a flame icon; best streak shown below.
+ */
+export const StreakCounter: React.FC<StreakCounterProps> = ({
+  currentStreak,
+  bestStreak,
+}) => {
+  const getFlameColor = () => {
+    if (currentStreak >= 90) return "text-amber-400";
+    if (currentStreak >= 30) return "text-orange-500";
+    if (currentStreak >= 7) return "text-orange-400";
+    return "text-muted-foreground";
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <div className="flex items-center gap-2">
+        <Flame
+          className={`w-5 h-5 ${getFlameColor()} ${currentStreak > 0 ? "animate-pulse" : ""}`}
+        />
+        <span className="text-2xl font-bold tabular-nums">
+          {currentStreak}
+        </span>
+        <span className="text-sm text-muted-foreground">
+          {currentStreak === 1 ? "day" : "days"}
+        </span>
+      </div>
+      {bestStreak > 0 && bestStreak > currentStreak && (
+        <div className="flex items-center gap-1 text-sm text-muted-foreground">
+          <Trophy className="w-3.5 h-3.5" />
+          <span>Best: {bestStreak}d</span>
+        </div>
+      )}
+    </div>
+  );
+};