@checkstack/healthcheck-frontend 0.19.4 → 0.20.0

package/src/components/assignments/PlatformDefaultsDialog.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import {
+  DEFAULT_NOTIFICATION_POLICY,
+  HealthCheckApi,
+  type NotificationPolicy,
+} from "@checkstack/healthcheck-common";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  LoadingSpinner,
+  useToast,
+} from "@checkstack/ui";
+import { extractErrorMessage } from "@checkstack/common";
+import { NotificationsPanel } from "./NotificationsPanel";
+
+interface PlatformDefaultsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Modal editor for platform-wide notification defaults. Reuses the
+ * per-assignment NotificationsPanel because the shape is identical —
+ * the only difference is where it reads from and writes to.
+ *
+ * Once saved, every assignment with `notificationPolicy = null`
+ * (the "Use platform defaults" state) picks up the new values on the
+ * next read. In-flight auto-incidents are unaffected — their cooldown
+ * was snapshotted at open time.
+ */
+export const PlatformDefaultsDialog: React.FC<PlatformDefaultsDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const client = usePluginClient(HealthCheckApi);
+  const toast = useToast();
+
+  const { data, isLoading, refetch } =
+    client.getPlatformNotificationDefaults.useQuery(undefined, {
+      enabled: open,
+    });
+
+  const setMutation = client.setPlatformNotificationDefaults.useMutation({
+    onSuccess: () => {
+      toast.success("Platform notification defaults saved");
+      void refetch();
+      onOpenChange(false);
+    },
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Failed to save defaults")),
+  });
+
+  const [draft, setDraft] = useState<NotificationPolicy>(
+    DEFAULT_NOTIFICATION_POLICY,
+  );
+
+  useEffect(() => {
+    if (data) setDraft(data);
+  }, [data]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>Platform notification defaults</DialogTitle>
+          <DialogDescription>
+            Edits here apply to every health-check assignment that is set
+            to &quot;Use platform defaults&quot;. Assignments with a custom
+            override are unaffected.
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <LoadingSpinner />
+        ) : (
+          <NotificationsPanel
+            policy={draft}
+            onChange={setDraft}
+            onSave={() => setMutation.mutate(draft)}
+            saving={setMutation.isPending}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/pages/AssignmentIDEPage.tsx

@@ -6,10 +6,14 @@ import { SatelliteApi } from "@checkstack/satellite-common";
 import {
   DEFAULT_STATE_THRESHOLDS,
   DEFAULT_RETENTION_CONFIG,
+  DEFAULT_NOTIFICATION_POLICY,
+} from "@checkstack/healthcheck-common";
+import type {
+  StateThresholds,
+  NotificationPolicy,
 } from "@checkstack/healthcheck-common";
-import type { StateThresholds } from "@checkstack/healthcheck-common";
 import { PageLayout, IDELayout, useToast, BackLink, Button } from "@checkstack/ui";
-import { Settings, Plus } from "lucide-react";
+import { Settings, Plus, Bell } from "lucide-react";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
 import { catalogRoutes } from "@checkstack/catalog-common";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
@@ -25,6 +29,8 @@ import {
   type RetentionData,
 } from "../components/assignments/RetentionPanel";
 import { ExecutionPanel } from "../components/assignments/ExecutionPanel";
+import { NotificationsPanel } from "../components/assignments/NotificationsPanel";
+import { PlatformDefaultsDialog } from "../components/assignments/PlatformDefaultsDialog";
 import { AssignmentIDEPanelSlot } from "../slots";
 
 // =============================================================================
@@ -32,12 +38,22 @@ import { AssignmentIDEPanelSlot } from "../slots";
 // =============================================================================
 
 function parseNodeId(nodeId: AssignmentNodeId): {
-  panel: "general" | "thresholds" | "retention" | "execution";
+  panel:
+    | "general"
+    | "thresholds"
+    | "retention"
+    | "execution"
+    | "notifications";
   configId: string;
 } {
   const [panel, ...rest] = nodeId.split(":") as [string, ...string[]];
   return {
-    panel: panel as "general" | "thresholds" | "retention" | "execution",
+    panel: panel as
+      | "general"
+      | "thresholds"
+      | "retention"
+      | "execution"
+      | "notifications",
     configId: rest.join(":"),
   };
 }
@@ -80,6 +96,16 @@ const AssignmentIDEPageContent = () => {
   const [retentionData, setRetentionData] = useState<
     Record<string, RetentionData>
   >({});
+  const [localNotificationPolicy, setLocalNotificationPolicy] = useState<
+    Record<string, NotificationPolicy>
+  >({});
+  const [platformDefaultsOpen, setPlatformDefaultsOpen] = useState(false);
+
+  // Platform notification defaults — used as the fallback for any
+  // assignment that hasn't overridden them. Refetched whenever the
+  // platform-defaults dialog closes so changes propagate immediately.
+  const { data: platformDefaults } =
+    healthCheckClient.getPlatformNotificationDefaults.useQuery();
 
   const configs = useMemo(
     () => configurationsData?.configurations ?? [],
@@ -214,6 +240,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
         includeLocal: assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -238,6 +265,9 @@ const AssignmentIDEPageContent = () => {
           configurationId: configId,
           enabled: assoc.enabled,
           stateThresholds: thresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: assoc.notificationPolicy,
         },
       },
       {
@@ -253,6 +283,96 @@ const AssignmentIDEPageContent = () => {
     );
   };
 
+  const handleNotificationPolicyChange = (
+    configId: string,
+    policy: NotificationPolicy,
+  ) => {
+    setLocalNotificationPolicy((prev) => ({ ...prev, [configId]: policy }));
+  };
+
+  const handleSaveNotificationPolicy = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+    const policy =
+      localNotificationPolicy[configId] ??
+      assoc.notificationPolicy ??
+      platformDefaults ??
+      DEFAULT_NOTIFICATION_POLICY;
+
+    associateMutation.mutate(
+      {
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: assoc.enabled,
+          stateThresholds: assoc.stateThresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: policy,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success("Notification policy saved");
+          setLocalNotificationPolicy((prev) => {
+            const next = { ...prev };
+            delete next[configId];
+            return next;
+          });
+        },
+      },
+    );
+  };
+
+  /**
+   * Revert this assignment to platform defaults. Sends an undefined
+   * `notificationPolicy` which is persisted as null and re-resolves to
+   * the platform defaults on the next read.
+   */
+  const handleUseDefaultsForAssignment = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    associateMutation.mutate(
+      {
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: assoc.enabled,
+          stateThresholds: assoc.stateThresholds,
+          satelliteIds: assoc.satelliteIds,
+          includeLocal: assoc.includeLocal,
+          notificationPolicy: undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success("Reverted to platform defaults");
+          setLocalNotificationPolicy((prev) => {
+            const next = { ...prev };
+            delete next[configId];
+            return next;
+          });
+        },
+      },
+    );
+  };
+
+  /**
+   * Start customising — clone the current platform defaults into the
+   * draft state so the operator has a baseline to edit, then persist.
+   * The persistence step is what flips the row out of "inherit" mode.
+   */
+  const handleOverrideForAssignment = (configId: string) => {
+    const baseline = platformDefaults ?? DEFAULT_NOTIFICATION_POLICY;
+    setLocalNotificationPolicy((prev) => ({ ...prev, [configId]: baseline }));
+    // Defer the actual save: operators may want to tweak the cloned
+    // baseline before persisting. The Save button at the bottom of
+    // the panel handles it.
+  };
+
   const handleToggleSatellite = (configId: string, satelliteId: string) => {
     if (!systemId) return;
     const assoc = associations.find((a) => a.configurationId === configId);
@@ -272,6 +392,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: newIds,
         includeLocal: assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -289,6 +410,7 @@ const AssignmentIDEPageContent = () => {
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
         includeLocal: !assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
@@ -450,6 +572,31 @@ const AssignmentIDEPageContent = () => {
           />
         );
       }
+      case "notifications": {
+        // Is the operator actively editing a draft? Drafts are stored
+        // when override starts, so the presence of a draft AND the
+        // assignment being persisted-as-override mean the same thing.
+        const draft = localNotificationPolicy[configId];
+        const isOverridden =
+          draft !== undefined || assoc.notificationPolicy !== undefined;
+        const policy =
+          draft ??
+          assoc.notificationPolicy ??
+          platformDefaults ??
+          DEFAULT_NOTIFICATION_POLICY;
+        return (
+          <NotificationsPanel
+            policy={policy}
+            onChange={(p) => handleNotificationPolicyChange(configId, p)}
+            onSave={() => handleSaveNotificationPolicy(configId)}
+            saving={saving}
+            isLocked={isLocked}
+            isOverridden={isOverridden}
+            onOverride={() => handleOverrideForAssignment(configId)}
+            onUseDefaults={() => handleUseDefaultsForAssignment(configId)}
+          />
+        );
+      }
       default: {
         return (
           <ExtensionSlot 
@@ -482,6 +629,14 @@ const AssignmentIDEPageContent = () => {
       maxWidth="full"
       actions={
         <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setPlatformDefaultsOpen(true)}
+          >
+            <Bell className="mr-2 h-4 w-4" />
+            Notification defaults
+          </Button>
           {!isLocked && systemId && (
             <Button
               size="sm"
@@ -522,6 +677,10 @@ const AssignmentIDEPageContent = () => {
         }
         panel={renderPanel()}
       />
+      <PlatformDefaultsDialog
+        open={platformDefaultsOpen}
+        onOpenChange={setPlatformDefaultsOpen}
+      />
     </PageLayout>
   );
 };

package/src/pages/HealthCheckConfigPage.tsx

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import {
   usePluginClient,
+  useQueryClient,
   wrapInSuspense,
   accessApiRef,
   useApi,
@@ -14,20 +15,36 @@ import {
   pluginMetadata as healthcheckPluginMetadata,
 } from "@checkstack/healthcheck-common";
 import { Tip } from "@checkstack/tips-frontend";
-import { HealthCheckList } from "../components/HealthCheckList";
+import {
+  HealthCheckList,
+  HealthCheckListSkeleton,
+} from "../components/HealthCheckList";
 import {
   Button,
   ConfirmationModal,
+  ListEmptyState,
   PageLayout,
+  QueryErrorState,
   useToast,
+  toastError,
 } from "@checkstack/ui";
 import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
-import { resolveRoute, extractErrorMessage} from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import { useState } from "react";
 
+/**
+ * Shape of the `healthcheck.getConfigurations` query output. Threaded
+ * through the optimistic pause/resume patches so cache reads/writes
+ * match the loader's surface.
+ */
+type ConfigurationsQueryData = {
+  configurations: HealthCheckConfiguration[];
+};
+
 const HealthCheckConfigPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const queryClient = useQueryClient();
   const accessApi = useApi(accessApiRef);
   const toast = useToast();
   const navigate = useNavigate();
@@ -43,9 +60,26 @@ const HealthCheckConfigPageContent = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [idToDelete, setIdToDelete] = useState<string | undefined>();
 
+  // Mirrors oRPC's `generateOperationKey([path], { type, input })` for
+  // the parameterless `getConfigurations` loader. Captured in a memo so
+  // the pause/resume optimistic patches address the exact same cache
+  // entry the loader writes. See `docs/frontend/optimistic-updates.md`
+  // for the query-key contract.
+  const configurationsQueryKey = useMemo(
+    () =>
+      [
+        ["healthcheck", "getConfigurations"],
+        { input: {}, type: "query" },
+      ] as const,
+    [],
+  );
+
   // Fetch configurations with useQuery
-  const { data: configurationsData, refetch: refetchConfigurations } =
-    healthCheckClient.getConfigurations.useQuery({});
+  const configurationsQuery = healthCheckClient.getConfigurations.useQuery({});
+  const {
+    data: configurationsData,
+    refetch: refetchConfigurations,
+  } = configurationsQuery;
 
   // Fetch strategies with useQuery
   const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
@@ -72,25 +106,85 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to delete"));
+      toastError(toast, "Failed to delete health check", error);
     },
   });
 
-  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation({
-    onSuccess: () => {
-      void refetchConfigurations();
+  // Mutation: Pause configuration — optimistic.
+  //
+  // Toggle, low risk; same four-step pattern as `markAsRead` on the
+  // notifications page (see `docs/frontend/optimistic-updates.md`):
+  // 1. onMutate flips `paused: true` on the matching row in the cache.
+  // 2. onError rolls back from the snapshot, then surfaces a toast.
+  // 3. onSettled invalidates so server truth settles in either branch.
+  // 4. No success toast — the row's pause badge IS the feedback.
+  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation<{
+    previous: ConfigurationsQueryData | undefined;
+  }>({
+    onMutate: async (configId) => {
+      await queryClient.cancelQueries({ queryKey: configurationsQueryKey });
+      const previous = queryClient.getQueryData<ConfigurationsQueryData>(
+        configurationsQueryKey,
+      );
+      if (previous) {
+        queryClient.setQueryData<ConfigurationsQueryData>(
+          configurationsQueryKey,
+          {
+            ...previous,
+            configurations: previous.configurations.map((c) =>
+              c.id === configId ? { ...c, paused: true } : c,
+            ),
+          },
+        );
+      }
+      return { previous };
     },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to pause"));
+    onError: (error, _vars, ctx) => {
+      if (ctx?.previous) {
+        queryClient.setQueryData(configurationsQueryKey, ctx.previous);
+      }
+      toastError(toast, "Failed to pause health check", error);
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: configurationsQueryKey,
+      });
     },
   });
 
-  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation({
-    onSuccess: () => {
-      void refetchConfigurations();
+  // Mutation: Resume configuration — optimistic. Mirror of `pause`
+  // with `paused: false`. See `pauseMutation` above for the contract.
+  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation<{
+    previous: ConfigurationsQueryData | undefined;
+  }>({
+    onMutate: async (configId) => {
+      await queryClient.cancelQueries({ queryKey: configurationsQueryKey });
+      const previous = queryClient.getQueryData<ConfigurationsQueryData>(
+        configurationsQueryKey,
+      );
+      if (previous) {
+        queryClient.setQueryData<ConfigurationsQueryData>(
+          configurationsQueryKey,
+          {
+            ...previous,
+            configurations: previous.configurations.map((c) =>
+              c.id === configId ? { ...c, paused: false } : c,
+            ),
+          },
+        );
+      }
+      return { previous };
     },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to resume"));
+    onError: (error, _vars, ctx) => {
+      if (ctx?.previous) {
+        queryClient.setQueryData(configurationsQueryKey, ctx.previous);
+      }
+      toastError(toast, "Failed to resume health check", error);
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: configurationsQueryKey,
+      });
     },
   });
 
@@ -145,15 +239,30 @@ const HealthCheckConfigPageContent = () => {
         </div>
       }
     >
-      <HealthCheckList
-        configurations={configurations}
-        strategies={strategies}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-        onPause={(id) => pauseMutation.mutate(id)}
-        onResume={(id) => resumeMutation.mutate(id)}
-        canManage={canManage}
-      />
+      {configurationsQuery.isLoading ? (
+        <HealthCheckListSkeleton />
+      ) : configurationsQuery.isError ? (
+        <QueryErrorState
+          error={configurationsQuery.error}
+          onRetry={() => void configurationsQuery.refetch()}
+          resource="health checks"
+        />
+      ) : configurations.length === 0 ? (
+        <ListEmptyState
+          resource="health checks"
+          description="No health checks have been configured yet. Create one to start monitoring a system."
+        />
+      ) : (
+        <HealthCheckList
+          configurations={configurations}
+          strategies={strategies}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onPause={(id) => pauseMutation.mutate(id)}
+          onResume={(id) => resumeMutation.mutate(id)}
+          canManage={canManage}
+        />
+      )}
 
       <ConfirmationModal
         isOpen={isDeleteModalOpen}

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -35,6 +35,11 @@ import {
 } from "../components/HealthCheckRunsTable";
 import { ExpandedResultView } from "../components/ExpandedResultView";
 import { SingleRunChartGrid } from "../auto-charts";
+import {
+  StatusFilterPills,
+  STATUS_FILTER_TO_STATUSES,
+  type StatusFilter,
+} from "../components/StatusFilterPills";
 
 const HealthCheckHistoryDetailPageContent = () => {
   const { systemId, configurationId, runId } = useParams<{
@@ -53,9 +58,10 @@ const HealthCheckHistoryDetailPageContent = () => {
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
   const [sourceFilter, setSourceFilter] = useState<string | undefined>();
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
 
   // Pagination state
-  const pagination = usePagination({ defaultLimit: 20 });
+  const pagination = usePagination({ defaultLimit: 25 });
 
   // Fetch satellites for the source filter dropdown
   const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
@@ -89,6 +95,7 @@ const HealthCheckHistoryDetailPageContent = () => {
     startDate: dateRange.startDate,
     endDate: dateRange.endDate,
     sourceFilter,
+    statusFilter: STATUS_FILTER_TO_STATUSES[statusFilter],
     limit: pagination.limit,
     offset: pagination.offset,
     sortOrder: "desc",
@@ -166,6 +173,13 @@ const HealthCheckHistoryDetailPageContent = () => {
         <CardContent>
           <div className="flex flex-wrap items-center gap-3 mb-4">
             <DateRangeFilter value={dateRange} onChange={setDateRange} />
+            <StatusFilterPills
+              value={statusFilter}
+              onChange={(next) => {
+                setStatusFilter(next);
+                pagination.setPage(1);
+              }}
+            />
             {/* Source filter */}
             <div className="flex items-center gap-2">
               <span className="text-sm text-muted-foreground">Source:</span>
@@ -211,7 +225,11 @@ const HealthCheckHistoryDetailPageContent = () => {
           <HealthCheckRunsTable
             runs={runs}
             loading={isLoading}
-            emptyMessage="No health check runs found for this configuration."
+            emptyMessage={
+              statusFilter !== "all" || sourceFilter !== undefined
+                ? "No runs match the current filters."
+                : "No health check runs found for this configuration."
+            }
             pagination={pagination}
           />
         </CardContent>

package/src/pages/HealthCheckHistoryPage.tsx

@@ -31,7 +31,7 @@ const HealthCheckHistoryPageContent = () => {
   );
 
   // Pagination state
-  const pagination = usePagination({ defaultLimit: 20 });
+  const pagination = usePagination({ defaultLimit: 25 });
 
   // Fetch data with useQuery - newest first for table display
   const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({