@checkstack/healthcheck-frontend 0.8.1 → 0.9.0

package/src/components/HealthCheckLatencyChart.tsx

@@ -18,133 +18,15 @@ interface HealthCheckLatencyChartProps {
 
 /**
  * Area chart showing health check latency over time.
- * Supports both raw per-run data and aggregated bucket data.
+ * Uses aggregated bucket data with average latency per bucket.
  * Uses HSL CSS variables for theming consistency.
  */
 export const HealthCheckLatencyChart: React.FC<
   HealthCheckLatencyChartProps
 > = ({ context, height = 200, showAverage = true }) => {
-  if (context.type === "aggregated") {
-    const buckets = context.buckets.filter((b) => b.avgLatencyMs !== undefined);
+  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(),
-      bucketEndTimestamp: new Date(d.bucketEnd).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;
-
-    // Use daily format for intervals >= 6 hours, otherwise include time
-    const timeFormat =
-      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
-        ? "MMM d"
-        : "MMM d, 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={["dataMin", "dataMax"]}
-            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 }) => {
-              // eslint-disable-next-line unicorn/no-null -- recharts requires null return, not undefined
-              if (!active || !payload?.length) return null;
-              const data = payload[0].payload as (typeof chartData)[number];
-              const startTime = format(
-                new Date(data.timestamp),
-                "MMM d, HH:mm",
-              );
-              const endTime = format(
-                new Date(data.bucketEndTimestamp),
-                "HH:mm",
-              );
-              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">
-                    {startTime} - {endTime}
-                  </p>
-                  <p className="font-medium">{data.latencyMs}ms (avg)</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) {
+  if (buckets.length === 0) {
     return (
       <div
         className="flex items-center justify-center text-muted-foreground"
@@ -155,10 +37,12 @@ export const HealthCheckLatencyChart: React.FC<
     );
   }
 
-  // Runs come in chronological order from API (oldest first, newest last)
-  const chartData = runs.map((d) => ({
-    timestamp: new Date(d.timestamp).getTime(),
-    latencyMs: d.latencyMs!,
+  const chartData = buckets.map((d) => ({
+    timestamp: new Date(d.bucketStart).getTime(),
+    bucketEndTimestamp: new Date(d.bucketEnd).getTime(),
+    latencyMs: d.avgLatencyMs!,
+    minLatencyMs: d.minLatencyMs,
+    maxLatencyMs: d.maxLatencyMs,
   }));
 
   const avgLatency =
@@ -166,6 +50,12 @@ export const HealthCheckLatencyChart: React.FC<
       ? chartData.reduce((sum, d) => sum + d.latencyMs, 0) / chartData.length
       : 0;
 
+  // Use daily format for intervals >= 6 hours, otherwise include time
+  const timeFormat =
+    (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+      ? "MMM d"
+      : "MMM d, HH:mm";
+
   return (
     <ResponsiveContainer width="100%" height={height}>
       <AreaChart data={chartData}>
@@ -187,7 +77,7 @@ export const HealthCheckLatencyChart: React.FC<
           dataKey="timestamp"
           type="number"
           domain={["dataMin", "dataMax"]}
-          tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
+          tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
           stroke="hsl(var(--muted-foreground))"
           fontSize={12}
         />
@@ -201,6 +91,8 @@ export const HealthCheckLatencyChart: React.FC<
             // eslint-disable-next-line unicorn/no-null -- recharts requires null return, not undefined
             if (!active || !payload?.length) return null;
             const data = payload[0].payload as (typeof chartData)[number];
+            const startTime = format(new Date(data.timestamp), "MMM d, HH:mm");
+            const endTime = format(new Date(data.bucketEndTimestamp), "HH:mm");
             return (
               <div
                 className="rounded-md border bg-popover p-2 text-sm shadow-md"
@@ -210,9 +102,9 @@ export const HealthCheckLatencyChart: React.FC<
                 }}
               >
                 <p className="text-muted-foreground">
-                  {format(new Date(data.timestamp), "MMM d, HH:mm:ss")}
+                  {startTime} - {endTime}
                 </p>
-                <p className="font-medium">{data.latencyMs}ms</p>
+                <p className="font-medium">{data.latencyMs}ms (avg)</p>
               </div>
             );
           }}

package/src/components/HealthCheckStatusTimeline.tsx

@@ -1,7 +1,6 @@
 import { format } from "date-fns";
 import type { HealthCheckDiagramSlotContext } from "../slots";
 import { SparklineTooltip } from "./SparklineTooltip";
-import { downsampleSparkline } from "../utils/sparkline-downsampling";
 
 interface HealthCheckStatusTimelineProps {
   context: HealthCheckDiagramSlotContext;
@@ -15,104 +14,15 @@ const statusColors = {
 };
 
 /**
- * Timeline bar chart showing health check status changes over time.
- * For raw data: each bar represents a check run with color indicating status.
- * For aggregated data: each bar shows the distribution of statuses in that bucket.
+ * Timeline bar chart showing health check status distribution over time.
+ * Each bar shows the distribution of statuses in that aggregated bucket.
  */
 export const HealthCheckStatusTimeline: React.FC<
   HealthCheckStatusTimelineProps
 > = ({ context, height = 60 }) => {
-  if (context.type === "aggregated") {
-    const buckets = context.buckets;
+  const buckets = context.buckets;
 
-    if (buckets.length === 0) {
-      return (
-        <div
-          className="flex items-center justify-center text-muted-foreground"
-          style={{ height }}
-        >
-          No status data available
-        </div>
-      );
-    }
-
-    // Use daily format for intervals >= 6 hours, otherwise include time
-    const timeFormat =
-      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
-        ? "MMM d"
-        : "MMM d HH:mm";
-
-    // Calculate time range for labels
-    const firstTime = new Date(buckets[0].bucketStart).getTime();
-    const lastTime = new Date(buckets.at(-1)!.bucketStart).getTime();
-
-    return (
-      <div style={{ height }} className="flex flex-col justify-between">
-        {/* Status strip - equal width stacked segments for each bucket */}
-        <div className="flex h-4 gap-px rounded-md bg-muted/30">
-          {buckets.map((bucket, index) => {
-            const total = bucket.runCount || 1;
-            const healthyPct = (bucket.healthyCount / total) * 100;
-            const degradedPct = (bucket.degradedCount / total) * 100;
-            const unhealthyPct = (bucket.unhealthyCount / total) * 100;
-
-            // Use actual bucket end time from response (critical for last bucket which extends to query end)
-            const bucketStart = new Date(bucket.bucketStart);
-            const bucketEnd = new Date(bucket.bucketEnd);
-            const timeSpan = `${format(bucketStart, "MMM d, HH:mm")} - ${format(bucketEnd, "HH:mm")}`;
-
-            return (
-              <SparklineTooltip
-                key={index}
-                content={`${timeSpan}\nHealthy: ${bucket.healthyCount}\nDegraded: ${bucket.degradedCount}\nUnhealthy: ${bucket.unhealthyCount}`}
-              >
-                <div className="flex-1 h-full flex flex-col cursor-pointer group">
-                  {bucket.healthyCount > 0 && (
-                    <div
-                      className="w-full transition-opacity group-hover:opacity-80"
-                      style={{
-                        height: `${healthyPct}%`,
-                        backgroundColor: statusColors.healthy,
-                      }}
-                    />
-                  )}
-                  {bucket.degradedCount > 0 && (
-                    <div
-                      className="w-full transition-opacity group-hover:opacity-80"
-                      style={{
-                        height: `${degradedPct}%`,
-                        backgroundColor: statusColors.degraded,
-                      }}
-                    />
-                  )}
-                  {bucket.unhealthyCount > 0 && (
-                    <div
-                      className="w-full transition-opacity group-hover:opacity-80"
-                      style={{
-                        height: `${unhealthyPct}%`,
-                        backgroundColor: statusColors.unhealthy,
-                      }}
-                    />
-                  )}
-                </div>
-              </SparklineTooltip>
-            );
-          })}
-        </div>
-
-        {/* Time axis labels */}
-        <div className="flex justify-between text-xs text-muted-foreground mt-1">
-          <span>{format(new Date(firstTime), timeFormat)}</span>
-          <span>{format(new Date(lastTime), timeFormat)}</span>
-        </div>
-      </div>
-    );
-  }
-
-  // Raw data path - use a continuous strip visualization
-  const runs = context.runs;
-
-  if (runs.length === 0) {
+  if (buckets.length === 0) {
     return (
       <div
         className="flex items-center justify-center text-muted-foreground"
@@ -123,74 +33,74 @@ export const HealthCheckStatusTimeline: React.FC<
     );
   }
 
-  // Runs come in chronological order from API (oldest first, newest last)
-  // No sorting needed
+  // Use daily format for intervals >= 6 hours, otherwise include time
+  const timeFormat =
+    (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+      ? "MMM d"
+      : "MMM d HH:mm";
 
   // Calculate time range for labels
-  const firstTime = new Date(runs[0].timestamp).getTime();
-  const lastTime = new Date(runs.at(-1)!.timestamp).getTime();
-  const totalRange = lastTime - firstTime;
+  const firstTime = new Date(buckets[0].bucketStart).getTime();
+  const lastTime = new Date(buckets.at(-1)!.bucketStart).getTime();
 
   return (
     <div style={{ height }} className="flex flex-col justify-between">
-      {/* Status strip - equal width segments for clarity */}
-      {(() => {
-        // Prepare runs with status info for downsampling
-        const runsWithStatus = runs.map((run) => ({
-          ...run,
-          passed: run.status === "healthy",
-          timeLabel: format(new Date(run.timestamp), "MMM d, HH:mm:ss"),
-        }));
-
-        const buckets = downsampleSparkline(runsWithStatus);
-
-        // Determine bucket color based on worst status in bucket
-        const getBucketColor = (
-          items: typeof runsWithStatus,
-        ): keyof typeof statusColors => {
-          if (items.some((r) => r.status === "unhealthy")) return "unhealthy";
-          if (items.some((r) => r.status === "degraded")) return "degraded";
-          return "healthy";
-        };
-
-        return (
-          <div className="flex h-4 gap-px rounded-md bg-muted/30">
-            {buckets.map((bucket, index) => {
-              const bucketStatus = getBucketColor(bucket.items);
-              const statusCounts = {
-                healthy: bucket.items.filter((r) => r.status === "healthy")
-                  .length,
-                degraded: bucket.items.filter((r) => r.status === "degraded")
-                  .length,
-                unhealthy: bucket.items.filter((r) => r.status === "unhealthy")
-                  .length,
-              };
-              const tooltip =
-                bucket.items.length === 1
-                  ? `${bucket.timeLabel} - ${bucket.items[0].status}`
-                  : `${bucket.timeLabel}\nHealthy: ${statusCounts.healthy}, Degraded: ${statusCounts.degraded}, Unhealthy: ${statusCounts.unhealthy}`;
-              return (
-                <SparklineTooltip key={index} content={tooltip}>
+      {/* Status strip - equal width stacked segments for each bucket */}
+      <div className="flex h-4 gap-px rounded-md bg-muted/30">
+        {buckets.map((bucket, index) => {
+          const total = bucket.runCount || 1;
+          const healthyPct = (bucket.healthyCount / total) * 100;
+          const degradedPct = (bucket.degradedCount / total) * 100;
+          const unhealthyPct = (bucket.unhealthyCount / total) * 100;
+
+          // Use actual bucket end time from response (critical for last bucket which extends to query end)
+          const bucketStart = new Date(bucket.bucketStart);
+          const bucketEnd = new Date(bucket.bucketEnd);
+          const timeSpan = `${format(bucketStart, "MMM d, HH:mm")} - ${format(bucketEnd, "HH:mm")}`;
+
+          return (
+            <SparklineTooltip
+              key={index}
+              content={`${timeSpan}\nHealthy: ${bucket.healthyCount}\nDegraded: ${bucket.degradedCount}\nUnhealthy: ${bucket.unhealthyCount}`}
+            >
+              <div className="flex-1 h-full flex flex-col cursor-pointer group">
+                {bucket.healthyCount > 0 && (
+                  <div
+                    className="w-full transition-opacity group-hover:opacity-80"
+                    style={{
+                      height: `${healthyPct}%`,
+                      backgroundColor: statusColors.healthy,
+                    }}
+                  />
+                )}
+                {bucket.degradedCount > 0 && (
+                  <div
+                    className="w-full transition-opacity group-hover:opacity-80"
+                    style={{
+                      height: `${degradedPct}%`,
+                      backgroundColor: statusColors.degraded,
+                    }}
+                  />
+                )}
+                {bucket.unhealthyCount > 0 && (
                   <div
-                    className="flex-1 h-full transition-opacity hover:opacity-80 cursor-pointer"
+                    className="w-full transition-opacity group-hover:opacity-80"
                     style={{
-                      backgroundColor: statusColors[bucketStatus],
+                      height: `${unhealthyPct}%`,
+                      backgroundColor: statusColors.unhealthy,
                     }}
                   />
-                </SparklineTooltip>
-              );
-            })}
-          </div>
-        );
-      })()}
+                )}
+              </div>
+            </SparklineTooltip>
+          );
+        })}
+      </div>
 
       {/* Time axis labels */}
       <div className="flex justify-between text-xs text-muted-foreground mt-1">
-        <span>{format(new Date(firstTime), "HH:mm")}</span>
-        {totalRange > 3_600_000 && (
-          <span>{format(new Date(firstTime + totalRange / 2), "HH:mm")}</span>
-        )}
-        <span>{format(new Date(lastTime), "HH:mm")}</span>
+        <span>{format(new Date(firstTime), timeFormat)}</span>
+        <span>{format(new Date(lastTime), timeFormat)}</span>
       </div>
     </div>
   );

package/src/components/HealthCheckSystemOverview.tsx

@@ -155,7 +155,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     context: chartContext,
     loading: chartLoading,
     isFetching: chartFetching,
-    isAggregated,
     bucketIntervalSeconds,
   } = useHealthCheckData({
     systemId,
@@ -163,7 +162,6 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     strategyId: item.strategyId,
     dateRange,
     isRollingPreset,
-    limit: 1000,
     // Update endDate to current time when new runs are detected (only for rolling presets)
     onDateRangeRefresh: (newEndDate) => {
       setDateRange((prev) => ({ ...prev, endDate: newEndDate }));
@@ -233,10 +231,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     }
 
     // Check if we have data to show
-    const hasData =
-      chartContext.type === "raw"
-        ? chartContext.runs.length > 0
-        : chartContext.buckets.length > 0;
+    const hasData = chartContext.buckets.length > 0;
 
     if (!hasData) {
       return;
@@ -244,7 +239,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
 
     return (
       <div className="space-y-4">
-        {isAggregated && bucketIntervalSeconds && (
+        {bucketIntervalSeconds && (
           <AggregatedDataBanner
             bucketIntervalSeconds={bucketIntervalSeconds}
             checkIntervalSeconds={item.intervalSeconds}
@@ -265,9 +260,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         <Card>
           <CardHeader className="pb-2">
             <CardTitle className="text-sm font-medium">
-              {isAggregated
-                ? "Average Execution Duration"
-                : "Execution Duration"}
+              Average Execution Duration
             </CardTitle>
           </CardHeader>
           <CardContent>