feat(monitor): add alert monitoring page with KPI dashboard, alert list, and incident management

- Add Tauri plugins for file dialog and filesystem access
- Create Rust backend for processing Grafana alerts (pairing, KPI calculation)
- Add virtualized alert list with invalid toggle and incident attachment
- Add incident manager with create, attach, and detach functionality
- Add KPI dashboard showing coverage ratio, downtime, and invalid rate
- Add date-fns for date formatting

apps/web/src/routes/monitor.tsx

@@ -0,0 +1,220 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+import { FileUp } from "lucide-react";
+import * as React from "react";
+
+import { AlertList } from "@/components/monitor/alert-list";
+import { IncidentManager } from "@/components/monitor/incident-manager";
+import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Incident, KpiMetrics, ProcessedAlert } from "@/lib/types/alerts";
+
+export const Route = createFileRoute("/monitor")({
+  component: MonitorPage,
+});
+
+function MonitorPage() {
+  const [alerts, setAlerts] = React.useState<ProcessedAlert[]>([]);
+  const [incidents, setIncidents] = React.useState<Incident[]>([]);
+  const [kpis, setKpis] = React.useState<KpiMetrics | null>(null);
+  const [selectedAlert, setSelectedAlert] =
+    React.useState<ProcessedAlert | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const recalculateKpis = React.useCallback(
+    async (currentAlerts: ProcessedAlert[], currentIncidents: Incident[]) => {
+      try {
+        const newKpis = await invoke<KpiMetrics>("calculate_kpis_command", {
+          alerts: currentAlerts,
+          incidents: currentIncidents,
+        });
+        setKpis(newKpis);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    },
+    [],
+  );
+
+  const handleLoadFile = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const filePath = await open({
+        multiple: false,
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (!filePath) {
+        setIsLoading(false);
+        return;
+      }
+
+      const content = await readTextFile(filePath);
+
+      const processedAlerts = await invoke<ProcessedAlert[]>(
+        "process_alerts_json",
+        { jsonContent: content },
+      );
+
+      setAlerts(processedAlerts);
+      setSelectedAlert(null);
+      await recalculateKpis(processedAlerts, incidents);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleInvalid = async (alertId: number, isInvalid: boolean) => {
+    try {
+      const updatedAlerts = await invoke<ProcessedAlert[]>(
+        "set_alert_invalid",
+        {
+          alerts,
+          alertId,
+          isInvalid,
+        },
+      );
+      setAlerts(updatedAlerts);
+      await recalculateKpis(updatedAlerts, incidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleSelectAlert = (alert: ProcessedAlert) => {
+    setSelectedAlert(alert);
+  };
+
+  const handleAddIncident = (incident: Omit<Incident, "attachedAlertIds">) => {
+    const newIncident: Incident = {
+      ...incident,
+      attachedAlertIds: [],
+    };
+    const newIncidents = [...incidents, newIncident];
+    setIncidents(newIncidents);
+    recalculateKpis(alerts, newIncidents);
+  };
+
+  const handleAttachAlert = async (alertId: number, incidentId: string) => {
+    try {
+      const [updatedAlerts, updatedIncidents] = await invoke<
+        [ProcessedAlert[], Incident[]]
+      >("attach_alert_to_incident", {
+        alerts,
+        incidents,
+        alertId,
+        incidentId,
+      });
+
+      setAlerts(updatedAlerts);
+      setIncidents(updatedIncidents);
+      await recalculateKpis(updatedAlerts, updatedIncidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleDetachAlert = async (alertId: number) => {
+    try {
+      const [updatedAlerts, updatedIncidents] = await invoke<
+        [ProcessedAlert[], Incident[]]
+      >("detach_alert_from_incident", {
+        alerts,
+        incidents,
+        alertId,
+      });
+
+      setAlerts(updatedAlerts);
+      setIncidents(updatedIncidents);
+      await recalculateKpis(updatedAlerts, updatedIncidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      <header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+        <h1 className="text-sm font-semibold">Alert Monitor</h1>
+        <Button onClick={handleLoadFile} disabled={isLoading} size="sm">
+          <FileUp className="mr-2 size-4" />
+          {isLoading ? "Loading..." : "Load Alerts JSON"}
+        </Button>
+      </header>
+
+      {error && (
+        <div className="shrink-0 border-b border-destructive/50 bg-destructive/10 px-4 py-2 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="shrink-0 border-b p-4">
+        <KpiDashboard kpis={kpis} isLoading={isLoading} />
+      </div>
+
+      <div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
+        <div className="flex min-h-0 flex-col border-r">
+          <div className="shrink-0 border-b px-4 py-2">
+            <span className="text-xs font-medium text-muted-foreground">
+              Alerts ({alerts.length})
+            </span>
+          </div>
+          {alerts.length === 0 ? (
+            <div className="flex flex-1 items-center justify-center">
+              <Card className="max-w-sm">
+                <CardHeader>
+                  <CardTitle>No Alerts Loaded</CardTitle>
+                </CardHeader>
+                <CardContent className="text-xs text-muted-foreground">
+                  Click "Load Alerts JSON" to import alert data from a Grafana
+                  Alerts API export.
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <AlertList
+              alerts={alerts}
+              onToggleInvalid={handleToggleInvalid}
+              onSelectAlert={handleSelectAlert}
+              selectedAlertId={selectedAlert?.id}
+              className="flex-1"
+            />
+          )}
+        </div>
+
+        <div className="min-h-0 overflow-hidden">
+          <IncidentManager
+            incidents={incidents}
+            selectedAlert={selectedAlert}
+            onAddIncident={handleAddIncident}
+            onAttachAlert={handleAttachAlert}
+            onDetachAlert={handleDetachAlert}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}