@checkstack/slo-frontend 0.2.0

package/src/components/SystemSloBadge.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
+import { SloApi } from "../api";
+import { SLO_STATUS_CHANGED } from "@checkstack/slo-common";
+import { Badge } from "@checkstack/ui";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+/**
+ * Badge displaying if a system's SLO is breaching, degraded, or at risk.
+ * Rendered in SystemStateBadgesSlot on the catalog/dashboard.
+ */
+export const SystemSloBadge: React.FC<Props> = ({ system }) => {
+  const sloClient = usePluginClient(SloApi);
+
+  const { data, refetch } = sloClient.getObjectivesForSystem.useQuery(
+    { systemId: system?.id ?? "" },
+    { enabled: !!system?.id },
+  );
+
+  useSignal(SLO_STATUS_CHANGED, ({ systemId }) => {
+    if (system?.id && systemId === system.id) {
+      void refetch();
+    }
+  });
+
+  if (!data || data.length === 0) return;
+
+  // Determine worst status across all SLOs for this system
+  const hasBreaching = data.some((item) => item.status.isBreaching);
+  const hasDegraded = data.some((item) => item.status.hasOpenDowntime);
+  const hasAtRisk = data.some(
+    (item) => item.status.errorBudgetRemainingPercent <= 20,
+  );
+
+  if (hasBreaching) {
+    return <Badge variant="destructive">SLO Breaching</Badge>;
+  }
+
+  if (hasDegraded) {
+    return <Badge variant="warning">SLO Degraded</Badge>;
+  }
+
+  if (hasAtRisk) {
+    return <Badge variant="warning">SLO At Risk</Badge>;
+  }
+
+  return;
+};

package/src/components/SystemSloPanel.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
+import { SloApi } from "../api";
+import { SLO_STATUS_CHANGED, sloRoutes } from "@checkstack/slo-common";
+import { resolveRoute } from "@checkstack/common";
+import { ErrorBudgetBar } from "./ErrorBudgetBar";
+import { BurnRateIndicator } from "./BurnRateIndicator";
+import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
+import { Target } from "lucide-react";
+import { Link } from "react-router-dom";
+
+type Props = SlotContext<typeof SystemDetailsTopSlot>;
+
+/**
+ * SLO panel embedded in the system detail page.
+ * Shows all SLO objectives for the system with error budget bars.
+ */
+export const SystemSloPanel: React.FC<Props> = ({ system }) => {
+  const sloClient = usePluginClient(SloApi);
+
+  const { data: objectives, refetch } =
+    sloClient.getObjectivesForSystem.useQuery(
+      { systemId: system?.id ?? "" },
+      { enabled: !!system?.id },
+    );
+
+  useSignal(SLO_STATUS_CHANGED, ({ systemId }) => {
+    if (system?.id && systemId === system.id) {
+      void refetch();
+    }
+  });
+
+  if (!objectives || objectives.length === 0) return;
+
+  return (
+    <Card className="border-border shadow-sm">
+      <CardHeader className="border-b border-border bg-muted/30">
+        <div className="flex items-center gap-2">
+          <Target className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-lg font-semibold">
+            Service Level Objectives
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-6">
+        <div className="space-y-4">
+          {objectives.map((item) => (
+            <Link
+              key={item.objective.id}
+              to={resolveRoute(sloRoutes.routes.detail, {
+                sloId: item.objective.id,
+              })}
+              className="block space-y-2 rounded-md border border-border p-3 transition-colors hover:border-primary/50 no-underline"
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">
+                  {item.objective.target}% / {item.objective.windowDays}d
+                </span>
+                <BurnRateIndicator burnRate={item.status.burnRate} />
+              </div>
+              <ErrorBudgetBar
+                consumedPercent={
+                  100 - item.status.errorBudgetRemainingPercent
+                }
+                warningThreshold={
+                  item.objective.burnRateThresholds.warningPercent
+                }
+                criticalThreshold={
+                  item.objective.burnRateThresholds.criticalPercent
+                }
+              />
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>
+                  {item.status.currentAvailability?.toFixed(3) ?? "—"}%
+                  availability
+                </span>
+                <span>
+                  {item.status.errorBudgetRemainingMinutes.toFixed(1)} min
+                  remaining
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,57 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import {
+  sloRoutes,
+  pluginMetadata,
+  sloAccess,
+} from "@checkstack/slo-common";
+import {
+  SystemDetailsTopSlot,
+  SystemStateBadgesSlot,
+} from "@checkstack/catalog-common";
+import { SloOverviewPage } from "./pages/SloOverviewPage";
+import { SloConfigPage } from "./pages/SloConfigPage";
+import { SloDetailPage } from "./pages/SloDetailPage";
+import { SystemSloPanel } from "./components/SystemSloPanel";
+import { SystemSloBadge } from "./components/SystemSloBadge";
+import { SloMenuItems } from "./components/SloMenuItems";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: sloRoutes.routes.overview,
+      element: <SloOverviewPage />,
+      title: "SLO Dashboard",
+    },
+    {
+      route: sloRoutes.routes.config,
+      element: <SloConfigPage />,
+      title: "SLO Management",
+      accessRule: sloAccess.slo.manage,
+    },
+    {
+      route: sloRoutes.routes.detail,
+      element: <SloDetailPage />,
+      title: "SLO Detail",
+    },
+  ],
+  apis: [],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "slo.user-menu.items",
+      component: SloMenuItems,
+    }),
+    createSlotExtension(SystemStateBadgesSlot, {
+      id: "slo.system-state-badge",
+      component: SystemSloBadge,
+    }),
+    createSlotExtension(SystemDetailsTopSlot, {
+      id: "slo.system-details-top.panel",
+      component: SystemSloPanel,
+    }),
+  ],
+});

package/src/pages/SloConfigPage.tsx

@@ -0,0 +1,242 @@
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { SloApi } from "../api";
+import { sloAccess, type SloObjective } from "@checkstack/slo-common";
+import { CatalogApi } from "@checkstack/catalog-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Badge,
+  LoadingSpinner,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  useToast,
+  ConfirmationModal,
+  PageLayout,
+} from "@checkstack/ui";
+import { Plus, Target, Trash2, Edit2 } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+import { SloEditor } from "../components/SloEditor";
+
+const SloConfigPageContent: React.FC = () => {
+  const sloClient = usePluginClient(SloApi);
+  const catalogClient = usePluginClient(CatalogApi);
+  const accessApi = useApi(accessApiRef);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const toast = useToast();
+
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    sloAccess.slo.manage,
+  );
+
+  const {
+    data: objectivesData,
+    isLoading: objectivesLoading,
+    refetch: refetchObjectives,
+  } = sloClient.listObjectives.useQuery({});
+
+  const { data: systemsData, isLoading: systemsLoading } =
+    catalogClient.getSystems.useQuery({});
+
+  const objectives = objectivesData?.objectives ?? [];
+  const systems = systemsData?.systems ?? [];
+  const loading = objectivesLoading || systemsLoading;
+
+  // Editor state
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingObjective, setEditingObjective] = useState<
+    SloObjective | undefined
+  >();
+
+  // Delete confirmation state
+  const [deleteId, setDeleteId] = useState<string | undefined>();
+
+  // Handle ?action=create URL parameter (from command palette)
+  useEffect(() => {
+    if (searchParams.get("action") === "create" && canManage) {
+      setEditingObjective(undefined);
+      setEditorOpen(true);
+      searchParams.delete("action");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, canManage, setSearchParams]);
+
+  const handleCreate = () => {
+    setEditingObjective(undefined);
+    setEditorOpen(true);
+  };
+
+  const handleEdit = (obj: SloObjective) => {
+    setEditingObjective(obj);
+    setEditorOpen(true);
+  };
+
+  const handleSave = () => {
+    setEditorOpen(false);
+    void refetchObjectives();
+  };
+
+  const deleteMutation = sloClient.deleteObjective.useMutation({
+    onSuccess: () => {
+      toast.success("SLO objective deleted");
+      void refetchObjectives();
+      setDeleteId(undefined);
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to delete"));
+    },
+  });
+
+  const handleDelete = () => {
+    if (!deleteId) return;
+    deleteMutation.mutate({ id: deleteId });
+  };
+
+  const getSystemName = (systemId: string) => {
+    return systems.find((s) => s.id === systemId)?.name ?? systemId;
+  };
+
+  const getExclusionBadge = (mode: SloObjective["dependencyExclusion"]) => {
+    switch (mode) {
+      case "strict": {
+        return <Badge variant="secondary">Strict</Badge>;
+      }
+      case "self-only": {
+        return <Badge variant="info">Self-Only</Badge>;
+      }
+      default: {
+        return <Badge>{mode}</Badge>;
+      }
+    }
+  };
+
+  return (
+    <PageLayout
+      title="SLO Management"
+      subtitle="Define and manage Service Level Objectives"
+      icon={Target}
+      loading={accessLoading}
+      allowed={canManage}
+      actions={
+        <Button onClick={handleCreate}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create SLO
+        </Button>
+      }
+    >
+      <Card>
+        <CardHeader className="border-b border-border">
+          <div className="flex items-center gap-2">
+            <Target className="h-5 w-5 text-muted-foreground" />
+            <CardTitle>Objectives</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-12 flex justify-center">
+              <LoadingSpinner />
+            </div>
+          ) : objectives.length === 0 ? (
+            <EmptyState
+              title="No SLO objectives"
+              description="Create your first SLO objective to start tracking reliability."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>System</TableHead>
+                  <TableHead>Target</TableHead>
+                  <TableHead>Window</TableHead>
+                  <TableHead>Exclusion Mode</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="w-24">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {objectives.map((item) => (
+                  <TableRow key={item.objective.id}>
+                    <TableCell className="font-medium">
+                      {getSystemName(item.objective.systemId)}
+                    </TableCell>
+                    <TableCell>{item.objective.target}%</TableCell>
+                    <TableCell>{item.objective.windowDays}d</TableCell>
+                    <TableCell>
+                      {getExclusionBadge(
+                        item.objective.dependencyExclusion,
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {item.status.isBreaching ? (
+                        <Badge variant="destructive">Breaching</Badge>
+                      ) : item.status.hasOpenDowntime ? (
+                        <Badge variant="warning">Degraded</Badge>
+                      ) : item.status.errorBudgetRemainingPercent <= 20 ? (
+                        <Badge variant="warning">At Risk</Badge>
+                      ) : (
+                        <Badge variant="success">Healthy</Badge>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEdit(item.objective)}
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setDeleteId(item.objective.id)}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <SloEditor
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        objective={editingObjective}
+        systems={systems}
+        onSave={handleSave}
+      />
+
+      <ConfirmationModal
+        isOpen={!!deleteId}
+        onClose={() => setDeleteId(undefined)}
+        title="Delete SLO Objective"
+        message="Are you sure you want to delete this SLO objective? All associated downtime events and snapshots will also be deleted."
+        confirmText="Delete"
+        variant="danger"
+        onConfirm={handleDelete}
+        isLoading={deleteMutation.isPending}
+      />
+    </PageLayout>
+  );
+};
+
+export const SloConfigPage = wrapInSuspense(SloConfigPageContent);