@checkstack/healthcheck-frontend 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,207 @@
 # @checkstack/healthcheck-frontend
 
+## 0.3.0
+
+### Minor Changes
+
+- 9faec1f: # Unified AccessRule Terminology Refactoring
+
+  This release completes a comprehensive terminology refactoring from "permission" to "accessRule" across the entire codebase, establishing a consistent and modern access control vocabulary.
+
+  ## Changes
+
+  ### Core Infrastructure (`@checkstack/common`)
+
+  - Introduced `AccessRule` interface as the primary access control type
+  - Added `accessPair()` helper for creating read/manage access rule pairs
+  - Added `access()` builder for individual access rules
+  - Replaced `Permission` type with `AccessRule` throughout
+
+  ### API Changes
+
+  - `env.registerPermissions()` → `env.registerAccessRules()`
+  - `meta.permissions` → `meta.access` in RPC contracts
+  - `usePermission()` → `useAccess()` in frontend hooks
+  - Route `permission:` field → `accessRule:` field
+
+  ### UI Changes
+
+  - "Roles & Permissions" tab → "Roles & Access Rules"
+  - "You don't have permission..." → "You don't have access..."
+  - All permission-related UI text updated
+
+  ### Documentation & Templates
+
+  - Updated 18 documentation files with AccessRule terminology
+  - Updated 7 scaffolding templates with `accessPair()` pattern
+  - All code examples use new AccessRule API
+
+  ## Migration Guide
+
+  ### Backend Plugins
+
+  ```diff
+  - import { permissionList } from "./permissions";
+  - env.registerPermissions(permissionList);
+  + import { accessRules } from "./access";
+  + env.registerAccessRules(accessRules);
+  ```
+
+  ### RPC Contracts
+
+  ```diff
+  - .meta({ userType: "user", permissions: [permissions.read.id] })
+  + .meta({ userType: "user", access: [access.read] })
+  ```
+
+  ### Frontend Hooks
+
+  ```diff
+  - const canRead = accessApi.usePermission(permissions.read.id);
+  + const canRead = accessApi.useAccess(access.read);
+  ```
+
+  ### Routes
+
+  ```diff
+  - permission: permissions.entityRead.id,
+  + accessRule: access.read,
+  ```
+
+- 827b286: Add array assertion operators for string array fields
+
+  New operators for asserting on array fields (e.g., playerNames in RCON collectors):
+
+  - **includes** - Check if array contains a specific value
+  - **notIncludes** - Check if array does NOT contain a specific value
+  - **lengthEquals** - Check if array length equals a value
+  - **lengthGreaterThan** - Check if array length is greater than a value
+  - **lengthLessThan** - Check if array length is less than a value
+  - **isEmpty** - Check if array is empty
+  - **isNotEmpty** - Check if array has at least one element
+
+  Also exports a new `arrayField()` schema factory for creating array assertion schemas.
+
+### Patch Changes
+
+- f533141: Enforce health result factory function usage via branded types
+
+  - Added `healthResultSchema()` builder that enforces the use of factory functions at compile-time
+  - Added `healthResultArray()` factory for array fields (e.g., DNS resolved values)
+  - Added branded `HealthResultField<T>` type to mark schemas created by factory functions
+  - Consolidated `ChartType` and `HealthResultMeta` into `@checkstack/common` as single source of truth
+  - Updated all 12 health check strategies and 11 collectors to use `healthResultSchema()`
+  - Using raw `z.number()` etc. inside `healthResultSchema()` now causes a TypeScript error
+
+- Updated dependencies [9faec1f]
+- Updated dependencies [95eeec7]
+- Updated dependencies [f533141]
+  - @checkstack/auth-frontend@0.2.0
+  - @checkstack/catalog-common@1.1.0
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/healthcheck-common@0.3.0
+  - @checkstack/ui@0.2.0
+  - @checkstack/signal-frontend@0.0.6
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.1.0",
+  "version": "0.3.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");