@checkstack/healthcheck-frontend 0.0.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,149 @@
 # @checkstack/healthcheck-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- 8e43507: # Teams and Resource-Level Access Control
+
+  This release introduces a comprehensive Teams system for organizing users and controlling access to resources at a granular level.
+
+  ## Features
+
+  ### Team Management
+
+  - Create, update, and delete teams with name and description
+  - Add/remove users from teams
+  - Designate team managers with elevated privileges
+  - View team membership and manager status
+
+  ### Resource-Level Access Control
+
+  - Grant teams access to specific resources (systems, health checks, incidents, maintenances)
+  - Configure read-only or manage permissions per team
+  - Resource-level "Team Only" mode that restricts access exclusively to team members
+  - Separate `resourceAccessSettings` table for resource-level settings (not per-grant)
+  - Automatic cleanup of grants when teams are deleted (database cascade)
+
+  ### Middleware Integration
+
+  - Extended `autoAuthMiddleware` to support resource access checks
+  - Single-resource pre-handler validation for detail endpoints
+  - Automatic list filtering for collection endpoints
+  - S2S endpoints for access verification
+
+  ### Frontend Components
+
+  - `TeamsTab` component for managing teams in Auth Settings
+  - `TeamAccessEditor` component for assigning team access to resources
+  - Resource-level "Team Only" toggle in `TeamAccessEditor`
+  - Integration into System, Health Check, Incident, and Maintenance editors
+
+  ## Breaking Changes
+
+  ### API Response Format Changes
+
+  List endpoints now return objects with named keys instead of arrays directly:
+
+  ```typescript
+  // Before
+  const systems = await catalogApi.getSystems();
+
+  // After
+  const { systems } = await catalogApi.getSystems();
+  ```
+
+  Affected endpoints:
+
+  - `catalog.getSystems` → `{ systems: [...] }`
+  - `healthcheck.getConfigurations` → `{ configurations: [...] }`
+  - `incident.listIncidents` → `{ incidents: [...] }`
+  - `maintenance.listMaintenances` → `{ maintenances: [...] }`
+
+  ### User Identity Enrichment
+
+  `RealUser` and `ApplicationUser` types now include `teamIds: string[]` field with team memberships.
+
+  ## Documentation
+
+  See `docs/backend/teams.md` for complete API reference and integration guide.
+
+- 97c5a6b: Add UUID-based collector identification for better multiple collector support
+
+  **Breaking Change**: Existing health check configurations with collectors need to be recreated.
+
+  - Each collector instance now has a unique UUID assigned on creation
+  - Collector results are stored under the UUID key with `_collectorId` and `_assertionFailed` metadata
+  - Auto-charts correctly display separate charts for each collector instance
+  - Charts are now grouped by collector instance with clear headings
+  - Assertion status card shows pass/fail for each collector
+  - Renamed "Success" to "HTTP Success" to clarify it's about HTTP request success
+  - Fixed deletion of collectors not persisting to database
+  - Fixed duplicate React key warnings in auto-chart grid
+
+### Patch Changes
+
+- 97c5a6b: Fix Radix UI accessibility warning in dialog components by adding visually hidden DialogDescription components
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [97c5a6b]
+- Updated dependencies [8e43507]
+- Updated dependencies [8e43507]
+- Updated dependencies [97c5a6b]
+  - @checkstack/ui@0.1.0
+  - @checkstack/auth-frontend@0.1.0
+  - @checkstack/catalog-common@1.0.0
+  - @checkstack/common@0.1.0
+  - @checkstack/healthcheck-common@0.2.0
+  - @checkstack/frontend-api@0.0.4
+  - @checkstack/signal-frontend@0.0.5
+
+## 0.1.0
+
+### Minor Changes
+
+- f5b1f49: Added support for nested collector result display in auto-charts and history table.
+
+  - Updated `schema-parser.ts` to traverse `collectors.*` nested schemas and extract chart fields with dot-notation paths
+  - Added `getFieldValue()` support for dot-notation paths like `collectors.request.responseTimeMs`
+  - Added `ExpandedResultView` component to `HealthCheckRunsTable.tsx` that displays:
+    - Connection info (status, latency, connection time)
+    - Per-collector results as structured cards with key-value pairs
+
+- f5b1f49: Added JSONPath assertions for response body validation and fully qualified strategy IDs.
+
+  **JSONPath Assertions:**
+
+  - Added `healthResultJSONPath()` factory in healthcheck-common for fields supporting JSONPath queries
+  - Extended AssertionBuilder with jsonpath field type showing path input (e.g., `$.data.status`)
+  - Added `jsonPath` field to `CollectorAssertionSchema` for persistence
+  - HTTP Request collector body field now supports JSONPath assertions
+
+  **Fully Qualified Strategy IDs:**
+
+  - HealthCheckRegistry now uses scoped factories like CollectorRegistry
+  - Strategies are stored with `pluginId.strategyId` format
+  - Added `getStrategiesWithMeta()` method to HealthCheckRegistry interface
+  - Router returns qualified IDs so frontend can correctly fetch collectors
+
+  **UI Improvements:**
+
+  - Save button disabled when collector configs have invalid required fields
+  - Fixed nested button warning in CollectorList accordion
+
+### Patch Changes
+
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+- Updated dependencies [f5b1f49]
+  - @checkstack/healthcheck-common@0.1.0
+  - @checkstack/common@0.0.3
+  - @checkstack/ui@0.0.4
+  - @checkstack/catalog-common@0.0.3
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/signal-frontend@0.0.4
+
 ## 0.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.0.3",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -9,13 +9,13 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@checkstack/auth-frontend": "workspace:*",
     "@checkstack/catalog-common": "workspace:*",
     "@checkstack/common": "workspace:*",
     "@checkstack/frontend-api": "workspace:*",
     "@checkstack/healthcheck-common": "workspace:*",
     "@checkstack/signal-frontend": "workspace:*",
     "@checkstack/ui": "workspace:*",
-    "@types/prismjs": "^1.26.5",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",
@@ -28,6 +28,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.26.5",
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@checkstack/tsconfig": "workspace:*",

package/src/auto-charts/AutoChartGrid.tsx

@@ -33,6 +33,9 @@ interface AutoChartGridProps {
 
 /**
  * Main component that renders a grid of auto-generated charts.
+ *
+ * Discovers actual collector instances from run data and creates
+ * separate charts for each instance, grouped with headings.
  */
 export function AutoChartGrid({ context }: AutoChartGridProps) {
   const { schemas, loading } = useStrategySchemas(context.strategyId);
@@ -55,22 +58,247 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
     return;
   }
 
-  const fields = extractChartFields(schema);
-  if (fields.length === 0) {
+  const schemaFields = extractChartFields(schema);
+  if (schemaFields.length === 0) {
     return;
   }
 
+  // Discover actual collector instances from run data
+  const instanceMap = discoverCollectorInstances(context);
+
+  // Separate strategy-level fields from collector fields
+  const strategyFields = schemaFields.filter((f) => !f.collectorId);
+
+  // Build grouped collector fields
+  const collectorGroups = buildCollectorGroups(schemaFields, instanceMap);
+
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-4">
-      {fields.map((field) => (
-        <AutoChartCard key={field.name} field={field} context={context} />
+    <div className="space-y-6 mt-4">
+      {/* Strategy-level fields */}
+      {strategyFields.length > 0 && (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {strategyFields.map((field) => (
+            <AutoChartCard key={field.name} field={field} context={context} />
+          ))}
+        </div>
+      )}
+
+      {/* Collector groups */}
+      {collectorGroups.map((group) => (
+        <CollectorGroup
+          key={group.instanceKey}
+          group={group}
+          context={context}
+        />
       ))}
     </div>
   );
 }
 
+/**
+ * A group of fields for a single collector instance.
+ */
+interface CollectorGroupData {
+  instanceKey: string;
+  collectorId: string;
+  displayName: string;
+  fields: ExpandedChartField[];
+}
+
+/**
+ * Build grouped collector data from schema fields and instance map.
+ */
+function buildCollectorGroups(
+  schemaFields: ChartField[],
+  instanceMap: Record<string, string[]>
+): CollectorGroupData[] {
+  const groups: CollectorGroupData[] = [];
+
+  // Process each collector type
+  for (const [collectorId, instanceKeys] of Object.entries(instanceMap)) {
+    // Get fields for this collector type
+    const collectorFields = schemaFields.filter(
+      (f) => f.collectorId === collectorId
+    );
+    if (collectorFields.length === 0) continue;
+
+    // Create a group for each instance
+    for (const [index, instanceKey] of instanceKeys.entries()) {
+      const displayName =
+        instanceKeys.length === 1
+          ? collectorId.split(".").pop() || collectorId
+          : `${collectorId.split(".").pop() || collectorId} #${index + 1}`;
+
+      groups.push({
+        instanceKey,
+        collectorId,
+        displayName,
+        fields: collectorFields.map((field) => ({
+          ...field,
+          instanceKey,
+        })),
+      });
+    }
+  }
+
+  return groups;
+}
+
+/**
+ * Renders a collector group with heading, assertion status, and field cards.
+ */
+function CollectorGroup({
+  group,
+  context,
+}: {
+  group: CollectorGroupData;
+  context: HealthCheckDiagramSlotContext;
+}) {
+  // Get assertion status for this collector instance
+  const assertionFailed = getAssertionFailed(context, group.instanceKey);
+
+  return (
+    <div>
+      <h4 className="text-sm font-medium text-muted-foreground mb-3 uppercase tracking-wide">
+        {group.displayName}
+      </h4>
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {/* Assertion status card */}
+        <AssertionStatusCard assertionFailed={assertionFailed} />
+
+        {/* Field cards */}
+        {group.fields.map((field) => (
+          <AutoChartCard
+            key={`${field.instanceKey}-${field.name}`}
+            field={field}
+            context={context}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Get the _assertionFailed value for a specific collector instance.
+ */
+function getAssertionFailed(
+  context: HealthCheckDiagramSlotContext,
+  instanceKey: string
+): string | undefined {
+  if (context.type === "raw" && context.runs.length > 0) {
+    const latestRun = context.runs[0];
+    const result = latestRun.result as StoredHealthCheckResult | undefined;
+    const collectors = result?.metadata?.collectors as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    const collectorData = collectors?.[instanceKey];
+    return collectorData?._assertionFailed as string | undefined;
+  }
+  return undefined;
+}
+
+/**
+ * Card showing assertion pass/fail status.
+ */
+function AssertionStatusCard({
+  assertionFailed,
+}: {
+  assertionFailed: string | undefined;
+}) {
+  if (!assertionFailed) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Assertion</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2 text-green-600">
+            <div className="w-3 h-3 rounded-full bg-green-500" />
+            <span>Passed</span>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-red-200 dark:border-red-900">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-red-600">
+          Assertion Failed
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded">
+          {assertionFailed}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Discover collector instances from actual run data.
+ * Returns a map from base collector ID (type) to array of instance UUIDs.
+ */
+function discoverCollectorInstances(
+  context: HealthCheckDiagramSlotContext
+): Record<string, string[]> {
+  const instanceMap: Record<string, Set<string>> = {};
+
+  const addInstances = (collectors: Record<string, unknown> | undefined) => {
+    if (!collectors || typeof collectors !== "object") return;
+
+    for (const [uuid, data] of Object.entries(collectors)) {
+      // Read the collector type from the stored _collectorId metadata
+      const collectorData = data as Record<string, unknown> | undefined;
+      const collectorId = collectorData?._collectorId as string | undefined;
+
+      if (collectorId) {
+        if (!instanceMap[collectorId]) {
+          instanceMap[collectorId] = new Set();
+        }
+        instanceMap[collectorId].add(uuid);
+      }
+    }
+  };
+
+  if (context.type === "raw") {
+    for (const run of context.runs) {
+      const result = run.result as StoredHealthCheckResult | undefined;
+      const collectors = result?.metadata?.collectors as
+        | Record<string, unknown>
+        | undefined;
+      addInstances(collectors);
+    }
+  } else {
+    for (const bucket of context.buckets) {
+      const collectors = (
+        bucket.aggregatedResult as Record<string, unknown> | undefined
+      )?.collectors as Record<string, unknown> | undefined;
+      addInstances(collectors);
+    }
+  }
+
+  // Convert sets to arrays
+  const result: Record<string, string[]> = {};
+  for (const [collectorId, uuids] of Object.entries(instanceMap)) {
+    result[collectorId] = [...uuids].toSorted();
+  }
+  return result;
+}
+
+/**
+ * Extended ChartField with instance UUID for data lookup.
+ */
+interface ExpandedChartField extends ChartField {
+  /** Instance UUID for data lookup */
+  instanceKey?: string;
+}
+
 interface AutoChartCardProps {
-  field: ChartField;
+  field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
 }
 
@@ -91,7 +319,7 @@ function AutoChartCard({ field, context }: AutoChartCardProps) {
 }
 
 interface ChartRendererProps {
-  field: ChartField;
+  field: ExpandedChartField;
   context: HealthCheckDiagramSlotContext;
 }
 
@@ -139,7 +367,7 @@ function ChartRenderer({ field, context }: ChartRendererProps) {
  * Counts how many times each value appears across all runs/buckets.
  */
 function CounterRenderer({ field, context }: ChartRendererProps) {
-  const counts = getValueCounts(field.name, context);
+  const counts = getValueCounts(field.name, context, field.instanceKey);
   const entries = Object.entries(counts);
 
   if (entries.length === 0) {
@@ -184,7 +412,7 @@ function CounterRenderer({ field, context }: ChartRendererProps) {
  * Renders a percentage gauge visualization using Recharts RadialBarChart.
  */
 function GaugeRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const numValue =
     typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
   const unit = field.unit ?? "%";
@@ -231,7 +459,7 @@ function GaugeRenderer({ field, context }: ChartRendererProps) {
  * Renders a boolean indicator (success/failure).
  */
 function BooleanRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const isTrue = value === true;
 
   return (
@@ -252,7 +480,7 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
  * Renders text value.
  */
 function TextRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const displayValue = formatTextValue(value);
 
   return (
@@ -269,7 +497,7 @@ function TextRenderer({ field, context }: ChartRendererProps) {
  * Renders error/status badge.
  */
 function StatusRenderer({ field, context }: ChartRendererProps) {
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
   const hasValue = value !== undefined && value !== null && value !== "";
 
   if (!hasValue) {
@@ -287,7 +515,7 @@ function StatusRenderer({ field, context }: ChartRendererProps) {
  * Renders an area chart for time series data using Recharts AreaChart.
  */
 function LineChartRenderer({ field, context }: ChartRendererProps) {
-  const values = getAllValues(field.name, context);
+  const values = getAllValues(field.name, context, field.instanceKey);
   const unit = field.unit ?? "";
 
   if (values.length === 0) {
@@ -443,7 +671,7 @@ const CHART_COLORS = [
  */
 function PieChartRenderer({ field, context }: ChartRendererProps) {
   // First, try to get a pre-aggregated object value
-  const value = getLatestValue(field.name, context);
+  const value = getLatestValue(field.name, context, field.instanceKey);
 
   // Determine the data source: use pre-aggregated object or count simple values
   let dataRecord: Record<string, number>;
@@ -453,7 +681,7 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
     dataRecord = value as Record<string, number>;
   } else {
     // Simple values (like statusCode) - count occurrences
-    dataRecord = getValueCounts(field.name, context);
+    dataRecord = getValueCounts(field.name, context, field.instanceKey);
   }
 
   const entries = Object.entries(dataRecord).slice(0, 8);
@@ -542,7 +770,8 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
  */
 function getLatestValue(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): unknown {
   if (context.type === "raw") {
     const runs = context.runs;
@@ -550,7 +779,7 @@ function getLatestValue(
     // For raw runs, aggregate across all runs for record types
     const allValues = runs.map((run) => {
       const result = run.result as StoredHealthCheckResult | undefined;
-      return getFieldValue(result?.metadata, fieldName);
+      return getFieldValue(result?.metadata, fieldName, collectorId);
     });
 
     // If the values are record types (like statusCodeCounts), combine them
@@ -613,14 +842,15 @@ function combineRecordValues(
  */
 function getValueCounts(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): Record<string, number> {
   const counts: Record<string, number> = {};
 
   if (context.type === "raw") {
     for (const run of context.runs) {
       const result = run.result as StoredHealthCheckResult | undefined;
-      const value = getFieldValue(result?.metadata, fieldName);
+      const value = getFieldValue(result?.metadata, fieldName, collectorId);
       if (value !== undefined && value !== null) {
         const key = String(value);
         counts[key] = (counts[key] || 0) + 1;
@@ -631,7 +861,8 @@ function getValueCounts(
     for (const bucket of context.buckets) {
       const value = getFieldValue(
         bucket.aggregatedResult as Record<string, unknown>,
-        fieldName
+        fieldName,
+        collectorId
       );
       if (value !== undefined && value !== null) {
         const key = String(value);
@@ -651,14 +882,15 @@ function getValueCounts(
  */
 function getAllValues(
   fieldName: string,
-  context: HealthCheckDiagramSlotContext
+  context: HealthCheckDiagramSlotContext,
+  collectorId?: string
 ): number[] {
   if (context.type === "raw") {
     return context.runs
       .map((run) => {
         // result is typed as StoredHealthCheckResult with { status, latencyMs, message, metadata }
         const result = run.result as StoredHealthCheckResult;
-        return getFieldValue(result?.metadata, fieldName);
+        return getFieldValue(result?.metadata, fieldName, collectorId);
       })
       .filter((v): v is number => typeof v === "number");
   }
@@ -666,7 +898,8 @@ function getAllValues(
     .map((bucket) =>
       getFieldValue(
         bucket.aggregatedResult as Record<string, unknown>,
-        fieldName
+        fieldName,
+        collectorId
       )
     )
     .filter((v): v is number => typeof v === "number");