@checkstack/healthcheck-frontend 0.0.2 → 0.1.0

package/src/components/HealthCheckLatencyChart.tsx

@@ -8,50 +8,130 @@ import {
   ReferenceLine,
 } from "recharts";
 import { format } from "date-fns";
+import type { HealthCheckDiagramSlotContext } from "../slots";
 
-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[];
+interface HealthCheckLatencyChartProps {
+  context: HealthCheckDiagramSlotContext;
   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;
+export const HealthCheckLatencyChart: React.FC<
+  HealthCheckLatencyChartProps
+> = ({ context, height = 200, showAverage = true }) => {
+  if (context.type === "aggregated") {
+    const buckets = context.buckets.filter((b) => b.avgLatencyMs !== undefined);
+
+    if (buckets.length === 0) {
+      return (
+        <div
+          className="flex items-center justify-center text-muted-foreground"
+          style={{ height }}
+        >
+          No latency data available
+        </div>
+      );
+    }
+
+    const chartData = buckets.map((d) => ({
+      timestamp: new Date(d.bucketStart).getTime(),
+      latencyMs: d.avgLatencyMs!,
+      minLatencyMs: d.minLatencyMs,
+      maxLatencyMs: d.maxLatencyMs,
+    }));
+
+    const avgLatency =
+      chartData.length > 0
+        ? chartData.reduce((sum, d) => sum + d.latencyMs, 0) / chartData.length
+        : 0;
+
+    const timeFormat =
+      buckets[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
 
-  if (props.data.length === 0) {
+    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;
+              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>
+    );
+  }
+
+  // Raw data path
+  const runs = context.runs.filter((r) => r.latencyMs !== undefined);
+
+  if (runs.length === 0) {
     return (
       <div
         className="flex items-center justify-center text-muted-foreground"
@@ -62,34 +142,16 @@ export const HealthCheckLatencyChart: React.FC<HealthCheckLatencyChartProps> = (
     );
   }
 
-  // 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,
-      }));
+  const chartData = runs.toReversed().map((d) => ({
+    timestamp: new Date(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}>
@@ -111,7 +173,7 @@ export const HealthCheckLatencyChart: React.FC<HealthCheckLatencyChartProps> = (
           dataKey="timestamp"
           type="number"
           domain={["auto", "auto"]}
-          tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
+          tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
           stroke="hsl(var(--muted-foreground))"
           fontSize={12}
         />
@@ -123,8 +185,6 @@ export const HealthCheckLatencyChart: React.FC<HealthCheckLatencyChartProps> = (
         <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

package/src/components/HealthCheckRunsTable.tsx

@@ -153,12 +153,7 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
                         colSpan={calculatedColSpan}
                         className="bg-muted/30 p-4"
                       >
-                        <div className="space-y-2">
-                          <h4 className="text-sm font-medium">Result Data</h4>
-                          <pre className="text-xs bg-card rounded-md p-3 overflow-auto max-h-64 border">
-                            {JSON.stringify(run.result, undefined, 2)}
-                          </pre>
-                        </div>
+                        <ExpandedResultView result={run.result} />
                       </TableCell>
                     </TableRow>
                   )}
@@ -185,3 +180,144 @@ export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
     </>
   );
 };
+
+// =============================================================================
+// EXPANDED RESULT VIEW
+// =============================================================================
+
+interface ExpandedResultViewProps {
+  result: Record<string, unknown>;
+}
+
+/**
+ * Displays the result data in a structured format.
+ * Shows collector results as cards with key-value pairs.
+ */
+function ExpandedResultView({ result }: ExpandedResultViewProps) {
+  const metadata = result.metadata as Record<string, unknown> | undefined;
+  const rawCollectors = metadata?.collectors;
+
+  // Type guard for collectors object
+  const collectors: Record<string, Record<string, unknown>> | undefined =
+    rawCollectors &&
+    typeof rawCollectors === "object" &&
+    !Array.isArray(rawCollectors)
+      ? (rawCollectors as Record<string, Record<string, unknown>>)
+      : undefined;
+
+  // Check if we have collectors to display
+  const collectorEntries = collectors ? Object.entries(collectors) : [];
+
+  // Extract connection time as typed value
+  const connectionTimeMs = metadata?.connectionTimeMs as number | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">Status: </span>
+          <span className="font-medium">{String(result.status)}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Latency: </span>
+          <span className="font-medium">{String(result.latencyMs)}ms</span>
+        </div>
+        {connectionTimeMs !== undefined && (
+          <div>
+            <span className="text-muted-foreground">Connection: </span>
+            <span className="font-medium">{connectionTimeMs}ms</span>
+          </div>
+        )}
+      </div>
+
+      {collectorEntries.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Collector Results</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {collectorEntries.map(([collectorId, collectorResult]) => (
+              <CollectorResultCard
+                key={collectorId}
+                collectorId={collectorId}
+                result={collectorResult}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {result.message ? (
+        <div className="text-sm text-muted-foreground">
+          {String(result.message)}
+        </div>
+      ) : undefined}
+    </div>
+  );
+}
+
+interface CollectorResultCardProps {
+  collectorId: string;
+  result: Record<string, unknown>;
+}
+
+/**
+ * Card displaying a single collector's result values.
+ */
+function CollectorResultCard({
+  collectorId,
+  result,
+}: CollectorResultCardProps) {
+  if (!result || typeof result !== "object") {
+    return;
+  }
+
+  // Filter out null/undefined values
+  const entries = Object.entries(result).filter(
+    ([, value]) => value !== null && value !== undefined
+  );
+
+  return (
+    <div className="rounded-md border bg-card p-3 space-y-2">
+      <h5 className="text-sm font-medium text-primary">{collectorId}</h5>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
+        {entries.map(([key, value]) => (
+          <div key={key} className="contents">
+            <span className="text-muted-foreground truncate">
+              {formatKey(key)}
+            </span>
+            <span className="font-mono text-xs truncate" title={String(value)}>
+              {formatValue(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Format a camelCase key to a readable label.
+ */
+function formatKey(key: string): string {
+  return key
+    .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
+    .replaceAll(/^./, (c) => c.toUpperCase());
+}
+
+/**
+ * Format a value for display.
+ */
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+  }
+  if (Array.isArray(value)) {
+    return value.length > 3
+      ? `[${value.slice(0, 3).join(", ")}…]`
+      : `[${value.join(", ")}]`;
+  }
+  if (typeof value === "object") return JSON.stringify(value);
+  const str = String(value);
+  return str.length > 50 ? `${str.slice(0, 47)}…` : str;
+}

package/src/components/HealthCheckStatusTimeline.tsx

@@ -7,36 +7,12 @@ import {
   Cell,
 } from "recharts";
 import { format } from "date-fns";
+import type { HealthCheckDiagramSlotContext } from "../slots";
 
-export interface StatusDataPoint {
-  timestamp: Date;
-  status: "healthy" | "degraded" | "unhealthy";
-}
-
-export interface AggregatedStatusDataPoint {
-  bucketStart: Date;
-  healthyCount: number;
-  degradedCount: number;
-  unhealthyCount: number;
-  runCount: number;
-  bucketSize: "hourly" | "daily";
-}
-
-type RawStatusTimelineProps = {
-  type: "raw";
-  data: StatusDataPoint[];
+interface HealthCheckStatusTimelineProps {
+  context: HealthCheckDiagramSlotContext;
   height?: number;
-};
-
-type AggregatedStatusTimelineProps = {
-  type: "aggregated";
-  data: AggregatedStatusDataPoint[];
-  height?: number;
-};
-
-type HealthCheckStatusTimelineProps =
-  | RawStatusTimelineProps
-  | AggregatedStatusTimelineProps;
+}
 
 const statusColors = {
   healthy: "hsl(var(--success))",
@@ -51,28 +27,23 @@ const statusColors = {
  */
 export const HealthCheckStatusTimeline: React.FC<
   HealthCheckStatusTimelineProps
-> = (props) => {
-  const { height = 60 } = props;
+> = ({ context, height = 60 }) => {
+  if (context.type === "aggregated") {
+    const buckets = context.buckets;
 
-  if (props.data.length === 0) {
-    return (
-      <div
-        className="flex items-center justify-center text-muted-foreground"
-        style={{ height }}
-      >
-        No status data available
-      </div>
-    );
-  }
-
-  const isAggregated = props.type === "aggregated";
+    if (buckets.length === 0) {
+      return (
+        <div
+          className="flex items-center justify-center text-muted-foreground"
+          style={{ height }}
+        >
+          No status data available
+        </div>
+      );
+    }
 
-  // For raw data: transform to chart format
-  // For aggregated data: use stacked bar format
-  if (isAggregated) {
-    const aggData = props.data as AggregatedStatusDataPoint[];
-    const chartData = aggData.map((d) => ({
-      timestamp: d.bucketStart.getTime(),
+    const chartData = buckets.map((d) => ({
+      timestamp: new Date(d.bucketStart).getTime(),
       healthy: d.healthyCount,
       degraded: d.degradedCount,
       unhealthy: d.unhealthyCount,
@@ -80,7 +51,7 @@ export const HealthCheckStatusTimeline: React.FC<
     }));
 
     const timeFormat =
-      aggData[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+      buckets[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -137,9 +108,21 @@ export const HealthCheckStatusTimeline: React.FC<
   }
 
   // Raw data path
-  const rawData = props.data as StatusDataPoint[];
-  const chartData = rawData.toReversed().map((d) => ({
-    timestamp: d.timestamp.getTime(),
+  const runs = context.runs;
+
+  if (runs.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground"
+        style={{ height }}
+      >
+        No status data available
+      </div>
+    );
+  }
+
+  const chartData = runs.toReversed().map((d) => ({
+    timestamp: new Date(d.timestamp).getTime(),
     value: 1, // Fixed height for visibility
     status: d.status,
   }));