@checkstack/incident-frontend 0.0.2

package/src/components/SystemIncidentPanel.tsx

@@ -0,0 +1,240 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { Link } from "react-router-dom";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { resolveRoute } from "@checkstack/common";
+import { SystemDetailsTopSlot } from "@checkstack/catalog-common";
+import { incidentApiRef } from "../api";
+import {
+  incidentRoutes,
+  INCIDENT_UPDATED,
+  type IncidentWithSystems,
+} from "@checkstack/incident-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  LoadingSpinner,
+  Button,
+} from "@checkstack/ui";
+import { AlertTriangle, Clock, History, ChevronRight } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+type Props = SlotContext<typeof SystemDetailsTopSlot>;
+
+const SEVERITY_WEIGHTS = { critical: 3, major: 2, minor: 1 } as const;
+
+function getSeverityColor(severity: string): string {
+  switch (severity) {
+    case "critical": {
+      return "border-destructive/30 bg-destructive/5";
+    }
+    case "major": {
+      return "border-warning/30 bg-warning/5";
+    }
+    default: {
+      return "border-info/30 bg-info/5";
+    }
+  }
+}
+
+function getSeverityHeaderColor(severity: string): string {
+  switch (severity) {
+    case "critical": {
+      return "bg-destructive/10";
+    }
+    case "major": {
+      return "bg-warning/10";
+    }
+    default: {
+      return "bg-info/10";
+    }
+  }
+}
+
+function findMostSevereIncident(
+  incidents: IncidentWithSystems[]
+): IncidentWithSystems {
+  let mostSevere = incidents[0];
+  for (const incident of incidents) {
+    const currentWeight =
+      SEVERITY_WEIGHTS[incident.severity as keyof typeof SEVERITY_WEIGHTS] || 0;
+    const mostWeight =
+      SEVERITY_WEIGHTS[mostSevere.severity as keyof typeof SEVERITY_WEIGHTS] ||
+      0;
+    if (currentWeight > mostWeight) {
+      mostSevere = incident;
+    }
+  }
+  return mostSevere;
+}
+
+/**
+ * Panel shown on system detail pages displaying active incidents.
+ * Listens for realtime updates via signals.
+ */
+export const SystemIncidentPanel: React.FC<Props> = ({ system }) => {
+  const api = useApi(incidentApiRef);
+  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refetch = useCallback(() => {
+    if (!system?.id) return;
+
+    api
+      .getIncidentsForSystem({ systemId: system.id })
+      .then(setIncidents)
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [system?.id, api]);
+
+  // Initial fetch
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // Listen for realtime incident updates
+  useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
+    if (system?.id && systemIds.includes(system.id)) {
+      refetch();
+    }
+  });
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="p-6 flex justify-center">
+          <LoadingSpinner />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (incidents.length === 0) {
+    // Show a subtle card with just the history button when no active incidents
+    return (
+      <Card className="border-border/50">
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <AlertTriangle className="h-4 w-4" />
+              <span className="text-sm">No active incidents</span>
+            </div>
+            <Button variant="ghost" size="sm" asChild>
+              <Link
+                to={resolveRoute(incidentRoutes.routes.systemHistory, {
+                  systemId: system.id,
+                })}
+              >
+                <History className="h-4 w-4 mr-1" />
+                View History
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "investigating": {
+        return <Badge variant="destructive">Investigating</Badge>;
+      }
+      case "identified": {
+        return <Badge variant="warning">Identified</Badge>;
+      }
+      case "fixing": {
+        return <Badge variant="warning">Fixing</Badge>;
+      }
+      case "monitoring": {
+        return <Badge variant="info">Monitoring</Badge>;
+      }
+      default: {
+        return <Badge>{status}</Badge>;
+      }
+    }
+  };
+
+  // Use the most severe incident for the card styling
+  const mostSevere = findMostSevereIncident(incidents);
+
+  return (
+    <Card className={getSeverityColor(mostSevere.severity)}>
+      <CardHeader
+        className={`border-b border-border ${getSeverityHeaderColor(
+          mostSevere.severity
+        )}`}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            <CardTitle className="text-lg font-semibold">
+              Active Incidents ({incidents.length})
+            </CardTitle>
+          </div>
+          <Button variant="ghost" size="sm" asChild>
+            <Link
+              to={resolveRoute(incidentRoutes.routes.systemHistory, {
+                systemId: system.id,
+              })}
+            >
+              <History className="h-4 w-4 mr-1" />
+              View History
+            </Link>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 space-y-3">
+        {incidents.map((i) => (
+          <Link
+            key={i.id}
+            to={`${resolveRoute(incidentRoutes.routes.detail, {
+              incidentId: i.id,
+            })}?from=${system.id}`}
+            className="block p-3 rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-start justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <h4 className="font-medium text-foreground">{i.title}</h4>
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge
+                  variant={
+                    i.severity === "critical"
+                      ? "destructive"
+                      : i.severity === "major"
+                      ? "warning"
+                      : "secondary"
+                  }
+                >
+                  {i.severity}
+                </Badge>
+                {getStatusBadge(i.status)}
+              </div>
+            </div>
+            {i.description && (
+              <p className="text-sm text-muted-foreground mb-2">
+                {i.description}
+              </p>
+            )}
+            <div className="flex gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                <span>
+                  Started{" "}
+                  {formatDistanceToNow(new Date(i.createdAt), {
+                    addSuffix: true,
+                  })}
+                </span>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,69 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  rpcApiRef,
+  type ApiRef,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import { incidentApiRef, type IncidentApiClient } from "./api";
+import {
+  incidentRoutes,
+  IncidentApi,
+  pluginMetadata,
+  permissions,
+} from "@checkstack/incident-common";
+import {
+  SystemDetailsTopSlot,
+  SystemStateBadgesSlot,
+} from "@checkstack/catalog-common";
+import { IncidentConfigPage } from "./pages/IncidentConfigPage";
+import { IncidentDetailPage } from "./pages/IncidentDetailPage";
+import { SystemIncidentHistoryPage } from "./pages/SystemIncidentHistoryPage";
+import { SystemIncidentPanel } from "./components/SystemIncidentPanel";
+import { SystemIncidentBadge } from "./components/SystemIncidentBadge";
+import { IncidentMenuItems } from "./components/IncidentMenuItems";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: incidentRoutes.routes.config,
+      element: <IncidentConfigPage />,
+      title: "Incidents",
+      permission: permissions.incidentManage,
+    },
+    {
+      route: incidentRoutes.routes.detail,
+      element: <IncidentDetailPage />,
+      title: "Incident Details",
+    },
+    {
+      route: incidentRoutes.routes.systemHistory,
+      element: <SystemIncidentHistoryPage />,
+      title: "System Incident History",
+    },
+  ],
+  apis: [
+    {
+      ref: incidentApiRef,
+      factory: (deps: { get: <T>(ref: ApiRef<T>) => T }): IncidentApiClient => {
+        const rpcApi = deps.get(rpcApiRef);
+        return rpcApi.forPlugin(IncidentApi);
+      },
+    },
+  ],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "incident.user-menu.items",
+      component: IncidentMenuItems,
+    }),
+    createSlotExtension(SystemStateBadgesSlot, {
+      id: "incident.system-incident-badge",
+      component: SystemIncidentBadge,
+    }),
+    createSlotExtension(SystemDetailsTopSlot, {
+      id: "incident.system-details-top.panel",
+      component: SystemIncidentPanel,
+    }),
+  ],
+});

package/src/pages/IncidentConfigPage.tsx

@@ -0,0 +1,387 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  permissionApiRef,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { incidentApiRef } from "../api";
+import type {
+  IncidentWithSystems,
+  IncidentStatus,
+} from "@checkstack/incident-common";
+import { CatalogApi, type System } from "@checkstack/catalog-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Badge,
+  LoadingSpinner,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  useToast,
+  ConfirmationModal,
+  PageLayout,
+} from "@checkstack/ui";
+import {
+  Plus,
+  AlertTriangle,
+  Trash2,
+  Edit2,
+  Clock,
+  CheckCircle2,
+} from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { IncidentEditor } from "../components/IncidentEditor";
+
+const IncidentConfigPageContent: React.FC = () => {
+  const api = useApi(incidentApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
+  const toast = useToast();
+
+  const { allowed: canManage, loading: permissionLoading } =
+    permissionApi.useResourcePermission("incident", "manage");
+
+  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
+  const [systems, setSystems] = useState<System[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState<IncidentStatus | "all">(
+    "all"
+  );
+  const [showResolved, setShowResolved] = useState(false);
+
+  // Editor state
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingIncident, setEditingIncident] = useState<
+    IncidentWithSystems | undefined
+  >();
+
+  // Delete confirmation state
+  const [deleteId, setDeleteId] = useState<string | undefined>();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Resolve confirmation state
+  const [resolveId, setResolveId] = useState<string | undefined>();
+  const [isResolving, setIsResolving] = useState(false);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [incidentList, systemList] = await Promise.all([
+        api.listIncidents(
+          statusFilter === "all"
+            ? { includeResolved: showResolved }
+            : { status: statusFilter, includeResolved: showResolved }
+        ),
+        catalogApi.getSystems(),
+      ]);
+      setIncidents(incidentList);
+      setSystems(systemList);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load";
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [statusFilter, showResolved]);
+
+  // Handle ?action=create URL parameter (from command palette)
+  useEffect(() => {
+    if (searchParams.get("action") === "create" && canManage) {
+      setEditingIncident(undefined);
+      setEditorOpen(true);
+      // Clear the URL param after opening
+      searchParams.delete("action");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, canManage, setSearchParams]);
+
+  const handleCreate = () => {
+    setEditingIncident(undefined);
+    setEditorOpen(true);
+  };
+
+  const handleEdit = (i: IncidentWithSystems) => {
+    setEditingIncident(i);
+    setEditorOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+
+    setIsDeleting(true);
+    try {
+      await api.deleteIncident({ id: deleteId });
+      toast.success("Incident deleted");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to delete";
+      toast.error(message);
+    } finally {
+      setIsDeleting(false);
+      setDeleteId(undefined);
+    }
+  };
+
+  const handleResolve = async () => {
+    if (!resolveId) return;
+
+    setIsResolving(true);
+    try {
+      await api.resolveIncident({ id: resolveId });
+      toast.success("Incident resolved");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to resolve";
+      toast.error(message);
+    } finally {
+      setIsResolving(false);
+      setResolveId(undefined);
+    }
+  };
+
+  const handleSave = () => {
+    setEditorOpen(false);
+    loadData();
+  };
+
+  const getStatusBadge = (status: IncidentStatus) => {
+    switch (status) {
+      case "investigating": {
+        return <Badge variant="destructive">Investigating</Badge>;
+      }
+      case "identified": {
+        return <Badge variant="warning">Identified</Badge>;
+      }
+      case "fixing": {
+        return <Badge variant="warning">Fixing</Badge>;
+      }
+      case "monitoring": {
+        return <Badge variant="info">Monitoring</Badge>;
+      }
+      case "resolved": {
+        return <Badge variant="success">Resolved</Badge>;
+      }
+      default: {
+        return <Badge>{status}</Badge>;
+      }
+    }
+  };
+
+  const getSeverityBadge = (severity: string) => {
+    switch (severity) {
+      case "critical": {
+        return <Badge variant="destructive">Critical</Badge>;
+      }
+      case "major": {
+        return <Badge variant="warning">Major</Badge>;
+      }
+      default: {
+        return <Badge variant="secondary">Minor</Badge>;
+      }
+    }
+  };
+
+  const getSystemNames = (systemIds: string[]): string => {
+    const names = systemIds
+      .map((id) => systems.find((s) => s.id === id)?.name ?? id)
+      .slice(0, 3);
+    if (systemIds.length > 3) {
+      names.push(`+${systemIds.length - 3} more`);
+    }
+    return names.join(", ");
+  };
+
+  return (
+    <PageLayout
+      title="Incident Management"
+      subtitle="Track and manage incidents affecting your systems"
+      loading={permissionLoading}
+      allowed={canManage}
+      actions={
+        <Button onClick={handleCreate}>
+          <Plus className="h-4 w-4 mr-2" />
+          Report Incident
+        </Button>
+      }
+    >
+      <Card>
+        <CardHeader className="border-b border-border">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-muted-foreground" />
+              <CardTitle>Incidents</CardTitle>
+            </div>
+            <div className="flex items-center gap-4">
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={showResolved}
+                  onChange={(e) => setShowResolved(e.target.checked)}
+                  className="rounded border-border"
+                />
+                Show resolved
+              </label>
+              <Select
+                value={statusFilter}
+                onValueChange={(v) =>
+                  setStatusFilter(v as IncidentStatus | "all")
+                }
+              >
+                <SelectTrigger className="w-40">
+                  <SelectValue placeholder="Filter by status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  <SelectItem value="investigating">Investigating</SelectItem>
+                  <SelectItem value="identified">Identified</SelectItem>
+                  <SelectItem value="fixing">Fixing</SelectItem>
+                  <SelectItem value="monitoring">Monitoring</SelectItem>
+                  <SelectItem value="resolved">Resolved</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-12 flex justify-center">
+              <LoadingSpinner />
+            </div>
+          ) : incidents.length === 0 ? (
+            <EmptyState
+              title="No incidents found"
+              description="No incidents match your current filters."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Title</TableHead>
+                  <TableHead>Severity</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Systems</TableHead>
+                  <TableHead>Duration</TableHead>
+                  <TableHead className="w-32">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {incidents.map((i) => (
+                  <TableRow key={i.id}>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{i.title}</p>
+                        {i.description && (
+                          <p className="text-sm text-muted-foreground truncate max-w-xs">
+                            {i.description}
+                          </p>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>{getSeverityBadge(i.severity)}</TableCell>
+                    <TableCell>{getStatusBadge(i.status)}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {getSystemNames(i.systemIds)}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                        <Clock className="h-3 w-3" />
+                        <span>
+                          {formatDistanceToNow(new Date(i.createdAt), {
+                            addSuffix: false,
+                          })}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEdit(i)}
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </Button>
+                        {i.status !== "resolved" && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setResolveId(i.id)}
+                          >
+                            <CheckCircle2 className="h-4 w-4 text-success" />
+                          </Button>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setDeleteId(i.id)}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <IncidentEditor
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        incident={editingIncident}
+        systems={systems}
+        onSave={handleSave}
+      />
+
+      <ConfirmationModal
+        isOpen={!!deleteId}
+        onClose={() => setDeleteId(undefined)}
+        title="Delete Incident"
+        message="Are you sure you want to delete this incident? This action cannot be undone."
+        confirmText="Delete"
+        variant="danger"
+        onConfirm={handleDelete}
+        isLoading={isDeleting}
+      />
+
+      <ConfirmationModal
+        isOpen={!!resolveId}
+        onClose={() => setResolveId(undefined)}
+        title="Resolve Incident"
+        message="Are you sure you want to mark this incident as resolved?"
+        confirmText="Resolve"
+        variant="info"
+        onConfirm={handleResolve}
+        isLoading={isResolving}
+      />
+    </PageLayout>
+  );
+};
+
+export const IncidentConfigPage = wrapInSuspense(IncidentConfigPageContent);