@checkstack/healthcheck-frontend 0.0.2

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];
+}

package/src/auto-charts/useStrategySchemas.ts

@@ -0,0 +1,62 @@
+/**
+ * Hook to fetch and cache strategy schemas.
+ */
+
+import { useEffect, useState } from "react";
+import { useApi } from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+
+interface StrategySchemas {
+  resultSchema: Record<string, unknown> | undefined;
+  aggregatedResultSchema: Record<string, unknown> | undefined;
+}
+
+/**
+ * Fetch and cache strategy schemas for auto-chart rendering.
+ *
+ * @param strategyId - The strategy ID to fetch schemas for
+ * @returns Schemas for the strategy, or undefined if not found
+ */
+export function useStrategySchemas(strategyId: string): {
+  schemas: StrategySchemas | undefined;
+  loading: boolean;
+} {
+  const api = useApi(healthCheckApiRef);
+  const [schemas, setSchemas] = useState<StrategySchemas | undefined>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchSchemas() {
+      try {
+        const strategies = await api.getStrategies();
+        const strategy = strategies.find((s) => s.id === strategyId);
+
+        if (!cancelled && strategy) {
+          setSchemas({
+            resultSchema:
+              (strategy.resultSchema as Record<string, unknown>) ?? undefined,
+            aggregatedResultSchema:
+              (strategy.aggregatedResultSchema as Record<string, unknown>) ??
+              undefined,
+          });
+        }
+      } catch (error) {
+        console.error("Failed to fetch strategy schemas:", error);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchSchemas();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [api, strategyId]);
+
+  return { schemas, loading };
+}

package/src/components/AggregatedDataBanner.tsx

@@ -0,0 +1,24 @@
+import { InfoBanner } from "@checkstack/ui";
+
+interface AggregatedDataBannerProps {
+  bucketSize: "hourly" | "daily";
+  rawRetentionDays: number;
+}
+
+/**
+ * Banner shown when viewing aggregated health check data.
+ * Informs users about the aggregation level and how to see detailed data.
+ */
+export function AggregatedDataBanner({
+  bucketSize,
+  rawRetentionDays,
+}: AggregatedDataBannerProps) {
+  const bucketLabel = bucketSize === "hourly" ? "hourly" : "daily";
+
+  return (
+    <InfoBanner variant="info">
+      Showing {bucketLabel} aggregates. For per-run data, select a range ≤{" "}
+      {rawRetentionDays} days.
+    </InfoBanner>
+  );
+}

package/src/components/HealthCheckDiagram.tsx

@@ -0,0 +1,88 @@
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import { LoadingSpinner, InfoBanner } from "@checkstack/ui";
+import { useHealthCheckData } from "../hooks/useHealthCheckData";
+import { HealthCheckDiagramSlot } from "../slots";
+import { AggregatedDataBanner } from "./AggregatedDataBanner";
+
+interface HealthCheckDiagramProps {
+  systemId: string;
+  configurationId: string;
+  strategyId: string;
+  dateRange: {
+    startDate: Date;
+    endDate: Date;
+  };
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Wrapper component that handles loading health check data and rendering
+ * the diagram extension slot with the appropriate context (raw or aggregated).
+ *
+ * Automatically determines whether to use raw or aggregated data based on
+ * the date range and the configured rawRetentionDays.
+ */
+export function HealthCheckDiagram({
+  systemId,
+  configurationId,
+  strategyId,
+  dateRange,
+  limit,
+  offset,
+}: HealthCheckDiagramProps) {
+  const {
+    context,
+    loading,
+    hasPermission,
+    permissionLoading,
+    isAggregated,
+    retentionConfig,
+  } = useHealthCheckData({
+    systemId,
+    configurationId,
+    strategyId,
+    dateRange,
+    limit,
+    offset,
+  });
+
+  if (permissionLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!hasPermission) {
+    return (
+      <InfoBanner variant="info">
+        Additional strategy-specific visualizations are available with the
+        &quot;Read Health Check Details&quot; permission.
+      </InfoBanner>
+    );
+  }
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!context) {
+    return;
+  }
+
+  // Determine bucket size from context for aggregated data
+  const bucketSize =
+    context.type === "aggregated" && context.buckets.length > 0
+      ? context.buckets[0].bucketSize
+      : "hourly";
+
+  return (
+    <>
+      {isAggregated && (
+        <AggregatedDataBanner
+          bucketSize={bucketSize}
+          rawRetentionDays={retentionConfig.rawRetentionDays}
+        />
+      )}
+      <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />
+    </>
+  );
+}

package/src/components/HealthCheckEditor.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import {
+  HealthCheckConfiguration,
+  HealthCheckStrategyDto,
+  CreateHealthCheckConfiguration,
+} from "@checkstack/healthcheck-common";
+import {
+  Button,
+  Input,
+  Label,
+  PluginConfigForm,
+  useToast,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@checkstack/ui";
+
+interface HealthCheckEditorProps {
+  strategies: HealthCheckStrategyDto[];
+  initialData?: HealthCheckConfiguration;
+  onSave: (data: CreateHealthCheckConfiguration) => Promise<void>;
+  onCancel: () => void;
+  open: boolean;
+}
+
+export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
+  strategies,
+  initialData,
+  onSave,
+  onCancel,
+  open,
+}) => {
+  const [name, setName] = useState(initialData?.name || "");
+  const [strategyId, setStrategyId] = useState(initialData?.strategyId || "");
+  const [interval, setInterval] = useState(
+    initialData?.intervalSeconds?.toString() || "60"
+  );
+  const [config, setConfig] = useState<Record<string, unknown>>(
+    (initialData?.config as Record<string, unknown>) || {}
+  );
+
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+
+  // Reset form when dialog opens with new data
+  React.useEffect(() => {
+    if (open) {
+      setName(initialData?.name || "");
+      setStrategyId(initialData?.strategyId || "");
+      setInterval(initialData?.intervalSeconds?.toString() || "60");
+      setConfig((initialData?.config as Record<string, unknown>) || {});
+    }
+  }, [open, initialData]);
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await onSave({
+        name,
+        strategyId,
+        intervalSeconds: Number.parseInt(interval, 10),
+        config,
+      });
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save health check";
+      toast.error(message);
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
+      <DialogContent size="lg">
+        <form onSubmit={handleSave}>
+          <DialogHeader>
+            <DialogTitle>
+              {initialData ? "Edit Health Check" : "Create Health Check"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="interval">Interval (seconds)</Label>
+              <Input
+                id="interval"
+                type="number"
+                min="1"
+                value={interval}
+                onChange={(e) => setInterval(e.target.value)}
+                required
+              />
+            </div>
+
+            <PluginConfigForm
+              label="Strategy"
+              plugins={strategies}
+              selectedPluginId={strategyId}
+              onPluginChange={(id) => {
+                setStrategyId(id);
+                setConfig({});
+              }}
+              config={config}
+              onConfigChange={setConfig}
+              disabled={!!initialData}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : "Save"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/HealthCheckHistory.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { healthCheckApiRef, HealthCheckRunPublic } from "../api";
+import { SystemDetailsSlot } from "@checkstack/catalog-common";
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  HealthBadge,
+  LoadingSpinner,
+} from "@checkstack/ui";
+import { formatDistanceToNow } from "date-fns";
+
+// Props inferred from SystemDetailsSlot context, with optional additional props
+type SlotProps = SlotContext<typeof SystemDetailsSlot>;
+interface Props extends SlotProps {
+  configurationId?: string;
+  limit?: number;
+}
+
+export const HealthCheckHistory: React.FC<SlotProps> = (props) => {
+  const { system, configurationId, limit } = props as Props;
+  const systemId = system?.id;
+
+  const healthCheckApi = useApi(healthCheckApiRef);
+  const [history, setHistory] = useState<HealthCheckRunPublic[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // If it's used in a context that doesn't provide systemId or configurationId,
+    // we might want to skip or handle it.
+    healthCheckApi
+      .getHistory({ systemId, configurationId, limit })
+      .then((response) => setHistory(response.runs))
+      .finally(() => setLoading(false));
+  }, [healthCheckApi, systemId, configurationId, limit]);
+
+  if (loading) return <LoadingSpinner />;
+
+  if (history.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        No health check history found.
+      </p>
+    );
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Status</TableHead>
+            <TableHead>Time</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {history.map((run) => (
+            <TableRow key={run.id}>
+              <TableCell>
+                <HealthBadge status={run.status} />
+              </TableCell>
+              <TableCell className="text-sm text-muted-foreground">
+                {run.timestamp
+                  ? formatDistanceToNow(new Date(run.timestamp), {
+                      addSuffix: true,
+                    })
+                  : "Unknown"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};

package/src/components/HealthCheckLatencyChart.tsx

@@ -0,0 +1,168 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+} from "recharts";
+import { format } from "date-fns";
+
+export interface LatencyDataPoint {
+  timestamp: Date;
+  latencyMs: number;
+  status: "healthy" | "degraded" | "unhealthy";
+}
+
+export interface AggregatedLatencyDataPoint {
+  bucketStart: Date;
+  avgLatencyMs: number;
+  minLatencyMs?: number;
+  maxLatencyMs?: number;
+  bucketSize: "hourly" | "daily";
+}
+
+type RawLatencyChartProps = {
+  type: "raw";
+  data: LatencyDataPoint[];
+  height?: number;
+  showAverage?: boolean;
+};
+
+type AggregatedLatencyChartProps = {
+  type: "aggregated";
+  data: AggregatedLatencyDataPoint[];
+  height?: number;
+  showAverage?: boolean;
+};
+
+type HealthCheckLatencyChartProps =
+  | RawLatencyChartProps
+  | AggregatedLatencyChartProps;
+
+/**
+ * Area chart showing health check latency over time.
+ * Supports both raw per-run data and aggregated bucket data.
+ * Uses HSL CSS variables for theming consistency.
+ */
+export const HealthCheckLatencyChart: React.FC<HealthCheckLatencyChartProps> = (
+  props
+) => {
+  const { height = 200, showAverage = true } = props;
+
+  if (props.data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground"
+        style={{ height }}
+      >
+        No latency data available
+      </div>
+    );
+  }
+
+  // Transform data based on type
+  const isAggregated = props.type === "aggregated";
+
+  const chartData = isAggregated
+    ? (props.data as AggregatedLatencyDataPoint[]).map((d) => ({
+        timestamp: d.bucketStart.getTime(),
+        latencyMs: d.avgLatencyMs,
+        minLatencyMs: d.minLatencyMs,
+        maxLatencyMs: d.maxLatencyMs,
+      }))
+    : (props.data as LatencyDataPoint[]).toReversed().map((d) => ({
+        timestamp: d.timestamp.getTime(),
+        latencyMs: d.latencyMs,
+      }));
+
+  // Calculate average latency
+  const avgLatency =
+    chartData.length > 0
+      ? chartData.reduce((sum, d) => sum + d.latencyMs, 0) / chartData.length
+      : 0;
+
+  // Format based on bucket size for aggregated data
+  const timeFormat = isAggregated
+    ? (props.data as AggregatedLatencyDataPoint[])[0]?.bucketSize === "daily"
+      ? "MMM d"
+      : "MMM d HH:mm"
+    : "HH:mm";
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <AreaChart data={chartData}>
+        <defs>
+          <linearGradient id="latencyGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop
+              offset="5%"
+              stopColor="hsl(var(--primary))"
+              stopOpacity={0.3}
+            />
+            <stop
+              offset="95%"
+              stopColor="hsl(var(--primary))"
+              stopOpacity={0}
+            />
+          </linearGradient>
+        </defs>
+        <XAxis
+          dataKey="timestamp"
+          type="number"
+          domain={["auto", "auto"]}
+          tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
+          stroke="hsl(var(--muted-foreground))"
+          fontSize={12}
+        />
+        <YAxis
+          stroke="hsl(var(--muted-foreground))"
+          fontSize={12}
+          tickFormatter={(v: number) => `${v}ms`}
+        />
+        <Tooltip<number, "latencyMs">
+          content={({ active, payload }) => {
+            if (!active || !payload?.length) return;
+            // Note: payload[0].payload is typed as `any` in recharts - this is a recharts limitation.
+            // The Payload.payload property holds our data row but recharts can't infer its shape.
+            const data = payload[0].payload as (typeof chartData)[number];
+            return (
+              <div
+                className="rounded-md border bg-popover p-2 text-sm shadow-md"
+                style={{
+                  backgroundColor: "hsl(var(--popover))",
+                  border: "1px solid hsl(var(--border))",
+                }}
+              >
+                <p className="text-muted-foreground">
+                  {format(new Date(data.timestamp), "MMM d, HH:mm:ss")}
+                </p>
+                <p className="font-medium">{data.latencyMs}ms</p>
+              </div>
+            );
+          }}
+        />
+        {showAverage && (
+          <ReferenceLine
+            y={avgLatency}
+            stroke="hsl(var(--muted-foreground))"
+            strokeDasharray="3 3"
+            label={{
+              value: `Avg: ${avgLatency.toFixed(0)}ms`,
+              position: "right",
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 12,
+            }}
+          />
+        )}
+        <Area
+          type="monotone"
+          dataKey="latencyMs"
+          stroke="hsl(var(--primary))"
+          fill="url(#latencyGradient)"
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};