@checkstack/healthcheck-frontend 0.1.0 → 0.3.0

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

@@ -7,8 +7,8 @@
  * Supports nested schemas under `collectors.*` for per-collector metrics.
  */
 
-import type { ChartType } from "@checkstack/healthcheck-common";
 import type {
+  ChartType,
   JsonSchemaPropertyCore,
   JsonSchemaBase,
 } from "@checkstack/common";
@@ -34,7 +34,7 @@ export type ResultSchema = JsonSchemaBase<ResultSchemaProperty>;
  * Chart field information extracted from JSON Schema.
  */
 export interface ChartField {
-  /** Field path (supports dot notation for nested fields like "collectors.request.responseTimeMs") */
+  /** Field name (simple name for collector fields, path for others) */
   name: string;
   /** Chart type to render */
   chartType: ChartType;
@@ -44,7 +44,7 @@ export interface ChartField {
   unit?: string;
   /** JSON Schema type (number, string, boolean, etc.) */
   schemaType: string;
-  /** Collector ID if this field is from a collector */
+  /** Collector ID if this field is from a collector (used for data lookup) */
   collectorId?: string;
 }
 
@@ -78,7 +78,6 @@ export function extractChartFields(
           // Extract fields from the collector's result schema
           const collectorFields = extractFieldsFromProperties(
             collectorProp.properties,
-            `collectors.${collectorId}`,
             collectorId
           );
           fields.push(...collectorFields);
@@ -101,7 +100,6 @@ export function extractChartFields(
  */
 function extractFieldsFromProperties(
   properties: Record<string, ResultSchemaProperty>,
-  pathPrefix: string,
   collectorId: string
 ): ChartField[] {
   const fields: ChartField[] = [];
@@ -110,8 +108,8 @@ function extractFieldsFromProperties(
     const chartType = prop["x-chart-type"];
     if (!chartType) continue;
 
-    const fullPath = `${pathPrefix}.${fieldName}`;
-    const field = extractSingleField(fullPath, prop);
+    // 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)) {
@@ -165,28 +163,53 @@ function formatFieldName(name: string): string {
 
 /**
  * Get the value for a field from a data object.
- * Supports dot-notation paths like "collectors.request.responseTimeMs".
+ * 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;
 
-  // Simple case: no dot notation
-  if (!fieldName.includes(".")) {
-    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;
   }
 
-  // Dot notation: traverse the path
-  const parts = fieldName.split(".");
-  let current: unknown = data;
+  // For non-collector fields, try direct lookup first
+  const directValue = data[fieldName];
+  if (directValue !== undefined) {
+    return directValue;
+  }
 
-  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];
+  // 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 current;
+  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,
+    },
+  };
+}

package/src/components/AssertionBuilder.tsx

@@ -81,6 +81,13 @@ const OPERATORS: Record<FieldType, { value: string; label: string }[]> = {
   ],
   enum: [{ value: "equals", label: "Equals" }],
   array: [
+    { value: "includes", label: "Includes" },
+    { value: "notIncludes", label: "Not Includes" },
+    { value: "lengthEquals", label: "Length Equals" },
+    { value: "lengthGreaterThan", label: "Length Greater Than" },
+    { value: "lengthLessThan", label: "Length Less Than" },
+    { value: "isEmpty", label: "Is Empty" },
+    { value: "isNotEmpty", label: "Is Not Empty" },
     { value: "exists", label: "Exists" },
     { value: "notExists", label: "Not Exists" },
   ],
@@ -98,6 +105,7 @@ const OPERATORS: Record<FieldType, { value: string; label: string }[]> = {
 // Operators that don't need a value input
 const VALUE_LESS_OPERATORS = new Set([
   "isEmpty",
+  "isNotEmpty",
   "isTrue",
   "isFalse",
   "exists",
@@ -302,15 +310,22 @@ export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
     <div className="space-y-4">
       {assertions.map((assertion, index) => {
         const field = getFieldByPath(assertion.field);
-        const operators = field ? OPERATORS[field.type] : [];
+        // Safely get operators with fallback to empty array
+        const operators = field ? OPERATORS[field.type] ?? [] : [];
         const needsValue = !VALUE_LESS_OPERATORS.has(assertion.operator);
 
+        // Check if current values match available options (prevents Radix UI crash)
+        const fieldValueValid = fields.some((f) => f.path === assertion.field);
+        const operatorValueValid = operators.some(
+          (op) => op.value === 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}
+                value={fieldValueValid ? assertion.field : undefined}
                 onValueChange={(v) => handleFieldChange(index, v)}
               >
                 <SelectTrigger>
@@ -340,7 +355,7 @@ export const AssertionBuilder: React.FC<AssertionBuilderProps> = ({
             {/* Operator selector */}
             <div className="flex-1 min-w-[100px]">
               <Select
-                value={assertion.operator}
+                value={operatorValueValid ? assertion.operator : undefined}
                 onValueChange={(v) => handleOperatorChange(index, v)}
               >
                 <SelectTrigger>

package/src/components/CollectorList.tsx

@@ -100,6 +100,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
     if (!collector) return;
 
     const newEntry: CollectorConfigEntry = {
+      id: crypto.randomUUID(),
       collectorId,
       config: {},
       assertions: [],
@@ -111,6 +112,11 @@ export const CollectorList: React.FC<CollectorListProps> = ({
   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);
   };
 

package/src/components/HealthCheckDiagram.tsx

@@ -44,20 +44,20 @@ export function HealthCheckDiagram({
 }
 
 /**
- * Wrapper that shows permission message when user lacks access.
+ * Wrapper that shows access message when user lacks access.
  */
-export function HealthCheckDiagramPermissionGate({
-  hasPermission,
+export function HealthCheckDiagramAccessGate({
+  hasAccess,
   children,
 }: {
-  hasPermission: boolean;
+  hasAccess: boolean;
   children: React.ReactNode;
 }) {
-  if (!hasPermission) {
+  if (!hasAccess) {
     return (
       <InfoBanner variant="info">
         Additional strategy-specific visualizations are available with the
-        &quot;Read Health Check Details&quot; permission.
+        &quot;Read Health Check Details&quot; access rule.
       </InfoBanner>
     );
   }

package/src/components/HealthCheckEditor.tsx

@@ -13,12 +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[];
@@ -82,7 +84,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
         strategyId,
         intervalSeconds: Number.parseInt(interval, 10),
         config,
-        collectors: collectors.length > 0 ? collectors : undefined,
+        collectors, // Always send the array, even if empty, to allow clearing
       });
     } catch (error) {
       const message =
@@ -102,6 +104,11 @@ 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-6 py-4 max-h-[70vh] overflow-y-auto">
@@ -148,6 +155,16 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
                 onValidChange={setCollectorsValid}
               />
             )}
+
+            {/* Team Access Editor - only shown for existing configurations */}
+            {initialData?.id && (
+              <TeamAccessEditor
+                resourceType="healthcheck.configuration"
+                resourceId={initialData.id}
+                compact
+                expanded
+              />
+            )}
           </div>
 
           <DialogFooter>

package/src/components/HealthCheckMenuItems.tsx

@@ -3,20 +3,17 @@ import { Link } from "react-router-dom";
 import { Activity } from "lucide-react";
 import type { UserMenuItemsContext } from "@checkstack/frontend-api";
 import { DropdownMenuItem } from "@checkstack/ui";
-import { qualifyPermissionId, resolveRoute } from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import {
   healthcheckRoutes,
-  permissions,
+  healthCheckAccess,
   pluginMetadata,
 } from "@checkstack/healthcheck-common";
 
 export const HealthCheckMenuItems = ({
-  permissions: userPerms,
+  accessRules: userPerms,
 }: UserMenuItemsContext) => {
-  const qualifiedId = qualifyPermissionId(
-    pluginMetadata,
-    permissions.healthCheckRead
-  );
+  const qualifiedId = `${pluginMetadata.pluginId}.${healthCheckAccess.configuration.read.id}`;
   const canRead = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
   if (!canRead) {

package/src/components/HealthCheckRunsTable.tsx

@@ -300,7 +300,7 @@ function CollectorResultCard({
 function formatKey(key: string): string {
   return key
     .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
-    .replaceAll(/^./, (c) => c.toUpperCase());
+    .replace(/^./, (c) => c.toUpperCase());
 }
 
 /**

package/src/components/SystemHealthCheckAssignment.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, useState } from "react";
 import {
   useApi,
   type SlotContext,
-  permissionApiRef,
+  accessApiRef,
 } from "@checkstack/frontend-api";
 import { healthCheckApiRef, HealthCheckConfiguration } from "../api";
 import {
   Button,
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -31,6 +32,7 @@ import type { StateThresholds } from "@checkstack/healthcheck-common";
 import {
   DEFAULT_STATE_THRESHOLDS,
   healthcheckRoutes,
+  healthCheckAccess,
 } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
 import { DEFAULT_RETENTION_CONFIG } from "@checkstack/healthcheck-common";
@@ -51,10 +53,9 @@ export const SystemHealthCheckAssignment: React.FC<Props> = ({
   systemName: _systemName,
 }) => {
   const api = useApi(healthCheckApiRef);
-  const permissionApi = useApi(permissionApiRef);
-  const { allowed: canManage } = permissionApi.useResourcePermission(
-    "healthcheck",
-    "manage"
+  const accessApi = useApi(accessApiRef);
+  const { allowed: canManage } = accessApi.useAccess(
+    healthCheckAccess.configuration.manage
   );
   const [configs, setConfigs] = useState<HealthCheckConfiguration[]>([]);
   const [associations, setAssociations] = useState<AssociationState[]>([]);
@@ -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/useHealthCheckData.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState, useMemo, useCallback } from "react";
-import { useApi, permissionApiRef } from "@checkstack/frontend-api";
+import { useApi, accessApiRef } from "@checkstack/frontend-api";
 import { healthCheckApiRef } from "../api";
 import {
-  permissions,
+  healthCheckAccess,
   DEFAULT_RETENTION_CONFIG,
   type RetentionConfig,
   HEALTH_CHECK_RUN_COMPLETED,
@@ -36,10 +36,10 @@ interface UseHealthCheckDataResult {
   isAggregated: boolean;
   /** The resolved retention config */
   retentionConfig: RetentionConfig;
-  /** Whether user has permission to view detailed data */
-  hasPermission: boolean;
-  /** Whether permission is still loading */
-  permissionLoading: boolean;
+  /** Whether user has access to view detailed data */
+  hasAccess: boolean;
+  /** Whether access is still loading */
+  accessLoading: boolean;
 }
 
 /**
@@ -52,14 +52,14 @@ interface UseHealthCheckDataResult {
  *
  * @example
  * ```tsx
- * const { context, loading, hasPermission } = useHealthCheckData({
+ * const { context, loading, hasAccess } = useHealthCheckData({
  *   systemId,
  *   configurationId,
  *   strategyId,
  *   dateRange: { startDate, endDate },
  * });
  *
- * if (!hasPermission) return <NoPermissionMessage />;
+ * if (!hasAccess) return <NoAccessMessage />;
  * if (loading) return <LoadingSpinner />;
  * if (!context) return null;
  *
@@ -75,11 +75,11 @@ export function useHealthCheckData({
   offset = 0,
 }: UseHealthCheckDataProps): UseHealthCheckDataResult {
   const api = useApi(healthCheckApiRef);
-  const permissionApi = useApi(permissionApiRef);
+  const accessApi = useApi(accessApiRef);
 
-  // Permission state
-  const { allowed: hasPermission, loading: permissionLoading } =
-    permissionApi.usePermission(permissions.healthCheckDetailsRead.id);
+  // Access state
+  const { allowed: hasAccess, loading: accessLoading } =
+    accessApi.useAccess(healthCheckAccess.details);
 
   // Retention config state
   const [retentionConfig, setRetentionConfig] = useState<RetentionConfig>(
@@ -160,24 +160,24 @@ export function useHealthCheckData({
 
   // Fetch raw data when in raw mode
   useEffect(() => {
-    if (!hasPermission || permissionLoading || retentionLoading || isAggregated)
+    if (!hasAccess || accessLoading || retentionLoading || isAggregated)
       return;
     fetchRawData(true);
   }, [
     fetchRawData,
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
     retentionLoading,
     isAggregated,
   ]);
 
   // Listen for realtime health check updates to refresh data silently
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
-    // Only refresh if we're in raw mode (not aggregated) and have permission
+    // Only refresh if we're in raw mode (not aggregated) and have access
     if (
       changedId === systemId &&
-      hasPermission &&
-      !permissionLoading &&
+      hasAccess &&
+      !accessLoading &&
       !retentionLoading &&
       !isAggregated
     ) {
@@ -188,8 +188,8 @@ export function useHealthCheckData({
   // Fetch aggregated data when in aggregated mode
   useEffect(() => {
     if (
-      !hasPermission ||
-      permissionLoading ||
+      !hasAccess ||
+      accessLoading ||
       retentionLoading ||
       !isAggregated
     )
@@ -198,7 +198,7 @@ export function useHealthCheckData({
     setAggregatedLoading(true);
     // Use daily buckets for ranges > 30 days, hourly otherwise
     const bucketSize = dateRangeDays > 30 ? "daily" : "hourly";
-    // Use detailed endpoint to get aggregatedResult since we have permission
+    // Use detailed endpoint to get aggregatedResult since we have access
     api
       .getDetailedAggregatedHistory({
         systemId,
@@ -217,8 +217,8 @@ export function useHealthCheckData({
     api,
     systemId,
     configurationId,
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
     retentionLoading,
     isAggregated,
     dateRangeDays,
@@ -227,7 +227,7 @@ export function useHealthCheckData({
   ]);
 
   const context = useMemo((): HealthCheckDiagramSlotContext | undefined => {
-    if (!hasPermission || permissionLoading || retentionLoading) {
+    if (!hasAccess || accessLoading || retentionLoading) {
       return undefined;
     }
 
@@ -249,8 +249,8 @@ export function useHealthCheckData({
       runs: rawRuns,
     };
   }, [
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
     retentionLoading,
     isAggregated,
     systemId,
@@ -261,7 +261,7 @@ export function useHealthCheckData({
   ]);
 
   const loading =
-    permissionLoading ||
+    accessLoading ||
     retentionLoading ||
     (isAggregated ? aggregatedLoading : rawLoading);
 
@@ -270,7 +270,7 @@ export function useHealthCheckData({
     loading,
     isAggregated,
     retentionConfig,
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
   };
 }

package/src/index.tsx

@@ -13,7 +13,7 @@ import { HealthCheckMenuItems } from "./components/HealthCheckMenuItems";
 import { HealthCheckSystemOverview } from "./components/HealthCheckSystemOverview";
 import { SystemHealthCheckAssignment } from "./components/SystemHealthCheckAssignment";
 import { SystemHealthBadge } from "./components/SystemHealthBadge";
-import { permissions } from "@checkstack/healthcheck-common";
+import { healthCheckAccess } from "@checkstack/healthcheck-common";
 import { autoChartExtension } from "./auto-charts";
 
 import {
@@ -49,19 +49,19 @@ export default createFrontendPlugin({
       route: healthcheckRoutes.routes.config,
       element: <HealthCheckConfigPage />,
       title: "Health Checks",
-      permission: permissions.healthCheckManage,
+      accessRule: healthCheckAccess.configuration.manage,
     },
     {
       route: healthcheckRoutes.routes.history,
       element: <HealthCheckHistoryPage />,
       title: "Health Check History",
-      permission: permissions.healthCheckRead,
+      accessRule: healthCheckAccess.configuration.read,
     },
     {
       route: healthcheckRoutes.routes.historyDetail,
       element: <HealthCheckHistoryDetailPage />,
       title: "Health Check Detail",
-      permission: permissions.healthCheckDetailsRead,
+      accessRule: healthCheckAccess.details,
     },
   ],
   apis: [