@checkstack/healthcheck-frontend 0.0.2 → 0.0.3

package/src/components/HealthCheckDiagram.tsx

@@ -1,74 +1,30 @@
 import { ExtensionSlot } from "@checkstack/frontend-api";
-import { LoadingSpinner, InfoBanner } from "@checkstack/ui";
-import { useHealthCheckData } from "../hooks/useHealthCheckData";
-import { HealthCheckDiagramSlot } from "../slots";
+import { InfoBanner } from "@checkstack/ui";
+import {
+  HealthCheckDiagramSlot,
+  type HealthCheckDiagramSlotContext,
+} from "../slots";
 import { AggregatedDataBanner } from "./AggregatedDataBanner";
 
 interface HealthCheckDiagramProps {
-  systemId: string;
-  configurationId: string;
-  strategyId: string;
-  dateRange: {
-    startDate: Date;
-    endDate: Date;
-  };
-  limit?: number;
-  offset?: number;
+  /** The context from useHealthCheckData - handles both raw and aggregated modes */
+  context: HealthCheckDiagramSlotContext;
+  /** Whether the data is aggregated (for showing the info banner) */
+  isAggregated?: boolean;
+  /** Raw retention days (for the info banner) */
+  rawRetentionDays?: 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.
+ * Component that renders the diagram extension slot with the provided context.
+ * Expects parent component to fetch data via useHealthCheckData and pass context.
  */
 export function HealthCheckDiagram({
-  systemId,
-  configurationId,
-  strategyId,
-  dateRange,
-  limit,
-  offset,
+  context,
+  isAggregated = false,
+  rawRetentionDays = 7,
 }: 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
+  // Determine bucket size from context for aggregated data info banner
   const bucketSize =
     context.type === "aggregated" && context.buckets.length > 0
       ? context.buckets[0].bucketSize
@@ -79,10 +35,31 @@ export function HealthCheckDiagram({
       {isAggregated && (
         <AggregatedDataBanner
           bucketSize={bucketSize}
-          rawRetentionDays={retentionConfig.rawRetentionDays}
+          rawRetentionDays={rawRetentionDays}
         />
       )}
       <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />
     </>
   );
 }
+
+/**
+ * Wrapper that shows permission message when user lacks access.
+ */
+export function HealthCheckDiagramPermissionGate({
+  hasPermission,
+  children,
+}: {
+  hasPermission: boolean;
+  children: React.ReactNode;
+}) {
+  if (!hasPermission) {
+    return (
+      <InfoBanner variant="info">
+        Additional strategy-specific visualizations are available with the
+        &quot;Read Health Check Details&quot; permission.
+      </InfoBanner>
+    );
+  }
+  return <>{children}</>;
+}

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/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,
   }));