@checkstack/healthcheck-frontend 0.11.7 → 0.12.0

package/src/components/editor/GeneralSection.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import type { HealthCheckStrategyDto } from "@checkstack/healthcheck-common";
+import { Input, Label, DynamicForm } from "@checkstack/ui";
+import { AlertTriangle } from "lucide-react";
+
+interface GeneralSectionProps {
+  name: string;
+  intervalSeconds: number;
+  strategyConfig: Record<string, unknown>;
+  strategy: HealthCheckStrategyDto | undefined;
+  onNameChange: (name: string) => void;
+  onIntervalChange: (interval: number) => void;
+  onStrategyConfigChange: (config: Record<string, unknown>) => void;
+  onStrategyConfigValidChange: (isValid: boolean) => void;
+}
+
+export const GeneralSection: React.FC<GeneralSectionProps> = ({
+  name,
+  intervalSeconds,
+  strategyConfig,
+  strategy,
+  onNameChange,
+  onIntervalChange,
+  onStrategyConfigChange,
+  onStrategyConfigValidChange,
+}) => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">General</h2>
+        <p className="text-sm text-muted-foreground">
+          Basic configuration for this health check.
+        </p>
+      </div>
+
+      {/* Strategy Display */}
+      {strategy && (
+        <div className="flex items-center gap-2 rounded-md border border-border/50 bg-muted/30 px-3 py-2">
+          <span className="text-sm font-medium">{strategy.displayName}</span>
+          {strategy.description && (
+            <span className="text-xs text-muted-foreground">
+              — {strategy.description}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Name */}
+      <div className="space-y-2">
+        <Label htmlFor="hc-name">Name</Label>
+        <Input
+          id="hc-name"
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+          placeholder="e.g. Production API Health"
+        />
+      </div>
+
+      {/* Interval */}
+      <div className="space-y-2">
+        <Label htmlFor="hc-interval">Interval (seconds)</Label>
+        <Input
+          id="hc-interval"
+          type="number"
+          min={1}
+          value={intervalSeconds}
+          onChange={(e) => onIntervalChange(Number(e.target.value))}
+        />
+        {intervalSeconds > 0 && intervalSeconds < 60 && (
+          <div className="flex items-center gap-1.5 text-xs text-amber-500">
+            <AlertTriangle className="h-3 w-3" />
+            <span>
+              Sub-minute intervals may cause high load on monitored services.
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Strategy Config */}
+      {strategy?.configSchema && (
+        <div className="space-y-3 pt-2 border-t">
+          <div>
+            <h3 className="text-sm font-semibold">Strategy Configuration</h3>
+            <p className="text-xs text-muted-foreground">
+              Settings specific to {strategy.displayName}.
+            </p>
+          </div>
+          <DynamicForm
+            schema={strategy.configSchema}
+            value={strategyConfig}
+            onChange={onStrategyConfigChange}
+            onValidChange={onStrategyConfigValidChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/editor/IDEStatusBar.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import type { TreeNodeId } from "./EditorTree";
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface ValidationIssue {
+  nodeId: TreeNodeId;
+  message: string;
+}
+
+interface IDEStatusBarProps {
+  issues: ValidationIssue[];
+  onIssueClick: (nodeId: TreeNodeId) => void;
+}
+
+// =============================================================================
+// STATUS BAR
+// =============================================================================
+
+export const IDEStatusBar: React.FC<IDEStatusBarProps> = ({
+  issues,
+  onIssueClick,
+}) => {
+  if (issues.length === 0) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 mt-2 rounded-md border bg-card text-xs text-muted-foreground">
+        <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+        <span>No issues found</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 mt-2 rounded-md border bg-card text-xs">
+      <div className="flex items-center gap-1.5 text-destructive shrink-0">
+        <AlertCircle className="h-3.5 w-3.5" />
+        <span className="font-medium">
+          {issues.length} {issues.length === 1 ? "issue" : "issues"}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 overflow-x-auto">
+        {issues.map((issue, i) => (
+          <button
+            key={`${issue.nodeId}-${i}`}
+            type="button"
+            onClick={() => onIssueClick(issue.nodeId)}
+            className="text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap underline-offset-2 hover:underline"
+          >
+            {issue.message}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/index.tsx

@@ -4,6 +4,8 @@ import {
   UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
 import { HealthCheckConfigPage } from "./pages/HealthCheckConfigPage";
+import { StrategyPickerPage } from "./pages/StrategyPickerPage";
+import { HealthCheckIDEPage } from "./pages/HealthCheckIDEPage";
 import { HealthCheckHistoryPage } from "./pages/HealthCheckHistoryPage";
 import { HealthCheckHistoryDetailPage } from "./pages/HealthCheckHistoryDetailPage";
 import { HealthCheckMenuItems } from "./components/HealthCheckMenuItems";
@@ -43,6 +45,18 @@ export default createFrontendPlugin({
       title: "Health Checks",
       accessRule: healthCheckAccess.configuration.manage,
     },
+    {
+      route: healthcheckRoutes.routes.create,
+      element: <StrategyPickerPage />,
+      title: "Create Health Check",
+      accessRule: healthCheckAccess.configuration.manage,
+    },
+    {
+      route: healthcheckRoutes.routes.edit,
+      element: <HealthCheckIDEPage />,
+      title: "Edit Health Check",
+      accessRule: healthCheckAccess.configuration.manage,
+    },
     {
       route: healthcheckRoutes.routes.history,
       element: <HealthCheckHistoryPage />,

package/src/pages/HealthCheckConfigPage.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import {
   usePluginClient,
   wrapInSuspense,
@@ -8,13 +8,11 @@ import {
 } from "@checkstack/frontend-api";
 import { HealthCheckApi } from "../api";
 import {
-  HealthCheckConfiguration,
-  CreateHealthCheckConfiguration,
+  type HealthCheckConfiguration,
   healthcheckRoutes,
   healthCheckAccess,
 } from "@checkstack/healthcheck-common";
 import { HealthCheckList } from "../components/HealthCheckList";
-import { HealthCheckEditor } from "../components/HealthCheckEditor";
 import {
   Button,
   ConfirmationModal,
@@ -24,11 +22,13 @@ import {
 import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
 import { resolveRoute } from "@checkstack/common";
+import { useState } from "react";
 
 const HealthCheckConfigPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const toast = useToast();
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const { allowed: canRead, loading: accessLoading } = accessApi.useAccess(
     healthCheckAccess.configuration.read,
@@ -37,11 +37,6 @@ const HealthCheckConfigPageContent = () => {
     healthCheckAccess.configuration.manage,
   );
 
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
-  const [editingConfig, setEditingConfig] = useState<
-    HealthCheckConfiguration | undefined
-  >();
-
   // Delete modal state
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [idToDelete, setIdToDelete] = useState<string | undefined>();
@@ -60,35 +55,14 @@ const HealthCheckConfigPageContent = () => {
   // Handle ?action=create URL parameter (from command palette)
   useEffect(() => {
     if (searchParams.get("action") === "create" && canManage) {
-      setEditingConfig(undefined);
-      setIsEditorOpen(true);
-      // Clear the URL param after opening
+      // Clear the URL param and navigate to the create flow
       searchParams.delete("action");
       setSearchParams(searchParams, { replace: true });
+      navigate(resolveRoute(healthcheckRoutes.routes.create));
     }
-  }, [searchParams, canManage, setSearchParams]);
+  }, [searchParams, canManage, setSearchParams, navigate]);
 
   // Mutations
-  const createMutation = healthCheckClient.createConfiguration.useMutation({
-    onSuccess: () => {
-      setIsEditorOpen(false);
-      void refetchConfigurations();
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to create");
-    },
-  });
-
-  const updateMutation = healthCheckClient.updateConfiguration.useMutation({
-    onSuccess: () => {
-      setIsEditorOpen(false);
-      void refetchConfigurations();
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to update");
-    },
-  });
-
   const deleteMutation = healthCheckClient.deleteConfiguration.useMutation({
     onSuccess: () => {
       setIsDeleteModalOpen(false);
@@ -119,13 +93,13 @@ const HealthCheckConfigPageContent = () => {
   });
 
   const handleCreate = () => {
-    setEditingConfig(undefined);
-    setIsEditorOpen(true);
+    navigate(resolveRoute(healthcheckRoutes.routes.create));
   };
 
   const handleEdit = (config: HealthCheckConfiguration) => {
-    setEditingConfig(config);
-    setIsEditorOpen(true);
+    navigate(
+      resolveRoute(healthcheckRoutes.routes.edit, { configId: config.id }),
+    );
   };
 
   const handleDelete = (id: string) => {
@@ -138,19 +112,6 @@ const HealthCheckConfigPageContent = () => {
     deleteMutation.mutate(idToDelete);
   };
 
-  const handleSave = async (data: CreateHealthCheckConfiguration) => {
-    if (editingConfig) {
-      updateMutation.mutate({ id: editingConfig.id, body: data });
-    } else {
-      createMutation.mutate(data);
-    }
-  };
-
-  const handleEditorClose = () => {
-    setIsEditorOpen(false);
-    setEditingConfig(undefined);
-  };
-
   return (
     <PageLayout
       title="Health Checks"
@@ -183,14 +144,6 @@ const HealthCheckConfigPageContent = () => {
         canManage={canManage}
       />
 
-      <HealthCheckEditor
-        open={isEditorOpen}
-        strategies={strategies}
-        initialData={editingConfig}
-        onSave={handleSave}
-        onCancel={handleEditorClose}
-      />
-
       <ConfirmationModal
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}

package/src/pages/HealthCheckIDEPage.tsx

@@ -0,0 +1,382 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import {
+  usePluginClient,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { HealthCheckApi } from "../api";
+import {
+  healthcheckRoutes,
+  type CollectorConfigEntry,
+} from "@checkstack/healthcheck-common";
+import { PageLayout, Button, useToast } from "@checkstack/ui";
+import { Save, Settings } from "lucide-react";
+import { resolveRoute } from "@checkstack/common";
+import { useCollectors } from "../hooks/useCollectors";
+import { EditorTree, type TreeNodeId } from "../components/editor/EditorTree";
+import { EditorPanel } from "../components/editor/EditorPanel";
+import { IDEStatusBar, type ValidationIssue } from "../components/editor/IDEStatusBar";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface EditorFormState {
+  name: string;
+  intervalSeconds: number;
+  strategyConfig: Record<string, unknown>;
+  collectors: CollectorConfigEntry[];
+}
+
+// =============================================================================
+// PAGE COMPONENT
+// =============================================================================
+
+const HealthCheckIDEPageContent = () => {
+  const { configId } = useParams<{ configId: string }>();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const toast = useToast();
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+
+  // "new" is a sentinel value used by the create flow
+  const isEditMode = !!configId && configId !== "new";
+  const strategyIdFromUrl = searchParams.get("strategy") ?? undefined;
+
+  // --- Data Fetching ---
+
+  // Fetch all strategies (needed for both modes)
+  const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
+    {},
+  );
+
+  // Fetch single configuration for edit mode
+  const { data: existingConfig, isLoading: configLoading } =
+    healthCheckClient.getConfiguration.useQuery(
+      { id: configId ?? "" },
+      { enabled: isEditMode },
+    );
+
+  // Determine the active strategy ID
+  const activeStrategyId = isEditMode
+    ? existingConfig?.strategyId
+    : strategyIdFromUrl;
+
+  const activeStrategy = useMemo(
+    () => strategies.find((s) => s.id === activeStrategyId),
+    [strategies, activeStrategyId],
+  );
+
+  // Fetch collectors for the active strategy
+  const { collectors: availableCollectors, loading: collectorsLoading } =
+    useCollectors(activeStrategyId ?? "");
+
+  // --- Form State ---
+
+  const [formState, setFormState] = useState<EditorFormState>({
+    name: "",
+    intervalSeconds: 60,
+    strategyConfig: {},
+    collectors: [],
+  });
+
+  const [selectedNode, setSelectedNode] = useState<TreeNodeId>("general");
+  const [strategyConfigValid, setStrategyConfigValid] = useState(true);
+  const [collectorsValidity, setCollectorsValidity] = useState<
+    Record<string, boolean>
+  >({});
+  const [isDirty, setIsDirty] = useState(false);
+
+  // Initialize form from existing configuration (edit mode)
+  useEffect(() => {
+    if (existingConfig) {
+      setFormState({
+        name: existingConfig.name,
+        intervalSeconds: existingConfig.intervalSeconds,
+        strategyConfig: existingConfig.config,
+        collectors: existingConfig.collectors ?? [],
+      });
+    }
+  }, [existingConfig]);
+
+  // Unsaved changes guard
+  useEffect(() => {
+    if (!isDirty) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty]);
+
+  // --- Update Handlers ---
+
+  const updateField = useCallback(
+    <K extends keyof EditorFormState>(field: K, value: EditorFormState[K]) => {
+      setFormState((prev) => ({ ...prev, [field]: value }));
+      setIsDirty(true);
+    },
+    [],
+  );
+
+  const handleCollectorAdd = useCallback(
+    (collectorId: string) => {
+      const collector = availableCollectors.find((c) => c.id === collectorId);
+      if (!collector) return;
+
+      const newEntry: CollectorConfigEntry = {
+        id: crypto.randomUUID(),
+        collectorId,
+        config: {},
+        assertions: [],
+      };
+
+      setFormState((prev) => ({
+        ...prev,
+        collectors: [...prev.collectors, newEntry],
+      }));
+      setIsDirty(true);
+
+      // Select the new collector in the tree
+      setSelectedNode(`collector:${newEntry.id}`);
+    },
+    [availableCollectors],
+  );
+
+  const handleCollectorRemove = useCallback(
+    (collectorEntryId: string) => {
+      setFormState((prev) => ({
+        ...prev,
+        collectors: prev.collectors.filter((c) => c.id !== collectorEntryId),
+      }));
+      setIsDirty(true);
+
+      // Navigate back to general if removing the selected collector
+      if (selectedNode === `collector:${collectorEntryId}`) {
+        setSelectedNode("general");
+      }
+    },
+    [selectedNode],
+  );
+
+  const handleCollectorConfigChange = useCallback(
+    (collectorEntryId: string, config: Record<string, unknown>) => {
+      setFormState((prev) => ({
+        ...prev,
+        collectors: prev.collectors.map((c) =>
+          c.id === collectorEntryId ? { ...c, config } : c,
+        ),
+      }));
+      setIsDirty(true);
+    },
+    [],
+  );
+
+  const handleCollectorAssertionsChange = useCallback(
+    (collectorEntryId: string, assertions: CollectorConfigEntry["assertions"]) => {
+      setFormState((prev) => ({
+        ...prev,
+        collectors: prev.collectors.map((c) =>
+          c.id === collectorEntryId ? { ...c, assertions } : c,
+        ),
+      }));
+      setIsDirty(true);
+    },
+    [],
+  );
+
+  const handleCollectorValidChange = useCallback(
+    (collectorEntryId: string, isValid: boolean) => {
+      setCollectorsValidity((prev) => ({ ...prev, [collectorEntryId]: isValid }));
+    },
+    [],
+  );
+
+  // --- Validation ---
+
+  const validationIssues = useMemo<ValidationIssue[]>(() => {
+    const issues: ValidationIssue[] = [];
+
+    if (!formState.name.trim()) {
+      issues.push({ nodeId: "general", message: "Name is required" });
+    }
+
+    if (formState.intervalSeconds < 1) {
+      issues.push({
+        nodeId: "general",
+        message: "Interval must be at least 1 second",
+      });
+    }
+
+    if (!strategyConfigValid) {
+      issues.push({
+        nodeId: "general",
+        message: "Strategy configuration is invalid",
+      });
+    }
+
+    for (const [entryId, isValid] of Object.entries(collectorsValidity)) {
+      if (!isValid) {
+        const collector = formState.collectors.find((c) => c.id === entryId);
+        const collectorDef = availableCollectors.find(
+          (c) => c.id === collector?.collectorId,
+        );
+        issues.push({
+          nodeId: `collector:${entryId}`,
+          message: `${collectorDef?.displayName ?? "Collector"} config is invalid`,
+        });
+      }
+    }
+
+    return issues;
+  }, [
+    formState.name,
+    formState.intervalSeconds,
+    formState.collectors,
+    strategyConfigValid,
+    collectorsValidity,
+    availableCollectors,
+  ]);
+
+  const isValid = validationIssues.length === 0;
+
+  // --- Save ---
+
+  const createMutation = healthCheckClient.createConfiguration.useMutation({
+    onSuccess: () => {
+      setIsDirty(false);
+      toast.success("Health check created");
+      navigate(resolveRoute(healthcheckRoutes.routes.config));
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to create");
+    },
+  });
+
+  const updateMutation = healthCheckClient.updateConfiguration.useMutation({
+    onSuccess: () => {
+      setIsDirty(false);
+      toast.success("Health check updated");
+      navigate(resolveRoute(healthcheckRoutes.routes.config));
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to update");
+    },
+  });
+
+  const handleSave = () => {
+    if (!isValid || !activeStrategyId) return;
+
+    const payload = {
+      name: formState.name,
+      strategyId: activeStrategyId,
+      config: formState.strategyConfig,
+      intervalSeconds: formState.intervalSeconds,
+      collectors: formState.collectors,
+    };
+
+    if (isEditMode && configId) {
+      updateMutation.mutate({ id: configId, body: payload });
+    } else {
+      createMutation.mutate(payload);
+    }
+  };
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  // --- Loading States ---
+
+  if (isEditMode && configLoading) {
+    return (
+      <PageLayout
+        title="Edit Health Check"
+        icon={Settings}
+        loading
+      >
+        <div />
+      </PageLayout>
+    );
+  }
+
+  if (isEditMode && !existingConfig && !configLoading) {
+    return (
+      <PageLayout
+        title="Health Check Not Found"
+        subtitle="The requested configuration could not be found."
+        icon={Settings}
+      >
+        <div className="text-center py-12 text-muted-foreground">
+          <p>This configuration may have been deleted.</p>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout
+      title={isEditMode ? `Edit: ${formState.name || "Unnamed"}` : "New Health Check"}
+      subtitle={activeStrategy?.displayName}
+      icon={Settings}
+      maxWidth="full"
+      actions={
+        <Button
+          onClick={handleSave}
+          disabled={!isValid || isSaving}
+        >
+          <Save className="mr-2 h-4 w-4" />
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+      }
+    >
+      <div className="flex flex-col lg:flex-row gap-0 min-h-[60vh] border rounded-lg bg-card overflow-hidden">
+        {/* Explorer Tree — Left Panel */}
+        <div className="w-full lg:w-64 shrink-0 border-b lg:border-b-0 lg:border-r bg-muted/30">
+          <EditorTree
+            collectors={formState.collectors}
+            availableCollectors={availableCollectors}
+            selectedNode={selectedNode}
+            onSelectNode={setSelectedNode}
+            onAddCollector={handleCollectorAdd}
+            validationIssues={validationIssues}
+            strategyId={activeStrategyId ?? ""}
+          />
+        </div>
+
+        {/* Editor Panel — Right Panel */}
+        <div className="flex-1 min-w-0">
+          <EditorPanel
+            selectedNode={selectedNode}
+            formState={formState}
+            strategy={activeStrategy}
+            availableCollectors={availableCollectors}
+            collectorsLoading={collectorsLoading}
+            isEditMode={isEditMode}
+            configId={configId}
+            onNameChange={(name) => updateField("name", name)}
+            onIntervalChange={(interval) =>
+              updateField("intervalSeconds", interval)
+            }
+            onStrategyConfigChange={(config) =>
+              updateField("strategyConfig", config)
+            }
+            onStrategyConfigValidChange={setStrategyConfigValid}
+            onCollectorConfigChange={handleCollectorConfigChange}
+            onCollectorAssertionsChange={handleCollectorAssertionsChange}
+            onCollectorValidChange={handleCollectorValidChange}
+            onCollectorRemove={handleCollectorRemove}
+            onCollectorAdd={handleCollectorAdd}
+            strategyId={activeStrategyId ?? ""}
+          />
+        </div>
+      </div>
+
+      {/* Status Bar */}
+      <IDEStatusBar
+        issues={validationIssues}
+        onIssueClick={(nodeId) => setSelectedNode(nodeId)}
+      />
+    </PageLayout>
+  );
+};
+
+export const HealthCheckIDEPage = wrapInSuspense(HealthCheckIDEPageContent);