@checkmate-monitor/healthcheck-frontend 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# @checkmate-monitor/healthcheck-frontend
+
+## 0.1.0
+
+### Minor Changes
+
+- ae19ff6: Add configurable state thresholds for health check evaluation
+
+  **@checkmate-monitor/backend-api:**
+
+  - Added `VersionedData<T>` generic interface as base for all versioned data structures
+  - `VersionedConfig<T>` now extends `VersionedData<T>` and adds `pluginId`
+  - Added `migrateVersionedData()` utility function for running migrations on any `VersionedData` subtype
+
+  **@checkmate-monitor/backend:**
+
+  - Refactored `ConfigMigrationRunner` to use the new `migrateVersionedData` utility
+
+  **@checkmate-monitor/healthcheck-common:**
+
+  - Added state threshold schemas with two evaluation modes (consecutive, window)
+  - Added `stateThresholds` field to `AssociateHealthCheckSchema`
+  - Added `getSystemHealthStatus` RPC endpoint contract
+
+  **@checkmate-monitor/healthcheck-backend:**
+
+  - Added `stateThresholds` column to `system_health_checks` table
+  - Added `state-evaluator.ts` with health status evaluation logic
+  - Added `state-thresholds-migrations.ts` with migration infrastructure
+  - Added `getSystemHealthStatus` RPC handler
+
+  **@checkmate-monitor/healthcheck-frontend:**
+
+  - Updated `SystemHealthBadge` to use new backend endpoint
+
+- 0babb9c: Add public health status access and detailed history for admins
+
+  **Permission changes:**
+
+  - Added `healthcheck.status.read` permission with `isPublicDefault: true` for anonymous access
+  - `getSystemHealthStatus`, `getSystemHealthOverview`, and `getHistory` now public
+  - `getHistory` no longer returns `result` field (security)
+
+  **New features:**
+
+  - Added `getDetailedHistory` endpoint with `healthcheck.manage` permission
+  - New `/healthcheck/history` page showing paginated run history with expandable result JSON
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [ae19ff6]
+- Updated dependencies [0babb9c]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkmate-monitor/ui@0.1.0
+  - @checkmate-monitor/common@0.1.0
+  - @checkmate-monitor/catalog-common@0.1.0
+  - @checkmate-monitor/healthcheck-common@0.1.0
+  - @checkmate-monitor/signal-frontend@0.1.0
+  - @checkmate-monitor/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@checkmate-monitor/healthcheck-frontend",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkmate-monitor/catalog-common": "workspace:*",
+    "@checkmate-monitor/common": "workspace:*",
+    "@checkmate-monitor/frontend-api": "workspace:*",
+    "@checkmate-monitor/healthcheck-common": "workspace:*",
+    "@checkmate-monitor/signal-frontend": "workspace:*",
+    "@checkmate-monitor/ui": "workspace:*",
+    "@types/prismjs": "^1.26.5",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "prismjs": "^1.30.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "react-simple-code-editor": "^0.14.1",
+    "recharts": "^3.6.0",
+    "zod": "^4.2.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,17 @@
+import { createApiRef } from "@checkmate-monitor/frontend-api";
+import { HealthCheckApi } from "@checkmate-monitor/healthcheck-common";
+import type { InferClient } from "@checkmate-monitor/common";
+
+// Re-export types for convenience
+export type {
+  HealthCheckConfiguration,
+  HealthCheckStrategyDto,
+  HealthCheckRun,
+  HealthCheckRunPublic,
+} from "@checkmate-monitor/healthcheck-common";
+
+// HealthCheckApiClient type inferred from the client definition
+export type HealthCheckApiClient = InferClient<typeof HealthCheckApi>;
+
+export const healthCheckApiRef =
+  createApiRef<HealthCheckApiClient>("healthcheck-api");

package/src/auto-charts/AutoChartGrid.tsx

@@ -0,0 +1,383 @@
+/**
+ * AutoChartGrid - Renders auto-generated charts based on schema metadata.
+ *
+ * Parses the strategy's result/aggregated schemas to extract chart metadata
+ * and renders appropriate visualizations for each annotated field.
+ */
+
+import type { ChartField } from "./schema-parser";
+import { extractChartFields, getFieldValue } from "./schema-parser";
+import { useStrategySchemas } from "./useStrategySchemas";
+import type { HealthCheckDiagramSlotContext } from "../slots";
+import type { StoredHealthCheckResult } from "@checkmate-monitor/healthcheck-common";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@checkmate-monitor/ui";
+
+interface AutoChartGridProps {
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Main component that renders a grid of auto-generated charts.
+ */
+export function AutoChartGrid({ context }: AutoChartGridProps) {
+  const { schemas, loading } = useStrategySchemas(context.strategyId);
+
+  if (loading) {
+    return; // Don't show loading state, let custom charts render first
+  }
+
+  if (!schemas) {
+    return;
+  }
+
+  // Choose schema based on context type
+  const schema =
+    context.type === "raw"
+      ? schemas.resultSchema
+      : schemas.aggregatedResultSchema;
+
+  if (!schema) {
+    return;
+  }
+
+  const fields = extractChartFields(schema);
+  if (fields.length === 0) {
+    return;
+  }
+
+  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>
+  );
+}
+
+interface AutoChartCardProps {
+  field: ChartField;
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Individual chart card that renders based on field type.
+ */
+function AutoChartCard({ field, context }: AutoChartCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">{field.label}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartRenderer field={field} context={context} />
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ChartRendererProps {
+  field: ChartField;
+  context: HealthCheckDiagramSlotContext;
+}
+
+/**
+ * Dispatches to appropriate chart renderer based on chart type.
+ */
+function ChartRenderer({ field, context }: ChartRendererProps) {
+  switch (field.chartType) {
+    case "line": {
+      return <LineChartRenderer field={field} context={context} />;
+    }
+    case "gauge": {
+      return <GaugeRenderer field={field} context={context} />;
+    }
+    case "counter": {
+      return <CounterRenderer field={field} context={context} />;
+    }
+    case "bar": {
+      return <BarChartRenderer field={field} context={context} />;
+    }
+    case "boolean": {
+      return <BooleanRenderer field={field} context={context} />;
+    }
+    case "text": {
+      return <TextRenderer field={field} context={context} />;
+    }
+    case "status": {
+      return <StatusRenderer field={field} context={context} />;
+    }
+    default: {
+      return;
+    }
+  }
+}
+
+// =============================================================================
+// CHART RENDERERS
+// =============================================================================
+
+/**
+ * Renders a large counter value with optional trend.
+ */
+function CounterRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const displayValue = typeof value === "number" ? value : "—";
+  const unit = field.unit ?? "";
+
+  return (
+    <div className="text-2xl font-bold">
+      {displayValue}
+      {unit && (
+        <span className="text-sm font-normal text-muted-foreground ml-1">
+          {unit}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Renders a percentage gauge visualization.
+ */
+function GaugeRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const numValue =
+    typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
+  const unit = field.unit ?? "%";
+
+  // Determine color based on value (for rates: higher is better)
+  const colorClass =
+    numValue >= 90
+      ? "text-green-500"
+      : numValue >= 70
+      ? "text-yellow-500"
+      : "text-red-500";
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative w-16 h-16">
+        <svg className="w-16 h-16 transform -rotate-90" viewBox="0 0 36 36">
+          <circle
+            cx="18"
+            cy="18"
+            r="15.5"
+            fill="none"
+            className="stroke-muted"
+            strokeWidth="3"
+          />
+          <circle
+            cx="18"
+            cy="18"
+            r="15.5"
+            fill="none"
+            className={colorClass.replace("text-", "stroke-")}
+            strokeWidth="3"
+            strokeDasharray={`${numValue} 100`}
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+      <div className={`text-2xl font-bold ${colorClass}`}>
+        {numValue.toFixed(1)}
+        {unit}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a boolean indicator (success/failure).
+ */
+function BooleanRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const isTrue = value === true;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`w-3 h-3 rounded-full ${
+          isTrue ? "bg-green-500" : "bg-red-500"
+        }`}
+      />
+      <span className={isTrue ? "text-green-600" : "text-red-600"}>
+        {isTrue ? "Yes" : "No"}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Renders text value.
+ */
+function TextRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const displayValue = formatTextValue(value);
+
+  return (
+    <div
+      className="text-sm font-mono text-muted-foreground truncate"
+      title={displayValue}
+    >
+      {displayValue || "—"}
+    </div>
+  );
+}
+
+/**
+ * Renders error/status badge.
+ */
+function StatusRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+  const hasValue = value !== undefined && value !== null && value !== "";
+
+  if (!hasValue) {
+    return <div className="text-sm text-muted-foreground">No errors</div>;
+  }
+
+  return (
+    <div className="text-sm text-red-600 bg-red-50 dark:bg-red-950 px-2 py-1 rounded truncate">
+      {String(value)}
+    </div>
+  );
+}
+
+/**
+ * Renders a simple line chart visualization.
+ * For now, shows min/avg/max summary. Full charts can be added later.
+ */
+function LineChartRenderer({ field, context }: ChartRendererProps) {
+  const values = getAllValues(field.name, context);
+  const unit = field.unit ?? "";
+
+  if (values.length === 0) {
+    return <div className="text-muted-foreground">No data</div>;
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const avg = values.reduce((a, b) => a + b, 0) / values.length;
+
+  return (
+    <div className="space-y-1">
+      <div className="text-2xl font-bold">
+        {avg.toFixed(1)}
+        {unit && (
+          <span className="text-sm font-normal text-muted-foreground ml-1">
+            {unit}
+          </span>
+        )}
+      </div>
+      <div className="text-xs text-muted-foreground">
+        Min: {min.toFixed(1)}
+        {unit} · Max: {max.toFixed(1)}
+        {unit}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a bar chart for record values.
+ */
+function BarChartRenderer({ field, context }: ChartRendererProps) {
+  const value = getLatestValue(field.name, context);
+
+  if (!value || typeof value !== "object") {
+    return <div className="text-muted-foreground">No data</div>;
+  }
+
+  const entries = Object.entries(value as Record<string, number>).slice(0, 5);
+  const maxValue = Math.max(...entries.map(([, v]) => v), 1);
+
+  return (
+    <div className="space-y-2">
+      {entries.map(([key, val]) => (
+        <div key={key} className="flex items-center gap-2">
+          <span className="text-xs w-12 text-right text-muted-foreground">
+            {key}
+          </span>
+          <div className="flex-1 h-4 bg-muted rounded overflow-hidden">
+            <div
+              className="h-full bg-primary"
+              style={{ width: `${(val / maxValue) * 100}%` }}
+            />
+          </div>
+          <span className="text-xs w-8">{val}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+/**
+ * Get the latest value for a field from the context.
+ *
+ * For raw runs, the strategy-specific data is inside result.metadata.
+ * For aggregated buckets, the data is directly in aggregatedResult.
+ */
+function getLatestValue(
+  fieldName: string,
+  context: HealthCheckDiagramSlotContext
+): unknown {
+  if (context.type === "raw") {
+    const runs = context.runs;
+    if (runs.length === 0) return undefined;
+    // result is typed as StoredHealthCheckResult with { status, latencyMs, message, metadata }
+    const result = runs.at(-1)?.result as StoredHealthCheckResult | undefined;
+    return getFieldValue(result?.metadata, fieldName);
+  } else {
+    const buckets = context.buckets;
+    if (buckets.length === 0) return undefined;
+    return getFieldValue(
+      buckets.at(-1)?.aggregatedResult as Record<string, unknown>,
+      fieldName
+    );
+  }
+}
+
+/**
+ * Get all numeric values for a field from the context.
+ *
+ * For raw runs, the strategy-specific data is inside result.metadata.
+ * For aggregated buckets, the data is directly in aggregatedResult.
+ */
+function getAllValues(
+  fieldName: string,
+  context: HealthCheckDiagramSlotContext
+): 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);
+      })
+      .filter((v): v is number => typeof v === "number");
+  }
+  return context.buckets
+    .map((bucket) =>
+      getFieldValue(
+        bucket.aggregatedResult as Record<string, unknown>,
+        fieldName
+      )
+    )
+    .filter((v): v is number => typeof v === "number");
+}
+
+/**
+ * Format a value for text display.
+ */
+function formatTextValue(value: unknown): string {
+  if (value === undefined || value === null) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}

package/src/auto-charts/extension.tsx

@@ -0,0 +1,27 @@
+/**
+ * Auto-chart slot extension registration.
+ *
+ * Registers the AutoChartGrid as a diagram extension that renders
+ * for all strategies that have schema metadata.
+ */
+
+import { createSlotExtension } from "@checkmate-monitor/frontend-api";
+import {
+  HealthCheckDiagramSlot,
+  type HealthCheckDiagramSlotContext,
+} from "../slots";
+import { AutoChartGrid } from "./AutoChartGrid";
+
+/**
+ * Extension that renders auto-generated charts for any strategy.
+ *
+ * Unlike custom chart extensions that filter by strategy ID, this extension
+ * renders for all strategies and lets AutoChartGrid decide what to display
+ * based on the schema metadata.
+ */
+export const autoChartExtension = createSlotExtension(HealthCheckDiagramSlot, {
+  id: "healthcheck.auto-charts",
+  component: (context: HealthCheckDiagramSlotContext) => {
+    return <AutoChartGrid context={context} />;
+  },
+});

package/src/auto-charts/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Auto-chart components for rendering schema-driven visualizations.
+ *
+ * These components render charts based on x-chart-type metadata in JSON schemas,
+ * eliminating the need for custom chart components for standard metrics.
+ */
+
+export { extractChartFields, getFieldValue } from "./schema-parser";
+export type { ChartField, ChartType } from "./schema-parser";
+export { AutoChartGrid } from "./AutoChartGrid";
+export { useStrategySchemas } from "./useStrategySchemas";
+export { autoChartExtension } from "./extension";

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

@@ -0,0 +1,121 @@
+/**
+ * Utility to extract chart metadata from JSON Schema.
+ *
+ * Parses JSON Schema objects and extracts x-chart-type, x-chart-label,
+ * and x-chart-unit metadata for auto-chart rendering.
+ */
+
+/**
+ * Available chart types for auto-generated visualizations.
+ * Mirrors the backend ChartType but defined locally since frontend
+ * cannot import from backend-api.
+ */
+export type ChartType =
+  | "line"
+  | "bar"
+  | "counter"
+  | "gauge"
+  | "boolean"
+  | "text"
+  | "status";
+
+/**
+ * Chart field information extracted from JSON Schema.
+ */
+export interface ChartField {
+  /** Field name in the schema */
+  name: string;
+  /** Chart type to render */
+  chartType: ChartType;
+  /** Human-readable label (defaults to name) */
+  label: string;
+  /** Optional unit suffix (e.g., 'ms', '%') */
+  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>;
+}
+
+/**
+ * Extract chart fields from a JSON Schema.
+ *
+ * Looks for properties with x-chart-type metadata and extracts
+ * relevant chart configuration.
+ *
+ * @param schema - JSON Schema object
+ * @returns Array of chart fields with metadata
+ */
+export function extractChartFields(
+  schema: Record<string, unknown> | null | undefined
+): ChartField[] {
+  if (!schema) return [];
+
+  const typed = schema as JsonSchema;
+  if (typed.type !== "object" || !typed.properties) return [];
+
+  const fields: ChartField[] = [];
+
+  for (const [name, prop] of Object.entries(typed.properties)) {
+    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({
+      name,
+      chartType,
+      label: prop["x-chart-label"] ?? formatFieldName(name),
+      unit: prop["x-chart-unit"],
+      schemaType,
+    });
+  }
+
+  return fields;
+}
+
+/**
+ * Convert camelCase or snake_case field name to human-readable label.
+ */
+function formatFieldName(name: string): string {
+  return name
+    .replaceAll(/([a-z])([A-Z])/g, "$1 $2") // camelCase
+    .replaceAll("_", " ") // snake_case
+    .replaceAll(/\b\w/g, (c) => c.toUpperCase()); // Capitalize
+}
+
+/**
+ * Get the value for a field from a data object.
+ */
+export function getFieldValue(
+  data: Record<string, unknown> | undefined,
+  fieldName: string
+): unknown {
+  if (!data) return undefined;
+  return data[fieldName];
+}