@checkstack/healthcheck-frontend 0.4.9 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @checkstack/healthcheck-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- ac3a4cf: ### Dynamic Bucket Sizing for Health Check Visualization
+
+  Implements industry-standard dynamic bucket sizing for health check data aggregation, following patterns from Grafana/VictoriaMetrics.
+
+  **What changed:**
+
+  - Replaced fixed `bucketSize: "hourly" | "daily" | "auto"` with dynamic `targetPoints` parameter (default: 500)
+  - Bucket interval is now calculated as `(endDate - startDate) / targetPoints` with a minimum of 1 second
+  - Added `bucketIntervalSeconds` to aggregated response and individual buckets
+  - Updated chart components to use dynamic time formatting based on bucket interval
+
+  **Why:**
+
+  - A 24-hour view with 1-second health checks previously returned 86,400+ data points, causing lag
+  - Now returns ~500 data points regardless of timeframe, ensuring consistent chart performance
+  - Charts still preserve visual fidelity through proper aggregation
+
+  **Breaking Change:**
+
+  - `bucketSize` parameter removed from `getAggregatedHistory` and `getDetailedAggregatedHistory` endpoints
+  - Use `targetPoints` instead (defaults to 500 if not specified)
+
+  ***
+
+  ### Collector Aggregated Charts Fix
+
+  Fixed issue where collector auto-charts (like HTTP request response time charts) were not showing in aggregated data mode.
+
+  **What changed:**
+
+  - Added `aggregatedResultSchema` to `CollectorDtoSchema`
+  - Backend now returns collector aggregated schemas via `getCollectors` endpoint
+  - Frontend `useStrategySchemas` hook now merges collector aggregated schemas
+  - Service now calls each collector's `aggregateResult()` when building buckets
+  - Aggregated collector data stored in `aggregatedResult.collectors[uuid]`
+
+  **Why:**
+
+  - Previously only strategy-level aggregated results were computed
+  - Collectors like HTTP Request Collector have their own `aggregateResult` method
+  - Without calling these, fields like `avgResponseTimeMs` and `successRate` were missing from aggregated buckets
+
+### Patch Changes
+
+- 095cf4e: ### Cross-Tier Data Aggregation
+
+  Implements intelligent cross-tier querying for health check history, enabling seamless data retrieval across raw, hourly, and daily storage tiers.
+
+  **What changed:**
+
+  - `getAggregatedHistory` now queries all three tiers (raw, hourly, daily) in parallel
+  - Added `NormalizedBucket` type for unified bucket format across tiers
+  - Added `mergeTieredBuckets()` to merge data with priority (raw > hourly > daily)
+  - Added `combineBuckets()` and `reaggregateBuckets()` for re-aggregation to target bucket size
+  - Raw data preserves full granularity when available (uses target bucket interval)
+
+  **Why:**
+
+  - Previously, the API only queried raw runs, which are retained for a limited period (default 7 days)
+  - For longer time ranges, data was missing because hourly/daily aggregates weren't queried
+  - The retention job only runs periodically, so we can't assume tier boundaries based on config
+  - Querying all tiers ensures no gaps in data coverage
+
+  **Technical details:**
+
+  - Additive metrics (counts, latencySum) are summed correctly for accurate averages
+  - p95 latency uses max of source p95s as conservative upper-bound approximation
+  - `aggregatedResult` (strategy-specific) is preserved for raw-only buckets
+
+- 538e45d: Fixed 24-hour date range not returning correct data and improved chart display
+
+  - Fixed missing `endDate` parameter in raw data queries causing data to extend beyond selected time range
+  - Fixed incorrect 24-hour date calculation using `setHours()` - now uses `date-fns` `subHours()` for correct date math
+  - Refactored `DateRangePreset` from string union to enum for improved type safety and IDE support
+  - Exported `getPresetRange` function for reuse across components
+  - Changed chart x-axis domain from `["auto", "auto"]` to `["dataMin", "dataMax"]` to remove padding gaps
+
+- Updated dependencies [ac3a4cf]
+- Updated dependencies [db1f56f]
+- Updated dependencies [538e45d]
+  - @checkstack/healthcheck-common@0.5.0
+  - @checkstack/common@0.6.0
+  - @checkstack/ui@0.4.1
+  - @checkstack/dashboard-frontend@0.3.9
+  - @checkstack/auth-frontend@0.5.4
+  - @checkstack/catalog-common@1.2.4
+  - @checkstack/frontend-api@0.3.3
+  - @checkstack/signal-frontend@0.0.10
+
+## 0.4.10
+
+### Patch Changes
+
+- d1324e6: Removed redundant inner scroll wrapper from HealthCheckEditor - Dialog now handles scrolling
+- Updated dependencies [d1324e6]
+- Updated dependencies [1f1f6c2]
+- Updated dependencies [2c0822d]
+  - @checkstack/ui@0.4.0
+  - @checkstack/dashboard-frontend@0.3.8
+  - @checkstack/auth-frontend@0.5.3
+
 ## 0.4.9
 
 ### Patch Changes

package/package.json

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

package/src/auto-charts/useStrategySchemas.ts

@@ -38,7 +38,7 @@ export function useStrategySchemas(strategyId: string): {
   // Fetch collectors with useQuery
   const { data: collectors } = healthCheckClient.getCollectors.useQuery(
     { strategyId },
-    { enabled: !!strategyId }
+    { enabled: !!strategyId },
   );
 
   useEffect(() => {
@@ -51,22 +51,34 @@ export function useStrategySchemas(strategyId: string): {
     if (strategy) {
       // Build collector schemas object for nesting under resultSchema.properties.collectors
       const collectorProperties: Record<string, unknown> = {};
+      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
+        collectorProperties,
+      );
+
+      // Merge collector aggregated schemas into strategy aggregated schema
+      const mergedAggregatedSchema = mergeCollectorSchemas(
+        strategy.aggregatedResultSchema as Record<string, unknown> | undefined,
+        collectorAggregatedProperties,
       );
 
       setSchemas({
         resultSchema: mergedResultSchema,
-        aggregatedResultSchema:
-          (strategy.aggregatedResultSchema as Record<string, unknown>) ??
-          undefined,
+        aggregatedResultSchema: mergedAggregatedSchema,
       });
     }
 
@@ -85,7 +97,7 @@ export function useStrategySchemas(strategyId: string): {
  */
 function mergeCollectorSchemas(
   strategySchema: Record<string, unknown> | undefined,
-  collectorProperties: Record<string, unknown>
+  collectorProperties: Record<string, unknown>,
 ): Record<string, unknown> | undefined {
   // If no collectors, return original schema
   if (Object.keys(collectorProperties).length === 0) {

package/src/components/AggregatedDataBanner.tsx

@@ -1,24 +1,67 @@
 import { InfoBanner } from "@checkstack/ui";
 
 interface AggregatedDataBannerProps {
-  bucketSize: "hourly" | "daily";
-  rawRetentionDays: number;
+  /** Bucket interval in seconds */
+  bucketIntervalSeconds: number;
+  /** The configured check interval in seconds (optional, for comparison) */
+  checkIntervalSeconds?: number;
 }
 
+/**
+ * Format seconds into a human-readable duration string.
+ */
+function formatDuration(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  if (seconds < 3600) {
+    const mins = Math.round(seconds / 60);
+    return `${mins}min`;
+  }
+  const hours = Math.round(seconds / 3600);
+  return `${hours}h`;
+}
+
+/**
+ * Get resolution tier label based on bucket interval.
+ */
+function getResolutionTier(
+  bucketIntervalSeconds: number,
+): "high" | "medium" | "low" {
+  if (bucketIntervalSeconds >= 86_400) {
+    return "low"; // Daily aggregates
+  }
+  if (bucketIntervalSeconds >= 3600) {
+    return "medium"; // Hourly aggregates
+  }
+  return "high"; // Raw data
+}
+
+const TIER_LABELS: Record<"high" | "medium" | "low", string> = {
+  high: "High resolution",
+  medium: "Medium resolution",
+  low: "Low resolution",
+};
+
 /**
  * Banner shown when viewing aggregated health check data.
- * Informs users about the aggregation level and how to see detailed data.
+ * Informs users about the aggregation level due to high data volume.
  */
 export function AggregatedDataBanner({
-  bucketSize,
-  rawRetentionDays,
+  bucketIntervalSeconds,
+  checkIntervalSeconds,
 }: AggregatedDataBannerProps) {
-  const bucketLabel = bucketSize === "hourly" ? "hourly" : "daily";
+  // Only show if bucket interval is larger than check interval (data is being aggregated)
+  if (checkIntervalSeconds && bucketIntervalSeconds <= checkIntervalSeconds) {
+    return;
+  }
+
+  const tier = getResolutionTier(bucketIntervalSeconds);
 
   return (
     <InfoBanner variant="info">
-      Showing {bucketLabel} aggregates. For per-run data, select a range ≤{" "}
-      {rawRetentionDays} days.
+      {TIER_LABELS[tier]} • Data aggregated into{" "}
+      {formatDuration(bucketIntervalSeconds)} intervals
     </InfoBanner>
   );
 }

package/src/components/HealthCheckDiagram.tsx

@@ -11,8 +11,10 @@ interface HealthCheckDiagramProps {
   context: HealthCheckDiagramSlotContext;
   /** Whether the data is aggregated (for showing the info banner) */
   isAggregated?: boolean;
-  /** Raw retention days (for the info banner) */
-  rawRetentionDays?: number;
+  /** The bucket interval in seconds (from aggregated response) */
+  bucketIntervalSeconds?: number;
+  /** The check interval in seconds (for comparison in banner) */
+  checkIntervalSeconds?: number;
 }
 
 /**
@@ -22,20 +24,15 @@ interface HealthCheckDiagramProps {
 export function HealthCheckDiagram({
   context,
   isAggregated = false,
-  rawRetentionDays = 7,
+  bucketIntervalSeconds,
+  checkIntervalSeconds,
 }: HealthCheckDiagramProps) {
-  // Determine bucket size from context for aggregated data info banner
-  const bucketSize =
-    context.type === "aggregated" && context.buckets.length > 0
-      ? context.buckets[0].bucketSize
-      : "hourly";
-
   return (
     <>
-      {isAggregated && (
+      {isAggregated && bucketIntervalSeconds && (
         <AggregatedDataBanner
-          bucketSize={bucketSize}
-          rawRetentionDays={rawRetentionDays}
+          bucketIntervalSeconds={bucketIntervalSeconds}
+          checkIntervalSeconds={checkIntervalSeconds}
         />
       )}
       <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />

package/src/components/HealthCheckEditor.tsx

@@ -40,13 +40,13 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
   const [name, setName] = useState(initialData?.name || "");
   const [strategyId, setStrategyId] = useState(initialData?.strategyId || "");
   const [interval, setInterval] = useState(
-    initialData?.intervalSeconds?.toString() || "60"
+    initialData?.intervalSeconds?.toString() || "60",
   );
   const [config, setConfig] = useState<Record<string, unknown>>(
-    (initialData?.config as Record<string, unknown>) || {}
+    (initialData?.config as Record<string, unknown>) || {},
   );
   const [collectors, setCollectors] = useState<CollectorConfigEntry[]>(
-    initialData?.collectors || []
+    initialData?.collectors || [],
   );
 
   const toast = useToast();
@@ -111,7 +111,7 @@ export const HealthCheckEditor: React.FC<HealthCheckEditorProps> = ({
             </DialogDescription>
           </DialogHeader>
 
-          <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto">
+          <div className="space-y-6 py-4">
             <div className="space-y-2">
               <Label htmlFor="name">Name</Label>
               <Input

package/src/components/HealthCheckLatencyChart.tsx

@@ -50,8 +50,11 @@ 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]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+        ? "MMM d"
+        : "MMM d HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -73,7 +76,7 @@ export const HealthCheckLatencyChart: React.FC<
           <XAxis
             dataKey="timestamp"
             type="number"
-            domain={["auto", "auto"]}
+            domain={["dataMin", "dataMax"]}
             tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
             stroke="hsl(var(--muted-foreground))"
             fontSize={12}
@@ -172,7 +175,7 @@ export const HealthCheckLatencyChart: React.FC<
         <XAxis
           dataKey="timestamp"
           type="number"
-          domain={["auto", "auto"]}
+          domain={["dataMin", "dataMax"]}
           tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
           stroke="hsl(var(--muted-foreground))"
           fontSize={12}

package/src/components/HealthCheckStatusTimeline.tsx

@@ -50,8 +50,11 @@ export const HealthCheckStatusTimeline: React.FC<
       total: d.runCount,
     }));
 
+    // Use daily format for intervals >= 6 hours, otherwise include time
     const timeFormat =
-      buckets[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+      (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
+        ? "MMM d"
+        : "MMM d HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -59,7 +62,7 @@ export const HealthCheckStatusTimeline: React.FC<
           <XAxis
             dataKey="timestamp"
             type="number"
-            domain={["auto", "auto"]}
+            domain={["dataMin", "dataMax"]}
             tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
             stroke="hsl(var(--muted-foreground))"
             fontSize={10}
@@ -133,7 +136,7 @@ export const HealthCheckStatusTimeline: React.FC<
         <XAxis
           dataKey="timestamp"
           type="number"
-          domain={["auto", "auto"]}
+          domain={["dataMin", "dataMax"]}
           tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
           stroke="hsl(var(--muted-foreground))"
           fontSize={10}

package/src/components/HealthCheckSystemOverview.tsx

@@ -20,6 +20,8 @@ import {
   usePagination,
   usePaginationSync,
   DateRangeFilter,
+  getPresetRange,
+  DateRangePreset,
 } from "@checkstack/ui";
 import { formatDistanceToNow } from "date-fns";
 import { ChevronDown, ChevronRight } from "lucide-react";
@@ -55,17 +57,10 @@ interface ExpandedRowProps {
 const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
 
-  // Date range state for filtering
-  const [dateRange, setDateRange] = useState<{
-    startDate: Date;
-    endDate: Date;
-  }>(() => {
-    // Default to last 24 hours
-    const end = new Date();
-    const start = new Date();
-    start.setHours(start.getHours() - 24);
-    return { startDate: start, endDate: end };
-  });
+  // Date range state for filtering - default to last 24 hours
+  const [dateRange, setDateRange] = useState(() =>
+    getPresetRange(DateRangePreset.Last24Hours),
+  );
 
   // Use shared hook for chart data - handles both raw and aggregated modes
   // and includes signal handling for automatic refresh
@@ -73,7 +68,7 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
     context: chartContext,
     loading: chartLoading,
     isAggregated,
-    retentionConfig,
+    bucketIntervalSeconds,
   } = useHealthCheckData({
     systemId,
     configurationId: item.configurationId,
@@ -160,7 +155,8 @@ const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
         <HealthCheckDiagram
           context={chartContext}
           isAggregated={isAggregated}
-          rawRetentionDays={retentionConfig.rawRetentionDays}
+          bucketIntervalSeconds={bucketIntervalSeconds}
+          checkIntervalSeconds={item.intervalSeconds}
         />
       </div>
     );
@@ -281,8 +277,8 @@ export function HealthCheckSystemOverview(props: SlotProps) {
           void refetch();
         }
       },
-      [systemId, refetch]
-    )
+      [systemId, refetch],
+    ),
   );
 
   if (initialLoading) {

package/src/hooks/useHealthCheckData.ts

@@ -44,6 +44,8 @@ interface UseHealthCheckDataResult {
   hasAccess: boolean;
   /** Whether access is still loading */
   accessLoading: boolean;
+  /** Bucket interval in seconds (only for aggregated mode) */
+  bucketIntervalSeconds: number | undefined;
 }
 
 /**
@@ -67,14 +69,14 @@ export function useHealthCheckData({
 
   // Access state
   const { allowed: hasAccess, loading: accessLoading } = accessApi.useAccess(
-    healthCheckAccess.details
+    healthCheckAccess.details,
   );
 
   // Calculate date range in days
   const dateRangeDays = useMemo(() => {
     return Math.ceil(
       (dateRange.endDate.getTime() - dateRange.startDate.getTime()) /
-        (1000 * 60 * 60 * 24)
+        (1000 * 60 * 60 * 24),
     );
   }, [dateRange.startDate, dateRange.endDate]);
 
@@ -82,7 +84,7 @@ export function useHealthCheckData({
   const { data: retentionData, isLoading: retentionLoading } =
     healthCheckClient.getRetentionConfig.useQuery(
       { systemId, configurationId },
-      { enabled: !!systemId && !!configurationId && hasAccess }
+      { enabled: !!systemId && !!configurationId && hasAccess },
     );
 
   const retentionConfig =
@@ -101,6 +103,7 @@ export function useHealthCheckData({
       systemId,
       configurationId,
       startDate: dateRange.startDate,
+      endDate: dateRange.endDate,
       limit,
       offset,
     },
@@ -112,11 +115,10 @@ export function useHealthCheckData({
         !accessLoading &&
         !retentionLoading &&
         !isAggregated,
-    }
+    },
   );
 
   // Query: Fetch aggregated data (when in aggregated mode)
-  const bucketSize = dateRangeDays > 30 ? "daily" : "hourly";
   const { data: aggregatedData, isLoading: aggregatedLoading } =
     healthCheckClient.getDetailedAggregatedHistory.useQuery(
       {
@@ -124,7 +126,7 @@ export function useHealthCheckData({
         configurationId,
         startDate: dateRange.startDate,
         endDate: dateRange.endDate,
-        bucketSize,
+        targetPoints: 500,
       },
       {
         enabled:
@@ -134,7 +136,7 @@ export function useHealthCheckData({
           !accessLoading &&
           !retentionLoading &&
           isAggregated,
-      }
+      },
     );
 
   // Listen for realtime health check updates to refresh data silently
@@ -223,5 +225,6 @@ export function useHealthCheckData({
     retentionConfig,
     hasAccess,
     accessLoading,
+    bucketIntervalSeconds: aggregatedData?.bucketIntervalSeconds,
   };
 }