@checkstack/healthcheck-frontend 0.0.3 → 0.2.0

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

@@ -3,15 +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";
+
+/**
+ * JSON Schema property with healthcheck result-specific x-* extensions.
+ * Uses the generic core type for proper recursive typing.
+ */
+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 name (simple name for collector fields, path for others) */
   name: string;
   /** Chart type to render */
   chartType: ChartType;
@@ -21,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 (used for data lookup) */
+  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
@@ -57,41 +62,100 @@ 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,
+            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));
+  }
+
+  return fields;
+}
+
+/**
+ * Extract fields from a nested properties object.
+ */
+function extractFieldsFromProperties(
+  properties: Record<string, ResultSchemaProperty>,
+  collectorId: string
+): ChartField[] {
+  const fields: ChartField[] = [];
 
-    fields.push({
-      name,
-      chartType,
-      label: prop["x-chart-label"] ?? formatFieldName(name),
-      unit: prop["x-chart-unit"],
-      schemaType,
-    });
+  for (const [fieldName, prop] of Object.entries(properties)) {
+    const chartType = prop["x-chart-type"];
+    if (!chartType) continue;
+
+    // Use just field name - collectorId is stored separately for data lookup
+    const field = extractSingleField(fieldName, 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
@@ -99,11 +163,53 @@ function formatFieldName(name: string): string {
 
 /**
  * Get the value for a field from a data object.
+ * For strategy-level fields, also searches inside collectors as fallback.
+ *
+ * @param data - The metadata object
+ * @param fieldName - Simple field name (no dot notation for collector fields)
+ * @param collectorInstanceId - Optional: if provided, looks in collectors[collectorInstanceId]
  */
 export function getFieldValue(
   data: Record<string, unknown> | undefined,
-  fieldName: string
+  fieldName: string,
+  collectorInstanceId?: string
 ): unknown {
   if (!data) return undefined;
-  return data[fieldName];
+
+  // If collectorInstanceId is provided, look in that specific collector's data
+  if (collectorInstanceId) {
+    const collectors = data.collectors as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    if (collectors && typeof collectors === "object") {
+      const collectorData = collectors[collectorInstanceId];
+      if (collectorData && typeof collectorData === "object") {
+        return collectorData[fieldName];
+      }
+    }
+    return undefined;
+  }
+
+  // For non-collector fields, try direct lookup first
+  const directValue = data[fieldName];
+  if (directValue !== undefined) {
+    return directValue;
+  }
+
+  // Fallback: search all collectors for the field (for strategy schema fields)
+  const collectors = data.collectors as
+    | Record<string, Record<string, unknown>>
+    | undefined;
+  if (collectors && typeof collectors === "object") {
+    for (const collectorData of Object.values(collectors)) {
+      if (collectorData && typeof collectorData === "object") {
+        const value = collectorData[fieldName];
+        if (value !== undefined) {
+          return value;
+        }
+      }
+    }
+  }
+
+  return undefined;
 }

package/src/auto-charts/useStrategySchemas.ts

@@ -1,5 +1,9 @@
 /**
  * Hook to fetch and cache strategy schemas.
+ *
+ * Fetches both strategy result schemas AND collector result schemas,
+ * merging them into a unified schema where collector schemas are nested
+ * under `properties.collectors.<collectorId>`.
  */
 
 import { useEffect, useState } from "react";
@@ -14,6 +18,9 @@ interface StrategySchemas {
 /**
  * Fetch and cache strategy schemas for auto-chart rendering.
  *
+ * Also fetches collector schemas and merges them into the result schema
+ * so that chart fields from collectors are properly extracted.
+ *
  * @param strategyId - The strategy ID to fetch schemas for
  * @returns Schemas for the strategy, or undefined if not found
  */
@@ -30,13 +37,30 @@ export function useStrategySchemas(strategyId: string): {
 
     async function fetchSchemas() {
       try {
-        const strategies = await api.getStrategies();
+        // Fetch strategy and collectors in parallel
+        const [strategies, collectors] = await Promise.all([
+          api.getStrategies(),
+          api.getCollectors({ strategyId }),
+        ]);
+
         const strategy = strategies.find((s) => s.id === strategyId);
 
         if (!cancelled && strategy) {
+          // Build collector schemas object for nesting under resultSchema.properties.collectors
+          const collectorProperties: Record<string, unknown> = {};
+          for (const collector of collectors) {
+            // Use full ID so it matches stored data keys like "healthcheck-http.request"
+            collectorProperties[collector.id] = collector.resultSchema;
+          }
+
+          // Merge collector schemas into strategy result schema
+          const mergedResultSchema = mergeCollectorSchemas(
+            strategy.resultSchema as Record<string, unknown> | undefined,
+            collectorProperties
+          );
+
           setSchemas({
-            resultSchema:
-              (strategy.resultSchema as Record<string, unknown>) ?? undefined,
+            resultSchema: mergedResultSchema,
             aggregatedResultSchema:
               (strategy.aggregatedResultSchema as Record<string, unknown>) ??
               undefined,
@@ -60,3 +84,49 @@ export function useStrategySchemas(strategyId: string): {
 
   return { schemas, loading };
 }
+
+/**
+ * Merge collector result schemas into a strategy result schema.
+ *
+ * Creates a schema structure where collectors are nested under
+ * `properties.collectors.<collectorId>`, matching the actual data structure
+ * stored by the health check executor.
+ */
+function mergeCollectorSchemas(
+  strategySchema: Record<string, unknown> | undefined,
+  collectorProperties: Record<string, unknown>
+): Record<string, unknown> | undefined {
+  // If no collectors, return original schema
+  if (Object.keys(collectorProperties).length === 0) {
+    return strategySchema;
+  }
+
+  // Build the collectors nested schema
+  const collectorsSchema = {
+    type: "object",
+    properties: collectorProperties,
+  };
+
+  // If no strategy schema, create one just with collectors
+  if (!strategySchema) {
+    return {
+      type: "object",
+      properties: {
+        collectors: collectorsSchema,
+      },
+    };
+  }
+
+  // Merge: add collectors to existing properties
+  const existingProps = (strategySchema.properties ?? {}) as Record<
+    string,
+    unknown
+  >;
+  return {
+    ...strategySchema,
+    properties: {
+      ...existingProps,
+      collectors: collectorsSchema,
+    },
+  };
+}