@checkmate-monitor/incident-frontend 0.0.2

package/src/pages/IncidentDetailPage.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { useParams } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  permissionApiRef,
+  wrapInSuspense,
+} from "@checkmate-monitor/frontend-api";
+import { useSignal } from "@checkmate-monitor/signal-frontend";
+import { resolveRoute } from "@checkmate-monitor/common";
+import { incidentApiRef } from "../api";
+import {
+  incidentRoutes,
+  INCIDENT_UPDATED,
+  type IncidentDetail,
+} from "@checkmate-monitor/incident-common";
+import { CatalogApi, type System } from "@checkmate-monitor/catalog-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Badge,
+  LoadingSpinner,
+  BackLink,
+  useToast,
+  StatusUpdateTimeline,
+} from "@checkmate-monitor/ui";
+import {
+  AlertTriangle,
+  Clock,
+  Calendar,
+  MessageSquare,
+  CheckCircle2,
+  Server,
+  Plus,
+} from "lucide-react";
+import { format, formatDistanceToNow } from "date-fns";
+import { IncidentUpdateForm } from "../components/IncidentUpdateForm";
+import {
+  getIncidentStatusBadge,
+  getIncidentSeverityBadge,
+} from "../utils/badges";
+
+const IncidentDetailPageContent: React.FC = () => {
+  const { incidentId } = useParams<{ incidentId: string }>();
+  const api = useApi(incidentApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const toast = useToast();
+
+  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
+
+  const { allowed: canManage } = permissionApi.useResourcePermission(
+    "incident",
+    "manage"
+  );
+
+  const [incident, setIncident] = useState<IncidentDetail | undefined>();
+  const [systems, setSystems] = useState<System[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showUpdateForm, setShowUpdateForm] = useState(false);
+
+  const loadData = useCallback(async () => {
+    if (!incidentId) return;
+
+    try {
+      const [incidentData, systemList] = await Promise.all([
+        api.getIncident({ id: incidentId }),
+        catalogApi.getSystems(),
+      ]);
+      setIncident(incidentData ?? undefined);
+      setSystems(systemList);
+    } catch (error) {
+      console.error("Failed to load incident:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [incidentId, api, catalogApi]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // Listen for realtime updates
+  useSignal(INCIDENT_UPDATED, ({ incidentId: updatedId }) => {
+    if (incidentId === updatedId) {
+      loadData();
+    }
+  });
+
+  const handleUpdateSuccess = () => {
+    setShowUpdateForm(false);
+    loadData();
+  };
+
+  const handleResolve = async () => {
+    if (!incidentId) return;
+
+    try {
+      await api.resolveIncident({ id: incidentId });
+      toast.success("Incident resolved");
+      await loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to resolve";
+      toast.error(message);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-12 flex justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!incident) {
+    return (
+      <div className="p-12 text-center">
+        <p className="text-muted-foreground">Incident not found</p>
+        <BackLink
+          to={resolveRoute(incidentRoutes.routes.config, {})}
+          className="mt-4"
+        >
+          Back to Incidents
+        </BackLink>
+      </div>
+    );
+  }
+
+  const affectedSystems = systems.filter((s) =>
+    incident.systemIds.includes(s.id)
+  );
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Incident Header */}
+      <Card
+        className={
+          incident.severity === "critical"
+            ? "border-destructive/30 bg-destructive/5"
+            : incident.severity === "major"
+            ? "border-warning/30 bg-warning/5"
+            : ""
+        }
+      >
+        <CardHeader className="border-b border-border">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-3">
+              <AlertTriangle
+                className={`h-6 w-6 ${
+                  incident.severity === "critical"
+                    ? "text-destructive"
+                    : incident.severity === "major"
+                    ? "text-warning"
+                    : "text-muted-foreground"
+                }`}
+              />
+              <div>
+                <CardTitle className="text-xl">{incident.title}</CardTitle>
+                <div className="flex items-center gap-2 mt-2">
+                  {getIncidentSeverityBadge(incident.severity)}
+                  {getIncidentStatusBadge(incident.status)}
+                </div>
+              </div>
+            </div>
+            {canManage && incident.status !== "resolved" && (
+              <Button variant="outline" onClick={handleResolve}>
+                <CheckCircle2 className="h-4 w-4 mr-2" />
+                Resolve Incident
+              </Button>
+            )}
+            <BackLink to={resolveRoute(incidentRoutes.routes.config, {})}>
+              Back to Incidents
+            </BackLink>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4 space-y-4">
+          {incident.description && (
+            <p className="text-muted-foreground">{incident.description}</p>
+          )}
+
+          <div className="flex gap-6 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1">
+              <Calendar className="h-4 w-4" />
+              <span>
+                Started {format(new Date(incident.createdAt), "MMM d, HH:mm")}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock className="h-4 w-4" />
+              <span>
+                Duration:{" "}
+                {formatDistanceToNow(new Date(incident.createdAt), {
+                  addSuffix: false,
+                })}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Affected Systems */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Server className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg">Affected Systems</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {affectedSystems.map((system) => (
+              <Badge key={system.id} variant="outline">
+                {system.name}
+              </Badge>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Updates Timeline */}
+      <Card>
+        <CardHeader className="border-b border-border">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5 text-muted-foreground" />
+              <CardTitle className="text-lg">Status Updates</CardTitle>
+            </div>
+            {canManage && !showUpdateForm && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowUpdateForm(true)}
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add Update
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          {/* Add Update Form */}
+          {showUpdateForm && incidentId && (
+            <div className="mb-4">
+              <IncidentUpdateForm
+                incidentId={incidentId}
+                onSuccess={handleUpdateSuccess}
+                onCancel={() => setShowUpdateForm(false)}
+              />
+            </div>
+          )}
+
+          <StatusUpdateTimeline
+            updates={incident.updates}
+            renderStatusBadge={getIncidentStatusBadge}
+            emptyTitle="No status updates"
+            emptyDescription="No status updates have been posted yet."
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export const IncidentDetailPage = wrapInSuspense(IncidentDetailPageContent);

package/src/pages/SystemIncidentHistoryPage.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useParams, Link } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  wrapInSuspense,
+} from "@checkmate-monitor/frontend-api";
+import { useSignal } from "@checkmate-monitor/signal-frontend";
+import { resolveRoute } from "@checkmate-monitor/common";
+import { incidentApiRef } from "../api";
+import {
+  incidentRoutes,
+  INCIDENT_UPDATED,
+  type IncidentWithSystems,
+  type IncidentStatus,
+} from "@checkmate-monitor/incident-common";
+import {
+  CatalogApi,
+  type System,
+  catalogRoutes,
+} from "@checkmate-monitor/catalog-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  LoadingSpinner,
+  EmptyState,
+  BackLink,
+} from "@checkmate-monitor/ui";
+import { AlertTriangle, Clock, ChevronRight } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+const SystemIncidentHistoryPageContent: React.FC = () => {
+  const { systemId } = useParams<{ systemId: string }>();
+  const api = useApi(incidentApiRef);
+  const rpcApi = useApi(rpcApiRef);
+
+  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
+
+  const [incidents, setIncidents] = useState<IncidentWithSystems[]>([]);
+  const [system, setSystem] = useState<System | undefined>();
+  const [loading, setLoading] = useState(true);
+
+  const loadData = async () => {
+    if (!systemId) return;
+
+    setLoading(true);
+    try {
+      const [incidentList, systemList] = await Promise.all([
+        api.listIncidents({ systemId, includeResolved: true }),
+        catalogApi.getSystems(),
+      ]);
+      const systemData = systemList.find((s) => s.id === systemId);
+      setIncidents(incidentList);
+      setSystem(systemData);
+    } catch (error) {
+      console.error("Failed to load incidents:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [systemId]);
+
+  // Listen for realtime updates
+  useSignal(INCIDENT_UPDATED, ({ systemIds }) => {
+    if (systemId && systemIds.includes(systemId)) {
+      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>;
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-12 flex justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <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>
+                Incident History{system ? ` - ${system.name}` : ""}
+              </CardTitle>
+            </div>
+            {system && (
+              <BackLink
+                to={resolveRoute(catalogRoutes.routes.systemDetail, {
+                  systemId: system.id,
+                })}
+              >
+                Back to {system.name}
+              </BackLink>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          {incidents.length === 0 ? (
+            <EmptyState
+              title="No incidents"
+              description="This system has no recorded incidents."
+            />
+          ) : (
+            <div className="divide-y divide-border">
+              {incidents.map((incident) => (
+                <Link
+                  key={incident.id}
+                  to={resolveRoute(incidentRoutes.routes.detail, {
+                    incidentId: incident.id,
+                  })}
+                  className="block p-4 hover:bg-muted/50 transition-colors"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h4 className="font-medium text-foreground">
+                          {incident.title}
+                        </h4>
+                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                      {incident.description && (
+                        <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
+                          {incident.description}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                        <div className="flex items-center gap-1">
+                          <Clock className="h-3 w-3" />
+                          <span>
+                            {formatDistanceToNow(new Date(incident.createdAt), {
+                              addSuffix: true,
+                            })}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      {getSeverityBadge(incident.severity)}
+                      {getStatusBadge(incident.status)}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export const SystemIncidentHistoryPage = wrapInSuspense(
+  SystemIncidentHistoryPageContent
+);

package/src/utils/badges.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Badge } from "@checkmate-monitor/ui";
+import type {
+  IncidentStatus,
+  IncidentSeverity,
+} from "@checkmate-monitor/incident-common";
+
+/**
+ * Returns a styled badge for the given incident status.
+ * Use this utility to ensure consistent status badge styling across the plugin.
+ */
+export function getIncidentStatusBadge(
+  status: IncidentStatus
+): React.ReactNode {
+  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>;
+    }
+  }
+}
+
+/**
+ * Returns a styled badge for the given incident severity.
+ * Use this utility to ensure consistent severity badge styling across the plugin.
+ */
+export function getIncidentSeverityBadge(
+  severity: IncidentSeverity
+): React.ReactNode {
+  switch (severity) {
+    case "critical": {
+      return <Badge variant="destructive">Critical</Badge>;
+    }
+    case "major": {
+      return <Badge variant="warning">Major</Badge>;
+    }
+    case "minor": {
+      return <Badge variant="secondary">Minor</Badge>;
+    }
+    default: {
+      return <Badge>{severity}</Badge>;
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkmate-monitor/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}