@checkstack/healthcheck-frontend 0.17.1 → 0.18.0

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()}`,
     );
   };