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:
Jordi Enric committed 2026-08-26 12:17:22 +02:00
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' ||