@checkstack/healthcheck-frontend 0.5.0 → 0.7.0

package/src/components/AggregatedDataBanner.tsx

@@ -12,14 +12,14 @@ interface AggregatedDataBannerProps {
  */
 function formatDuration(seconds: number): string {
   if (seconds < 60) {
-    return `${seconds}s`;
+    return `~${seconds}s`;
   }
   if (seconds < 3600) {
     const mins = Math.round(seconds / 60);
-    return `${mins}min`;
+    return `~${mins}min`;
   }
   const hours = Math.round(seconds / 3600);
-  return `${hours}h`;
+  return `~${hours}h`;
 }
 
 /**

package/src/components/CollectorList.tsx

@@ -7,6 +7,7 @@ import {
   Card,
   CardContent,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   Label,
   Select,
@@ -157,62 +158,68 @@ export const CollectorList: React.FC<CollectorListProps> = ({
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle className="text-base">Check Items</CardTitle>
-        {addableCollectors.length > 0 && (
-          <Select value="" onValueChange={handleAdd}>
-            <SelectTrigger className="w-[200px]">
-              <Plus className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Add collector..." />
-            </SelectTrigger>
-            <SelectContent>
-              {/* Built-in collectors first */}
-              {builtInCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    Built-in
-                  </div>
-                  {builtInCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-              {/* External collectors */}
-              {externalCollectors.length > 0 && (
-                <>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    External
-                  </div>
-                  {externalCollectors
-                    .filter((c) => addableCollectors.some((a) => a.id === c.id))
-                    .map((collector) => (
-                      <SelectItem key={collector.id} value={collector.id}>
-                        <div className="flex items-center gap-2">
-                          <span>{collector.displayName}</span>
-                          {collector.allowMultiple && (
-                            <Badge variant="outline" className="text-xs">
-                              Multiple
-                            </Badge>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))}
-                </>
-              )}
-            </SelectContent>
-          </Select>
-        )}
+      <CardHeader>
+        <CardHeaderRow>
+          <CardTitle className="text-base">Check Items</CardTitle>
+          {addableCollectors.length > 0 && (
+            <Select value="" onValueChange={handleAdd}>
+              <SelectTrigger className="w-[200px]">
+                <Plus className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Add collector..." />
+              </SelectTrigger>
+              <SelectContent>
+                {/* Built-in collectors first */}
+                {builtInCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      Built-in
+                    </div>
+                    {builtInCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+                {/* External collectors */}
+                {externalCollectors.length > 0 && (
+                  <>
+                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                      External
+                    </div>
+                    {externalCollectors
+                      .filter((c) =>
+                        addableCollectors.some((a) => a.id === c.id),
+                      )
+                      .map((collector) => (
+                        <SelectItem key={collector.id} value={collector.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{collector.displayName}</span>
+                            {collector.allowMultiple && (
+                              <Badge variant="outline" className="text-xs">
+                                Multiple
+                              </Badge>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                  </>
+                )}
+              </SelectContent>
+            </Select>
+          )}
+        </CardHeaderRow>
       </CardHeader>
       <CardContent>
         {configuredCollectors.length === 0 ? (

package/src/components/ExpandedResultView.tsx

@@ -0,0 +1,140 @@
+/**
+ * ExpandedResultView - Displays health check result data in a structured format.
+ */
+
+interface ExpandedResultViewProps {
+  result: Record<string, unknown>;
+}
+
+/**
+ * Displays the result data in a structured format.
+ * Shows collector results as cards with key-value pairs.
+ */
+export function ExpandedResultView({ result }: ExpandedResultViewProps) {
+  const metadata = result.metadata as Record<string, unknown> | undefined;
+  const rawCollectors = metadata?.collectors;
+
+  // Type guard for collectors object
+  const collectors: Record<string, Record<string, unknown>> | undefined =
+    rawCollectors &&
+    typeof rawCollectors === "object" &&
+    !Array.isArray(rawCollectors)
+      ? (rawCollectors as Record<string, Record<string, unknown>>)
+      : undefined;
+
+  // Check if we have collectors to display
+  const collectorEntries = collectors ? Object.entries(collectors) : [];
+
+  // Extract connection time as typed value
+  const connectionTimeMs = metadata?.connectionTimeMs as number | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">Status: </span>
+          <span className="font-medium">{String(result.status)}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">Latency: </span>
+          <span className="font-medium">{String(result.latencyMs)}ms</span>
+        </div>
+        {connectionTimeMs !== undefined && (
+          <div>
+            <span className="text-muted-foreground">Connection: </span>
+            <span className="font-medium">{connectionTimeMs}ms</span>
+          </div>
+        )}
+      </div>
+
+      {collectorEntries.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Collector Results</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {collectorEntries.map(([collectorId, collectorResult]) => (
+              <CollectorResultCard
+                key={collectorId}
+                collectorId={collectorId}
+                result={collectorResult}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {result.message ? (
+        <div className="text-sm text-muted-foreground">
+          {String(result.message)}
+        </div>
+      ) : undefined}
+    </div>
+  );
+}
+
+interface CollectorResultCardProps {
+  collectorId: string;
+  result: Record<string, unknown>;
+}
+
+/**
+ * Card displaying a single collector's result values.
+ */
+function CollectorResultCard({
+  collectorId,
+  result,
+}: CollectorResultCardProps) {
+  if (!result || typeof result !== "object") {
+    return;
+  }
+
+  // Filter out null/undefined values
+  const entries = Object.entries(result).filter(
+    ([, value]) => value !== null && value !== undefined,
+  );
+
+  return (
+    <div className="rounded-md border bg-card p-3 space-y-2">
+      <h5 className="text-sm font-medium text-primary">{collectorId}</h5>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
+        {entries.map(([key, value]) => (
+          <div key={key} className="contents">
+            <span className="text-muted-foreground truncate">
+              {formatKey(key)}
+            </span>
+            <span className="font-mono text-xs truncate" title={String(value)}>
+              {formatValue(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Format a camelCase key to a readable label.
+ */
+function formatKey(key: string): string {
+  return key
+    .replaceAll(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/^./, (c) => c.toUpperCase());
+}
+
+/**
+ * Format a value for display.
+ */
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") {
+    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+  }
+  if (Array.isArray(value)) {
+    return value.length > 3
+      ? `[${value.slice(0, 3).join(", ")}…]`
+      : `[${value.join(", ")}]`;
+  }
+  if (typeof value === "object") return JSON.stringify(value);
+  const str = String(value);
+  return str.length > 50 ? `${str.slice(0, 47)}…` : str;
+}

package/src/components/HealthCheckDiagram.tsx

@@ -1,44 +1,4 @@
-import { ExtensionSlot } from "@checkstack/frontend-api";
 import { InfoBanner } from "@checkstack/ui";
-import {
-  HealthCheckDiagramSlot,
-  type HealthCheckDiagramSlotContext,
-} from "../slots";
-import { AggregatedDataBanner } from "./AggregatedDataBanner";
-
-interface HealthCheckDiagramProps {
-  /** The context from useHealthCheckData - handles both raw and aggregated modes */
-  context: HealthCheckDiagramSlotContext;
-  /** Whether the data is aggregated (for showing the info banner) */
-  isAggregated?: boolean;
-  /** The bucket interval in seconds (from aggregated response) */
-  bucketIntervalSeconds?: number;
-  /** The check interval in seconds (for comparison in banner) */
-  checkIntervalSeconds?: number;
-}
-
-/**
- * Component that renders the diagram extension slot with the provided context.
- * Expects parent component to fetch data via useHealthCheckData and pass context.
- */
-export function HealthCheckDiagram({
-  context,
-  isAggregated = false,
-  bucketIntervalSeconds,
-  checkIntervalSeconds,
-}: HealthCheckDiagramProps) {
-  return (
-    <>
-      {isAggregated && bucketIntervalSeconds && (
-        <AggregatedDataBanner
-          bucketIntervalSeconds={bucketIntervalSeconds}
-          checkIntervalSeconds={checkIntervalSeconds}
-        />
-      )}
-      <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />
-    </>
-  );
-}
 
 /**
  * Wrapper that shows access message when user lacks access.

package/src/components/HealthCheckHistory.tsx

@@ -26,10 +26,10 @@ export const HealthCheckHistory: React.FC<SlotProps> = (props) => {
 
   const healthCheckClient = usePluginClient(HealthCheckApi);
 
-  // Fetch history with useQuery
+  // Fetch history with useQuery - newest first for table view
   const { data, isLoading: loading } = healthCheckClient.getHistory.useQuery(
-    { systemId, configurationId, limit },
-    { enabled: true }
+    { systemId, configurationId, limit, sortOrder: "desc" },
+    { enabled: true },
   );
 
   const history = data?.runs ?? [];

package/src/components/HealthCheckLatencyChart.tsx

@@ -40,6 +40,7 @@ export const HealthCheckLatencyChart: React.FC<
 
     const chartData = buckets.map((d) => ({
       timestamp: new Date(d.bucketStart).getTime(),
+      bucketEndTimestamp: new Date(d.bucketEnd).getTime(),
       latencyMs: d.avgLatencyMs!,
       minLatencyMs: d.minLatencyMs,
       maxLatencyMs: d.maxLatencyMs,
@@ -54,7 +55,7 @@ export const HealthCheckLatencyChart: React.FC<
     const timeFormat =
       (buckets[0]?.bucketIntervalSeconds ?? 3600) >= 21_600
         ? "MMM d"
-        : "MMM d HH:mm";
+        : "MMM d, HH:mm";
 
     return (
       <ResponsiveContainer width="100%" height={height}>
@@ -90,6 +91,14 @@ export const HealthCheckLatencyChart: React.FC<
             content={({ active, payload }) => {
               if (!active || !payload?.length) return;
               const data = payload[0].payload as (typeof chartData)[number];
+              const startTime = format(
+                new Date(data.timestamp),
+                "MMM d, HH:mm",
+              );
+              const endTime = format(
+                new Date(data.bucketEndTimestamp),
+                "HH:mm",
+              );
               return (
                 <div
                   className="rounded-md border bg-popover p-2 text-sm shadow-md"
@@ -99,9 +108,9 @@ export const HealthCheckLatencyChart: React.FC<
                   }}
                 >
                   <p className="text-muted-foreground">
-                    {format(new Date(data.timestamp), "MMM d, HH:mm:ss")}
+                    {startTime} - {endTime}
                   </p>
-                  <p className="font-medium">{data.latencyMs}ms</p>
+                  <p className="font-medium">{data.latencyMs}ms (avg)</p>
                 </div>
               );
             }}
@@ -145,7 +154,8 @@ export const HealthCheckLatencyChart: React.FC<
     );
   }
 
-  const chartData = runs.toReversed().map((d) => ({
+  // Runs come in chronological order from API (oldest first, newest last)
+  const chartData = runs.map((d) => ({
     timestamp: new Date(d.timestamp).getTime(),
     latencyMs: d.latencyMs!,
   }));

package/src/components/HealthCheckList.tsx

@@ -11,14 +11,18 @@ import {
   TableHeader,
   TableRow,
   Button,
+  Badge,
 } from "@checkstack/ui";
-import { Trash2, Edit } from "lucide-react";
+import { Trash2, Edit, Pause, Play } from "lucide-react";
 
 interface HealthCheckListProps {
   configurations: HealthCheckConfiguration[];
   strategies: HealthCheckStrategyDto[];
   onEdit: (config: HealthCheckConfiguration) => void;
   onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage?: boolean;
 }
 
 export const HealthCheckList: React.FC<HealthCheckListProps> = ({
@@ -26,6 +30,9 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
   strategies,
   onEdit,
   onDelete,
+  onPause,
+  onResume,
+  canManage = true,
 }) => {
   const getStrategyName = (id: string) => {
     return strategies.find((s) => s.id === id)?.displayName || id;
@@ -39,24 +46,57 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
             <TableHead>Name</TableHead>
             <TableHead>Strategy</TableHead>
             <TableHead>Interval (s)</TableHead>
+            <TableHead>Status</TableHead>
             <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {configurations.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={4} className="h-24 text-center">
+              <TableCell colSpan={5} className="h-24 text-center">
                 No health checks configured.
               </TableCell>
             </TableRow>
           ) : (
             configurations.map((config) => (
-              <TableRow key={config.id}>
+              <TableRow
+                key={config.id}
+                className={config.paused ? "opacity-60" : ""}
+              >
                 <TableCell className="font-medium">{config.name}</TableCell>
                 <TableCell>{getStrategyName(config.strategyId)}</TableCell>
                 <TableCell>{config.intervalSeconds}</TableCell>
+                <TableCell>
+                  {config.paused ? (
+                    <Badge variant="secondary">Paused</Badge>
+                  ) : (
+                    <Badge variant="default">Active</Badge>
+                  )}
+                </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
+                    {canManage &&
+                      onPause &&
+                      onResume &&
+                      (config.paused ? (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onResume(config.id)}
+                          title="Resume health check"
+                        >
+                          <Play className="h-4 w-4" />
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => onPause(config.id)}
+                          title="Pause health check"
+                        >
+                          <Pause className="h-4 w-4" />
+                        </Button>
+                      ))}
                     <Button
                       variant="ghost"
                       size="icon"
@@ -64,14 +104,16 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
                     >
                       <Edit className="h-4 w-4" />
                     </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="text-destructive hover:text-destructive"
-                      onClick={() => onDelete(config.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    {canManage && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="text-destructive hover:text-destructive"
+                        onClick={() => onDelete(config.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
                   </div>
                 </TableCell>
               </TableRow>