@checkmate-monitor/healthcheck-frontend 0.1.0

package/src/components/HealthCheckRunsTable.tsx

@@ -0,0 +1,187 @@
+import React, { useState, Fragment } from "react";
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  HealthBadge,
+  LoadingSpinner,
+  Pagination,
+  Button,
+} from "@checkmate-monitor/ui";
+import { formatDistanceToNow, format } from "date-fns";
+import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { Link } from "react-router-dom";
+import { healthcheckRoutes } from "@checkmate-monitor/healthcheck-common";
+import { resolveRoute } from "@checkmate-monitor/common";
+
+export interface HealthCheckRunDetailed {
+  id: string;
+  configurationId: string;
+  systemId: string;
+  status: "healthy" | "unhealthy" | "degraded";
+  result: Record<string, unknown>;
+  timestamp: Date;
+}
+
+export interface HealthCheckRunsTableProps {
+  runs: HealthCheckRunDetailed[];
+  loading: boolean;
+  emptyMessage?: string;
+  /** Show System ID and Configuration ID columns with link to detail page */
+  showFilterColumns?: boolean;
+  /** Number of columns for the expanded result row */
+  colSpan?: number;
+  /** Pagination state from usePagination hook */
+  pagination?: {
+    page: number;
+    totalPages: number;
+    total: number;
+    limit: number;
+    setPage: (page: number) => void;
+    setLimit: (limit: number) => void;
+  };
+}
+
+export const HealthCheckRunsTable: React.FC<HealthCheckRunsTableProps> = ({
+  runs,
+  loading,
+  emptyMessage = "No health check runs found.",
+  showFilterColumns = false,
+  colSpan,
+  pagination,
+}) => {
+  const [expandedId, setExpandedId] = useState<string>();
+
+  const toggleExpand = (id: string) => {
+    setExpandedId(expandedId === id ? undefined : id);
+  };
+
+  // Calculate colspan based on columns shown
+  const calculatedColSpan = colSpan ?? (showFilterColumns ? 6 : 3);
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (runs.length === 0) {
+    return <p className="text-muted-foreground text-sm">{emptyMessage}</p>;
+  }
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10"></TableHead>
+              <TableHead className="w-24">Status</TableHead>
+              {showFilterColumns && (
+                <>
+                  <TableHead>System ID</TableHead>
+                  <TableHead>Configuration ID</TableHead>
+                </>
+              )}
+              <TableHead>Timestamp</TableHead>
+              {showFilterColumns && <TableHead className="w-16"></TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {runs.map((run) => {
+              const isExpanded = expandedId === run.id;
+              return (
+                <Fragment key={run.id}>
+                  <TableRow
+                    className="cursor-pointer hover:bg-muted/50"
+                    onClick={() => toggleExpand(run.id)}
+                  >
+                    <TableCell>
+                      {isExpanded ? (
+                        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <HealthBadge status={run.status} />
+                    </TableCell>
+                    {showFilterColumns && (
+                      <>
+                        <TableCell className="font-mono text-xs">
+                          {run.systemId}
+                        </TableCell>
+                        <TableCell className="font-mono text-xs">
+                          {run.configurationId.slice(0, 8)}...
+                        </TableCell>
+                      </>
+                    )}
+                    <TableCell className="text-sm text-muted-foreground">
+                      <span title={format(new Date(run.timestamp), "PPpp")}>
+                        {formatDistanceToNow(new Date(run.timestamp), {
+                          addSuffix: true,
+                        })}
+                      </span>
+                    </TableCell>
+                    {showFilterColumns && (
+                      <TableCell>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          asChild
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Link
+                            to={resolveRoute(
+                              healthcheckRoutes.routes.historyDetail,
+                              {
+                                systemId: run.systemId,
+                                configurationId: run.configurationId,
+                              }
+                            )}
+                          >
+                            <ExternalLink className="h-4 w-4" />
+                          </Link>
+                        </Button>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                  {isExpanded && (
+                    <TableRow>
+                      <TableCell
+                        colSpan={calculatedColSpan}
+                        className="bg-muted/30 p-4"
+                      >
+                        <div className="space-y-2">
+                          <h4 className="text-sm font-medium">Result Data</h4>
+                          <pre className="text-xs bg-card rounded-md p-3 overflow-auto max-h-64 border">
+                            {JSON.stringify(run.result, undefined, 2)}
+                          </pre>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </Fragment>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      {pagination && pagination.totalPages > 1 && (
+        <div className="mt-4">
+          <Pagination
+            page={pagination.page}
+            totalPages={pagination.totalPages}
+            onPageChange={pagination.setPage}
+            total={pagination.total}
+            limit={pagination.limit}
+            onPageSizeChange={pagination.setLimit}
+            showTotal
+            showPageSize
+          />
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/HealthCheckSparkline.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import type { HealthCheckStatus } from "@checkmate-monitor/healthcheck-common";
+import { cn } from "@checkmate-monitor/ui";
+
+interface HealthCheckSparklineProps {
+  runs: Array<{
+    status: HealthCheckStatus;
+  }>;
+  className?: string;
+}
+
+const statusColors: Record<HealthCheckStatus, string> = {
+  healthy: "bg-success",
+  degraded: "bg-warning",
+  unhealthy: "bg-destructive",
+};
+
+/**
+ * Sparkline visualization showing recent health check runs.
+ * Each run is represented as a small colored rectangle.
+ * Runs are displayed newest (left) to oldest (right).
+ */
+export const HealthCheckSparkline: React.FC<HealthCheckSparklineProps> = ({
+  runs,
+  className,
+}) => {
+  // Ensure we show 25 slots (with empty placeholders if fewer runs)
+  const slots = Array.from({ length: 25 }, (_, i) => runs[i]?.status);
+
+  return (
+    <div className={cn("flex gap-0.5 items-center", className)}>
+      {slots.map((status, index) => (
+        <div
+          key={index}
+          className={cn(
+            "w-2 h-4 rounded-sm transition-all",
+            status ? statusColors[status] : "bg-muted/40"
+          )}
+          title={
+            status ? `Run ${index + 1}: ${status}` : `Run ${index + 1}: No data`
+          }
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/HealthCheckStatusTimeline.tsx

@@ -0,0 +1,190 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+import { format } from "date-fns";
+
+export interface StatusDataPoint {
+  timestamp: Date;
+  status: "healthy" | "degraded" | "unhealthy";
+}
+
+export interface AggregatedStatusDataPoint {
+  bucketStart: Date;
+  healthyCount: number;
+  degradedCount: number;
+  unhealthyCount: number;
+  runCount: number;
+  bucketSize: "hourly" | "daily";
+}
+
+type RawStatusTimelineProps = {
+  type: "raw";
+  data: StatusDataPoint[];
+  height?: number;
+};
+
+type AggregatedStatusTimelineProps = {
+  type: "aggregated";
+  data: AggregatedStatusDataPoint[];
+  height?: number;
+};
+
+type HealthCheckStatusTimelineProps =
+  | RawStatusTimelineProps
+  | AggregatedStatusTimelineProps;
+
+const statusColors = {
+  healthy: "hsl(var(--success))",
+  degraded: "hsl(var(--warning))",
+  unhealthy: "hsl(var(--destructive))",
+};
+
+/**
+ * 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.
+ */
+export const HealthCheckStatusTimeline: React.FC<
+  HealthCheckStatusTimelineProps
+> = (props) => {
+  const { height = 60 } = props;
+
+  if (props.data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground"
+        style={{ height }}
+      >
+        No status data available
+      </div>
+    );
+  }
+
+  const isAggregated = props.type === "aggregated";
+
+  // For raw data: transform to chart format
+  // For aggregated data: use stacked bar format
+  if (isAggregated) {
+    const aggData = props.data as AggregatedStatusDataPoint[];
+    const chartData = aggData.map((d) => ({
+      timestamp: d.bucketStart.getTime(),
+      healthy: d.healthyCount,
+      degraded: d.degradedCount,
+      unhealthy: d.unhealthyCount,
+      total: d.runCount,
+    }));
+
+    const timeFormat =
+      aggData[0]?.bucketSize === "daily" ? "MMM d" : "MMM d HH:mm";
+
+    return (
+      <ResponsiveContainer width="100%" height={height}>
+        <BarChart data={chartData} barGap={1}>
+          <XAxis
+            dataKey="timestamp"
+            type="number"
+            domain={["auto", "auto"]}
+            tickFormatter={(ts: number) => format(new Date(ts), timeFormat)}
+            stroke="hsl(var(--muted-foreground))"
+            fontSize={10}
+          />
+          <Tooltip
+            content={({ active, payload }) => {
+              if (!active || !payload?.length) return;
+              // Note: payload[0].payload is typed as `any` in recharts - this is a recharts limitation.
+              const data = payload[0].payload as (typeof chartData)[number];
+              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 mb-1">
+                    {format(new Date(data.timestamp), "MMM d, HH:mm")}
+                  </p>
+                  <div className="space-y-0.5">
+                    <p className="text-success">Healthy: {data.healthy}</p>
+                    <p className="text-warning">Degraded: {data.degraded}</p>
+                    <p className="text-destructive">
+                      Unhealthy: {data.unhealthy}
+                    </p>
+                  </div>
+                </div>
+              );
+            }}
+          />
+          <Bar dataKey="healthy" stackId="status" fill={statusColors.healthy} />
+          <Bar
+            dataKey="degraded"
+            stackId="status"
+            fill={statusColors.degraded}
+          />
+          <Bar
+            dataKey="unhealthy"
+            stackId="status"
+            fill={statusColors.unhealthy}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    );
+  }
+
+  // Raw data path
+  const rawData = props.data as StatusDataPoint[];
+  const chartData = rawData.toReversed().map((d) => ({
+    timestamp: d.timestamp.getTime(),
+    value: 1, // Fixed height for visibility
+    status: d.status,
+  }));
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <BarChart data={chartData} barGap={1}>
+        <XAxis
+          dataKey="timestamp"
+          type="number"
+          domain={["auto", "auto"]}
+          tickFormatter={(ts: number) => format(new Date(ts), "HH:mm")}
+          stroke="hsl(var(--muted-foreground))"
+          fontSize={10}
+        />
+        <Tooltip
+          content={({ active, payload }) => {
+            if (!active || !payload?.length) return;
+            // Note: payload[0].payload is typed as `any` in recharts - this is a recharts limitation.
+            const data = payload[0].payload as (typeof chartData)[number];
+            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">
+                  {format(new Date(data.timestamp), "MMM d, HH:mm:ss")}
+                </p>
+                <p className="font-medium capitalize">{data.status}</p>
+              </div>
+            );
+          }}
+        />
+        <Bar dataKey="value" radius={[2, 2, 0, 0]}>
+          {chartData.map((entry, index) => (
+            <Cell
+              key={index}
+              fill={statusColors[entry.status as keyof typeof statusColors]}
+            />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};