mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
<img width="1454" height="786" alt="image" src="https://github.com/user-attachments/assets/995790b1-a242-4a61-a0a0-349de7234923" /> Stack 4/4 · previous: #50688 ## Problem Selecting several logs to copy or send to the Assistant meant using a separate checkbox column and a banner above the table. Clicking a row and checking a row were two different selections. ## Solution - Unified Logs uses `useTableRowSelection`, so a row click, Cmd/Ctrl-click, Shift-click, and the checkbox all act on one selection. The selection resets when the project or filters change, and a linked `?id=` still restores its log. - The level indicator and checkbox now share one column. The checkbox shows on hover, focus, or when the row is selected. - The detail panel shows every selected log: one log gets the tabs, and two or more show their combined JSON. Copy-as-JSON and "Explain with AI" move into the panel header (`LogSelectionActions`), replacing `RowSelectionHeader`. - New Shift+↑ / Shift+↓ shortcuts extend the selection, with a hint in the panel footer. Prev/next navigation follows display order and keeps the row in view. - `LogTypeIcon` no longer puts a nested button inside clickable rows. ## Review instructions 1. Click a log, then Shift-click another. The range should be selected and the panel should show the combined JSON. 2. Cmd-click to add or remove single logs. Use the copy button (or its shortcut) and "Explain with AI". 3. With the panel open, press Shift+↑ / Shift+↓ to grow and shrink the selection. 4. Change a filter. The selection should clear. ## Checklist - [ ] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **New Features** * Added multi-row selection in Unified Logs, including additive, range, checkbox, and keyboard selection. * Added bulk JSON viewing and copying, plus AI-assisted actions for selected logs. * Added Shift+Arrow shortcuts to extend selections and improved row navigation. * **Accessibility** * Improved labels and focus behavior for log controls and log type indicators. * **Bug Fixes** * Kept single-log Overview and Raw JSON views available alongside multi-log selection. * Applied metadata visibility settings to selected-log actions and disabled actions for invalid log data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
291 lines
9.1 KiB
TypeScript
291 lines
9.1 KiB
TypeScript
import { type Table as TTable } from '@tanstack/react-table'
|
|
import { cn } from 'ui'
|
|
|
|
import { LOG_TYPES_LABELS } from './UnifiedLogs.constants'
|
|
import { parseLogsFilterUrlParams } from './UnifiedLogs.filters'
|
|
import { ColumnSchema, FacetMetadataSchema } from './UnifiedLogs.schema'
|
|
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
|
|
import { Option } from '@/components/ui/DataTable/DataTable.types'
|
|
|
|
export type UnifiedLogType = keyof typeof LOG_TYPES_LABELS
|
|
|
|
export function getComputeLogsAvailability({
|
|
isPlatform,
|
|
flagsLoaded,
|
|
computeEnabled,
|
|
}: {
|
|
isPlatform: boolean
|
|
flagsLoaded?: boolean
|
|
computeEnabled: boolean
|
|
}) {
|
|
const flagsReady = flagsLoaded === true
|
|
|
|
return {
|
|
canQueryCompute: isPlatform && flagsReady && computeEnabled,
|
|
preserveComputeFilter: isPlatform && (!flagsReady || computeEnabled),
|
|
readyToSyncFilters: !isPlatform || flagsReady,
|
|
}
|
|
}
|
|
|
|
export const buildUnifiedLogsUrl = ({
|
|
projectRef,
|
|
logType,
|
|
user,
|
|
start,
|
|
end,
|
|
}: {
|
|
projectRef: string
|
|
logType?: UnifiedLogType
|
|
/** Pre-applies the cross-cutting "filter by user" (?user=) — an id or email. */
|
|
user?: string
|
|
start?: string | Date
|
|
end?: string | Date
|
|
}) => {
|
|
const params = new URLSearchParams()
|
|
if (logType) params.append('filter', `log_type:eq:${logType}`)
|
|
if (user) params.set('user', user)
|
|
if (start && end) {
|
|
params.set('date', `${new Date(start).valueOf()}-${new Date(end).valueOf()}`)
|
|
}
|
|
return `/project/${projectRef}/logs?${params.toString()}`
|
|
}
|
|
|
|
export const getFacetedUniqueValues = <TData>(facets?: Record<string, FacetMetadataSchema>) => {
|
|
return (_table: TTable<TData>, columnId: string) => {
|
|
return new Map(facets?.[columnId]?.rows?.map(({ value, total }) => [value, total]) || [])
|
|
}
|
|
}
|
|
|
|
export const getFacetedMinMaxValues = <TData>(facets?: Record<string, FacetMetadataSchema>) => {
|
|
return (_table: TTable<TData>, columnId: string) => {
|
|
const min = facets?.[columnId]?.min
|
|
const max = facets?.[columnId]?.max
|
|
if (typeof min === 'number' && typeof max === 'number') return [min, max]
|
|
if (typeof min === 'number') return [min, min]
|
|
if (typeof max === 'number') return [max, max]
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns a unified-logs row's timestamp in epoch milliseconds.
|
|
*
|
|
* The row mapper attaches a pre-parsed `date` (works for both BigQuery
|
|
* microsecond timestamps and OTEL ISO strings); fall back to the raw
|
|
* `timestamp` value when it's a number (older BQ-style microseconds).
|
|
*/
|
|
export function getRowTimestampMs(
|
|
row: { date?: Date | null; timestamp?: number | string | null } | null | undefined
|
|
): number | null {
|
|
if (row?.date instanceof Date) return row.date.getTime()
|
|
if (typeof row?.timestamp === 'number') return row.timestamp / 1000
|
|
return null
|
|
}
|
|
|
|
type ComputeRawLogData = Pick<ColumnSchema, 'id' | 'event_message' | 'metadata'> & {
|
|
timestamp: string | number
|
|
}
|
|
|
|
export function getRawLogData<T extends ComputeRawLogData>(row: T): T | ComputeRawLogData {
|
|
if (!('log_type' in row) || row.log_type !== 'compute') return row
|
|
|
|
return {
|
|
id: row.id,
|
|
timestamp: row.timestamp,
|
|
event_message: row.event_message,
|
|
metadata: row.metadata,
|
|
}
|
|
}
|
|
|
|
export const getLevelLabel = (value: (typeof LEVELS)[number]): string => {
|
|
switch (value) {
|
|
case 'success':
|
|
return '2xx'
|
|
case 'warning':
|
|
return '4xx'
|
|
case 'error':
|
|
return '5xx'
|
|
}
|
|
}
|
|
|
|
// Helper function to determine level from HTTP status code
|
|
export const getStatusLevel = (status?: number | string): string => {
|
|
if (!status) return 'success'
|
|
const statusNum = Number(status)
|
|
if (statusNum >= 500) return 'error'
|
|
if (statusNum >= 400) return 'warning'
|
|
if (statusNum >= 300) return 'info' // 3xx redirects are informational
|
|
if (statusNum >= 200) return 'success'
|
|
if (statusNum >= 100) return 'info'
|
|
return 'success'
|
|
}
|
|
|
|
export function getLevelRowClassName(value: (typeof LEVELS)[number] | null | undefined): string {
|
|
switch (value) {
|
|
case 'success':
|
|
return ''
|
|
case 'warning':
|
|
return cn(
|
|
'bg-warning/5 hover:bg-warning/10',
|
|
'data-[state=selected]:bg-warning/20 focus-visible:bg-warning/10',
|
|
'dark:bg-warning/10 dark:hover:bg-warning/20 dark:data-[state=selected]:bg-warning/30 dark:focus-visible:bg-warning/20'
|
|
)
|
|
case 'error':
|
|
return cn(
|
|
'bg-destructive/5 hover:bg-destructive/10',
|
|
'data-[state=selected]:bg-destructive/20 focus-visible:bg-destructive/10',
|
|
'dark:bg-error/10 dark:hover:bg-destructive/20 dark:data-[state=selected]:bg-destructive/30 dark:focus-visible:bg-destructive/20'
|
|
)
|
|
default:
|
|
return ''
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Formats service type strings for display purposes
|
|
* Handles special cases like "edge function" -> "Edge Function"
|
|
* and applies proper capitalization to other service types
|
|
*/
|
|
export function formatServiceTypeForDisplay(serviceType: string): string {
|
|
if (!serviceType) return ''
|
|
|
|
// Handle special cases
|
|
const specialCases: Record<string, string> = {
|
|
'edge function': 'Edge Function',
|
|
postgrest: 'PostgREST',
|
|
postgres: 'Postgres',
|
|
auth: 'Auth',
|
|
storage: 'Storage',
|
|
realtime: 'Realtime',
|
|
supavisor: 'Supavisor',
|
|
pgbouncer: 'PgBouncer',
|
|
multigres: 'Multigres',
|
|
}
|
|
|
|
return specialCases[serviceType.toLowerCase()] || serviceType
|
|
}
|
|
|
|
/**
|
|
* Parses an auth log event_message that may be a stringified JSON object.
|
|
* Auth log entries store metadata as JSON in event_message (e.g. {"msg":"...","level":"info"}).
|
|
* Extracts the human-readable msg field, falling back to error, then the raw string.
|
|
* The fallback ensures self-hosted versions with different formats still render correctly.
|
|
*/
|
|
export function parseAuthLogEventMessage(value: string | undefined): string | undefined {
|
|
if (!value) return value
|
|
|
|
try {
|
|
const parsed = JSON.parse(value)
|
|
|
|
if (parsed && typeof parsed === 'object') {
|
|
const err = parsed.error || parsed.error_code
|
|
if (typeof err === 'string' && err.trim()) {
|
|
return !/^\d{3}:/.test(err) ? err.replaceAll('_', ' ') : err
|
|
}
|
|
|
|
const msg = parsed.msg
|
|
if (typeof msg === 'string' && msg.trim()) {
|
|
const action = parsed.action ?? parsed.auth_event?.action
|
|
const authEvent = typeof action === 'string' ? action.replaceAll('_', ' ') : undefined
|
|
return `${authEvent ? `${authEvent}: ` : ''}${msg}`
|
|
}
|
|
}
|
|
|
|
return value
|
|
} catch (error) {
|
|
return value
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Parses a Multigres log event_message, which is a stringified JSON object
|
|
* (e.g. {"time":"...","level":"INFO","msg":"user pool capacity updated",...}).
|
|
* Extracts the human-readable msg field, falling back to the raw string so
|
|
* unexpected formats still render.
|
|
*/
|
|
export function parseMultigresEventMessage(value: string | undefined): string | undefined {
|
|
if (!value) return value
|
|
|
|
try {
|
|
const parsed = JSON.parse(value)
|
|
|
|
if (
|
|
parsed &&
|
|
typeof parsed === 'object' &&
|
|
typeof parsed.msg === 'string' &&
|
|
parsed.msg.trim()
|
|
) {
|
|
return parsed.msg
|
|
}
|
|
|
|
return value
|
|
} catch (error) {
|
|
return value
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the display text for a log row's event_message alongside whether it
|
|
* should be rendered as a capitalized sentence. Keeps the per-service parsing
|
|
* and its capitalization rule in one place so callers don't re-derive the list.
|
|
*/
|
|
export function getEventMessageDisplay(
|
|
logType: string,
|
|
value: string | undefined
|
|
): { message: string | undefined; capitalize: boolean } {
|
|
if (logType === 'auth') return { message: parseAuthLogEventMessage(value), capitalize: true }
|
|
if (logType === 'multigres')
|
|
return { message: parseMultigresEventMessage(value), capitalize: true }
|
|
return { message: value, capitalize: false }
|
|
}
|
|
|
|
export function gateLogTypeOptions<T extends { value: string; options?: Option[] }>(
|
|
fields: T[],
|
|
visibility: Partial<Record<UnifiedLogType, boolean>>
|
|
): T[] {
|
|
const hiddenLogTypes = new Set(
|
|
Object.entries(visibility)
|
|
.filter(([, visible]) => !visible)
|
|
.map(([logType]) => logType)
|
|
)
|
|
|
|
if (hiddenLogTypes.size === 0) return fields
|
|
|
|
return fields.map((field) => {
|
|
if (field.value !== 'log_type' || !field.options) return field
|
|
return {
|
|
...field,
|
|
options: field.options.filter((option) => !hiddenLogTypes.has(option.value)),
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Wraps a raw ILIKE/NOT ILIKE search term in `%...%` for a "contains" match,
|
|
* unless it already includes a `%` or `_` wildcard — in which case the user
|
|
* has crafted their own pattern and it's passed through unchanged.
|
|
*/
|
|
export function wrapIlikePattern(value: string): string {
|
|
return value.includes('%') || value.includes('_') ? value : `%${value}%`
|
|
}
|
|
|
|
export function gateLogTypeFilters(
|
|
filters: string[] | null | undefined,
|
|
visibility: Partial<Record<UnifiedLogType, boolean>>
|
|
): string[] | null | undefined {
|
|
if (!filters) return filters
|
|
|
|
const hiddenLogTypes = new Set(
|
|
Object.entries(visibility)
|
|
.filter(([, visible]) => !visible)
|
|
.map(([logType]) => logType)
|
|
)
|
|
|
|
if (hiddenLogTypes.size === 0) return filters
|
|
|
|
return filters.filter((filter) => {
|
|
const parsed = parseLogsFilterUrlParams([filter])[0]
|
|
return parsed?.column !== 'log_type' || !hiddenLogTypes.has(parsed.value)
|
|
})
|
|
}
|