@checkstack/healthcheck-frontend 0.0.3 → 0.2.0

package/src/components/CollectorList.tsx

@@ -0,0 +1,309 @@
+import React, { useState, useEffect, useCallback } from "react";
+import {
+  CollectorDto,
+  CollectorConfigEntry,
+} from "@checkstack/healthcheck-common";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  DynamicForm,
+  Badge,
+} from "@checkstack/ui";
+import { Plus, Trash2 } from "lucide-react";
+import { isBuiltInCollector } from "../hooks/useCollectors";
+import { AssertionBuilder, type Assertion } from "./AssertionBuilder";
+
+interface CollectorListProps {
+  strategyId: string;
+  availableCollectors: CollectorDto[];
+  configuredCollectors: CollectorConfigEntry[];
+  onChange: (collectors: CollectorConfigEntry[]) => void;
+  loading?: boolean;
+  /** Called when collector form validity changes */
+  onValidChange?: (isValid: boolean) => void;
+}
+
+/**
+ * Component for managing collector configurations within a health check.
+ * Shows currently configured collectors and allows adding new ones.
+ */
+export const CollectorList: React.FC<CollectorListProps> = ({
+  strategyId,
+  availableCollectors,
+  configuredCollectors,
+  onChange,
+  loading,
+  onValidChange,
+}) => {
+  // Track validity state per collector index
+  const [validityMap, setValidityMap] = useState<Record<number, boolean>>({});
+
+  // Compute overall validity and report changes
+  useEffect(() => {
+    if (!onValidChange) return;
+
+    // All collectors must be valid (or have no config schema)
+    const isValid = configuredCollectors.every((_, index) => {
+      // If no validity recorded for this collector, assume valid (no schema)
+      return validityMap[index] !== false;
+    });
+
+    onValidChange(isValid);
+  }, [validityMap, configuredCollectors, onValidChange]);
+
+  const handleCollectorValidChange = useCallback(
+    (index: number, isValid: boolean) => {
+      setValidityMap((prev) => ({ ...prev, [index]: isValid }));
+    },
+    []
+  );
+  // Separate built-in and external collectors
+  const builtInCollectors = availableCollectors.filter((c) =>
+    isBuiltInCollector(c.id, strategyId)
+  );
+  const externalCollectors = availableCollectors.filter(
+    (c) => !isBuiltInCollector(c.id, strategyId)
+  );
+
+  // Get collectors that can still be added
+  const getAddableCollectors = () => {
+    const configuredIds = new Set(
+      configuredCollectors.map((c) => c.collectorId)
+    );
+
+    return availableCollectors.filter((c) => {
+      // Already configured?
+      if (configuredIds.has(c.id)) {
+        // Can add multiple?
+        return c.allowMultiple;
+      }
+      return true;
+    });
+  };
+
+  const addableCollectors = getAddableCollectors();
+
+  const handleAdd = (collectorId: string) => {
+    const collector = availableCollectors.find((c) => c.id === collectorId);
+    if (!collector) return;
+
+    const newEntry: CollectorConfigEntry = {
+      id: crypto.randomUUID(),
+      collectorId,
+      config: {},
+      assertions: [],
+    };
+
+    onChange([...configuredCollectors, newEntry]);
+  };
+
+  const handleRemove = (index: number) => {
+    const updated = [...configuredCollectors];
+    updated.splice(index, 1);
+
+    // Reset validity map to prevent stale entries after index shift
+    // The DynamicForm components will re-report their validity on next render
+    setValidityMap({});
+
+    onChange(updated);
+  };
+
+  const handleConfigChange = (
+    index: number,
+    config: Record<string, unknown>
+  ) => {
+    const updated = [...configuredCollectors];
+    updated[index] = { ...updated[index], config };
+    onChange(updated);
+  };
+
+  const handleAssertionsChange = (index: number, assertions: Assertion[]) => {
+    const updated = [...configuredCollectors];
+    updated[index] = { ...updated[index], assertions };
+    onChange(updated);
+  };
+
+  const getCollectorDetails = (collectorId: string) => {
+    return availableCollectors.find((c) => c.id === collectorId);
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Check Items</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-muted-foreground text-sm">
+            Loading collectors...
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-base">Check Items</CardTitle>
+        {addableCollectors.length > 0 && (
+          <Select value="" onValueChange={handleAdd}>
+            <SelectTrigger className="w-[200px]">
+              <Plus className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Add collector..." />
+            </SelectTrigger>
+            <SelectContent>
+              {/* Built-in collectors first */}
+              {builtInCollectors.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    Built-in
+                  </div>
+                  {builtInCollectors
+                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
+                    .map((collector) => (
+                      <SelectItem key={collector.id} value={collector.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{collector.displayName}</span>
+                          {collector.allowMultiple && (
+                            <Badge variant="outline" className="text-xs">
+                              Multiple
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+              {/* External collectors */}
+              {externalCollectors.length > 0 && (
+                <>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    External
+                  </div>
+                  {externalCollectors
+                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
+                    .map((collector) => (
+                      <SelectItem key={collector.id} value={collector.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{collector.displayName}</span>
+                          {collector.allowMultiple && (
+                            <Badge variant="outline" className="text-xs">
+                              Multiple
+                            </Badge>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+        )}
+      </CardHeader>
+      <CardContent>
+        {configuredCollectors.length === 0 ? (
+          <div className="text-muted-foreground text-sm text-center py-4">
+            No check items configured. Add a collector to define what to check.
+          </div>
+        ) : (
+          <Accordion type="multiple" className="w-full">
+            {configuredCollectors.map((entry, index) => {
+              const collector = getCollectorDetails(entry.collectorId);
+              const isBuiltIn = isBuiltInCollector(
+                entry.collectorId,
+                strategyId
+              );
+
+              return (
+                <AccordionItem key={index} value={`item-${index}`}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-2 flex-1">
+                      <span className="font-medium">
+                        {collector?.displayName || entry.collectorId}
+                      </span>
+                      {isBuiltIn && (
+                        <Badge variant="secondary" className="text-xs">
+                          Built-in
+                        </Badge>
+                      )}
+                    </div>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="inline-flex items-center justify-center rounded-md h-8 w-8 text-destructive hover:text-destructive hover:bg-accent cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(index);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.stopPropagation();
+                          handleRemove(index);
+                        }
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="space-y-6 pt-4">
+                      {/* Configuration Section */}
+                      {collector?.configSchema && (
+                        <div className="space-y-4">
+                          <Label className="text-sm font-medium">
+                            Configuration
+                          </Label>
+                          <DynamicForm
+                            schema={collector.configSchema}
+                            value={entry.config}
+                            onChange={(config) =>
+                              handleConfigChange(index, config)
+                            }
+                            onValidChange={(isValid) =>
+                              handleCollectorValidChange(index, isValid)
+                            }
+                          />
+                        </div>
+                      )}
+
+                      {/* Assertion Builder Section */}
+                      {collector?.resultSchema && (
+                        <div className="space-y-4">
+                          <Label className="text-sm font-medium">
+                            Assertions
+                          </Label>
+                          <AssertionBuilder
+                            resultSchema={collector.resultSchema}
+                            assertions={
+                              (entry.assertions as unknown as Assertion[]) ?? []
+                            }
+                            onChange={(assertions) =>
+                              handleAssertionsChange(index, assertions)
+                            }
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/HealthCheckEditor.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   HealthCheckConfiguration,
   HealthCheckStrategyDto,
   CreateHealthCheckConfiguration,
+  CollectorConfigEntry,
 } from "@checkstack/healthcheck-common";
 import {
   Button,
@@ -12,10 +13,14 @@ import {
   useToast,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
 } from "@checkstack/ui";
+import { useCollectors } from "../hooks/useCollectors";
+import { CollectorList } from "./CollectorList";
+import { TeamAccessEditor } from "@checkstack/auth-frontend";
 
 interface HealthCheckEditorProps {
   strategies: HealthCheckStrategyDto[];
@@ -40,20 +45,36 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
   const [config, setConfig] = useState<Record<string, unknown>>(
     (initialData?.config as Record<string, unknown>) || {}
   );
+  const [collectors, setCollectors] = useState<CollectorConfigEntry[]>(
+    initialData?.collectors || []
+  );
 
   const toast = useToast();
   const [loading, setLoading] = useState(false);
+  const [collectorsValid, setCollectorsValid] = useState(true);
+
+  // Fetch available collectors for the selected strategy
+  const { collectors: availableCollectors, loading: collectorsLoading } =
+    useCollectors(strategyId);
 
   // Reset form when dialog opens with new data
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setName(initialData?.name || "");
       setStrategyId(initialData?.strategyId || "");
       setInterval(initialData?.intervalSeconds?.toString() || "60");
       setConfig((initialData?.config as Record<string, unknown>) || {});
+      setCollectors(initialData?.collectors || []);
     }
   }, [open, initialData]);
 
+  // Clear collectors when strategy changes (new strategy = different collectors)
+  const handleStrategyChange = (id: string) => {
+    setStrategyId(id);
+    setConfig({});
+    setCollectors([]);
+  };
+
   const handleSave = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -63,6 +84,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
         strategyId,
         intervalSeconds: Number.parseInt(interval, 10),
         config,
+        collectors, // Always send the array, even if empty, to allow clearing
       });
     } catch (error) {
       const message =
@@ -82,9 +104,14 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
             <DialogTitle>
               {initialData ? "Edit Health Check" : "Create Health Check"}
             </DialogTitle>
+            <DialogDescription className="sr-only">
+              {initialData
+                ? "Modify the settings for this health check configuration"
+                : "Configure a new health check to monitor your services"}
+            </DialogDescription>
           </DialogHeader>
 
-          <div className="space-y-4 py-4">
+          <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto">
             <div className="space-y-2">
               <Label htmlFor="name">Name</Label>
               <Input
@@ -111,21 +138,40 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
               label="Strategy"
               plugins={strategies}
               selectedPluginId={strategyId}
-              onPluginChange={(id) => {
-                setStrategyId(id);
-                setConfig({});
-              }}
+              onPluginChange={handleStrategyChange}
               config={config}
               onConfigChange={setConfig}
               disabled={!!initialData}
             />
+
+            {/* Collector Configuration Section */}
+            {strategyId && (
+              <CollectorList
+                strategyId={strategyId}
+                availableCollectors={availableCollectors}
+                configuredCollectors={collectors}
+                onChange={setCollectors}
+                loading={collectorsLoading}
+                onValidChange={setCollectorsValid}
+              />
+            )}
+
+            {/* Team Access Editor - only shown for existing configurations */}
+            {initialData?.id && (
+              <TeamAccessEditor
+                resourceType="healthcheck.configuration"
+                resourceId={initialData.id}
+                compact
+                expanded
+              />
+            )}
           </div>
 
           <DialogFooter>
             <Button type="button" variant="outline" onClick={onCancel}>
               Cancel
             </Button>
-            <Button type="submit" disabled={loading}>
+            <Button type="submit" disabled={loading || !collectorsValid}>
               {loading ? "Saving..." : "Save"}
             </Button>
           </DialogFooter>

package/src/components/HealthCheckRunsTable.tsx

@@ -153,12 +153,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                         colSpan={calculatedColSpan}
                         className="bg-muted/30 p-4"
                       >
-                        <div className="space-y-2">
-                          <h4 className="text-sm font-medium">Result Data</h4>
-                          <pre className="text-xs bg-card rounded-md p-3 overflow-auto max-h-64 border">
-                            {JSON.stringify(run.result, undefined, 2)}
-                          </pre>
-                        </div>
+                        <ExpandedResultView result={run.result} />
                       </TableCell>
                     </TableRow>
                   )}
@@ -185,3 +180,144 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     </>
   );
 };
+
+// =============================================================================
+// EXPANDED RESULT VIEW
+// =============================================================================
+
+interface ExpandedResultViewProps {
+  result: Record<string, unknown>;
+}
+
+/**
+ * Displays the result data in a structured format.
+ * Shows collector results as cards with key-value pairs.
+ */
+function ExpandedResultView({ result }: ExpandedResultViewProps) {
+  const metadata = result.metadata as Record<string, unknown> | undefined;
+  const rawCollectors = metadata?.collectors;
+
+  // Type guard for collectors object
+  const collectors: Record<string, Record<string, unknown>> | undefined =
+    rawCollectors &&
+    typeof rawCollectors === "object" &&
+    !Array.isArray(rawCollectors)
+      ? (rawCollectors as Record<string, Record<string, unknown>>)
+      : undefined;
+
+  // Check if we have collectors to display
+  const collectorEntries = collectors ? Object.entries(collectors) : [];
+
+  // Extract connection time as typed value
+  const connectionTimeMs = metadata?.connectionTimeMs as number | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">Status: </span>
+          <span className="font-medium">{String(result.status)}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Latency: </span>
+          <span className="font-medium">{String(result.latencyMs)}ms</span>
+        </div>
+        {connectionTimeMs !== undefined && (
+          <div>
+            <span className="text-muted-foreground">Connection: </span>
+            <span className="font-medium">{connectionTimeMs}ms</span>
+          </div>
+        )}
+      </div>
+
+      {collectorEntries.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Collector Results</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {collectorEntries.map(([collectorId, collectorResult]) => (
+              <CollectorResultCard
+                key={collectorId}
+                collectorId={collectorId}
+                result={collectorResult}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {result.message ? (
+        <div className="text-sm text-muted-foreground">
+          {String(result.message)}
+        </div>
+      ) : undefined}
+    </div>
+  );
+}
+
+interface CollectorResultCardProps {
+  collectorId: string;
+  result: Record<string, unknown>;
+}
+
+/**
+ * Card displaying a single collector's result values.
+ */
+function CollectorResultCard({
+  collectorId,
+  result,
+}: CollectorResultCardProps) {
+  if (!result || typeof result !== "object") {
+    return;
+  }
+
+  // Filter out null/undefined values
+  const entries = Object.entries(result).filter(
+    ([, value]) => value !== null && value !== undefined
+  );
+
+  return (
+    <div className="rounded-md border bg-card p-3 space-y-2">
+      <h5 className="text-sm font-medium text-primary">{collectorId}</h5>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
+        {entries.map(([key, value]) => (
+          <div key={key} className="contents">
+            <span className="text-muted-foreground truncate">
+              {formatKey(key)}
+            </span>
+            <span className="font-mono text-xs truncate" title={String(value)}>
+              {formatValue(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Format a camelCase key to a readable label.
+ */
+function formatKey(key: string): string {
+  return key
+    .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/^./, (c) => c.toUpperCase());
+}
+
+/**
+ * Format a value for display.
+ */
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+  }
+  if (Array.isArray(value)) {
+    return value.length > 3
+      ? `[${value.slice(0, 3).join(", ")}…]`
+      : `[${value.join(", ")}]`;
+  }
+  if (typeof value === "object") return JSON.stringify(value);
+  const str = String(value);
+  return str.length > 50 ? `${str.slice(0, 47)}…` : str;
+}

package/src/components/SystemHealthCheckAssignment.tsx

@@ -9,6 +9,7 @@ import {
   Button,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -79,10 +80,11 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
   const loadData = async () => {
     setLoading(true);
     try {
-      const [allConfigs, systemAssociations] = await Promise.all([
-        api.getConfigurations(),
-        api.getSystemAssociations({ systemId }),
-      ]);
+      const [{ configurations: allConfigs }, systemAssociations] =
+        await Promise.all([
+          api.getConfigurations(),
+          api.getSystemAssociations({ systemId }),
+        ]);
       setConfigs(allConfigs);
       setAssociations(systemAssociations);
     } catch (error) {
@@ -741,6 +743,9 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
         <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Health Check Assignments</DialogTitle>
+            <DialogDescription className="sr-only">
+              Manage health check assignments for this system
+            </DialogDescription>
           </DialogHeader>
 
           {loading ? (

package/src/hooks/useCollectors.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "react";
+import { useApi } from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import { CollectorDto } from "@checkstack/healthcheck-common";
+
+interface UseCollectorsResult {
+  collectors: CollectorDto[];
+  loading: boolean;
+  error: Error | undefined;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Hook to fetch collectors for a given strategy.
+ * @param strategyId - The strategy ID to fetch collectors for
+ */
+export function useCollectors(strategyId: string): UseCollectorsResult {
+  const api = useApi(healthCheckApiRef);
+  const [collectors, setCollectors] = useState<CollectorDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+
+  const refetch = useCallback(async () => {
+    if (!strategyId) {
+      setCollectors([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(undefined);
+    try {
+      const result = await api.getCollectors({ strategyId });
+      setCollectors(result);
+    } catch (error_) {
+      setError(
+        error_ instanceof Error
+          ? error_
+          : new Error("Failed to fetch collectors")
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [api, strategyId]);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  return { collectors, loading, error, refetch };
+}
+
+/**
+ * Check if a collector is built-in for a given strategy.
+ * Built-in collectors are those registered by the same plugin as the strategy.
+ */
+export function isBuiltInCollector(
+  collectorId: string,
+  strategyId: string
+): boolean {
+  // Collector ID format: ownerPluginId.collectorId
+  // Strategy ID typically equals its plugin ID
+  return collectorId.startsWith(`${strategyId}.`);
+}