@checkstack/healthcheck-frontend 0.17.0 → 0.18.0

package/src/components/editor/SystemsSection.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo, useState } from "react";
+import { Checkbox, Input, InfoBanner, InfoBannerContent } from "@checkstack/ui";
+import { Info, Search } from "lucide-react";
+
+interface SystemOption {
+  id: string;
+  name: string;
+  description?: string | null;
+}
+
+interface SystemsSectionProps {
+  systems: SystemOption[];
+  selectedSystemIds: string[];
+  loading: boolean;
+  onChange: (systemIds: string[]) => void;
+}
+
+export const SystemsSection: React.FC<SystemsSectionProps> = ({
+  systems,
+  selectedSystemIds,
+  loading,
+  onChange,
+}) => {
+  const [query, setQuery] = useState("");
+
+  const selectedSet = useMemo(
+    () => new Set(selectedSystemIds),
+    [selectedSystemIds],
+  );
+
+  const filteredSystems = useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return systems;
+    return systems.filter((s) => s.name.toLowerCase().includes(trimmed));
+  }, [systems, query]);
+
+  const toggle = ({ systemId }: { systemId: string }) => {
+    if (selectedSet.has(systemId)) {
+      onChange(selectedSystemIds.filter((id) => id !== systemId));
+    } else {
+      onChange([...selectedSystemIds, systemId]);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Assign to systems</h2>
+        <p className="text-sm text-muted-foreground">
+          Optionally pick systems this check should monitor. You can also
+          assign it later from a system&apos;s catalog page.
+        </p>
+      </div>
+
+      <InfoBanner variant="info">
+        <Info className="h-4 w-4 shrink-0 mt-0.5" />
+        <InfoBannerContent>
+          Health checks are reusable templates — they can be assigned to
+          additional systems at any time.
+        </InfoBannerContent>
+      </InfoBanner>
+
+      <div className="space-y-2">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search systems..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9"
+            disabled={loading}
+          />
+        </div>
+
+        {loading ? (
+          <p className="text-sm text-muted-foreground italic px-1">
+            Loading systems...
+          </p>
+        ) : filteredSystems.length === 0 ? (
+          <p className="text-sm text-muted-foreground italic px-1">
+            {systems.length === 0
+              ? "No systems exist yet. Create one from the catalog first."
+              : "No systems match your search."}
+          </p>
+        ) : (
+          <div className="max-h-[420px] overflow-y-auto rounded-md border border-border/50 divide-y divide-border/50">
+            {filteredSystems.map((system) => {
+              const isChecked = selectedSet.has(system.id);
+              return (
+                <button
+                  key={system.id}
+                  type="button"
+                  onClick={() => toggle({ systemId: system.id })}
+                  className="flex items-start gap-3 w-full px-3 py-2.5 text-left hover:bg-muted/40 transition-colors"
+                >
+                  <Checkbox
+                    checked={isChecked}
+                    onCheckedChange={() => toggle({ systemId: system.id })}
+                    className="mt-0.5"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium truncate">
+                      {system.name}
+                    </div>
+                    {system.description && (
+                      <div className="text-xs text-muted-foreground truncate">
+                        {system.description}
+                      </div>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {selectedSystemIds.length > 0 && (
+          <p className="text-xs text-muted-foreground px-1">
+            {selectedSystemIds.length} system
+            {selectedSystemIds.length === 1 ? "" : "s"} selected
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/hooks/useHealthCheckData.ts

@@ -74,35 +74,38 @@ export function useHealthCheckData({
     healthCheckAccess.details,
   );
 
-  // Always use aggregated data with fixed target points
-  const {
-    data: aggregatedData,
-    isLoading,
-    refetch,
-  } = healthCheckClient.getDetailedAggregatedHistory.useQuery(
-    {
-      systemId,
-      configurationId,
-      startDate: dateRange.startDate,
-      endDate: dateRange.endDate,
-      sourceFilter,
-      targetPoints: 500,
-    },
-    {
-      enabled: !!systemId && !!configurationId && hasAccess && !accessLoading,
-      // Keep previous data visible during refetch to prevent layout shift
-      placeholderData: (prev) => prev,
-    },
-  );
+  // Always use aggregated data with fixed target points.
+  // Realtime refetches happen via SignalAutoInvalidator (auto-invalidates
+  // `[["healthcheck"]]` on HEALTH_CHECK_RUN_COMPLETED).
+  const { data: aggregatedData, isLoading } =
+    healthCheckClient.getDetailedAggregatedHistory.useQuery(
+      {
+        systemId,
+        configurationId,
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        sourceFilter,
+        targetPoints: 500,
+      },
+      {
+        enabled: !!systemId && !!configurationId && hasAccess && !accessLoading,
+        // Keep previous data visible during refetch to prevent layout shift
+        placeholderData: (prev) => prev,
+      },
+    );
 
-  // Listen for realtime health check updates to refresh data silently
+  // For rolling presets, we still need an explicit signal handler to advance
+  // the endDate alongside cache invalidation — this is UI state (date range),
+  // not cache, so auto-invalidation is not enough.
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
-    if (changedId === systemId && hasAccess && !accessLoading) {
-      // Update endDate to current time only for rolling presets (not custom ranges)
-      if (isRollingPreset && onDateRangeRefresh) {
-        onDateRangeRefresh(new Date());
-      }
-      void refetch();
+    if (
+      changedId === systemId &&
+      hasAccess &&
+      !accessLoading &&
+      isRollingPreset &&
+      onDateRangeRefresh
+    ) {
+      onDateRangeRefresh(new Date());
     }
   });
 

package/src/pages/AssignmentIDEPage.tsx

@@ -8,10 +8,11 @@ import {
   DEFAULT_RETENTION_CONFIG,
 } from "@checkstack/healthcheck-common";
 import type { StateThresholds } from "@checkstack/healthcheck-common";
-import { PageLayout, IDELayout, useToast, BackLink } from "@checkstack/ui";
-import { Settings } from "lucide-react";
+import { PageLayout, IDELayout, useToast, BackLink, Button } from "@checkstack/ui";
+import { Settings, Plus } from "lucide-react";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
 import { catalogRoutes } from "@checkstack/catalog-common";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import {
   AssignmentTree,
   type AssignmentNodeId,
@@ -480,11 +481,26 @@ const AssignmentIDEPageContent = () => {
       icon={Settings}
       maxWidth="full"
       actions={
-        <BackLink
-          onClick={() => navigate(resolveRoute(catalogRoutes.routes.config))}
-        >
-          Back to Systems
-        </BackLink>
+        <div className="flex items-center gap-2">
+          {!isLocked && systemId && (
+            <Button
+              size="sm"
+              onClick={() =>
+                navigate(
+                  `${resolveRoute(healthcheckRoutes.routes.create)}?systemId=${encodeURIComponent(systemId)}`,
+                )
+              }
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Create new check
+            </Button>
+          )}
+          <BackLink
+            onClick={() => navigate(resolveRoute(catalogRoutes.routes.config))}
+          >
+            Back to Systems
+          </BackLink>
+        </div>
       }
     >
       {isLocked && provenance && (

package/src/pages/HealthCheckIDEPage.tsx

@@ -10,7 +10,9 @@ import { HealthCheckConfigIDEPanelSlot } from "../slots";
 import {
   healthcheckRoutes,
   type CollectorConfigEntry,
+  DEFAULT_STATE_THRESHOLDS,
 } from "@checkstack/healthcheck-common";
+import { CatalogApi } from "@checkstack/catalog-common";
 import { PageLayout, Button, useToast, IDELayout, type ValidationIssue } from "@checkstack/ui";
 import { Save, Settings } from "lucide-react";
 import { resolveRoute, extractErrorMessage} from "@checkstack/common";
@@ -44,6 +46,8 @@ const HealthCheckIDEPageContent = () => {
 
   const isEditMode = !!configId && configId !== "new";
   const strategyIdFromUrl = searchParams.get("strategy") ?? undefined;
+  const systemIdFromUrl = searchParams.get("systemId") ?? undefined;
+  const catalogClient = usePluginClient(CatalogApi);
 
   // --- GitOps Provenance Lock ---
   const { isLocked, provenance } = useProvenanceLock({
@@ -79,6 +83,19 @@ const HealthCheckIDEPageContent = () => {
   const { collectors: availableCollectors, loading: collectorsLoading } =
     useCollectors(activeStrategyId ?? "");
 
+  // Fetch systems for assignment (only in create mode)
+  const { data: systemsData, isLoading: systemsLoading } =
+    catalogClient.getSystems.useQuery({}, { enabled: !isEditMode });
+  const systems = useMemo(
+    () =>
+      (systemsData?.systems ?? []).map((s) => ({
+        id: s.id,
+        name: s.name,
+        description: s.description,
+      })),
+    [systemsData],
+  );
+
   // --- Form State ---
 
   const [formState, setFormState] = useState<EditorFormState>({
@@ -94,6 +111,9 @@ const HealthCheckIDEPageContent = () => {
     Record<string, boolean>
   >({});
   const [isDirty, setIsDirty] = useState(false);
+  const [selectedSystemIds, setSelectedSystemIds] = useState<string[]>(
+    systemIdFromUrl ? [systemIdFromUrl] : [],
+  );
 
   // Initialize form from existing configuration (edit mode)
   useEffect(() => {
@@ -250,11 +270,55 @@ const HealthCheckIDEPageContent = () => {
 
   // --- Save ---
 
+  const associateMutation = healthCheckClient.associateSystem.useMutation();
+
   const createMutation = healthCheckClient.createConfiguration.useMutation({
-    onSuccess: () => {
+    onSuccess: async (created) => {
       setIsDirty(false);
-      toast.success("Health check created");
-      navigate(resolveRoute(healthcheckRoutes.routes.config));
+
+      // Fan-out: assign the new config to each selected system.
+      if (selectedSystemIds.length > 0 && created?.id) {
+        const results = await Promise.allSettled(
+          selectedSystemIds.map((systemId) =>
+            associateMutation.mutateAsync({
+              systemId,
+              body: {
+                configurationId: created.id,
+                enabled: true,
+                stateThresholds: DEFAULT_STATE_THRESHOLDS,
+                includeLocal: true,
+              },
+            }),
+          ),
+        );
+        const failed = results.filter((r) => r.status === "rejected").length;
+        if (failed > 0) {
+          toast.error(
+            `Health check created, but ${failed} of ${selectedSystemIds.length} system assignment${selectedSystemIds.length === 1 ? "" : "s"} failed.`,
+          );
+        } else {
+          toast.success(
+            `Health check created and assigned to ${selectedSystemIds.length} system${selectedSystemIds.length === 1 ? "" : "s"}`,
+          );
+        }
+      } else {
+        toast.success("Health check created");
+      }
+
+      // Where to land: prefer back to the originating system's assignment IDE
+      // when the user came from there, otherwise the config list.
+      if (
+        systemIdFromUrl &&
+        selectedSystemIds.includes(systemIdFromUrl)
+      ) {
+        navigate(
+          resolveRoute(healthcheckRoutes.routes.assignments, {
+            systemId: systemIdFromUrl,
+          }),
+        );
+      } else {
+        navigate(resolveRoute(healthcheckRoutes.routes.config));
+      }
     },
     onError: (error) => {
       toast.error(extractErrorMessage(error, "Failed to create"));
@@ -352,6 +416,8 @@ const HealthCheckIDEPageContent = () => {
             validationIssues={validationIssues}
             strategyId={activeStrategyId ?? ""}
             configId={configId}
+            showSystemsNode={!isEditMode}
+            selectedSystemCount={selectedSystemIds.length}
           />
         }
         panel={
@@ -378,6 +444,14 @@ const HealthCheckIDEPageContent = () => {
               onCollectorRemove={handleCollectorRemove}
               onCollectorAdd={handleCollectorAdd}
               strategyId={activeStrategyId ?? ""}
+              showSystemsSection={!isEditMode}
+              systems={systems}
+              systemsLoading={systemsLoading}
+              selectedSystemIds={selectedSystemIds}
+              onSystemsChange={(ids) => {
+                setSelectedSystemIds(ids);
+                setIsDirty(true);
+              }}
             />
             {configId && (
               <ExtensionSlot

package/src/pages/StrategyPickerPage.tsx

@@ -16,7 +16,7 @@ import {
   Badge,
 } from "@checkstack/ui";
 import { Search, Zap } from "lucide-react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { resolveRoute } from "@checkstack/common";
 
 /**
@@ -61,6 +61,8 @@ function StrategyCard({
 const StrategyPickerPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const navigate = useNavigate();
+  const [urlParams] = useSearchParams();
+  const systemIdFromUrl = urlParams.get("systemId");
   const [searchQuery, setSearchQuery] = useState("");
 
   const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
@@ -96,8 +98,13 @@ const StrategyPickerPageContent = () => {
   }, [strategies, searchQuery]);
 
   const handleSelectStrategy = (strategy: HealthCheckStrategyDto) => {
+    const params = new URLSearchParams();
+    params.set("strategy", strategy.id);
+    if (systemIdFromUrl) {
+      params.set("systemId", systemIdFromUrl);
+    }
     navigate(
-      `${resolveRoute(healthcheckRoutes.routes.edit, { configId: "new" })}?strategy=${encodeURIComponent(strategy.id)}`,
+      `${resolveRoute(healthcheckRoutes.routes.edit, { configId: "new" })}?${params.toString()}`,
     );
   };