@checkstack/healthcheck-frontend 0.21.0 → 0.23.0

package/src/components/HealthCheckRunsTable.tsx

@@ -8,9 +8,10 @@ import {
   TableCell,
   HealthBadge,
   Pagination,
+  Spinner,
 } from "@checkstack/ui";
 import { formatDistanceToNow, format } from "date-fns";
-import { ExternalLink, Loader2, Satellite, Server } from "lucide-react";
+import { ExternalLink, Satellite, Server, Layers } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
@@ -23,16 +24,32 @@ export interface HealthCheckRunDetailed {
   status: "healthy" | "unhealthy" | "degraded";
   result: Record<string, unknown>;
   timestamp: Date;
+  /**
+   * Environment this run executed for (per-environment fan-out). undefined =
+   * env-less run (opt-out / no membership).
+   */
+  environmentId?: string;
   /** Source ID for result attribution (undefined = local core, UUID = satellite) */
   sourceId?: string;
   /** Human-readable source label (e.g. "Local" or "EU West (eu-west-1)") */
   sourceLabel?: string;
 }
 
+export interface EnvironmentLabel {
+  id: string;
+  name: string;
+}
+
 export interface HealthCheckRunsTableProps {
   runs: HealthCheckRunDetailed[];
   loading: boolean;
   emptyMessage?: string;
+  /**
+   * Optional id -> name map for the Environment column. When a run's
+   * `environmentId` is present, its display name is looked up here (falling
+   * back to the id). Env-less runs render a muted dash.
+   */
+  environmentLabels?: EnvironmentLabel[];
   /** Show System ID and Configuration ID columns with link to detail page */
   showFilterColumns?: boolean;
   /** Number of columns for the expanded result row */
@@ -52,11 +69,15 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
   runs,
   loading,
   emptyMessage = "No health check runs found.",
+  environmentLabels,
   showFilterColumns = false,
   pagination,
 }) => {
   const navigate = useNavigate();
   const prevRunsRef = useRef(runs);
+  const envNameById = new Map(
+    (environmentLabels ?? []).map((e) => [e.id, e.name]),
+  );
 
   // Keep previous runs during loading to prevent layout shift
   const displayRuns =
@@ -75,9 +96,9 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     );
   };
 
-  // 3 base columns (Status, Timestamp, Source) + 3 extras when
+  // 4 base columns (Status, Timestamp, Environment, Source) + 3 extras when
   // showFilterColumns is on (System ID, Configuration ID, link icon).
-  const columnCount = showFilterColumns ? 6 : 3;
+  const columnCount = showFilterColumns ? 7 : 4;
   const showEmptyRow = !loading && displayRuns.length === 0;
 
   return (
@@ -89,7 +110,9 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
               <TableHead className="w-24">
                 <span className="flex items-center gap-2">
                   Status
-                  {loading && <Loader2 className="h-3 w-3 animate-spin" />}
+                  {loading && (
+                    <Spinner size="sm" className="h-3 w-3" />
+                  )}
                 </span>
               </TableHead>
               {showFilterColumns && (
@@ -99,6 +122,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                 </>
               )}
               <TableHead>Timestamp</TableHead>
+              <TableHead>Environment</TableHead>
               <TableHead>Source</TableHead>
               {showFilterColumns && <TableHead className="w-16"></TableHead>}
             </TableRow>
@@ -135,6 +159,16 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                     })}
                   </span>
                 </TableCell>
+                <TableCell>
+                  {run.environmentId ? (
+                    <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary">
+                      <Layers className="h-3 w-3" />
+                      {envNameById.get(run.environmentId) ?? run.environmentId}
+                    </span>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">None</span>
+                  )}
+                </TableCell>
                 <TableCell>
                   {run.sourceId ? (
                     <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded-full bg-orange-500/10 text-orange-600">

package/src/components/HealthCheckSystemOverview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, lazy, Suspense } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
   usePluginClient,
@@ -17,7 +17,13 @@ import {
 } from "@checkstack/ui";
 import { Heart } from "lucide-react";
 import { HealthCheckSparkline } from "./HealthCheckSparkline";
-import { HealthCheckDrawer } from "./HealthCheckDrawer";
+// Lazy-loaded: the drawer pulls in the recharts-based latency/timeline charts
+// (~300 KB). This component is an eagerly-registered slot extension, so a static
+// import would ship recharts in the initial bundle. The drawer only renders when
+// a check is selected, so deferring it keeps charts out of the initial load.
+const HealthCheckDrawer = lazy(() =>
+  import("./HealthCheckDrawer").then((m) => ({ default: m.HealthCheckDrawer })),
+);
 
 import type {
   StateThresholds,
@@ -206,16 +212,18 @@ export function HealthCheckSystemOverview(props: SlotProps) {
         </CardContent>
       </Card>
 
-      {/* Slide-over Drawer */}
+      {/* Slide-over Drawer (lazy: loads the chart bundle on first open) */}
       {selectedCheck && (
-        <HealthCheckDrawer
-          item={selectedCheck}
-          systemId={systemId}
-          open={!!selectedCheck}
-          onOpenChange={(open) => {
-            if (!open) setSelectedCheck(undefined);
-          }}
-        />
+        <Suspense fallback={null}>
+          <HealthCheckDrawer
+            item={selectedCheck}
+            systemId={systemId}
+            open={!!selectedCheck}
+            onOpenChange={(open) => {
+              if (!open) setSelectedCheck(undefined);
+            }}
+          />
+        </Suspense>
       )}
     </>
   );

package/src/components/HealthSignalsFiller.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo } from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  SystemSignalsSlot,
+  type SystemSignal,
+  type SystemSignalsMap,
+} from "@checkstack/catalog-common";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import { HealthCheckApi } from "../api";
+
+type Props = SlotContext<typeof SystemSignalsSlot>;
+
+const SOURCE_ID = "healthcheck";
+
+/**
+ * Reports per-system health as dashboard signals. Bulk-fetches health for all
+ * overview systems in one request and contributes a signal for every system
+ * that is degraded or unhealthy, deep-linking to the failing check's history
+ * (or the system's check assignments when no specific check is failing).
+ * Renders nothing — it is a headless filler for {@link SystemSignalsSlot}.
+ */
+export const HealthSignalsFiller: React.FC<Props> = ({
+  systemIds,
+  onSignals,
+}) => {
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+
+  const { data } = healthCheckClient.getBulkSystemHealthStatus.useQuery(
+    { systemIds },
+    { enabled: systemIds.length > 0, staleTime: 30_000 },
+  );
+
+  const signals = useMemo<SystemSignalsMap>(() => {
+    const result: SystemSignalsMap = {};
+    if (!data) return result;
+
+    for (const systemId of systemIds) {
+      const status = data.statuses[systemId];
+      if (!status || status.status === "healthy") continue;
+
+      const failing = status.checkStatuses.filter(
+        (c) => c.status !== "healthy",
+      );
+      const failingCheck = failing[0];
+      const href = failingCheck
+        ? resolveRoute(healthcheckRoutes.routes.historyDetail, {
+            systemId,
+            configurationId: failingCheck.configurationId,
+          })
+        : resolveRoute(healthcheckRoutes.routes.assignments, { systemId });
+
+      const detail =
+        status.checkStatuses.length > 0
+          ? `${failing.length} of ${status.checkStatuses.length} checks failing`
+          : undefined;
+
+      const signal: SystemSignal = {
+        source: SOURCE_ID,
+        tone: status.status === "unhealthy" ? "error" : "warn",
+        label: status.status === "unhealthy" ? "Unhealthy" : "Degraded",
+        detail,
+        href,
+        iconName: "Activity",
+      };
+      result[systemId] = [signal];
+    }
+    return result;
+  }, [data, systemIds]);
+
+  useEffect(() => {
+    onSignals(SOURCE_ID, signals);
+  }, [signals, onSignals]);
+
+  return null;
+};

package/src/components/SystemHealthBadge.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
 import { HealthCheckApi } from "../api";
-import { HealthBadge } from "@checkstack/ui";
+import { StatusBadge } from "@checkstack/ui";
+import { Activity } from "lucide-react";
 import { useSystemBadgeDataOptional } from "@checkstack/dashboard-frontend";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
@@ -37,5 +38,9 @@ export const SystemHealthBadge: React.FC<Props> = ({ system }) => {
   const status = providerStatus ?? localStatus;
 
   if (!status || status === "healthy") return <></>;
-  return <HealthBadge status={status} />;
+  return status === "unhealthy" ? (
+    <StatusBadge tone="error" icon={Activity} label="Unhealthy" />
+  ) : (
+    <StatusBadge tone="warn" icon={Activity} label="Degraded" />
+  );
 };

package/src/components/assignments/ExecutionPanel.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { Checkbox, Label, Tooltip } from "@checkstack/ui";
-import { Satellite } from "lucide-react";
+import { Satellite, Layers } from "lucide-react";
+import {
+  modeFromEnvironmentIds,
+  type EnvironmentSelectorMode,
+} from "./environment-selector.logic";
 
 interface SatelliteDto {
   id: string;
@@ -9,12 +13,26 @@ interface SatelliteDto {
   status: "online" | "offline";
 }
 
+interface EnvironmentDto {
+  id: string;
+  name: string;
+}
+
 interface ExecutionPanelProps {
   includeLocal: boolean;
   satelliteIds: string[];
   satellites: SatelliteDto[];
   onToggleLocal: () => void;
   onToggleSatellite: (satelliteId: string) => void;
+  /**
+   * Per-assignment environment selector value. null = all current
+   * environments; [] = opt out (env-less); non-empty = those env ids.
+   */
+  environmentIds: string[] | null;
+  /** Environments the system currently belongs to. */
+  environments: EnvironmentDto[];
+  onSetEnvironmentMode: (mode: EnvironmentSelectorMode) => void;
+  onToggleEnvironment: (environmentId: string) => void;
   saving: boolean;
   isLocked?: boolean;
 }
@@ -29,11 +47,24 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
   satellites,
   onToggleLocal,
   onToggleSatellite,
+  environmentIds,
+  environments,
+  onSetEnvironmentMode,
+  onToggleEnvironment,
   saving,
   isLocked,
 }) => {
   const hasSatellites = satelliteIds.length > 0;
   const willRunAnywhere = includeLocal || hasSatellites;
+  const envMode = modeFromEnvironmentIds(environmentIds);
+  const selectedEnvIds = new Set<string>(
+    environmentIds === null ? [] : environmentIds,
+  );
+  const envModes: { value: EnvironmentSelectorMode; label: string; hint: string }[] = [
+    { value: "all", label: "All environments", hint: "Run once per environment the system belongs to" },
+    { value: "specific", label: "Specific", hint: "Run only for the selected environments" },
+    { value: "none", label: "None", hint: "Run once with no environment" },
+  ];
 
   return (
     <div className="p-6 space-y-4">
@@ -118,6 +149,65 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
         )}
       </div>
 
+      {/* Environment Selector */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+          <Label className="text-sm font-medium">Environments</Label>
+          <Tooltip content="Fan this check out into one run per environment. The custom fields of each environment are exposed to scripts and templating." />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Choose how this check fans out across the system's environments.
+        </p>
+
+        <div className="space-y-1.5">
+          {envModes.map((m) => (
+            <label
+              key={m.value}
+              className="flex items-start gap-3 p-2.5 rounded-md border hover:bg-muted/30 transition-colors cursor-pointer"
+            >
+              <input
+                type="radio"
+                name="environment-mode"
+                className="mt-1"
+                checked={envMode === m.value}
+                disabled={saving || isLocked}
+                onChange={() => onSetEnvironmentMode(m.value)}
+              />
+              <div className="flex-1 min-w-0">
+                <span className="text-sm font-medium">{m.label}</span>
+                <p className="text-xs text-muted-foreground mt-0.5">{m.hint}</p>
+              </div>
+            </label>
+          ))}
+        </div>
+
+        {envMode === "specific" && (
+          <div className="space-y-1.5 pl-6">
+            {environments.length === 0 ? (
+              <p className="text-sm text-muted-foreground italic py-2">
+                This system has no environments. Attach environments to the
+                system in the catalog first.
+              </p>
+            ) : (
+              environments.map((env) => (
+                <div
+                  key={env.id}
+                  className="flex items-center gap-3 p-2 rounded-md border hover:bg-muted/30 transition-colors"
+                >
+                  <Checkbox
+                    checked={selectedEnvIds.has(env.id)}
+                    onCheckedChange={() => onToggleEnvironment(env.id)}
+                    disabled={saving || isLocked}
+                  />
+                  <span className="text-sm truncate">{env.name}</span>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+
       {/* Execution Summary */}
       <div className="p-3 bg-muted/30 rounded-lg border text-xs text-muted-foreground">
         <span className="font-medium">Execution: </span>

package/src/components/assignments/NotificationsPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { NotificationPolicy } from "@checkstack/healthcheck-common";
-import { Button, Input, Label, Toggle, Tooltip } from "@checkstack/ui";
+import { Button, Label, Toggle, Tooltip } from "@checkstack/ui";
 
 interface NotificationsPanelProps {
   policy: NotificationPolicy;
@@ -25,6 +25,12 @@ interface NotificationsPanelProps {
  * Panel for configuring per-association notification behaviour. All
  * settings are scoped to a single (system, configuration) assignment
  * — different checks on the same system are independent.
+ *
+ * Auto-incident opening/closing is no longer configured here: it ships
+ * as ordinary user automations. Flapping thresholds likewise moved onto
+ * the automation engine's windowed-count gate (the
+ * `healthcheck.system_health_changed` trigger's `window` block). What
+ * remains is the de-escalation notification preference.
  */
 export const NotificationsPanel: React.FC<NotificationsPanelProps> = ({
   policy,
@@ -56,7 +62,7 @@ export const NotificationsPanel: React.FC<NotificationsPanelProps> = ({
         <h3 className="text-sm font-semibold">Notifications</h3>
         <p className="text-xs text-muted-foreground mt-1">
           Control which health state transitions notify subscribers for this
-          check, and when an incident is auto-opened for the system.
+          check.
         </p>
       </div>
 
@@ -135,241 +141,6 @@ export const NotificationsPanel: React.FC<NotificationsPanelProps> = ({
         </div>
       </div>
 
-      {/* Auto-open incident */}
-      <div className="p-4 bg-muted/50 rounded-lg border space-y-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <Label className="text-sm font-medium">
-                Auto-open incident when this check is critical
-              </Label>
-              <Tooltip content="When either trigger below fires, an incident is auto-opened on the system. Different checks on the same system are independent — disabling here only affects this check." />
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              One incident per outage instead of one ping per state change.
-              Especially useful for Jira / Slack / email — the incident's
-              suppression silences downstream channels for the lifetime of
-              the incident.
-            </p>
-          </div>
-          <Toggle
-            checked={policy.autoOpenIncidentOnUnhealthy}
-            onCheckedChange={(checked: boolean) =>
-              onChange({ ...policy, autoOpenIncidentOnUnhealthy: checked })
-            }
-            disabled={disabled}
-            aria-label="Auto-open incident when this check is critical"
-          />
-        </div>
-
-        {policy.autoOpenIncidentOnUnhealthy && (
-          <div className="pl-4 border-l-2 border-border space-y-4">
-            {/* Suppress further notifications */}
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 min-w-0">
-                <Label className="text-sm">
-                  Suppress further notifications while open
-                </Label>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Email, Jira, Slack all silenced for this system until the
-                  incident is resolved.
-                </p>
-              </div>
-              <Toggle
-                checked={policy.useNotificationSuppression}
-                onCheckedChange={(checked: boolean) =>
-                  onChange({
-                    ...policy,
-                    useNotificationSuppression: checked,
-                  })
-                }
-                disabled={disabled}
-                aria-label="Suppress further notifications while open"
-              />
-            </div>
-
-            {/* Skip during maintenance */}
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 min-w-0">
-                <Label className="text-sm">
-                  Skip during active maintenance
-                </Label>
-                <p className="text-xs text-muted-foreground mt-1">
-                  No auto-incident is opened while the system has an active
-                  maintenance window with suppression.
-                </p>
-              </div>
-              <Toggle
-                checked={policy.skipDuringMaintenance}
-                onCheckedChange={(checked: boolean) =>
-                  onChange({ ...policy, skipDuringMaintenance: checked })
-                }
-                disabled={disabled}
-                aria-label="Skip auto-incident during active maintenance"
-              />
-            </div>
-
-            {/* Sustained-duration trigger */}
-            <div className="space-y-2 pt-2 border-t border-border">
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-2">
-                  <Label className="text-sm">
-                    Open when unhealthy continuously
-                  </Label>
-                  <Tooltip content="Catches real outages: the check has stayed unhealthy for at least this long without recovering." />
-                </div>
-                <Toggle
-                  checked={policy.sustainedUnhealthyTrigger.enabled}
-                  onCheckedChange={(checked: boolean) =>
-                    onChange({
-                      ...policy,
-                      sustainedUnhealthyTrigger: {
-                        ...policy.sustainedUnhealthyTrigger,
-                        enabled: checked,
-                      },
-                    })
-                  }
-                  disabled={disabled}
-                  aria-label="Enable sustained-unhealthy trigger"
-                />
-              </div>
-              {policy.sustainedUnhealthyTrigger.enabled && (
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <span>Open after</span>
-                  <Input
-                    type="number"
-                    min={1}
-                    className="h-8 w-16 text-center"
-                    value={policy.sustainedUnhealthyTrigger.durationMinutes}
-                    onChange={(e) =>
-                      onChange({
-                        ...policy,
-                        sustainedUnhealthyTrigger: {
-                          ...policy.sustainedUnhealthyTrigger,
-                          durationMinutes:
-                            Number.parseInt(e.target.value, 10) || 1,
-                        },
-                      })
-                    }
-                    disabled={disabled}
-                  />
-                  <span>minutes of continuous unhealthy state</span>
-                </div>
-              )}
-            </div>
-
-            {/* Flapping trigger */}
-            <div className="space-y-2 pt-2 border-t border-border">
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-2">
-                  <Label className="text-sm">Open on flapping</Label>
-                  <Tooltip content="Catches checks that flip in and out of unhealthy too quickly for the sustained trigger to fire." />
-                </div>
-                <Toggle
-                  checked={policy.flappingTrigger.enabled}
-                  onCheckedChange={(checked: boolean) =>
-                    onChange({
-                      ...policy,
-                      flappingTrigger: {
-                        ...policy.flappingTrigger,
-                        enabled: checked,
-                      },
-                    })
-                  }
-                  disabled={disabled}
-                  aria-label="Enable flapping trigger"
-                />
-              </div>
-              {policy.flappingTrigger.enabled && (
-                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <span>Open after</span>
-                  <Input
-                    type="number"
-                    min={1}
-                    className="h-8 w-16 text-center"
-                    value={policy.flappingTrigger.transitions}
-                    onChange={(e) =>
-                      onChange({
-                        ...policy,
-                        flappingTrigger: {
-                          ...policy.flappingTrigger,
-                          transitions:
-                            Number.parseInt(e.target.value, 10) || 1,
-                        },
-                      })
-                    }
-                    disabled={disabled}
-                  />
-                  <span>transitions to unhealthy within</span>
-                  <Input
-                    type="number"
-                    min={1}
-                    className="h-8 w-16 text-center"
-                    value={policy.flappingTrigger.windowMinutes}
-                    onChange={(e) =>
-                      onChange({
-                        ...policy,
-                        flappingTrigger: {
-                          ...policy.flappingTrigger,
-                          windowMinutes:
-                            Number.parseInt(e.target.value, 10) || 1,
-                        },
-                      })
-                    }
-                    disabled={disabled}
-                  />
-                  <span>minutes</span>
-                </div>
-              )}
-            </div>
-
-            {/* Auto-close cooldown */}
-            <div className="space-y-2 pt-2 border-t border-border">
-              <div className="flex items-center gap-2">
-                <Label className="text-sm">Auto-close cooldown</Label>
-                <Tooltip content="Resolve the auto-incident once the system has stayed healthy for this long. Snapshotted per-incident at open time — later policy edits don't change in-flight incidents." />
-              </div>
-              <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-                <label className="inline-flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={policy.autoCloseAfterMinutes === null}
-                    onChange={(e) =>
-                      onChange({
-                        ...policy,
-                        autoCloseAfterMinutes: e.target.checked ? null : 30,
-                      })
-                    }
-                    disabled={disabled}
-                  />
-                  <span>Never auto-close (manual resolve only)</span>
-                </label>
-                {policy.autoCloseAfterMinutes !== null && (
-                  <div className="flex items-center gap-2">
-                    <span>After</span>
-                    <Input
-                      type="number"
-                      min={1}
-                      className="h-8 w-16 text-center"
-                      value={policy.autoCloseAfterMinutes}
-                      onChange={(e) =>
-                        onChange({
-                          ...policy,
-                          autoCloseAfterMinutes:
-                            Number.parseInt(e.target.value, 10) || 1,
-                        })
-                      }
-                      disabled={disabled}
-                    />
-                    <span>minutes of sustained healthy</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
       {/* Save button hides when the assignment is inheriting — there
           is nothing to save. The Override button drives the transition
           into edit mode. */}