@checkstack/healthcheck-frontend 0.11.8 → 0.12.1

package/src/components/editor/EditorTree.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from "react";
+import type {
+  CollectorConfigEntry,
+  CollectorDto,
+} from "@checkstack/healthcheck-common";
+import { Plus, Settings, Shield, ChevronRight } from "lucide-react";
+import { isBuiltInCollector } from "../../hooks/useCollectors";
+import type { ValidationIssue } from "./IDEStatusBar";
+import { Badge } from "@checkstack/ui";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type TreeNodeId =
+  | "general"
+  | "access"
+  | "collector-picker"
+  | `collector:${string}`;
+
+interface EditorTreeProps {
+  collectors: CollectorConfigEntry[];
+  availableCollectors: CollectorDto[];
+  selectedNode: TreeNodeId;
+  onSelectNode: (nodeId: TreeNodeId) => void;
+  onAddCollector: (collectorId: string) => void;
+  validationIssues: ValidationIssue[];
+  strategyId: string;
+}
+
+// =============================================================================
+// VALIDATION INDICATOR
+// =============================================================================
+
+function ValidationDot({ nodeId, issues }: { nodeId: string; issues: ValidationIssue[] }) {
+  const nodeIssues = issues.filter((i) => i.nodeId === nodeId);
+  if (nodeIssues.length === 0) return;
+
+  return (
+    <span className="ml-auto flex h-2 w-2 rounded-full bg-destructive shrink-0" />
+  );
+}
+
+// =============================================================================
+// TREE NODE
+// =============================================================================
+
+function TreeNode({
+  nodeId,
+  label,
+  icon: Icon,
+  selected,
+  onClick,
+  issues,
+  indent = false,
+  badge,
+}: {
+  nodeId: string;
+  label: string;
+  icon: React.ElementType;
+  selected: boolean;
+  onClick: () => void;
+  issues: ValidationIssue[];
+  indent?: boolean;
+  badge?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors ${
+        indent ? "pl-7" : ""
+      } ${
+        selected
+          ? "bg-primary/10 text-primary border-l-2 border-primary"
+          : "hover:bg-muted/50 border-l-2 border-transparent"
+      }`}
+    >
+      <Icon className="h-4 w-4 shrink-0 opacity-60" />
+      <span className="truncate flex-1">{label}</span>
+      {badge && (
+        <Badge variant="secondary" className="text-[10px] shrink-0">
+          {badge}
+        </Badge>
+      )}
+      <ValidationDot nodeId={nodeId} issues={issues} />
+    </button>
+  );
+}
+
+// =============================================================================
+// EDITOR TREE
+// =============================================================================
+
+export const EditorTree: React.FC<EditorTreeProps> = ({
+  collectors,
+  availableCollectors,
+  selectedNode,
+  onSelectNode,
+  validationIssues,
+  strategyId,
+}) => {
+  // Check if there are addable collectors remaining
+  const hasAddableCollectors = useMemo(() => {
+    const configuredIds = new Set(collectors.map((c) => c.collectorId));
+    return availableCollectors.some(
+      (c) => !configuredIds.has(c.id) || c.allowMultiple,
+    );
+  }, [collectors, availableCollectors]);
+
+  return (
+    <div className="py-2">
+      {/* General */}
+      <TreeNode
+        nodeId="general"
+        label="General"
+        icon={Settings}
+        selected={selectedNode === "general"}
+        onClick={() => onSelectNode("general")}
+        issues={validationIssues}
+      />
+
+      {/* Collectors Section Header */}
+      <div className="px-3 pt-4 pb-1">
+        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+          Check Items
+        </span>
+      </div>
+
+      {/* Configured Collectors */}
+      {collectors.map((entry) => {
+        const collector = availableCollectors.find(
+          (c) => c.id === entry.collectorId,
+        );
+        const builtIn = isBuiltInCollector(entry.collectorId, strategyId);
+
+        return (
+          <TreeNode
+            key={entry.id}
+            nodeId={`collector:${entry.id}`}
+            label={collector?.displayName ?? entry.collectorId}
+            icon={ChevronRight}
+            selected={selectedNode === `collector:${entry.id}`}
+            onClick={() => onSelectNode(`collector:${entry.id}`)}
+            issues={validationIssues}
+            indent
+            badge={builtIn ? "Built-in" : undefined}
+          />
+        );
+      })}
+
+      {/* Add Collector Button */}
+      {hasAddableCollectors && (
+        <button
+          type="button"
+          onClick={() => onSelectNode("collector-picker")}
+          className={`flex items-center gap-2 w-full px-3 py-2 pl-7 text-sm text-left transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/50 border-l-2 ${
+            selectedNode === "collector-picker"
+              ? "border-primary bg-primary/10 text-primary"
+              : "border-transparent"
+          }`}
+        >
+          <Plus className="h-4 w-4 shrink-0" />
+          <span className="truncate">Add check item...</span>
+        </button>
+      )}
+
+      {/* Access Control */}
+      <div className="px-3 pt-4 pb-1">
+        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+          Permissions
+        </span>
+      </div>
+
+      <TreeNode
+        nodeId="access"
+        label="Access Control"
+        icon={Shield}
+        selected={selectedNode === "access"}
+        onClick={() => onSelectNode("access")}
+        issues={validationIssues}
+      />
+    </div>
+  );
+};

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/hooks/useCollectors.ts

@@ -26,7 +26,7 @@ export function useCollectors(strategyId: string): UseCollectorsResult {
   );
 
   const collectors = data ?? [];
-  const error = queryError instanceof Error ? queryError : undefined;
+  const error = queryError ?? undefined;
 
   return {
     collectors,

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,
@@ -23,12 +21,14 @@ import {
 } from "@checkstack/ui";
 import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
-import { resolveRoute } from "@checkstack/common";
+import { resolveRoute, extractErrorMessage} 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);
@@ -96,7 +70,7 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to delete");
+      toast.error(extractErrorMessage(error, "Failed to delete"));
     },
   });
 
@@ -105,7 +79,7 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to pause");
+      toast.error(extractErrorMessage(error, "Failed to pause"));
     },
   });
 
@@ -114,18 +88,18 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "Failed to resume");
+      toast.error(extractErrorMessage(error, "Failed to resume"));
     },
   });
 
   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)}