4 Commits

Author SHA1 Message Date
Joshen Lim
84484be46d Support multi select logs and add CTA (#45974)
## Context

Supports selecting log rows and allow to copy / ask assistant for
selected rows, similar to what we had for the old logs UI
Selection will clear whenever the search parameters change

<img width="1448" height="413" alt="image"
src="https://github.com/user-attachments/assets/b81b359c-28c3-48a8-9895-e77327ebd33e"
/>


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

* **New Features**
  * Multi-row selection with an action header showing selected count
  * Copy selected logs as JSON or Markdown from a dropdown
* "Explain with AI" action to open the assistant pre-filled with
selected logs
  * Clear selection button

* **Refactor**
* Row/detail selection now syncs with the URL for shareable views and
improves next/previous navigation and panel behavior

* **Style**
  * Minor visual tweak to column level indicator dot size

<!-- 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/45974)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-20 20:03:52 +07:00
Joshen Lim
ebfec0df36 Improve click targets on property actions (#45936)
## Context

When opening the logs detail panel, some of the fields can be clicked to
add them as a filter. However the existing UX is that the clickable part
is just the text which makes it target small
<img width="233" height="127" alt="image"
src="https://github.com/user-attachments/assets/1d876bcc-05cf-464c-bdbe-907229be0586"
/>

Am opting the following:
- Make the whole row clickable
- Make all rows clickable with the main action being "Copy {column}"
- Only filterable columns will have the option to "Add as filter"

### After
<img width="483" height="153" alt="image"
src="https://github.com/user-attachments/assets/9d6e5479-fdbb-4609-839c-2bb7ad571b57"
/>
<img width="473" height="152" alt="image"
src="https://github.com/user-attachments/assets/f22197df-fa59-4e01-be00-2557260374f8"
/>


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

* **New Features**
* Row actions now consistently wrap rows and show a filter icon next to
the label when a resolved filter is available; copy menu displays "Copy
{label}".

* **Style**
* Standardized icon sizes and adjusted dropdown/row spacing; simplified
text wrap/truncate behavior for field values; minor status text color
refinement.

* **Bug Fixes**
* Dropdown row-action rendering made more robust to ensure menu wrappers
render reliably.

<!-- 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/45936)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 22:31:40 +08:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Joshen Lim
f223b455d6 Unified Logs (Part 1) (#36298)
* init new unified page

* moar logs

* init

* add infinite and live logs example

* Update useLogsPreview.tsx

* add more sources

* wrapped auth logs with edge logs

* add role and user id

* move unified logs

* init

* move demo pages. create a new directory to work in

* extracted beta unified logs into own components

* add example base page and components

* add new files to use actual logging query

* more organization

* change import

* adds new logs page. adds new query

* add data table to UI pacakges

* revert

* table styles

* text size

* add timestamp, table, icons for log types, status code styling

* add host

* add log count to edge functions

* starts to add dynamic filtering

* spiking trace UI

* Update status-code.ts

* add new linik

* now using POST

* fix chart data for default 1 hour view

* update API to accept POST requests

* new filters

* Update level.ts

* fixed up chart to work on level filter. split up the logic into new files

* prep for log type

* prepped query for WHERE

* fix: issue with white space in url param column parsing

* level param now being removed correctly.

* fix issue with chart showing wrong buckets for different time ranges

* remove old query

* refactor the queries into function for each source

* total count fixed

* lots of layout

* start fixing log counts

* comment out min and max for a while

* added trace logging prototype in

* random trace logs added for demo

* added logs and ui to view logs if any

* add Auth user

* fix the live logs issue

* some left over code

* Midway

* First pass refactor + clean up + reorganize files

* Fix TS issues

* Remove unused files

* Clean up

* Final clean up

* more clean up

* More clean up

* Remove unused packages

* Fix

* Lint

* Add feature flag for unified logs

* Refactor

* Remove trace UI

* Snake case log types

* more clean up

* More clean up

* Fix ts

* more clean up

* fixes

* add flag check and redirect if flag is false

* Update middleware.ts

* Nit lint

* Fix

* Last refactors

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-06-20 12:46:17 +08:00