Commit Graph
3 Commits
Author SHA1 Message Date
Ali Waseem 83992c55f7 feat(log-explorer): arrow key and deeper shortcuts for log explorer (#45989)
Closes
[FE-3378](https://linear.app/supabase/issue/FE-3378/featlogs-keyboard-shortcuts-for-function-logs-invocations-and-logs).

## Summary
Adds a shared shortcut registry for every `LogsPreviewer` surface —
Function Logs, Function Invocations, and the Logs Explorer — and brings
the grid keyboard model in line with the Auth Users / Table Editor
patterns.

## Shortcuts

| Key | Action |
| --- | --- |
| `↑` / `↓` | Move single-row selection; opens side panel |
| `Shift+Space` | Toggle current row in multi-select |
| `Mod+A` | Toggle all visible rows in multi-select |
| `Esc` | Staged: clear multi-select → close side panel |
| `Shift+R` | Refresh logs |
| `Shift+H` | Toggle histogram |
| `Shift+L` | Load older logs |
| `Shift+P` | Open time range picker |
| `Mod+Shift+J / M / C` | Copy selected rows as JSON / Markdown / CSV
(existing global handler) |

## Other changes
- `ShortcutTooltip` on search, refresh, histogram, load older, and
time-picker controls.
- `onSearchInputEscape` wired on the logs search bar (clear → blur).
- Visual row highlight (`rdg-row--focused`) when a row is
keyboard-focused or multi-selected.
- Multi-select copy dropdown gains a **Copy as CSV** entry and shows the
keybind on each item via `ShortcutBadge`.
- Manual arrow-nav (`navigate()`) updates `selectedRow` directly without
going through `onRowClick`, so multi-select checkmarks survive keyboard
navigation.

## Test plan
- [x] Function Logs and Function Invocations: all shortcuts above fire
while the page is mounted, no firing in other tabs.
- [x] Logs Explorer: same shortcuts work; copy keybinds still copy *all*
rows when nothing is multi-selected.
- [x] Arrow keys on first load select the first row even when the focus
sink is the active element.
- [x] Selecting rows via checkbox or `Shift+Space`, then pressing arrow
keys, preserves the checkmarks.
- [x] Escape on a populated search input clears it; Escape on an empty
input blurs it.
- [x] Esc with multi-select active clears the selection before closing
the side panel.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* CSV export for log selections (adds CSV alongside JSON and Markdown).
* New logs-preview keyboard shortcuts: search focus, refresh, chart
toggle, date picker, load older, navigation, and selection.

* **Improvements**
  * Shortcut badges and tooltip integration across the logs UI.
* Search input focus/ref support and controlled date-picker visibility.
  * Better no-results/error rendering and expanded copy dropdown sizing.

* **Tests**
  * Added CSV formatting tests covering RFC 4180 edge cases.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45989)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-19 15:25:47 +00:00
Jordi EnricandClaude Sonnet 4.6 e9d951a65c feat(logs): show edge function name in logs FE-2798 (#43967)
## Problem

The edge function logs table at
`/observability/logs/edge-functions-logs` did not show which edge
function was called. Users had to open individual log entries to find
the function name, even though the information is available in the log
data.

## Fix

- Added `request.pathname` to the SQL SELECT query for
`function_edge_logs` so the pathname is returned with each row.
- Added `extractEdgeFunctionName` utility that parses the last path
segment from the pathname (e.g. `/functions/v1/hello-world-1` becomes
`hello-world-1`).
- Updated `FunctionsEdgeColumnRender` to display the function name
between the HTTP method and the log ID columns.
- Added unit tests for `extractEdgeFunctionName` covering normal paths,
null/undefined, non-string values, and pathnames without slashes.

<img width="1472" height="776" alt="CleanShot 2026-03-19 at 13 18 47@2x"
src="https://github.com/user-attachments/assets/e437f7df-7aab-4ea5-b421-95bab3923605"
/>


## How to test

- Navigate to Logs and Analytics, then Edge Functions logs.
- Confirm each row now shows the function name (e.g. `hello-world-1`)
between the HTTP method and the log ID.
- Confirm rows without a pathname (e.g. non-platform or self-hosted)
still render without errors.
- Confirm clicking a row still opens the log detail panel correctly.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-20 09:39:22 +01:00
Jordi Enric 4b994fcb54 feat: copy multiple logs (#43218)
Allows users to select logs and copy their contents for debugging, or
pass them on to assistant with one click.

## To test
- go to logs or log explorer
- select some logs
- try copying as json, markdown, or sending it to assistant.
2026-03-06 13:24:37 +01:00