@checkstack/healthcheck-frontend 0.0.2 → 0.1.0

package/src/auto-charts/schema-parser.ts

@@ -3,27 +3,38 @@
  *
  * Parses JSON Schema objects and extracts x-chart-type, x-chart-label,
  * and x-chart-unit metadata for auto-chart rendering.
+ *
+ * Supports nested schemas under `collectors.*` for per-collector metrics.
  */
 
+import type { ChartType } from "@checkstack/healthcheck-common";
+import type {
+  JsonSchemaPropertyCore,
+  JsonSchemaBase,
+} from "@checkstack/common";
+
 /**
- * Available chart types for auto-generated visualizations.
- * Mirrors the backend ChartType but defined locally since frontend
- * cannot import from backend-api.
+ * JSON Schema property with healthcheck result-specific x-* extensions.
+ * Uses the generic core type for proper recursive typing.
  */
-export type ChartType =
-  | "line"
-  | "bar"
-  | "counter"
-  | "gauge"
-  | "boolean"
-  | "text"
-  | "status";
+export interface ResultSchemaProperty
+  extends JsonSchemaPropertyCore<ResultSchemaProperty> {
+  // Result-specific x-* extensions for chart rendering
+  "x-chart-type"?: ChartType;
+  "x-chart-label"?: string;
+  "x-chart-unit"?: string;
+}
+
+/**
+ * JSON Schema for result schemas with chart metadata.
+ */
+export type ResultSchema = JsonSchemaBase<ResultSchemaProperty>;
 
 /**
  * Chart field information extracted from JSON Schema.
  */
 export interface ChartField {
-  /** Field name in the schema */
+  /** Field path (supports dot notation for nested fields like "collectors.request.responseTimeMs") */
   name: string;
   /** Chart type to render */
   chartType: ChartType;
@@ -33,33 +44,15 @@ export interface ChartField {
   unit?: string;
   /** JSON Schema type (number, string, boolean, etc.) */
   schemaType: string;
-}
-
-/**
- * JSON Schema property with potential chart metadata.
- */
-interface JsonSchemaProperty {
-  type?: string;
-  "x-chart-type"?: ChartType;
-  "x-chart-label"?: string;
-  "x-chart-unit"?: string;
-  items?: JsonSchemaProperty;
-  additionalProperties?: JsonSchemaProperty;
-}
-
-/**
- * JSON Schema object structure.
- */
-interface JsonSchema {
-  type?: string;
-  properties?: Record<string, JsonSchemaProperty>;
+  /** Collector ID if this field is from a collector */
+  collectorId?: string;
 }
 
 /**
  * Extract chart fields from a JSON Schema.
  *
  * Looks for properties with x-chart-type metadata and extracts
- * relevant chart configuration.
+ * relevant chart configuration. Supports nested collector schemas.
  *
  * @param schema - JSON Schema object
  * @returns Array of chart fields with metadata
@@ -69,41 +62,102 @@ export function extractChartFields(
 ): ChartField[] {
   if (!schema) return [];
 
-  const typed = schema as JsonSchema;
+  const typed = schema as ResultSchema;
   if (typed.type !== "object" || !typed.properties) return [];
 
   const fields: ChartField[] = [];
 
   for (const [name, prop] of Object.entries(typed.properties)) {
+    // Check for nested collector schemas
+    if (name === "collectors" && prop.type === "object" && prop.properties) {
+      // Traverse each collector's schema
+      for (const [collectorId, collectorProp] of Object.entries(
+        prop.properties
+      )) {
+        if (collectorProp.type === "object" && collectorProp.properties) {
+          // Extract fields from the collector's result schema
+          const collectorFields = extractFieldsFromProperties(
+            collectorProp.properties,
+            `collectors.${collectorId}`,
+            collectorId
+          );
+          fields.push(...collectorFields);
+        }
+      }
+      continue;
+    }
+
     const chartType = prop["x-chart-type"];
     if (!chartType) continue;
 
-    // Determine the underlying schema type
-    let schemaType = prop.type ?? "unknown";
-    if (prop.type === "array" && prop.items?.type) {
-      schemaType = `array<${prop.items.type}>`;
-    }
-    if (prop.additionalProperties?.type) {
-      schemaType = `record<${prop.additionalProperties.type}>`;
-    }
+    fields.push(extractSingleField(name, prop));
+  }
 
-    fields.push({
-      name,
-      chartType,
-      label: prop["x-chart-label"] ?? formatFieldName(name),
-      unit: prop["x-chart-unit"],
-      schemaType,
-    });
+  return fields;
+}
+
+/**
+ * Extract fields from a nested properties object.
+ */
+function extractFieldsFromProperties(
+  properties: Record<string, ResultSchemaProperty>,
+  pathPrefix: string,
+  collectorId: string
+): ChartField[] {
+  const fields: ChartField[] = [];
+
+  for (const [fieldName, prop] of Object.entries(properties)) {
+    const chartType = prop["x-chart-type"];
+    if (!chartType) continue;
+
+    const fullPath = `${pathPrefix}.${fieldName}`;
+    const field = extractSingleField(fullPath, prop);
+    field.collectorId = collectorId;
+    // Prefix label with collector ID for clarity
+    if (!prop["x-chart-label"]?.includes(collectorId)) {
+      field.label = `${collectorId}: ${field.label}`;
+    }
+    fields.push(field);
   }
 
   return fields;
 }
 
+/**
+ * Extract a single field from a property.
+ */
+function extractSingleField(
+  name: string,
+  prop: ResultSchemaProperty
+): ChartField {
+  let schemaType = prop.type ?? "unknown";
+  if (prop.type === "array" && prop.items?.type) {
+    schemaType = `array<${prop.items.type}>`;
+  }
+  if (
+    prop.additionalProperties &&
+    typeof prop.additionalProperties === "object" &&
+    prop.additionalProperties.type
+  ) {
+    schemaType = `record<${prop.additionalProperties.type}>`;
+  }
+
+  return {
+    name,
+    chartType: prop["x-chart-type"]!,
+    label: prop["x-chart-label"] ?? formatFieldName(name),
+    unit: prop["x-chart-unit"],
+    schemaType,
+  };
+}
+
 /**
  * Convert camelCase or snake_case field name to human-readable label.
  */
 function formatFieldName(name: string): string {
-  return name
+  // Extract just the field name if it's a path
+  const baseName = name.includes(".") ? name.split(".").pop()! : name;
+  return baseName
     .replaceAll(/([a-z])([A-Z])/g, "$1 $2") // camelCase
     .replaceAll("_", " ") // snake_case
     .replaceAll(/\b\w/g, (c) => c.toUpperCase()); // Capitalize
@@ -111,11 +165,28 @@ function formatFieldName(name: string): string {
 
 /**
  * Get the value for a field from a data object.
+ * Supports dot-notation paths like "collectors.request.responseTimeMs".
  */
 export function getFieldValue(
   data: Record<string, unknown> | undefined,
   fieldName: string
 ): unknown {
   if (!data) return undefined;
-  return data[fieldName];
+
+  // Simple case: no dot notation
+  if (!fieldName.includes(".")) {
+    return data[fieldName];
+  }
+
+  // Dot notation: traverse the path
+  const parts = fieldName.split(".");
+  let current: unknown = data;
+
+  for (const part of parts) {
+    if (current === null || current === undefined) return undefined;
+    if (typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+
+  return current;
 }

package/src/components/AssertionBuilder.tsx

@@ -0,0 +1,425 @@
+import React, { useMemo } from "react";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Input,
+} from "@checkstack/ui";
+import type {
+  JsonSchemaBase,
+  JsonSchemaPropertyBase,
+} from "@checkstack/common";
+import { Plus, Trash2 } from "lucide-react";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+// Use base types for assertion building - works with any JSON Schema
+type JsonSchema = JsonSchemaBase<JsonSchemaPropertyBase>;
+type JsonSchemaProperty = JsonSchemaPropertyBase;
+
+type FieldType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "enum"
+  | "array"
+  | "jsonpath";
+
+export interface AssertableField {
+  path: string;
+  displayName: string;
+  type: FieldType;
+  enumValues?: unknown[];
+  /** For jsonpath fields, the original field path (e.g., "body") */
+  sourceField?: string;
+}
+
+export interface Assertion {
+  field: string;
+  operator: string;
+  value?: unknown;
+  /** JSONPath expression for jsonpath-type fields */
+  jsonPath?: string;
+}
+
+interface AssertionBuilderProps {
+  resultSchema: JsonSchema;
+  assertions: Assertion[];
+  onChange: (assertions: Assertion[]) => void;
+}
+
+// ============================================================================
+// OPERATORS BY FIELD TYPE
+// ============================================================================
+
+const OPERATORS: Record<FieldType, { value: string; label: string }[]> = {
+  string: [
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "contains", label: "Contains" },
+    { value: "startsWith", label: "Starts With" },
+    { value: "endsWith", label: "Ends With" },
+    { value: "matches", label: "Matches (Regex)" },
+    { value: "isEmpty", label: "Is Empty" },
+  ],
+  number: [
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "lessThan", label: "Less Than" },
+    { value: "lessThanOrEqual", label: "Less Than or Equal" },
+    { value: "greaterThan", label: "Greater Than" },
+    { value: "greaterThanOrEqual", label: "Greater Than or Equal" },
+  ],
+  boolean: [
+    { value: "isTrue", label: "Is True" },
+    { value: "isFalse", label: "Is False" },
+  ],
+  enum: [{ value: "equals", label: "Equals" }],
+  array: [
+    { value: "exists", label: "Exists" },
+    { value: "notExists", label: "Not Exists" },
+  ],
+  jsonpath: [
+    { value: "exists", label: "Exists" },
+    { value: "notExists", label: "Not Exists" },
+    { value: "equals", label: "Equals" },
+    { value: "notEquals", label: "Not Equals" },
+    { value: "contains", label: "Contains" },
+    { value: "greaterThan", label: "Greater Than" },
+    { value: "lessThan", label: "Less Than" },
+  ],
+};
+
+// Operators that don't need a value input
+const VALUE_LESS_OPERATORS = new Set([
+  "isEmpty",
+  "isTrue",
+  "isFalse",
+  "exists",
+  "notExists",
+]);
+
+// ============================================================================
+// SCHEMA EXTRACTION
+// ============================================================================
+
+/**
+ * Extract assertable fields from a JSON Schema, supporting nested objects.
+ * Reuses the JsonSchemaProperty type from @checkstack/ui DynamicForm.
+ */
+export function extractAssertableFields(
+  schema: JsonSchema,
+  prefix = ""
+): AssertableField[] {
+  const fields: AssertableField[] = [];
+
+  if (!schema.properties) return fields;
+
+  for (const [key, prop] of Object.entries(schema.properties)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    const displayName = path
+      .split(".")
+      .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+      .join(" → ");
+
+    // Handle enum type
+    if (prop.enum && prop.enum.length > 0) {
+      fields.push({
+        path,
+        displayName,
+        type: "enum",
+        enumValues: prop.enum,
+      });
+      continue;
+    }
+
+    // Determine type (handle type arrays like ["string", "null"] if present)
+    const type = prop.type;
+
+    switch (type) {
+      case "string": {
+        // Check for x-jsonpath metadata
+        const hasJsonPath =
+          (prop as Record<string, unknown>)["x-jsonpath"] === true;
+        if (hasJsonPath) {
+          fields.push({
+            path: `${path}.$`,
+            displayName: `${displayName} (JSONPath)`,
+            type: "jsonpath",
+            sourceField: path,
+          });
+        }
+        fields.push({ path, displayName, type: "string" });
+        break;
+      }
+      case "number":
+      case "integer": {
+        fields.push({ path, displayName, type: "number" });
+        break;
+      }
+      case "boolean": {
+        fields.push({ path, displayName, type: "boolean" });
+        break;
+      }
+      case "array": {
+        // Add array-level assertions
+        fields.push({ path, displayName, type: "array" });
+        // If array has typed items with properties, add item-level fields
+        if (
+          prop.items &&
+          typeof prop.items === "object" &&
+          "properties" in prop.items
+        ) {
+          const itemsWithProps = prop.items as JsonSchemaProperty;
+          if (itemsWithProps.properties) {
+            const itemFields = extractAssertableFields(
+              { properties: itemsWithProps.properties },
+              `${path}[*]`
+            );
+            fields.push(...itemFields);
+          }
+        }
+        break;
+      }
+      case "object": {
+        // Recurse into nested objects
+        if (prop.properties) {
+          const nestedFields = extractAssertableFields(
+            { properties: prop.properties },
+            path
+          );
+          fields.push(...nestedFields);
+        }
+        break;
+      }
+      default: {
+        // Unknown type - treat as string for flexibility
+        if (type) {
+          fields.push({ path, displayName, type: "string" });
+        }
+      }
+    }
+  }
+
+  return fields;
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * AssertionBuilder component for creating assertions based on JSON Schema.
+ * Automatically derives available fields and operators from the result schema.
+ */
+export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
+  resultSchema,
+  assertions,
+  onChange,
+}) => {
+  // Extract assertable fields from schema
+  const fields = useMemo(
+    () => extractAssertableFields(resultSchema),
+    [resultSchema]
+  );
+
+  const getFieldByPath = (path: string) => {
+    return fields.find((f) => f.path === path);
+  };
+
+  const handleAddAssertion = () => {
+    if (fields.length === 0) return;
+
+    const firstField = fields[0];
+    const operators = OPERATORS[firstField.type];
+
+    onChange([
+      ...assertions,
+      {
+        field: firstField.path,
+        operator: operators[0].value,
+        value: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveAssertion = (index: number) => {
+    const updated = [...assertions];
+    updated.splice(index, 1);
+    onChange(updated);
+  };
+
+  const handleFieldChange = (index: number, fieldPath: string) => {
+    const field = getFieldByPath(fieldPath);
+    if (!field) return;
+
+    const operators = OPERATORS[field.type];
+    const updated = [...assertions];
+    updated[index] = {
+      field: fieldPath,
+      operator: operators[0].value,
+      value: undefined,
+    };
+    onChange(updated);
+  };
+
+  const handleOperatorChange = (index: number, operator: string) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], operator };
+    // Clear value if operator doesn't need one
+    if (VALUE_LESS_OPERATORS.has(operator)) {
+      updated[index].value = undefined;
+    }
+    onChange(updated);
+  };
+
+  const handleValueChange = (index: number, value: unknown) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], value };
+    onChange(updated);
+  };
+
+  const handleJsonPathChange = (index: number, jsonPath: string) => {
+    const updated = [...assertions];
+    updated[index] = { ...updated[index], jsonPath };
+    onChange(updated);
+  };
+
+  if (fields.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm">
+        No assertable fields available in result schema.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {assertions.map((assertion, index) => {
+        const field = getFieldByPath(assertion.field);
+        const operators = field ? OPERATORS[field.type] : [];
+        const needsValue = !VALUE_LESS_OPERATORS.has(assertion.operator);
+
+        return (
+          <div key={index} className="flex items-start gap-2 flex-wrap">
+            {/* Field selector */}
+            <div className="flex-1 min-w-[120px]">
+              <Select
+                value={assertion.field}
+                onValueChange={(v) => handleFieldChange(index, v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select field..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {fields.map((f) => (
+                    <SelectItem key={f.path} value={f.path}>
+                      {f.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* JSONPath input (for jsonpath fields) */}
+            {field?.type === "jsonpath" && (
+              <div className="flex-1 min-w-[120px]">
+                <Input
+                  value={assertion.jsonPath ?? ""}
+                  onChange={(e) => handleJsonPathChange(index, e.target.value)}
+                  placeholder="$.path.to.value"
+                />
+              </div>
+            )}
+
+            {/* Operator selector */}
+            <div className="flex-1 min-w-[100px]">
+              <Select
+                value={assertion.operator}
+                onValueChange={(v) => handleOperatorChange(index, v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select operator..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {operators.map((op) => (
+                    <SelectItem key={op.value} value={op.value}>
+                      {op.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Value input */}
+            {needsValue && (
+              <div className="flex-1 min-w-[120px]">
+                {field?.type === "enum" && field.enumValues ? (
+                  <Select
+                    value={String(assertion.value ?? "")}
+                    onValueChange={(v) => handleValueChange(index, v)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select value..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {field.enumValues.map((v) => (
+                        <SelectItem key={String(v)} value={String(v)}>
+                          {String(v)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : field?.type === "number" ? (
+                  <Input
+                    type="number"
+                    value={(assertion.value as number) ?? ""}
+                    onChange={(e) =>
+                      handleValueChange(
+                        index,
+                        e.target.value ? Number(e.target.value) : undefined
+                      )
+                    }
+                    placeholder="Value"
+                  />
+                ) : (
+                  <Input
+                    value={String(assertion.value ?? "")}
+                    onChange={(e) => handleValueChange(index, e.target.value)}
+                    placeholder="Value"
+                  />
+                )}
+              </div>
+            )}
+
+            {/* Remove button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              onClick={() => handleRemoveAssertion(index)}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        );
+      })}
+
+      {/* Add assertion button */}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAddAssertion}
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Assertion
+      </Button>
+    </div>
+  );
+};