@checkstack/healthcheck-frontend 0.0.2

package/src/components/HealthCheckSystemOverview.tsx

@@ -0,0 +1,380 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { healthCheckApiRef } from "../api";
+import { SystemDetailsSlot } from "@checkstack/catalog-common";
+import { HEALTH_CHECK_RUN_COMPLETED } from "@checkstack/healthcheck-common";
+import {
+  HealthBadge,
+  LoadingSpinner,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Tooltip,
+  Pagination,
+  usePagination,
+  DateRangeFilter,
+} from "@checkstack/ui";
+import { formatDistanceToNow } from "date-fns";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { HealthCheckSparkline } from "./HealthCheckSparkline";
+import { HealthCheckLatencyChart } from "./HealthCheckLatencyChart";
+import { HealthCheckStatusTimeline } from "./HealthCheckStatusTimeline";
+
+import type {
+  StateThresholds,
+  HealthCheckStatus,
+} from "@checkstack/healthcheck-common";
+import { HealthCheckDiagram } from "./HealthCheckDiagram";
+
+type SlotProps = SlotContext<typeof SystemDetailsSlot>;
+
+interface HealthCheckOverviewItem {
+  configurationId: string;
+  configurationName: string;
+  strategyId: string;
+  intervalSeconds: number;
+  enabled: boolean;
+  status: HealthCheckStatus;
+  stateThresholds?: StateThresholds;
+  recentRuns: Array<{
+    id: string;
+    status: HealthCheckStatus;
+    timestamp: Date;
+  }>;
+}
+
+interface ExpandedRowProps {
+  item: HealthCheckOverviewItem;
+  systemId: string;
+}
+
+const ExpandedDetails: React.FC<ExpandedRowProps> = ({ item, systemId }) => {
+  const api = useApi(healthCheckApiRef);
+
+  // 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 };
+  });
+
+  // Chart data - fetches all runs for the time range (unpaginated)
+  const [chartData, setChartData] = useState<
+    Array<{
+      id: string;
+      status: HealthCheckStatus;
+      timestamp: Date;
+      latencyMs?: number;
+    }>
+  >([]);
+  const [chartLoading, setChartLoading] = useState(true);
+
+  const fetchChartData = useCallback(() => {
+    setChartLoading(true);
+    api
+      .getHistory({
+        systemId,
+        configurationId: item.configurationId,
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        // Fetch up to 1000 data points for charts - enough for most time ranges
+        limit: 1000,
+        offset: 0,
+      })
+      .then((response) => {
+        setChartData(response.runs);
+      })
+      .finally(() => {
+        setChartLoading(false);
+      });
+  }, [
+    api,
+    systemId,
+    item.configurationId,
+    dateRange.startDate,
+    dateRange.endDate,
+  ]);
+
+  // Fetch chart data when date range changes
+  useEffect(() => {
+    fetchChartData();
+  }, [fetchChartData]);
+
+  // Paginated history for the table
+  const {
+    items: runs,
+    loading,
+    pagination,
+  } = usePagination({
+    fetchFn: (params: {
+      limit: number;
+      offset: number;
+      systemId: string;
+      configurationId: string;
+      startDate?: Date;
+      endDate?: Date;
+    }) =>
+      api.getHistory({
+        systemId: params.systemId,
+        configurationId: params.configurationId,
+        limit: params.limit,
+        offset: params.offset,
+        startDate: params.startDate,
+        endDate: params.endDate,
+      }),
+    getItems: (response) => response.runs,
+    getTotal: (response) => response.total,
+    extraParams: {
+      systemId,
+      configurationId: item.configurationId,
+      startDate: dateRange.startDate,
+      endDate: dateRange.endDate,
+    },
+    defaultLimit: 10,
+  });
+
+  // Listen for realtime health check updates to refresh charts and history
+  useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
+    if (changedId === systemId) {
+      fetchChartData();
+      pagination.refetch();
+    }
+  });
+
+  const thresholdDescription = item.stateThresholds
+    ? item.stateThresholds.mode === "consecutive"
+      ? `Consecutive mode: Healthy after ${item.stateThresholds.healthy.minSuccessCount} success(es), Degraded after ${item.stateThresholds.degraded.minFailureCount} failure(s), Unhealthy after ${item.stateThresholds.unhealthy.minFailureCount} failure(s)`
+      : `Window mode (${item.stateThresholds.windowSize} runs): Degraded at ${item.stateThresholds.degraded.minFailureCount}+ failures, Unhealthy at ${item.stateThresholds.unhealthy.minFailureCount}+ failures`
+    : "Using default thresholds";
+
+  return (
+    <div className="p-4 bg-muted/30 border-t space-y-4">
+      <div className="flex flex-wrap gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">Strategy:</span>{" "}
+          <span className="font-medium">{item.strategyId}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Interval:</span>{" "}
+          <span className="font-medium">{item.intervalSeconds}s</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-muted-foreground">Thresholds:</span>{" "}
+          <Tooltip content={thresholdDescription} />
+        </div>
+      </div>
+
+      {/* Date Range Filter */}
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">Time Range:</span>
+        <DateRangeFilter value={dateRange} onChange={setDateRange} />
+      </div>
+
+      {/* Charts Section - uses full date range data, not paginated */}
+      {chartLoading ? (
+        <LoadingSpinner />
+      ) : chartData.length > 0 ? (
+        <div className="space-y-4">
+          {/* Status Timeline */}
+          <div>
+            <h4 className="text-sm font-medium mb-2">Status Timeline</h4>
+            <HealthCheckStatusTimeline
+              type="raw"
+              data={chartData.map((r) => ({
+                timestamp: new Date(r.timestamp),
+                status: r.status,
+              }))}
+              height={50}
+            />
+          </div>
+
+          {/* Latency Chart - only if any run has latency data */}
+          {chartData.some((r) => r.latencyMs !== undefined) && (
+            <div>
+              <h4 className="text-sm font-medium mb-2">Response Latency</h4>
+              <HealthCheckLatencyChart
+                type="raw"
+                data={chartData
+                  .filter((r) => r.latencyMs !== undefined)
+                  .map((r) => ({
+                    timestamp: new Date(r.timestamp),
+                    latencyMs: r.latencyMs!,
+                    status: r.status,
+                  }))}
+                height={150}
+                showAverage
+              />
+            </div>
+          )}
+
+          {/* Extension Slot for custom strategy-specific diagrams */}
+          <HealthCheckDiagram
+            systemId={systemId}
+            configurationId={item.configurationId}
+            strategyId={item.strategyId}
+            dateRange={dateRange}
+            limit={1000}
+            offset={0}
+          />
+        </div>
+      ) : undefined}
+
+      {loading ? (
+        <LoadingSpinner />
+      ) : runs.length > 0 ? (
+        <>
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-24">Status</TableHead>
+                  <TableHead>Time</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {runs.map((run) => (
+                  <TableRow key={run.id}>
+                    <TableCell>
+                      <HealthBadge status={run.status} />
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {formatDistanceToNow(new Date(run.timestamp), {
+                        addSuffix: true,
+                      })}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {pagination.totalPages > 1 && (
+            <Pagination
+              page={pagination.page}
+              totalPages={pagination.totalPages}
+              onPageChange={pagination.setPage}
+              total={pagination.total}
+              limit={pagination.limit}
+              onPageSizeChange={pagination.setLimit}
+              showTotal
+            />
+          )}
+        </>
+      ) : (
+        <p className="text-sm text-muted-foreground italic">No runs yet</p>
+      )}
+    </div>
+  );
+};
+
+export const HealthCheckSystemOverview: React.FC<SlotProps> = (props) => {
+  const { system } = props;
+  const systemId = system?.id;
+
+  const api = useApi(healthCheckApiRef);
+  const [overview, setOverview] = useState<HealthCheckOverviewItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string>();
+
+  const refetch = useCallback(() => {
+    if (!systemId) return;
+
+    api
+      .getSystemHealthOverview({ systemId })
+      .then((data) => setOverview(data.checks))
+      .finally(() => setLoading(false));
+  }, [api, systemId]);
+
+  // Initial fetch
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // Listen for realtime health check updates
+  useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
+    if (changedId === systemId) {
+      refetch();
+    }
+  });
+
+  if (loading) return <LoadingSpinner />;
+
+  if (overview.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        No health checks assigned to this system.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {overview.map((item) => {
+        const isExpanded = expandedId === item.configurationId;
+        const lastRun = item.recentRuns[0];
+
+        return (
+          <div
+            key={item.configurationId}
+            className="rounded-lg border bg-card transition-shadow hover:shadow-sm"
+          >
+            <div
+              className="flex items-center gap-4 p-3 cursor-pointer"
+              onClick={() =>
+                setExpandedId(isExpanded ? undefined : item.configurationId)
+              }
+            >
+              <div className="text-muted-foreground">
+                {isExpanded ? (
+                  <ChevronDown className="h-4 w-4" />
+                ) : (
+                  <ChevronRight className="h-4 w-4" />
+                )}
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-sm truncate">
+                    {item.configurationName}
+                  </span>
+                  {!item.enabled && (
+                    <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                      Disabled
+                    </span>
+                  )}
+                </div>
+                {lastRun && (
+                  <span className="text-xs text-muted-foreground">
+                    Last run:{" "}
+                    {formatDistanceToNow(new Date(lastRun.timestamp), {
+                      addSuffix: true,
+                    })}
+                  </span>
+                )}
+              </div>
+
+              <HealthCheckSparkline
+                runs={item.recentRuns}
+                className="hidden sm:flex"
+              />
+
+              <HealthBadge status={item.status} />
+            </div>
+
+            {isExpanded && systemId && (
+              <ExpandedDetails item={item} systemId={systemId} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/SystemHealthBadge.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
+import { HEALTH_CHECK_RUN_COMPLETED } from "@checkstack/healthcheck-common";
+import { healthCheckApiRef } from "../api";
+import { HealthBadge, type HealthStatus } from "@checkstack/ui";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+/**
+ * Displays a health badge for a system based on its health check results.
+ * Uses the backend's getSystemHealthStatus endpoint which evaluates
+ * health status based on configured state thresholds.
+ * Listens for realtime updates via signals.
+ */
+export const SystemHealthBadge: React.FC<Props> = ({ system }) => {
+  const api = useApi(healthCheckApiRef);
+  const [status, setStatus] = useState<HealthStatus>();
+
+  const refetch = useCallback(() => {
+    if (!system?.id) return;
+
+    api
+      .getSystemHealthStatus({ systemId: system.id })
+      .then((result) => {
+        setStatus(result.status);
+      })
+      .catch(console.error);
+  }, [system?.id, api]);
+
+  // Initial fetch
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // Listen for realtime health check updates
+  useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
+    if (changedId === system?.id) {
+      refetch();
+    }
+  });
+
+  if (!status) return;
+  return <HealthBadge status={status} />;
+};