mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
fix(studio): stop rendering Edge Function logs on the worker Logs tab
The tab queried the functions log source with a worker_name filter that source does not have. It now points at the CLI until the workers logs endpoint ships.
This commit is contained in:
1 parent
84f69cdbc3
commit
7aafae021b
3 files changed
+22
-47
No files matched your search
@@ -46,7 +46,6 @@ import { ensureProjectSeeded, useProjectWorkers } from '@/state/workers-mock-sta
|
||||
type WorkerTab = 'overview' | 'logs' | 'settings'
|
||||
const WORKER_TABS: WorkerTab[] = ['overview', 'logs', 'settings']
|
||||
|
||||
// Display order for the nav — Terminal is a disabled placeholder second to last.
|
||||
const TAB_ORDER: Array<WorkerTab | 'terminal'> = ['overview', 'logs', 'terminal', 'settings']
|
||||
|
||||
const TAB_LABEL: Record<WorkerTab, string> = {
|
||||
@@ -56,9 +55,7 @@ const TAB_LABEL: Record<WorkerTab, string> = {
|
||||
}
|
||||
|
||||
export const WorkerDetail = () => {
|
||||
const { ref, name } = useParams()
|
||||
const projectRef = ref as string
|
||||
const workerName = name as string
|
||||
const { ref: projectRef, name: workerName } = useParams()
|
||||
|
||||
const [tab, setTab] = useQueryState(
|
||||
'tab',
|
||||
@@ -68,12 +65,14 @@ export const WorkerDetail = () => {
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
ensureProjectSeeded(ref)
|
||||
}, [ref])
|
||||
ensureProjectSeeded(projectRef)
|
||||
}, [projectRef])
|
||||
|
||||
const workers = useProjectWorkers(ref)
|
||||
const workers = useProjectWorkers(projectRef)
|
||||
const worker = workers.find((w) => w.name === workerName)
|
||||
|
||||
if (!projectRef) return null
|
||||
|
||||
if (!worker) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
|
||||
@@ -174,7 +173,7 @@ export const WorkerDetail = () => {
|
||||
{tab === 'overview' && <WorkerOverviewTab projectRef={projectRef} worker={worker} />}
|
||||
{tab === 'logs' && (
|
||||
<PageContainer size="full" className="px-0 xl:px-0">
|
||||
<WorkerLogsTab projectRef={projectRef} workerName={worker.name} />
|
||||
<WorkerLogsTab workerName={worker.name} />
|
||||
</PageContainer>
|
||||
)}
|
||||
{tab === 'settings' && <WorkerSettingsTab worker={worker} />}
|
||||
|
||||
@@ -1,38 +1,20 @@
|
||||
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
|
||||
import { IS_PLATFORM } from '@/lib/constants'
|
||||
import { WorkerCommandLine } from '../WorkerCommandLine'
|
||||
import { CLI_NAME } from '@/lib/constants/workers'
|
||||
|
||||
interface WorkerLogsTabProps {
|
||||
projectRef: string
|
||||
workerName: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Reuses the Edge Functions Logs Explorer UI. Workers don't have a dedicated
|
||||
* log source in this prototype, so we point at the `functions` query type to
|
||||
* render the same explorer shell the demo audience already recognizes.
|
||||
*/
|
||||
export const WorkerLogsTab = ({ projectRef, workerName }: WorkerLogsTabProps) => {
|
||||
if (!IS_PLATFORM) {
|
||||
return (
|
||||
<div className="rounded-md border border-default bg-surface-100 px-6 py-10 text-center">
|
||||
<p className="text-sm text-foreground-light">
|
||||
Logs stream to Logflare on the hosted platform.
|
||||
</p>
|
||||
<p className="text-sm text-foreground-lighter">
|
||||
Run this project on Supabase to view worker logs here.
|
||||
</p>
|
||||
export const WorkerLogsTab = ({ workerName }: WorkerLogsTabProps) => (
|
||||
<div className="flex-1 rounded-md border border-default bg-surface-100 px-6 py-10">
|
||||
<div className="mx-auto max-w-md space-y-3 text-center">
|
||||
<p className="text-sm text-foreground">Worker logs are not in the dashboard yet</p>
|
||||
<p className="text-sm text-foreground-lighter">
|
||||
Stream them from the Supabase CLI until the logs endpoint ships.
|
||||
</p>
|
||||
<div className="pt-1 text-left">
|
||||
<WorkerCommandLine command={`supabase ${CLI_NAME} logs ${workerName} --follow`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1">
|
||||
<LogsPreviewer
|
||||
condensedLayout
|
||||
projectRef={projectRef}
|
||||
queryType="functions"
|
||||
filterOverride={{ 'metadata.worker_name': workerName }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
@@ -2,13 +2,7 @@ import type { ChartConfig } from 'ui'
|
||||
|
||||
import type { Worker } from '../Workers.types'
|
||||
|
||||
/**
|
||||
* Deterministic mock time-series for the worker Overview tab.
|
||||
*
|
||||
* Mirrors the design-system "parent with mixed child widths" example, adapted
|
||||
* for workers. Timestamps are derived from a fixed base (not `new Date()`) so
|
||||
* the server and client renders match and React doesn't warn on hydration.
|
||||
*/
|
||||
// Seeded time-series until the workers metrics endpoint ships.
|
||||
|
||||
export const CHART_INTERVALS = [
|
||||
{ key: '15min', label: '15 min', format: 'MMM D, h:mm:ssa', minutes: 15 },
|
||||
@@ -59,7 +53,7 @@ const pseudoNoise = (seed: number, amplitude = 1) => {
|
||||
export const getIntervalMinutes = (intervalKey: string) =>
|
||||
CHART_INTERVALS.find((item) => item.key === intervalKey)?.minutes ?? 60
|
||||
|
||||
/** States where the worker is not serving traffic — charts render empty. */
|
||||
// Not serving traffic, so the charts render empty rather than stale numbers.
|
||||
export const isIdleState = (worker: Pick<Worker, 'state'>) =>
|
||||
worker.state === 'suspended' ||
|
||||
worker.state === 'killed' ||
|
||||
|
||||
Reference in new issue
Block a user