Commit Graph

14 Commits

Author SHA1 Message Date
Saxon Fletcher
a224598f1e Decouple editor panel (#37707)
* decouple editor panel from global state

* refactor again

* dont close assistant

* remove async

* onsave props

* Fix TS errors

* Remove editorPanel state from app-state, use useHotKey hooks for keyboard shortcuts

* Minor UX improvements to EditorPanel

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-08-06 15:03:53 +07:00
Riccardo Busetti
0ecddf1901 feat(replication): Implement UI to render pipeline replication status (#37376) 2025-07-24 13:04:07 +02:00
Jonathan Summers-Muir
8d6e668b36 fix: Prevent arrow key propagation in filter command (#37250)
Prevent arrow key propagation in filter command

Adds an onKeyDown handler to stop ArrowUp and ArrowDown key events from propagating to parent components in DataTableFilterCommand. This prevents unintended navigation behavior when using the filter input.
2025-07-18 03:02:26 +08:00
Jonathan Summers-Muir
ef2fbb88c4 Feat/logs date refactor (#37243)
* Integrate LogsDatePicker into DataTable timerange filter

Replaces DatePickerWithRange with LogsDatePicker in DataTableFilterTimerange, enabling use of helper presets and improved date range selection. Adds support for passing button props and synchronizes filter value logic with the new date picker component.

* Add upgrade prompt for log date range limit

Introduces an upgrade prompt when users select a log date range that exceeds their current plan's retention limits. Uses `maybeShowUpgradePrompt` and `useCurrentOrgPlan` to determine when to show the prompt, improving user awareness of plan restrictions.
2025-07-17 20:07:00 +08:00
Joshen Lim
22f937c954 Chore/async filters for unified logs (#37200)
* Refactor retrieval of log counts

* Async filters

* Clean up

* Clean up

* Fix
2025-07-17 17:33:17 +08:00
Jonathan Summers-Muir
41a5c39305 Feat/logs preview (#37230)
* Add unified logs feature preview and toggle controls

Introduces a unified logs feature preview, allowing users to enable or disable a new logs interface with enhanced filtering and real-time updates. Adds context hooks, UI components (UnifiedLogsPreview, LogsSwitchBox), and conditional logic to display the new interface or revert to the old one. Updates routing and feature preview modal to support the unified logs preview, and extends local storage keys for feature flag management.

* Refactor log UI components and remove LogsSwitchBox

Replaced custom SVG icons with Lucide React icons in LogsSidebarMenuV2 and FilterSideBar for consistency and maintainability. Removed the unused LogsSwitchBox component and cleaned up related imports in FeaturePreviewModal.

* Refactor sidebar panels to use FeaturePreviewSidebarPanel

Introduces a reusable FeaturePreviewSidebarPanel component and replaces InnerSideBarEmptyPanel usages in LogsSidebarMenuV2 and FilterSideBar. Removes unified logs feature flag logic from Sidebar and NavigationBar.utils, simplifying route generation and UI logic.

* Refine sidebar panel styles and remove unused icon

Removed the unused Sparkles icon import from LogsSidebarMenuV2. Updated FeaturePreviewSidebarPanel to use 'bg-muted/10' for background, simplified class names for text alignment, and cleaned up redundant text-left classes for improved styling consistency.

* Update FeaturePreviewModal.tsx

* Update FeaturePreview.constants.tsx

* Clean up

* Final clean up

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-07-17 16:14:04 +08:00
Joshen Lim
3a78738b14 chore/unified-logs-fixes-04b (#37150)
* Shift fixes from https://github.com/supabase/supabase/pull/36762

* Add comment
2025-07-16 00:07:19 +08:00
Joshen Lim
620805a1ac chore/unified-logs-fixes-03 (#36725)
* Improve function logs styling + add copy button

* Add tooltips for buttons in toolbar

* Remove 'info' from levels

* Add export logs to csv and json functionality

* Add duration selection for download logs if no time range specified in search

* Fix TS

* Fix TS

* Update DataTableColumnStatusCode.tsx

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-07-10 09:13:10 +00:00
Jonathan Summers-Muir
02a6392758 Feat/unified logs live filter enums (#36913)
* Update QueryOptions.ts

* Create UnifiedLogs_InspectionPanel_Architecture.md

* init new queries

* Create UnifiedLogs_ServiceFlow_Implementation_Plan.md

* Add service flow blocks to UnifiedLogs panel

Introduces ServiceFlowBlocks components to visually represent the service flow in UnifiedLogs, including Origin, Network, PostgREST, Postgres, and Response steps. Adds utility formatters and updates ServiceFlowPanel to render the new blocks with enriched data and loading/error states.

* Enable filterable fields in ServiceFlow blocks

Refactored ServiceFlow blocks to support filterable fields by passing filterFields and table props, updating BlockField to render filterable values as clickable actions, and aligning field configs with filterable IDs. Updated ServiceFlowPanel to use new block names and pass required props. This enhances interactivity and consistency in the UnifiedLogs service flow UI.

* Update ServiceFlowBlocks.tsx

* Enhance Service Flow with enriched fields and filtering

Expanded the Service Flow SQL query to extract 35+ flattened, meaningful fields including request, response, client location, network, headers, and JWT data. Updated the implementation plan to reflect new block architecture, filtering integration, and future enhancements. Added debug logging for enriched and raw log data in ServiceFlowPanel.

* Start adding inspection panel

* Moar logs

* Add Postgres service flow support to Unified Logs

Introduces Postgres as a first-class service flow type in Unified Logs, including SQL query, type definitions, UI blocks, and filtering. Updates ServiceFlow queries, types, and UI components to display enriched Postgres log details and event messages. Also refines filter fields, log type ordering, and minor UI adjustments for clarity and consistency.

* Lots of tidying up, moving blocks into their own files.

* Remove UnifiedLogs architecture and service flow docs

Deleted documentation files related to UnifiedLogs inspection panel architecture, service flow field mapping, implementation plan, and integration example. This cleans up outdated or redundant design and implementation reference materials.

* Refactor service flow blocks to use unified config system

Replaces individual service block components with a generic, config-driven system. Introduces a shared Block component and centralizes block configuration in blockConfigs.ts, reducing duplication and improving maintainability. Updates imports and removes now-unnecessary block files. Also refactors ServiceFlowPanel to use the new block structure and simplifies layer icon logic.

* Refactor ServiceFlow blocks and utilities structure

Consolidates edge service flow SQL queries to reduce duplication, removes ServiceFlowBlocks.tsx in favor of more modular block/component structure, and moves storage-specific utilities to a new utils/storageUtils.ts file. Updates imports in config files and ServiceFlowPanel to reflect the new structure. Type definitions are clarified and extended in types.ts.

* Update ServiceFlow.sql.ts

* Refactor ServiceFlow types for stronger type safety

Replaces generic 'any' types with specific types such as ColumnSchema, QuerySearchParamsType, and SearchParamsType in ServiceFlow components and ServiceFlowPanel. This improves type safety and code clarity, and removes unused metadata and workaround variables from ServiceFlowPanel.

* Remove debug flags and console logs from ServiceFlow components

Eliminated unused DEBUG_SERVICE_FLOW flags and related console logging from ServiceFlow.sql.ts and ServiceFlowPanel.tsx to clean up the codebase and reduce unnecessary output.

* Remove unused log query and filtering functions

Deleted unused functions related to log level filtering, base condition building, and the edge/supavisor logs queries. This cleanup simplifies the UnifiedLogs.queries.ts file by removing legacy or currently unused code.

* revert

* Remove ServiceFlow panel and types, update DataTableToolbar

Deleted the ServiceFlowPanel component and its associated types from the UnifiedLogs interface. Updated DataTableToolbar to toggle between PanelLeftClose and PanelLeftOpen icons based on the open state.

* Remove unused totalRows prop from DataTable

Eliminates the totalRows prop from UnifiedLogs and its context interface, as it is no longer used. This helps clean up the component API and related type definitions.

* Refactor log field configs and unify event message component

Replaces specialized PostgresEventMessage with a generic EventMessage component and updates references accordingly. Consolidates all log field configuration files into serviceFlowFields.ts, removing separate config files for each service. Cleans up unused types and utility imports, and deletes redundant formatters.

* Enhance UnifiedLogs filters and facets handling

Added PATCH to allowed HTTP methods and improved status code rendering in filters. Changed Host, Pathname, and Auth User filters to use dynamic checkbox options populated from facets. Updated SQL queries to provide global facets for hardcoded fields and filtered facets for dynamic fields, and fixed field naming for path/pathname consistency. Improved UI to show an empty state when no filter options are available.

* Fix method options mapping and add debug logs

Corrects the mapping variable name in UnifiedLogs.fields.tsx from 'region' to 'method' for clarity. Adds debug console logs in unified-logs-count-query.ts to inspect count query responses and help diagnose missing data.

* Show empty state for Postgres block with no data

Added logic to display an empty state in the Postgres block when no Postgres data is available in non-Postgres logs. Also updated ServiceFlowPanel to render both PostgREST and Postgres blocks, ensuring the empty state is shown when appropriate.

* Remove Log Details tab from ServiceFlowPanel

The Log Details tab and its associated content have been removed from the ServiceFlowPanel component. This simplifies the UI by focusing on the Overview and Raw JSON tabs.

* Enhance UnifiedLogs filters with status code labels and facet logic

Added human-readable labels for HTTP and Postgres status codes and improved the UnifiedLogs filter UI to display these labels. Refactored the logs count query to avoid self-filtering for facet counts, ensuring accurate facet behavior. Improved filter option rendering for better usability and consistency, and updated input styling for filter search.

* Update UnifiedLogs.queries.ts

* Update UnifiedLogs.queries.ts

* Update apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx

* Refactor UnifiedLogs layout and improve service type formatting

Refactored UnifiedLogs.tsx to use a more flexible ResizablePanelGroup layout, replaced inline function logs panel with a new LogsListPanel component, and removed unused imports and code. Updated ServiceFlow.sql.ts to simplify JWT payload extraction and added a dedicated query for edge function service flow. Added a utility to format service type strings for display in UnifiedLogs.utils.ts.

* Refactor logs UI and improve service flow handling

Renamed FunctionLogsTab to LogsList and added a new LogsListPanel for displaying function logs in a side panel. Improved ServiceFlowPanel with better panel sizing, conditional query enabling, and UI adjustments. Enhanced EventMessage with badge styling and service type formatting. Updated CollapsibleSection for cleaner layout. Enabled debug mode in unified-log-inspection-query. Updated FilterSideBar to use ResizablePanel for improved layout flexibility.

* Refactor UnifiedLogs UI and ServiceFlow query fields

Removes unused skeletonClassName from BlockFieldConfig and related UI, simplifies ServiceFlow SQL query by returning null for unused JWT fields, and updates UnifiedLogs and LogsListPanel for improved layout and collapsible logs panel. Also adjusts table and log list row heights for better visual consistency.

* Update ServiceFlowHeader.tsx

* Update ServiceFlowHeader.tsx

* Refactor ServiceFlowPanel and header tooltip logic

Replaces custom tooltip implementation in ServiceFlowHeader with ButtonTooltip for navigation buttons. Simplifies serviceFlowType logic in ServiceFlowPanel by removing the getServiceFlowType helper and using direct mapping, reducing code complexity.

* Update UnifiedLogs.constants.tsx

* Remove commented code and add doc comment in UnifiedLogs

Removed an unused commented-out span in UnifiedLogs.fields.tsx and added a documentation comment for the Supabase storage logs query fragment in UnifiedLogs.queries.ts.

* Update UnifiedLogs.tsx

* Remove 'live' level from DataTable components

Eliminated the 'live' level from LEVELS constant and related color utility logic. Also removed commented code and references to 'live' in DataTableFilterControls and LiveRow, streamlining the DataTable component's status handling.

* Update UnifiedLogs.constants.tsx

* cleanup

* remove console logs

* Update status filter parsing to use string arrays

Changed the status filter in UnifiedLogs to parse and validate as arrays of strings instead of numbers. This affects both the search params parser and the column filter schema, aligning the status filter handling with other string-based filters.

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-07-09 11:35:20 +08:00
Jonathan Summers-Muir
1e3b5063bb Feat/unified logs inspection panel (#36895)
* Update QueryOptions.ts

* Create UnifiedLogs_InspectionPanel_Architecture.md

* init new queries

* Create UnifiedLogs_ServiceFlow_Implementation_Plan.md

* Add service flow blocks to UnifiedLogs panel

Introduces ServiceFlowBlocks components to visually represent the service flow in UnifiedLogs, including Origin, Network, PostgREST, Postgres, and Response steps. Adds utility formatters and updates ServiceFlowPanel to render the new blocks with enriched data and loading/error states.

* Enable filterable fields in ServiceFlow blocks

Refactored ServiceFlow blocks to support filterable fields by passing filterFields and table props, updating BlockField to render filterable values as clickable actions, and aligning field configs with filterable IDs. Updated ServiceFlowPanel to use new block names and pass required props. This enhances interactivity and consistency in the UnifiedLogs service flow UI.

* Update ServiceFlowBlocks.tsx

* Enhance Service Flow with enriched fields and filtering

Expanded the Service Flow SQL query to extract 35+ flattened, meaningful fields including request, response, client location, network, headers, and JWT data. Updated the implementation plan to reflect new block architecture, filtering integration, and future enhancements. Added debug logging for enriched and raw log data in ServiceFlowPanel.

* Start adding inspection panel

* Moar logs

* Add Postgres service flow support to Unified Logs

Introduces Postgres as a first-class service flow type in Unified Logs, including SQL query, type definitions, UI blocks, and filtering. Updates ServiceFlow queries, types, and UI components to display enriched Postgres log details and event messages. Also refines filter fields, log type ordering, and minor UI adjustments for clarity and consistency.

* Lots of tidying up, moving blocks into their own files.

* Remove UnifiedLogs architecture and service flow docs

Deleted documentation files related to UnifiedLogs inspection panel architecture, service flow field mapping, implementation plan, and integration example. This cleans up outdated or redundant design and implementation reference materials.

* Refactor service flow blocks to use unified config system

Replaces individual service block components with a generic, config-driven system. Introduces a shared Block component and centralizes block configuration in blockConfigs.ts, reducing duplication and improving maintainability. Updates imports and removes now-unnecessary block files. Also refactors ServiceFlowPanel to use the new block structure and simplifies layer icon logic.

* Refactor ServiceFlow blocks and utilities structure

Consolidates edge service flow SQL queries to reduce duplication, removes ServiceFlowBlocks.tsx in favor of more modular block/component structure, and moves storage-specific utilities to a new utils/storageUtils.ts file. Updates imports in config files and ServiceFlowPanel to reflect the new structure. Type definitions are clarified and extended in types.ts.

* Update ServiceFlow.sql.ts

* Refactor ServiceFlow types for stronger type safety

Replaces generic 'any' types with specific types such as ColumnSchema, QuerySearchParamsType, and SearchParamsType in ServiceFlow components and ServiceFlowPanel. This improves type safety and code clarity, and removes unused metadata and workaround variables from ServiceFlowPanel.

* Remove debug flags and console logs from ServiceFlow components

Eliminated unused DEBUG_SERVICE_FLOW flags and related console logging from ServiceFlow.sql.ts and ServiceFlowPanel.tsx to clean up the codebase and reduce unnecessary output.

* Remove unused log query and filtering functions

Deleted unused functions related to log level filtering, base condition building, and the edge/supavisor logs queries. This cleanup simplifies the UnifiedLogs.queries.ts file by removing legacy or currently unused code.

* revert

* Remove ServiceFlow panel and types, update DataTableToolbar

Deleted the ServiceFlowPanel component and its associated types from the UnifiedLogs interface. Updated DataTableToolbar to toggle between PanelLeftClose and PanelLeftOpen icons based on the open state.

* Remove unused totalRows prop from DataTable

Eliminates the totalRows prop from UnifiedLogs and its context interface, as it is no longer used. This helps clean up the component API and related type definitions.

* Refactor log field configs and unify event message component

Replaces specialized PostgresEventMessage with a generic EventMessage component and updates references accordingly. Consolidates all log field configuration files into serviceFlowFields.ts, removing separate config files for each service. Cleans up unused types and utility imports, and deletes redundant formatters.

* Show empty state for Postgres block with no data

Added logic to display an empty state in the Postgres block when no Postgres data is available in non-Postgres logs. Also updated ServiceFlowPanel to render both PostgREST and Postgres blocks, ensuring the empty state is shown when appropriate.

* Remove Log Details tab from ServiceFlowPanel

The Log Details tab and its associated content have been removed from the ServiceFlowPanel component. This simplifies the UI by focusing on the Overview and Raw JSON tabs.

* Update UnifiedLogs.queries.ts

* Update UnifiedLogs.queries.ts

* Update apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx

* Refactor UnifiedLogs layout and improve service type formatting

Refactored UnifiedLogs.tsx to use a more flexible ResizablePanelGroup layout, replaced inline function logs panel with a new LogsListPanel component, and removed unused imports and code. Updated ServiceFlow.sql.ts to simplify JWT payload extraction and added a dedicated query for edge function service flow. Added a utility to format service type strings for display in UnifiedLogs.utils.ts.

* Refactor logs UI and improve service flow handling

Renamed FunctionLogsTab to LogsList and added a new LogsListPanel for displaying function logs in a side panel. Improved ServiceFlowPanel with better panel sizing, conditional query enabling, and UI adjustments. Enhanced EventMessage with badge styling and service type formatting. Updated CollapsibleSection for cleaner layout. Enabled debug mode in unified-log-inspection-query. Updated FilterSideBar to use ResizablePanel for improved layout flexibility.

* Refactor UnifiedLogs UI and ServiceFlow query fields

Removes unused skeletonClassName from BlockFieldConfig and related UI, simplifies ServiceFlow SQL query by returning null for unused JWT fields, and updates UnifiedLogs and LogsListPanel for improved layout and collapsible logs panel. Also adjusts table and log list row heights for better visual consistency.

* Update ServiceFlowHeader.tsx

* Update ServiceFlowHeader.tsx

* Refactor ServiceFlowPanel and header tooltip logic

Replaces custom tooltip implementation in ServiceFlowHeader with ButtonTooltip for navigation buttons. Simplifies serviceFlowType logic in ServiceFlowPanel by removing the getServiceFlowType helper and using direct mapping, reducing code complexity.

* Update UnifiedLogs.constants.tsx

* Remove commented code and add doc comment in UnifiedLogs

Removed an unused commented-out span in UnifiedLogs.fields.tsx and added a documentation comment for the Supabase storage logs query fragment in UnifiedLogs.queries.ts.

* Update UnifiedLogs.tsx

* Remove 'live' level from DataTable components

Eliminated the 'live' level from LEVELS constant and related color utility logic. Also removed commented code and references to 'live' in DataTableFilterControls and LiveRow, streamlining the DataTable component's status handling.

* Update UnifiedLogs.constants.tsx

* cleanup

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-07-08 20:00:23 +08:00
Joshen Lim
307f2843e1 Chore/unified logs fixes 02 (#36710)
* Temporarily disable cmd K shortcut for searching unified logs

* Update placeholder for search input

* Fix getLogsCountQuery for method

* Standardize pathname parameter

* Fix refresh button
2025-06-27 18:58:50 +08:00
Joshen Lim
ec43e11c11 Chore/fix unified logs (#36650)
* Fix z-index position of row

* Fix column widths to make it fit a laptop viewport better

* Fix auto fetching when scrolling to the bottom

* Small style fixes + decouple count loading state from table loading state

* Refactor row uuid to just id, add de-duping logic to logs data, standardise unified logs query options

* Clean up logs

* Misc styling tweaks

* Reinstate prev cursor and direction for live mode

* Clean

* Revert text sizes

* Remove now resolved comments
2025-06-26 16:45:45 +08:00
Joshen Lim
2808931f92 Chore/refactor unified logs infinite queries (#36598)
* Split unified logs count into its own infinite query and refactor main UI to use that new query

* Split unified logs into its own infinite query and refactor main UI to use that new query

* Shift useChartData into unified-logs-chart-query, and refactor main UI to use that new query

* Rename unified-logs-query to unified-logs-infinite-query

* Remove uuid and live params from query string in react queries for unified logs
2025-06-24 16:28:00 +08: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