@checkstack/healthcheck-frontend 0.6.0 → 0.7.1

package/src/hooks/useHealthCheckData.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import {
   usePluginClient,
   accessApiRef,
@@ -26,6 +26,10 @@ interface UseHealthCheckDataProps {
     startDate: Date;
     endDate: Date;
   };
+  /** Whether the date range is a rolling preset (e.g., 'Last 7 days') that should auto-update */
+  isRollingPreset?: boolean;
+  /** Callback to update the date range (e.g., to refresh endDate to current time) */
+  onDateRangeRefresh?: (newEndDate: Date) => void;
   /** Pagination for raw data mode */
   limit?: number;
   offset?: number;
@@ -34,8 +38,10 @@ interface UseHealthCheckDataProps {
 interface UseHealthCheckDataResult {
   /** The context to pass to HealthCheckDiagramSlot */
   context: HealthCheckDiagramSlotContext | undefined;
-  /** Whether data is currently loading */
+  /** Whether data is currently loading (no previous data available) */
   loading: boolean;
+  /** Whether data is being fetched (even if previous data is shown) */
+  isFetching: boolean;
   /** Whether aggregated data mode is active */
   isAggregated: boolean;
   /** The resolved retention config */
@@ -61,6 +67,8 @@ export function useHealthCheckData({
   configurationId,
   strategyId,
   dateRange,
+  isRollingPreset = false,
+  onDateRangeRefresh,
   limit = 100,
   offset = 0,
 }: UseHealthCheckDataProps): UseHealthCheckDataResult {
@@ -91,9 +99,11 @@ export function useHealthCheckData({
     retentionData?.retentionConfig ?? DEFAULT_RETENTION_CONFIG;
 
   // Determine if we should use aggregated data
-  const isAggregated = dateRangeDays > retentionConfig.rawRetentionDays;
+  // Use >= so that a range equal to retention days uses aggregation (e.g., 7-day range with 7-day retention)
+  const isAggregated = dateRangeDays >= retentionConfig.rawRetentionDays;
 
   // Query: Fetch raw data (when in raw mode)
+  // Use 'asc' order for chronological chart display (oldest first, newest last)
   const {
     data: rawData,
     isLoading: rawLoading,
@@ -106,6 +116,7 @@ export function useHealthCheckData({
       endDate: dateRange.endDate,
       limit,
       offset,
+      sortOrder: "asc",
     },
     {
       enabled:
@@ -115,41 +126,55 @@ export function useHealthCheckData({
         !accessLoading &&
         !retentionLoading &&
         !isAggregated,
+      // Keep previous data visible during refetch to prevent layout shift
+      placeholderData: (prev) => prev,
     },
   );
 
   // Query: Fetch aggregated data (when in aggregated mode)
-  const { data: aggregatedData, isLoading: aggregatedLoading } =
-    healthCheckClient.getDetailedAggregatedHistory.useQuery(
-      {
-        systemId,
-        configurationId,
-        startDate: dateRange.startDate,
-        endDate: dateRange.endDate,
-        targetPoints: 500,
-      },
-      {
-        enabled:
-          !!systemId &&
-          !!configurationId &&
-          hasAccess &&
-          !accessLoading &&
-          !retentionLoading &&
-          isAggregated,
-      },
-    );
+  const {
+    data: aggregatedData,
+    isLoading: aggregatedLoading,
+    refetch: refetchAggregatedData,
+  } = healthCheckClient.getDetailedAggregatedHistory.useQuery(
+    {
+      systemId,
+      configurationId,
+      startDate: dateRange.startDate,
+      endDate: dateRange.endDate,
+      targetPoints: 500,
+    },
+    {
+      enabled:
+        !!systemId &&
+        !!configurationId &&
+        hasAccess &&
+        !accessLoading &&
+        !retentionLoading &&
+        isAggregated,
+      // Keep previous data visible during refetch to prevent layout shift
+      placeholderData: (prev) => prev,
+    },
+  );
 
   // Listen for realtime health check updates to refresh data silently
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
-    // Only refresh if we're in raw mode (not aggregated) and have access
     if (
       changedId === systemId &&
       hasAccess &&
       !accessLoading &&
-      !retentionLoading &&
-      !isAggregated
+      !retentionLoading
     ) {
-      void refetchRawData();
+      // Update endDate to current time only for rolling presets (not custom ranges)
+      if (isRollingPreset && onDateRangeRefresh) {
+        onDateRangeRefresh(new Date());
+      }
+      // Refetch the appropriate data
+      if (isAggregated) {
+        void refetchAggregatedData();
+      } else {
+        void refetchRawData();
+      }
     }
   });
 
@@ -185,6 +210,10 @@ export function useHealthCheckData({
     }
 
     if (isAggregated) {
+      // Don't create context with empty buckets during loading
+      if (aggregatedBuckets.length === 0) {
+        return undefined;
+      }
       return {
         type: "aggregated",
         systemId,
@@ -194,6 +223,10 @@ export function useHealthCheckData({
       };
     }
 
+    // Don't create context with empty runs during loading
+    if (rawRuns.length === 0) {
+      return undefined;
+    }
     return {
       type: "raw",
       systemId,
@@ -213,14 +246,31 @@ export function useHealthCheckData({
     aggregatedBuckets,
   ]);
 
-  const loading =
+  // Keep previous valid context to prevent layout shift during refetch
+  const previousContextRef = useRef<
+    HealthCheckDiagramSlotContext | undefined
+  >();
+  if (context) {
+    previousContextRef.current = context;
+  }
+
+  const isQueryLoading =
     accessLoading ||
     retentionLoading ||
     (isAggregated ? aggregatedLoading : rawLoading);
 
+  // Return previous context while loading to prevent layout shift
+  const stableContext =
+    context ?? (isQueryLoading ? previousContextRef.current : undefined);
+
+  // Only report loading when we don't have any context to show
+  // This prevents showing loading spinner during refetch when we have previous data
+  const loading = isQueryLoading && !stableContext;
+
   return {
-    context,
+    context: stableContext,
     loading,
+    isFetching: isQueryLoading,
     isAggregated,
     retentionConfig,
     hasAccess,

package/src/index.tsx

@@ -59,6 +59,12 @@ export default createFrontendPlugin({
       title: "Health Check Detail",
       accessRule: healthCheckAccess.details,
     },
+    {
+      route: healthcheckRoutes.routes.historyRun,
+      element: <HealthCheckHistoryDetailPage />,
+      title: "Health Check Run",
+      accessRule: healthCheckAccess.details,
+    },
   ],
   // No APIs needed - components use usePluginClient() directly
   apis: [],

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -22,21 +22,26 @@ import {
   BackLink,
   DateRangeFilter,
   getDefaultDateRange,
+  HealthBadge,
   type DateRange,
 } from "@checkstack/ui";
-import { useParams } from "react-router-dom";
-import { History } from "lucide-react";
+import { useParams, useNavigate } from "react-router-dom";
+import { History, X } from "lucide-react";
+import { format } from "date-fns";
 import {
   HealthCheckRunsTable,
   type HealthCheckRunDetailed,
 } from "../components/HealthCheckRunsTable";
+import { ExpandedResultView } from "../components/ExpandedResultView";
 
 const HealthCheckHistoryDetailPageContent = () => {
-  const { systemId, configurationId } = useParams<{
+  const { systemId, configurationId, runId } = useParams<{
     systemId: string;
     configurationId: string;
+    runId?: string;
   }>();
 
+  const navigate = useNavigate();
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
@@ -48,7 +53,17 @@ const HealthCheckHistoryDetailPageContent = () => {
   // Pagination state
   const pagination = usePagination({ defaultLimit: 20 });
 
-  // Fetch data with useQuery
+  // Fetch specific run if runId is provided
+  const { data: specificRun } = healthCheckClient.getRunById.useQuery(
+    {
+      runId: runId!,
+    },
+    {
+      enabled: !!runId,
+    },
+  );
+
+  // Fetch data with useQuery - newest first for table display
   const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({
     systemId,
     configurationId,
@@ -56,6 +71,7 @@ const HealthCheckHistoryDetailPageContent = () => {
     endDate: dateRange.endDate,
     limit: pagination.limit,
     offset: pagination.offset,
+    sortOrder: "desc",
   });
 
   // Sync total from response
@@ -63,6 +79,17 @@ const HealthCheckHistoryDetailPageContent = () => {
 
   const runs = (data?.runs ?? []) as HealthCheckRunDetailed[];
 
+  // Handler to dismiss the highlighted run
+  const dismissHighlightedRun = () => {
+    navigate(
+      resolveRoute(healthcheckRoutes.routes.historyDetail, {
+        systemId,
+        configurationId,
+      }),
+      { replace: true },
+    );
+  };
+
   return (
     <PageLayout
       title="Health Check Run History"
@@ -79,6 +106,33 @@ const HealthCheckHistoryDetailPageContent = () => {
         </BackLink>
       }
     >
+      {/* Highlighted specific run when navigated with runId */}
+      {runId && specificRun && (
+        <Card className="mb-4 border-primary/50 bg-primary/5">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-sm font-medium flex items-center gap-2">
+                <span>Selected Run</span>
+                <HealthBadge status={specificRun.status} />
+              </CardTitle>
+              <button
+                onClick={dismissHighlightedRun}
+                className="p-1 hover:bg-muted rounded"
+                title="Dismiss"
+              >
+                <X className="h-4 w-4 text-muted-foreground" />
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {format(new Date(specificRun.timestamp), "PPpp")}
+            </p>
+          </CardHeader>
+          <CardContent>
+            <ExpandedResultView result={specificRun.result} />
+          </CardContent>
+        </Card>
+      )}
+
       <Card>
         <CardHeader>
           <CardTitle>Run History</CardTitle>

package/src/pages/HealthCheckHistoryPage.tsx

@@ -33,10 +33,11 @@ const HealthCheckHistoryPageContent = () => {
   // Pagination state
   const pagination = usePagination({ defaultLimit: 20 });
 
-  // Fetch data with useQuery
+  // Fetch data with useQuery - newest first for table display
   const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({
     limit: pagination.limit,
     offset: pagination.offset,
+    sortOrder: "desc",
   });
 
   // Sync total from response

package/src/utils/sparkline-downsampling.ts

@@ -0,0 +1,88 @@
+/**
+ * Sparkline downsampling utilities for managing large datasets in visualizations.
+ */
+
+/** Maximum number of bars to show in a sparkline for readability */
+export const MAX_SPARKLINE_BARS = 60;
+
+/**
+ * A downsampled bucket containing multiple items aggregated together.
+ */
+export interface DownsampledBucket<T> {
+  /** The original items in this bucket */
+  items: T[];
+  /** Whether all items in the bucket "passed" (for pass/fail type data) */
+  passed: boolean;
+  /** Time label for this bucket (range if multiple items) */
+  timeLabel?: string;
+}
+
+/**
+ * Downsample sparkline data to ensure readability.
+ * Groups consecutive items into buckets, representing each bucket with
+ * a "worst case" status (if any item failed, bucket shows failed).
+ *
+ * @param items - Array of items to downsample
+ * @param options - Configuration options
+ * @returns Array of downsampled buckets
+ */
+export function downsampleSparkline<
+  T extends { passed?: boolean; value?: boolean; timeLabel?: string },
+>(
+  items: T[],
+  options: {
+    maxBars?: number;
+    /** Custom function to determine if an item "passed" */
+    getPassed?: (item: T) => boolean;
+  } = {},
+): DownsampledBucket<T>[] {
+  const { maxBars = MAX_SPARKLINE_BARS, getPassed } = options;
+
+  const getItemPassed =
+    getPassed ?? ((item: T) => item.passed ?? item.value ?? true);
+
+  if (items.length <= maxBars) {
+    // No downsampling needed - return original items wrapped
+    return items.map((item) => ({
+      items: [item],
+      passed: getItemPassed(item),
+      timeLabel: item.timeLabel,
+    }));
+  }
+
+  const bucketSize = Math.ceil(items.length / maxBars);
+  const buckets: DownsampledBucket<T>[] = [];
+
+  for (let i = 0; i < items.length; i += bucketSize) {
+    const bucketItems = items.slice(i, i + bucketSize);
+    // Bucket is "failed" if any item failed (worst case visualization)
+    const passed = bucketItems.every((item) => getItemPassed(item));
+
+    const firstItem = bucketItems[0];
+    const lastItem = bucketItems.at(-1);
+    const startLabel = firstItem?.timeLabel;
+    const endLabel = lastItem?.timeLabel;
+
+    buckets.push({
+      items: bucketItems,
+      passed,
+      timeLabel:
+        startLabel && endLabel && startLabel !== endLabel
+          ? `${startLabel} - ${endLabel}`
+          : startLabel,
+    });
+  }
+
+  return buckets;
+}
+
+/**
+ * Calculate the bucket size needed for a given item count.
+ * Returns 1 if no downsampling is needed.
+ */
+export function getDownsampleBucketSize(
+  itemCount: number,
+  maxBars: number = MAX_SPARKLINE_BARS,
+): number {
+  return itemCount <= maxBars ? 1 : Math.ceil(itemCount / maxBars);
+}