@checkmate-monitor/incident-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @checkmate-monitor/incident-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkmate-monitor/ui@0.1.0
+  - @checkmate-monitor/common@0.1.0
+  - @checkmate-monitor/catalog-common@0.1.0
+  - @checkmate-monitor/incident-common@0.1.0
+  - @checkmate-monitor/signal-frontend@0.1.0
+  - @checkmate-monitor/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@checkmate-monitor/incident-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkmate-monitor/catalog-common": "workspace:*",
+    "@checkmate-monitor/common": "workspace:*",
+    "@checkmate-monitor/frontend-api": "workspace:*",
+    "@checkmate-monitor/incident-common": "workspace:*",
+    "@checkmate-monitor/signal-frontend": "workspace:*",
+    "@checkmate-monitor/ui": "workspace:*",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,10 @@
+import { createApiRef } from "@checkmate-monitor/frontend-api";
+import { IncidentApi } from "@checkmate-monitor/incident-common";
+import type { InferClient } from "@checkmate-monitor/common";
+
+// IncidentApiClient type inferred from the client definition
+export type IncidentApiClient = InferClient<typeof IncidentApi>;
+
+export const incidentApiRef = createApiRef<IncidentApiClient>(
+  "plugin.incident.api"
+);

package/src/components/IncidentEditor.tsx

@@ -0,0 +1,311 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useApi } from "@checkmate-monitor/frontend-api";
+import { incidentApiRef } from "../api";
+import type {
+  IncidentWithSystems,
+  IncidentSeverity,
+  IncidentUpdate,
+} from "@checkmate-monitor/incident-common";
+import type { System } from "@checkmate-monitor/catalog-common";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  Textarea,
+  Checkbox,
+  useToast,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  StatusUpdateTimeline,
+} from "@checkmate-monitor/ui";
+import { Plus, MessageSquare, Loader2, AlertCircle } from "lucide-react";
+import { IncidentUpdateForm } from "./IncidentUpdateForm";
+import { getIncidentStatusBadge } from "../utils/badges";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  incident?: IncidentWithSystems;
+  systems: System[];
+  onSave: () => void;
+}
+
+export const IncidentEditor: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  incident,
+  systems,
+  onSave,
+}) => {
+  const api = useApi(incidentApiRef);
+  const toast = useToast();
+
+  // Incident fields
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [severity, setSeverity] = useState<IncidentSeverity>("major");
+  const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
+    new Set()
+  );
+  const [saving, setSaving] = useState(false);
+
+  // Status update fields
+  const [updates, setUpdates] = useState<IncidentUpdate[]>([]);
+  const [loadingUpdates, setLoadingUpdates] = useState(false);
+  const [showUpdateForm, setShowUpdateForm] = useState(false);
+
+  const loadIncidentDetails = useCallback(
+    async (id: string) => {
+      setLoadingUpdates(true);
+      try {
+        const detail = await api.getIncident({ id });
+        if (detail) {
+          setUpdates(detail.updates);
+        }
+      } catch (error) {
+        console.error("Failed to load incident details:", error);
+      } finally {
+        setLoadingUpdates(false);
+      }
+    },
+    [api]
+  );
+
+  // Reset form when incident changes
+  useEffect(() => {
+    if (incident) {
+      setTitle(incident.title);
+      setDescription(incident.description ?? "");
+      setSeverity(incident.severity);
+      setSelectedSystemIds(new Set(incident.systemIds));
+      // Load full incident with updates
+      loadIncidentDetails(incident.id);
+    } else {
+      setTitle("");
+      setDescription("");
+      setSeverity("major");
+      setSelectedSystemIds(new Set());
+      setUpdates([]);
+      setShowUpdateForm(false);
+    }
+  }, [incident, open, loadIncidentDetails]);
+
+  const handleSystemToggle = (systemId: string) => {
+    setSelectedSystemIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(systemId)) {
+        next.delete(systemId);
+      } else {
+        next.add(systemId);
+      }
+      return next;
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      toast.error("Title is required");
+      return;
+    }
+    if (selectedSystemIds.size === 0) {
+      toast.error("At least one system must be selected");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (incident) {
+        await api.updateIncident({
+          id: incident.id,
+          title,
+          description: description || undefined,
+          severity,
+          systemIds: [...selectedSystemIds],
+        });
+        toast.success("Incident updated");
+      } else {
+        await api.createIncident({
+          title,
+          description,
+          severity,
+          systemIds: [...selectedSystemIds],
+        });
+        toast.success("Incident created");
+      }
+      onSave();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to save";
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUpdateSuccess = () => {
+    if (incident) {
+      loadIncidentDetails(incident.id);
+    }
+    setShowUpdateForm(false);
+    // Notify parent to refresh list (status may have changed)
+    onSave();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="xl">
+        <DialogHeader>
+          <DialogTitle>
+            {incident ? "Edit Incident" : "Create Incident"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-6 py-4 max-h-[70vh] overflow-y-auto">
+          {/* Basic Info Section */}
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="API degradation affecting users"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Details about the incident..."
+                rows={3}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label>Severity</Label>
+              <Select
+                value={severity}
+                onValueChange={(v) => setSeverity(v as IncidentSeverity)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select severity" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="minor">Minor</SelectItem>
+                  <SelectItem value="major">Major</SelectItem>
+                  <SelectItem value="critical">Critical</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label>Affected Systems</Label>
+              <div className="max-h-36 overflow-y-auto border rounded-md p-3 space-y-2">
+                {systems.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    No systems available
+                  </p>
+                ) : (
+                  systems.map((system) => (
+                    <div
+                      key={system.id}
+                      className="flex items-center space-x-2 p-2 rounded hover:bg-accent cursor-pointer"
+                      onClick={() => handleSystemToggle(system.id)}
+                    >
+                      <Checkbox
+                        id={`system-${system.id}`}
+                        checked={selectedSystemIds.has(system.id)}
+                      />
+                      <Label
+                        htmlFor={`system-${system.id}`}
+                        className="cursor-pointer flex-1"
+                      >
+                        {system.name}
+                      </Label>
+                    </div>
+                  ))
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {selectedSystemIds.size} system(s) selected
+              </p>
+            </div>
+          </div>
+
+          {/* Status Updates Section - Only show when editing */}
+          {incident && (
+            <div className="border-t pt-4">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-2">
+                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                  <Label className="text-base font-medium">
+                    Status Updates
+                  </Label>
+                </div>
+                {!showUpdateForm && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowUpdateForm(true)}
+                  >
+                    <Plus className="h-4 w-4 mr-1" />
+                    Add Update
+                  </Button>
+                )}
+              </div>
+
+              {/* Add Update Form */}
+              {showUpdateForm && (
+                <div className="mb-4">
+                  <IncidentUpdateForm
+                    incidentId={incident.id}
+                    onSuccess={handleUpdateSuccess}
+                    onCancel={() => setShowUpdateForm(false)}
+                  />
+                </div>
+              )}
+
+              {/* Updates List */}
+              {loadingUpdates ? (
+                <div className="flex justify-center py-4">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : updates.length === 0 ? (
+                <div className="flex flex-col items-center py-6 text-muted-foreground">
+                  <AlertCircle className="h-8 w-8 mb-2" />
+                  <p className="text-sm">No status updates yet</p>
+                </div>
+              ) : (
+                <StatusUpdateTimeline
+                  updates={updates}
+                  renderStatusBadge={getIncidentStatusBadge}
+                  showTimeline={false}
+                  maxHeight="max-h-48"
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Saving..." : incident ? "Update" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/IncidentMenuItems.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { AlertTriangle } from "lucide-react";
+import { useApi, permissionApiRef } from "@checkmate-monitor/frontend-api";
+import { DropdownMenuItem } from "@checkmate-monitor/ui";
+import { resolveRoute } from "@checkmate-monitor/common";
+import { incidentRoutes } from "@checkmate-monitor/incident-common";
+
+export const IncidentMenuItems = () => {
+  const permissionApi = useApi(permissionApiRef);
+  const { allowed: canManage, loading } = permissionApi.useResourcePermission(
+    "incident",
+    "manage"
+  );
+
+  if (loading || !canManage) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(incidentRoutes.routes.config)}>
+      <DropdownMenuItem icon={<AlertTriangle className="w-4 h-4" />}>
+        Incidents
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/components/IncidentUpdateForm.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { useApi } from "@checkmate-monitor/frontend-api";
+import { incidentApiRef } from "../api";
+import type { IncidentStatus } from "@checkmate-monitor/incident-common";
+import {
+  Button,
+  Textarea,
+  Label,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  useToast,
+} from "@checkmate-monitor/ui";
+import { Loader2 } from "lucide-react";
+
+interface IncidentUpdateFormProps {
+  incidentId: string;
+  onSuccess: () => void;
+  onCancel?: () => void;
+}
+
+/**
+ * Reusable form for adding status updates to an incident.
+ * Used in both IncidentDetailPage and IncidentEditor.
+ */
+export const IncidentUpdateForm: React.FC<IncidentUpdateFormProps> = ({
+  incidentId,
+  onSuccess,
+  onCancel,
+}) => {
+  const api = useApi(incidentApiRef);
+  const toast = useToast();
+
+  const [message, setMessage] = useState("");
+  const [statusChange, setStatusChange] = useState<IncidentStatus | "">("");
+  const [isPosting, setIsPosting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!message.trim()) {
+      toast.error("Update message is required");
+      return;
+    }
+
+    setIsPosting(true);
+    try {
+      await api.addUpdate({
+        incidentId,
+        message,
+        statusChange: statusChange || undefined,
+      });
+      toast.success("Update posted");
+      setMessage("");
+      setStatusChange("");
+      onSuccess();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to post update";
+      toast.error(errorMessage);
+    } finally {
+      setIsPosting(false);
+    }
+  };
+
+  return (
+    <div className="p-4 bg-muted/30 rounded-lg border space-y-3">
+      <div className="grid gap-2">
+        <Label htmlFor="updateMessage">Update Message</Label>
+        <Textarea
+          id="updateMessage"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Describe the status update..."
+          rows={2}
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label>Change Status (Optional)</Label>
+        <Select
+          value={statusChange || "__keep_current__"}
+          onValueChange={(v) =>
+            setStatusChange(
+              v === "__keep_current__" ? "" : (v as IncidentStatus)
+            )
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Keep current status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__keep_current__">Keep Current</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 className="flex gap-2 justify-end">
+        {onCancel && (
+          <Button variant="outline" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+        <Button
+          size="sm"
+          onClick={handleSubmit}
+          disabled={isPosting || !message.trim()}
+        >
+          {isPosting ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              Posting...
+            </>
+          ) : (
+            "Post Update"
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/SystemIncidentBadge.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useApi, type SlotContext } from "@checkmate-monitor/frontend-api";
+import { useSignal } from "@checkmate-monitor/signal-frontend";
+import { SystemStateBadgesSlot } from "@checkmate-monitor/catalog-common";
+import { incidentApiRef } from "../api";
+import {
+  INCIDENT_UPDATED,
+  type IncidentWithSystems,
+} from "@checkmate-monitor/incident-common";
+import { Badge } from "@checkmate-monitor/ui";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+const SEVERITY_WEIGHTS = { critical: 3, major: 2, minor: 1 } as const;
+
+/**
+ * Displays an incident badge for a system when it has an active incident.
+ * Shows nothing if no active incidents.
+ * Listens for realtime updates via signals.
+ */
+export const SystemIncidentBadge: React.FC<Props> = ({ system }) => {
+  const api = useApi(incidentApiRef);
+  const [activeIncident, setActiveIncident] = useState<
+    IncidentWithSystems | undefined
+  >();
+
+  const refetch = useCallback(() => {
+    if (!system?.id) return;
+
+    api
+      .getIncidentsForSystem({ systemId: system.id })
+      .then((incidents: IncidentWithSystems[]) => {
+        // Get the most severe active incident
+        const sorted = [...incidents].toSorted((a, b) => {
+          return (
+            (SEVERITY_WEIGHTS[b.severity as keyof typeof SEVERITY_WEIGHTS] ||
+              0) -
+            (SEVERITY_WEIGHTS[a.severity as keyof typeof SEVERITY_WEIGHTS] || 0)
+          );
+        });
+        setActiveIncident(sorted[0]);
+      })
+      .catch(console.error);
+  }, [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 (!activeIncident) return;
+
+  const variant =
+    activeIncident.severity === "critical"
+      ? "destructive"
+      : activeIncident.severity === "major"
+      ? "warning"
+      : "info";
+
+  return <Badge variant={variant}>Incident</Badge>;
+};