Logs

1.Rows expand into the full event

getRowCanExpand opts every row into expansion even though logs have no sub-rows. Clicking a row, or its chevron, renders a detail row with every field, including ones that are not columns, like region and duration.

useLogsTable({
  data,
  columns: [expandColumn, ...columns],
  getRowCanExpand: () => true,
  getExpandedRowModel: getExpandedRowModel(),
})

{row.getIsExpanded() && (
  <TableRow>
    <TableCell colSpan={row.getVisibleCells().length}>
      <LogFields log={row.original} />
    </TableCell>
  </TableRow>
)}

2.Level, service, and status share one multi-select

Each dropdown writes a string[] filter value on its column, checked by a single inList filterFn. Counts come from getFacetedUniqueValues(), which applies every other filter but not the column's own, so with billing selected the Level menu shows how many billing errors you would get by ticking Error.

<FacetedFilter
  column={table.getColumn('level')}
  title="Level"
  options={levels}
  renderIcon={(level) => <LevelDot level={level as LogLevel} />}
/>

3.Pick a start, then an end

Left to its defaults, react-day-picker turns the first click into a one-day range and later clicks only move one end, so there is no way to start a new range. The picker keeps a draft instead: the first click sets the start, the second sets the end in either direction, and only then does the column filter change. Days are read as UTC days to match the Time column.

function pickDay(day: Date) {
  if (!draft?.from || draft.to) {
    setDraft({ from: day, to: undefined })
    return
  }
  apply(
    day < draft.from
      ? { from: day, to: draft.from }
      : { from: draft.from, to: day },
  )
}

4.Status classes are a derived column

Nobody filters logs by "status 502"; they filter by 5xx. The Request column uses an accessorFn that turns the status code into its class, so faceting and filtering work on 2xx through 5xx while the cell still renders the exact code, method, and path.

{
  id: 'statusClass',
  accessorFn: (row) => toStatusClass(row.status),
  filterFn: inList,
  cell: ({ row }) => /* 502 GET /v1/projects */,
}

5.Search highlights what it matched

A custom globalFilterFn searches message, path, and request id, the things people paste from an alert. Cells read the same query from table.getState().globalFilter and wrap each match in a <mark>, so you can see why a row survived the filter.

cell: ({ row, table }) => (
  <Highlight
    text={row.original.message}
    query={table.getState().globalFilter}
  />
)

6.Load older events instead of paging

Paging through logs loses your place. The table keeps pageIndex at 0 and grows pageSize by 20 each time you ask for older events, so the list only ever gets longer and newest events stay at the top.

onClick={() => table.setPageSize((size) => size + PAGE_SIZE)}