@checkstack/healthcheck-frontend 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @checkstack/healthcheck-frontend
 
+## 0.9.0
+
+### Minor Changes
+
+- 1b9cb25: Unified chart data to always use aggregated history with fixed target points.
+
+  **Breaking Changes:**
+
+  - Removed `RawDiagramContext` type - chart context no longer has a `type` discriminator
+  - Removed `TypedHealthCheckRun` type export - charts only use aggregated buckets now
+  - Removed `createStrategyDiagramExtension` deprecated function
+  - Removed `isAggregated` and `retentionConfig` from `useHealthCheckData` return value
+
+  **Migration:**
+
+  - Strategy diagram extensions should use `createDiagramExtensionFactory` instead of `createStrategyDiagramExtension`
+  - Extensions no longer need separate `rawComponent` and `aggregatedComponent` - use a single `component` prop
+  - `HealthCheckDiagramSlotContext` now always contains `buckets` array (no `type` field)
+
+  **Benefits:**
+
+  - Simplified frontend logic - no more mode switching based on retention config
+  - Consistent chart visualization regardless of selected time range
+  - Backend's cross-tier aggregation engine automatically selects optimal data source
+
+  **Other Changes:**
+
+  - Added warning message when configuring sub-minute check intervals, alerting users about potential performance implications
+
+### Patch Changes
+
+- f1ebac2: - Fixed raw data visualization being cut off when viewing "Last 24 hours" timeframe. The `useHealthCheckData` hook was incorrectly applying pagination limits to chart data queries, causing only the oldest runs to be displayed when there were more runs than the limit. Charts now fetch all runs within the selected date range.
+  - Updated Status Timeline visualization for raw data to show stacked status distribution (green/yellow/red proportions) instead of the previous "worst status wins" approach. This makes the raw data view consistent with the aggregated data view.
+
 ## 0.8.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/auto-charts/AutoChartGrid.tsx

@@ -9,7 +9,6 @@ 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 "@checkstack/healthcheck-common";
 import { SparklineTooltip } from "../components/SparklineTooltip";
 import { Card, CardContent, CardHeader, CardTitle } from "@checkstack/ui";
 import {
@@ -28,10 +27,7 @@ import {
   RadialBar,
 } from "recharts";
 import { format } from "date-fns";
-import {
-  downsampleSparkline,
-  MAX_SPARKLINE_BARS,
-} from "../utils/sparkline-downsampling";
+import { MAX_SPARKLINE_BARS } from "../utils/sparkline-downsampling";
 
 interface AutoChartGridProps {
   context: HealthCheckDiagramSlotContext;
@@ -54,11 +50,8 @@ export function AutoChartGrid({ context }: AutoChartGridProps) {
     return;
   }
 
-  // Choose schema based on context type
-  const schema =
-    context.type === "raw"
-      ? schemas.resultSchema
-      : schemas.aggregatedResultSchema;
+  // Always use aggregated result schema
+  const schema = schemas.aggregatedResultSchema;
 
   if (!schema) {
     return;
@@ -211,38 +204,35 @@ function CollectorGroup({
 /**
  * Get all assertion results for a specific collector instance.
  * Returns array of results with timestamps/time spans in chronological order.
- *
- * For raw data: extracts run status with timestamp.
- * For aggregated data: uses bucket counts with time span.
+ * Uses bucket counts with time span from aggregated data.
  */
 function getAllAssertionResults(
   context: HealthCheckDiagramSlotContext,
   _instanceKey: string,
 ): { passed: boolean; errorMessage?: string; timeLabel?: string }[] {
-  if (context.type === "raw") {
-    return context.runs.map((run) => {
-      const result = run.result as StoredHealthCheckResult | undefined;
-      const isUnhealthy = result?.status === "unhealthy";
-      return {
-        passed: !isUnhealthy,
-        errorMessage: isUnhealthy ? result?.message : undefined,
-        timeLabel: format(new Date(run.timestamp), "MMM d, HH:mm:ss"),
-      };
-    });
-  }
-
-  // For aggregated data, return one result per bucket with time span
   return context.buckets.map((bucket) => {
     const failedCount = bucket.degradedCount + bucket.unhealthyCount;
     const passed = failedCount === 0;
     const bucketStart = new Date(bucket.bucketStart);
     const bucketEnd = new Date(bucket.bucketEnd);
     const timeSpan = `${format(bucketStart, "MMM d, HH:mm")} - ${format(bucketEnd, "HH:mm")}`;
+
+    // Build detailed error message showing breakdown by type
+    let errorMessage: string | undefined;
+    if (!passed) {
+      const parts: string[] = [];
+      if (bucket.unhealthyCount > 0) {
+        parts.push(`${bucket.unhealthyCount} unhealthy`);
+      }
+      if (bucket.degradedCount > 0) {
+        parts.push(`${bucket.degradedCount} degraded`);
+      }
+      errorMessage = `${parts.join(", ")} of ${bucket.runCount} runs`;
+    }
+
     return {
       passed,
-      errorMessage: passed
-        ? undefined
-        : `${failedCount} failed of ${bucket.runCount}`,
+      errorMessage,
       timeLabel: timeSpan,
     };
   });
@@ -319,39 +309,30 @@ function AssertionStatusCard({
           </div>
         )}
 
-        {/* Sparkline timeline - always show for historical context */}
-        {(() => {
-          const buckets = downsampleSparkline(results);
-          return (
-            <div className="flex h-2 gap-px rounded">
-              {buckets.map((bucket, index) => {
-                const passedCount = bucket.items.filter((r) => r.passed).length;
-                const failedCount = bucket.items.length - passedCount;
-                const tooltip = bucket.timeLabel
-                  ? bucket.items.length > 1
-                    ? `${bucket.timeLabel}\n${passedCount} passed, ${failedCount} failed`
-                    : `${bucket.timeLabel}\n${bucket.passed ? "Passed" : "Failed"}`
-                  : bucket.passed
-                    ? "Passed"
-                    : "Failed";
-                return (
-                  <SparklineTooltip key={index} content={tooltip}>
-                    <div
-                      className={`flex-1 h-full ${bucket.passed ? "bg-green-500" : "bg-red-500"} hover:opacity-80`}
-                    />
-                  </SparklineTooltip>
-                );
-              })}
-            </div>
-          );
-        })()}
+        {/* Sparkline timeline - render each bucket as a bar */}
+        <div className="flex h-2 gap-px rounded">
+          {results.map((result, index) => {
+            const tooltip = result.timeLabel
+              ? `${result.timeLabel}\n${result.passed ? "Passed" : result.errorMessage || "Failed"}`
+              : result.passed
+                ? "Passed"
+                : "Failed";
+            return (
+              <SparklineTooltip key={index} content={tooltip}>
+                <div
+                  className={`flex-1 h-full ${result.passed ? "bg-green-500" : "bg-red-500"} hover:opacity-80`}
+                />
+              </SparklineTooltip>
+            );
+          })}
+        </div>
       </CardContent>
     </Card>
   );
 }
 
 /**
- * Discover collector instances from actual run data.
+ * Discover collector instances from aggregated bucket data.
  * Returns a map from base collector ID (type) to array of instance UUIDs.
  */
 function discoverCollectorInstances(
@@ -376,21 +357,11 @@ function discoverCollectorInstances(
     }
   };
 
-  if (context.type === "raw") {
-    for (const run of context.runs) {
-      const result = run.result as StoredHealthCheckResult | undefined;
-      const collectors = result?.metadata?.collectors as
-        | Record<string, unknown>
-        | undefined;
-      addInstances(collectors);
-    }
-  } else {
-    for (const bucket of context.buckets) {
-      const collectors = (
-        bucket.aggregatedResult as Record<string, unknown> | undefined
-      )?.collectors as Record<string, unknown> | undefined;
-      addInstances(collectors);
-    }
+  for (const bucket of context.buckets) {
+    const collectors = (
+      bucket.aggregatedResult as Record<string, unknown> | undefined
+    )?.collectors as Record<string, unknown> | undefined;
+    addInstances(collectors);
   }
 
   // Convert sets to arrays
@@ -613,32 +584,23 @@ function BooleanRenderer({ field, context }: ChartRendererProps) {
         )}
       </div>
 
-      {/* Sparkline timeline - always show for historical context */}
-      {(() => {
-        const buckets = downsampleSparkline(valuesWithTime);
-        return (
-          <div className="flex h-2 gap-px rounded">
-            {buckets.map((bucket, index) => {
-              const yesCount = bucket.items.filter((r) => r.value).length;
-              const noCount = bucket.items.length - yesCount;
-              const tooltip = bucket.timeLabel
-                ? bucket.items.length > 1
-                  ? `${bucket.timeLabel}\n${yesCount} yes, ${noCount} no`
-                  : `${bucket.timeLabel}\n${bucket.passed ? "Yes" : "No"}`
-                : bucket.passed
-                  ? "Yes"
-                  : "No";
-              return (
-                <SparklineTooltip key={index} content={tooltip}>
-                  <div
-                    className={`flex-1 h-full ${bucket.passed ? "bg-green-500" : "bg-red-500"} hover:opacity-80`}
-                  />
-                </SparklineTooltip>
-              );
-            })}
-          </div>
-        );
-      })()}
+      {/* Sparkline timeline - render each value as a bar */}
+      <div className="flex h-2 gap-px rounded">
+        {valuesWithTime.map((item, index) => {
+          const tooltip = item.timeLabel
+            ? `${item.timeLabel}\n${item.value ? "Yes" : "No"}`
+            : item.value
+              ? "Yes"
+              : "No";
+          return (
+            <SparklineTooltip key={index} content={tooltip}>
+              <div
+                className={`flex-1 h-full ${item.value ? "bg-green-500" : "bg-red-500"} hover:opacity-80`}
+              />
+            </SparklineTooltip>
+          );
+        })}
+      </div>
     </div>
   );
 }
@@ -1029,9 +991,7 @@ function PieChartRenderer({ field, context }: ChartRendererProps) {
 
 /**
  * Get the aggregated value for a field from the context.
- *
- * For raw runs: returns the latest value from result.metadata
- * For aggregated buckets: combines record values (counters) across ALL buckets,
+ * Combines record values (counters) across ALL buckets,
  * or returns the latest for non-aggregatable types.
  */
 function getLatestValue(
@@ -1039,48 +999,31 @@ function getLatestValue(
   context: HealthCheckDiagramSlotContext,
   collectorId?: string,
 ): unknown {
-  if (context.type === "raw") {
-    const runs = context.runs;
-    if (runs.length === 0) return undefined;
-    // For raw runs, aggregate across all runs for record types
-    const allValues = runs.map((run) => {
-      const result = run.result as StoredHealthCheckResult | undefined;
-      return getFieldValue(result?.metadata, fieldName, collectorId);
-    });
-
-    // If the values are record types (like statusCodeCounts), combine them
-    const firstVal = allValues.find((v) => v !== undefined);
-    if (firstVal && typeof firstVal === "object" && !Array.isArray(firstVal)) {
-      return combineRecordValues(allValues as Record<string, number>[]);
-    }
-    // For simple values, return the latest (first in array since runs are newest-first)
-    return allValues.at(0);
-  } else {
-    const buckets = context.buckets;
-    if (buckets.length === 0) return undefined;
-
-    // Get all values for this field from all buckets
-    const allValues = buckets.map((bucket) =>
-      getFieldValue(
-        bucket.aggregatedResult as Record<string, unknown>,
-        fieldName,
-      ),
-    );
+  const buckets = context.buckets;
+  if (buckets.length === 0) return undefined;
+
+  // Get all values for this field from all buckets
+  const allValues = buckets.map((bucket) =>
+    getFieldValue(
+      bucket.aggregatedResult as Record<string, unknown>,
+      fieldName,
+      collectorId,
+    ),
+  );
 
-    // If the values are record types (like statusCodeCounts), combine them
-    const firstVal = allValues.find((v) => v !== undefined);
-    if (firstVal && typeof firstVal === "object" && !Array.isArray(firstVal)) {
-      return combineRecordValues(allValues as Record<string, number>[]);
-    }
-    // For simple values (like errorCount), sum them
-    if (typeof firstVal === "number") {
-      return allValues
-        .filter((v): v is number => typeof v === "number")
-        .reduce((sum, v) => sum + v, 0);
-    }
-    // For other types, return the latest (first in array since buckets are newest-first)
-    return allValues.at(0);
+  // If the values are record types (like statusCodeCounts), combine them
+  const firstVal = allValues.find((v) => v !== undefined);
+  if (firstVal && typeof firstVal === "object" && !Array.isArray(firstVal)) {
+    return combineRecordValues(allValues as Record<string, number>[]);
   }
+  // For simple values (like errorCount), sum them
+  if (typeof firstVal === "number") {
+    return allValues
+      .filter((v): v is number => typeof v === "number")
+      .reduce((sum, v) => sum + v, 0);
+  }
+  // For other types, return the latest
+  return allValues.at(-1);
 }
 
 /**
@@ -1103,7 +1046,7 @@ function combineRecordValues(
 }
 
 /**
- * Count occurrences of each unique value for a field across all runs/buckets.
+ * Count occurrences of each unique value for a field across all buckets.
  * Returns a record mapping each unique value to its count.
  */
 function getValueCounts(
@@ -1113,27 +1056,15 @@ function getValueCounts(
 ): Record<string, number> {
   const counts: Record<string, number> = {};
 
-  if (context.type === "raw") {
-    for (const run of context.runs) {
-      const result = run.result as StoredHealthCheckResult | undefined;
-      const value = getFieldValue(result?.metadata, fieldName, collectorId);
-      if (value !== undefined && value !== null) {
-        const key = String(value);
-        counts[key] = (counts[key] || 0) + 1;
-      }
-    }
-  } else {
-    // For aggregated buckets, we need to look at each bucket's data
-    for (const bucket of context.buckets) {
-      const value = getFieldValue(
-        bucket.aggregatedResult as Record<string, unknown>,
-        fieldName,
-        collectorId,
-      );
-      if (value !== undefined && value !== null) {
-        const key = String(value);
-        counts[key] = (counts[key] || 0) + 1;
-      }
+  for (const bucket of context.buckets) {
+    const value = getFieldValue(
+      bucket.aggregatedResult as Record<string, unknown>,
+      fieldName,
+      collectorId,
+    );
+    if (value !== undefined && value !== null) {
+      const key = String(value);
+      counts[key] = (counts[key] || 0) + 1;
     }
   }
 
@@ -1142,28 +1073,13 @@ function getValueCounts(
 
 /**
  * Get all numeric values for a field with time labels.
- * Returns values in chronological order with timestamps/time spans for tooltips.
+ * Returns values in chronological order with time spans for tooltips.
  */
 function getAllValuesWithTime(
   fieldName: string,
   context: HealthCheckDiagramSlotContext,
   collectorId?: string,
 ): { value: number; timeLabel: string }[] {
-  if (context.type === "raw") {
-    return context.runs
-      .map((run) => {
-        const result = run.result as StoredHealthCheckResult;
-        const value = getFieldValue(result?.metadata, fieldName, collectorId);
-        if (typeof value !== "number") return;
-        return {
-          value,
-          timeLabel: format(new Date(run.timestamp), "MMM d, HH:mm:ss"),
-        };
-      })
-      .filter(
-        (v): v is { value: number; timeLabel: string } => v !== undefined,
-      );
-  }
   return context.buckets
     .map((bucket) => {
       const value = getFieldValue(
@@ -1191,21 +1107,6 @@ function getAllBooleanValuesWithTime(
   context: HealthCheckDiagramSlotContext,
   collectorId?: string,
 ): { value: boolean; timeLabel: string }[] {
-  if (context.type === "raw") {
-    return context.runs
-      .map((run) => {
-        const result = run.result as StoredHealthCheckResult;
-        const value = getFieldValue(result?.metadata, fieldName, collectorId);
-        if (typeof value !== "boolean") return;
-        return {
-          value,
-          timeLabel: format(new Date(run.timestamp), "MMM d, HH:mm:ss"),
-        };
-      })
-      .filter(
-        (v): v is { value: boolean; timeLabel: string } => v !== undefined,
-      );
-  }
   return context.buckets
     .map((bucket) => {
       const value = getFieldValue(
@@ -1233,21 +1134,6 @@ function getAllStringValuesWithTime(
   context: HealthCheckDiagramSlotContext,
   collectorId?: string,
 ): { value: string; timeLabel: string }[] {
-  if (context.type === "raw") {
-    return context.runs
-      .map((run) => {
-        const result = run.result as StoredHealthCheckResult;
-        const value = getFieldValue(result?.metadata, fieldName, collectorId);
-        if (typeof value !== "string") return;
-        return {
-          value,
-          timeLabel: format(new Date(run.timestamp), "MMM d, HH:mm:ss"),
-        };
-      })
-      .filter(
-        (v): v is { value: string; timeLabel: string } => v !== undefined,
-      );
-  }
   return context.buckets
     .map((bucket) => {
       const value = getFieldValue(

package/src/auto-charts/useStrategySchemas.ts

@@ -1,7 +1,7 @@
 /**
- * Hook to fetch and cache strategy schemas.
+ * Hook to fetch and cache strategy schemas for auto-chart rendering.
  *
- * Fetches both strategy result schemas AND collector result schemas,
+ * Fetches strategy aggregated result schemas AND collector aggregated result schemas,
  * merging them into a unified schema where collector schemas are nested
  * under `properties.collectors.<collectorId>`.
  */
@@ -11,15 +11,14 @@ import { usePluginClient } from "@checkstack/frontend-api";
 import { HealthCheckApi } from "../api";
 
 interface StrategySchemas {
-  resultSchema: Record<string, unknown> | undefined;
   aggregatedResultSchema: Record<string, unknown> | undefined;
 }
 
 /**
  * Fetch and cache strategy schemas for auto-chart rendering.
  *
- * Also fetches collector schemas and merges them into the result schema
- * so that chart fields from collectors are properly extracted.
+ * Fetches collector aggregated schemas and merges them into the strategy's
+ * aggregated result schema so that chart fields from collectors are properly extracted.
  *
  * @param strategyId - The strategy ID to fetch schemas for
  * @returns Schemas for the strategy, or undefined if not found
@@ -49,27 +48,17 @@ export function useStrategySchemas(strategyId: string): {
     const strategy = strategies.find((s) => s.id === strategyId);
 
     if (strategy) {
-      // Build collector schemas object for nesting under resultSchema.properties.collectors
-      const collectorProperties: Record<string, unknown> = {};
+      // Build collector aggregated schemas for nesting under aggregatedResultSchema.properties.collectors
       const collectorAggregatedProperties: Record<string, unknown> = {};
 
       for (const collector of collectors) {
         // Use full ID so it matches stored data keys like "healthcheck-http.request"
-        collectorProperties[collector.id] = collector.resultSchema;
-
-        // Also collect aggregated schemas if available
         if (collector.aggregatedResultSchema) {
           collectorAggregatedProperties[collector.id] =
             collector.aggregatedResultSchema;
         }
       }
 
-      // Merge collector schemas into strategy result schema
-      const mergedResultSchema = mergeCollectorSchemas(
-        strategy.resultSchema as Record<string, unknown> | undefined,
-        collectorProperties,
-      );
-
       // Merge collector aggregated schemas into strategy aggregated schema
       const mergedAggregatedSchema = mergeCollectorSchemas(
         strategy.aggregatedResultSchema as Record<string, unknown> | undefined,
@@ -77,7 +66,6 @@ export function useStrategySchemas(strategyId: string): {
       );
 
       setSchemas({
-        resultSchema: mergedResultSchema,
         aggregatedResultSchema: mergedAggregatedSchema,
       });
     }

package/src/components/HealthCheckEditor.tsx

@@ -132,6 +132,14 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
                 onChange={(e) => setInterval(e.target.value)}
                 required
               />
+              {Number.parseInt(interval, 10) < 60 && (
+                <p className="text-sm text-amber-600 dark:text-amber-400">
+                  ⚠️ Sub-minute intervals generate large amounts of data and may
+                  impact chart loading performance. Consider using intervals of
+                  60 seconds or more or drastically reduce the retention period
+                  for raw data.
+                </p>
+              )}
             </div>
 
             <PluginConfigForm