Link health grid cells to events

Author: k0ngk0ng

web/src/components/HealthGrid.tsx

@@ -1,11 +1,13 @@
 import { Fragment } from "react";
+import { Link } from "react-router-dom";
 import clsx from "clsx";
-import type { HealthCell } from "../api/types";
+import type { Filter, HealthCell } from "../api/types";
 import { formatTimestamp } from "../lib/utils";
 
 interface Props {
   // Outer = days (chronological), inner = 96 cells per day (15-minute spans).
   grid: HealthCell[][];
+  filter?: Filter;
 }
 
 function cellTone(cell: HealthCell, maxTotal: number): string {
@@ -19,7 +21,7 @@ function cellTone(cell: HealthCell, maxTotal: number): string {
   return "bg-success/40";
 }
 
-export default function HealthGrid({ grid }: Props) {
+export default function HealthGrid({ grid, filter }: Props) {
   if (!grid || grid.length === 0) {
     return (
       <div className="bg-panel border border-border rounded-lg p-6 text-muted text-sm text-center">
@@ -63,14 +65,27 @@ export default function HealthGrid({ grid }: Props) {
               </div>
               {days.map((day, di) => {
                 const cell = day.hours[hour];
+                const title = `${day.title} ${hourLabel(hour)} — ${cell.total} requests, ${cell.failed} failed${
+                  cell.bucket ? ` (${formatTimestamp(cell.bucket)})` : ""
+                }`;
                 return (
                   <div key={`${di}-${hour}`} className="flex h-3 items-center justify-center">
-                    <div
-                      className={clsx("h-3 w-3 rounded-[2px]", cellTone(cell, maxTotal))}
-                      title={`${day.title} ${hourLabel(hour)} — ${cell.total} requests, ${cell.failed} failed${
-                        cell.bucket ? ` (${formatTimestamp(cell.bucket)})` : ""
-                      }`}
-                    />
+                    {cell.total > 0 && cell.bucket ? (
+                      <Link
+                        to={{ pathname: "/events", search: eventSearch(cell, filter) }}
+                        className={clsx(
+                          "block h-3 w-3 rounded-[2px] transition-shadow hover:ring-1 hover:ring-accent focus:outline-none focus:ring-1 focus:ring-accent",
+                          cellTone(cell, maxTotal),
+                        )}
+                        title={title}
+                        aria-label={`Open events for ${title}`}
+                      />
+                    ) : (
+                      <div
+                        className={clsx("h-3 w-3 rounded-[2px]", cellTone(cell, maxTotal))}
+                        title={title}
+                      />
+                    )}
                   </div>
                 );
               })}
@@ -82,6 +97,32 @@ export default function HealthGrid({ grid }: Props) {
   );
 }
 
+function eventSearch(cell: HealthCell, filter?: Filter): string {
+  const start = new Date(cell.bucket);
+  if (Number.isNaN(start.getTime())) return "";
+  const end = new Date(start.getTime() + 60 * 60 * 1000);
+  const sp = new URLSearchParams();
+  sp.set("range", "custom");
+  sp.set("start", formatDateTimeParam(start));
+  sp.set("end", formatDateTimeParam(end));
+  for (const model of filter?.models ?? []) sp.append("model", model);
+  for (const source of filter?.sources ?? []) sp.append("source", source);
+  for (const key of filter?.apiKey ?? []) sp.append("api_key", key);
+  if (filter?.authIndex) sp.set("auth_index", filter.authIndex);
+  if (filter?.result) sp.set("result", filter.result);
+  return `?${sp.toString()}`;
+}
+
+function formatDateTimeParam(d: Date): string {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hour = String(d.getHours()).padStart(2, "0");
+  const minute = String(d.getMinutes()).padStart(2, "0");
+  const second = String(d.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
+}
+
 function hourlyCells(day: HealthCell[]): HealthCell[] {
   return Array.from({ length: 24 }, (_, hour) => {
     const cells = day.slice(hour * 4, hour * 4 + 4);

web/src/pages/Events.tsx

@@ -1,17 +1,22 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import FilterBar from "../components/FilterBar";
 import Table, { Column } from "../components/Table";
 import EventLogModal from "../components/EventLogModal";
 import { api } from "../api/client";
 import { todayFilter, useFilter } from "../hooks/useFilter";
 import { useRefreshTick } from "../lib/refresh";
 import { formatCost, formatLatency, formatNumber, formatTimestamp } from "../lib/utils";
-import type { UsageEventRecord, UsageEventsPage } from "../api/types";
+import type { Filter, RangeKey, ResultFilter, UsageEventRecord, UsageEventsPage } from "../api/types";
 
 const PAGE_SIZES = [20, 50, 100, 500, 1000];
+const RANGE_KEYS: RangeKey[] = ["all", "today", "4h", "8h", "12h", "24h", "7d", "30d", "custom"];
+const RESULT_KEYS: ResultFilter[] = ["", "success", "failed"];
 
 export default function EventsPage() {
-  const { filter, setFilter } = useFilter(todayFilter);
+  const [searchParams] = useSearchParams();
+  const initialFilter = useMemo(() => filterFromSearch(searchParams), [searchParams]);
+  const { filter, setFilter } = useFilter(initialFilter);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(100);
   const [data, setData] = useState<UsageEventsPage | null>(null);
@@ -158,6 +163,24 @@ export default function EventsPage() {
   );
 }
 
+function filterFromSearch(sp: URLSearchParams): Filter {
+  const rangeParam = sp.get("range");
+  const range = RANGE_KEYS.includes(rangeParam as RangeKey) ? (rangeParam as RangeKey) : todayFilter.range;
+  const resultParam = sp.get("result") ?? "";
+  const result = RESULT_KEYS.includes(resultParam as ResultFilter) ? (resultParam as ResultFilter) : "";
+  return {
+    ...todayFilter,
+    range,
+    start: range === "custom" ? sp.get("start") || undefined : undefined,
+    end: range === "custom" ? sp.get("end") || undefined : undefined,
+    models: sp.getAll("model"),
+    sources: sp.getAll("source"),
+    apiKey: sp.getAll("api_key"),
+    authIndex: sp.get("auth_index") || "",
+    result,
+  };
+}
+
 interface PageProps {
   total: number;
   page: number;

web/src/pages/Overview.tsx

@@ -105,7 +105,7 @@ export default function Overview() {
 
         <div>
           <h2 className="text-sm uppercase tracking-wider text-muted mb-2">Health</h2>
-          {data && <HealthGrid grid={data.health_grid || []} />}
+          {data && <HealthGrid grid={data.health_grid || []} filter={filter} />}
         </div>
       </div>
     </div>