Files
supabase/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
T
Joshen LimandJonathan Summers-Muir 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

199 lines
6.2 KiB
TypeScript

import { Blocks, FileText, Lightbulb, List, Logs, Settings } from 'lucide-react'
import { ICON_SIZE, ICON_STROKE_WIDTH } from 'components/interfaces/Sidebar'
import { generateAuthMenu } from 'components/layouts/AuthLayout/AuthLayout.utils'
import { generateDatabaseMenu } from 'components/layouts/DatabaseLayout/DatabaseMenu.utils'
import { generateSettingsMenu } from 'components/layouts/ProjectSettingsLayout/SettingsMenu.utils'
import type { Route } from 'components/ui/ui.types'
import { EditorIndexPageLink } from 'data/prefetchers/project.$ref.editor'
import type { Project } from 'data/projects/project-detail-query'
import {
Auth,
Database,
EdgeFunctions,
Realtime,
Reports,
SqlEditor,
Storage,
TableEditor,
} from 'icons'
import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
export const generateToolRoutes = (
ref?: string,
project?: Project,
features?: { sqlEditorTabs: boolean }
): Route[] => {
const { sqlEditorTabs } = features ?? {}
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
return [
{
key: 'editor',
label: 'Table Editor',
icon: <TableEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/editor`),
linkElement: <EditorIndexPageLink projectRef={ref} />,
},
{
key: 'sql',
label: 'SQL Editor',
icon: <SqlEditor size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: !IS_PLATFORM
? `/project/${ref}/sql/1`
: ref &&
(isProjectBuilding ? buildingUrl : `/project/${ref}/sql${!!sqlEditorTabs ? '' : '/new'}`),
},
]
}
export const generateProductRoutes = (
ref?: string,
project?: Project,
features?: { auth?: boolean; edgeFunctions?: boolean; storage?: boolean; realtime?: boolean }
): Route[] => {
const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
const authEnabled = features?.auth ?? true
const edgeFunctionsEnabled = features?.edgeFunctions ?? true
const storageEnabled = features?.storage ?? true
const realtimeEnabled = features?.realtime ?? true
const databaseMenu = generateDatabaseMenu(project)
const authMenu = generateAuthMenu(ref as string)
return [
{
key: 'database',
label: 'Database',
icon: <Database size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link:
ref &&
(isProjectBuilding
? buildingUrl
: isProjectActive
? `/project/${ref}/database/schemas`
: `/project/${ref}/database/backups/scheduled`),
items: databaseMenu,
},
...(authEnabled
? [
{
key: 'auth',
label: 'Authentication',
icon: <Auth size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/auth/users`),
items: authMenu,
},
]
: []),
...(storageEnabled
? [
{
key: 'storage',
label: 'Storage',
icon: <Storage size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/storage/buckets`),
},
]
: []),
...(edgeFunctionsEnabled
? [
{
key: 'functions',
label: 'Edge Functions',
icon: <EdgeFunctions size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/functions`),
},
]
: []),
...(realtimeEnabled
? [
{
key: 'realtime',
label: 'Realtime',
icon: <Realtime size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/realtime/inspector`),
},
]
: []),
]
}
export const generateOtherRoutes = (
ref?: string,
project?: Project,
features?: { unifiedLogs?: boolean }
): Route[] => {
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
const buildingUrl = `/project/${ref}`
const showUnifiedLogs = features?.unifiedLogs ?? false
return [
{
key: 'advisors',
label: 'Advisors',
icon: <Lightbulb size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/advisors/security`),
},
...(IS_PLATFORM
? [
{
key: 'reports',
label: 'Reports',
icon: <Reports size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/reports`),
},
]
: []),
{
key: 'logs',
label: 'Logs',
icon: <List size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs`),
},
...(showUnifiedLogs
? [
{
key: 'unified-logs',
label: 'Unified Logs',
icon: <Logs size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/unified-logs`),
},
]
: []),
{
key: 'api',
label: 'API Docs',
icon: <FileText size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/api`),
},
{
key: 'integrations',
label: 'Integrations',
icon: <Blocks size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/integrations`),
},
]
}
export const generateSettingsRoutes = (ref?: string, project?: Project): Route[] => {
const settingsMenu = generateSettingsMenu(ref as string)
return [
...(IS_PLATFORM
? [
{
key: 'settings',
label: 'Project Settings',
icon: <Settings size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
link: ref && `/project/${ref}/settings/general`,
items: settingsMenu,
},
]
: []),
]
}