@checkstack/healthcheck-frontend 0.22.0 → 0.23.1

package/src/components/editor/collector-preview-context.logic.ts

@@ -0,0 +1,88 @@
+/**
+ * DOM-free helpers backing the collector config "preview-as-environment" UX.
+ *
+ * Two concerns, both kept pure so they run in the repo-root `bun test` (no
+ * happy-dom):
+ *
+ * 1. Detect whether a collector's config schema has any `x-templatable` field
+ *    (recursively), so the editor only shows the environment picker when a
+ *    preview would actually be meaningful.
+ * 2. Build the `templatePreviewContext` fed to `DynamicForm` from a chosen
+ *    environment's custom fields plus curated check/system metadata. The shape
+ *    `{ environment, check, system }` mirrors the backend's run-time render
+ *    context exactly (see `queue-executor.ts`), so the preview never diverges
+ *    from what runs.
+ */
+
+import type { JsonSchema, JsonSchemaProperty } from "@checkstack/ui";
+
+/**
+ * True when `schema` (or any nested object/array property) declares at least
+ * one `x-templatable` field. Used to gate the preview picker: no templatable
+ * field means no `{{ … }}` to resolve, so the picker stays hidden.
+ */
+export function schemaHasTemplatableFields(
+  schema: JsonSchema | undefined | null,
+): boolean {
+  if (!schema?.properties) return false;
+  return Object.values(schema.properties).some((property) =>
+    propertyHasTemplatable(property),
+  );
+}
+
+function propertyHasTemplatable(property: JsonSchemaProperty): boolean {
+  if (property["x-templatable"]) return true;
+  if (
+    property.properties &&
+    Object.values(property.properties).some((nested) =>
+      propertyHasTemplatable(nested),
+    )
+  ) {
+    return true;
+  }
+  if (property.items && propertyHasTemplatable(property.items)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Curated check/system metadata exposed to the preview, matching the run-time
+ * `CollectorRunContext` subset that templating sees. Optional because the
+ * editor may not have a concrete system in context (the author writes a config
+ * that several systems may later use).
+ */
+export interface PreviewCheckMeta {
+  id: string;
+  name: string;
+  intervalSeconds: number;
+}
+
+export interface PreviewSystemMeta {
+  id: string;
+  name: string;
+}
+
+/**
+ * Build the sample `templatePreviewContext` for `DynamicForm`. `environment`
+ * carries the chosen environment's verbatim custom fields (its catalog
+ * `metadata`); `check`/`system` carry curated metadata when available. The
+ * resulting shape `{ environment, check, system }` matches the backend
+ * `templateContext` so `{{ environment.baseUrl }}` previews exactly as it
+ * renders at run time.
+ */
+export function buildTemplatePreviewContext({
+  environmentFields,
+  check,
+  system,
+}: {
+  environmentFields: Record<string, unknown>;
+  check?: PreviewCheckMeta;
+  system?: PreviewSystemMeta;
+}): Record<string, unknown> {
+  return {
+    environment: environmentFields,
+    check: check ?? {},
+    system: system ?? {},
+  };
+}

package/src/index.tsx

@@ -1,25 +1,24 @@
 import {
   createFrontendPlugin,
   createSlotExtension,
-  UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
-import { HealthCheckConfigPage } from "./pages/HealthCheckConfigPage";
-import { StrategyPickerPage } from "./pages/StrategyPickerPage";
-import { HealthCheckIDEPage } from "./pages/HealthCheckIDEPage";
-import { AssignmentIDEPage } from "./pages/AssignmentIDEPage";
-import { HealthCheckHistoryPage } from "./pages/HealthCheckHistoryPage";
-import { HealthCheckHistoryDetailPage } from "./pages/HealthCheckHistoryDetailPage";
-import { HealthCheckMenuItems } from "./components/HealthCheckMenuItems";
-import { HealthCheckSystemOverview } from "./components/HealthCheckSystemOverview";
+import { Activity } from "lucide-react";
 import { SystemHealthCheckAssignment } from "./components/SystemHealthCheckAssignment";
 import { SystemHealthBadge } from "./components/SystemHealthBadge";
 import { healthCheckAccess } from "@checkstack/healthcheck-common";
-import { autoChartExtension } from "./auto-charts";
+// Import directly from the extension module, NOT the `./auto-charts` barrel:
+// the barrel statically re-exports AutoChartGrid + SingleRunChartGrid (both
+// pull in recharts), so importing the extension through it would drag recharts
+// into this eagerly-loaded plugin entry. The extension itself lazy-loads the
+// chart grid.
+import { autoChartExtension } from "./auto-charts/extension";
 
 import {
   SystemDetailsSlot,
   CatalogSystemActionsSlot,
   SystemStateBadgesSlot,
+  CatalogBrowseHealthSlot,
+  SystemSignalsSlot,
 } from "@checkstack/catalog-common";
 import {
   healthcheckRoutes,
@@ -49,43 +48,70 @@ export default createFrontendPlugin({
   routes: [
     {
       route: healthcheckRoutes.routes.config,
-      element: <HealthCheckConfigPage />,
+      load: () =>
+        import("./pages/HealthCheckConfigPage").then((m) => ({
+          default: m.HealthCheckConfigPage,
+        })),
       title: "Health Checks",
       accessRule: healthCheckAccess.configuration.manage,
+      nav: {
+        group: "Reliability",
+        icon: Activity,
+        // Visible to read-only users (the page itself still gates on manage).
+        accessRule: healthCheckAccess.configuration.read,
+      },
     },
     {
       route: healthcheckRoutes.routes.create,
-      element: <StrategyPickerPage />,
+      load: () =>
+        import("./pages/StrategyPickerPage").then((m) => ({
+          default: m.StrategyPickerPage,
+        })),
       title: "Create Health Check",
       accessRule: healthCheckAccess.configuration.manage,
     },
     {
       route: healthcheckRoutes.routes.edit,
-      element: <HealthCheckIDEPage />,
+      load: () =>
+        import("./pages/HealthCheckIDEPage").then((m) => ({
+          default: m.HealthCheckIDEPage,
+        })),
       title: "Edit Health Check",
       accessRule: healthCheckAccess.configuration.manage,
     },
     {
       route: healthcheckRoutes.routes.assignments,
-      element: <AssignmentIDEPage />,
+      load: () =>
+        import("./pages/AssignmentIDEPage").then((m) => ({
+          default: m.AssignmentIDEPage,
+        })),
       title: "Health Check Assignments",
       accessRule: healthCheckAccess.configuration.manage,
     },
     {
       route: healthcheckRoutes.routes.history,
-      element: <HealthCheckHistoryPage />,
+      load: () =>
+        import("./pages/HealthCheckHistoryPage").then((m) => ({
+          default: m.HealthCheckHistoryPage,
+        })),
       title: "Health Check History",
       accessRule: healthCheckAccess.configuration.read,
     },
     {
       route: healthcheckRoutes.routes.historyDetail,
-      element: <HealthCheckHistoryDetailPage />,
+      load: () =>
+        import("./pages/HealthCheckHistoryDetailPage").then((m) => ({
+          default: m.HealthCheckHistoryDetailPage,
+        })),
       title: "Health Check Detail",
       accessRule: healthCheckAccess.details,
     },
     {
       route: healthcheckRoutes.routes.historyRun,
-      element: <HealthCheckHistoryDetailPage />,
+      load: () =>
+        import("./pages/HealthCheckHistoryDetailPage").then((m) => ({
+          default: m.HealthCheckHistoryDetailPage,
+        })),
       title: "Health Check Run",
       accessRule: healthCheckAccess.details,
     },
@@ -93,18 +119,34 @@ export default createFrontendPlugin({
   // No APIs needed - components use usePluginClient() directly
   apis: [],
   extensions: [
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "healthcheck.user-menu.items",
-      component: HealthCheckMenuItems,
-      metadata: { group: "Reliability" },
-    }),
     createSlotExtension(SystemStateBadgesSlot, {
       id: "healthcheck.system-health-badge",
       component: SystemHealthBadge,
     }),
+    createSlotExtension(CatalogBrowseHealthSlot, {
+      id: "healthcheck.catalog.browse-health",
+      // Lazy: only loads when the catalog browse/manage view mounts the slot.
+      load: () =>
+        import("./components/CatalogBrowseHealthFiller").then((m) => ({
+          default: m.CatalogBrowseHealthFiller,
+        })),
+    }),
+    createSlotExtension(SystemSignalsSlot, {
+      id: "healthcheck.dashboard.signals",
+      // Lazy: only loads when the dashboard overview mounts the slot.
+      load: () =>
+        import("./components/HealthSignalsFiller").then((m) => ({
+          default: m.HealthSignalsFiller,
+        })),
+    }),
     createSlotExtension(SystemDetailsSlot, {
       id: "healthcheck.system-details.overview",
-      component: HealthCheckSystemOverview,
+      // Heavier overview (drawer pulls recharts) — lazy so it stays out of the
+      // initial bundle and loads when a system-detail page renders.
+      load: () =>
+        import("./components/HealthCheckSystemOverview").then((m) => ({
+          default: m.HealthCheckSystemOverview,
+        })),
     }),
     createSlotExtension(CatalogSystemActionsSlot, {
       id: "healthcheck.catalog.system-actions",

package/src/pages/AssignmentIDEPage.tsx

@@ -15,7 +15,12 @@ import type {
 import { PageLayout, IDELayout, useToast, BackLink, Button } from "@checkstack/ui";
 import { Settings, Plus, Bell } from "lucide-react";
 import { extractErrorMessage, resolveRoute } from "@checkstack/common";
-import { catalogRoutes } from "@checkstack/catalog-common";
+import { catalogRoutes, CatalogApi } from "@checkstack/catalog-common";
+import {
+  environmentIdsForMode,
+  toggleEnvironmentId,
+  type EnvironmentSelectorMode,
+} from "../components/assignments/environment-selector.logic";
 import { healthcheckRoutes } from "@checkstack/healthcheck-common";
 import {
   AssignmentTree,
@@ -68,6 +73,7 @@ const AssignmentIDEPageContent = () => {
   const toast = useToast();
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const satelliteClient = usePluginClient(SatelliteApi);
+  const catalogClient = usePluginClient(CatalogApi);
 
   // --- Data Fetching ---
 
@@ -87,6 +93,14 @@ const AssignmentIDEPageContent = () => {
 
   const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
 
+  // Environments the system currently belongs to — drives the per-assignment
+  // environment selector (the fan-out set is a subset of these).
+  const { data: systemEnvironments = [] } =
+    catalogClient.getSystemEnvironments.useQuery(
+      { systemId: systemId ?? "" },
+      { enabled: !!systemId },
+    );
+
   // --- UI State ---
 
   const [selectedNode, setSelectedNode] = useState<AssignmentNodeId>();
@@ -239,6 +253,7 @@ const AssignmentIDEPageContent = () => {
         enabled: !currentEnabled,
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
+        environmentIds: assoc.environmentIds,
         includeLocal: assoc.includeLocal,
         notificationPolicy: assoc.notificationPolicy,
       },
@@ -266,6 +281,7 @@ const AssignmentIDEPageContent = () => {
           enabled: assoc.enabled,
           stateThresholds: thresholds,
           satelliteIds: assoc.satelliteIds,
+          environmentIds: assoc.environmentIds,
           includeLocal: assoc.includeLocal,
           notificationPolicy: assoc.notificationPolicy,
         },
@@ -308,6 +324,7 @@ const AssignmentIDEPageContent = () => {
           enabled: assoc.enabled,
           stateThresholds: assoc.stateThresholds,
           satelliteIds: assoc.satelliteIds,
+          environmentIds: assoc.environmentIds,
           includeLocal: assoc.includeLocal,
           notificationPolicy: policy,
         },
@@ -343,6 +360,7 @@ const AssignmentIDEPageContent = () => {
           enabled: assoc.enabled,
           stateThresholds: assoc.stateThresholds,
           satelliteIds: assoc.satelliteIds,
+          environmentIds: assoc.environmentIds,
           includeLocal: assoc.includeLocal,
           notificationPolicy: undefined,
         },
@@ -391,6 +409,7 @@ const AssignmentIDEPageContent = () => {
         enabled: assoc.enabled,
         stateThresholds: assoc.stateThresholds,
         satelliteIds: newIds,
+        environmentIds: assoc.environmentIds,
         includeLocal: assoc.includeLocal,
         notificationPolicy: assoc.notificationPolicy,
       },
@@ -409,12 +428,69 @@ const AssignmentIDEPageContent = () => {
         enabled: assoc.enabled,
         stateThresholds: assoc.stateThresholds,
         satelliteIds: assoc.satelliteIds,
+        environmentIds: assoc.environmentIds,
         includeLocal: !assoc.includeLocal,
         notificationPolicy: assoc.notificationPolicy,
       },
     });
   };
 
+  /**
+   * Persist `environmentIds` for an assignment, preserving every other
+   * operator-managed field. Used by both the mode switch and the per-env
+   * toggle in the "specific" mode.
+   */
+  const persistEnvironmentIds = (
+    configId: string,
+    environmentIds: string[] | null,
+  ) => {
+    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,
+        environmentIds,
+        includeLocal: assoc.includeLocal,
+        notificationPolicy: assoc.notificationPolicy,
+      },
+    });
+  };
+
+  const handleSetEnvironmentMode = (
+    configId: string,
+    mode: EnvironmentSelectorMode,
+  ) => {
+    const assoc = associations.find((a) => a.configurationId === configId);
+    // Switching to "specific" seeds with the current explicit set if any,
+    // otherwise all current environment ids (a sensible starting point).
+    const currentSpecific =
+      assoc?.environmentIds && assoc.environmentIds.length > 0
+        ? assoc.environmentIds
+        : systemEnvironments.map((e) => e.id);
+    persistEnvironmentIds(
+      configId,
+      environmentIdsForMode({ mode, selectedIds: currentSpecific }),
+    );
+  };
+
+  const handleToggleEnvironment = (configId: string, environmentId: string) => {
+    const assoc = associations.find((a) => a.configurationId === configId);
+    const currentSpecific =
+      assoc?.environmentIds && assoc.environmentIds.length > 0
+        ? assoc.environmentIds
+        : [];
+    persistEnvironmentIds(
+      configId,
+      toggleEnvironmentId({ selectedIds: currentSpecific, environmentId }),
+    );
+  };
+
   const handleSaveRetention = (configId: string) => {
     if (!systemId) return;
     const data = retentionData[configId];
@@ -567,6 +643,17 @@ const AssignmentIDEPageContent = () => {
             onToggleSatellite={(satId) =>
               handleToggleSatellite(configId, satId)
             }
+            environmentIds={assoc.environmentIds ?? null}
+            environments={systemEnvironments.map((e) => ({
+              id: e.id,
+              name: e.name,
+            }))}
+            onSetEnvironmentMode={(mode) =>
+              handleSetEnvironmentMode(configId, mode)
+            }
+            onToggleEnvironment={(envId) =>
+              handleToggleEnvironment(configId, envId)
+            }
             saving={saving}
             isLocked={isLocked}
           />

package/src/pages/HealthCheckIDEPage.tsx

@@ -20,6 +20,11 @@ import { useCollectors } from "../hooks/useCollectors";
 import { EditorTree, type TreeNodeId } from "../components/editor/EditorTree";
 import { EditorPanel } from "../components/editor/EditorPanel";
 import { useProvenanceLock, GitOpsLockBanner } from "@checkstack/gitops-frontend";
+import {
+  environmentToPreviewFields,
+  findSelectedEnvironment,
+} from "@checkstack/catalog-frontend";
+import { buildTemplatePreviewContext } from "../components/editor/collector-preview-context.logic";
 
 
 // =============================================================================
@@ -104,6 +109,23 @@ const HealthCheckIDEPageContent = () => {
     [systemsData],
   );
 
+  // Environments for the collector "Preview as" picker. When the editor was
+  // opened from a single system (create-from-system), use that system's
+  // environments; otherwise the config may later be assigned to many systems,
+  // so a global picker over all environments is acceptable.
+  const { data: systemEnvironments = [] } =
+    catalogClient.getSystemEnvironments.useQuery(
+      { systemId: systemIdFromUrl ?? "" },
+      { enabled: !!systemIdFromUrl },
+    );
+  const { data: allEnvironments = [] } = catalogClient.listEnvironments.useQuery(
+    {},
+    { enabled: !systemIdFromUrl },
+  );
+  const previewEnvironments = systemIdFromUrl
+    ? systemEnvironments
+    : allEnvironments;
+
   // --- Form State ---
 
   const [formState, setFormState] = useState<EditorFormState>({
@@ -122,6 +144,11 @@ const HealthCheckIDEPageContent = () => {
   const [selectedSystemIds, setSelectedSystemIds] = useState<string[]>(
     systemIdFromUrl ? [systemIdFromUrl] : [],
   );
+  // Selected "Preview as" environment id for collector config templating.
+  // Pure editor-local UI state (never persisted) — shared across collectors.
+  const [previewEnvironmentId, setPreviewEnvironmentId] = useState<
+    string | null
+  >(null);
 
   // Initialize form from existing configuration (edit mode).
   //
@@ -282,6 +309,49 @@ const HealthCheckIDEPageContent = () => {
 
   const isValid = validationIssues.length === 0;
 
+  // --- Template preview context ---
+
+  // Build the sample `{ environment, check, system }` context fed to the
+  // collector config form so `{{ environment.* }}` previews live. `undefined`
+  // until an environment is picked, so the preview line stays hidden. Shape
+  // mirrors the backend run-time render context (see `queue-executor.ts`).
+  const templatePreviewContext = useMemo<
+    Record<string, unknown> | undefined
+  >(() => {
+    const selectedEnv = findSelectedEnvironment({
+      environments: previewEnvironments,
+      selectedId: previewEnvironmentId,
+    });
+    if (!selectedEnv) return;
+
+    const systemMeta = systemIdFromUrl
+      ? {
+          id: systemIdFromUrl,
+          name:
+            systems.find((s) => s.id === systemIdFromUrl)?.name ??
+            systemIdFromUrl,
+        }
+      : undefined;
+
+    return buildTemplatePreviewContext({
+      environmentFields: environmentToPreviewFields(selectedEnv),
+      check: {
+        id: configId ?? "new",
+        name: formState.name || "Health check",
+        intervalSeconds: formState.intervalSeconds,
+      },
+      system: systemMeta,
+    });
+  }, [
+    previewEnvironments,
+    previewEnvironmentId,
+    systemIdFromUrl,
+    systems,
+    configId,
+    formState.name,
+    formState.intervalSeconds,
+  ]);
+
   // --- Save ---
 
   const associateMutation = healthCheckClient.associateSystem.useMutation();
@@ -466,6 +536,10 @@ const HealthCheckIDEPageContent = () => {
                 setSelectedSystemIds(ids);
                 setIsDirty(true);
               }}
+              previewEnvironments={previewEnvironments}
+              previewEnvironmentId={previewEnvironmentId}
+              onPreviewEnvironmentChange={setPreviewEnvironmentId}
+              templatePreviewContext={templatePreviewContext}
             />
             {configId && (
               <ExtensionSlot

package/tsconfig.json

@@ -13,6 +13,9 @@
     {
       "path": "../catalog-common"
     },
+    {
+      "path": "../catalog-frontend"
+    },
     {
       "path": "../common"
     },

package/src/components/HealthCheckMenuItems.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { Activity } from "lucide-react";
-import type { UserMenuItemsContext } from "@checkstack/frontend-api";
-import { DropdownMenuItem } from "@checkstack/ui";
-import { resolveRoute } from "@checkstack/common";
-import {
-  healthcheckRoutes,
-  healthCheckAccess,
-  pluginMetadata,
-} from "@checkstack/healthcheck-common";
-
-export const HealthCheckMenuItems = ({
-  accessRules: userPerms,
-}: UserMenuItemsContext) => {
-  const qualifiedId = `${pluginMetadata.pluginId}.${healthCheckAccess.configuration.read.id}`;
-  const canRead = userPerms.includes("*") || userPerms.includes(qualifiedId);
-
-  if (!canRead) {
-    return <React.Fragment />;
-  }
-
-  return (
-    <Link to={resolveRoute(healthcheckRoutes.routes.config)}>
-      <DropdownMenuItem icon={<Activity className="w-4 h-4" />}>
-        Health Checks
-      </DropdownMenuItem>
-    </Link>
-  );
-};