@checkstack/healthcheck-frontend 0.11.8 → 0.12.1

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, extractErrorMessage} 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(extractErrorMessage(error, "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(extractErrorMessage(error, "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);

package/src/pages/StrategyPickerPage.tsx

@@ -0,0 +1,157 @@
+import { useState, useMemo } from "react";
+import {
+  usePluginClient,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { HealthCheckApi } from "../api";
+import {
+  healthcheckRoutes,
+  STRATEGY_CATEGORY_META,
+  type StrategyCategory,
+  type HealthCheckStrategyDto,
+} from "@checkstack/healthcheck-common";
+import {
+  PageLayout,
+  Input,
+  Badge,
+} from "@checkstack/ui";
+import { Search, Zap } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { resolveRoute } from "@checkstack/common";
+
+/**
+ * Card component for a single strategy in the picker grid.
+ */
+function StrategyCard({
+  strategy,
+  onSelect,
+}: {
+  strategy: HealthCheckStrategyDto;
+  onSelect: (strategy: HealthCheckStrategyDto) => void;
+}) {
+  const categoryMeta = STRATEGY_CATEGORY_META[strategy.category];
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(strategy)}
+      className="group flex flex-col items-start gap-2 rounded-lg border bg-card p-4 text-left transition-all hover:border-primary/50 hover:shadow-md hover:shadow-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <div className="flex w-full items-center justify-between">
+        <h3 className="font-semibold text-sm group-hover:text-primary transition-colors">
+          {strategy.displayName}
+        </h3>
+        <Badge variant="outline" className="text-[10px] shrink-0">
+          {categoryMeta?.label ?? strategy.category}
+        </Badge>
+      </div>
+      {strategy.description && (
+        <p className="text-xs text-muted-foreground line-clamp-2">
+          {strategy.description}
+        </p>
+      )}
+    </button>
+  );
+}
+
+/**
+ * Strategy Picker Page — full-page card grid grouped by category.
+ * Acts as the first step of the "Create Health Check" wizard flow.
+ */
+const StrategyPickerPageContent = () => {
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
+    {},
+  );
+
+  // Group strategies by category and filter by search
+  const groupedStrategies = useMemo(() => {
+    const filtered = strategies.filter((s) => {
+      const query = searchQuery.toLowerCase();
+      if (!query) return true;
+      return (
+        s.displayName.toLowerCase().includes(query) ||
+        (s.description?.toLowerCase().includes(query) ?? false)
+      );
+    });
+
+    // Group by category
+    const groups = new Map<StrategyCategory, HealthCheckStrategyDto[]>();
+    for (const strategy of filtered) {
+      const category = strategy.category;
+      const existing = groups.get(category) ?? [];
+      existing.push(strategy);
+      groups.set(category, existing);
+    }
+
+    // Sort groups by category sort order
+    return [...groups.entries()].toSorted(([a], [b]) => {
+      const orderA = STRATEGY_CATEGORY_META[a]?.sortOrder ?? 99;
+      const orderB = STRATEGY_CATEGORY_META[b]?.sortOrder ?? 99;
+      return orderA - orderB;
+    });
+  }, [strategies, searchQuery]);
+
+  const handleSelectStrategy = (strategy: HealthCheckStrategyDto) => {
+    navigate(
+      `${resolveRoute(healthcheckRoutes.routes.edit, { configId: "new" })}?strategy=${encodeURIComponent(strategy.id)}`,
+    );
+  };
+
+  return (
+    <PageLayout
+      title="Create Health Check"
+      subtitle="Choose a strategy to get started"
+      icon={Zap}
+      actions={
+        <div className="relative w-full max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search strategies..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+      }
+    >
+      {groupedStrategies.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+          <Search className="h-8 w-8 mb-3 opacity-40" />
+          <p className="text-sm">
+            {searchQuery
+              ? "No strategies match your search."
+              : "No strategies available."}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {groupedStrategies.map(([category, categoryStrategies]) => {
+            const meta = STRATEGY_CATEGORY_META[category];
+            return (
+              <section key={category}>
+                <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                  {meta?.label ?? category}
+                </h2>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  {categoryStrategies.map((strategy) => (
+                    <StrategyCard
+                      key={strategy.id}
+                      strategy={strategy}
+                      onSelect={handleSelectStrategy}
+                    />
+                  ))}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      )}
+    </PageLayout>
+  );
+};
+
+export const StrategyPickerPage = wrapInSuspense(StrategyPickerPageContent);